fix: reauth, etc

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -152,6 +152,18 @@ export const EditorFieldTextForm = ({
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
+                    onChange={(e) => {
+                      const values = form.getValues();
+                      const characterLimit = values.characterLimit || 0;
+                      let textValue = e.target.value;
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        textValue = textValue.slice(0, characterLimit);
+                      }
+
+                      e.target.value = textValue;
+                      field.onChange(e);
+                    }}
                     rows={1}
                   />
                 </FormControl>
@@ -175,6 +187,18 @@ export const EditorFieldTextForm = ({
                     className="bg-background"
                     placeholder={t`Field character limit`}
                     {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+
+                      const values = form.getValues();
+                      const characterLimit = parseInt(e.target.value, 10) || 0;
+
+                      const textValue = values.text || '';
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        form.setValue('text', textValue.slice(0, characterLimit));
+                      }
+                    }}
                   />
                 </FormControl>
                 <FormMessage />

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -89,7 +89,10 @@ export const DirectTemplatePageView = ({
     setStep('sign');
   };
 
-  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
+  const onSignDirectTemplateSubmit = async (
+    fields: DirectTemplateLocalField[],
+    nextSigner?: { name: string; email: string },
+  ) => {
     try {
       let directTemplateExternalId = searchParams?.get('externalId') || undefined;
 
@@ -98,6 +101,7 @@ export const DirectTemplatePageView = ({
       }
 
       const { token } = await createDocumentFromDirectTemplate({
+        nextSigner,
         directTemplateToken,
         directTemplateExternalId,
         directRecipientName: fullName,

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

@@ -55,10 +55,13 @@ import { DocumentSigningRecipientProvider } from '../document-signing/document-s
 
 export type DirectTemplateSigningFormProps = {
   flowStep: DocumentFlowStep;
-  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
+  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token' | 'id'>;
   directRecipientFields: Field[];
   template: Omit<TTemplate, 'user'>;
-  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
+  onSubmit: (
+    _data: DirectTemplateLocalField[],
+    _nextSigner?: { name: string; email: string },
+  ) => Promise<void>;
 };
 
 export type DirectTemplateLocalField = Field & {
@@ -149,7 +152,7 @@ export const DirectTemplateSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (nextSigner?: { name: string; email: string }) => {
     setValidateUninsertedFields(true);
 
     const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
@@ -161,7 +164,7 @@ export const DirectTemplateSigningForm = ({
     setIsSubmitting(true);
 
     try {
-      await onSubmit(localFields);
+      await onSubmit(localFields, nextSigner);
     } catch {
       setIsSubmitting(false);
     }
@@ -218,6 +221,30 @@ export const DirectTemplateSigningForm = ({
     setLocalFields(updatedFields);
   }, []);
 
+  const nextRecipient = useMemo(() => {
+    if (
+      !template.templateMeta?.signingOrder ||
+      template.templateMeta.signingOrder !== 'SEQUENTIAL' ||
+      !template.templateMeta.allowDictateNextSigner
+    ) {
+      return undefined;
+    }
+
+    const sortedRecipients = template.recipients.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 === directRecipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
+  }, [template.templateMeta?.signingOrder, template.recipients, directRecipient.id]);
+
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
@@ -417,11 +444,15 @@ export const DirectTemplateSigningForm = ({
 
           <DocumentSigningCompleteDialog
             isSubmitting={isSubmitting}
-            onSignatureComplete={async () => handleSubmit()}
+            onSignatureComplete={async (nextSigner) => handleSubmit(nextSigner)}
             documentTitle={template.title}
             fields={localFields}
             fieldsValidated={fieldsValidated}
             recipient={directRecipient}
+            allowDictateNextSigner={nextRecipient && template.templateMeta?.allowDictateNextSigner}
+            defaultNextSigner={
+              nextRecipient ? { name: nextRecipient.name, email: nextRecipient.email } : undefined
+            }
           />
         </div>
       </DocumentFlowFormContainerFooter>

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

@@ -9,7 +9,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentSigningAuthPageViewProps = {
-  email: string;
+  email?: string;
   emailHasAccount?: boolean;
 };
 
@@ -22,12 +22,18 @@ export const DocumentSigningAuthPageView = ({
 
   const [isSigningOut, setIsSigningOut] = useState(false);
 
-  const handleChangeAccount = async (email: string) => {
+  const handleChangeAccount = async (email?: string) => {
     try {
       setIsSigningOut(true);
 
+      let redirectPath = '/signin';
+
+      if (email) {
+        redirectPath = emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`;
+      }
+
       await authClient.signOut({
-        redirectPath: emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`,
+        redirectPath,
       });
     } catch {
       toast({
@@ -49,9 +55,13 @@ export const DocumentSigningAuthPageView = ({
         </h1>
 
         <p className="text-muted-foreground mt-2 text-sm">
-          <Trans>
-            You need to be logged in as <strong>{email}</strong> to view this page.
-          </Trans>
+          {email ? (
+            <Trans>
+              You need to be logged in as <strong>{email}</strong> to view this page.
+            </Trans>
+          ) : (
+            <Trans>You need to be logged in to view this page.</Trans>
+          )}
         </p>
 
         <Button

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

@@ -24,7 +24,10 @@ type PasskeyData = {
   isError: boolean;
 };
 
-type SigningAuthRecipient = Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
+type SigningAuthRecipient = Pick<
+  Recipient,
+  'authOptions' | 'email' | 'role' | 'name' | 'token' | 'id'
+>;
 
 export type DocumentSigningAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -304,7 +304,6 @@ export const DocumentSigningCompleteDialog = ({
                 <form onSubmit={form.handleSubmit(onFormSubmit)}>
                   {allowDictateNextSigner && defaultNextSigner && (
                     <div className="mb-4 flex flex-col gap-4">
-                      {/* Todo: Envelopes - Should we say "The next recipient to sign this document will be"? */}
                       <div className="flex flex-col gap-4 md:flex-row">
                         <FormField
                           control={form.control}

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

@@ -13,6 +13,7 @@ import { prop, sortBy } from 'remeda';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
   isFieldUnsignedAndRequired,
   isRequiredField,
@@ -51,7 +52,11 @@ export type EnvelopeSigningContextValue = {
   setSelectedAssistantRecipientId: (_value: number | null) => void;
   selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
 
-  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
+  signField: (
+    _fieldId: number,
+    _value: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => Promise<void>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -284,9 +289,11 @@ export const EnvelopeSigningProvider = ({
       : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
-  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
-    console.log('insertField', fieldId, fieldValue);
-
+  const signField = async (
+    fieldId: number,
+    fieldValue: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
     // Set the field locally for direct templates.
     if (isDirectTemplate) {
       handleDirectTemplateFieldInsertion(fieldId, fieldValue);
@@ -297,7 +304,7 @@ export const EnvelopeSigningProvider = ({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
-      authOptions: undefined,
+      authOptions,
     });
   };
 

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -103,7 +103,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       fieldUpdates.height = fieldPageHeight;
     }
 
-    // Todo: envelopes Use id
     editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
 
     // Select the field if it is not already selected.

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -27,7 +27,8 @@ import type {
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -112,7 +113,29 @@ export const EnvelopeEditorFieldsPage = () => {
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex h-full justify-center p-4">
+        <div className="mt-4 flex flex-col items-center justify-center">
+          {envelope.recipients.length === 0 && (
+            <Alert
+              variant="neutral"
+              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
+            >
+              <div className="flex flex-col gap-1">
+                <AlertTitle>
+                  <Trans>Missing Recipients</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>You need at least one recipient to add fields</Trans>
+                </AlertDescription>
+              </div>
+
+              <Button asChild variant="outline">
+                <Link to={`${relativePath.editorPath}`}>
+                  <Trans>Add Recipients</Trans>
+                </Link>
+              </Button>
+            </Alert>
+          )}
+
           {currentEnvelopeItem !== null ? (
             <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
           ) : (
@@ -130,7 +153,7 @@ export const EnvelopeEditorFieldsPage = () => {
       </div>
 
       {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && (
+      {currentEnvelopeItem && envelope.recipients.length > 0 && (
         <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
@@ -138,29 +161,15 @@ export const EnvelopeEditorFieldsPage = () => {
               <Trans>Selected Recipient</Trans>
             </h3>
 
-            {envelope.recipients.length === 0 ? (
-              <Alert variant="warning">
-                <AlertDescription className="flex flex-col gap-2">
-                  <Trans>You need at least one recipient to add fields</Trans>
-
-                  <Link to={`${relativePath.editorPath}`} className="text-sm">
-                    <p>
-                      <Trans>Click here to add a recipient</Trans>
-                    </p>
-                  </Link>
-                </AlertDescription>
-              </Alert>
-            ) : (
-              <RecipientSelector
-                selectedRecipient={editorFields.selectedRecipient}
-                onSelectedRecipientChange={(recipient) =>
-                  editorFields.setSelectedRecipient(recipient.id)
-                }
-                recipients={envelope.recipients}
-                className="w-full"
-                align="end"
-              />
-            )}
+            <RecipientSelector
+              selectedRecipient={editorFields.selectedRecipient}
+              onSelectedRecipientChange={(recipient) =>
+                editorFields.setSelectedRecipient(recipient.id)
+              }
+              recipients={envelope.recipients}
+              className="w-full"
+              align="end"
+            />
 
             {editorFields.selectedRecipient &&
               !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -323,7 +323,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="flex w-80 flex-col border-r bg-gray-50">
+        <div className="bg-accent/20 flex w-80 flex-col border-r">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -203,7 +203,6 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(items);
   };
 
-  // Todo: Envelopes - Sync into envelopes data
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
     void updateEnvelopeItems({
       envelopeId: envelope.id,

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -10,14 +10,17 @@ import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-rende
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
@@ -28,20 +31,24 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
+import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerPageRenderer() {
-  const { i18n } = useLingui();
+  const { t, i18n } = useLingui();
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
   const { sessionData } = useOptionalSession();
 
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+  const { toast } = useToast();
+
   const {
     envelopeData,
     recipient,
     recipientFields,
     recipientFieldsRemaining,
     showPendingFieldTooltip,
-    signField,
+    signField: signFieldInternal,
     email,
     setEmail,
     fullName,
@@ -318,7 +325,6 @@ export default function EnvelopeSignerPageRenderer() {
          * SIGNATURE FIELD.
          */
         .with({ type: FieldType.SIGNATURE }, (field) => {
-          // Todo: Envelopes - Reauth
           handleSignatureFieldClick({
             field,
             signature,
@@ -329,11 +335,21 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
-              }
 
-              if (payload?.value) {
-                setSignature(payload.value);
+                if (payload.value) {
+                  void executeActionAuthProcedure({
+                    onReauthFormSubmit: async (authOptions) => {
+                      await signField(field.id, payload, authOptions);
+
+                      loadingSpinnerGroup.destroy();
+                    },
+                    actionTarget: field.type,
+                  });
+
+                  setSignature(payload.value);
+                } else {
+                  await signField(field.id, payload);
+                }
               }
             })
             .finally(() => {
@@ -347,6 +363,26 @@ export default function EnvelopeSignerPageRenderer() {
     fieldGroup.on('pointerdown', handleFieldGroupClick);
   };
 
+  const signField = async (
+    fieldId: number,
+    payload: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
+    try {
+      await signFieldInternal(fieldId, payload, authOptions);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while signing the field.`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */

apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx

@@ -127,6 +127,7 @@ export const EnvelopeSignerCompleteDialog = () => {
             isBase64,
           };
         }),
+        nextSigner,
       });
 
       const redirectUrl = envelope.documentMeta.redirectUrl;

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -8,7 +8,6 @@ import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/env
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-direct-template-signing';
-import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
 import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
@@ -98,15 +97,12 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
         envelopeForSigning,
       } as const;
     })
-    .catch(async (e) => {
+    .catch((e) => {
       const error = AppError.parseError(e);
 
       if (error.code === AppErrorCode.UNAUTHORIZED) {
-        const requiredAccessData = await getEnvelopeRequiredAccessData({ token });
-
         return {
           isDocumentAccessValid: false,
-          ...requiredAccessData,
         } as const;
       }
 
@@ -226,20 +222,21 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
   const user = sessionData?.user;
 
   if (!data.isDocumentAccessValid) {
-    return (
-      <DocumentSigningAuthPageView
-        email={data.recipientEmail}
-        emailHasAccount={!!data.recipientHasAccount}
-      />
-    );
+    return <DocumentSigningAuthPageView email={''} emailHasAccount={true} />;
   }
 
   const { envelope, recipient } = data.envelopeForSigning;
 
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: envelope.authOptions,
+  });
+
+  const isEmailForced = derivedRecipientAccessAuth.includes(DocumentAccessAuth.ACCOUNT);
+
   return (
     <EnvelopeSigningProvider
       envelopeData={data.envelopeForSigning}
-      email={''} // Doing this allows us to let users change the email if they want to.
+      email={isEmailForced ? user?.email || '' : ''} // Doing this allows us to let users change the email if they want to for non-auth templates.
       fullName={user?.name}
       signature={user?.signature}
     >

package-lock.json

@@ -19,7 +19,6 @@
         "inngest-cli": "^0.29.1",
         "luxon": "^3.5.0",
         "mupdf": "^1.0.0",
-        "pdf2json": "^4.0.0",
         "react": "^18",
         "typescript": "5.6.2",
         "zod": "3.24.1"
@@ -27199,18 +27198,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/pdf2json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pdf2json/-/pdf2json-4.0.0.tgz",
-      "integrity": "sha512-WkezNsLK8sGpuFC7+PPP0DsXROwdoOxmXPBTtUWWkCwCi/Vi97MRC52Ly6FWIJjOKIywpm/L2oaUgSrmtU+7ZQ==",
-      "license": "Apache-2.0",
-      "bin": {
-        "pdf2json": "bin/pdf2json.js"
-      },
-      "engines": {
-        "node": ">=20.18.0"
-      }
-    },
     "node_modules/pdfjs-dist": {
       "version": "3.11.174",
       "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",

package.json

@@ -74,7 +74,6 @@
     "inngest-cli": "^0.29.1",
     "luxon": "^3.5.0",
     "mupdf": "^1.0.0",
-    "pdf2json": "^4.0.0",
     "react": "^18",
     "typescript": "5.6.2",
     "zod": "3.24.1"

packages/app-tests/e2e/features/include-document-certificate.spec.ts

@@ -78,7 +78,6 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    // Todo: Envelopes
     const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
     const completedDocumentData = await getFile(firstDocumentData);
@@ -169,7 +168,6 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    // Todo: Envelopes
     const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
     const completedDocumentData = await getFile(firstDocumentData);

packages/app-tests/e2e/templates/direct-templates.spec.ts

@@ -1,9 +1,12 @@
 import { expect, test } from '@playwright/test';
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { customAlphabet } from 'nanoid';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { createDocumentAuthOptions } from '@documenso/lib/utils/document-auth';
+import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { prisma } from '@documenso/prisma';
 import { seedTeam } from '@documenso/prisma/seed/teams';
 import { seedDirectTemplate, seedTemplate } from '@documenso/prisma/seed/templates';
 import { seedTestEmail, seedUser } from '@documenso/prisma/seed/users';
@@ -121,7 +124,7 @@ test('[DIRECT_TEMPLATES]: delete direct template link', async ({ page }) => {
   await expect(page.getByText('404 not found')).toBeVisible();
 });
 
-test('[DIRECT_TEMPLATES]: direct template link auth access', async ({ page }) => {
+test('[DIRECT_TEMPLATES]: V1 direct template link auth access', async ({ page }) => {
   const { user, team } = await seedUser();
 
   const directTemplateWithAuth = await seedDirectTemplate({
@@ -153,6 +156,53 @@ test('[DIRECT_TEMPLATES]: direct template link auth access', async ({ page }) =>
 
   await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
   await expect(page.getByLabel('Email')).toBeDisabled();
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+  await page.getByRole('button', { name: 'Complete' }).click();
+
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(/\/sign/);
+  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
+});
+
+test('[DIRECT_TEMPLATES]: V2 direct template link auth access', async ({ page }) => {
+  const { user, team } = await seedUser();
+
+  const directTemplateWithAuth = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: user.id,
+    teamId: team.id,
+    internalVersion: 2,
+    createTemplateOptions: {
+      authOptions: createDocumentAuthOptions({
+        globalAccessAuth: ['ACCOUNT'],
+        globalActionAuth: [],
+      }),
+    },
+  });
+
+  const directTemplatePath = formatDirectTemplatePath(
+    directTemplateWithAuth.directLink?.token || '',
+  );
+
+  await page.goto(directTemplatePath);
+
+  await expect(page.getByText('Authentication required')).toBeVisible();
+
+  await apiSignin({
+    page,
+    email: user.email,
+  });
+
+  await page.goto(directTemplatePath);
+
+  await expect(page.getByRole('heading', { name: 'Personal direct template link' })).toBeVisible();
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await expect(page.getByLabel('Your Email')).not.toBeVisible();
+
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(/\/sign/);
+  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
 });
 
 test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ page }) => {
@@ -175,6 +225,9 @@ test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ p
   await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
 
   await page.getByRole('button', { name: 'Continue' }).click();
+
+  await expect(page.getByText('Next Recipient Name')).not.toBeVisible();
+
   await page.getByRole('button', { name: 'Complete' }).click();
   await page.getByRole('button', { name: 'Sign' }).click();
   await page.waitForURL(/\/sign/);
@@ -183,3 +236,173 @@ test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ p
   // Add a longer waiting period to ensure document status is updated
   await page.waitForTimeout(3000);
 });
+
+test('[DIRECT_TEMPLATES]: V1 use direct template link with 2 recipients with next signer dictation', async ({
+  page,
+}) => {
+  const { team, owner, organisation } = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  // Should be visible to team members.
+  const template = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await prisma.documentMeta.update({
+    where: {
+      id: template.documentMetaId,
+    },
+    data: {
+      allowDictateNextSigner: true,
+      signingOrder: DocumentSigningOrder.SEQUENTIAL,
+    },
+  });
+
+  const originalName = 'Signer 2';
+  const originalSecondSignerEmail = seedTestEmail();
+
+  // Add another signer
+  await prisma.recipient.create({
+    data: {
+      signingOrder: 2,
+      envelopeId: template.id,
+      email: originalSecondSignerEmail,
+      name: originalName,
+      token: Math.random().toString().slice(2, 7),
+      role: RecipientRole.SIGNER,
+    },
+  });
+
+  // Check that the direct template link is accessible.
+  await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+  await page.waitForTimeout(100);
+  await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+  await page.getByRole('button', { name: 'Complete' }).click();
+
+  await expect(page.getByText('Next Recipient Name')).toBeVisible();
+
+  const nextRecipientNameInputValue = await page.getByLabel('Next Recipient Name').inputValue();
+  expect(nextRecipientNameInputValue).toBe(originalName);
+
+  const nextRecipientEmailInputValue = await page.getByLabel('Next Recipient Email').inputValue();
+  expect(nextRecipientEmailInputValue).toBe(originalSecondSignerEmail);
+
+  const newName = 'Hello';
+  const newSecondSignerEmail = seedTestEmail();
+
+  await page.getByLabel('Next Recipient Email').fill(newSecondSignerEmail);
+  await page.getByLabel('Next Recipient Name').fill(newName);
+
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(/\/sign/);
+  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
+
+  const createdEnvelopeRecipients = await prisma.recipient.findMany({
+    where: {
+      envelope: {
+        templateId: mapSecondaryIdToTemplateId(template.secondaryId),
+      },
+    },
+  });
+
+  const updatedSecondRecipient = createdEnvelopeRecipients.find(
+    (recipient) => recipient.signingOrder === 2,
+  );
+
+  expect(updatedSecondRecipient?.name).toBe(newName);
+  expect(updatedSecondRecipient?.email).toBe(newSecondSignerEmail);
+});
+
+test('[DIRECT_TEMPLATES]: V2 use direct template link with 2 recipients with next signer dictation', async ({
+  page,
+}) => {
+  const { team, owner, organisation } = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  // Should be visible to team members.
+  const template = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+    internalVersion: 2,
+  });
+
+  await prisma.documentMeta.update({
+    where: {
+      id: template.documentMetaId,
+    },
+    data: {
+      allowDictateNextSigner: true,
+      signingOrder: DocumentSigningOrder.SEQUENTIAL,
+    },
+  });
+
+  const originalName = 'Signer 2';
+  const originalSecondSignerEmail = seedTestEmail();
+
+  // Add another signer
+  await prisma.recipient.create({
+    data: {
+      signingOrder: 2,
+      envelopeId: template.id,
+      email: originalSecondSignerEmail,
+      name: originalName,
+      token: Math.random().toString().slice(2, 7),
+      role: RecipientRole.SIGNER,
+    },
+  });
+
+  // Check that the direct template link is accessible.
+  await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+  await expect(page.getByRole('heading', { name: 'Team direct template link 1' })).toBeVisible();
+  await page.waitForTimeout(100);
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+
+  const currentName = 'John Doe';
+  const currentEmail = seedTestEmail();
+
+  await page.getByPlaceholder('Enter Your Name').fill(currentName);
+  await page.getByPlaceholder('Enter Your Email').fill(currentEmail);
+
+  await expect(page.getByText('Next Recipient Name')).toBeVisible();
+
+  const nextRecipientNameInputValue = await page.getByLabel('Next Recipient Name').inputValue();
+  expect(nextRecipientNameInputValue).toBe(originalName);
+
+  const nextRecipientEmailInputValue = await page.getByLabel('Next Recipient Email').inputValue();
+  expect(nextRecipientEmailInputValue).toBe(originalSecondSignerEmail);
+
+  const newName = 'Hello';
+  const newSecondSignerEmail = seedTestEmail();
+
+  await page.getByLabel('Next Recipient Email').fill(newSecondSignerEmail);
+  await page.getByLabel('Next Recipient Name').fill(newName);
+
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(/\/sign/);
+  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
+
+  const createdEnvelopeRecipients = await prisma.recipient.findMany({
+    where: {
+      envelope: {
+        templateId: mapSecondaryIdToTemplateId(template.secondaryId),
+      },
+    },
+  });
+
+  const updatedSecondRecipient = createdEnvelopeRecipients.find(
+    (recipient) => recipient.signingOrder === 2,
+  );
+
+  expect(updatedSecondRecipient?.name).toBe(newName);
+  expect(updatedSecondRecipient?.email).toBe(newSecondSignerEmail);
+});

packages/lib/server-only/envelope/get-envelope-for-direct-template-signing.ts

@@ -1,10 +1,11 @@
 import { DocumentStatus, EnvelopeType } from '@prisma/client';
+import { match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
 
 import { AppError, AppErrorCode } from '../../errors/app-error';
-import type { TDocumentAuthMethods } from '../../types/document-auth';
-import { isRecipientAuthorized } from '../document/is-recipient-authorized';
+import { DocumentAccessAuth, type TDocumentAuthMethods } from '../../types/document-auth';
+import { extractDocumentAuthMethods } from '../../utils/document-auth';
 import { getTeamSettings } from '../team/get-team-settings';
 import type { EnvelopeForSigningResponse } from './get-envelope-for-recipient-signing';
 import { ZEnvelopeForSigningResponse } from './get-envelope-for-recipient-signing';
@@ -98,14 +99,28 @@ export const getEnvelopeForDirectTemplateSigning = async ({
     });
   }
 
-  const documentAccessValid = await isRecipientAuthorized({
-    type: 'ACCESS',
-    documentAuthOptions: envelope.authOptions,
-    recipient,
-    userId,
-    authOptions: accessAuth,
+  // Currently not using this since for direct templates "User" access means they just need to be
+  // logged in.
+  // const documentAccessValid = await isRecipientAuthorized({
+  //   type: 'ACCESS',
+  //   documentAuthOptions: envelope.authOptions,
+  //   recipient,
+  //   userId,
+  //   authOptions: accessAuth,
+  // });
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: envelope.authOptions,
   });
 
+  // Ensure typesafety when we add more options.
+  const documentAccessValid = derivedRecipientAccessAuth.every((auth) =>
+    match(auth)
+      .with(DocumentAccessAuth.ACCOUNT, () => Boolean(userId))
+      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => true)
+      .exhaustive(),
+  );
+
   if (!documentAccessValid) {
     throw new AppError(AppErrorCode.UNAUTHORIZED, {
       message: 'Invalid access values',

packages/lib/server-only/envelope/get-envelope-required-access-data.ts

@@ -54,54 +54,3 @@ export const getEnvelopeRequiredAccessData = async ({ token }: { token: string }
     recipientHasAccount: Boolean(recipientUserAccount),
   } as const;
 };
-
-export const getEnvelopeDirectTemplateRequiredAccessData = async ({ token }: { token: string }) => {
-  const envelope = await prisma.envelope.findFirst({
-    where: {
-      type: EnvelopeType.TEMPLATE,
-      directLink: {
-        enabled: true,
-        token,
-      },
-      status: DocumentStatus.DRAFT,
-    },
-    include: {
-      recipients: {
-        where: {
-          token,
-        },
-      },
-      directLink: true,
-    },
-  });
-
-  if (!envelope) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Envelope not found',
-    });
-  }
-
-  const recipient = envelope.recipients.find(
-    (r) => r.id === envelope.directLink?.directTemplateRecipientId,
-  );
-
-  if (!recipient) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Recipient not found',
-    });
-  }
-
-  const recipientUserAccount = await prisma.user.findFirst({
-    where: {
-      email: recipient.email.toLowerCase(),
-    },
-    select: {
-      id: true,
-    },
-  });
-
-  return {
-    recipientEmail: recipient.email,
-    recipientHasAccount: Boolean(recipientUserAccount),
-  } as const;
-};

packages/lib/server-only/pdf/auto-place-fields.ts

@@ -1,482 +0,0 @@
-import { PDFDocument, rgb } from '@cantoo/pdf-lib';
-import type { Recipient } from '@prisma/client';
-import { EnvelopeType, FieldType, RecipientRole } from '@prisma/client';
-import PDFParser from 'pdf2json';
-import { match } from 'ts-pattern';
-
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { getEnvelopeWhereInput } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
-import { createEnvelopeFields } from '@documenso/lib/server-only/field/create-envelope-fields';
-import { createDocumentRecipients } from '@documenso/lib/server-only/recipient/create-document-recipients';
-import { createTemplateRecipients } from '@documenso/lib/server-only/recipient/create-template-recipients';
-import { type TFieldAndMeta, ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
-import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
-import type { EnvelopeIdOptions } from '@documenso/lib/utils/envelope';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
-import { generateRecipientPlaceholder } from '@documenso/lib/utils/templates';
-import { prisma } from '@documenso/prisma';
-
-import { getPageSize } from './get-page-size';
-
-type TextPosition = {
-  text: string;
-  x: number;
-  y: number;
-  w: number;
-};
-
-type CharIndexMapping = {
-  textPosIndex: number;
-};
-
-type PlaceholderInfo = {
-  placeholder: string;
-  recipient: string;
-  fieldAndMeta: TFieldAndMeta;
-  page: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  pageWidth: number;
-  pageHeight: number;
-};
-
-type FieldToCreate = TFieldAndMeta & {
-  recipientId: number;
-  pageNumber: number;
-  pageX: number;
-  pageY: number;
-  width: number;
-  height: number;
-};
-
-/*
-  Questions for later:
-    - Does it handle multi-page PDFs? ✅ YES! ✅
-    - Does it handle multiple recipients on the same page? ✅ YES! ✅
-    - Does it handle multiple recipients on multiple pages? ✅ YES! ✅
-    - What happens with incorrect placeholders? E.g. those containing non-accepted properties.
-    - The placeholder data is dynamic. How to handle this parsing? Perhaps we need to do it similar to the fieldMeta parsing.
-    - Need to handle envelopes with multiple items.
-*/
-
-/*
-  Parse field type string to FieldType enum.
-  Normalizes the input (uppercase, trim) and validates it's a valid field type.
-  This ensures we handle case variations and whitespace, and provides clear error messages.
-*/
-const parseFieldType = (fieldTypeString: string): FieldType => {
-  const normalizedType = fieldTypeString.toUpperCase().trim();
-
-  return match(normalizedType)
-    .with('SIGNATURE', () => FieldType.SIGNATURE)
-    .with('FREE_SIGNATURE', () => FieldType.FREE_SIGNATURE)
-    .with('INITIALS', () => FieldType.INITIALS)
-    .with('NAME', () => FieldType.NAME)
-    .with('EMAIL', () => FieldType.EMAIL)
-    .with('DATE', () => FieldType.DATE)
-    .with('TEXT', () => FieldType.TEXT)
-    .with('NUMBER', () => FieldType.NUMBER)
-    .with('RADIO', () => FieldType.RADIO)
-    .with('CHECKBOX', () => FieldType.CHECKBOX)
-    .with('DROPDOWN', () => FieldType.DROPDOWN)
-    .otherwise(() => {
-      throw new AppError(AppErrorCode.INVALID_BODY, {
-        message: `Invalid field type: ${fieldTypeString}`,
-      });
-    });
-};
-
-/*
-  Transform raw field metadata from placeholder format to schema format.
-  Users should provide properly capitalized property names (e.g., readOnly, fontSize, textAlign).
-  Converts string values to proper types (booleans, numbers).
-*/
-const parseFieldMeta = (
-  rawFieldMeta: Record<string, string>,
-  fieldType: FieldType,
-): Record<string, unknown> | undefined => {
-  if (fieldType === FieldType.SIGNATURE || fieldType === FieldType.FREE_SIGNATURE) {
-    return;
-  }
-
-  if (Object.keys(rawFieldMeta).length === 0) {
-    return;
-  }
-
-  const fieldTypeString = String(fieldType).toLowerCase();
-
-  const parsedFieldMeta: Record<string, boolean | number | string> = {
-    type: fieldTypeString,
-  };
-
-  /*
-    rawFieldMeta is an object with string keys and string values.
-    It contains string values because the PDF parser returns the values as strings.
-
-    E.g. { required: 'true', fontSize: '12', maxValue: '100', minValue: '0', characterLimit: '100' }
-  */
-  const rawFieldMetaEntries = Object.entries(rawFieldMeta);
-
-  for (const entry of rawFieldMetaEntries) {
-    const [key, value] = entry;
-
-    if (key === 'readOnly' || key === 'required') {
-      parsedFieldMeta[key] = value === 'true';
-    } else if (
-      key === 'fontSize' ||
-      key === 'maxValue' ||
-      key === 'minValue' ||
-      key === 'characterLimit'
-    ) {
-      const numValue = Number(value);
-
-      if (!Number.isNaN(numValue)) {
-        parsedFieldMeta[key] = numValue;
-      }
-    } else {
-      parsedFieldMeta[key] = value;
-    }
-  }
-
-  return parsedFieldMeta;
-};
-
-export const extractPlaceholdersFromPDF = async (pdf: Buffer): Promise<PlaceholderInfo[]> => {
-  return new Promise((resolve, reject) => {
-    const parser = new PDFParser(null, true);
-
-    parser.on('pdfParser_dataError', (errData) => {
-      reject(errData);
-    });
-
-    parser.on('pdfParser_dataReady', (pdfData) => {
-      const placeholders: PlaceholderInfo[] = [];
-
-      pdfData.Pages.forEach((page, pageIndex) => {
-        /*
-          pdf2json returns the PDF page content as an array of characters.
-          We need to concatenate the characters to get the full text.
-          We also need to get the position of the text so we can place the placeholders in the correct position.
-          
-          Page dimensions from PDF2JSON are in "page units" (relative coordinates)
-        */
-        const pageWidth = page.Width;
-        const pageHeight = page.Height;
-
-        let pageText = '';
-        const textPositions: TextPosition[] = [];
-        const charIndexToTextPos: CharIndexMapping[] = [];
-
-        page.Texts.forEach((text) => {
-          /*
-            R is an array that contains objects with each character.
-            The decodedText contains only the character, without any other information.
-
-            textPositions stores each character and its position on the page.
-          */
-          const decodedText = text.R.map((run) => decodeURIComponent(run.T)).join('');
-
-          for (let i = 0; i < decodedText.length; i++) {
-            charIndexToTextPos.push({
-              textPosIndex: textPositions.length,
-            });
-          }
-
-          pageText += decodedText;
-
-          textPositions.push({
-            text: decodedText,
-            x: text.x,
-            y: text.y,
-            w: text.w || 0,
-          });
-        });
-
-        const placeholderMatches = pageText.matchAll(/{{([^}]+)}}/g);
-
-        for (const match of placeholderMatches) {
-          const placeholder = match[0];
-          const placeholderData = match[1].split(',').map((part) => part.trim());
-
-          const [fieldTypeString, recipient, ...fieldMetaData] = placeholderData;
-
-          const rawFieldMeta = Object.fromEntries(fieldMetaData.map((meta) => meta.split('=')));
-
-          const fieldType = parseFieldType(fieldTypeString);
-          const parsedFieldMeta = parseFieldMeta(rawFieldMeta, fieldType);
-
-          const fieldAndMeta: TFieldAndMeta = ZFieldAndMetaSchema.parse({
-            type: fieldType,
-            fieldMeta: parsedFieldMeta,
-          });
-
-          /*
-            Find the position of where the placeholder starts in the text
-
-            Then find the position of where the placeholder ends in the text by adding the length of the placeholder to the index of the placeholder.
-          */
-          const matchIndex = match.index;
-          const placeholderLength = placeholder.length;
-          const placeholderEndIndex = matchIndex + placeholderLength;
-
-          const startCharInfo = charIndexToTextPos[matchIndex];
-          const endCharInfo = charIndexToTextPos[placeholderEndIndex - 1];
-
-          if (!startCharInfo || !endCharInfo) {
-            console.error('Could not find text position for placeholder', placeholder);
-
-            return;
-          }
-
-          const startTextPos = textPositions[startCharInfo.textPosIndex];
-          const endTextPos = textPositions[endCharInfo.textPosIndex];
-
-          /* 
-            PDF2JSON coordinates - these are in "page units" (relative coordinates)
-            Calculate width as the distance from start to end, plus a portion of the last character's width
-            Use 10% of the last character width to avoid extending too far beyond the placeholder
-          */
-          const x = startTextPos.x;
-          const y = startTextPos.y;
-          const width = endTextPos.x + endTextPos.w * 0.1 - startTextPos.x;
-
-          placeholders.push({
-            placeholder,
-            recipient,
-            fieldAndMeta,
-            page: pageIndex + 1,
-            x,
-            y,
-            width,
-            height: 1,
-            pageWidth,
-            pageHeight,
-          });
-        }
-      });
-
-      resolve(placeholders);
-    });
-
-    parser.parseBuffer(pdf);
-  });
-};
-
-export const replacePlaceholdersInPDF = async (pdf: Buffer): Promise<Buffer> => {
-  const placeholders = await extractPlaceholdersFromPDF(pdf);
-
-  const pdfDoc = await PDFDocument.load(new Uint8Array(pdf));
-  const pages = pdfDoc.getPages();
-
-  for (const placeholder of placeholders) {
-    const pageIndex = placeholder.page - 1;
-    const page = pages[pageIndex];
-
-    const { width: pdfLibPageWidth, height: pdfLibPageHeight } = getPageSize(page);
-
-    /*
-      Convert PDF2JSON coordinates to pdf-lib coordinates:
-      
-      PDF2JSON uses relative "page units":
-      - x, y, width, height are in page units
-      - Page dimensions (Width, Height) are also in page units
-      
-      pdf-lib uses absolute points (1 point = 1/72 inch):
-      - Need to convert from page units to points
-      - Y-axis in pdf-lib is bottom-up (origin at bottom-left)
-      - Y-axis in PDF2JSON is top-down (origin at top-left)
-      
-      Conversion formulas:
-      - x_points = (x / pageWidth) * pdfLibPageWidth
-      - y_points = pdfLibPageHeight - ((y / pageHeight) * pdfLibPageHeight)
-      - width_points = (width / pageWidth) * pdfLibPageWidth
-      - height_points = (height / pageHeight) * pdfLibPageHeight
-    */
-
-    const xPoints = (placeholder.x / placeholder.pageWidth) * pdfLibPageWidth;
-    const yPoints = pdfLibPageHeight - (placeholder.y / placeholder.pageHeight) * pdfLibPageHeight;
-    const widthPoints = (placeholder.width / placeholder.pageWidth) * pdfLibPageWidth;
-    const heightPoints = (placeholder.height / placeholder.pageHeight) * pdfLibPageHeight;
-
-    page.drawRectangle({
-      x: xPoints,
-      y: yPoints - heightPoints, // Adjust for height since y is at baseline
-      width: widthPoints,
-      height: heightPoints,
-      color: rgb(1, 1, 1),
-      borderColor: rgb(1, 1, 1),
-      borderWidth: 2,
-    });
-  }
-
-  const modifiedPdfBytes = await pdfDoc.save();
-
-  return Buffer.from(modifiedPdfBytes);
-};
-
-const extractRecipientPlaceholder = (
-  placeholder: string,
-): { email: string; recipientIndex: number } => {
-  const indexMatch = placeholder.match(/^r(\d+)$/i);
-
-  if (!indexMatch) {
-    throw new AppError(AppErrorCode.INVALID_BODY, {
-      message: `Invalid recipient placeholder format: ${placeholder}. Expected format: r1, r2, r3, etc.`,
-    });
-  }
-
-  return {
-    email: `recipient.${indexMatch[1]}@documenso.com`,
-    recipientIndex: Number(indexMatch[1]),
-  };
-};
-
-export const insertFieldsFromPlaceholdersInPDF = async (
-  pdf: Buffer,
-  userId: number,
-  teamId: number,
-  envelopeId: EnvelopeIdOptions,
-  requestMetadata: ApiRequestMetadata,
-): Promise<Buffer> => {
-  const placeholders = await extractPlaceholdersFromPDF(pdf);
-
-  if (placeholders.length === 0) {
-    return pdf;
-  }
-
-  /*
-    A structure that maps the recipient email to the recipient index.
-    Example: 'recipient.1@documenso.com' => 1
-  */
-  const recipientEmailToIndex = new Map<string, number>();
-
-  for (const placeholder of placeholders) {
-    const { email, recipientIndex } = extractRecipientPlaceholder(placeholder.recipient);
-
-    recipientEmailToIndex.set(email, recipientIndex);
-  }
-
-  /*
-    Create a list of recipients to create.
-    Example: [{ email: 'recipient.1@documenso.com', name: 'Recipient 1', role: 'SIGNER', signingOrder: 1 }]
-  */
-  const recipientsToCreate = Array.from(
-    recipientEmailToIndex.entries(),
-    ([email, recipientIndex]) => {
-      const placeholderInfo = generateRecipientPlaceholder(recipientIndex);
-
-      return {
-        email,
-        name: placeholderInfo.name,
-        role: RecipientRole.SIGNER,
-        signingOrder: recipientIndex,
-      };
-    },
-  );
-
-  const { envelopeWhereInput } = await getEnvelopeWhereInput({
-    id: envelopeId,
-    userId,
-    teamId,
-    type: null,
-  });
-
-  const envelope = await prisma.envelope.findFirst({
-    where: envelopeWhereInput,
-    select: {
-      id: true,
-      type: true,
-      secondaryId: true,
-    },
-  });
-
-  if (!envelope) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Envelope not found',
-    });
-  }
-
-  let createdRecipients: Pick<Recipient, 'id' | 'email'>[];
-
-  if (envelope.type === EnvelopeType.DOCUMENT) {
-    const { recipients } = await createDocumentRecipients({
-      userId,
-      teamId,
-      id: envelopeId,
-      recipients: recipientsToCreate,
-      requestMetadata,
-    });
-
-    createdRecipients = recipients;
-  } else if (envelope.type === EnvelopeType.TEMPLATE) {
-    const templateId =
-      envelopeId.type === 'templateId'
-        ? envelopeId.id
-        : mapSecondaryIdToTemplateId(envelope.secondaryId);
-
-    const { recipients } = await createTemplateRecipients({
-      userId,
-      teamId,
-      templateId,
-      recipients: recipientsToCreate,
-    });
-
-    createdRecipients = recipients;
-  } else {
-    throw new AppError(AppErrorCode.INVALID_BODY, {
-      message: `Invalid envelope type: ${envelope.type}`,
-    });
-  }
-
-  const fieldsToCreate: FieldToCreate[] = [];
-
-  for (const placeholder of placeholders) {
-    /*
-      Convert PDF2JSON coordinates to percentage-based coordinates (0-100)
-      The UI expects positionX and positionY as percentages, not absolute points
-      PDF2JSON uses relative coordinates: x/pageWidth and y/pageHeight give us the percentage
-    */
-    const xPercent = (placeholder.x / placeholder.pageWidth) * 100;
-    const yPercent = (placeholder.y / placeholder.pageHeight) * 100;
-
-    const widthPercent = (placeholder.width / placeholder.pageWidth) * 100;
-    const heightPercent = (placeholder.height / placeholder.pageHeight) * 100;
-
-    const { email } = extractRecipientPlaceholder(placeholder.recipient);
-    const normalizedEmail = email.toLowerCase();
-    const recipient = createdRecipients.find((r) => r.email.toLowerCase() === normalizedEmail);
-
-    if (!recipient) {
-      throw new AppError(AppErrorCode.INVALID_BODY, {
-        message: `Could not find recipient ID for placeholder: ${placeholder.placeholder}`,
-      });
-    }
-
-    const recipientId = recipient.id;
-
-    // Default height percentage if too small (use 2% as a reasonable default)
-    const finalHeightPercent = heightPercent > 0.01 ? heightPercent : 2;
-
-    fieldsToCreate.push({
-      ...placeholder.fieldAndMeta,
-      recipientId,
-      pageNumber: placeholder.page,
-      pageX: xPercent,
-      pageY: yPercent,
-      width: widthPercent,
-      height: finalHeightPercent,
-    });
-  }
-
-  await createEnvelopeFields({
-    userId,
-    teamId,
-    id: envelopeId,
-    fields: fieldsToCreate,
-    requestMetadata,
-  });
-
-  return pdf;
-};

packages/lib/server-only/pdf/normalize-pdf.ts

@@ -1,6 +1,5 @@
 import { PDFDocument } from '@cantoo/pdf-lib';
 
-import { replacePlaceholdersInPDF } from './auto-place-fields';
 import { flattenAnnotations } from './flatten-annotations';
 import { flattenForm, removeOptionalContentGroups } from './flatten-form';
 
@@ -14,7 +13,6 @@ export const normalizePdf = async (pdf: Buffer) => {
   removeOptionalContentGroups(pdfDoc);
   await flattenForm(pdfDoc);
   flattenAnnotations(pdfDoc);
-  const pdfWithoutPlaceholders = await replacePlaceholdersInPDF(pdf);
 
-  return pdfWithoutPlaceholders;
+  return Buffer.from(await pdfDoc.save());
 };

packages/lib/server-only/template/create-document-from-direct-template.ts

@@ -3,6 +3,7 @@ import { createElement } from 'react';
 import { msg } from '@lingui/core/macro';
 import type { Field, Signature } from '@prisma/client';
 import {
+  DocumentSigningOrder,
   DocumentSource,
   DocumentStatus,
   EnvelopeType,
@@ -26,7 +27,7 @@ import type { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/f
 import { getI18nInstance } from '../../client-only/providers/i18n-server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
 import { AppError, AppErrorCode } from '../../errors/app-error';
-import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import { DOCUMENT_AUDIT_LOG_TYPE, RECIPIENT_DIFF_TYPE } from '../../types/document-audit-logs';
 import type { TRecipientActionAuthTypes } from '../../types/document-auth';
 import { DocumentAccessAuth, ZRecipientAuthOptionsSchema } from '../../types/document-auth';
 import { ZFieldMetaSchema } from '../../types/field-meta';
@@ -68,6 +69,10 @@ export type CreateDocumentFromDirectTemplateOptions = {
     name?: string;
     email: string;
   };
+  nextSigner?: {
+    email: string;
+    name: string;
+  };
 };
 
 type CreatedDirectRecipientField = {
@@ -92,6 +97,7 @@ export const createDocumentFromDirectTemplate = async ({
   directTemplateExternalId,
   signedFieldValues,
   templateUpdatedAt,
+  nextSigner,
   requestMetadata,
   user,
 }: CreateDocumentFromDirectTemplateOptions): Promise<TCreateDocumentFromDirectTemplateResponse> => {
@@ -128,6 +134,17 @@ export const createDocumentFromDirectTemplate = async ({
     throw new AppError(AppErrorCode.INVALID_REQUEST, { message: 'Invalid or missing template' });
   }
 
+  if (
+    nextSigner &&
+    (!directTemplateEnvelope.documentMeta?.allowDictateNextSigner ||
+      directTemplateEnvelope.documentMeta?.signingOrder !== DocumentSigningOrder.SEQUENTIAL)
+  ) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, {
+      message:
+        'You need to enable allowDictateNextSigner and sequential signing to dictate the next signer',
+    });
+  }
+
   const directTemplateEnvelopeLegacyId = mapSecondaryIdToTemplateId(
     directTemplateEnvelope.secondaryId,
   );
@@ -630,6 +647,77 @@ export const createDocumentFromDirectTemplate = async ({
       }),
     ];
 
+    if (nextSigner) {
+      const pendingRecipients = await tx.recipient.findMany({
+        select: {
+          id: true,
+          signingOrder: true,
+          name: true,
+          email: true,
+          role: true,
+        },
+        where: {
+          envelopeId: createdEnvelope.id,
+          signingStatus: {
+            not: SigningStatus.SIGNED,
+          },
+          role: {
+            not: RecipientRole.CC,
+          },
+        },
+        // Composite sort so our next recipient is always the one with the lowest signing order or id
+        // if there is a tie.
+        orderBy: [{ signingOrder: { sort: 'asc', nulls: 'last' } }, { id: 'asc' }],
+      });
+
+      const nextRecipient = pendingRecipients[0];
+
+      if (nextRecipient) {
+        auditLogsToCreate.push(
+          createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
+            envelopeId: createdEnvelope.id,
+            user: {
+              name: user?.name || directRecipientName || '',
+              email: user?.email || directRecipientEmail,
+            },
+            metadata: requestMetadata,
+            data: {
+              recipientEmail: nextRecipient.email,
+              recipientName: nextRecipient.name,
+              recipientId: nextRecipient.id,
+              recipientRole: nextRecipient.role,
+              changes: [
+                {
+                  type: RECIPIENT_DIFF_TYPE.NAME,
+                  from: nextRecipient.name,
+                  to: nextSigner.name,
+                },
+                {
+                  type: RECIPIENT_DIFF_TYPE.EMAIL,
+                  from: nextRecipient.email,
+                  to: nextSigner.email,
+                },
+              ],
+            },
+          }),
+        );
+
+        await tx.recipient.update({
+          where: { id: nextRecipient.id },
+          data: {
+            sendStatus: SendStatus.SENT,
+            ...(nextSigner && documentMeta?.allowDictateNextSigner
+              ? {
+                  name: nextSigner.name,
+                  email: nextSigner.email,
+                }
+              : {}),
+          },
+        });
+      }
+    }
+
     await tx.documentAuditLog.createMany({
       data: auditLogsToCreate,
     });

packages/lib/universal/field-renderer/render-checkbox-field.ts

@@ -62,16 +62,15 @@ export const renderCheckboxFieldElement = (
     const rectWidth = fieldRect.width() * groupScaleX;
     const rectHeight = fieldRect.height() * groupScaleY;
 
-    // Todo: Envelopes - check sorting more than 10
-    // arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
-
     const squares = fieldGroup
       .find('.checkbox-square')
-      .sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
     const checkmarks = fieldGroup
       .find('.checkbox-checkmark')
-      .sort((a, b) => a.id().localeCompare(b.id()));
-    const text = fieldGroup.find('.checkbox-text').sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
+    const text = fieldGroup
+      .find('.checkbox-text')
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
 
     const groupedItems = squares.map((square, i) => ({
       squareElement: square,

packages/lib/universal/field-renderer/render-field.ts

@@ -8,9 +8,9 @@ import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import type { TFieldMetaSchema } from '../../types/field-meta';
 import { renderCheckboxFieldElement } from './render-checkbox-field';
 import { renderDropdownFieldElement } from './render-dropdown-field';
+import { renderGenericTextFieldElement } from './render-generic-text-field';
 import { renderRadioFieldElement } from './render-radio-field';
 import { renderSignatureFieldElement } from './render-signature-field';
-import { renderTextFieldElement } from './render-text-field';
 
 export const MIN_FIELD_HEIGHT_PX = 12;
 export const MIN_FIELD_WIDTH_PX = 36;
@@ -43,9 +43,9 @@ type RenderFieldOptions = {
    *
    * @default 'edit'
    *
-   * - `edit` - The field is rendered in edit mode.
-   * - `sign` - The field is rendered in sign mode. No interactive elements.
-   * - `export` - The field is rendered in export mode. No backgrounds, interactive elements, etc.
+   * - `edit` - The field is rendered in editor page.
+   * - `sign` - The field is rendered for the signing page.
+   * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
    */
   mode: 'edit' | 'sign' | 'export';
 
@@ -76,10 +76,21 @@ export const renderField = ({
   };
 
   return match(field.type)
-    .with(FieldType.TEXT, () => renderTextFieldElement(field, options))
+    .with(
+      FieldType.INITIALS,
+      FieldType.NAME,
+      FieldType.EMAIL,
+      FieldType.DATE,
+      FieldType.TEXT,
+      FieldType.NUMBER,
+      () => renderGenericTextFieldElement(field, options),
+    )
     .with(FieldType.CHECKBOX, () => renderCheckboxFieldElement(field, options))
     .with(FieldType.RADIO, () => renderRadioFieldElement(field, options))
     .with(FieldType.DROPDOWN, () => renderDropdownFieldElement(field, options))
     .with(FieldType.SIGNATURE, () => renderSignatureFieldElement(field, options))
-    .otherwise(() => renderTextFieldElement(field, options)); // Todo: Envelopes
+    .with(FieldType.FREE_SIGNATURE, () => {
+      throw new Error('Free signature fields are not supported');
+    })
+    .exhaustive();
 };

packages/lib/universal/field-renderer/render-generic-text-field.ts

@@ -12,6 +12,8 @@ import {
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 import { calculateFieldPosition } from './field-renderer';
 
+const DEFAULT_TEXT_ALIGN = 'left';
+
 const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOptions): Konva.Text => {
   const { pageWidth, pageHeight, mode = 'edit', pageLayer, translations } = options;
 
@@ -31,8 +33,8 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   // Calculate text positioning based on alignment
   const textX = 0;
   const textY = 0;
-  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || 'left';
-  let textVerticalAlign: 'top' | 'middle' | 'bottom' = 'top';
+  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || DEFAULT_TEXT_ALIGN;
+  const textVerticalAlign: 'top' | 'middle' | 'bottom' = 'middle';
   const textFontSize = textMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
   const textPadding = 10;
 
@@ -40,51 +42,33 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
 
   // Handle edit mode.
   if (mode === 'edit') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    } else if (textMeta?.text) {
+    if (textMeta?.text) {
       textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
+    } else if (textMeta?.label) {
+      textToRender = textMeta.label;
+    } else {
+      // Show field name which is centered for the edit mode if no label/text is avaliable.
+      textToRender = fieldTypeName;
+      textAlign = 'center';
     }
   }
 
   // Handle sign mode.
   if (mode === 'sign' || mode === 'export') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    }
-
-    if (textMeta?.text) {
-      textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
+    if (!field.inserted) {
+      if (textMeta?.text) {
+        textToRender = textMeta.text;
+      } else if (textMeta?.label) {
+        textToRender = textMeta.label;
+      } else if (mode === 'sign') {
+        // Only show the field name in sign mode if no text/label is avaliable.
+        textToRender = fieldTypeName;
+        textAlign = 'center';
       }
     }
 
     if (field.inserted) {
       textToRender = field.customText;
-      textAlign = textMeta?.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta?.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
     }
   }
 
@@ -106,7 +90,7 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   return fieldText;
 };
 
-export const renderTextFieldElement = (
+export const renderGenericTextFieldElement = (
   field: FieldToRender,
   options: RenderFieldElementOptions,
 ) => {

packages/prisma/seed/templates.ts

@@ -28,6 +28,7 @@ type SeedTemplateOptions = {
   title?: string;
   userId: number;
   teamId: number;
+  internalVersion?: 1 | 2;
   createTemplateOptions?: Partial<Prisma.EnvelopeUncheckedCreateInput>;
 };
 
@@ -167,7 +168,7 @@ export const seedDirectTemplate = async (options: SeedTemplateOptions) => {
     data: {
       id: prefixedId('envelope'),
       secondaryId: templateId.formattedTemplateId,
-      internalVersion: 1,
+      internalVersion: options.internalVersion ?? 1,
       type: EnvelopeType.TEMPLATE,
       title,
       envelopeItems: {
@@ -184,6 +185,7 @@ export const seedDirectTemplate = async (options: SeedTemplateOptions) => {
       teamId,
       recipients: {
         create: {
+          signingOrder: 1,
           email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
           name: DIRECT_TEMPLATE_RECIPIENT_NAME,
           token: Math.random().toString().slice(2, 7),

packages/trpc/server/envelope-router/sign-envelope-field.ts

@@ -133,6 +133,49 @@ export const signEnvelopeFieldRoute = procedure
 
     const insertionValues = extractFieldInsertionValues({ fieldValue, field, documentMeta });
 
+    // Early return for uninserting fields.
+    if (!insertionValues.inserted) {
+      return await prisma.$transaction(async (tx) => {
+        const updatedField = await tx.field.update({
+          where: {
+            id: field.id,
+          },
+          data: {
+            customText: '',
+            inserted: false,
+          },
+        });
+
+        await tx.signature.deleteMany({
+          where: {
+            fieldId: field.id,
+          },
+        });
+
+        if (recipient.role !== RecipientRole.ASSISTANT) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
+              envelopeId: envelope.id,
+              user: {
+                name: recipient.name,
+                email: recipient.email,
+              },
+              requestMetadata: metadata.requestMetadata,
+              data: {
+                field: field.type,
+                fieldId: field.secondaryId,
+              },
+            }),
+          });
+        }
+
+        return {
+          signedField: updatedField,
+        };
+      });
+    }
+
     const derivedRecipientActionAuth = await validateFieldAuth({
       documentAuthOptions: envelope.authOptions,
       recipient,

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

@@ -519,6 +519,7 @@ export const templateRouter = router({
         directTemplateExternalId,
         signedFieldValues,
         templateUpdatedAt,
+        nextSigner,
       } = input;
 
       ctx.logger.info({
@@ -541,6 +542,7 @@ export const templateRouter = router({
               email: ctx.user.email,
             }
           : undefined,
+        nextSigner,
         requestMetadata: ctx.metadata,
       });
     }),

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

@@ -90,6 +90,12 @@ export const ZCreateDocumentFromDirectTemplateRequestSchema = z.object({
   directTemplateExternalId: z.string().optional(),
   signedFieldValues: z.array(ZSignFieldWithTokenMutationSchema),
   templateUpdatedAt: z.date(),
+  nextSigner: z
+    .object({
+      email: z.string().email().max(254),
+      name: z.string().min(1).max(255),
+    })
+    .optional(),
 });
 
 export const ZCreateDocumentFromTemplateRequestSchema = z.object({