fix: duplicate document

When sending a document for signing, emails for recipients are sent
before the document status is updated.
In this case, the job "send.signing.requested.email" fails because it
cannot find the document with a PENDING status.

AGENTS.md

@@ -0,0 +1,57 @@
+# 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

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: User;
+  user: TGetUserResponse;
 };
 
 export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {

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: User;
+  userToDisable: TGetUserResponse;
 };
 
 export const AdminUserDisableDialog = ({

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: User;
+  userToEnable: TGetUserResponse;
 };
 
 export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnableDialogProps) => {

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: User;
+  user: TGetUserResponse;
 };
 
 export const AdminUserResetTwoFactorDialog = ({

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

@@ -172,6 +172,8 @@ 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 ?? {};
@@ -540,7 +542,9 @@ export const ConfigureFieldsView = ({
                 <div>
                   <PDFViewer documentData={normalizedDocumentData} />
 
-                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                  <ElementVisible
+                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+                  >
                     {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,8 +91,12 @@ 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();
 
@@ -343,19 +347,34 @@ export const EmbedDirectTemplateClientPage = ({
                   <Trans>Sign document</Trans>
                 </h3>
 
-                <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>
+                {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>
+                )}
               </div>
             </div>
 
@@ -442,7 +461,9 @@ export const EmbedDirectTemplateClientPage = ({
           </div>
         </div>
 
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+        >
           {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,8 +50,10 @@ export const EmbedDocumentFields = ({
   onSignField,
   onUnsignField,
 }: EmbedDocumentFieldsProps) => {
+  const highestPageNumber = Math.max(...fields.map((field) => field.page));
+
   return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+    <ElementVisible target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}>
       {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,6 +106,8 @@ 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();
 
@@ -116,6 +118,8 @@ export const EmbedSignDocumentClientPage = ({
 
   const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
+  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
+
   const assistantSignersId = useId();
 
   const onNextFieldClick = () => {
@@ -305,19 +309,36 @@ export const EmbedSignDocumentClientPage = ({
                     )}
                   </h3>
 
-                  <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>
+                  {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>
+                  )}
                 </div>
               </div>
 
@@ -465,7 +486,9 @@ export const EmbedSignDocumentClientPage = ({
             </div>
           </div>
 
-          <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          <ElementVisible
+            target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+          >
             {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/multisign/multi-sign-document-signing-view.tsx

@@ -92,6 +92,8 @@ 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) => {
@@ -357,7 +359,9 @@ export const MultiSignDocumentSigningView = ({
               </div>
 
               {hasDocumentLoaded && (
-                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                <ElementVisible
+                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+                >
                   {showPendingFieldTooltip && pendingFields.length > 0 && (
                     <FieldToolTip
                       key={pendingFields[0].id}

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

@@ -79,6 +79,8 @@ 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]);
@@ -221,7 +223,9 @@ export const DirectTemplateSigningForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+        >
           {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-form.tsx

@@ -7,14 +7,11 @@ 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, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { sortFieldsByPosition } 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';
@@ -34,29 +31,33 @@ 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();
 
@@ -66,21 +67,12 @@ 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],
@@ -96,9 +88,9 @@ export const DocumentSigningForm = ({
     return fieldsRequiringValidation.filter((field) => field.recipientId === recipient.id);
   }, [fieldsRequiringValidation, recipient]);
 
-  const fieldsValidated = () => {
+  const localFieldsValidated = () => {
     setValidateUninsertedFields(true);
-    validateFieldsInserted(fieldsRequiringValidation);
+    fieldsValidated();
   };
 
   const onAssistantFormSubmit = () => {
@@ -126,55 +118,6 @@ 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] && (
@@ -205,7 +148,7 @@ export const DocumentSigningForm = ({
                     isSubmitting={isSubmitting}
                     documentTitle={document.title}
                     fields={fields}
-                    fieldsValidated={fieldsValidated}
+                    fieldsValidated={localFieldsValidated}
                     onSignatureComplete={async (nextSigner) => {
                       await completeDocument(undefined, nextSigner);
                     }}
@@ -364,7 +307,7 @@ export const DocumentSigningForm = ({
                   isSubmitting={isSubmitting || isAssistantSubmitting}
                   documentTitle={document.title}
                   fields={fields}
-                  fieldsValidated={fieldsValidated}
+                  fieldsValidated={localFieldsValidated}
                   disabled={!isRecipientsTurn}
                   onSignatureComplete={async (nextSigner) => {
                     await completeDocument(undefined, nextSigner);

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

@@ -1,15 +1,18 @@
-import { useState } from 'react';
+import { useMemo, 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 { match } from 'ts-pattern';
+import { useNavigate } from 'react-router';
+import { P, 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,
@@ -18,8 +21,11 @@ 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';
@@ -40,6 +46,7 @@ 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 = {
@@ -63,9 +70,56 @@ 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})`;
 
@@ -78,6 +132,31 @@ 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">
@@ -163,19 +242,55 @@ export const DocumentSigningPageView = ({
                     .otherwise(() => null)}
                 </h3>
 
-                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                  {isExpanded ? (
-                    <LucideChevronDown
-                      className="text-muted-foreground h-5 w-5"
+                {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"
                       onClick={() => setIsExpanded(false)}
-                    />
-                  ) : (
-                    <LucideChevronUp
-                      className="text-muted-foreground h-5 w-5"
+                    >
+                      <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"
                       onClick={() => setIsExpanded(true)}
-                    />
-                  )}
-                </Button>
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ))}
               </div>
 
               <div className="hidden group-data-[expanded]/document-widget:block md:block">
@@ -204,10 +319,13 @@ 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>
@@ -224,7 +342,9 @@ export const DocumentSigningPageView = ({
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
         )}
 
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+        >
           {fields
             .filter(
               (field) =>

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

@@ -159,34 +159,37 @@ 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 {
-      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),
-        },
-      });
-
+      await saveSettingsData(data);
       setStep('signers');
     } catch (err) {
       console.error(err);
@@ -199,26 +202,58 @@ 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 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 ?? [],
-          })),
-        }),
-      ]);
+      await saveSignersData(data);
 
       setStep('fields');
     } catch (err) {
@@ -232,12 +267,16 @@ export const DocumentEditForm = ({
     }
   };
 
+  const saveFieldsData = async (data: TAddFieldsFormSchema) => {
+    return addFields({
+      documentId: document.id,
+      fields: data.fields,
+    });
+  };
+
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
-      await addFields({
-        documentId: document.id,
-        fields: data.fields,
-      });
+      await saveFieldsData(data);
 
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
@@ -259,24 +298,60 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
+  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;
 
-    try {
-      await sendDocument({
-        documentId: document.id,
-        meta: {
-          subject,
-          message,
-          distributionMethod,
-          emailId,
-          emailReplyTo: emailReplyTo || null,
-          emailSettings: emailSettings,
-        },
-      });
+    return updateDocument({
+      documentId: document.id,
+      meta: {
+        subject,
+        message,
+        distributionMethod,
+        emailId,
+        emailReplyTo,
+        emailSettings: emailSettings,
+      },
+    });
+  };
 
-      if (distributionMethod === DocumentDistributionMethod.EMAIL) {
+  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);
+
+      if (data.meta.distributionMethod === DocumentDistributionMethod.EMAIL) {
         toast({
           title: _(msg`Document sent`),
           description: _(msg`Your document has been sent successfully.`),
@@ -304,6 +379,21 @@ 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];
 
   /**
@@ -349,25 +439,28 @@ export const DocumentEditForm = ({
               fields={fields}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
+              onAutoSave={onAddSettingsFormAutoSave}
             />
 
             <AddSignersFormPartial
-              key={recipients.length}
+              key={document.id}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               signingOrder={document.documentMeta?.signingOrder}
               allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
               onSubmit={onAddSignersFormSubmit}
+              onAutoSave={onAddSignersFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddFieldsFormPartial
-              key={fields.length}
+              key={document.id}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
+              onAutoSave={onAddFieldsFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               teamId={team.id}
             />
@@ -379,6 +472,7 @@ export const DocumentEditForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
+              onAutoSave={onAddSubjectFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>

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

@@ -124,32 +124,36 @@ export const TemplateEditForm = ({
     },
   });
 
-  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+  const saveSettingsData = 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 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,
-        },
-      });
+      await saveSettingsData(data);
 
       setStep('signers');
     } catch (err) {
@@ -163,24 +167,42 @@ 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 Promise.all([
-        updateTemplateSettings({
-          templateId: template.id,
-          meta: {
-            signingOrder: data.signingOrder,
-            allowDictateNextSigner: data.allowDictateNextSigner,
-          },
-        }),
-
-        setRecipients({
-          templateId: template.id,
-          recipients: data.signers,
-        }),
-      ]);
+      await saveTemplatePlaceholderData(data);
 
       setStep('fields');
     } catch (err) {
@@ -192,12 +214,46 @@ 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 addTemplateFields({
-        templateId: template.id,
-        fields: data.fields,
-      });
+      await saveFieldsData(data);
 
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
@@ -270,11 +326,12 @@ export const TemplateEditForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSettingsFormSubmit}
+              onAutoSave={onAddSettingsFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddTemplatePlaceholderRecipientsFormPartial
-              key={recipients.length}
+              key={template.id}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
@@ -282,15 +339,17 @@ export const TemplateEditForm = ({
               allowDictateNextSigner={template.templateMeta?.allowDictateNextSigner}
               templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
+              onAutoSave={onAddTemplatePlaceholderFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddTemplateFieldsFormPartial
-              key={fields.length}
+              key={template.id}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
+              onAutoSave={onAddFieldsFormAutoSave}
               teamId={team?.id}
             />
           </Stepper>

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

@@ -2,13 +2,13 @@ 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 { Button } from '@documenso/ui/primitives/button';
 import {
@@ -38,7 +38,7 @@ const ZUserFormSchema = ZUpdateUserRequestSchema.omit({ id: true });
 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
 
 export default function UserPage({ params }: { params: { id: number } }) {
-  const { data: user, isLoading: isLoadingUser } = trpc.profile.getUser.useQuery(
+  const { data: user, isLoading: isLoadingUser } = trpc.admin.user.get.useQuery(
     {
       id: Number(params.id),
     },
@@ -78,7 +78,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
   return <AdminUserPage user={user} />;
 }
 
-const AdminUserPage = ({ user }: { user: User }) => {
+const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();

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

@@ -67,6 +67,7 @@ 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,10 +50,6 @@ 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,
@@ -68,13 +64,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   return {
     document,
-    documentRootPath,
     recipients,
+    documentRootPath,
   };
 }
 
 export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
-  const { document, documentRootPath, recipients } = loaderData;
+  const { document, recipients, documentRootPath } = loaderData;
 
   const { _, i18n } = useLingui();
 

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,6 +45,9 @@ 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/package.json

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

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.12.2-rc.5",
+  "version": "1.12.2-rc.6",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --filter=@documenso/remix",

packages/api/v1/implementation.ts

@@ -34,6 +34,7 @@ import { createTemplate } from '@documenso/lib/server-only/template/create-templ
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
 import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { extractDerivedDocumentEmailSettings } from '@documenso/lib/types/document-email';
 import {
   ZCheckboxFieldMeta,
@@ -980,10 +981,12 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
         userId: user.id,
         teamId: team?.id,
         recipients: [
-          ...recipients.map(({ email, name }) => ({
-            email,
-            name,
-            role,
+          ...recipients.map((recipient) => ({
+            email: recipient.email,
+            name: recipient.name,
+            role: recipient.role,
+            signingOrder: recipient.signingOrder,
+            actionAuth: ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? [],
           })),
           {
             email,

packages/api/v1/schema.ts

@@ -33,7 +33,7 @@ export const ZNoBodyMutationSchema = null;
  */
 export const ZGetDocumentsQuerySchema = z.object({
   page: z.coerce.number().min(1).optional().default(1),
-  perPage: z.coerce.number().min(1).optional().default(1),
+  perPage: z.coerce.number().min(1).optional().default(10),
 });
 
 export type TGetDocumentsQuerySchema = z.infer<typeof ZGetDocumentsQuerySchema>;
@@ -637,5 +637,5 @@ export const ZSuccessfulGetTemplatesResponseSchema = z.object({
 
 export const ZGetTemplatesQuerySchema = z.object({
   page: z.coerce.number().min(1).optional().default(1),
-  perPage: z.coerce.number().min(1).optional().default(1),
+  perPage: z.coerce.number().min(1).optional().default(10),
 });

packages/app-tests/e2e/document-flow/autosave-fields-step.spec.ts

@@ -0,0 +1,293 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+const setupDocumentAndNavigateToFieldsStep = async (page: Page) => {
+  const { user, team } = await seedUser();
+  const document = await seedBlankDocument(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await page.getByPlaceholder('Email').fill('recipient1@documenso.com');
+  await page.getByPlaceholder('Name').fill('Recipient 1');
+
+  await page.getByRole('button', { name: 'Add signer' }).click();
+
+  await page.getByPlaceholder('Email').nth(1).fill('recipient2@documenso.com');
+  await page.getByPlaceholder('Name').nth(1).fill('Recipient 2');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  return { user, team, document };
+};
+
+const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+test.describe('AutoSave Fields Step', () => {
+  test('should autosave the fields without advanced settings', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Cancel' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 500,
+      },
+    });
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getFieldsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedFields.length).toBe(3);
+      expect(retrievedFields[0].type).toBe('SIGNATURE');
+      expect(retrievedFields[1].type).toBe('TEXT');
+      expect(retrievedFields[2].type).toBe('SIGNATURE');
+    }).toPass();
+  });
+
+  test('should autosave the field deletion', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Cancel' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 500,
+      },
+    });
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 1 (recipient1@documenso.com)' }).click();
+
+    await page.getByText('Text').nth(1).click();
+    await page.getByRole('button', { name: 'Remove' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getFieldsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedFields.length).toBe(2);
+      expect(retrievedFields[0].type).toBe('SIGNATURE');
+      expect(retrievedFields[1].type).toBe('SIGNATURE');
+    }).toPass();
+  });
+
+  test('should autosave the field duplication', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Cancel' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 500,
+      },
+    });
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 1 (recipient1@documenso.com)' }).click();
+
+    await page.getByText('Signature').nth(1).click();
+    await page.getByRole('button', { name: 'Duplicate', exact: true }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getFieldsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedFields.length).toBe(4);
+      expect(retrievedFields[0].type).toBe('SIGNATURE');
+      expect(retrievedFields[1].type).toBe('TEXT');
+      expect(retrievedFields[2].type).toBe('SIGNATURE');
+      expect(retrievedFields[3].type).toBe('SIGNATURE');
+    }).toPass();
+  });
+
+  test('should autosave the fields with advanced settings', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByRole('textbox', { name: 'Field label' }).fill('Test Field');
+    await page.getByRole('textbox', { name: 'Field placeholder' }).fill('Test Placeholder');
+    await page.getByRole('textbox', { name: 'Add text to the field' }).fill('Test Text');
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Save' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getFieldsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedFields.length).toBe(2);
+      expect(retrievedFields[0].type).toBe('SIGNATURE');
+      expect(retrievedFields[1].type).toBe('TEXT');
+
+      const textField = retrievedFields[1];
+      expect(textField.fieldMeta).toBeDefined();
+
+      if (
+        textField.fieldMeta &&
+        typeof textField.fieldMeta === 'object' &&
+        'type' in textField.fieldMeta
+      ) {
+        expect(textField.fieldMeta.type).toBe('text');
+        expect(textField.fieldMeta.label).toBe('Test Field');
+        expect(textField.fieldMeta.placeholder).toBe('Test Placeholder');
+
+        if (textField.fieldMeta.type === 'text') {
+          expect(textField.fieldMeta.text).toBe('Test Text');
+        }
+      } else {
+        throw new Error('fieldMeta should be defined and contain advanced settings');
+      }
+    }).toPass();
+  });
+});

packages/app-tests/e2e/document-flow/autosave-settings-step.spec.ts

@@ -0,0 +1,243 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+const setupDocument = async (page: Page) => {
+  const { user, team } = await seedUser();
+
+  const document = await seedBlankDocument(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  return { user, team, document };
+};
+
+const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+test.describe('AutoSave Settings Step', () => {
+  test('should autosave the title change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    const newDocumentTitle = 'New Document Title';
+
+    await page.getByRole('textbox', { name: 'Title *' }).fill(newDocumentTitle);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      await expect(page.getByRole('textbox', { name: 'Title *' })).toHaveValue(retrieved.title);
+    }).toPass();
+  });
+
+  test('should autosave the language change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    const newDocumentLanguage = 'French';
+    const expectedLanguageCode = 'fr';
+
+    await page.getByRole('combobox').first().click();
+    await page.getByRole('option', { name: newDocumentLanguage }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.documentMeta?.language).toBe(expectedLanguageCode);
+    }).toPass();
+  });
+
+  test('should autosave the document access change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    const access = 'Require account';
+    const accessValue = 'ACCOUNT';
+
+    await page.getByRole('combobox').nth(1).click();
+    await page.getByRole('option', { name: access }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.authOptions?.globalAccessAuth).toContain(accessValue);
+    }).toPass();
+  });
+
+  test('should autosave the external ID change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    const newExternalId = '1234567890';
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('textbox', { name: 'External ID' }).fill(newExternalId);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.externalId).toBe(newExternalId);
+    }).toPass();
+  });
+
+  test('should autosave the allowed signature types change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('combobox').nth(3).click();
+    await page.getByRole('option', { name: 'Draw' }).click();
+    await page.getByRole('option', { name: 'Type' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.documentMeta?.drawSignatureEnabled).toBe(false);
+      expect(retrieved.documentMeta?.typedSignatureEnabled).toBe(false);
+      expect(retrieved.documentMeta?.uploadSignatureEnabled).toBe(true);
+    }).toPass();
+  });
+
+  test('should autosave the date format change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('combobox').nth(4).click();
+    await page.getByRole('option', { name: 'ISO 8601', exact: true }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.documentMeta?.dateFormat).toBe("yyyy-MM-dd'T'HH:mm:ss.SSSXXX");
+    }).toPass();
+  });
+
+  test('should autosave the timezone change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('combobox').nth(5).click();
+    await page.getByRole('option', { name: 'Europe/London' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.documentMeta?.timezone).toBe('Europe/London');
+    }).toPass();
+  });
+
+  test('should autosave the redirect URL change', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    const newRedirectUrl = 'https://documenso.com/test/';
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('textbox', { name: 'Redirect URL' }).fill(newRedirectUrl);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.documentMeta?.redirectUrl).toBe(newRedirectUrl);
+    }).toPass();
+  });
+
+  test('should autosave multiple field changes together', async ({ page }) => {
+    const { user, document, team } = await setupDocument(page);
+
+    const newTitle = 'Updated Document Title';
+    await page.getByRole('textbox', { name: 'Title *' }).fill(newTitle);
+
+    await page.getByRole('combobox').first().click();
+    await page.getByRole('option', { name: 'German' }).click();
+
+    await page.getByRole('combobox').nth(1).click();
+    await page.getByRole('option', { name: 'Require account' }).click();
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+    const newExternalId = 'MULTI-TEST-123';
+    await page.getByRole('textbox', { name: 'External ID' }).fill(newExternalId);
+
+    await page.getByRole('combobox').nth(5).click();
+    await page.getByRole('option', { name: 'Europe/Berlin' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrieved = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrieved.title).toBe(newTitle);
+      expect(retrieved.documentMeta?.language).toBe('de');
+      expect(retrieved.authOptions?.globalAccessAuth).toContain('ACCOUNT');
+      expect(retrieved.externalId).toBe(newExternalId);
+      expect(retrieved.documentMeta?.timezone).toBe('Europe/Berlin');
+    }).toPass();
+  });
+});

packages/app-tests/e2e/document-flow/autosave-signers-step.spec.ts

@@ -0,0 +1,168 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+const setupDocumentAndNavigateToSignersStep = async (page: Page) => {
+  const { user, team } = await seedUser();
+  const document = await seedBlankDocument(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  return { user, team, document };
+};
+
+const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+const addSignerAndSave = async (page: Page) => {
+  await page.getByPlaceholder('Email').fill('recipient1@documenso.com');
+  await page.getByPlaceholder('Name').fill('Recipient 1');
+
+  await triggerAutosave(page);
+};
+
+test.describe('AutoSave Signers Step', () => {
+  test('should autosave the signers addition', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await expect(async () => {
+      const retrievedRecipients = await getRecipientsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedRecipients.length).toBe(1);
+      expect(retrievedRecipients[0].email).toBe('recipient1@documenso.com');
+      expect(retrievedRecipients[0].name).toBe('Recipient 1');
+    }).toPass();
+  });
+
+  test('should autosave the signer deletion', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await page.getByRole('button', { name: 'Add myself' }).click();
+    await triggerAutosave(page);
+
+    await page.getByTestId('remove-signer-button').first().click();
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedRecipients = await getRecipientsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedRecipients.length).toBe(1);
+      expect(retrievedRecipients[0].email).toBe(user.email);
+      expect(retrievedRecipients[0].name).toBe(user.name);
+    }).toPass();
+  });
+
+  test('should autosave the signer update', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await page.getByPlaceholder('Name').fill('Documenso Manager');
+    await page.getByPlaceholder('Email').fill('manager@documenso.com');
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Receives copy' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedRecipients = await getRecipientsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedRecipients.length).toBe(1);
+      expect(retrievedRecipients[0].email).toBe('manager@documenso.com');
+      expect(retrievedRecipients[0].name).toBe('Documenso Manager');
+      expect(retrievedRecipients[0].role).toBe('CC');
+    }).toPass();
+  });
+
+  test('should autosave the signing order change', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await page.getByRole('button', { name: 'Add signer' }).click();
+
+    await page.getByTestId('signer-email-input').nth(1).fill('recipient2@documenso.com');
+    await page.getByLabel('Name').nth(1).fill('Recipient 2');
+
+    await page.getByRole('button', { name: 'Add Signer' }).click();
+
+    await page.getByTestId('signer-email-input').nth(2).fill('recipient3@documenso.com');
+    await page.getByLabel('Name').nth(2).fill('Recipient 3');
+
+    await triggerAutosave(page);
+
+    await page.getByLabel('Enable signing order').check();
+    await page.getByLabel('Allow signers to dictate next signer').check();
+    await triggerAutosave(page);
+
+    await page.getByTestId('signing-order-input').nth(0).fill('3');
+    await page.getByTestId('signing-order-input').nth(0).blur();
+    await triggerAutosave(page);
+
+    await page.getByTestId('signing-order-input').nth(1).fill('1');
+    await page.getByTestId('signing-order-input').nth(1).blur();
+    await triggerAutosave(page);
+
+    await page.getByTestId('signing-order-input').nth(2).fill('2');
+    await page.getByTestId('signing-order-input').nth(2).blur();
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedDocumentData = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const retrievedRecipients = await getRecipientsForDocument({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedDocumentData.documentMeta?.signingOrder).toBe('SEQUENTIAL');
+      expect(retrievedDocumentData.documentMeta?.allowDictateNextSigner).toBe(true);
+      expect(retrievedRecipients.length).toBe(3);
+      expect(retrievedRecipients[0].signingOrder).toBe(2);
+      expect(retrievedRecipients[1].signingOrder).toBe(3);
+      expect(retrievedRecipients[2].signingOrder).toBe(1);
+    }).toPass();
+  });
+});

packages/app-tests/e2e/document-flow/autosave-subject-step.spec.ts

@@ -0,0 +1,200 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+export const setupDocumentAndNavigateToSubjectStep = async (page: Page) => {
+  const { user, team } = await seedUser();
+  const document = await seedBlankDocument(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await page.getByPlaceholder('Email').fill('recipient1@documenso.com');
+  await page.getByPlaceholder('Name').fill('Recipient 1');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await page.getByRole('button', { name: 'Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Distribute Document' })).toBeVisible();
+
+  return { user, team, document };
+};
+
+export const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+test.describe('AutoSave Subject Step', () => {
+  test('should autosave the subject field', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSubjectStep(page);
+
+    const subject = 'Hello world!';
+
+    await page.getByRole('textbox', { name: 'Subject (Optional)' }).fill(subject);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedDocumentData = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      await expect(page.getByRole('textbox', { name: 'Subject (Optional)' })).toHaveValue(
+        retrievedDocumentData.documentMeta?.subject ?? '',
+      );
+    }).toPass();
+  });
+
+  test('should autosave the message field', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSubjectStep(page);
+
+    const message = 'Please review and sign this important document. Thank you!';
+
+    await page.getByRole('textbox', { name: 'Message (Optional)' }).fill(message);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedDocumentData = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      await expect(page.getByRole('textbox', { name: 'Message (Optional)' })).toHaveValue(
+        retrievedDocumentData.documentMeta?.message ?? '',
+      );
+    }).toPass();
+  });
+
+  test('should autosave the email settings checkboxes', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSubjectStep(page);
+
+    // Toggle some email settings checkboxes (randomly - some checked, some unchecked)
+    await page.getByText('Send recipient signed email').click();
+    await page.getByText('Send recipient removed email').click();
+    await page.getByText('Send document completed email', { exact: true }).click();
+    await page.getByText('Send document deleted email').click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedDocumentData = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const emailSettings = retrievedDocumentData.documentMeta?.emailSettings;
+
+      await expect(page.getByText('Send recipient signed email')).toBeChecked({
+        checked: emailSettings?.recipientSigned,
+      });
+      await expect(page.getByText('Send recipient removed email')).toBeChecked({
+        checked: emailSettings?.recipientRemoved,
+      });
+      await expect(page.getByText('Send document completed email', { exact: true })).toBeChecked({
+        checked: emailSettings?.documentCompleted,
+      });
+      await expect(page.getByText('Send document deleted email')).toBeChecked({
+        checked: emailSettings?.documentDeleted,
+      });
+
+      await expect(page.getByText('Send recipient signing request email')).toBeChecked({
+        checked: emailSettings?.recipientSigningRequest,
+      });
+      await expect(page.getByText('Send document pending email')).toBeChecked({
+        checked: emailSettings?.documentPending,
+      });
+      await expect(page.getByText('Send document completed email to the owner')).toBeChecked({
+        checked: emailSettings?.ownerDocumentCompleted,
+      });
+    }).toPass();
+  });
+
+  test('should autosave all fields and settings together', async ({ page }) => {
+    const { user, document, team } = await setupDocumentAndNavigateToSubjectStep(page);
+
+    const subject = 'Combined Test Subject - Please Sign';
+    const message =
+      'This is a comprehensive test message for autosave functionality. Please review and sign at your earliest convenience.';
+
+    await page.getByRole('textbox', { name: 'Subject (Optional)' }).fill(subject);
+    await page.getByRole('textbox', { name: 'Message (Optional)' }).fill(message);
+
+    await page.getByText('Send recipient signed email').click();
+    await page.getByText('Send recipient removed email').click();
+    await page.getByText('Send document completed email', { exact: true }).click();
+    await page.getByText('Send document deleted email').click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedDocumentData = await getDocumentById({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedDocumentData.documentMeta?.subject).toBe(subject);
+      expect(retrievedDocumentData.documentMeta?.message).toBe(message);
+      expect(retrievedDocumentData.documentMeta?.emailSettings).toBeDefined();
+
+      await expect(page.getByRole('textbox', { name: 'Subject (Optional)' })).toHaveValue(
+        retrievedDocumentData.documentMeta?.subject ?? '',
+      );
+      await expect(page.getByRole('textbox', { name: 'Message (Optional)' })).toHaveValue(
+        retrievedDocumentData.documentMeta?.message ?? '',
+      );
+
+      await expect(page.getByText('Send recipient signed email')).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.recipientSigned,
+      });
+      await expect(page.getByText('Send recipient removed email')).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.recipientRemoved,
+      });
+      await expect(page.getByText('Send document completed email', { exact: true })).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.documentCompleted,
+      });
+      await expect(page.getByText('Send document deleted email')).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.documentDeleted,
+      });
+
+      await expect(page.getByText('Send recipient signing request email')).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.recipientSigningRequest,
+      });
+      await expect(page.getByText('Send document pending email')).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.documentPending,
+      });
+      await expect(page.getByText('Send document completed email to the owner')).toBeChecked({
+        checked: retrievedDocumentData.documentMeta?.emailSettings?.ownerDocumentCompleted,
+      });
+    }).toPass();
+  });
+});

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -534,9 +534,6 @@ test('[DOCUMENT_FLOW]: should be able to create and sign a document with 3 recip
   await page.getByLabel('Title').fill(documentTitle);
   await page.getByRole('button', { name: 'Continue' }).click();
 
-  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
-  await page.getByLabel('Enable signing order').check();
-
   for (let i = 1; i <= 3; i++) {
     if (i > 1) {
       await page.getByRole('button', { name: 'Add Signer' }).click();
@@ -558,6 +555,9 @@ test('[DOCUMENT_FLOW]: should be able to create and sign a document with 3 recip
       .fill(`User ${i}`);
   }
 
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+  await page.getByLabel('Enable signing order').check();
+
   await page.getByRole('button', { name: 'Continue' }).click();
 
   await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();

packages/app-tests/e2e/templates-flow/template-autosave-fields-step.spec.ts

@@ -0,0 +1,304 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+const setupTemplateAndNavigateToFieldsStep = async (page: Page) => {
+  const { user, team } = await seedUser();
+  const template = await seedBlankTemplate(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/templates/${template.id}/edit`,
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await page.getByPlaceholder('Email').fill('recipient1@documenso.com');
+  await page.getByPlaceholder('Name').fill('Recipient 1');
+
+  await page.getByRole('button', { name: 'Add Placeholder Recipient' }).click();
+
+  await page.getByPlaceholder('Email').nth(1).fill('recipient2@documenso.com');
+  await page.getByPlaceholder('Name').nth(1).fill('Recipient 2');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  return { user, team, template };
+};
+
+const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+test.describe('AutoSave Fields Step', () => {
+  test('should autosave the fields without advanced settings', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Cancel' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 500,
+      },
+    });
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const fields = retrievedFields.fields;
+
+      expect(fields.length).toBe(3);
+      expect(fields[0].type).toBe('SIGNATURE');
+      expect(fields[1].type).toBe('TEXT');
+      expect(fields[2].type).toBe('SIGNATURE');
+    }).toPass();
+  });
+
+  test('should autosave the field deletion', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Cancel' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 500,
+      },
+    });
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 1 (recipient1@documenso.com)' }).click();
+
+    await page.getByText('Text').nth(1).click();
+    await page.getByRole('button', { name: 'Remove' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const fields = retrievedFields.fields;
+
+      expect(fields.length).toBe(2);
+      expect(fields[0].type).toBe('SIGNATURE');
+      expect(fields[1].type).toBe('SIGNATURE');
+    }).toPass();
+  });
+
+  test('should autosave the field duplication', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Cancel' })
+      .click();
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 500,
+      },
+    });
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Recipient 1 (recipient1@documenso.com)' }).click();
+
+    await page.getByText('Signature').nth(1).click();
+    await page.getByRole('button', { name: 'Duplicate', exact: true }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedFields = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const fields = retrievedFields.fields;
+
+      expect(fields.length).toBe(4);
+      expect(fields[0].type).toBe('SIGNATURE');
+      expect(fields[1].type).toBe('TEXT');
+      expect(fields[2].type).toBe('SIGNATURE');
+      expect(fields[3].type).toBe('SIGNATURE');
+    }).toPass();
+  });
+
+  test('should autosave the fields with advanced settings', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToFieldsStep(page);
+
+    await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Signature' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+
+    await page.getByRole('button', { name: 'Text' }).click();
+    await page.locator('canvas').click({
+      position: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    await page.getByRole('textbox', { name: 'Field label' }).fill('Test Field');
+    await page.getByRole('textbox', { name: 'Field placeholder' }).fill('Test Placeholder');
+    await page.getByRole('textbox', { name: 'Add text to the field' }).fill('Test Text');
+
+    await page.getByTestId('field-advanced-settings-footer').waitFor({ state: 'visible' });
+
+    await page
+      .getByTestId('field-advanced-settings-footer')
+      .getByRole('button', { name: 'Save' })
+      .click();
+
+    await page.waitForTimeout(2500);
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const fields = retrievedTemplate.fields;
+
+      expect(fields.length).toBe(2);
+      expect(fields[0].type).toBe('SIGNATURE');
+      expect(fields[1].type).toBe('TEXT');
+
+      const textField = fields[1];
+      expect(textField.fieldMeta).toBeDefined();
+
+      if (
+        textField.fieldMeta &&
+        typeof textField.fieldMeta === 'object' &&
+        'type' in textField.fieldMeta
+      ) {
+        expect(textField.fieldMeta.type).toBe('text');
+        expect(textField.fieldMeta.label).toBe('Test Field');
+        expect(textField.fieldMeta.placeholder).toBe('Test Placeholder');
+
+        if (textField.fieldMeta.type === 'text') {
+          expect(textField.fieldMeta.text).toBe('Test Text');
+        }
+      } else {
+        throw new Error('fieldMeta should be defined and contain advanced settings');
+      }
+    }).toPass();
+  });
+});

packages/app-tests/e2e/templates-flow/template-autosave-settings-step.spec.ts

@@ -0,0 +1,244 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+const setupTemplate = async (page: Page) => {
+  const { user, team } = await seedUser();
+  const template = await seedBlankTemplate(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/templates/${template.id}/edit`,
+  });
+
+  return { user, team, template };
+};
+
+const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+test.describe('AutoSave Settings Step - Templates', () => {
+  test('should autosave the title change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    const newTemplateTitle = 'New Template Title';
+
+    await page.getByRole('textbox', { name: 'Title *' }).fill(newTemplateTitle);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      await expect(page.getByRole('textbox', { name: 'Title *' })).toHaveValue(
+        retrievedTemplate.title,
+      );
+    }).toPass();
+  });
+
+  test('should autosave the language change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    const newTemplateLanguage = 'French';
+    const expectedLanguageCode = 'fr';
+
+    await page.getByRole('combobox').first().click();
+    await page.getByRole('option', { name: newTemplateLanguage }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.templateMeta?.language).toBe(expectedLanguageCode);
+    }).toPass();
+  });
+
+  test('should autosave the template access change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    const access = 'Require account';
+    const accessValue = 'ACCOUNT';
+
+    await page.getByRole('combobox').nth(1).click();
+    await page.getByRole('option', { name: access }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.authOptions?.globalAccessAuth).toContain(accessValue);
+    }).toPass();
+  });
+
+  test('should autosave the external ID change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    const newExternalId = '1234567890';
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('textbox', { name: 'External ID' }).fill(newExternalId);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.externalId).toBe(newExternalId);
+    }).toPass();
+  });
+
+  test('should autosave the allowed signature types change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('combobox').nth(4).click();
+    await page.getByRole('option', { name: 'Draw' }).click();
+    await page.getByRole('option', { name: 'Type' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.templateMeta?.drawSignatureEnabled).toBe(false);
+      expect(retrievedTemplate.templateMeta?.typedSignatureEnabled).toBe(false);
+      expect(retrievedTemplate.templateMeta?.uploadSignatureEnabled).toBe(true);
+    }).toPass();
+  });
+
+  test('should autosave the date format change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('combobox').nth(5).click();
+    await page.getByRole('option', { name: 'ISO 8601', exact: true }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.templateMeta?.dateFormat).toBe("yyyy-MM-dd'T'HH:mm:ss.SSSXXX");
+    }).toPass();
+  });
+
+  test('should autosave the timezone change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('combobox').nth(6).click();
+    await page.getByRole('option', { name: 'Europe/London' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.templateMeta?.timezone).toBe('Europe/London');
+    }).toPass();
+  });
+
+  test('should autosave the redirect URL change', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    const newRedirectUrl = 'https://documenso.com/test/';
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+
+    await page.getByRole('textbox', { name: 'Redirect URL' }).fill(newRedirectUrl);
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.templateMeta?.redirectUrl).toBe(newRedirectUrl);
+    }).toPass();
+  });
+
+  test('should autosave multiple field changes together', async ({ page }) => {
+    const { user, template, team } = await setupTemplate(page);
+
+    const newTitle = 'Updated Template Title';
+    await page.getByRole('textbox', { name: 'Title *' }).fill(newTitle);
+
+    await page.getByRole('combobox').first().click();
+    await page.getByRole('option', { name: 'German' }).click();
+
+    await page.getByRole('combobox').nth(1).click();
+    await page.getByRole('option', { name: 'Require account' }).click();
+
+    await page.getByRole('button', { name: 'Advanced Options' }).click();
+    const newExternalId = 'MULTI-TEST-123';
+    await page.getByRole('textbox', { name: 'External ID' }).fill(newExternalId);
+
+    await page.getByRole('combobox').nth(6).click();
+    await page.getByRole('option', { name: 'Europe/Berlin' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.title).toBe(newTitle);
+      expect(retrievedTemplate.templateMeta?.language).toBe('de');
+      expect(retrievedTemplate.authOptions?.globalAccessAuth).toContain('ACCOUNT');
+      expect(retrievedTemplate.externalId).toBe(newExternalId);
+      expect(retrievedTemplate.templateMeta?.timezone).toBe('Europe/Berlin');
+    }).toPass();
+  });
+});

packages/app-tests/e2e/templates-flow/template-autosave-signers-step.spec.ts

@@ -0,0 +1,174 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+const setupTemplateAndNavigateToSignersStep = async (page: Page) => {
+  const { user, team } = await seedUser();
+  const template = await seedBlankTemplate(user, team.id);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/templates/${template.id}/edit`,
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  return { user, team, template };
+};
+
+const triggerAutosave = async (page: Page) => {
+  await page.locator('#document-flow-form-container').click();
+  await page.locator('#document-flow-form-container').blur();
+
+  await page.waitForTimeout(5000);
+};
+
+const addSignerAndSave = async (page: Page) => {
+  await page.getByPlaceholder('Email').fill('recipient1@documenso.com');
+  await page.getByPlaceholder('Name').fill('Recipient 1');
+
+  await triggerAutosave(page);
+};
+
+test.describe('AutoSave Signers Step - Templates', () => {
+  test('should autosave the signers addition', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await expect(async () => {
+      const retrievedRecipients = await getRecipientsForTemplate({
+        templateId: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedRecipients.length).toBe(1);
+      expect(retrievedRecipients[0].email).toBe('recipient1@documenso.com');
+      expect(retrievedRecipients[0].name).toBe('Recipient 1');
+    }).toPass();
+  });
+
+  test('should autosave the signer deletion', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await page.getByRole('button', { name: 'Add myself' }).click();
+    await triggerAutosave(page);
+
+    await page.getByTestId('remove-placeholder-recipient-button').first().click();
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedRecipients = await getRecipientsForTemplate({
+        templateId: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedRecipients.length).toBe(1);
+      expect(retrievedRecipients[0].email).toBe(user.email);
+      expect(retrievedRecipients[0].name).toBe(user.name);
+    }).toPass();
+  });
+
+  test('should autosave the signer update', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await page.getByPlaceholder('Name').fill('Documenso Manager');
+    await page.getByPlaceholder('Email').fill('manager@documenso.com');
+
+    await triggerAutosave(page);
+
+    await page.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Receives copy' }).click();
+
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedRecipients = await getRecipientsForTemplate({
+        templateId: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedRecipients.length).toBe(1);
+      expect(retrievedRecipients[0].email).toBe('manager@documenso.com');
+      expect(retrievedRecipients[0].name).toBe('Documenso Manager');
+      expect(retrievedRecipients[0].role).toBe('CC');
+    }).toPass();
+  });
+
+  test('should autosave the signing order change', async ({ page }) => {
+    const { user, template, team } = await setupTemplateAndNavigateToSignersStep(page);
+
+    await addSignerAndSave(page);
+
+    await page.getByRole('button', { name: 'Add placeholder recipient' }).click();
+
+    await page
+      .getByTestId('placeholder-recipient-email-input')
+      .nth(1)
+      .fill('recipient2@documenso.com');
+    await page.getByTestId('placeholder-recipient-name-input').nth(1).fill('Recipient 2');
+
+    await page.getByRole('button', { name: 'Add placeholder recipient' }).click();
+
+    await page
+      .getByTestId('placeholder-recipient-email-input')
+      .nth(2)
+      .fill('recipient3@documenso.com');
+    await page.getByTestId('placeholder-recipient-name-input').nth(2).fill('Recipient 3');
+
+    await triggerAutosave(page);
+
+    await page.getByLabel('Enable signing order').check();
+    await page.getByLabel('Allow signers to dictate next signer').check();
+    await triggerAutosave(page);
+
+    await page.getByTestId('placeholder-recipient-signing-order-input').nth(0).fill('3');
+    await page.getByTestId('placeholder-recipient-signing-order-input').nth(0).blur();
+    await triggerAutosave(page);
+
+    await page.getByTestId('placeholder-recipient-signing-order-input').nth(1).fill('1');
+    await page.getByTestId('placeholder-recipient-signing-order-input').nth(1).blur();
+    await triggerAutosave(page);
+
+    await page.getByTestId('placeholder-recipient-signing-order-input').nth(2).fill('2');
+    await page.getByTestId('placeholder-recipient-signing-order-input').nth(2).blur();
+    await triggerAutosave(page);
+
+    await expect(async () => {
+      const retrievedTemplate = await getTemplateById({
+        id: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      const retrievedRecipients = await getRecipientsForTemplate({
+        templateId: template.id,
+        userId: user.id,
+        teamId: team.id,
+      });
+
+      expect(retrievedTemplate.templateMeta?.signingOrder).toBe('SEQUENTIAL');
+      expect(retrievedTemplate.templateMeta?.allowDictateNextSigner).toBe(true);
+      expect(retrievedRecipients.length).toBe(3);
+      expect(retrievedRecipients[0].signingOrder).toBe(2);
+      expect(retrievedRecipients[1].signingOrder).toBe(3);
+      expect(retrievedRecipients[2].signingOrder).toBe(1);
+    }).toPass();
+  });
+});

packages/app-tests/playwright.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
   testDir: './e2e',
   /* Run tests in files in parallel */
   fullyParallel: false,
-  workers: 1,
+  workers: 4,
   maxFailures: process.env.CI ? 1 : undefined,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,

packages/auth/server/lib/utils/handle-oauth-callback-url.ts

@@ -111,6 +111,10 @@ export const handleOAuthCallbackUrl = async (options: HandleOAuthCallbackUrlOpti
     where: {
       email: email,
     },
+    select: {
+      id: true,
+      emailVerified: true,
+    },
   });
 
   // Handle existing user but no account.

packages/lib/client-only/hooks/use-autosave.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useAutoSave = <T>(onSave: (data: T) => Promise<void>) => {
+  const saveTimeoutRef = useRef<NodeJS.Timeout>();
+
+  const saveFormData = async (data: T) => {
+    try {
+      await onSave(data);
+    } catch (error) {
+      console.error('Auto-save failed:', error);
+    }
+  };
+
+  const scheduleSave = useCallback((data: T) => {
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+
+    saveTimeoutRef.current = setTimeout(() => void saveFormData(data), 2000);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return { scheduleSave };
+};

packages/lib/jobs/definitions/emails/send-signing-email.handler.ts

@@ -42,6 +42,11 @@ export const run = async ({
       where: {
         id: userId,
       },
+      select: {
+        id: true,
+        email: true,
+        name: true,
+      },
     }),
     prisma.document.findFirstOrThrow({
       where: {

packages/lib/server-only/admin/update-user.ts

@@ -10,12 +10,6 @@ export type UpdateUserOptions = {
 };
 
 export const updateUser = async ({ id, name, email, roles }: UpdateUserOptions) => {
-  await prisma.user.findFirstOrThrow({
-    where: {
-      id,
-    },
-  });
-
   await prisma.user.update({
     where: {
       id,

packages/lib/server-only/document/duplicate-document-by-id.ts

@@ -35,6 +35,7 @@ export const duplicateDocument = async ({
     select: {
       title: true,
       userId: true,
+      teamId: true,
       documentData: {
         select: {
           data: true,
@@ -57,12 +58,19 @@ export const duplicateDocument = async ({
     },
   });
 
+  const currentUser = await prisma.user.findFirstOrThrow({
+    where: { id: userId },
+    select: { email: true },
+  });
+
   if (!document) {
     throw new AppError(AppErrorCode.NOT_FOUND, {
       message: 'Document not found',
     });
   }
 
+  const isDocumentOwner = userId === document.userId || teamId === document.teamId;
+
   const documentData = await prisma.documentData.create({
     data: {
       type: document.documentData.type,
@@ -100,30 +108,38 @@ export const duplicateDocument = async ({
     },
   });
 
-  const recipientsToCreate = document.recipients.map((recipient) => ({
-    documentId: createdDocument.id,
-    email: recipient.email,
-    name: recipient.name,
-    role: recipient.role,
-    signingOrder: recipient.signingOrder,
-    token: nanoid(),
-    fields: {
-      createMany: {
-        data: recipient.fields.map((field) => ({
-          documentId: createdDocument.id,
-          type: field.type,
-          page: field.page,
-          positionX: field.positionX,
-          positionY: field.positionY,
-          width: field.width,
-          height: field.height,
-          customText: '',
-          inserted: false,
-          fieldMeta: field.fieldMeta as PrismaJson.FieldMeta,
-        })),
+  const recipientsToCreate = document.recipients
+    .filter((recipient) => {
+      if (isDocumentOwner) {
+        return true;
+      }
+
+      return recipient.email === currentUser.email;
+    })
+    .map((recipient) => ({
+      documentId: createdDocument.id,
+      email: recipient.email,
+      name: recipient.name,
+      role: recipient.role,
+      signingOrder: recipient.signingOrder,
+      token: nanoid(),
+      fields: {
+        createMany: {
+          data: recipient.fields.map((field) => ({
+            documentId: createdDocument.id,
+            type: field.type,
+            page: field.page,
+            positionX: field.positionX,
+            positionY: field.positionY,
+            width: field.width,
+            height: field.height,
+            customText: '',
+            inserted: false,
+            fieldMeta: field.fieldMeta as PrismaJson.FieldMeta,
+          })),
+        },
       },
-    },
-  }));
+    }));
 
   const recipients: Recipient[] = [];
 

packages/lib/server-only/document/send-document.tsx

@@ -148,33 +148,6 @@ export const sendDocument = async ({
   //   throw new Error('Some signers have not been assigned a signature field.');
   // }
 
-  const isRecipientSigningRequestEmailEnabled = extractDerivedDocumentEmailSettings(
-    document.documentMeta,
-  ).recipientSigningRequest;
-
-  // Only send email if one of the following is true:
-  // - It is explicitly set
-  // - The email is enabled for signing requests AND sendEmail is undefined
-  if (sendEmail || (isRecipientSigningRequestEmailEnabled && sendEmail === undefined)) {
-    await Promise.all(
-      recipientsToNotify.map(async (recipient) => {
-        if (recipient.sendStatus === SendStatus.SENT || recipient.role === RecipientRole.CC) {
-          return;
-        }
-
-        await jobs.triggerJob({
-          name: 'send.signing.requested.email',
-          payload: {
-            userId,
-            documentId,
-            recipientId: recipient.id,
-            requestMetadata: requestMetadata?.requestMetadata,
-          },
-        });
-      }),
-    );
-  }
-
   const allRecipientsHaveNoActionToTake = document.recipients.every(
     (recipient) =>
       recipient.role === RecipientRole.CC || recipient.signingStatus === SigningStatus.SIGNED,
@@ -227,6 +200,33 @@ export const sendDocument = async ({
     });
   });
 
+  const isRecipientSigningRequestEmailEnabled = extractDerivedDocumentEmailSettings(
+    document.documentMeta,
+  ).recipientSigningRequest;
+
+  // Only send email if one of the following is true:
+  // - It is explicitly set
+  // - The email is enabled for signing requests AND sendEmail is undefined
+  if (sendEmail || (isRecipientSigningRequestEmailEnabled && sendEmail === undefined)) {
+    await Promise.all(
+      recipientsToNotify.map(async (recipient) => {
+        if (recipient.sendStatus === SendStatus.SENT || recipient.role === RecipientRole.CC) {
+          return;
+        }
+
+        await jobs.triggerJob({
+          name: 'send.signing.requested.email',
+          payload: {
+            userId,
+            documentId,
+            recipientId: recipient.id,
+            requestMetadata: requestMetadata?.requestMetadata,
+          },
+        });
+      }),
+    );
+  }
+
   await triggerWebhook({
     event: WebhookTriggerEvents.DOCUMENT_SENT,
     data: ZWebhookDocumentSchema.parse(mapDocumentToWebhookDocumentPayload(updatedDocument)),

packages/lib/server-only/email/get-email-context.ts

@@ -1,3 +1,5 @@
+import { P, match } from 'ts-pattern';
+
 import type { BrandingSettings } from '@documenso/email/providers/branding';
 import { prisma } from '@documenso/prisma';
 import type {
@@ -104,7 +106,12 @@ export const getEmailContext = async (
   }
 
   const replyToEmail = meta?.emailReplyTo || emailContext.settings.emailReplyTo || undefined;
-  const senderEmailId = meta?.emailId === null ? null : emailContext.settings.emailId;
+
+  const senderEmailId = match(meta?.emailId)
+    .with(P.string, (emailId) => emailId) // Explicit string means to use the provided email ID.
+    .with(undefined, () => emailContext.settings.emailId) // Undefined means to use the inherited email ID.
+    .with(null, () => null) // Explicit null means to use the Documenso email.
+    .exhaustive();
 
   const foundSenderEmail = emailContext.allowedEmails.find((email) => email.id === senderEmailId);
 

packages/lib/server-only/recipient/get-recipients-for-template.ts

@@ -1,5 +1,7 @@
 import { prisma } from '@documenso/prisma';
 
+import { buildTeamWhereQuery } from '../../utils/teams';
+
 export interface GetRecipientsForTemplateOptions {
   templateId: number;
   userId: number;
@@ -14,21 +16,12 @@ export const getRecipientsForTemplate = async ({
   const recipients = await prisma.recipient.findMany({
     where: {
       templateId,
-      template: teamId
-        ? {
-            team: {
-              id: teamId,
-              members: {
-                some: {
-                  userId,
-                },
-              },
-            },
-          }
-        : {
-            userId,
-            teamId: null,
-          },
+      template: {
+        team: buildTeamWhereQuery({
+          teamId,
+          userId,
+        }),
+      },
     },
     orderBy: {
       id: 'asc',

packages/lib/server-only/user/get-user-by-id.ts

@@ -1,13 +1,31 @@
 import { prisma } from '@documenso/prisma';
 
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
 export interface GetUserByIdOptions {
   id: number;
 }
 
 export const getUserById = async ({ id }: GetUserByIdOptions) => {
-  return await prisma.user.findFirstOrThrow({
+  const user = await prisma.user.findFirst({
     where: {
       id,
     },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+      emailVerified: true,
+      roles: true,
+      disabled: true,
+      twoFactorEnabled: true,
+      signature: true,
+    },
   });
+
+  if (!user) {
+    throw new AppError(AppErrorCode.NOT_FOUND);
+  }
+
+  return user;
 };

packages/lib/server-only/user/update-profile.ts

@@ -24,7 +24,7 @@ export const updateProfile = async ({
     },
   });
 
-  return await prisma.$transaction(async (tx) => {
+  await prisma.$transaction(async (tx) => {
     await tx.userSecurityAuditLog.create({
       data: {
         userId,
@@ -34,7 +34,7 @@ export const updateProfile = async ({
       },
     });
 
-    return await tx.user.update({
+    await tx.user.update({
       where: {
         id: userId,
       },

packages/trpc/server/admin-router/get-user.ts

@@ -0,0 +1,19 @@
+import { getUserById } from '@documenso/lib/server-only/user/get-user-by-id';
+
+import { adminProcedure } from '../trpc';
+import { ZGetUserRequestSchema, ZGetUserResponseSchema } from './get-user.types';
+
+export const getUserRoute = adminProcedure
+  .input(ZGetUserRequestSchema)
+  .output(ZGetUserResponseSchema)
+  .query(async ({ input, ctx }) => {
+    const { id } = input;
+
+    ctx.logger.info({
+      input: {
+        id,
+      },
+    });
+
+    return await getUserById({ id });
+  });

packages/trpc/server/admin-router/get-user.types.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod';
+
+import UserSchema from '@documenso/prisma/generated/zod/modelSchema/UserSchema';
+
+export const ZGetUserRequestSchema = z.object({
+  id: z.number().min(1),
+});
+
+export const ZGetUserResponseSchema = UserSchema.pick({
+  id: true,
+  name: true,
+  email: true,
+  emailVerified: true,
+  roles: true,
+  disabled: true,
+  twoFactorEnabled: true,
+  signature: true,
+});
+
+export type TGetUserRequest = z.infer<typeof ZGetUserRequestSchema>;
+export type TGetUserResponse = z.infer<typeof ZGetUserResponseSchema>;

packages/trpc/server/admin-router/router.ts

@@ -11,6 +11,7 @@ import { findAdminOrganisationsRoute } from './find-admin-organisations';
 import { findDocumentsRoute } from './find-documents';
 import { findSubscriptionClaimsRoute } from './find-subscription-claims';
 import { getAdminOrganisationRoute } from './get-admin-organisation';
+import { getUserRoute } from './get-user';
 import { resealDocumentRoute } from './reseal-document';
 import { resetTwoFactorRoute } from './reset-two-factor-authentication';
 import { updateAdminOrganisationRoute } from './update-admin-organisation';
@@ -36,6 +37,7 @@ export const adminRouter = router({
     createCustomer: createStripeCustomerRoute,
   },
   user: {
+    get: getUserRoute,
     update: updateUserRoute,
     delete: deleteUserRoute,
     enable: enableUserRoute,

packages/trpc/server/profile-router/router.ts

@@ -3,14 +3,12 @@ import type { SetAvatarImageOptions } from '@documenso/lib/server-only/profile/s
 import { setAvatarImage } from '@documenso/lib/server-only/profile/set-avatar-image';
 import { deleteUser } from '@documenso/lib/server-only/user/delete-user';
 import { findUserSecurityAuditLogs } from '@documenso/lib/server-only/user/find-user-security-audit-logs';
-import { getUserById } from '@documenso/lib/server-only/user/get-user-by-id';
 import { submitSupportTicket } from '@documenso/lib/server-only/user/submit-support-ticket';
 import { updateProfile } from '@documenso/lib/server-only/user/update-profile';
 
-import { adminProcedure, authenticatedProcedure, router } from '../trpc';
+import { authenticatedProcedure, router } from '../trpc';
 import {
   ZFindUserSecurityAuditLogsSchema,
-  ZRetrieveUserByIdQuerySchema,
   ZSetProfileImageMutationSchema,
   ZSubmitSupportTicketMutationSchema,
   ZUpdateProfileMutationSchema,
@@ -26,24 +24,12 @@ export const profileRouter = router({
       });
     }),
 
-  getUser: adminProcedure.input(ZRetrieveUserByIdQuerySchema).query(async ({ input, ctx }) => {
-    const { id } = input;
-
-    ctx.logger.info({
-      input: {
-        id,
-      },
-    });
-
-    return await getUserById({ id });
-  }),
-
   updateProfile: authenticatedProcedure
     .input(ZUpdateProfileMutationSchema)
     .mutation(async ({ input, ctx }) => {
       const { name, signature } = input;
 
-      return await updateProfile({
+      await updateProfile({
         userId: ctx.user.id,
         name,
         signature,
@@ -52,7 +38,7 @@ export const profileRouter = router({
     }),
 
   deleteAccount: authenticatedProcedure.mutation(async ({ ctx }) => {
-    return await deleteUser({
+    await deleteUser({
       id: ctx.user.id,
     });
   }),

packages/trpc/server/profile-router/schema.ts

@@ -7,12 +7,6 @@ export const ZFindUserSecurityAuditLogsSchema = z.object({
 
 export type TFindUserSecurityAuditLogsSchema = z.infer<typeof ZFindUserSecurityAuditLogsSchema>;
 
-export const ZRetrieveUserByIdQuerySchema = z.object({
-  id: z.number().min(1),
-});
-
-export type TRetrieveUserByIdQuerySchema = z.infer<typeof ZRetrieveUserByIdQuerySchema>;
-
 export const ZUpdateProfileMutationSchema = z.object({
   name: z.string().min(1),
   signature: z.string(),

packages/ui/components/document/document-read-only-fields.tsx

@@ -95,8 +95,10 @@ export const DocumentReadOnlyFields = ({
     setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
   };
 
+  const highestPageNumber = Math.max(...fields.map((field) => field.page));
+
   return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+    <ElementVisible target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}>
       {fields.map(
         (field) =>
           !hiddenFieldIds[field.secondaryId] && (

packages/ui/primitives/document-flow/add-fields.tsx

@@ -21,6 +21,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { prop, sortBy } from 'remeda';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import {
@@ -83,6 +84,7 @@ export type AddFieldsFormProps = {
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddFieldsFormSchema) => void;
+  onAutoSave: (_data: TAddFieldsFormSchema) => Promise<void>;
   canGoBack?: boolean;
   isDocumentPdfLoaded: boolean;
   teamId: number;
@@ -94,6 +96,7 @@ export const AddFieldsFormPartial = ({
   recipients,
   fields,
   onSubmit,
+  onAutoSave,
   canGoBack = false,
   isDocumentPdfLoaded,
   teamId,
@@ -590,6 +593,20 @@ export const AddFieldsFormPartial = ({
     }
   };
 
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    scheduleSave(formData);
+  };
+
   return (
     <>
       {showAdvancedSettings && currentField ? (
@@ -603,7 +620,14 @@ export const AddFieldsFormPartial = ({
           fields={localFields}
           onAdvancedSettings={handleAdvancedSettings}
           isDocumentPdfLoaded={isDocumentPdfLoaded}
-          onSave={handleSavedFieldSettings}
+          onSave={(fieldState) => {
+            handleSavedFieldSettings(fieldState);
+            void handleAutoSave();
+          }}
+          onAutoSave={async (fieldState) => {
+            handleSavedFieldSettings(fieldState);
+            await handleAutoSave();
+          }}
         />
       ) : (
         <>
@@ -660,14 +684,26 @@ export const AddFieldsFormPartial = ({
                       defaultWidth={DEFAULT_WIDTH_PX}
                       passive={isFieldWithinBounds && !!selectedField}
                       onFocus={() => setLastActiveField(field)}
-                      onBlur={() => setLastActiveField(null)}
+                      onBlur={() => {
+                        setLastActiveField(null);
+                        void handleAutoSave();
+                      }}
                       onMouseEnter={() => setLastActiveField(field)}
                       onMouseLeave={() => setLastActiveField(null)}
                       onResize={(options) => onFieldResize(options, index)}
                       onMove={(options) => onFieldMove(options, index)}
-                      onRemove={() => remove(index)}
-                      onDuplicate={() => onFieldCopy(null, { duplicate: true })}
-                      onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
+                      onRemove={() => {
+                        remove(index);
+                        void handleAutoSave();
+                      }}
+                      onDuplicate={() => {
+                        onFieldCopy(null, { duplicate: true });
+                        void handleAutoSave();
+                      }}
+                      onDuplicateAllPages={() => {
+                        onFieldCopy(null, { duplicateAll: true });
+                        void handleAutoSave();
+                      }}
                       onAdvancedSettings={() => {
                         setCurrentField(field);
                         handleAdvancedSettings();

packages/ui/primitives/document-flow/add-settings.tsx

@@ -14,6 +14,7 @@ import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
@@ -79,6 +80,7 @@ export type AddSettingsFormProps = {
   document: TDocument;
   currentTeamMemberRole?: TeamMemberRole;
   onSubmit: (_data: TAddSettingsFormSchema) => void;
+  onAutoSave: (_data: TAddSettingsFormSchema) => Promise<void>;
 };
 
 export const AddSettingsFormPartial = ({
@@ -89,6 +91,7 @@ export const AddSettingsFormPartial = ({
   document,
   currentTeamMemberRole,
   onSubmit,
+  onAutoSave,
 }: AddSettingsFormProps) => {
   const { t } = useLingui();
 
@@ -161,6 +164,28 @@ export const AddSettingsFormPartial = ({
     document.documentMeta?.timezone,
   ]);
 
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    /*
+     * Parse the form data through the Zod schema to handle transformations
+     * (like -1 -> undefined for the Document Global Auth Access)
+     */
+    const parseResult = ZAddSettingsFormSchema.safeParse(formData);
+
+    if (parseResult.success) {
+      scheduleSave(parseResult.data);
+    }
+  };
+
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -196,6 +221,7 @@ export const AddSettingsFormPartial = ({
                       className="bg-background"
                       {...field}
                       disabled={document.status !== DocumentStatus.DRAFT || field.disabled}
+                      onBlur={handleAutoSave}
                     />
                   </FormControl>
                   <FormMessage />
@@ -227,9 +253,13 @@ export const AddSettingsFormPartial = ({
 
                   <FormControl>
                     <Select
+                      {...field}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        void handleAutoSave();
+                      }}
                       value={field.value}
                       disabled={field.disabled}
-                      onValueChange={field.onChange}
                     >
                       <SelectTrigger className="bg-background">
                         <SelectValue />
@@ -261,9 +291,13 @@ export const AddSettingsFormPartial = ({
 
                   <FormControl>
                     <DocumentGlobalAuthAccessSelect
+                      {...field}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        void handleAutoSave();
+                      }}
                       value={field.value}
                       disabled={field.disabled}
-                      onValueChange={field.onChange}
                     />
                   </FormControl>
                 </FormItem>
@@ -286,7 +320,10 @@ export const AddSettingsFormPartial = ({
                         canUpdateVisibility={canUpdateVisibility}
                         currentTeamMemberRole={currentTeamMemberRole}
                         {...field}
-                        onValueChange={field.onChange}
+                        onValueChange={(value) => {
+                          field.onChange(value);
+                          void handleAutoSave();
+                        }}
                       />
                     </FormControl>
                   </FormItem>
@@ -307,9 +344,13 @@ export const AddSettingsFormPartial = ({
 
                     <FormControl>
                       <DocumentGlobalAuthActionSelect
+                        {...field}
+                        onValueChange={(value) => {
+                          field.onChange(value);
+                          void handleAutoSave();
+                        }}
                         value={field.value}
                         disabled={field.disabled}
-                        onValueChange={field.onChange}
                       />
                     </FormControl>
                   </FormItem>
@@ -347,7 +388,7 @@ export const AddSettingsFormPartial = ({
                           </FormLabel>
 
                           <FormControl>
-                            <Input className="bg-background" {...field} />
+                            <Input className="bg-background" {...field} onBlur={handleAutoSave} />
                           </FormControl>
 
                           <FormMessage />
@@ -372,7 +413,10 @@ export const AddSettingsFormPartial = ({
                                 value: option.value,
                               }))}
                               selectedValues={field.value}
-                              onChange={field.onChange}
+                              onChange={(value) => {
+                                field.onChange(value);
+                                void handleAutoSave();
+                              }}
                               className="bg-background w-full"
                               emptySelectionPlaceholder="Select signature types"
                             />
@@ -394,8 +438,12 @@ export const AddSettingsFormPartial = ({
 
                           <FormControl>
                             <Select
+                              {...field}
+                              onValueChange={(value) => {
+                                field.onChange(value);
+                                void handleAutoSave();
+                              }}
                               value={field.value}
-                              onValueChange={field.onChange}
                               disabled={documentHasBeenSent}
                             >
                               <SelectTrigger className="bg-background">
@@ -430,8 +478,12 @@ export const AddSettingsFormPartial = ({
                             <Combobox
                               className="bg-background"
                               options={TIME_ZONES}
+                              {...field}
+                              onChange={(value) => {
+                                value && field.onChange(value);
+                                void handleAutoSave();
+                              }}
                               value={field.value}
-                              onChange={(value) => value && field.onChange(value)}
                               disabled={documentHasBeenSent}
                             />
                           </FormControl>
@@ -462,7 +514,7 @@ export const AddSettingsFormPartial = ({
                           </FormLabel>
 
                           <FormControl>
-                            <Input className="bg-background" {...field} />
+                            <Input className="bg-background" {...field} onBlur={handleAutoSave} />
                           </FormControl>
 
                           <FormMessage />

packages/ui/primitives/document-flow/add-signers.tsx

@@ -14,6 +14,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { prop, sortBy } from 'remeda';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
@@ -55,6 +56,7 @@ export type AddSignersFormProps = {
   signingOrder?: DocumentSigningOrder | null;
   allowDictateNextSigner?: boolean;
   onSubmit: (_data: TAddSignersFormSchema) => void;
+  onAutoSave: (_data: TAddSignersFormSchema) => Promise<void>;
   isDocumentPdfLoaded: boolean;
 };
 
@@ -65,6 +67,7 @@ export const AddSignersFormPartial = ({
   signingOrder,
   allowDictateNextSigner,
   onSubmit,
+  onAutoSave,
   isDocumentPdfLoaded,
 }: AddSignersFormProps) => {
   const { _ } = useLingui();
@@ -166,6 +169,29 @@ export const AddSignersFormPartial = ({
     name: 'signers',
   });
 
+  const emptySigners = useCallback(
+    () => form.getValues('signers').filter((signer) => signer.email === ''),
+    [form],
+  );
+
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    if (emptySigners().length > 0) {
+      return;
+    }
+
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    scheduleSave(formData);
+  };
+
   const emptySignerIndex = watchedSigners.findIndex((signer) => !signer.name && !signer.email);
   const isUserAlreadyARecipient = watchedSigners.some(
     (signer) => signer.email.toLowerCase() === user?.email?.toLowerCase(),
@@ -216,24 +242,47 @@ export const AddSignersFormPartial = ({
     const formStateIndex = form.getValues('signers').findIndex((s) => s.formId === signer.formId);
     if (formStateIndex !== -1) {
       removeSigner(formStateIndex);
+
       const updatedSigners = form.getValues('signers').filter((s) => s.formId !== signer.formId);
-      form.setValue('signers', normalizeSigningOrders(updatedSigners));
+
+      form.setValue('signers', normalizeSigningOrders(updatedSigners), {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      void handleAutoSave();
     }
   };
 
   const onAddSelfSigner = () => {
     if (emptySignerIndex !== -1) {
-      setValue(`signers.${emptySignerIndex}.name`, user?.name ?? '');
-      setValue(`signers.${emptySignerIndex}.email`, user?.email ?? '');
-    } else {
-      appendSigner({
-        formId: nanoid(12),
-        name: user?.name ?? '',
-        email: user?.email ?? '',
-        role: RecipientRole.SIGNER,
-        actionAuth: [],
-        signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
+      setValue(`signers.${emptySignerIndex}.name`, user?.name ?? '', {
+        shouldValidate: true,
+        shouldDirty: true,
       });
+      setValue(`signers.${emptySignerIndex}.email`, user?.email ?? '', {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      form.setFocus(`signers.${emptySignerIndex}.email`);
+    } else {
+      appendSigner(
+        {
+          formId: nanoid(12),
+          name: user?.name ?? '',
+          email: user?.email ?? '',
+          role: RecipientRole.SIGNER,
+          actionAuth: [],
+          signingOrder:
+            signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
+        },
+        {
+          shouldFocus: true,
+        },
+      );
+
+      void form.trigger('signers');
     }
   };
 
@@ -263,7 +312,10 @@ export const AddSignersFormPartial = ({
         signingOrder: !canRecipientBeModified(signer.nativeId) ? signer.signingOrder : index + 1,
       }));
 
-      form.setValue('signers', updatedSigners);
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
       const lastSigner = updatedSigners[updatedSigners.length - 1];
       if (lastSigner.role === RecipientRole.ASSISTANT) {
@@ -276,8 +328,10 @@ export const AddSignersFormPartial = ({
       }
 
       await form.trigger('signers');
+
+      void handleAutoSave();
     },
-    [form, canRecipientBeModified, watchedSigners, toast],
+    [form, canRecipientBeModified, watchedSigners, handleAutoSave, toast],
   );
 
   const handleRoleChange = useCallback(
@@ -287,7 +341,10 @@ export const AddSignersFormPartial = ({
 
       // Handle parallel to sequential conversion for assistants
       if (role === RecipientRole.ASSISTANT && signingOrder === DocumentSigningOrder.PARALLEL) {
-        form.setValue('signingOrder', DocumentSigningOrder.SEQUENTIAL);
+        form.setValue('signingOrder', DocumentSigningOrder.SEQUENTIAL, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
         toast({
           title: _(msg`Signing order is enabled.`),
           description: _(msg`You cannot add assistants when signing order is disabled.`),
@@ -302,7 +359,10 @@ export const AddSignersFormPartial = ({
         signingOrder: !canRecipientBeModified(signer.nativeId) ? signer.signingOrder : idx + 1,
       }));
 
-      form.setValue('signers', updatedSigners);
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
       if (role === RecipientRole.ASSISTANT && index === updatedSigners.length - 1) {
         toast({
@@ -341,7 +401,10 @@ export const AddSignersFormPartial = ({
         signingOrder: !canRecipientBeModified(s.nativeId) ? s.signingOrder : idx + 1,
       }));
 
-      form.setValue('signers', updatedSigners);
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
       if (signer.role === RecipientRole.ASSISTANT && newPosition === remainingSigners.length - 1) {
         toast({
@@ -364,9 +427,20 @@ export const AddSignersFormPartial = ({
       role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
     }));
 
-    form.setValue('signers', updatedSigners);
-    form.setValue('signingOrder', DocumentSigningOrder.PARALLEL);
-    form.setValue('allowDictateNextSigner', false);
+    form.setValue('signers', updatedSigners, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    form.setValue('signingOrder', DocumentSigningOrder.PARALLEL, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    form.setValue('allowDictateNextSigner', false, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    void handleAutoSave();
   }, [form]);
 
   return (
@@ -408,19 +482,39 @@ export const AddSignersFormPartial = ({
 
                         // If sequential signing is turned off, disable dictate next signer
                         if (!checked) {
-                          form.setValue('allowDictateNextSigner', false);
+                          form.setValue('allowDictateNextSigner', false, {
+                            shouldValidate: true,
+                            shouldDirty: true,
+                          });
                         }
+
+                        void handleAutoSave();
                       }}
-                      disabled={isSubmitting || hasDocumentBeenSent}
+                      disabled={isSubmitting || hasDocumentBeenSent || emptySigners().length !== 0}
                     />
                   </FormControl>
 
-                  <FormLabel
-                    htmlFor="signingOrder"
-                    className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    <Trans>Enable signing order</Trans>
-                  </FormLabel>
+                  <div className="flex items-center text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    <FormLabel
+                      htmlFor="signingOrder"
+                      className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      <Trans>Enable signing order</Trans>
+                    </FormLabel>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="text-muted-foreground ml-1 cursor-help">
+                          <HelpCircle className="h-3.5 w-3.5" />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-80 p-4">
+                        <p>
+                          <Trans>Add 2 or more signers to enable signing order.</Trans>
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                 </FormItem>
               )}
             />
@@ -435,12 +529,15 @@ export const AddSignersFormPartial = ({
                       {...field}
                       id="allowDictateNextSigner"
                       checked={value}
-                      onCheckedChange={field.onChange}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                        void handleAutoSave();
+                      }}
                       disabled={isSubmitting || hasDocumentBeenSent || !isSigningOrderSequential}
                     />
                   </FormControl>
 
-                  <div className="flex items-center">
+                  <div className="flex items-center text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                     <FormLabel
                       htmlFor="allowDictateNextSigner"
                       className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -533,6 +630,7 @@ export const AddSignersFormPartial = ({
                                         <Input
                                           type="number"
                                           max={signers.length}
+                                          data-testid="signing-order-input"
                                           className={cn(
                                             'w-full text-center',
                                             '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
@@ -541,10 +639,12 @@ export const AddSignersFormPartial = ({
                                           onChange={(e) => {
                                             field.onChange(e);
                                             handleSigningOrderChange(index, e.target.value);
+                                            void handleAutoSave();
                                           }}
                                           onBlur={(e) => {
                                             field.onBlur();
                                             handleSigningOrderChange(index, e.target.value);
+                                            void handleAutoSave();
                                           }}
                                           disabled={
                                             snapshot.isDragging ||
@@ -588,7 +688,9 @@ export const AddSignersFormPartial = ({
                                           isSubmitting ||
                                           !canRecipientBeModified(signer.nativeId)
                                         }
+                                        data-testid="signer-email-input"
                                         onKeyDown={onKeyDown}
+                                        onBlur={handleAutoSave}
                                       />
                                     </FormControl>
 
@@ -626,6 +728,7 @@ export const AddSignersFormPartial = ({
                                           !canRecipientBeModified(signer.nativeId)
                                         }
                                         onKeyDown={onKeyDown}
+                                        onBlur={handleAutoSave}
                                       />
                                     </FormControl>
 
@@ -668,6 +771,7 @@ export const AddSignersFormPartial = ({
 
                               <div className="col-span-2 flex gap-x-2">
                                 <FormField
+                                  control={form.control}
                                   name={`signers.${index}.role`}
                                   render={({ field }) => (
                                     <FormItem
@@ -681,10 +785,11 @@ export const AddSignersFormPartial = ({
                                         <RecipientRoleSelect
                                           {...field}
                                           isAssistantEnabled={isSigningOrderSequential}
-                                          onValueChange={(value) =>
+                                          onValueChange={(value) => {
                                             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                                            handleRoleChange(index, value as RecipientRole)
-                                          }
+                                            handleRoleChange(index, value as RecipientRole);
+                                            void handleAutoSave();
+                                          }}
                                           disabled={
                                             snapshot.isDragging ||
                                             isSubmitting ||
@@ -706,6 +811,7 @@ export const AddSignersFormPartial = ({
                                       'mb-6': form.formState.errors.signers?.[index],
                                     },
                                   )}
+                                  data-testid="remove-signer-button"
                                   disabled={
                                     snapshot.isDragging ||
                                     isSubmitting ||

packages/ui/primitives/document-flow/add-subject.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -8,6 +10,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TDocument } from '@documenso/lib/types/document';
@@ -60,6 +63,7 @@ export type AddSubjectFormProps = {
   fields: Field[];
   document: TDocument;
   onSubmit: (_data: TAddSubjectFormSchema) => void;
+  onAutoSave: (_data: TAddSubjectFormSchema) => Promise<void>;
   isDocumentPdfLoaded: boolean;
 };
 
@@ -69,6 +73,7 @@ export const AddSubjectFormPartial = ({
   fields: fields,
   document,
   onSubmit,
+  onAutoSave,
   isDocumentPdfLoaded,
 }: AddSubjectFormProps) => {
   const { _ } = useLingui();
@@ -95,6 +100,8 @@ export const AddSubjectFormPartial = ({
     handleSubmit,
     setValue,
     watch,
+    trigger,
+    getValues,
     formState: { isSubmitting },
   } = form;
 
@@ -129,6 +136,35 @@ export const AddSubjectFormPartial = ({
   const onFormSubmit = handleSubmit(onSubmit);
   const { currentStep, totalSteps, previousStep } = useStep();
 
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    const isFormValid = await trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = getValues();
+
+    scheduleSave(formData);
+  };
+
+  useEffect(() => {
+    const container = window.document.getElementById('document-flow-form-container');
+
+    const handleBlur = () => {
+      void handleAutoSave();
+    };
+
+    if (container) {
+      container.addEventListener('blur', handleBlur, true);
+      return () => {
+        container.removeEventListener('blur', handleBlur, true);
+      };
+    }
+  }, []);
+
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -185,7 +221,6 @@ export const AddSubjectFormPartial = ({
                             <FormLabel>
                               <Trans>Email Sender</Trans>
                             </FormLabel>
-
                             <FormControl>
                               <Select
                                 {...field}

packages/ui/primitives/document-flow/field-item-advanced-settings.tsx

@@ -6,6 +6,7 @@ import { useLingui } from '@lingui/react';
 import { FieldType } from '@prisma/client';
 import { match } from 'ts-pattern';
 
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import {
   type TBaseFieldMeta as BaseFieldMeta,
   type TCheckboxFieldMeta as CheckboxFieldMeta,
@@ -48,6 +49,7 @@ export type FieldAdvancedSettingsProps = {
   onAdvancedSettings?: () => void;
   isDocumentPdfLoaded?: boolean;
   onSave?: (fieldState: FieldMeta) => void;
+  onAutoSave?: (fieldState: FieldMeta) => Promise<void>;
 };
 
 export type FieldMetaKeys =
@@ -146,7 +148,16 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
 
 export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSettingsProps>(
   (
-    { title, description, field, fields, onAdvancedSettings, isDocumentPdfLoaded = true, onSave },
+    {
+      title,
+      description,
+      field,
+      fields,
+      onAdvancedSettings,
+      isDocumentPdfLoaded = true,
+      onSave,
+      onAutoSave,
+    },
     ref,
   ) => {
     const { _ } = useLingui();
@@ -177,6 +188,24 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fieldMeta]);
 
+    const { scheduleSave } = useAutoSave(onAutoSave || (async () => {}));
+
+    const handleAutoSave = () => {
+      if (errors.length === 0) {
+        scheduleSave(fieldState);
+      }
+    };
+
+    // Auto-save to localStorage and schedule remote save when fieldState changes
+    useEffect(() => {
+      try {
+        localStorage.setItem(localStorageKey, JSON.stringify(fieldState));
+        handleAutoSave();
+      } catch (error) {
+        console.error('Failed to save to localStorage:', error);
+      }
+    }, [fieldState, localStorageKey, handleAutoSave]);
+
     const handleFieldChange = (
       key: FieldMetaKeys,
       value:
@@ -325,7 +354,10 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
           )}
         </DocumentFlowFormContainerContent>
 
-        <DocumentFlowFormContainerFooter className="mt-auto">
+        <DocumentFlowFormContainerFooter
+          className="mt-auto"
+          data-testid="field-advanced-settings-footer"
+        >
           <DocumentFlowFormContainerActions
             goNextLabel={msg`Save`}
             goBackLabel={msg`Cancel`}

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -21,6 +21,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
@@ -73,6 +74,7 @@ export type AddTemplateFieldsFormProps = {
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
+  onAutoSave: (_data: TAddTemplateFieldsFormSchema) => Promise<void>;
   teamId: number;
 };
 
@@ -81,6 +83,7 @@ export const AddTemplateFieldsFormPartial = ({
   recipients,
   fields,
   onSubmit,
+  onAutoSave,
   teamId,
 }: AddTemplateFieldsFormProps) => {
   const { _ } = useLingui();
@@ -121,6 +124,20 @@ export const AddTemplateFieldsFormPartial = ({
 
   const onFormSubmit = form.handleSubmit(onSubmit);
 
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    scheduleSave(formData);
+  };
+
   const {
     append,
     remove,
@@ -160,6 +177,7 @@ export const AddTemplateFieldsFormPartial = ({
           };
 
           append(newField);
+          void handleAutoSave();
 
           return;
         }
@@ -187,6 +205,7 @@ export const AddTemplateFieldsFormPartial = ({
             append(newField);
           });
 
+          void handleAutoSave();
           return;
         }
 
@@ -198,7 +217,15 @@ export const AddTemplateFieldsFormPartial = ({
         });
       }
     },
-    [append, lastActiveField, selectedSigner?.email, selectedSigner?.id, toast],
+    [
+      append,
+      lastActiveField,
+      selectedSigner?.email,
+      selectedSigner?.id,
+      selectedSigner?.token,
+      toast,
+      handleAutoSave,
+    ],
   );
 
   const onFieldPaste = useCallback(
@@ -218,9 +245,18 @@ export const AddTemplateFieldsFormPartial = ({
           pageX: copiedField.pageX + 3,
           pageY: copiedField.pageY + 3,
         });
+
+        void handleAutoSave();
       }
     },
-    [append, fieldClipboard, selectedSigner?.email, selectedSigner?.id, selectedSigner?.token],
+    [
+      append,
+      fieldClipboard,
+      selectedSigner?.email,
+      selectedSigner?.id,
+      selectedSigner?.token,
+      handleAutoSave,
+    ],
   );
 
   useHotkeys(['ctrl+c', 'meta+c'], (evt) => onFieldCopy(evt));
@@ -378,8 +414,10 @@ export const AddTemplateFieldsFormPartial = ({
         pageWidth,
         pageHeight,
       });
+
+      void handleAutoSave();
     },
-    [getFieldPosition, localFields, update],
+    [getFieldPosition, localFields, update, handleAutoSave],
   );
 
   const onFieldMove = useCallback(
@@ -401,8 +439,10 @@ export const AddTemplateFieldsFormPartial = ({
         pageX,
         pageY,
       });
+
+      void handleAutoSave();
     },
-    [getFieldPosition, localFields, update],
+    [getFieldPosition, localFields, update, handleAutoSave],
   );
 
   useEffect(() => {
@@ -504,6 +544,7 @@ export const AddTemplateFieldsFormPartial = ({
     });
 
     form.setValue('fields', updatedFields);
+    void handleAutoSave();
   };
 
   return (
@@ -519,6 +560,10 @@ export const AddTemplateFieldsFormPartial = ({
           fields={localFields}
           onAdvancedSettings={handleAdvancedSettings}
           onSave={handleSavedFieldSettings}
+          onAutoSave={async (fieldState) => {
+            handleSavedFieldSettings(fieldState);
+            await handleAutoSave();
+          }}
         />
       ) : (
         <>
@@ -566,12 +611,22 @@ export const AddTemplateFieldsFormPartial = ({
                     defaultWidth={DEFAULT_WIDTH_PX}
                     passive={isFieldWithinBounds && !!selectedField}
                     onFocus={() => setLastActiveField(field)}
-                    onBlur={() => setLastActiveField(null)}
+                    onBlur={() => {
+                      setLastActiveField(null);
+                      void handleAutoSave();
+                    }}
                     onResize={(options) => onFieldResize(options, index)}
                     onMove={(options) => onFieldMove(options, index)}
-                    onRemove={() => remove(index)}
-                    onDuplicate={() => onFieldCopy(null, { duplicate: true })}
-                    onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
+                    onRemove={() => {
+                      remove(index);
+                      void handleAutoSave();
+                    }}
+                    onDuplicate={() => {
+                      onFieldCopy(null, { duplicate: true });
+                    }}
+                    onDuplicateAllPages={() => {
+                      onFieldCopy(null, { duplicateAll: true });
+                    }}
                     onAdvancedSettings={() => {
                       setCurrentField(field);
                       handleAdvancedSettings();

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
 
 import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
@@ -12,6 +12,7 @@ import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircle, Link2Icon, Plus, Trash } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isTemplateRecipientEmailPlaceholder } from '@documenso/lib/constants/template';
@@ -55,6 +56,7 @@ export type AddTemplatePlaceholderRecipientsFormProps = {
   allowDictateNextSigner?: boolean;
   templateDirectLink?: TemplateDirectLink | null;
   onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
+  onAutoSave: (_data: TAddTemplatePlacholderRecipientsFormSchema) => Promise<void>;
   isDocumentPdfLoaded: boolean;
 };
 
@@ -67,6 +69,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   allowDictateNextSigner,
   isDocumentPdfLoaded,
   onSubmit,
+  onAutoSave,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
   const $sensorApi = useRef<SensorAPI | null>(null);
@@ -123,15 +126,38 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     },
   });
 
-  useEffect(() => {
-    form.reset({
-      signers: generateDefaultFormSigners(),
-      signingOrder: signingOrder || DocumentSigningOrder.PARALLEL,
-      allowDictateNextSigner: allowDictateNextSigner ?? false,
-    });
+  const emptySigners = useCallback(
+    () => form.getValues('signers').filter((signer) => signer.email === ''),
+    [form],
+  );
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recipients]);
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    if (emptySigners().length > 0) {
+      return;
+    }
+
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    scheduleSave(formData);
+  };
+
+  // useEffect(() => {
+  //   form.reset({
+  //     signers: generateDefaultFormSigners(),
+  //     signingOrder: signingOrder || DocumentSigningOrder.PARALLEL,
+  //     allowDictateNextSigner: allowDictateNextSigner ?? false,
+  //   });
+
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [recipients]);
 
   // Always show advanced settings if any recipient has auth options.
   const alwaysShowAdvancedSettings = useMemo(() => {
@@ -204,7 +230,12 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   const onRemoveSigner = (index: number) => {
     removeSigner(index);
     const updatedSigners = signers.filter((_, idx) => idx !== index);
-    form.setValue('signers', normalizeSigningOrders(updatedSigners));
+    form.setValue('signers', normalizeSigningOrders(updatedSigners), {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    void handleAutoSave();
   };
 
   const isSignerDirectRecipient = (
@@ -231,7 +262,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
         signingOrder: index + 1,
       }));
 
-      form.setValue('signers', updatedSigners);
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
       const lastSigner = updatedSigners[updatedSigners.length - 1];
       if (lastSigner.role === RecipientRole.ASSISTANT) {
@@ -244,8 +278,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
       }
 
       await form.trigger('signers');
+
+      void handleAutoSave();
     },
-    [form, watchedSigners, toast],
+    [form, watchedSigners, toast, handleAutoSave],
   );
 
   const handleSigningOrderChange = useCallback(
@@ -273,7 +309,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
         signingOrder: idx + 1,
       }));
 
-      form.setValue('signers', updatedSigners);
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
       if (signer.role === RecipientRole.ASSISTANT && newPosition === remainingSigners.length - 1) {
         toast({
@@ -283,8 +322,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
           ),
         });
       }
+
+      void handleAutoSave();
     },
-    [form, toast],
+    [form, toast, handleAutoSave],
   );
 
   const handleRoleChange = useCallback(
@@ -294,7 +335,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
 
       // Handle parallel to sequential conversion for assistants
       if (role === RecipientRole.ASSISTANT && signingOrder === DocumentSigningOrder.PARALLEL) {
-        form.setValue('signingOrder', DocumentSigningOrder.SEQUENTIAL);
+        form.setValue('signingOrder', DocumentSigningOrder.SEQUENTIAL, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
         toast({
           title: _(msg`Signing order is enabled.`),
           description: _(msg`You cannot add assistants when signing order is disabled.`),
@@ -309,7 +353,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
         signingOrder: idx + 1,
       }));
 
-      form.setValue('signers', updatedSigners);
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
       if (role === RecipientRole.ASSISTANT && index === updatedSigners.length - 1) {
         toast({
@@ -319,8 +366,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
           ),
         });
       }
+
+      void handleAutoSave();
     },
-    [form, toast],
+    [form, toast, handleAutoSave],
   );
 
   const [showSigningOrderConfirmation, setShowSigningOrderConfirmation] = useState(false);
@@ -334,10 +383,21 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
       role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
     }));
 
-    form.setValue('signers', updatedSigners);
-    form.setValue('signingOrder', DocumentSigningOrder.PARALLEL);
-    form.setValue('allowDictateNextSigner', false);
-  }, [form]);
+    form.setValue('signers', updatedSigners, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    form.setValue('signingOrder', DocumentSigningOrder.PARALLEL, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    form.setValue('allowDictateNextSigner', false, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    void handleAutoSave();
+  }, [form, handleAutoSave]);
 
   return (
     <>
@@ -382,8 +442,13 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
 
                         // If sequential signing is turned off, disable dictate next signer
                         if (!checked) {
-                          form.setValue('allowDictateNextSigner', false);
+                          form.setValue('allowDictateNextSigner', false, {
+                            shouldValidate: true,
+                            shouldDirty: true,
+                          });
                         }
+
+                        void handleAutoSave();
                       }}
                       disabled={isSubmitting}
                     />
@@ -409,7 +474,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                       {...field}
                       id="allowDictateNextSigner"
                       checked={value}
-                      onCheckedChange={field.onChange}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                        void handleAutoSave();
+                      }}
                       disabled={isSubmitting || !isSigningOrderSequential}
                     />
                   </FormControl>
@@ -500,6 +568,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                         <Input
                                           type="number"
                                           max={signers.length}
+                                          data-testid="placeholder-recipient-signing-order-input"
                                           className={cn(
                                             'w-full text-center',
                                             '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
@@ -558,6 +627,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                           signers[index].email === user?.email ||
                                           isSignerDirectRecipient(signer)
                                         }
+                                        onBlur={handleAutoSave}
+                                        data-testid="placeholder-recipient-email-input"
                                       />
                                     </FormControl>
 
@@ -592,6 +663,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                           signers[index].email === user?.email ||
                                           isSignerDirectRecipient(signer)
                                         }
+                                        onBlur={handleAutoSave}
+                                        data-testid="placeholder-recipient-name-input"
                                       />
                                     </FormControl>
 
@@ -633,10 +706,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                       <FormControl>
                                         <RecipientRoleSelect
                                           {...field}
-                                          onValueChange={(value) =>
+                                          onValueChange={(value) => {
                                             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                                            handleRoleChange(index, value as RecipientRole)
-                                          }
+                                            handleRoleChange(index, value as RecipientRole);
+                                          }}
                                           disabled={isSubmitting}
                                           hideCCRecipients={isSignerDirectRecipient(signer)}
                                         />
@@ -672,6 +745,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                     className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                                     disabled={isSubmitting || signers.length === 1}
                                     onClick={() => onRemoveSigner(index)}
+                                    data-testid="remove-placeholder-recipient-button"
                                   >
                                     <Trash className="h-5 w-5" />
                                   </button>

packages/ui/primitives/template-flow/add-template-settings.tsx

@@ -9,6 +9,7 @@ import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import {
@@ -83,6 +84,7 @@ export type AddTemplateSettingsFormProps = {
   template: TTemplate;
   currentTeamMemberRole?: TeamMemberRole;
   onSubmit: (_data: TAddTemplateSettingsFormSchema) => void;
+  onAutoSave: (_data: TAddTemplateSettingsFormSchema) => Promise<void>;
 };
 
 export const AddTemplateSettingsFormPartial = ({
@@ -93,6 +95,7 @@ export const AddTemplateSettingsFormPartial = ({
   template,
   currentTeamMemberRole,
   onSubmit,
+  onAutoSave,
 }: AddTemplateSettingsFormProps) => {
   const { t, i18n } = useLingui();
 
@@ -160,6 +163,28 @@ export const AddTemplateSettingsFormPartial = ({
     }
   }, [form, form.setValue, form.formState.touchedFields.meta?.timezone]);
 
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    /*
+     * Parse the form data through the Zod schema to handle transformations
+     * (like -1 -> undefined for the Document Global Auth Access)
+     */
+    const parseResult = ZAddTemplateSettingsFormSchema.safeParse(formData);
+
+    if (parseResult.success) {
+      scheduleSave(parseResult.data);
+    }
+  };
+
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -191,7 +216,7 @@ export const AddTemplateSettingsFormPartial = ({
                   </FormLabel>
 
                   <FormControl>
-                    <Input className="bg-background" {...field} />
+                    <Input className="bg-background" {...field} onBlur={handleAutoSave} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -219,7 +244,13 @@ export const AddTemplateSettingsFormPartial = ({
                   </FormLabel>
 
                   <FormControl>
-                    <Select {...field} onValueChange={field.onChange}>
+                    <Select
+                      {...field}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        void handleAutoSave();
+                      }}
+                    >
                       <SelectTrigger className="bg-background">
                         <SelectValue />
                       </SelectTrigger>
@@ -250,9 +281,13 @@ export const AddTemplateSettingsFormPartial = ({
 
                   <FormControl>
                     <DocumentGlobalAuthAccessSelect
+                      {...field}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        void handleAutoSave();
+                      }}
                       value={field.value}
                       disabled={field.disabled}
-                      onValueChange={field.onChange}
                     />
                   </FormControl>
                 </FormItem>
@@ -275,7 +310,10 @@ export const AddTemplateSettingsFormPartial = ({
                         canUpdateVisibility={canUpdateVisibility}
                         currentTeamMemberRole={currentTeamMemberRole}
                         {...field}
-                        onValueChange={field.onChange}
+                        onValueChange={(value) => {
+                          field.onChange(value);
+                          void handleAutoSave();
+                        }}
                       />
                     </FormControl>
                   </FormItem>
@@ -334,7 +372,13 @@ export const AddTemplateSettingsFormPartial = ({
                   </FormLabel>
 
                   <FormControl>
-                    <Select {...field} onValueChange={field.onChange}>
+                    <Select
+                      {...field}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        void handleAutoSave();
+                      }}
+                    >
                       <SelectTrigger className="bg-background text-muted-foreground">
                         <SelectValue data-testid="documentDistributionMethodSelectValue" />
                       </SelectTrigger>
@@ -371,7 +415,10 @@ export const AddTemplateSettingsFormPartial = ({
                         value: option.value,
                       }))}
                       selectedValues={field.value}
-                      onChange={field.onChange}
+                      onChange={(value) => {
+                        field.onChange(value);
+                        void handleAutoSave();
+                      }}
                       className="bg-background w-full"
                       emptySelectionPlaceholder="Select signature types"
                     />
@@ -395,9 +442,13 @@ export const AddTemplateSettingsFormPartial = ({
 
                     <FormControl>
                       <DocumentGlobalAuthActionSelect
+                        {...field}
+                        onValueChange={(value) => {
+                          field.onChange(value);
+                          void handleAutoSave();
+                        }}
                         value={field.value}
                         disabled={field.disabled}
-                        onValueChange={field.onChange}
                       />
                     </FormControl>
                   </FormItem>
@@ -488,7 +539,7 @@ export const AddTemplateSettingsFormPartial = ({
                             </FormLabel>
 
                             <FormControl>
-                              <Input {...field} />
+                              <Input {...field} onBlur={handleAutoSave} />
                             </FormControl>
 
                             <FormMessage />
@@ -515,7 +566,11 @@ export const AddTemplateSettingsFormPartial = ({
                             </FormLabel>
 
                             <FormControl>
-                              <Textarea className="bg-background h-16 resize-none" {...field} />
+                              <Textarea
+                                className="bg-background h-16 resize-none"
+                                {...field}
+                                onBlur={handleAutoSave}
+                              />
                             </FormControl>
 
                             <FormMessage />
@@ -525,7 +580,12 @@ export const AddTemplateSettingsFormPartial = ({
 
                       <DocumentEmailCheckboxes
                         value={emailSettings}
-                        onChange={(value) => form.setValue('meta.emailSettings', value)}
+                        onChange={(value) => {
+                          form.setValue('meta.emailSettings', value, {
+                            shouldDirty: true,
+                          });
+                          void handleAutoSave();
+                        }}
                       />
                     </div>
                   </AccordionContent>
@@ -563,7 +623,7 @@ export const AddTemplateSettingsFormPartial = ({
                           </FormLabel>
 
                           <FormControl>
-                            <Input className="bg-background" {...field} />
+                            <Input className="bg-background" {...field} onBlur={handleAutoSave} />
                           </FormControl>
 
                           <FormMessage />
@@ -581,7 +641,13 @@ export const AddTemplateSettingsFormPartial = ({
                           </FormLabel>
 
                           <FormControl>
-                            <Select {...field} onValueChange={field.onChange}>
+                            <Select
+                              {...field}
+                              onValueChange={(value) => {
+                                field.onChange(value);
+                                void handleAutoSave();
+                              }}
+                            >
                               <SelectTrigger className="bg-background">
                                 <SelectValue />
                               </SelectTrigger>
@@ -615,7 +681,10 @@ export const AddTemplateSettingsFormPartial = ({
                               className="bg-background time-zone-field"
                               options={TIME_ZONES}
                               {...field}
-                              onChange={(value) => value && field.onChange(value)}
+                              onChange={(value) => {
+                                value && field.onChange(value);
+                                void handleAutoSave();
+                              }}
                             />
                           </FormControl>
 
@@ -645,7 +714,7 @@ export const AddTemplateSettingsFormPartial = ({
                           </FormLabel>
 
                           <FormControl>
-                            <Input className="bg-background" {...field} />
+                            <Input className="bg-background" {...field} onBlur={handleAutoSave} />
                           </FormControl>
 
                           <FormMessage />