chore: cleanup useEffect

AGENTS.md

@@ -1,57 +0,0 @@
-# Agent Guidelines for Documenso
-
-## Build/Test/Lint Commands
-
-- `npm run build` - Build all packages
-- `npm run lint` - Lint all packages
-- `npm run lint:fix` - Auto-fix linting issues
-- `npm run test:e2e` - Run E2E tests with Playwright
-- `npm run test:dev -w @documenso/app-tests` - Run single E2E test in dev mode
-- `npm run test-ui:dev -w @documenso/app-tests` - Run E2E tests with UI
-- `npm run format` - Format code with Prettier
-- `npm run dev` - Start development server for Remix app
-
-## Code Style Guidelines
-
-- Use TypeScript for all code; prefer `type` over `interface`
-- Use functional components with `const Component = () => {}`
-- Never use classes; prefer functional/declarative patterns
-- Use descriptive variable names with auxiliary verbs (isLoading, hasError)
-- Directory names: lowercase with dashes (auth-wizard)
-- Use named exports for components
-- Never use 'use client' directive
-- Never use 1-line if statements
-- Structure files: exported component, subcomponents, helpers, static content, types
-
-## Error Handling & Validation
-
-- Use custom AppError class when throwing errors
-- When catching errors on the frontend use `const error = AppError.parse(error)` to get the error code
-- Use early returns and guard clauses
-- Use Zod for form validation and react-hook-form for forms
-- Use error boundaries for unexpected errors
-
-## UI & Styling
-
-- Use Shadcn UI, Radix, and Tailwind CSS with mobile-first approach
-- Use `<Form>` `<FormItem>` elements with fieldset having `:disabled` attribute when loading
-- Use Lucide icons with longhand names (HomeIcon vs Home)
-
-## TRPC Routes
-
-- Each route in own file: `routers/teams/create-team.ts`
-- Associated types file: `routers/teams/create-team.types.ts`
-- Request/response schemas: `Z[RouteName]RequestSchema`, `Z[RouteName]ResponseSchema`
-- Only use GET and POST methods in OpenAPI meta
-- Deconstruct input argument on its own line
-- Prefer route names such as get/getMany/find/create/update/delete
-- "create" routes request schema should have the ID and data in the top level
-- "update" routes request schema should have the ID in the top level and the data in a nested "data" object
-
-## Translations & Remix
-
-- Use `<Trans>string</Trans>` for JSX translations from `@lingui/react/macro`
-- Use `t\`string\`` macro for TypeScript translations
-- Use `(params: Route.Params)` and `(loaderData: Route.LoaderData)` for routes
-- Directly return data from loaders, don't use `json()`
-- Use `superLoaderJson` when sending complex data through loaders such as dates or prisma decimals

README.md

@@ -214,6 +214,8 @@ For detailed instructions on how to configure and run the Docker container, plea
 
 We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!
 
+> Please note that the below deployment methods are for v0.9, we will update these to v1.0 once it has been released.
+
 ### Fetch, configure, and build
 
 First, clone the code from Github:
@@ -256,7 +258,7 @@ npm run start
 
 This will start the server on `localhost:3000`. For now, any reverse proxy can then do the frontend and SSL termination.
 
-> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/remix` folder.
+> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
 
 ### Run as a service
 
@@ -306,7 +308,7 @@ The Web UI can be found at http://localhost:9000, while the SMTP port will be on
 
 ### Support IPv6
 
-If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Remix start command
+If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Next.js start command
 
 For local docker run
 

SIGNING.md

@@ -18,7 +18,7 @@ For the digital signature of your documents you need a signing certificate in .p
 
 4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
 
-5. Place the certificate `/apps/remix/resources/certificate.p12` (If the path does not exist, it needs to be created)
+5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
 
 ## Docker
 

apps/documentation/pages/developers/contributing/contributing-translations.mdx

@@ -25,7 +25,7 @@ The translation files are organized into folders represented by their respective
 Each PO file contains translations which look like this:
 
 ```po
-#: apps/remix/app/(signing)/sign/[token]/no-longer-available.tsx:61
+#: apps/web/src/app/(signing)/sign/[token]/no-longer-available.tsx:61
 msgid "Want to send slick signing links like this one? <0>Check out Documenso.</0>"
 msgstr "Möchten Sie auffällige Signatur-Links wie diesen senden? <0>Überprüfen Sie Documenso.</0>"
 ```

apps/documentation/pages/developers/self-hosting/how-to.mdx

@@ -54,7 +54,7 @@ Install the project dependencies as follows:
 
 ```bash
 npm i
-npm run build
+npm run build:web
 npm run prisma:migrate-deploy
 ```
 
@@ -69,7 +69,7 @@ npm run start
 This will start the server on `localhost:3000`. Any reverse proxy can handle the front end and SSL termination.
 
 <Callout type="info">
- If you want to run with another port than `3000`, you can start the application with `next -p <ANY PORT>` from the `apps/remix` folder.
+ If you want to run with another port than `3000`, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
 </Callout>
 
 </Steps>
@@ -249,7 +249,7 @@ After=network.target
 Environment=PATH=/path/to/your/node/binaries
 Type=simple
 User=www-data
-WorkingDirectory=/var/www/documenso/apps/remix
+WorkingDirectory=/var/www/documenso/apps/web
 ExecStart=/usr/bin/next start -p 3500
 TimeoutSec=15
 Restart=always

apps/remix/app/components/dialogs/admin-document-delete-dialog.tsx

@@ -34,7 +34,7 @@ export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialo
   const [reason, setReason] = useState('');
 
   const { mutateAsync: deleteDocument, isPending: isDeletingDocument } =
-    trpc.admin.document.delete.useMutation();
+    trpc.admin.deleteDocument.useMutation();
 
   const handleDeleteDocument = async () => {
     try {

apps/remix/app/components/dialogs/admin-organisation-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -96,16 +96,17 @@ export const AdminOrganisationCreateDialog = ({
     }
   };
 
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,7 +25,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserDeleteDialogProps = {
   className?: string;
-  user: TGetUserResponse;
+  user: User;
 };
 
 export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
@@ -35,7 +35,7 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
   const [email, setEmail] = useState('');
 
   const { mutateAsync: deleteUser, isPending: isDeletingUser } =
-    trpc.admin.user.delete.useMutation();
+    trpc.admin.deleteUser.useMutation();
 
   const onDeleteAccount = async () => {
     try {

apps/remix/app/components/dialogs/admin-user-disable-dialog.tsx

@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +24,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserDisableDialogProps = {
   className?: string;
-  userToDisable: TGetUserResponse;
+  userToDisable: User;
 };
 
 export const AdminUserDisableDialog = ({
@@ -37,7 +37,7 @@ export const AdminUserDisableDialog = ({
   const [email, setEmail] = useState('');
 
   const { mutateAsync: disableUser, isPending: isDisablingUser } =
-    trpc.admin.user.disable.useMutation();
+    trpc.admin.disableUser.useMutation();
 
   const onDisableAccount = async () => {
     try {

apps/remix/app/components/dialogs/admin-user-enable-dialog.tsx

@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +24,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserEnableDialogProps = {
   className?: string;
-  userToEnable: TGetUserResponse;
+  userToEnable: User;
 };
 
 export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnableDialogProps) => {
@@ -34,7 +34,7 @@ export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnab
   const [email, setEmail] = useState('');
 
   const { mutateAsync: enableUser, isPending: isEnablingUser } =
-    trpc.admin.user.enable.useMutation();
+    trpc.admin.enableUser.useMutation();
 
   const onEnableAccount = async () => {
     try {

apps/remix/app/components/dialogs/admin-user-reset-two-factor-dialog.tsx

@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,7 +25,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserResetTwoFactorDialogProps = {
   className?: string;
-  user: TGetUserResponse;
+  user: User;
 };
 
 export const AdminUserResetTwoFactorDialog = ({

apps/remix/app/components/dialogs/document-delete-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -49,7 +49,7 @@ export const DocumentDeleteDialog = ({
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
-  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.delete.useMutation({
+  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
     onSuccess: async () => {
       void refreshLimits();
 
@@ -73,20 +73,23 @@ export const DocumentDeleteDialog = ({
     },
   });
 
-  useEffect(() => {
-    if (open) {
-      setInputValue('');
-      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
-    }
-  }, [open, status]);
-
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
     setIsDeleteEnabled(event.target.value === _(deleteMessage));
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (value) {
+      setInputValue('');
+      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
+    }
+    if (!isPending) {
+      onOpenChange(value);
+    }
+  };
+
   return (
-    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -36,12 +36,11 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const { data: document, isLoading } = trpcReact.document.get.useQuery(
+  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
     {
       documentId: id,
     },
     {
-      queryHash: `document-duplicate-dialog-${id}`,
       enabled: open === true,
     },
   );
@@ -56,7 +55,7 @@ export const DocumentDuplicateDialog = ({
   const documentsPath = formatDocumentsPath(team.url);
 
   const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
-    trpcReact.document.duplicate.useMutation({
+    trpcReact.document.duplicateDocument.useMutation({
       onSuccess: async ({ documentId }) => {
         toast({
           title: _(msg`Document Duplicated`),

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -83,15 +83,6 @@ export const DocumentMoveToFolderDialog = ({
 
   const { mutateAsync: moveDocumentToFolder } = trpc.folder.moveDocumentToFolder.useMutation();
 
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setSearchTerm('');
-    } else {
-      form.reset({ folderId: currentFolderId });
-    }
-  }, [open, currentFolderId, form]);
-
   const onSubmit = async (data: TMoveDocumentFormSchema) => {
     try {
       await moveDocumentToFolder({
@@ -145,12 +136,22 @@ export const DocumentMoveToFolderDialog = ({
     }
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+      setSearchTerm('');
+    } else {
+      form.reset({ folderId: currentFolderId });
+    }
+    onOpenChange(value);
+  };
+
   const filteredFolders = folders?.data.filter((folder) =>
     folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
   return (
-    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -71,7 +71,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
     document.status !== 'PENDING' ||
     !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
 
-  const { mutateAsync: resendDocument } = trpcReact.document.redistribute.useMutation();
+  const { mutateAsync: resendDocument } = trpcReact.document.resendDocument.useMutation();
 
   const form = useForm<TResendDocumentFormSchema>({
     resolver: zodResolver(ZResendDocumentFormSchema),

apps/remix/app/components/dialogs/folder-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -80,14 +80,15 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
     }
   };
 
-  useEffect(() => {
-    if (!isCreateFolderOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [isCreateFolderOpen, form]);
+    setIsCreateFolderOpen(value);
+  };
 
   return (
-    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
+    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button

apps/remix/app/components/dialogs/folder-delete-dialog.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -92,14 +90,15 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [isOpen]);
+    onOpenChange(value);
+  };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

apps/remix/app/components/dialogs/folder-move-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -97,12 +97,13 @@ export const FolderMoveDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
       setSearchTerm('');
     }
-  }, [isOpen, form]);
+    onOpenChange(value);
+  };
 
   // Filter out the current folder, only show folders of the same type, and filter by search term
   const filteredFolders = foldersData?.filter(
@@ -113,7 +114,7 @@ export const FolderMoveDialog = ({
   );
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

apps/remix/app/components/dialogs/folder-update-dialog.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -71,15 +69,6 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
     },
   });
 
-  useEffect(() => {
-    if (folder) {
-      form.reset({
-        name: folder.name,
-        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
-      });
-    }
-  }, [folder, form]);
-
   const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
     if (!folder) {
       return;
@@ -110,8 +99,18 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
     }
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (value && folder) {
+      form.reset({
+        name: folder.name,
+        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
+      });
+    }
+    onOpenChange(value);
+  };
+
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

apps/remix/app/components/dialogs/organisation-create-dialog.tsx

@@ -76,7 +76,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
   const [selectedPriceId, setSelectedPriceId] = useState<string>('');
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(actionSearchParam === 'add-organisation');
 
   const form = useForm({
     resolver: zodResolver(ZCreateOrganisationFormSchema),
@@ -91,6 +91,19 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
     enabled: IS_BILLING_ENABLED(),
   });
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+      if (actionSearchParam === 'add-organisation') {
+        updateSearchParams({ action: null });
+      }
+    }
+
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
+
   const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
     try {
       const response = await createOrganisation({
@@ -126,17 +139,6 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
     }
   };
 
-  useEffect(() => {
-    if (actionSearchParam === 'add-organisation') {
-      setOpen(true);
-      updateSearchParams({ action: null });
-    }
-  }, [actionSearchParam, open]);
-
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
-
   const isIndividualPlan = (priceId: string) => {
     return (
       plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.monthlyPrice?.id === priceId ||
@@ -145,11 +147,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
   };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">
@@ -314,13 +312,16 @@ const BillingPlanForm = ({
         };
       },
     );
-  }, [plans]);
+  }, [plans, t]);
 
   useEffect(() => {
-    if (value === '' && !canCreateFreeOrganisation) {
-      onChange(dynamicPlans[0][billingPeriod]?.id ?? '');
+    if (value === '' && !canCreateFreeOrganisation && dynamicPlans.length > 0) {
+      const defaultValue = dynamicPlans[0][billingPeriod]?.id ?? '';
+      if (defaultValue) {
+        onChange(defaultValue);
+      }
     }
-  }, [value]);
+  }, [canCreateFreeOrganisation, dynamicPlans, billingPeriod, onChange, value]);
 
   const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
     const plan = dynamicPlans.find(

apps/remix/app/components/dialogs/organisation-delete-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -93,14 +93,19 @@ export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogPr
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (form.formState.isSubmitting) {
+      return;
+    }
+
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    setOpen(value);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">

apps/remix/app/components/dialogs/organisation-email-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -73,13 +73,6 @@ export const OrganisationEmailCreateDialog = ({
   const { mutateAsync: createOrganisationEmail, isPending } =
     trpc.enterprise.organisation.email.create.useMutation();
 
-  // Reset state when dialog closes
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-    }
-  }, [open, form]);
-
   const onFormSubmit = async (data: TCreateOrganisationEmailFormSchema) => {
     try {
       await createOrganisationEmail({
@@ -114,8 +107,17 @@ export const OrganisationEmailCreateDialog = ({
     }
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+    }
+    if (!isPending) {
+      setOpen(value);
+    }
+  };
+
   return (
-    <Dialog {...props} open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/organisation-email-delete-dialog.tsx

@@ -36,6 +36,12 @@ export const OrganisationEmailDeleteDialog = ({
 
   const organisation = useCurrentOrganisation();
 
+  const handleOpenChange = (value: boolean) => {
+    if (!isDeleting) {
+      setOpen(value);
+    }
+  };
+
   const { mutateAsync: deleteEmail, isPending: isDeleting } =
     trpc.enterprise.organisation.email.delete.useMutation({
       onSuccess: () => {
@@ -58,7 +64,7 @@ export const OrganisationEmailDeleteDialog = ({
     });
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="secondary">

apps/remix/app/components/dialogs/organisation-email-domain-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -75,14 +75,6 @@ export const OrganisationEmailDomainCreateDialog = ({
   const { mutateAsync: createOrganisationEmail } =
     trpc.enterprise.organisation.emailDomain.create.useMutation();
 
-  // Reset state when dialog closes
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setStep('domain');
-    }
-  }, [open, form]);
-
   const onFormSubmit = async ({ domain }: TCreateOrganisationEmailDomainFormSchema) => {
     try {
       const { records } = await createOrganisationEmail({
@@ -118,12 +110,18 @@ export const OrganisationEmailDomainCreateDialog = ({
     }
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+      setStep('domain');
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
+
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/organisation-email-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -87,23 +87,20 @@ export const OrganisationEmailUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  const handleOpenChange = (value: boolean) => {
+    if (value) {
+      form.reset({
+        emailName: organisationEmail.emailName,
+        // replyTo: organisationEmail.replyTo ?? undefined,
+      });
     }
-
-    form.reset({
-      emailName: organisationEmail.emailName,
-      // replyTo: organisationEmail.replyTo ?? undefined,
-    });
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger}
       </DialogTrigger>

apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -117,16 +117,17 @@ export const OrganisationGroupCreateDialog = ({
     }
   };
 
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -193,13 +193,6 @@ export const OrganisationMemberInviteDialog = ({
     return 'form';
   }, [fullOrganisation]);
 
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setInvitationType('INDIVIDUAL');
-    }
-  }, [open, form]);
-
   const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files?.length) {
       return;
@@ -267,12 +260,18 @@ export const OrganisationMemberInviteDialog = ({
     });
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+      setInvitationType('INDIVIDUAL');
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
+
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,32 +106,27 @@ export const OrganisationMemberUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  const handleOpenChange = (value: boolean) => {
+    if (value) {
+      form.reset();
+      if (
+        !isOrganisationRoleWithinUserHierarchy(currentUserOrganisationRole, organisationMemberRole)
+      ) {
+        setOpen(false);
+        toast({
+          title: _(msg`You cannot modify a organisation member who has a higher role than you.`),
+          variant: 'destructive',
+        });
+        return;
+      }
     }
-
-    form.reset();
-
-    if (
-      !isOrganisationRoleWithinUserHierarchy(currentUserOrganisationRole, organisationMemberRole)
-    ) {
-      setOpen(false);
-
-      toast({
-        title: _(msg`You cannot modify a organisation member who has a higher role than you.`),
-        variant: 'destructive',
-      });
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserOrganisationRole, organisationMemberRole, form, toast]);
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

apps/remix/app/components/dialogs/passkey-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -65,9 +65,9 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
   });
 
   const { mutateAsync: createPasskeyRegistrationOptions, isPending } =
-    trpc.auth.passkey.createRegistrationOptions.useMutation();
+    trpc.auth.createPasskeyRegistrationOptions.useMutation();
 
-  const { mutateAsync: createPasskey } = trpc.auth.passkey.create.useMutation();
+  const { mutateAsync: createPasskey } = trpc.auth.createPasskey.useMutation();
 
   const onFormSubmit = async ({ passkeyName }: TCreatePasskeyFormSchema) => {
     setFormError(null);
@@ -120,24 +120,21 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
     return passkeyName;
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleDialogOpenChange = (value: boolean) => {
+    if (!value) {
       const defaultPasskeyName = extractDefaultPasskeyName();
-
       form.reset({
         passkeyName: defaultPasskeyName,
       });
-
       setFormError(null);
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button variant="secondary" loading={isPending}>

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -66,14 +66,14 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
   const updateSearchParams = useUpdateSearchParams();
   const organisation = useCurrentOrganisation();
 
-  const [open, setOpen] = useState(false);
+  const actionSearchParam = searchParams?.get('action');
+  const shouldOpenDialog = actionSearchParam === 'add-team';
+  const [open, setOpen] = useState(shouldOpenDialog);
 
   const { data: fullOrganisation } = trpc.organisation.get.useQuery({
     organisationReference: organisation.id,
   });
 
-  const actionSearchParam = searchParams?.get('action');
-
   const form = useForm({
     resolver: zodResolver(ZCreateTeamFormSchema),
     defaultValues: {
@@ -85,6 +85,18 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
 
   const { mutateAsync: createTeam } = trpc.team.create.useMutation();
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+      if (shouldOpenDialog) {
+        updateSearchParams({ action: null });
+      }
+    }
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
+
   const onFormSubmit = async ({ teamName, teamUrl, inheritMembers }: TCreateTeamFormSchema) => {
     try {
       await createTeam({
@@ -150,23 +162,8 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
     return 'form';
   }, [fullOrganisation]);
 
-  useEffect(() => {
-    if (actionSearchParam === 'add-team') {
-      setOpen(true);
-      updateSearchParams({ action: null });
-    }
-  }, [actionSearchParam, open]);
-
-  useEffect(() => {
-    form.reset();
-  }, [open, form]);
-
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">

apps/remix/app/components/dialogs/team-delete-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -114,14 +114,17 @@ export const TeamDeleteDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="destructive">

apps/remix/app/components/dialogs/team-email-add-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -103,18 +103,17 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button variant="outline" loading={isPending} className="bg-background">

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -92,18 +92,17 @@ export const TeamEmailUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="outline" className="bg-background">

apps/remix/app/components/dialogs/team-group-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -107,7 +107,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
         duration: 5000,
       });
 
-      setOpen(false);
+      handleClose();
     } catch {
       toast({
         title: t`An unknown error occurred`,
@@ -117,17 +117,23 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setStep('SELECT');
+  const handleClose = () => {
+    setOpen(false);
+    form.reset();
+    setStep('SELECT');
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      handleClose();
     }
-  }, [open, form]);
+  };
 
   return (
     <Dialog
       {...props}
       open={open}
+      onOpenChange={handleOpenChange}
       // Disable automatic onOpenChange events to prevent dialog from closing if auser 'accidentally' clicks the overlay.
       // Since it would be annoying to redo the whole process.
     >

apps/remix/app/components/dialogs/team-group-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,22 +106,17 @@ export const TeamGroupUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  const handleOpenChange = (value: boolean) => {
+    if (!form.formState.isSubmitting) {
+      if (value) {
+        form.reset();
+      }
+      setOpen(value);
     }
-
-    form.reset();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, team.currentTeamRole, teamGroupRole, form, toast]);
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

apps/remix/app/components/dialogs/team-member-create-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -119,20 +119,17 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
       setStep('SELECT');
     }
-  }, [open, form]);
+    // Disable automatic onOpenChange events to prevent dialog from closing if user 'accidentally' clicks the overlay.
+    // Since it would be annoying to redo the whole process, we handle open state manually
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      // Disable automatic onOpenChange events to prevent dialog from closing if auser 'accidentally' clicks the overlay.
-      // Since it would be annoying to redo the whole process.
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         <Button variant="secondary" onClick={() => setOpen(true)}>
           <Trans>Add members</Trans>

apps/remix/app/components/dialogs/team-member-update-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -106,30 +106,25 @@ export const TeamMemberUpdateDialog = ({
     }
   };
 
-  useEffect(() => {
-    if (!open) {
-      return;
+  const handleOpenChange = (value: boolean) => {
+    if (value) {
+      form.reset();
+      if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
+        setOpen(false);
+        toast({
+          title: _(msg`You cannot modify a team member who has a higher role than you.`),
+          variant: 'destructive',
+        });
+        return;
+      }
     }
-
-    form.reset();
-
-    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, memberTeamRole)) {
-      setOpen(false);
-
-      toast({
-        title: _(msg`You cannot modify a team member who has a higher role than you.`),
-        variant: 'destructive',
-      });
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentUserTeamRole, memberTeamRole, form, toast]);
+  };
 
   return (
-    <Dialog
-      {...props}
-      open={open}
-      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
-    >
+    <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
           <Button variant="secondary">

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -186,16 +186,20 @@ export const TemplateDirectLinkDialog = ({
   const isLoading =
     isCreatingTemplateDirectLink || isTogglingTemplateAccess || isDeletingTemplateDirectLink;
 
-  useEffect(() => {
-    resetCreateTemplateDirectLink();
-    setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
-    setSelectedRecipientId(null);
+  const handleOpenChange = (value: boolean) => {
+    if (!isLoading) {
+      if (value) {
+        resetCreateTemplateDirectLink();
+        setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
+        setSelectedRecipientId(null);
+      }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+      onOpenChange(value);
+    }
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <fieldset disabled={isLoading} className="relative">
         <AnimateGenericFadeInOut motionKey={currentStep}>
           {match({ token, currentStep })

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -85,15 +85,6 @@ export function TemplateMoveToFolderDialog({
 
   const { mutateAsync: moveTemplateToFolder } = trpc.folder.moveTemplateToFolder.useMutation();
 
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-      setSearchTerm('');
-    } else {
-      form.reset({ folderId: currentFolderId ?? null });
-    }
-  }, [isOpen, currentFolderId, form]);
-
   const onSubmit = async (data: TMoveTemplateFormSchema) => {
     try {
       await moveTemplateToFolder({
@@ -137,12 +128,22 @@ export function TemplateMoveToFolderDialog({
     }
   };
 
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
+      form.reset();
+      setSearchTerm('');
+    } else {
+      form.reset({ folderId: currentFolderId ?? null });
+    }
+    onOpenChange(value);
+  };
+
   const filteredFolders = folders?.data?.filter((folder) =>
     folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
   return (
-    <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog {...props} open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -203,14 +203,17 @@ export function TemplateUseDialog({
     name: 'recipients',
   });
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (form.formState.isSubmitting) return;
+
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    setOpen(value);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {trigger || (
           <Button variant="outline" className="bg-background">

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -56,7 +56,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
 
   type TDeleteTokenByIdMutationSchema = z.infer<typeof ZTokenDeleteDialogSchema>;
 
-  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.delete.useMutation({
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
     onSuccess() {
       onDelete?.();
     },
@@ -95,17 +95,17 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [isOpen, form]);
+    if (!form.formState.isSubmitting) {
+      setIsOpen(value);
+    }
+  };
 
   return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
-    >
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild={true}>
         {children ?? (
           <Button className="mr-4" variant="destructive">

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -88,14 +88,17 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
     }
   };
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (value: boolean) => {
+    if (!value) {
       form.reset();
     }
-  }, [open, form]);
+    if (!form.formState.isSubmitting) {
+      setOpen(value);
+    }
+  };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         {children ?? (
           <Button className="mr-4" variant="destructive">

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -172,8 +172,6 @@ export const ConfigureFieldsView = ({
     name: 'fields',
   });
 
-  const highestPageNumber = Math.max(...localFields.map((field) => field.pageNumber));
-
   const onFieldCopy = useCallback(
     (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
       const { duplicate = false, duplicateAll = false } = options ?? {};
@@ -542,9 +540,7 @@ export const ConfigureFieldsView = ({
                 <div>
                   <PDFViewer documentData={normalizedDocumentData} />
 
-                  <ElementVisible
-                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-                  >
+                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
                     {localFields.map((field, index) => {
                       const recipientIndex = recipients.findIndex(
                         (r) => r.id === field.recipientId,

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -57,7 +57,7 @@ export const EmbedDirectTemplateClientPage = ({
   token,
   updatedAt,
   documentData,
-  recipient: _recipient,
+  recipient,
   fields,
   metadata,
   hidePoweredBy = false,
@@ -91,12 +91,8 @@ export const EmbedDirectTemplateClientPage = ({
     localFields.filter((field) => field.inserted),
   ];
 
-  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
-
   const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
 
-  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
-
   const { mutateAsync: createDocumentFromDirectTemplate, isPending: isSubmitting } =
     trpc.template.createDocumentFromDirectTemplate.useMutation();
 
@@ -347,34 +343,19 @@ export const EmbedDirectTemplateClientPage = ({
                   <Trans>Sign document</Trans>
                 </h3>
 
-                {isExpanded ? (
-                  <Button
-                    variant="outline"
-                    className="h-8 w-8 p-0 md:hidden"
-                    onClick={() => setIsExpanded(false)}
-                  >
-                    <LucideChevronDown className="text-muted-foreground h-5 w-5" />
-                  </Button>
-                ) : pendingFields.length > 0 ? (
-                  <Button
-                    variant="outline"
-                    className="h-8 w-8 p-0 md:hidden"
-                    onClick={() => setIsExpanded(true)}
-                  >
-                    <LucideChevronUp className="text-muted-foreground h-5 w-5" />
-                  </Button>
-                ) : (
-                  <Button
-                    variant="default"
-                    size="sm"
-                    className="md:hidden"
-                    disabled={isThrottled || (hasSignatureField && !signatureValid)}
-                    loading={isSubmitting}
-                    onClick={() => throttledOnCompleteClick()}
-                  >
-                    <Trans>Complete</Trans>
-                  </Button>
-                )}
+                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
+                    <LucideChevronDown
+                      className="text-muted-foreground h-5 w-5"
+                      onClick={() => setIsExpanded(false)}
+                    />
+                  ) : (
+                    <LucideChevronUp
+                      className="text-muted-foreground h-5 w-5"
+                      onClick={() => setIsExpanded(true)}
+                    />
+                  )}
+                </Button>
               </div>
             </div>
 
@@ -461,9 +442,7 @@ export const EmbedDirectTemplateClientPage = ({
           </div>
         </div>
 
-        <ElementVisible
-          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
-        >
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {showPendingFieldTooltip && pendingFields.length > 0 && (
             <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
               <Trans>Click to insert field</Trans>

apps/remix/app/components/embed/embed-document-fields.tsx

@@ -50,10 +50,8 @@ export const EmbedDocumentFields = ({
   onSignField,
   onUnsignField,
 }: EmbedDocumentFieldsProps) => {
-  const highestPageNumber = Math.max(...fields.map((field) => field.page));
-
   return (
-    <ElementVisible target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}>
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
       {fields.map((field) =>
         match(field.type)
           .with(FieldType.SIGNATURE, () => (

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -89,7 +89,7 @@ export const EmbedSignDocumentClientPage = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
-  const [_showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
+  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
     useState(false);
 
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
@@ -106,8 +106,6 @@ export const EmbedSignDocumentClientPage = ({
     fields.filter((field) => field.inserted),
   ];
 
-  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
-
   const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
@@ -118,8 +116,6 @@ export const EmbedSignDocumentClientPage = ({
 
   const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
-  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
-
   const assistantSignersId = useId();
 
   const onNextFieldClick = () => {
@@ -309,36 +305,19 @@ export const EmbedSignDocumentClientPage = ({
                     )}
                   </h3>
 
-                  {isExpanded ? (
-                    <Button
-                      variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
-                      onClick={() => setIsExpanded(false)}
-                    >
-                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
-                    </Button>
-                  ) : pendingFields.length > 0 ? (
-                    <Button
-                      variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
-                      onClick={() => setIsExpanded(true)}
-                    >
-                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
-                    </Button>
-                  ) : (
-                    <Button
-                      variant="default"
-                      size="sm"
-                      className="md:hidden"
-                      disabled={
-                        isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
-                      }
-                      loading={isSubmitting}
-                      onClick={() => throttledOnCompleteClick()}
-                    >
-                      <Trans>Complete</Trans>
-                    </Button>
-                  )}
+                  <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                    {isExpanded ? (
+                      <LucideChevronDown
+                        className="text-muted-foreground h-5 w-5"
+                        onClick={() => setIsExpanded(false)}
+                      />
+                    ) : (
+                      <LucideChevronUp
+                        className="text-muted-foreground h-5 w-5"
+                        onClick={() => setIsExpanded(true)}
+                      />
+                    )}
+                  </Button>
                 </div>
               </div>
 
@@ -486,9 +465,7 @@ export const EmbedSignDocumentClientPage = ({
             </div>
           </div>
 
-          <ElementVisible
-            target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
-          >
+          <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
             {showPendingFieldTooltip && pendingFields.length > 0 && (
               <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
                 <Trans>Click to insert field</Trans>

apps/remix/app/components/embed/embed-document-waiting-for-turn.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 
 export const EmbedDocumentWaitingForTurn = () => {
-  const [hasPostedMessage, setHasPostedMessage] = useState(false);
-
   useEffect(() => {
-    if (window.parent && !hasPostedMessage) {
+    if (window.parent) {
       window.parent.postMessage(
         {
           action: 'document-waiting-for-turn',
@@ -15,13 +13,7 @@ export const EmbedDocumentWaitingForTurn = () => {
         '*',
       );
     }
-
-    setHasPostedMessage(true);
-  }, [hasPostedMessage]);
-
-  if (!hasPostedMessage) {
-    return null;
-  }
+  }, []);
 
   return (
     <div className="embed--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -92,8 +92,6 @@ export const MultiSignDocumentSigningView = ({
       [],
   ];
 
-  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
-
   const uninsertedFields = document?.fields.filter((field) => !field.inserted) ?? [];
 
   const onSignField = async (payload: TSignFieldWithTokenMutationSchema) => {
@@ -359,9 +357,7 @@ export const MultiSignDocumentSigningView = ({
               </div>
 
               {hasDocumentLoaded && (
-                <ElementVisible
-                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
-                >
+                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
                   {showPendingFieldTooltip && pendingFields.length > 0 && (
                     <FieldToolTip
                       key={pendingFields[0].id}

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -136,18 +136,19 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
     setIsOpen(true);
   };
 
-  useEffect(() => {
-    enable2FAForm.reset();
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
 
-    if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
-      setRecoveryCodes(null);
+    if (!open) {
+      enable2FAForm.reset();
+      if (recoveryCodes && recoveryCodes.length > 0) {
+        setRecoveryCodes(null);
+      }
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+  };
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild={true}>
         <Button
           className="flex-shrink-0"

apps/remix/app/components/forms/signin.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
@@ -114,11 +114,20 @@ export const SignInForm = ({
   }, [returnTo]);
 
   const { mutateAsync: createPasskeySigninOptions } =
-    trpc.auth.passkey.createSigninOptions.useMutation();
+    trpc.auth.createPasskeySigninOptions.useMutation();
+
+  const emailFromHash = useMemo(() => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    const hash = window.location.hash.slice(1);
+    const params = new URLSearchParams(hash);
+    return params.get('email');
+  }, []);
 
   const form = useForm<TSignInFormSchema>({
     values: {
-      email: initialEmail ?? '',
+      email: emailFromHash ?? initialEmail ?? '',
       password: '',
       totpCode: '',
       backupCode: '',
@@ -287,18 +296,6 @@ export const SignInForm = ({
     }
   };
 
-  useEffect(() => {
-    const hash = window.location.hash.slice(1);
-
-    const params = new URLSearchParams(hash);
-
-    const email = params.get('email');
-
-    if (email) {
-      form.setValue('email', email);
-    }
-  }, [form]);
-
   return (
     <Form {...form}>
       <form

apps/remix/app/components/forms/signup.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
@@ -84,10 +84,19 @@ export const SignUpForm = ({
 
   const utmSrc = searchParams.get('utm_source') ?? null;
 
+  const emailFromHash = useMemo(() => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    const hash = window.location.hash.slice(1);
+    const params = new URLSearchParams(hash);
+    return params.get('email');
+  }, []);
+
   const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
-      email: initialEmail ?? '',
+      email: emailFromHash ?? initialEmail ?? '',
       password: '',
       signature: '',
     },
@@ -162,18 +171,6 @@ export const SignUpForm = ({
     }
   };
 
-  useEffect(() => {
-    const hash = window.location.hash.slice(1);
-
-    const params = new URLSearchParams(hash);
-
-    const email = params.get('email');
-
-    if (email) {
-      form.setValue('email', email);
-    }
-  }, [form]);
-
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
       <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">

apps/remix/app/components/forms/token.tsx

@@ -13,7 +13,7 @@ import type { z } from 'zod';
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
+import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -47,7 +47,7 @@ export const EXPIRATION_DATES = {
   ONE_YEAR: msg`12 months`,
 } as const;
 
-const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
+const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.pick({
   tokenName: true,
   expirationDate: true,
 });
@@ -75,7 +75,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
   const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
   const [noExpirationDate, setNoExpirationDate] = useState(false);
 
-  const { mutateAsync: createTokenMutation } = trpc.apiToken.create.useMutation({
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
     onSuccess(data) {
       setNewlyCreatedToken(data);
     },

apps/remix/app/components/general/admin-monthly-active-user-charts.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { DateTime } from 'luxon';
 import type { TooltipProps } from 'recharts';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

apps/remix/app/components/general/app-command-menu.tsx

@@ -64,7 +64,7 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const [pages, setPages] = useState<string[]>([]);
 
   const { data: searchDocumentsData, isPending: isSearchingDocuments } =
-    trpcReact.document.search.useQuery(
+    trpcReact.document.searchDocuments.useQuery(
       {
         query: search,
       },

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -79,8 +79,6 @@ export const DirectTemplateSigningForm = ({
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const highestPageNumber = Math.max(...localFields.map((field) => field.page));
-
   const fieldsRequiringValidation = useMemo(() => {
     return localFields.filter((field) => isFieldUnsignedAndRequired(field));
   }, [localFields]);
@@ -223,9 +221,7 @@ export const DirectTemplateSigningForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        <ElementVisible
-          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-        >
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {validateUninsertedFields && uninsertedFields[0] && (
             <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
               <Trans>Click to insert field</Trans>

apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx

@@ -77,7 +77,7 @@ export const DocumentSigningAuthPasskey = ({
   });
 
   const { mutateAsync: createPasskeyAuthenticationOptions } =
-    trpc.auth.passkey.createAuthenticationOptions.useMutation();
+    trpc.auth.createPasskeyAuthenticationOptions.useMutation();
 
   const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
 

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -93,7 +93,7 @@ export const DocumentSigningAuthProvider = ({
     [documentAuthOptions, recipient],
   );
 
-  const passkeyQuery = trpc.auth.passkey.find.useQuery(
+  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
     {
       perPage: MAXIMUM_PASSKEYS,
     },

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -9,7 +9,6 @@ import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
-import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
 import { AUTO_SIGNABLE_FIELD_TYPES } from '@documenso/lib/constants/autosign';
 import { DocumentAuth } from '@documenso/lib/types/document-auth';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@@ -61,12 +60,6 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
   const { email, fullName } = useRequiredDocumentSigningContext();
   const { derivedRecipientActionAuth } = useRequiredDocumentSigningAuthContext();
 
-  const [open, setOpen] = useState(false);
-
-  const form = useForm();
-
-  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
-
   const autoSignableFields = fields.filter((field) => {
     if (field.inserted) {
       return false;
@@ -95,6 +88,14 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     (actionAuth) => !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(actionAuth),
   );
 
+  const [open, setOpen] = useState(() => {
+    return actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD;
+  });
+
+  const form = useForm();
+
+  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
+
   const onSubmit = async () => {
     const results = await Promise.allSettled(
       autoSignableFields.map(async (field) => {
@@ -152,12 +153,6 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     await revalidate();
   };
 
-  unsafe_useEffectOnce(() => {
-    if (actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD) {
-      setOpen(true);
-    }
-  });
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -7,11 +7,14 @@ import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/cl
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
-import { sortFieldsByPosition } from '@documenso/lib/utils/fields';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
@@ -31,33 +34,29 @@ export type DocumentSigningFormProps = {
   document: DocumentAndSender;
   recipient: Recipient;
   fields: Field[];
+  redirectUrl?: string | null;
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
   setSelectedSignerId?: (id: number | null) => void;
-  completeDocument: (
-    authOptions?: TRecipientActionAuth,
-    nextSigner?: { email: string; name: string },
-  ) => Promise<void>;
-  isSubmitting: boolean;
-  fieldsValidated: () => void;
-  nextRecipient?: RecipientWithFields;
 };
 
 export const DocumentSigningForm = ({
   document,
   recipient,
   fields,
+  redirectUrl,
   isRecipientsTurn,
   allRecipients = [],
   setSelectedSignerId,
-  completeDocument,
-  isSubmitting,
-  fieldsValidated,
-  nextRecipient,
 }: DocumentSigningFormProps) => {
+  const { sessionData } = useOptionalSession();
+  const user = sessionData?.user;
+
   const { _ } = useLingui();
   const { toast } = useToast();
+
   const navigate = useNavigate();
+  const analytics = useAnalytics();
 
   const assistantSignersId = useId();
 
@@ -67,12 +66,21 @@ export const DocumentSigningForm = ({
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
+  const {
+    mutateAsync: completeDocumentWithToken,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
+
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
       selectedSignerId: undefined,
     },
   });
 
+  // Keep the loading state going if successful since the redirect may take some time.
+  const isSubmitting = isPending || isSuccess;
+
   const fieldsRequiringValidation = useMemo(
     () => fields.filter(isFieldUnsignedAndRequired),
     [fields],
@@ -88,9 +96,9 @@ export const DocumentSigningForm = ({
     return fieldsRequiringValidation.filter((field) => field.recipientId === recipient.id);
   }, [fieldsRequiringValidation, recipient]);
 
-  const localFieldsValidated = () => {
+  const fieldsValidated = () => {
     setValidateUninsertedFields(true);
-    fieldsValidated();
+    validateFieldsInserted(fieldsRequiringValidation);
   };
 
   const onAssistantFormSubmit = () => {
@@ -118,6 +126,55 @@ export const DocumentSigningForm = ({
     }
   };
 
+  const completeDocument = async (
+    authOptions?: TRecipientActionAuth,
+    nextSigner?: { email: string; name: string },
+  ) => {
+    const payload = {
+      token: recipient.token,
+      documentId: document.id,
+      authOptions,
+      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+    };
+
+    await completeDocumentWithToken(payload);
+
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
+    if (redirectUrl) {
+      window.location.href = redirectUrl;
+    } else {
+      await navigate(`/sign/${recipient.token}/complete`);
+    }
+  };
+
+  const nextRecipient = useMemo(() => {
+    if (
+      !document.documentMeta?.signingOrder ||
+      document.documentMeta.signingOrder !== 'SEQUENTIAL'
+    ) {
+      return undefined;
+    }
+
+    const sortedRecipients = allRecipients.sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
+      if (a.signingOrder === null) return 1;
+      if (b.signingOrder === null) return -1;
+      if (a.signingOrder === b.signingOrder) return a.id - b.id;
+      return a.signingOrder - b.signingOrder;
+    });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
+  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
+
   return (
     <div className="flex h-full flex-col">
       {validateUninsertedFields && uninsertedFields[0] && (
@@ -148,7 +205,7 @@ export const DocumentSigningForm = ({
                     isSubmitting={isSubmitting}
                     documentTitle={document.title}
                     fields={fields}
-                    fieldsValidated={localFieldsValidated}
+                    fieldsValidated={fieldsValidated}
                     onSignatureComplete={async (nextSigner) => {
                       await completeDocument(undefined, nextSigner);
                     }}
@@ -307,7 +364,7 @@ export const DocumentSigningForm = ({
                   isSubmitting={isSubmitting || isAssistantSubmitting}
                   documentTitle={document.title}
                   fields={fields}
-                  fieldsValidated={localFieldsValidated}
+                  fieldsValidated={fieldsValidated}
                   disabled={!isRecipientsTurn}
                   onSignatureComplete={async (nextSigner) => {
                     await completeDocument(undefined, nextSigner);

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -1,18 +1,15 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Field } from '@prisma/client';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
-import { useNavigate } from 'react-router';
-import { P, match } from 'ts-pattern';
+import { match } from 'ts-pattern';
 
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
   ZCheckboxFieldMeta,
   ZDropdownFieldMeta,
@@ -21,11 +18,8 @@ import {
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import type { CompletedField } from '@documenso/lib/types/fields';
-import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
-import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
-import { trpc } from '@documenso/trpc/react';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -46,7 +40,6 @@ import { DocumentSigningRejectDialog } from '~/components/general/document-signi
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
 
-import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
 export type DocumentSigningPageViewProps = {
@@ -70,56 +63,9 @@ export const DocumentSigningPageView = ({
 }: DocumentSigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
-  const navigate = useNavigate();
-  const analytics = useAnalytics();
-
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const {
-    mutateAsync: completeDocumentWithToken,
-    isPending,
-    isSuccess,
-  } = trpc.recipient.completeDocumentWithToken.useMutation();
-
-  // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = isPending || isSuccess;
-
-  const fieldsRequiringValidation = useMemo(
-    () => fields.filter(isFieldUnsignedAndRequired),
-    [fields],
-  );
-
-  const fieldsValidated = () => {
-    validateFieldsInserted(fieldsRequiringValidation);
-  };
-
-  const completeDocument = async (
-    authOptions?: TRecipientActionAuth,
-    nextSigner?: { email: string; name: string },
-  ) => {
-    const payload = {
-      token: recipient.token,
-      documentId: document.id,
-      authOptions,
-      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-    };
-
-    await completeDocumentWithToken(payload);
-
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
-    if (documentMeta?.redirectUrl) {
-      window.location.href = documentMeta.redirectUrl;
-    } else {
-      await navigate(`/sign/${recipient.token}/complete`);
-    }
-  };
-
   let senderName = document.user.name ?? '';
   let senderEmail = `(${document.user.email})`;
 
@@ -132,31 +78,6 @@ export const DocumentSigningPageView = ({
   const targetSigner =
     recipient.role === RecipientRole.ASSISTANT && selectedSigner ? selectedSigner : null;
 
-  const nextRecipient = useMemo(() => {
-    if (!documentMeta?.signingOrder || documentMeta.signingOrder !== 'SEQUENTIAL') {
-      return undefined;
-    }
-
-    const sortedRecipients = allRecipients.sort((a, b) => {
-      // Sort by signingOrder first (nulls last), then by id
-      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
-      if (a.signingOrder === null) return 1;
-      if (b.signingOrder === null) return -1;
-      if (a.signingOrder === b.signingOrder) return a.id - b.id;
-      return a.signingOrder - b.signingOrder;
-    });
-
-    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
-    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
-      ? sortedRecipients[currentIndex + 1]
-      : undefined;
-  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
-
-  const highestPageNumber = Math.max(...fields.map((field) => field.page));
-
-  const pendingFields = fieldsRequiringValidation.filter((field) => !field.inserted);
-  const hasPendingFields = pendingFields.length > 0;
-
   return (
     <DocumentSigningRecipientProvider recipient={recipient} targetSigner={targetSigner}>
       <div className="mx-auto w-full max-w-screen-xl sm:px-6">
@@ -242,55 +163,19 @@ export const DocumentSigningPageView = ({
                     .otherwise(() => null)}
                 </h3>
 
-                {match({ hasPendingFields, isExpanded, role: recipient.role })
-                  .with(
-                    {
-                      hasPendingFields: false,
-                      role: P.not(RecipientRole.ASSISTANT),
-                      isExpanded: false,
-                    },
-                    () => (
-                      <div className="md:hidden">
-                        <DocumentSigningCompleteDialog
-                          isSubmitting={isSubmitting}
-                          documentTitle={document.title}
-                          fields={fields}
-                          fieldsValidated={fieldsValidated}
-                          disabled={!isRecipientsTurn}
-                          onSignatureComplete={async (nextSigner) => {
-                            await completeDocument(undefined, nextSigner);
-                          }}
-                          role={recipient.role}
-                          allowDictateNextSigner={
-                            nextRecipient && documentMeta?.allowDictateNextSigner
-                          }
-                          defaultNextSigner={
-                            nextRecipient
-                              ? { name: nextRecipient.name, email: nextRecipient.email }
-                              : undefined
-                          }
-                        />
-                      </div>
-                    ),
-                  )
-                  .with({ isExpanded: true }, () => (
-                    <Button
-                      variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
+                    <LucideChevronDown
+                      className="text-muted-foreground h-5 w-5"
                       onClick={() => setIsExpanded(false)}
-                    >
-                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
-                    </Button>
-                  ))
-                  .otherwise(() => (
-                    <Button
-                      variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                    />
+                  ) : (
+                    <LucideChevronUp
+                      className="text-muted-foreground h-5 w-5"
                       onClick={() => setIsExpanded(true)}
-                    >
-                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
-                    </Button>
-                  ))}
+                    />
+                  )}
+                </Button>
               </div>
 
               <div className="hidden group-data-[expanded]/document-widget:block md:block">
@@ -319,13 +204,10 @@ export const DocumentSigningPageView = ({
                   document={document}
                   recipient={recipient}
                   fields={fields}
+                  redirectUrl={documentMeta?.redirectUrl}
                   isRecipientsTurn={isRecipientsTurn}
                   allRecipients={allRecipients}
                   setSelectedSignerId={setSelectedSignerId}
-                  completeDocument={completeDocument}
-                  isSubmitting={isSubmitting}
-                  fieldsValidated={fieldsValidated}
-                  nextRecipient={nextRecipient}
                 />
               </div>
             </div>
@@ -342,9 +224,7 @@ export const DocumentSigningPageView = ({
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
         )}
 
-        <ElementVisible
-          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-        >
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {fields
             .filter(
               (field) =>

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -80,20 +80,16 @@ export const DocumentSigningTextField = ({
   const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
-  const shouldAutoSignField =
-    (!field.inserted && parsedFieldMeta?.text) ||
-    (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly);
+  const shouldAutoSignField = useMemo(
+    () =>
+      (!field.inserted && parsedFieldMeta?.text) ||
+      (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly),
+    [field.inserted, parsedFieldMeta?.text, parsedFieldMeta?.readOnly],
+  );
 
   const [showCustomTextModal, setShowCustomTextModal] = useState(false);
   const [localText, setLocalCustomText] = useState(parsedFieldMeta?.text ?? '');
 
-  useEffect(() => {
-    if (!showCustomTextModal) {
-      setLocalCustomText(parsedFieldMeta?.text ?? '');
-      setErrors(initialErrors);
-    }
-  }, [showCustomTextModal]);
-
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const text = e.target.value;
     setLocalCustomText(text);
@@ -216,14 +212,12 @@ export const DocumentSigningTextField = ({
     }
   };
 
-  useEffect(() => {
-    if (shouldAutoSignField) {
-      void executeActionAuthProcedure({
-        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-        actionTarget: field.type,
-      });
-    }
-  }, []);
+  if (shouldAutoSignField) {
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+      actionTarget: field.type,
+    });
+  }
 
   const parsedField = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : undefined;
 
@@ -318,7 +312,8 @@ export const DocumentSigningTextField = ({
                 className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
-                  setLocalCustomText('');
+                  setLocalCustomText(parsedFieldMeta?.text ?? '');
+                  setErrors(initialErrors);
                 }}
               >
                 <Trans>Cancel</Trans>

apps/remix/app/components/general/document/document-audit-log-download-button.tsx

@@ -21,7 +21,7 @@ export const DocumentAuditLogDownloadButton = ({
   const { _ } = useLingui();
 
   const { mutateAsync: downloadAuditLogs, isPending } =
-    trpc.document.auditLog.download.useMutation();
+    trpc.document.downloadAuditLogs.useMutation();
 
   const onDownloadAuditLogsClick = async () => {
     try {

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -49,7 +49,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
 
   const { quota, remaining, refreshLimits } = useLimits();
 
-  const { mutateAsync: createDocument } = trpc.document.create.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
   const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
 

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -59,22 +59,23 @@ export const DocumentEditForm = ({
 
   const utils = trpc.useUtils();
 
-  const { data: document, refetch: refetchDocument } = trpc.document.get.useQuery(
-    {
-      documentId: initialDocument.id,
-    },
-    {
-      initialData: initialDocument,
-      ...SKIP_QUERY_BATCH_META,
-    },
-  );
+  const { data: document, refetch: refetchDocument } =
+    trpc.document.getDocumentWithDetailsById.useQuery(
+      {
+        documentId: initialDocument.id,
+      },
+      {
+        initialData: initialDocument,
+        ...SKIP_QUERY_BATCH_META,
+      },
+    );
 
   const { recipients, fields } = document;
 
-  const { mutateAsync: updateDocument } = trpc.document.update.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
-      utils.document.get.setData(
+      utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
         },
@@ -83,10 +84,23 @@ export const DocumentEditForm = ({
     },
   });
 
+  const { mutateAsync: setSigningOrderForDocument } =
+    trpc.document.setSigningOrderForDocument.useMutation({
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      onSuccess: (newData) => {
+        utils.document.getDocumentWithDetailsById.setData(
+          {
+            documentId: initialDocument.id,
+          },
+          (oldData) => ({ ...(oldData || initialDocument), ...newData, id: Number(newData.id) }),
+        );
+      },
+    });
+
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: ({ fields: newFields }) => {
-      utils.document.get.setData(
+      utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
         },
@@ -98,7 +112,7 @@ export const DocumentEditForm = ({
   const { mutateAsync: setRecipients } = trpc.recipient.setDocumentRecipients.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: ({ recipients: newRecipients }) => {
-      utils.document.get.setData(
+      utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
         },
@@ -107,10 +121,10 @@ export const DocumentEditForm = ({
     },
   });
 
-  const { mutateAsync: sendDocument } = trpc.document.distribute.useMutation({
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
-      utils.document.get.setData(
+      utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
         },
@@ -159,37 +173,34 @@ export const DocumentEditForm = ({
     return initialStep;
   });
 
-  const saveSettingsData = async (data: TAddSettingsFormSchema) => {
-    const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
-
-    const parsedGlobalAccessAuth = z
-      .array(ZDocumentAccessAuthTypesSchema)
-      .safeParse(data.globalAccessAuth);
-
-    return updateDocument({
-      documentId: document.id,
-      data: {
-        title: data.title,
-        externalId: data.externalId || null,
-        visibility: data.visibility,
-        globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
-        globalActionAuth: data.globalActionAuth ?? [],
-      },
-      meta: {
-        timezone,
-        dateFormat,
-        redirectUrl,
-        language: isValidLanguageCode(language) ? language : undefined,
-        typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
-        uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
-        drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-      },
-    });
-  };
-
   const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
     try {
-      await saveSettingsData(data);
+      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
+
+      const parsedGlobalAccessAuth = z
+        .array(ZDocumentAccessAuthTypesSchema)
+        .safeParse(data.globalAccessAuth);
+
+      await updateDocument({
+        documentId: document.id,
+        data: {
+          title: data.title,
+          externalId: data.externalId || null,
+          visibility: data.visibility,
+          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+          globalActionAuth: data.globalActionAuth ?? [],
+        },
+        meta: {
+          timezone,
+          dateFormat,
+          redirectUrl,
+          language: isValidLanguageCode(language) ? language : undefined,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+        },
+      });
+
       setStep('signers');
     } catch (err) {
       console.error(err);
@@ -202,58 +213,30 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onAddSettingsFormAutoSave = async (data: TAddSettingsFormSchema) => {
-    try {
-      await saveSettingsData(data);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while auto-saving the document settings.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const saveSignersData = async (data: TAddSignersFormSchema) => {
-    return Promise.all([
-      updateDocument({
-        documentId: document.id,
-        meta: {
-          allowDictateNextSigner: data.allowDictateNextSigner,
-          signingOrder: data.signingOrder,
-        },
-      }),
-
-      setRecipients({
-        documentId: document.id,
-        recipients: data.signers.map((signer) => ({
-          ...signer,
-          // Explicitly set to null to indicate we want to remove auth if required.
-          actionAuth: signer.actionAuth ?? [],
-        })),
-      }),
-    ]);
-  };
-
-  const onAddSignersFormAutoSave = async (data: TAddSignersFormSchema) => {
-    try {
-      await saveSignersData(data);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while adding signers.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
-      await saveSignersData(data);
+      await Promise.all([
+        setSigningOrderForDocument({
+          documentId: document.id,
+          signingOrder: data.signingOrder,
+        }),
+
+        updateDocument({
+          documentId: document.id,
+          meta: {
+            allowDictateNextSigner: data.allowDictateNextSigner,
+          },
+        }),
+
+        setRecipients({
+          documentId: document.id,
+          recipients: data.signers.map((signer) => ({
+            ...signer,
+            // Explicitly set to null to indicate we want to remove auth if required.
+            actionAuth: signer.actionAuth ?? [],
+          })),
+        }),
+      ]);
 
       setStep('fields');
     } catch (err) {
@@ -267,16 +250,12 @@ export const DocumentEditForm = ({
     }
   };
 
-  const saveFieldsData = async (data: TAddFieldsFormSchema) => {
-    return addFields({
-      documentId: document.id,
-      fields: data.fields,
-    });
-  };
-
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
-      await saveFieldsData(data);
+      await addFields({
+        documentId: document.id,
+        fields: data.fields,
+      });
 
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
@@ -298,60 +277,24 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onAddFieldsFormAutoSave = async (data: TAddFieldsFormSchema) => {
-    try {
-      await saveFieldsData(data);
-      // Don't clear localStorage on auto-save, only on explicit submit
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while auto-saving the fields.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const saveSubjectData = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
-      data.meta;
-
-    return updateDocument({
-      documentId: document.id,
-      meta: {
-        subject,
-        message,
-        distributionMethod,
-        emailId,
-        emailReplyTo,
-        emailSettings: emailSettings,
-      },
-    });
-  };
-
-  const sendDocumentWithSubject = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
-      data.meta;
-
-    return sendDocument({
-      documentId: document.id,
-      meta: {
-        subject,
-        message,
-        distributionMethod,
-        emailId,
-        emailReplyTo: emailReplyTo || null,
-        emailSettings,
-      },
-    });
-  };
-
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    try {
-      await sendDocumentWithSubject(data);
+    const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
+      data.meta;
 
-      if (data.meta.distributionMethod === DocumentDistributionMethod.EMAIL) {
+    try {
+      await sendDocument({
+        documentId: document.id,
+        meta: {
+          subject,
+          message,
+          distributionMethod,
+          emailId,
+          emailReplyTo: emailReplyTo || null,
+          emailSettings: emailSettings,
+        },
+      });
+
+      if (distributionMethod === DocumentDistributionMethod.EMAIL) {
         toast({
           title: _(msg`Document sent`),
           description: _(msg`Your document has been sent successfully.`),
@@ -379,21 +322,6 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onAddSubjectFormAutoSave = async (data: TAddSubjectFormSchema) => {
-    try {
-      // Save form data without sending the document
-      await saveSubjectData(data);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while auto-saving the subject form.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   const currentDocumentFlow = documentFlow[step];
 
   /**
@@ -439,28 +367,25 @@ export const DocumentEditForm = ({
               fields={fields}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
-              onAutoSave={onAddSettingsFormAutoSave}
             />
 
             <AddSignersFormPartial
-              key={document.id}
+              key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               signingOrder={document.documentMeta?.signingOrder}
               allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
               onSubmit={onAddSignersFormSubmit}
-              onAutoSave={onAddSignersFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddFieldsFormPartial
-              key={document.id}
+              key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
-              onAutoSave={onAddFieldsFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               teamId={team.id}
             />
@@ -472,7 +397,6 @@ export const DocumentEditForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
-              onAutoSave={onAddSubjectFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -42,7 +42,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
 
   const onDownloadClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.get.query(
+      const documentWithData = await trpcClient.document.getDocumentById.query(
         {
           documentId: document.id,
         },

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -71,7 +71,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
 
   const onDownloadClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.get.query(
+      const documentWithData = await trpcClient.document.getDocumentById.query(
         {
           documentId: document.id,
         },
@@ -100,7 +100,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
 
   const onDownloadOriginalClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.get.query(
+      const documentWithData = await trpcClient.document.getDocumentById.query(
         {
           documentId: document.id,
         },

apps/remix/app/components/general/document/document-page-view-recent-activity.tsx

@@ -32,7 +32,7 @@ export const DocumentPageViewRecentActivity = ({
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-  } = trpc.document.auditLog.find.useInfiniteQuery(
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
     {
       documentId,
       filterForRecentActivity: true,

apps/remix/app/components/general/document/document-search.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -26,16 +26,13 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })
 
       setSearchParams(params);
     },
-    [searchParams],
+    [searchParams, setSearchParams],
   );
 
-  useEffect(() => {
-    const currentQueryParam = searchParams.get('query') || '';
-
-    if (debouncedSearchTerm !== currentQueryParam) {
-      handleSearch(debouncedSearchTerm);
-    }
-  }, [debouncedSearchTerm, searchParams]);
+  const currentQuery = searchParams?.get('query') ?? '';
+  if (currentQuery !== debouncedSearchTerm) {
+    handleSearch(debouncedSearchTerm);
+  }
 
   return (
     <Input

apps/remix/app/components/general/document/document-upload.tsx

@@ -52,7 +52,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
   const [isLoading, setIsLoading] = useState(false);
 
-  const { mutateAsync: createDocument } = trpc.document.create.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
   const disabledMessage = useMemo(() => {
     if (organisation.subscription && remaining.documents === 0) {

apps/remix/app/components/general/legacy-field-warning-popover.tsx

@@ -28,7 +28,7 @@ export const LegacyFieldWarningPopover = ({
   const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
     trpc.template.updateTemplate.useMutation();
   const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
-    trpc.document.update.useMutation();
+    trpc.document.updateDocument.useMutation();
 
   const onUpdateFieldsClick = async () => {
     if (type === 'document') {

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -124,36 +124,32 @@ export const TemplateEditForm = ({
     },
   });
 
-  const saveSettingsData = async (data: TAddTemplateSettingsFormSchema) => {
+  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
     const { signatureTypes } = data.meta;
 
     const parsedGlobalAccessAuth = z
       .array(ZDocumentAccessAuthTypesSchema)
       .safeParse(data.globalAccessAuth);
 
-    return updateTemplateSettings({
-      templateId: template.id,
-      data: {
-        title: data.title,
-        externalId: data.externalId || null,
-        visibility: data.visibility,
-        globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
-        globalActionAuth: data.globalActionAuth ?? [],
-      },
-      meta: {
-        ...data.meta,
-        emailReplyTo: data.meta.emailReplyTo || null,
-        typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
-        uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
-        drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-        language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
-      },
-    });
-  };
-
-  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
     try {
-      await saveSettingsData(data);
+      await updateTemplateSettings({
+        templateId: template.id,
+        data: {
+          title: data.title,
+          externalId: data.externalId || null,
+          visibility: data.visibility,
+          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+          globalActionAuth: data.globalActionAuth ?? [],
+        },
+        meta: {
+          ...data.meta,
+          emailReplyTo: data.meta.emailReplyTo || null,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+          language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
+        },
+      });
 
       setStep('signers');
     } catch (err) {
@@ -167,42 +163,24 @@ export const TemplateEditForm = ({
     }
   };
 
-  const onAddSettingsFormAutoSave = async (data: TAddTemplateSettingsFormSchema) => {
-    try {
-      await saveSettingsData(data);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while auto-saving the template settings.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const saveTemplatePlaceholderData = async (data: TAddTemplatePlacholderRecipientsFormSchema) => {
-    return Promise.all([
-      updateTemplateSettings({
-        templateId: template.id,
-        meta: {
-          signingOrder: data.signingOrder,
-          allowDictateNextSigner: data.allowDictateNextSigner,
-        },
-      }),
-
-      setRecipients({
-        templateId: template.id,
-        recipients: data.signers,
-      }),
-    ]);
-  };
-
   const onAddTemplatePlaceholderFormSubmit = async (
     data: TAddTemplatePlacholderRecipientsFormSchema,
   ) => {
     try {
-      await saveTemplatePlaceholderData(data);
+      await Promise.all([
+        updateTemplateSettings({
+          templateId: template.id,
+          meta: {
+            signingOrder: data.signingOrder,
+            allowDictateNextSigner: data.allowDictateNextSigner,
+          },
+        }),
+
+        setRecipients({
+          templateId: template.id,
+          recipients: data.signers,
+        }),
+      ]);
 
       setStep('fields');
     } catch (err) {
@@ -214,46 +192,12 @@ export const TemplateEditForm = ({
     }
   };
 
-  const onAddTemplatePlaceholderFormAutoSave = async (
-    data: TAddTemplatePlacholderRecipientsFormSchema,
-  ) => {
-    try {
-      await saveTemplatePlaceholderData(data);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while auto-saving the template placeholders.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const saveFieldsData = async (data: TAddTemplateFieldsFormSchema) => {
-    return addTemplateFields({
-      templateId: template.id,
-      fields: data.fields,
-    });
-  };
-
-  const onAddFieldsFormAutoSave = async (data: TAddTemplateFieldsFormSchema) => {
-    try {
-      await saveFieldsData(data);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while auto-saving the template fields.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   const onAddFieldsFormSubmit = async (data: TAddTemplateFieldsFormSchema) => {
     try {
-      await saveFieldsData(data);
+      await addTemplateFields({
+        templateId: template.id,
+        fields: data.fields,
+      });
 
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
@@ -326,12 +270,11 @@ export const TemplateEditForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSettingsFormSubmit}
-              onAutoSave={onAddSettingsFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddTemplatePlaceholderRecipientsFormPartial
-              key={template.id}
+              key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
@@ -339,17 +282,15 @@ export const TemplateEditForm = ({
               allowDictateNextSigner={template.templateMeta?.allowDictateNextSigner}
               templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
-              onAutoSave={onAddTemplatePlaceholderFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddTemplateFieldsFormPartial
-              key={template.id}
+              key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
-              onAutoSave={onAddFieldsFormAutoSave}
               teamId={team?.id}
             />
           </Stepper>

apps/remix/app/components/general/template/template-page-view-documents-table.tsx

@@ -67,7 +67,7 @@ export const TemplatePageViewDocumentsTable = ({
     Object.fromEntries(searchParams ?? []),
   );
 
-  const { data, isLoading, isLoadingError } = trpc.document.find.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.document.findDocuments.useQuery(
     {
       templateId,
       page: parsedSearchParams.page,

apps/remix/app/components/general/template/template-page-view-recent-activity.tsx

@@ -18,7 +18,7 @@ export const TemplatePageViewRecentActivity = ({
   templateId,
   documentRootPath,
 }: TemplatePageViewRecentActivityProps) => {
-  const { data, isLoading, isLoadingError, refetch } = trpc.document.find.useQuery({
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocuments.useQuery({
     templateId,
     orderByColumn: 'createdAt',
     orderByDirection: 'asc',

apps/remix/app/components/general/verify-email-banner.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -22,11 +22,34 @@ export type VerifyEmailBannerProps = {
 
 const RESEND_CONFIRMATION_EMAIL_TIMEOUT = 20 * ONE_SECOND;
 
+const shouldShowDialog = () => {
+  try {
+    const emailVerificationDialogLastShown = localStorage.getItem(
+      'emailVerificationDialogLastShown',
+    );
+
+    if (emailVerificationDialogLastShown) {
+      const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
+
+      if (Date.now() - lastShownTimestamp < ONE_DAY) {
+        return false;
+      }
+    }
+
+    // Update the timestamp when showing the dialog
+    localStorage.setItem('emailVerificationDialogLastShown', Date.now().toString());
+    return true;
+  } catch {
+    // In case localStorage is not available (SSR, incognito mode, etc.)
+    return false;
+  }
+};
+
 export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(shouldShowDialog);
   const [isPending, setIsPending] = useState(false);
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
@@ -62,27 +85,6 @@ export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
     setIsPending(false);
   };
 
-  useEffect(() => {
-    // Check localStorage to see if we've recently automatically displayed the dialog
-    // if it was within the past 24 hours, don't show it again
-    // otherwise, show it again and update the localStorage timestamp
-    const emailVerificationDialogLastShown = localStorage.getItem(
-      'emailVerificationDialogLastShown',
-    );
-
-    if (emailVerificationDialogLastShown) {
-      const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
-
-      if (Date.now() - lastShownTimestamp < ONE_DAY) {
-        return;
-      }
-    }
-
-    setIsOpen(true);
-
-    localStorage.setItem('emailVerificationDialogLastShown', Date.now().toString());
-  }, []);
-
   return (
     <>
       <div className="bg-yellow-200 dark:bg-yellow-400">

apps/remix/app/components/tables/admin-document-recipient-item-table.tsx

@@ -52,7 +52,7 @@ export const AdminDocumentRecipientItemTable = ({ recipient }: RecipientItemProp
     },
   });
 
-  const { mutateAsync: updateRecipient } = trpc.admin.recipient.update.useMutation();
+  const { mutateAsync: updateRecipient } = trpc.admin.updateRecipient.useMutation();
 
   const columns = useMemo(() => {
     return [

apps/remix/app/components/tables/document-logs-table.tsx

@@ -34,7 +34,7 @@ export const DocumentLogsTable = ({ documentId }: DocumentLogsTableProps) => {
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isLoadingError } = trpc.document.auditLog.find.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.document.findDocumentAuditLogs.useQuery(
     {
       documentId,
       page: parsedSearchParams.page,

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -45,7 +45,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const onDownloadClick = async () => {
     try {
       const document = !recipient
-        ? await trpcClient.document.get.query(
+        ? await trpcClient.document.getDocumentById.query(
             {
               documentId: row.id,
             },

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -77,7 +77,7 @@ export const DocumentsTableActionDropdown = ({
   const onDownloadClick = async () => {
     try {
       const document = !recipient
-        ? await trpcClient.document.get.query({
+        ? await trpcClient.document.getDocumentById.query({
             documentId: row.id,
           })
         : await trpcClient.document.getDocumentByToken.query({
@@ -103,7 +103,7 @@ export const DocumentsTableActionDropdown = ({
   const onDownloadOriginalClick = async () => {
     try {
       const document = !recipient
-        ? await trpcClient.document.get.query({
+        ? await trpcClient.document.getDocumentById.query({
             documentId: row.id,
           })
         : await trpcClient.document.getDocumentByToken.query({

apps/remix/app/components/tables/documents-table.tsx

@@ -11,7 +11,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/find-documents.types';
+import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';

apps/remix/app/components/tables/inbox-table.tsx

@@ -17,6 +17,7 @@ import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindInboxResponse } from '@documenso/trpc/server/document-router/find-inbox.types';
+import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -31,12 +32,12 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 
 export type DocumentsTableProps = {
-  data?: TFindInboxResponse;
+  data?: TFindDocumentsResponse;
   isLoading?: boolean;
   isLoadingError?: boolean;
 };
 
-type DocumentsTableRow = TFindInboxResponse['data'][number];
+type DocumentsTableRow = TFindDocumentsResponse['data'][number];
 
 export const InboxTable = () => {
   const { _, i18n } = useLingui();

apps/remix/app/components/tables/settings-security-passkey-table-actions.tsx

@@ -62,7 +62,7 @@ export const SettingsSecurityPasskeyTableActions = ({
   });
 
   const { mutateAsync: updatePasskey, isPending: isUpdatingPasskey } =
-    trpc.auth.passkey.update.useMutation({
+    trpc.auth.updatePasskey.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),
@@ -84,7 +84,7 @@ export const SettingsSecurityPasskeyTableActions = ({
     });
 
   const { mutateAsync: deletePasskey, isPending: isDeletingPasskey } =
-    trpc.auth.passkey.delete.useMutation({
+    trpc.auth.deletePasskey.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),

apps/remix/app/components/tables/settings-security-passkey-table.tsx

@@ -26,7 +26,7 @@ export const SettingsSecurityPasskeyTable = () => {
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isLoadingError } = trpc.auth.passkey.find.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.auth.findPasskeys.useQuery(
     {
       page: parsedSearchParams.page,
       perPage: parsedSearchParams.perPage,

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -48,7 +48,7 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
   const { toast } = useToast();
 
   const { mutate: resealDocument, isPending: isResealDocumentLoading } =
-    trpc.admin.document.reseal.useMutation({
+    trpc.admin.resealDocument.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -33,7 +33,7 @@ export default function AdminDocumentsPage() {
   const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
 
   const { data: findDocumentsData, isPending: isFindDocumentsLoading } =
-    trpc.admin.document.find.useQuery(
+    trpc.admin.findDocuments.useQuery(
       {
         query: debouncedTerm,
         page: page || 1,

apps/remix/app/routes/_authenticated+/admin+/users.$id.tsx

@@ -2,14 +2,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
 import { Link } from 'react-router';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
-import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
-import { ZUpdateUserRequestSchema } from '@documenso/trpc/server/admin-router/update-user.types';
+import { ZAdminUpdateProfileMutationSchema } from '@documenso/trpc/server/admin-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -33,12 +33,12 @@ import { AdminOrganisationsTable } from '~/components/tables/admin-organisations
 
 import { MultiSelectRoleCombobox } from '../../../components/general/multiselect-role-combobox';
 
-const ZUserFormSchema = ZUpdateUserRequestSchema.omit({ id: true });
+const ZUserFormSchema = ZAdminUpdateProfileMutationSchema.omit({ id: true });
 
 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
 
 export default function UserPage({ params }: { params: { id: number } }) {
-  const { data: user, isLoading: isLoadingUser } = trpc.admin.user.get.useQuery(
+  const { data: user, isLoading: isLoadingUser } = trpc.profile.getUser.useQuery(
     {
       id: Number(params.id),
     },
@@ -78,14 +78,14 @@ export default function UserPage({ params }: { params: { id: number } }) {
   return <AdminUserPage user={user} />;
 }
 
-const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
+const AdminUserPage = ({ user }: { user: User }) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
 
   const roles = user.roles ?? [];
 
-  const { mutateAsync: updateUserMutation } = trpc.admin.user.update.useMutation();
+  const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
 
   const form = useForm<TUserFormSchema>({
     resolver: zodResolver(ZUserFormSchema),

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -29,22 +29,29 @@ export default function TeamsSettingsMembersPage() {
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      if (params.toString() === searchParams?.toString()) {
+        return;
+      }
 
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { useSearchParams } from 'react-router';
@@ -20,21 +20,28 @@ export default function OrganisationSettingsTeamsPage() {
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/_layout.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { Outlet, useNavigate } from 'react-router';
 
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
@@ -30,13 +28,8 @@ export default function Layout() {
   const currentOrganisation = organisations[0];
   const team = currentOrganisation?.teams[0] || null;
 
-  useEffect(() => {
-    if (!isPersonalLayoutMode || !team) {
-      void navigate('/settings/profile');
-    }
-  }, []);
-
   if (!isPersonalLayoutMode || !team) {
+    void navigate('/settings/profile');
     return null;
   }
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -67,7 +67,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team.currentTeamRole;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
-
   let canAccessDocument = true;
 
   if (!isRecipient && document?.userId !== user.id) {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -50,6 +50,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
+  if (document.folderId) {
+    throw redirect(documentRootPath);
+  }
+
   const recipients = await getRecipientsForDocument({
     documentId,
     userId: user.id,
@@ -64,13 +68,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   return {
     document,
-    recipients,
     documentRootPath,
+    recipients,
   };
 }
 
 export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
-  const { document, recipients, documentRootPath } = loaderData;
+  const { document, documentRootPath, recipients } = loaderData;
 
   const { _, i18n } = useLingui();
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FolderType, OrganisationType } from '@prisma/client';
@@ -12,8 +12,7 @@ import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { trpc } from '@documenso/trpc/react';
-import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/find-documents-internal.types';
-import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/find-documents-internal.types';
+import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
@@ -53,15 +52,6 @@ export default function DocumentsPage() {
   const [isMovingDocument, setIsMovingDocument] = useState(false);
   const [documentToMove, setDocumentToMove] = useState<number | null>(null);
 
-  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.REJECTED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
-  });
-
   const findDocumentSearchParams = useMemo(
     () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
     [searchParams],
@@ -72,6 +62,19 @@ export default function DocumentsPage() {
     folderId,
   });
 
+  const stats = useMemo(
+    () =>
+      data?.stats ?? {
+        [ExtendedDocumentStatus.DRAFT]: 0,
+        [ExtendedDocumentStatus.PENDING]: 0,
+        [ExtendedDocumentStatus.COMPLETED]: 0,
+        [ExtendedDocumentStatus.REJECTED]: 0,
+        [ExtendedDocumentStatus.INBOX]: 0,
+        [ExtendedDocumentStatus.ALL]: 0,
+      },
+    [data?.stats],
+  );
+
   const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
     const params = new URLSearchParams(searchParams);
 
@@ -102,12 +105,6 @@ export default function DocumentsPage() {
     return path;
   };
 
-  useEffect(() => {
-    if (data?.stats) {
-      setStats(data.stats);
-    }
-  }, [data?.stats]);
-
   return (
     <DocumentDropZoneWrapper>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { useLocation, useSearchParams } from 'react-router';
@@ -19,26 +19,33 @@ export default function TeamsSettingsMembersPage() {
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      // If nothing to change then do nothing.
+      if (params.toString() === searchParams?.toString()) {
+        return;
+      }
 
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -130,12 +130,8 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
     }
   };
 
-  useEffect(() => {
-    setIsPublicProfileVisible(profile.enabled);
-  }, [profile.enabled]);
-
   return (
-    <div className="max-w-2xl">
+    <div key={team.id} className="max-w-2xl">
       <SettingsHeader
         title={t`Public Profile`}
         subtitle={t`You can choose to enable or disable the profile for public view.`}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -21,7 +21,7 @@ export function meta() {
 export default function ApiTokensPage() {
   const { i18n } = useLingui();
 
-  const { data: tokens } = trpc.apiToken.getMany.useQuery();
+  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
 
   const team = useOptionalCurrentTeam();
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -9,10 +9,10 @@ import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 
 import { FolderGrid } from '~/components/general/folder/folder-grid';
-import { TemplateDropZoneWrapper } from '~/components/general/template/template-drop-zone-wrapper';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
+import { TemplateDropZoneWrapper } from '~/components/general/template/template-drop-zone-wrapper';
 
 export function meta() {
   return appMetaTags('Templates');

apps/remix/app/routes/_unauthenticated+/organisation.invite.$token.tsx

@@ -45,9 +45,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
         mode: 'insensitive',
       },
     },
-    select: {
-      id: true,
-    },
   });
 
   // Directly convert the team member invite to a team member if they already have an account.

apps/remix/app/routes/_unauthenticated+/verify-email.$token.tsx

@@ -38,33 +38,48 @@ export default function VerifyEmailPage({ loaderData }: Route.ComponentProps) {
   const [state, setState] = useState<keyof typeof EMAIL_VERIFICATION_STATE | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const verifyToken = async () => {
-    setIsLoading(true);
-
-    try {
-      const response = await authClient.emailPassword.verifyEmail({
-        token,
-      });
-
-      await refreshSession();
-
-      setState(response.state);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`We were unable to verify your email at this time.`),
-      });
-
-      await navigate('/verify-email');
-    }
-
-    setIsLoading(false);
-  };
-
   useEffect(() => {
-    void verifyToken();
+    let ignore = false;
+
+    const verify = async () => {
+      try {
+        setIsLoading(true);
+
+        const response = await authClient.emailPassword.verifyEmail({
+          token,
+        });
+
+        if (ignore) {
+          return;
+        }
+
+        await refreshSession();
+        setState(response.state);
+      } catch (err) {
+        if (ignore) {
+          return;
+        }
+
+        console.error(err);
+
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(msg`We were unable to verify your email at this time.`),
+        });
+
+        await navigate('/verify-email');
+      } finally {
+        if (!ignore) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void verify();
+
+    return () => {
+      ignore = true;
+    };
   }, []);
 
   if (isLoading || state === null) {

apps/remix/package.json

@@ -101,5 +101,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "1.12.2-rc.6"
+  "version": "1.12.2-rc.4"
 }

docker/testing/compose.yml

@@ -51,4 +51,4 @@ services:
     ports:
       - 3000:3000
     volumes:
-      - ../../apps/remix/example/cert.p12:/opt/documenso/cert.p12
+      - ../../apps/web/example/cert.p12:/opt/documenso/cert.p12

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.12.2-rc.6",
+  "version": "1.12.2-rc.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.12.2-rc.6",
+      "version": "1.12.2-rc.4",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -89,7 +89,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
-      "version": "1.12.2-rc.6",
+      "version": "1.12.2-rc.4",
       "dependencies": {
         "@documenso/api": "*",
         "@documenso/assets": "*",