chore: fix conflicts and update branch

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

.github/workflows/ci.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Cache Docker layers
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}

.github/workflows/codeql-analysis.yml

@@ -33,9 +33,9 @@ jobs:
       - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.github/workflows/e2e-tests.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Run Playwright tests
         run: npm run ci
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: test-results

.github/workflows/issue-assignee-check.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Check Assigned User's Issue Count
         id: parse-comment
-        uses: actions/github-script@v5
+        uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/issue-labeler.yml

@@ -0,0 +1,25 @@
+name: Auto Label Assigned Issues
+
+on:
+  issues:
+    types: [assigned]
+
+jobs:
+  label-when-assigned:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Label issue
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const issue = context.issue;
+            // To run only on issues and not on PR
+            if (github.context.payload.issue.pull_request === undefined) {
+              const labelResponse = await github.rest.issues.addLabels({
+                owner: issue.owner,
+                repo: issue.repo,
+                issue_number: issue.number,
+                labels: ['status: assigned']
+              });
+            }

.github/workflows/issue-opened.yml

@@ -17,5 +17,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              labels: ["needs triage"]
+              labels: ["status: triage"]
             })

.github/workflows/pr-review-reminder.yml

@@ -2,14 +2,14 @@ name: 'PR Review Reminder'
 
 on:
   pull_request:
-    types: ['opened', 'reopened', 'ready_for_review', 'review_requested']
+    types: ['opened', 'ready_for_review']
 
 permissions:
   pull-requests: write
 
 jobs:
   checkPRs:
-    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'reopened' || 'ready_for_review' || 'review_requested')
+    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'ready_for_review')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/stale.yml

@@ -12,7 +12,7 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/stale@v4
+      - uses: actions/stale@v5
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-pr-stale: 90

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentDataType, Prisma } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -115,7 +115,7 @@ export const SinglePlayerClient = () => {
     }
 
     try {
-      const putFileData = await putFile(uploadedFile.file);
+      const putFileData = await putPdfFile(uploadedFile.file);
 
       const documentToken = await createSinglePlayerDocument({
         documentData: {

apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx

@@ -8,6 +8,7 @@ import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
+import { getCompletedFieldsForDocument } from '@documenso/lib/server-only/field/get-completed-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
@@ -20,6 +21,7 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentHistorySheet } from '~/components/document/document-history-sheet';
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import {
   DocumentStatus as DocumentStatusComponent,
   FRIENDLY_STATUS_MAP,
@@ -84,11 +86,16 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     documentMeta.password = securePassword;
   }
 
-  const recipients = await getRecipientsForDocument({
-    documentId,
-    teamId: team?.id,
-    userId: user.id,
-  });
+  const [recipients, completedFields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      teamId: team?.id,
+      userId: user.id,
+    }),
+    getCompletedFieldsForDocument({
+      documentId,
+    }),
+  ]);
 
   const documentWithRecipients = {
     ...document,
@@ -155,6 +162,13 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
           </CardContent>
         </Card>
 
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields
+            fields={completedFields}
+            documentMeta={document.documentMeta || undefined}
+          />
+        )}
+
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
           <div className="space-y-6">
             <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx

@@ -133,7 +133,11 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         </div>
 
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-          <DownloadCertificateButton className="mr-2" documentId={document.id} />
+          <DownloadCertificateButton
+            className="mr-2"
+            documentId={document.id}
+            documentStatus={document.status}
+          />
 
           <DownloadAuditLogButton documentId={document.id} />
         </div>

apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx

@@ -2,6 +2,7 @@
 
 import { DownloadIcon } from 'lucide-react';
 
+import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -10,11 +11,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type DownloadCertificateButtonProps = {
   className?: string;
   documentId: number;
+  documentStatus: DocumentStatus;
 };
 
 export const DownloadCertificateButton = ({
   className,
   documentId,
+  documentStatus,
 }: DownloadCertificateButtonProps) => {
   const { toast } = useToast();
 
@@ -69,6 +72,7 @@ export const DownloadCertificateButton = ({
       className={cn('w-full sm:w-auto', className)}
       loading={isLoading}
       variant="outline"
+      disabled={documentStatus !== DocumentStatus.COMPLETED}
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -10,8 +10,9 @@ import { useSession } from 'next-auth/react';
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@@ -57,7 +58,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
     try {
       setIsLoading(true);
 
-      const { type, data } = await putFile(file);
+      const { type, data } = await putPdfFile(file);
 
       const { id: documentDataId } = await createDocumentData({
         type,
@@ -83,13 +84,21 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
       });
 
       router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
-    } catch (error) {
-      console.error(error);
+    } catch (err) {
+      const error = AppError.parseError(err);
 
-      if (error instanceof TRPCClientError) {
+      console.error(err);
+
+      if (error.code === 'INVALID_DOCUMENT_FILE') {
+        toast({
+          title: 'Invalid file',
+          description: 'You cannot upload encrypted PDFs',
+          variant: 'destructive',
+        });
+      } else if (err instanceof TRPCClientError) {
         toast({
           title: 'Error',
-          description: error.message,
+          description: err.message,
           variant: 'destructive',
         });
       } else {

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -4,7 +4,14 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import type {
+  DocumentData,
+  Field,
+  Recipient,
+  Template,
+  TemplateDocumentMeta,
+  User,
+} from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -19,6 +26,8 @@ import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
 import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import { AddTemplateSettingsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-settings';
+import type { TTemplateSettingsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-settings.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type EditTemplateFormProps = {
@@ -28,11 +37,12 @@ export type EditTemplateFormProps = {
   recipients: Recipient[];
   fields: Field[];
   documentData: DocumentData;
+  documentMeta: TemplateDocumentMeta | null;
   templateRootPath: string;
 };
 
-type EditTemplateStep = 'signers' | 'fields';
-const EditTemplateSteps: EditTemplateStep[] = ['signers', 'fields'];
+type EditTemplateStep = 'settings' | 'signers' | 'fields';
+const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];
 
 export const EditTemplateForm = ({
   className,
@@ -42,22 +52,28 @@ export const EditTemplateForm = ({
   user: _user,
   documentData,
   templateRootPath,
+  documentMeta,
 }: EditTemplateFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
 
-  const [step, setStep] = useState<EditTemplateStep>('signers');
+  const [step, setStep] = useState<EditTemplateStep>('settings');
 
   const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
+    settings: {
+      title: 'Settings',
+      description: 'Configure general settings for the template.',
+      stepIndex: 1,
+    },
     signers: {
       title: 'Add Placeholders',
       description: 'Add all relevant placeholders for each recipient.',
-      stepIndex: 1,
+      stepIndex: 2,
     },
     fields: {
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
-      stepIndex: 2,
+      stepIndex: 3,
     },
   };
 
@@ -65,6 +81,8 @@ export const EditTemplateForm = ({
 
   const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation();
   const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation();
+  const { mutateAsync: setSettingsForTemplate } =
+    trpc.template.setSettingsForTemplate.useMutation();
 
   const onAddTemplatePlaceholderFormSubmit = async (
     data: TAddTemplatePlacholderRecipientsFormSchema,
@@ -87,6 +105,31 @@ export const EditTemplateForm = ({
     }
   };
 
+  const onAddTemplateSettingsFormSubmit = async (data: TTemplateSettingsFormSchema) => {
+    try {
+      const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
+      await setSettingsForTemplate({
+        templateId: template.id,
+        meta: {
+          subject,
+          message,
+          timezone,
+          dateFormat,
+          redirectUrl,
+        },
+      });
+      router.refresh();
+      setStep('signers');
+    } catch (err) {
+      console.error(err);
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating the template settings.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   const onAddFieldsFormSubmit = async (data: TAddTemplateFieldsFormSchema) => {
     try {
       await addTemplateFields({
@@ -135,12 +178,22 @@ export const EditTemplateForm = ({
             currentStep={currentDocumentFlow.stepIndex}
             setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
           >
+            <AddTemplateSettingsFormPartial
+              template={template}
+              key={recipients.length}
+              documentFlow={documentFlow.settings}
+              recipients={recipients}
+              onSubmit={onAddTemplateSettingsFormSubmit}
+              documentMeta={documentMeta}
+            />
             <AddTemplatePlaceholderRecipientsFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
+              // Todo: Add when we setup template settings.
+              isTemplateOwnerEnterprise={false}
             />
 
             <AddTemplateFieldsFormPartial

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -44,7 +44,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
     redirect(templateRootPath);
   }
 
-  const { templateDocumentData } = template;
+  const { templateDocumentData, templateDocumentMeta } = template;
 
   const [templateRecipients, templateFields] = await Promise.all([
     getRecipientsForTemplate({
@@ -58,7 +58,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
   ]);
 
   return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
       <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Templates
@@ -73,12 +73,13 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
       </div>
 
       <EditTemplateForm
-        className="mt-8"
+        className="mt-6"
         template={template}
         user={user}
         recipients={templateRecipients}
         fields={templateFields}
         documentData={templateDocumentData}
+        documentMeta={templateDocumentMeta}
         templateRootPath={templateRootPath}
       />
     </div>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -12,7 +12,7 @@ import * as z from 'zod';
 
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { base64 } from '@documenso/lib/universal/base64';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -98,7 +98,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
     const file: File = uploadedFile.file;
 
     try {
-      const { type, data } = await putFile(file);
+      const { type, data } = await putPdfFile(file);
 
       const { id: templateDocumentDataId } = await createDocumentData({
         type,

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -1,14 +1,21 @@
+import { useEffect, useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus } from 'lucide-react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { InfoIcon, Plus } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';
 
+import {
+  TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+  TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+} from '@documenso/lib/constants/template';
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { Recipient } from '@documenso/prisma/client';
-import { RecipientRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogClose,
@@ -19,24 +26,59 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-const ZAddRecipientsForNewDocumentSchema = z.object({
-  recipients: z.array(
-    z.object({
-      email: z.string().email(),
-      name: z.string(),
-      role: z.nativeEnum(RecipientRole),
-    }),
-  ),
-});
+const ZAddRecipientsForNewDocumentSchema = z
+  .object({
+    sendDocument: z.boolean(),
+    recipients: z.array(
+      z.object({
+        id: z.number(),
+        email: z.string().email(),
+        name: z.string(),
+      }),
+    ),
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, recipients] of items.recipients.entries()) {
+      const email = recipients.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', firstFoundIndex, 'email'],
+      });
+    }
+  });
 
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
@@ -54,35 +96,33 @@ export function UseTemplateDialog({
   const router = useRouter();
   const { toast } = useToast();
 
+  const [open, setOpen] = useState(false);
+
   const team = useOptionalCurrentTeam();
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddRecipientsForNewDocumentSchema>({
+  const form = useForm<TAddRecipientsForNewDocumentSchema>({
     resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
     defaultValues: {
-      recipients:
-        recipients.length > 0
-          ? recipients.map((recipient) => ({
-              nativeId: recipient.id,
-              formId: String(recipient.id),
-              name: recipient.name,
-              email: recipient.email,
-              role: recipient.role,
-            }))
-          : [
-              {
-                name: '',
-                email: '',
-                role: RecipientRole.SIGNER,
-              },
-            ],
+      sendDocument: false,
+      recipients: recipients.map((recipient) => {
+        const isRecipientEmailPlaceholder = recipient.email.match(
+          TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+        );
+
+        const isRecipientNamePlaceholder = recipient.name.match(
+          TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+        );
+
+        return {
+          id: recipient.id,
+          name: !isRecipientNamePlaceholder ? recipient.name : '',
+          email: !isRecipientEmailPlaceholder ? recipient.email : '',
+        };
+      }),
     },
   });
 
-  const { mutateAsync: createDocumentFromTemplate, isLoading: isCreatingDocumentFromTemplate } =
+  const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();
 
   const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
@@ -91,6 +131,7 @@ export function UseTemplateDialog({
         templateId,
         teamId: team?.id,
         recipients: data.recipients,
+        sendDocument: data.sendDocument,
       });
 
       toast({
@@ -101,23 +142,35 @@ export function UseTemplateDialog({
 
       router.push(`${documentRootPath}/${id}`);
     } catch (err) {
-      toast({
+      const error = AppError.parseError(err);
+
+      const toastPayload: Toast = {
         title: 'Error',
         description: 'An error occurred while creating document from template.',
         variant: 'destructive',
-      });
+      };
+
+      if (error.code === 'DOCUMENT_SEND_FAILED') {
+        toastPayload.description = 'The document was created but could not be sent to recipients.';
+      }
+
+      toast(toastPayload);
     }
   };
 
-  const onCreateDocumentFromTemplate = handleSubmit(onSubmit);
-
   const { fields: formRecipients } = useFieldArray({
-    control,
+    control: form.control,
     name: 'recipients',
   });
 
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>
         <Button className="cursor-pointer">
           <Plus className="-ml-1 mr-2 h-4 w-4" />
@@ -126,121 +179,110 @@ export function UseTemplateDialog({
       </DialogTrigger>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Document Recipients</DialogTitle>
-          <DialogDescription>Add the recipients to create the template with.</DialogDescription>
+          <DialogTitle>Create document from template</DialogTitle>
+          <DialogDescription>
+            {recipients.length === 0
+              ? 'A draft document will be created'
+              : 'Add the recipients to create the document with'}
+          </DialogDescription>
         </DialogHeader>
-        <div className="flex flex-col space-y-4">
-          {formRecipients.map((recipient, index) => (
-            <div
-              key={recipient.id}
-              data-native-id={recipient.id}
-              className="flex flex-wrap items-end gap-x-4"
-            >
-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-email`}>
-                  Email
-                  <span className="text-destructive ml-1 inline-block font-medium">*</span>
-                </Label>
 
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.email`}
-                  render={({ field }) => (
-                    <Input
-                      id={`recipient-${recipient.id}-email`}
-                      type="email"
-                      className="bg-background mt-2"
-                      disabled={isSubmitting}
-                      {...field}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                {formRecipients.map((recipient, index) => (
+                  <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.email`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel required>Email</FormLabel>}
+
+                          <FormControl>
+                            <Input {...field} placeholder={recipients[index].email || 'Email'} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  )}
-                />
-              </div>
 
-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-name`}>Name</Label>
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.name`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel>Name</FormLabel>}
 
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.name`}
-                  render={({ field }) => (
-                    <Input
-                      id={`recipient-${recipient.id}-name`}
-                      type="text"
-                      className="bg-background mt-2"
-                      disabled={isSubmitting}
-                      {...field}
+                          <FormControl>
+                            <Input {...field} placeholder={recipients[index].name || 'Name'} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  )}
-                />
+                  </div>
+                ))}
               </div>
 
-              <div className="w-[60px]">
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.role`}
-                  render={({ field: { value, onChange } }) => (
-                    <Select value={value} onValueChange={(x) => onChange(x)}>
-                      <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
+              {recipients.length > 0 && (
+                <div className="mt-4 flex flex-row items-center">
+                  <FormField
+                    control={form.control}
+                    name="sendDocument"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-row items-center">
+                          <Checkbox
+                            id="sendDocument"
+                            className="h-5 w-5"
+                            checkClassName="dark:text-white text-primary"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
 
-                      <SelectContent className="" align="end">
-                        <SelectItem value={RecipientRole.SIGNER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                            Signer
-                          </div>
-                        </SelectItem>
+                          <label
+                            className="text-muted-foreground ml-2 flex items-center text-sm"
+                            htmlFor="sendDocument"
+                          >
+                            Send document
+                            <Tooltip>
+                              <TooltipTrigger type="button">
+                                <InfoIcon className="mx-1 h-4 w-4" />
+                              </TooltipTrigger>
 
-                        <SelectItem value={RecipientRole.CC}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                            Receives copy
-                          </div>
-                        </SelectItem>
+                              <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                <p>
+                                  The document will be immediately sent to recipients if this is
+                                  checked.
+                                </p>
 
-                        <SelectItem value={RecipientRole.APPROVER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                            Approver
-                          </div>
-                        </SelectItem>
+                                <p>Otherwise, the document will be created as a draft.</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </label>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              )}
 
-                        <SelectItem value={RecipientRole.VIEWER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                            Viewer
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-              </div>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Close
+                  </Button>
+                </DialogClose>
 
-              <div className="w-full">
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.email} />
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.name} />
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <DialogFooter className="justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-
-          <Button
-            type="button"
-            loading={isCreatingDocumentFromTemplate}
-            disabled={isCreatingDocumentFromTemplate}
-            onClick={onCreateDocumentFromTemplate}
-          >
-            Create Document
-          </Button>
-        </DialogFooter>
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {form.getValues('sendDocument') ? 'Create and send' : 'Create as draft'}
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -131,7 +131,7 @@ export default async function CompletedSigningPage({
               </div>
             ))
             .with({ deletedAt: null }, () => (
-              <div className="flex items-center mt-4 text-center text-blue-600">
+              <div className="mt-4 flex items-center text-center text-blue-600">
                 <Clock8 className="mr-2 h-5 w-5" />
                 <span className="text-sm">Waiting for others to sign</span>
               </div>

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -6,6 +6,7 @@ import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-c
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
+import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
@@ -37,7 +38,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
 
-  const [document, fields, recipient] = await Promise.all([
+  const [document, fields, recipient, completedFields] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
       userId: user?.id,
@@ -45,6 +46,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
+    getCompletedFieldsForToken({ token }),
   ]);
 
   if (
@@ -125,7 +127,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       signature={user?.email === recipient.email ? user.signature : undefined}
     >
       <DocumentAuthProvider document={document} recipient={recipient} user={user}>
-        <SigningPageView recipient={recipient} document={document} fields={fields} />
+        <SigningPageView
+          recipient={recipient}
+          document={document}
+          fields={fields}
+          completedFields={completedFields}
+        />
       </DocumentAuthProvider>
     </SigningProvider>
   );

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -4,12 +4,14 @@ import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-form
 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 { CompletedField } from '@documenso/lib/types/fields';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { FieldType, RecipientRole } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { truncateTitle } from '~/helpers/truncate-title';
 
 import { DateField } from './date-field';
@@ -23,9 +25,15 @@ export type SigningPageViewProps = {
   document: DocumentAndSender;
   recipient: Recipient;
   fields: Field[];
+  completedFields: CompletedField[];
 };
 
-export const SigningPageView = ({ document, recipient, fields }: SigningPageViewProps) => {
+export const SigningPageView = ({
+  document,
+  recipient,
+  fields,
+  completedFields,
+}: SigningPageViewProps) => {
   const truncatedTitle = truncateTitle(document.title);
 
   const { documentData, documentMeta } = document;
@@ -70,6 +78,8 @@ export const SigningPageView = ({ document, recipient, fields }: SigningPageView
         </div>
       </div>
 
+      <DocumentReadOnlyFields fields={completedFields} />
+
       <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
         {fields.map((field) =>
           match(field.type)

apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx

@@ -1,7 +1,10 @@
 import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { GetTeamTokensResponse } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,7 +26,24 @@ export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
 
   const team = await getTeamByUrl({ userId: user.id, teamUrl });
 
-  const tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
+  let tokens: GetTeamTokensResponse | null = null;
+
+  try {
+    tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
+  } catch (err) {
+    const error = AppError.parseError(err);
+
+    return (
+      <div>
+        <h3 className="text-2xl font-semibold">API Tokens</h3>
+        <p className="text-muted-foreground mt-2 text-sm">
+          {match(error.code)
+            .with(AppErrorCode.UNAUTHORIZED, () => error.message)
+            .otherwise(() => 'Something went wrong.')}
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div>

apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx

@@ -5,7 +5,7 @@ import { Button } from '@documenso/ui/primitives/button';
 export default function SignatureDisclosure() {
   return (
     <div>
-      <article className="prose">
+      <article className="prose dark:prose-invert">
         <h1>Electronic Signature Disclosure</h1>
 
         <h2>Welcome</h2>

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { useRef, useState } from 'react';
-
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { DocumentStatus, Recipient } from '@documenso/prisma/client';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
@@ -25,11 +23,6 @@ export const StackAvatarsWithTooltip = ({
   position,
   children,
 }: StackAvatarsWithTooltipProps) => {
-  const [open, setOpen] = useState(false);
-
-  const isControlled = useRef(false);
-  const isMouseOverTimeout = useRef<NodeJS.Timeout | null>(null);
-
   const waitingRecipients = recipients.filter(
     (recipient) => getRecipientType(recipient) === 'waiting',
   );
@@ -46,117 +39,74 @@ export const StackAvatarsWithTooltip = ({
     (recipient) => getRecipientType(recipient) === 'unsigned',
   );
 
-  const onMouseEnter = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    isMouseOverTimeout.current = setTimeout(() => {
-      setOpen((o) => (!o ? true : o));
-    }, 200);
-  };
-
-  const onMouseLeave = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    setTimeout(() => {
-      setOpen((o) => (o ? false : o));
-    }, 200);
-  };
-
-  const onOpenChange = (newOpen: boolean) => {
-    isControlled.current = newOpen;
-
-    setOpen(newOpen);
-  };
-
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
-      <PopoverTrigger
-        className="flex cursor-pointer"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {children || <StackAvatars recipients={recipients} />}
-      </PopoverTrigger>
-
-      <PopoverContent
-        side={position}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className="flex flex-col gap-y-5 py-2"
-      >
-        {completedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Completed</h1>
-            {completedRecipients.map((recipient: Recipient) => (
-              <div key={recipient.id} className="my-1 flex items-center gap-2">
-                <StackAvatar
-                  first={true}
-                  key={recipient.id}
-                  type={getRecipientType(recipient)}
-                  fallbackText={recipientAbbreviation(recipient)}
-                />
-                <div className="">
-                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
-                  <p className="text-muted-foreground/70 text-xs">
-                    {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-                  </p>
-                </div>
+    <PopoverHover
+      trigger={children || <StackAvatars recipients={recipients} />}
+      contentProps={{
+        className: 'flex flex-col gap-y-5 py-2',
+        side: position,
+      }}
+    >
+      {completedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Completed</h1>
+          {completedRecipients.map((recipient: Recipient) => (
+            <div key={recipient.id} className="my-1 flex items-center gap-2">
+              <StackAvatar
+                first={true}
+                key={recipient.id}
+                type={getRecipientType(recipient)}
+                fallbackText={recipientAbbreviation(recipient)}
+              />
+              <div className="">
+                <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                <p className="text-muted-foreground/70 text-xs">
+                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                </p>
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          ))}
+        </div>
+      )}
 
-        {waitingRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Waiting</h1>
-            {waitingRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient
-                key={recipient.id}
-                recipient={recipient}
-                documentStatus={documentStatus}
-              />
-            ))}
-          </div>
-        )}
+      {waitingRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Waiting</h1>
+          {waitingRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
 
-        {openedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Opened</h1>
-            {openedRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient
-                key={recipient.id}
-                recipient={recipient}
-                documentStatus={documentStatus}
-              />
-            ))}
-          </div>
-        )}
+      {openedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Opened</h1>
+          {openedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
 
-        {uncompletedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Uncompleted</h1>
-            {uncompletedRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient
-                key={recipient.id}
-                recipient={recipient}
-                documentStatus={documentStatus}
-              />
-            ))}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
+      {uncompletedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Uncompleted</h1>
+          {uncompletedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
+    </PopoverHover>
   );
 };

apps/web/src/components/document/document-read-only-fields.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from 'react';
+
+import { P, match } from 'ts-pattern';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} 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 { CompletedField } from '@documenso/lib/types/fields';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { DocumentMeta } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: CompletedField[];
+  documentMeta?: DocumentMeta;
+};
+
+export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnlyFieldsProps) => {
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              cardClassName="border-gray-100/50 !shadow-none backdrop-blur-[1px] bg-background/90"
+            >
+              <div className="absolute -right-3 -top-3">
+                <PopoverHover
+                  trigger={
+                    <Avatar className="dark:border-border h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                        {extractInitials(field.Recipient.name || field.Recipient.email)}
+                      </AvatarFallback>
+                    </Avatar>
+                  }
+                  contentProps={{
+                    className: 'flex w-fit flex-col py-2.5 text-sm',
+                  }}
+                >
+                  <p>
+                    <span className="font-semibold">
+                      {field.Recipient.name
+                        ? `${field.Recipient.name} (${field.Recipient.email})`
+                        : field.Recipient.email}{' '}
+                    </span>
+                    inserted a {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()}
+                  </p>
+
+                  <Button
+                    variant="outline"
+                    className="mt-2.5 h-6 text-xs focus:outline-none focus-visible:ring-0"
+                    onClick={() => handleHideField(field.secondaryId)}
+                  >
+                    Hide field
+                  </Button>
+                </PopoverHover>
+              </div>
+
+              <div className="text-muted-foreground break-all text-sm">
+                {match(field)
+                  .with({ type: FieldType.SIGNATURE }, (field) =>
+                    field.Signature?.signatureImageAsBase64 ? (
+                      <img
+                        src={field.Signature.signatureImageAsBase64}
+                        alt="Signature"
+                        className="h-full w-full object-contain dark:invert"
+                      />
+                    ) : (
+                      <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+                        {field.Signature?.typedSignature}
+                      </p>
+                    ),
+                  )
+                  .with(
+                    { type: P.union(FieldType.NAME, FieldType.TEXT, FieldType.EMAIL) },
+                    () => field.customText,
+                  )
+                  .with({ type: FieldType.DATE }, () =>
+                    convertToLocalSystemFormat(
+                      field.customText,
+                      documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+                      documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+                    ),
+                  )
+                  .with({ type: FieldType.FREE_SIGNATURE }, () => null)
+                  .exhaustive()}
+              </div>
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};

apps/web/src/pages/api/auth/[...nextauth].ts

@@ -2,6 +2,8 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 
 import NextAuth from 'next-auth';
 
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { prisma } from '@documenso/prisma';
@@ -18,15 +20,29 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
       error: '/signin',
     },
     events: {
-      signIn: async ({ user }) => {
-        await prisma.userSecurityAuditLog.create({
-          data: {
-            userId: user.id,
-            ipAddress,
-            userAgent,
-            type: UserSecurityAuditLogType.SIGN_IN,
-          },
-        });
+      signIn: async ({ user: { id: userId } }) => {
+        const [user] = await Promise.all([
+          await prisma.user.findFirstOrThrow({
+            where: {
+              id: userId,
+            },
+          }),
+          await prisma.userSecurityAuditLog.create({
+            data: {
+              userId,
+              ipAddress,
+              userAgent,
+              type: UserSecurityAuditLogType.SIGN_IN,
+            },
+          }),
+        ]);
+
+        // Create the Stripe customer and attach it to the user if it doesn't exist.
+        if (user.customerId === null && IS_BILLING_ENABLED()) {
+          await getStripeCustomerByUser(user).catch((err) => {
+            console.error(err);
+          });
+        }
       },
       signOut: async ({ token }) => {
         const userId = typeof token.id === 'string' ? parseInt(token.id) : token.id;

apps/web/src/pages/api/trpc/[trpc].ts

@@ -3,7 +3,7 @@ import { createTrpcContext } from '@documenso/trpc/server/context';
 import { appRouter } from '@documenso/trpc/server/router';
 
 export const config = {
-  maxDuration: 60,
+  maxDuration: 120,
   api: {
     bodyParser: {
       sizeLimit: '50mb',

package-lock.json

@@ -22,7 +22,7 @@
         "eslint-config-custom": "*",
         "husky": "^9.0.11",
         "lint-staged": "^15.2.2",
-        "playwright": "^1.43.0",
+        "playwright": "1.43.0",
         "prettier": "^2.5.1",
         "rimraf": "^5.0.1",
         "turbo": "^1.9.3"
@@ -4716,12 +4716,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz",
-      "integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==",
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
+      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.40.0"
+        "playwright": "1.43.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4745,12 +4745,12 @@
       }
     },
     "node_modules/@playwright/test/node_modules/playwright": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
-      "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
+      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.40.0"
+        "playwright-core": "1.43.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4763,9 +4763,9 @@
       }
     },
     "node_modules/@playwright/test/node_modules/playwright-core": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
-      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
+      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -24981,7 +24981,7 @@
         "next-auth": "4.24.5",
         "oslo": "^0.17.0",
         "pdf-lib": "^1.17.1",
-        "playwright": "^1.43.0",
+        "playwright": "1.43.0",
         "react": "18.2.0",
         "remeda": "^1.27.1",
         "stripe": "^12.7.0",
@@ -24989,7 +24989,7 @@
         "zod": "^3.22.4"
       },
       "devDependencies": {
-        "@playwright/browser-chromium": "^1.43.0",
+        "@playwright/browser-chromium": "1.43.0",
         "@types/luxon": "^3.3.1"
       }
     },

package.json

@@ -38,7 +38,7 @@
     "eslint-config-custom": "*",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "playwright": "^1.43.0",
+    "playwright": "1.43.0",
     "prettier": "^2.5.1",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3"

packages/api/v1/implementation.ts

@@ -19,10 +19,10 @@ import { getRecipientById } from '@documenso/lib/server-only/recipient/get-recip
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
 import { updateRecipient } from '@documenso/lib/server-only/recipient/update-recipient';
-import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
+import { createDocumentFromTemplateLegacy } from '@documenso/lib/server-only/template/create-document-from-template-legacy';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import {
   getPresignGetUrl,
   getPresignPostUrl,
@@ -229,6 +229,13 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         requestMetadata: extractNextApiRequestMetadata(args.req),
       });
 
+      await upsertDocumentMeta({
+        documentId: document.id,
+        userId: user.id,
+        ...body.meta,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+
       const recipients = await setRecipientsForDocument({
         userId: user.id,
         teamId: team?.id,
@@ -279,7 +286,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
     const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
 
-    const document = await createDocumentFromTemplate({
+    const document = await createDocumentFromTemplateLegacy({
       templateId,
       userId: user.id,
       teamId: team?.id,
@@ -296,7 +303,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         formValues: body.formValues,
       });
 
-      const newDocumentData = await putFile({
+      const newDocumentData = await putPdfFile({
         name: fileName,
         type: 'application/pdf',
         arrayBuffer: async () => Promise.resolve(prefilled),
@@ -324,10 +331,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       await upsertDocumentMeta({
         documentId: document.id,
         userId: user.id,
-        subject: body.meta.subject,
-        message: body.meta.message,
-        dateFormat: body.meta.dateFormat,
-        timezone: body.meta.timezone,
+        ...body.meta,
         requestMetadata: extractNextApiRequestMetadata(args.req),
       });
     }

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

@@ -189,7 +189,14 @@ test('[TEMPLATES]: use template', async ({ page }) => {
 
   // Use personal template.
   await page.getByRole('button', { name: 'Use Template' }).click();
-  await page.getByRole('button', { name: 'Create Document' }).click();
+
+  // Enter template values.
+  await page.getByPlaceholder('recipient.1@documenso.com').click();
+  await page.getByPlaceholder('recipient.1@documenso.com').fill(teamMemberUser.email);
+  await page.getByPlaceholder('Recipient 1').click();
+  await page.getByPlaceholder('Recipient 1').fill('name');
+
+  await page.getByRole('button', { name: 'Create as draft' }).click();
   await page.waitForURL(/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL('/documents');
@@ -200,7 +207,14 @@ test('[TEMPLATES]: use template', async ({ page }) => {
 
   // Use team template.
   await page.getByRole('button', { name: 'Use Template' }).click();
-  await page.getByRole('button', { name: 'Create Document' }).click();
+
+  // Enter template values.
+  await page.getByPlaceholder('recipient.1@documenso.com').click();
+  await page.getByPlaceholder('recipient.1@documenso.com').fill(teamMemberUser.email);
+  await page.getByPlaceholder('Recipient 1').click();
+  await page.getByPlaceholder('Recipient 1').fill('name');
+
+  await page.getByRole('button', { name: 'Create as draft' }).click();
   await page.waitForURL(/\/t\/.+\/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL(`/t/${team.url}/documents`);

packages/ee/server-only/stripe/webhook/on-early-adopters-checkout.ts

@@ -5,7 +5,7 @@ import { sealDocument } from '@documenso/lib/server-only/document/seal-document'
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { alphaid, nanoid } from '@documenso/lib/universal/id';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentStatus,
@@ -74,7 +74,7 @@ export const onEarlyAdoptersCheckout = async ({ session }: OnEarlyAdoptersChecko
       new URL('@documenso/assets/documenso-supporter-pledge.pdf', import.meta.url),
     ).then(async (res) => res.arrayBuffer());
 
-    const { id: documentDataId } = await putFile({
+    const { id: documentDataId } = await putPdfFile({
       name: 'Documenso Supporter Pledge.pdf',
       type: 'application/pdf',
       arrayBuffer: async () => Promise.resolve(documentBuffer),

packages/lib/client-only/hooks/use-element-scale-size.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
-import { RefObject, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 /**
  * Calculate the width and height of a text element.

packages/lib/client-only/hooks/use-field-page-coords.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { Field } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
 
 export const useFieldPageCoords = (field: Field) => {
   const [coords, setCoords] = useState({

packages/lib/client-only/providers/feature-flag.tsx

@@ -9,7 +9,7 @@ import {
 } from '@documenso/lib/constants/feature-flags';
 import { getAllFlags } from '@documenso/lib/universal/get-feature-flag';
 
-import { TFeatureFlagValue } from './feature-flag.types';
+import type { TFeatureFlagValue } from './feature-flag.types';
 
 export type FeatureFlagContextValue = {
   getFlag: (_key: string) => TFeatureFlagValue;

packages/lib/constants/feature-flags.ts

@@ -21,6 +21,7 @@ export const FEATURE_FLAG_POLL_INTERVAL = 30000;
  * Does not take any person or group properties into account.
  */
 export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
+  app_allow_encrypted_documents: false,
   app_billing: NEXT_PUBLIC_FEATURE_BILLING_ENABLED() === 'true',
   app_document_page_view_history_sheet: false,
   app_passkey: WEBAPP_BASE_URL === 'http://localhost:3000', // Temp feature flag.

packages/lib/constants/template.ts

@@ -0,0 +1,2 @@
+export const TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;
+export const TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX = /Recipient \d+/i;

packages/lib/constants/toast.ts

@@ -1,4 +1,4 @@
-import { Toast } from '@documenso/ui/primitives/use-toast';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
 
 export const TOAST_DOCUMENT_SHARE_SUCCESS: Toast = {
   title: 'Copied to clipboard',

packages/lib/errors/app-error.ts

@@ -1,4 +1,5 @@
 import { TRPCError } from '@trpc/server';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -149,4 +150,24 @@ export class AppError extends Error {
       return null;
     }
   }
+
+  static toRestAPIError(err: unknown): {
+    status: 400 | 401 | 404 | 500;
+    body: { message: string };
+  } {
+    const error = AppError.parseError(err);
+
+    const status = match(error.code)
+      .with(AppErrorCode.INVALID_BODY, AppErrorCode.INVALID_REQUEST, () => 400 as const)
+      .with(AppErrorCode.UNAUTHORIZED, () => 401 as const)
+      .with(AppErrorCode.NOT_FOUND, () => 404 as const)
+      .otherwise(() => 500 as const);
+
+    return {
+      status,
+      body: {
+        message: status !== 500 ? error.message : 'Something went wrong',
+      },
+    };
+  }
 }

packages/lib/next-auth/guards/is-admin.ts

@@ -1,3 +1,4 @@
-import { Role, User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
+import { Role } from '@documenso/prisma/client';
 
 export const isAdmin = (user: User) => user.roles.includes(Role.ADMIN);

packages/lib/package.json

@@ -39,7 +39,7 @@
     "next-auth": "4.24.5",
     "oslo": "^0.17.0",
     "pdf-lib": "^1.17.1",
-    "playwright": "^1.43.0",
+    "playwright": "1.43.0",
     "react": "18.2.0",
     "remeda": "^1.27.1",
     "stripe": "^12.7.0",
@@ -48,6 +48,6 @@
   },
   "devDependencies": {
     "@types/luxon": "^3.3.1",
-    "@playwright/browser-chromium": "^1.43.0"
+    "@playwright/browser-chromium": "1.43.0"
   }
 }

packages/lib/server-only/2fa/get-backup-code.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 
 import { DOCUMENSO_ENCRYPTION_KEY } from '../../constants/crypto';
 import { symmetricDecrypt } from '../../universal/crypto';

packages/lib/server-only/2fa/verify-backup-code.ts

@@ -1,4 +1,4 @@
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 
 import { getBackupCodes } from './get-backup-code';
 

packages/lib/server-only/document/complete-document-with-token.ts

@@ -137,7 +137,7 @@ export const completeDocumentWithToken = async ({
     await sendPendingEmail({ documentId, recipientId: recipient.id });
   }
 
-  const documents = await prisma.document.updateMany({
+  const haveAllRecipientsSigned = await prisma.document.findFirst({
     where: {
       id: document.id,
       Recipient: {
@@ -146,13 +146,9 @@ export const completeDocumentWithToken = async ({
         },
       },
     },
-    data: {
-      status: DocumentStatus.COMPLETED,
-      completedAt: new Date(),
-    },
   });
 
-  if (documents.count > 0) {
+  if (haveAllRecipientsSigned) {
     await sealDocument({ documentId: document.id, requestMetadata });
   }
 

packages/lib/server-only/document/delete-document.ts

@@ -75,18 +75,20 @@ export const deleteDocument = async ({
   }
 
   // Continue to hide the document from the user if they are a recipient.
+  // Dirty way of doing this but it's faster than refetching the document.
   if (userRecipient?.documentDeletedAt === null) {
-    await prisma.recipient.update({
-      where: {
-        documentId_email: {
-          documentId: document.id,
-          email: user.email,
+    await prisma.recipient
+      .update({
+        where: {
+          id: userRecipient.id,
         },
-      },
-      data: {
-        documentDeletedAt: new Date().toISOString(),
-      },
-    });
+        data: {
+          documentDeletedAt: new Date().toISOString(),
+        },
+      })
+      .catch(() => {
+        // Do nothing.
+      });
   }
 
   // Return partial document for API v1 response.

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

@@ -110,7 +110,7 @@ export const resendDocument = async ({
         assetBaseUrl,
         signDocumentLink,
         customBody: renderCustomEmailTemplate(
-          selfSigner ? selfSignerCustomEmail : customEmail?.message || '',
+          selfSigner && !customEmail?.message ? selfSignerCustomEmail : customEmail?.message || '',
           customEmailTemplate,
         ),
         role: recipient.role,
@@ -135,7 +135,7 @@ export const resendDocument = async ({
               address: FROM_ADDRESS,
             },
             subject: customEmail?.subject
-              ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+              ? renderCustomEmailTemplate(`Reminder: ${customEmail.subject}`, customEmailTemplate)
               : emailSubject,
             html: render(template),
             text: render(template, { plainText: true }),

packages/lib/server-only/document/seal-document.ts

@@ -14,7 +14,7 @@ import { signPdf } from '@documenso/signing';
 
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
-import { putFile } from '../../universal/upload/put-file';
+import { putPdfFile } from '../../universal/upload/put-file';
 import { getCertificatePdf } from '../htmltopdf/get-certificate-pdf';
 import { flattenAnnotations } from '../pdf/flatten-annotations';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
@@ -40,6 +40,11 @@ export const sealDocument = async ({
   const document = await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
+      Recipient: {
+        every: {
+          signingStatus: SigningStatus.SIGNED,
+        },
+      },
     },
     include: {
       documentData: true,
@@ -53,10 +58,6 @@ export const sealDocument = async ({
     throw new Error(`Document ${document.id} has no document data`);
   }
 
-  if (document.status !== DocumentStatus.COMPLETED) {
-    throw new Error(`Document ${document.id} has not been completed`);
-  }
-
   const recipients = await prisma.recipient.findMany({
     where: {
       documentId: document.id,
@@ -92,9 +93,9 @@ export const sealDocument = async ({
   // !: Need to write the fields onto the document as a hard copy
   const pdfData = await getFile(documentData);
 
-  const certificate = await getCertificatePdf({ documentId }).then(async (doc) =>
-    PDFDocument.load(doc),
-  );
+  const certificate = await getCertificatePdf({ documentId })
+    .then(async (doc) => PDFDocument.load(doc))
+    .catch(() => null);
 
   const doc = await PDFDocument.load(pdfData);
 
@@ -103,11 +104,13 @@ export const sealDocument = async ({
   doc.getForm().flatten();
   flattenAnnotations(doc);
 
-  const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());
+  if (certificate) {
+    const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());
 
-  certificatePages.forEach((page) => {
-    doc.addPage(page);
-  });
+    certificatePages.forEach((page) => {
+      doc.addPage(page);
+    });
+  }
 
   for (const field of fields) {
     await insertFieldInPDF(doc, field);
@@ -119,7 +122,7 @@ export const sealDocument = async ({
 
   const { name, ext } = path.parse(document.title);
 
-  const { data: newData } = await putFile({
+  const { data: newData } = await putPdfFile({
     name: `${name}_signed${ext}`,
     type: 'application/pdf',
     arrayBuffer: async () => Promise.resolve(pdfBuffer),
@@ -138,6 +141,16 @@ export const sealDocument = async ({
   }
 
   await prisma.$transaction(async (tx) => {
+    await tx.document.update({
+      where: {
+        id: document.id,
+      },
+      data: {
+        status: DocumentStatus.COMPLETED,
+        completedAt: new Date(),
+      },
+    });
+
     await tx.documentData.update({
       where: {
         id: documentData.id,

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

@@ -4,8 +4,11 @@ import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import { sealDocument } from '@documenso/lib/server-only/document/seal-document';
+import { updateDocument } from '@documenso/lib/server-only/document/update-document';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
@@ -18,7 +21,6 @@ import {
   RECIPIENT_ROLE_TO_EMAIL_TYPE,
 } from '../../constants/recipient-roles';
 import { getFile } from '../../universal/upload/get-file';
-import { putFile } from '../../universal/upload/put-file';
 import { insertFormValuesInPdf } from '../pdf/insert-form-values-in-pdf';
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
@@ -100,7 +102,7 @@ export const sendDocument = async ({
       formValues: document.formValues as Record<string, string | number | boolean>,
     });
 
-    const newDocumentData = await putFile({
+    const newDocumentData = await putPdfFile({
       name: document.title,
       type: 'application/pdf',
       arrayBuffer: async () => Promise.resolve(prefilled),
@@ -149,7 +151,7 @@ export const sendDocument = async ({
         assetBaseUrl,
         signDocumentLink,
         customBody: renderCustomEmailTemplate(
-          selfSigner ? selfSignerCustomEmail : customEmail?.message || '',
+          selfSigner && !customEmail?.message ? selfSignerCustomEmail : customEmail?.message || '',
           customEmailTemplate,
         ),
         role: recipient.role,
@@ -211,6 +213,31 @@ export const sendDocument = async ({
     }),
   );
 
+  const allRecipientsHaveNoActionToTake = document.Recipient.every(
+    (recipient) => recipient.role === RecipientRole.CC,
+  );
+
+  if (allRecipientsHaveNoActionToTake) {
+    const updatedDocument = await updateDocument({
+      documentId,
+      userId,
+      teamId,
+      data: { status: DocumentStatus.COMPLETED },
+    });
+
+    await sealDocument({ documentId: updatedDocument.id, requestMetadata });
+
+    // Keep the return type the same for the `sendDocument` method
+    return await prisma.document.findFirstOrThrow({
+      where: {
+        id: documentId,
+      },
+      include: {
+        Recipient: true,
+      },
+    });
+  }
+
   const updatedDocument = await prisma.$transaction(async (tx) => {
     if (document.status === DocumentStatus.DRAFT) {
       await tx.documentAuditLog.create({

packages/lib/server-only/field/get-completed-fields-for-document.ts

@@ -0,0 +1,29 @@
+import { prisma } from '@documenso/prisma';
+import { SigningStatus } from '@documenso/prisma/client';
+
+export type GetCompletedFieldsForDocumentOptions = {
+  documentId: number;
+};
+
+export const getCompletedFieldsForDocument = async ({
+  documentId,
+}: GetCompletedFieldsForDocumentOptions) => {
+  return await prisma.field.findMany({
+    where: {
+      documentId,
+      Recipient: {
+        signingStatus: SigningStatus.SIGNED,
+      },
+      inserted: true,
+    },
+    include: {
+      Signature: true,
+      Recipient: {
+        select: {
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
+};

packages/lib/server-only/field/get-completed-fields-for-token.ts

@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+import { SigningStatus } from '@documenso/prisma/client';
+
+export type GetCompletedFieldsForTokenOptions = {
+  token: string;
+};
+
+export const getCompletedFieldsForToken = async ({ token }: GetCompletedFieldsForTokenOptions) => {
+  return await prisma.field.findMany({
+    where: {
+      Document: {
+        Recipient: {
+          some: {
+            token,
+          },
+        },
+      },
+      Recipient: {
+        signingStatus: SigningStatus.SIGNED,
+      },
+      inserted: true,
+    },
+    include: {
+      Signature: true,
+      Recipient: {
+        select: {
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
+};

packages/lib/server-only/htmltopdf/get-certificate-pdf.ts

@@ -18,7 +18,9 @@ export const getCertificatePdf = async ({ documentId }: GetCertificatePdfOptions
   let browser: Browser;
 
   if (process.env.NEXT_PRIVATE_BROWSERLESS_URL) {
-    browser = await chromium.connect(process.env.NEXT_PRIVATE_BROWSERLESS_URL);
+    // !: Use CDP rather than the default `connect` method to avoid coupling to the playwright version.
+    // !: Previously we would have to keep the playwright version in sync with the browserless version to avoid errors.
+    browser = await chromium.connectOverCDP(process.env.NEXT_PRIVATE_BROWSERLESS_URL);
   } else {
     browser = await chromium.launch();
   }
@@ -33,6 +35,7 @@ export const getCertificatePdf = async ({ documentId }: GetCertificatePdfOptions
 
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encryptedId}`, {
     waitUntil: 'networkidle',
+    timeout: 10_000,
   });
 
   const result = await page.pdf({

packages/lib/server-only/http/with-swr.ts

@@ -1,5 +1,5 @@
-import { NextApiResponse } from 'next';
-import { NextResponse } from 'next/server';
+import type { NextApiResponse } from 'next';
+import type { NextResponse } from 'next/server';
 
 type NarrowedResponse<T> = T extends NextResponse
   ? NextResponse

packages/lib/server-only/public-api/get-all-team-tokens.ts

@@ -1,3 +1,4 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { prisma } from '@documenso/prisma';
 import { TeamMemberRole } from '@documenso/prisma/client';
 
@@ -6,6 +7,8 @@ export type GetUserTokensOptions = {
   teamId: number;
 };
 
+export type GetTeamTokensResponse = Awaited<ReturnType<typeof getTeamTokens>>;
+
 export const getTeamTokens = async ({ userId, teamId }: GetUserTokensOptions) => {
   const teamMember = await prisma.teamMember.findFirst({
     where: {
@@ -15,7 +18,10 @@ export const getTeamTokens = async ({ userId, teamId }: GetUserTokensOptions) =>
   });
 
   if (teamMember?.role !== TeamMemberRole.ADMIN) {
-    throw new Error('You do not have permission to view tokens for this team');
+    throw new AppError(
+      AppErrorCode.UNAUTHORIZED,
+      'You do not have the required permissions to view this page.',
+    );
   }
 
   return await prisma.apiToken.findMany({

packages/lib/server-only/template-document-meta/upsert-template-document-meta.ts

@@ -0,0 +1,58 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+
+export type CreateTemplateDocumentMetaOptions = {
+  templateId: number;
+  subject?: string;
+  message?: string;
+  timezone?: string;
+  password?: string;
+  dateFormat?: string;
+  redirectUrl?: string;
+};
+
+export const upsertTemplateDocumentMeta = async ({
+  subject,
+  message,
+  timezone,
+  dateFormat,
+  templateId,
+  password,
+  redirectUrl,
+}: CreateTemplateDocumentMetaOptions) => {
+  const templateDocumentMeta = await prisma.templateDocumentMeta.findFirstOrThrow({
+    where: {
+      templateId: templateId,
+    },
+    include: {
+      template: true,
+    },
+  });
+  return await prisma.$transaction(async (tx) => {
+    const upsertedTemplateDocumentMeta = await tx.templateDocumentMeta.upsert({
+      where: {
+        templateId,
+      },
+      update: {
+        subject,
+        message,
+        timezone,
+        password,
+        dateFormat,
+        redirectUrl,
+      },
+      create: {
+        templateId,
+        subject,
+        message,
+        timezone,
+        password,
+        dateFormat,
+        redirectUrl,
+      },
+    });
+
+    return upsertedTemplateDocumentMeta;
+  });
+};

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

@@ -0,0 +1,144 @@
+import { nanoid } from '@documenso/lib/universal/id';
+import { prisma } from '@documenso/prisma';
+import type { RecipientRole } from '@documenso/prisma/client';
+
+export type CreateDocumentFromTemplateLegacyOptions = {
+  templateId: number;
+  userId: number;
+  teamId?: number;
+  recipients?: {
+    name?: string;
+    email: string;
+    role?: RecipientRole;
+  }[];
+};
+
+/**
+ * Legacy server function for /api/v1
+ */
+export const createDocumentFromTemplateLegacy = async ({
+  templateId,
+  userId,
+  teamId,
+  recipients,
+}: CreateDocumentFromTemplateLegacyOptions) => {
+  const template = await prisma.template.findUnique({
+    where: {
+      id: templateId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+    include: {
+      Recipient: true,
+      Field: true,
+      templateDocumentData: true,
+    },
+  });
+
+  if (!template) {
+    throw new Error('Template not found.');
+  }
+
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: template.templateDocumentData.type,
+      data: template.templateDocumentData.data,
+      initialData: template.templateDocumentData.initialData,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      userId,
+      teamId: template.teamId,
+      title: template.title,
+      documentDataId: documentData.id,
+      Recipient: {
+        create: template.Recipient.map((recipient) => ({
+          email: recipient.email,
+          name: recipient.name,
+          role: recipient.role,
+          token: nanoid(),
+        })),
+      },
+    },
+
+    include: {
+      Recipient: {
+        orderBy: {
+          id: 'asc',
+        },
+      },
+      documentData: true,
+    },
+  });
+
+  await prisma.field.createMany({
+    data: template.Field.map((field) => {
+      const recipient = template.Recipient.find((recipient) => recipient.id === field.recipientId);
+
+      const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
+
+      if (!documentRecipient) {
+        throw new Error('Recipient not found.');
+      }
+
+      return {
+        type: field.type,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+        customText: field.customText,
+        inserted: field.inserted,
+        documentId: document.id,
+        recipientId: documentRecipient.id,
+      };
+    }),
+  });
+
+  if (recipients && recipients.length > 0) {
+    document.Recipient = await Promise.all(
+      recipients.map(async (recipient, index) => {
+        const existingRecipient = document.Recipient.at(index);
+
+        return await prisma.recipient.upsert({
+          where: {
+            documentId_email: {
+              documentId: document.id,
+              email: existingRecipient?.email ?? recipient.email,
+            },
+          },
+          update: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+          },
+          create: {
+            documentId: document.id,
+            email: recipient.email,
+            name: recipient.name,
+            role: recipient.role,
+            token: nanoid(),
+          },
+        });
+      }),
+    );
+  }
+
+  return document;
+};

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

@@ -1,16 +1,29 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
-import type { RecipientRole } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
+import { type Recipient, WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
+
+type FinalRecipient = Pick<Recipient, 'name' | 'email' | 'role'> & {
+  templateRecipientId: number;
+  fields: Field[];
+};
 
 export type CreateDocumentFromTemplateOptions = {
   templateId: number;
   userId: number;
   teamId?: number;
-  recipients?: {
+  recipients: {
+    id: number;
     name?: string;
     email: string;
-    role?: RecipientRole;
   }[];
+  requestMetadata?: RequestMetadata;
 };
 
 export const createDocumentFromTemplate = async ({
@@ -18,7 +31,14 @@ export const createDocumentFromTemplate = async ({
   userId,
   teamId,
   recipients,
+  requestMetadata,
 }: CreateDocumentFromTemplateOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
   const template = await prisma.template.findUnique({
     where: {
       id: templateId,
@@ -39,16 +59,43 @@ export const createDocumentFromTemplate = async ({
           }),
     },
     include: {
-      Recipient: true,
-      Field: true,
+      Recipient: {
+        include: {
+          Field: true,
+        },
+      },
       templateDocumentData: true,
+      templateDocumentMeta: true,
     },
   });
 
   if (!template) {
-    throw new Error('Template not found.');
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
   }
 
+  if (recipients.length !== template.Recipient.length) {
+    throw new AppError(AppErrorCode.INVALID_BODY, 'Invalid number of recipients.');
+  }
+
+  const finalRecipients: FinalRecipient[] = template.Recipient.map((templateRecipient) => {
+    const foundRecipient = recipients.find((recipient) => recipient.id === templateRecipient.id);
+
+    if (!foundRecipient) {
+      throw new AppError(
+        AppErrorCode.INVALID_BODY,
+        `Missing template recipient with ID ${templateRecipient.id}`,
+      );
+    }
+
+    return {
+      templateRecipientId: templateRecipient.id,
+      fields: templateRecipient.Field,
+      name: foundRecipient.name ?? '',
+      email: foundRecipient.email,
+      role: templateRecipient.role,
+    };
+  });
+
   const documentData = await prisma.documentData.create({
     data: {
       type: template.templateDocumentData.type,
@@ -57,81 +104,91 @@ export const createDocumentFromTemplate = async ({
     },
   });
 
-  const document = await prisma.document.create({
-    data: {
-      userId,
-      teamId: template.teamId,
-      title: template.title,
-      documentDataId: documentData.id,
-      Recipient: {
-        create: template.Recipient.map((recipient) => ({
-          email: recipient.email,
-          name: recipient.name,
-          role: recipient.role,
-          token: nanoid(),
-        })),
-      },
-    },
-
-    include: {
-      Recipient: {
-        orderBy: {
-          id: 'asc',
+  return await prisma.$transaction(async (tx) => {
+    const document = await tx.document.create({
+      data: {
+        userId,
+        teamId: template.teamId,
+        title: template.title,
+        documentDataId: documentData.id,
+        Recipient: {
+          createMany: {
+            data: finalRecipients.map((recipient) => ({
+              email: recipient.email,
+              name: recipient.name,
+              role: recipient.role,
+              token: nanoid(),
+            })),
+          },
         },
       },
-      documentData: true,
-    },
-  });
-
-  await prisma.field.createMany({
-    data: template.Field.map((field) => {
-      const recipient = template.Recipient.find((recipient) => recipient.id === field.recipientId);
-
-      const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
-
-      return {
-        type: field.type,
-        page: field.page,
-        positionX: field.positionX,
-        positionY: field.positionY,
-        width: field.width,
-        height: field.height,
-        customText: field.customText,
-        inserted: field.inserted,
-        documentId: document.id,
-        recipientId: documentRecipient?.id || null,
-      };
-    }),
-  });
-
-  if (recipients && recipients.length > 0) {
-    document.Recipient = await Promise.all(
-      recipients.map(async (recipient, index) => {
-        const existingRecipient = document.Recipient.at(index);
-
-        return await prisma.recipient.upsert({
+      include: {
+        Recipient: {
+          orderBy: {
+            id: 'asc',
+          },
+        },
+        documentData: true,
+        documentMeta: {
           where: {
-            documentId_email: {
-              documentId: document.id,
-              email: existingRecipient?.email ?? recipient.email,
-            },
+            subject: template.templateDocumentMeta?.subject,
+            message: template.templateDocumentMeta?.message,
+            dateFormat: template.templateDocumentMeta?.dateFormat,
+            timezone: template.templateDocumentMeta?.timezone,
+            redirectUrl: template.templateDocumentMeta?.redirectUrl,
           },
-          update: {
-            name: recipient.name,
-            email: recipient.email,
-            role: recipient.role,
-          },
-          create: {
-            documentId: document.id,
-            email: recipient.email,
-            name: recipient.name,
-            role: recipient.role,
-            token: nanoid(),
-          },
-        });
-      }),
-    );
-  }
+        },
+      },
+    });
 
-  return document;
+    let fieldsToCreate: Omit<Field, 'id' | 'secondaryId' | 'templateId'>[] = [];
+
+    Object.values(finalRecipients).forEach(({ email, fields }) => {
+      const recipient = document.Recipient.find((recipient) => recipient.email === email);
+
+      if (!recipient) {
+        throw new Error('Recipient not found.');
+      }
+
+      fieldsToCreate = fieldsToCreate.concat(
+        fields.map((field) => ({
+          documentId: document.id,
+          recipientId: recipient.id,
+          type: field.type,
+          page: field.page,
+          positionX: field.positionX,
+          positionY: field.positionY,
+          width: field.width,
+          height: field.height,
+          customText: '',
+          inserted: false,
+        })),
+      );
+    });
+
+    await tx.field.createMany({
+      data: fieldsToCreate,
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+        documentId: document.id,
+        user,
+        requestMetadata,
+        data: {
+          title: document.title,
+        },
+      }),
+    });
+
+    await triggerWebhook({
+      event: WebhookTriggerEvents.DOCUMENT_CREATED,
+      data: document,
+      userId,
+      teamId,
+    });
+
+    return document;
+  });
 };

packages/lib/server-only/template/duplicate-template.ts

@@ -38,6 +38,7 @@ export const duplicateTemplate = async ({
       Recipient: true,
       Field: true,
       templateDocumentData: true,
+      templateDocumentMeta: true,
     },
   });
 
@@ -81,6 +82,10 @@ export const duplicateTemplate = async ({
         (doc) => doc.email === recipient?.email,
       );
 
+      if (!duplicatedTemplateRecipient) {
+        throw new Error('Recipient not found.');
+      }
+
       return {
         type: field.type,
         page: field.page,
@@ -91,7 +96,7 @@ export const duplicateTemplate = async ({
         customText: field.customText,
         inserted: field.inserted,
         templateId: duplicatedTemplate.id,
-        recipientId: duplicatedTemplateRecipient?.id || null,
+        recipientId: duplicatedTemplateRecipient.id,
       };
     }),
   });

packages/lib/server-only/template/find-templates.ts

@@ -37,6 +37,7 @@ export const findTemplates = async ({
       where: whereFilter,
       include: {
         templateDocumentData: true,
+        templateDocumentMeta: true,
         team: {
           select: {
             id: true,

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

@@ -29,6 +29,7 @@ export const getTemplateById = async ({ id, userId }: GetTemplateByIdOptions) =>
     where: whereFilter,
     include: {
       templateDocumentData: true,
+      templateDocumentMeta: true,
     },
   });
 };

packages/lib/server-only/user/forgot-password.ts

@@ -1,7 +1,7 @@
 import crypto from 'crypto';
 
 import { prisma } from '@documenso/prisma';
-import { TForgotPasswordFormSchema } from '@documenso/trpc/server/profile-router/schema';
+import type { TForgotPasswordFormSchema } from '@documenso/trpc/server/profile-router/schema';
 
 import { ONE_DAY, ONE_HOUR } from '../../constants/time';
 import { sendForgotPassword } from '../auth/send-forgot-password';

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

@@ -4,6 +4,7 @@ export const getWebhooksByUserId = async (userId: number) => {
   return await prisma.webhook.findMany({
     where: {
       userId,
+      teamId: null,
     },
     orderBy: {
       createdAt: 'desc',

packages/lib/types/fields.ts

@@ -0,0 +1,3 @@
+import type { getCompletedFieldsForToken } from '../server-only/field/get-completed-fields-for-token';
+
+export type CompletedField = Awaited<ReturnType<typeof getCompletedFieldsForToken>>[number];

packages/lib/universal/get-feature-flag.ts

@@ -17,6 +17,7 @@ export const getFlag = async (
   options?: GetFlagOptions,
 ): Promise<TFeatureFlagValue> => {
   const requestHeaders = options?.requestHeaders ?? {};
+  delete requestHeaders['content-length'];
 
   if (!isFeatureFlagEnabled()) {
     return LOCAL_FEATURE_FLAGS[flag] ?? true;
@@ -25,7 +26,7 @@ export const getFlag = async (
   const url = new URL(`${APP_BASE_URL()}/api/feature-flag/get`);
   url.searchParams.set('flag', flag);
 
-  const response = await fetch(url, {
+  return await fetch(url, {
     headers: {
       ...requestHeaders,
     },
@@ -35,9 +36,10 @@ export const getFlag = async (
   })
     .then(async (res) => res.json())
     .then((res) => ZFeatureFlagValueSchema.parse(res))
-    .catch(() => false);
-
-  return response;
+    .catch((err) => {
+      console.error(err);
+      return LOCAL_FEATURE_FLAGS[flag] ?? false;
+    });
 };
 
 /**
@@ -50,6 +52,7 @@ export const getAllFlags = async (
   options?: GetFlagOptions,
 ): Promise<Record<string, TFeatureFlagValue>> => {
   const requestHeaders = options?.requestHeaders ?? {};
+  delete requestHeaders['content-length'];
 
   if (!isFeatureFlagEnabled()) {
     return LOCAL_FEATURE_FLAGS;
@@ -67,7 +70,10 @@ export const getAllFlags = async (
   })
     .then(async (res) => res.json())
     .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
-    .catch(() => LOCAL_FEATURE_FLAGS);
+    .catch((err) => {
+      console.error(err);
+      return LOCAL_FEATURE_FLAGS;
+    });
 };
 
 /**
@@ -89,7 +95,10 @@ export const getAllAnonymousFlags = async (): Promise<Record<string, TFeatureFla
   })
     .then(async (res) => res.json())
     .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
-    .catch(() => LOCAL_FEATURE_FLAGS);
+    .catch((err) => {
+      console.error(err);
+      return LOCAL_FEATURE_FLAGS;
+    });
 };
 
 interface GetFlagOptions {

packages/lib/universal/upload/put-file.ts

@@ -1,9 +1,12 @@
 import { base64 } from '@scure/base';
 import { env } from 'next-runtime-env';
+import { PDFDocument } from 'pdf-lib';
 import { match } from 'ts-pattern';
 
+import { getFlag } from '@documenso/lib/universal/get-feature-flag';
 import { DocumentDataType } from '@documenso/prisma/client';
 
+import { AppError } from '../../errors/app-error';
 import { createDocumentData } from '../../server-only/document-data/create-document-data';
 
 type File = {
@@ -12,14 +15,38 @@ type File = {
   arrayBuffer: () => Promise<ArrayBuffer>;
 };
 
+/**
+ * Uploads a document file to the appropriate storage location and creates
+ * a document data record.
+ */
+export const putPdfFile = async (file: File) => {
+  const isEncryptedDocumentsAllowed = await getFlag('app_allow_encrypted_documents').catch(
+    () => false,
+  );
+
+  // This will prevent uploading encrypted PDFs or anything that can't be opened.
+  if (!isEncryptedDocumentsAllowed) {
+    await PDFDocument.load(await file.arrayBuffer()).catch((e) => {
+      console.error(`PDF upload parse error: ${e.message}`);
+
+      throw new AppError('INVALID_DOCUMENT_FILE');
+    });
+  }
+
+  const { type, data } = await putFile(file);
+
+  return await createDocumentData({ type, data });
+};
+
+/**
+ * Uploads a file to the appropriate storage location.
+ */
 export const putFile = async (file: File) => {
   const NEXT_PUBLIC_UPLOAD_TRANSPORT = env('NEXT_PUBLIC_UPLOAD_TRANSPORT');
 
-  const { type, data } = await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
+  return await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
     .with('s3', async () => putFileInS3(file))
     .otherwise(async () => putFileInDatabase(file));
-
-  return await createDocumentData({ type, data });
 };
 
 const putFileInDatabase = async (file: File) => {

packages/lib/utils/fields.ts

@@ -1,4 +1,4 @@
-import { Field } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
 
 /**
  * Sort the fields by the Y position on the document.

packages/prisma/migrations/20240416212742_create_template_document_meta/migration.sql

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "TemplateDocumentMeta" (
+    "id" TEXT NOT NULL,
+    "subject" TEXT,
+    "message" TEXT,
+    "timezone" TEXT DEFAULT 'Etc/UTC',
+    "password" TEXT,
+    "dateFormat" TEXT DEFAULT 'yyyy-MM-dd hh:mm a',
+    "templateId" INTEGER NOT NULL,
+    "redirectUrl" TEXT,
+
+    CONSTRAINT "TemplateDocumentMeta_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TemplateDocumentMeta_templateId_key" ON "TemplateDocumentMeta"("templateId");
+
+-- AddForeignKey
+ALTER TABLE "TemplateDocumentMeta" ADD CONSTRAINT "TemplateDocumentMeta_templateId_fkey" FOREIGN KEY ("templateId") REFERENCES "Template"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20240418140819_remove_impossible_field_optional_states/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - Made the column `recipientId` on table `Field` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- Drop all Fields where the recipientId is null
+DELETE FROM "Field" WHERE "recipientId" IS NULL;
+
+-- AlterTable
+ALTER TABLE "Field" ALTER COLUMN "recipientId" SET NOT NULL;

packages/prisma/migrations/20240424072655_update_foreign_key_constraints/migration.sql

@@ -0,0 +1,23 @@
+-- DropForeignKey
+ALTER TABLE "PasswordResetToken" DROP CONSTRAINT "PasswordResetToken_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Signature" DROP CONSTRAINT "Signature_fieldId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Team" DROP CONSTRAINT "Team_ownerUserId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "TeamMember" DROP CONSTRAINT "TeamMember_userId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "PasswordResetToken" ADD CONSTRAINT "PasswordResetToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Signature" ADD CONSTRAINT "Signature_fieldId_fkey" FOREIGN KEY ("fieldId") REFERENCES "Field"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Team" ADD CONSTRAINT "Team_ownerUserId_fkey" FOREIGN KEY ("ownerUserId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamMember" ADD CONSTRAINT "TeamMember_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -98,7 +98,7 @@ model PasswordResetToken {
   createdAt DateTime @default(now())
   expiry    DateTime
   userId    Int
-  User      User     @relation(fields: [userId], references: [id])
+  User      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model Passkey {
@@ -324,6 +324,18 @@ model DocumentMeta {
   redirectUrl String?
 }
 
+model TemplateDocumentMeta {
+  id          String   @id @default(cuid())
+  subject     String?
+  message     String?
+  timezone    String?  @default("Etc/UTC") @db.Text
+  password    String?
+  dateFormat  String?  @default("yyyy-MM-dd hh:mm a") @db.Text
+  templateId  Int      @unique
+  template    Template @relation(fields: [templateId], references: [id], onDelete: Cascade)
+  redirectUrl String?
+}
+
 enum ReadStatus {
   NOT_OPENED
   OPENED
@@ -387,7 +399,7 @@ model Field {
   secondaryId String     @unique @default(cuid())
   documentId  Int?
   templateId  Int?
-  recipientId Int?
+  recipientId Int
   type        FieldType
   page        Int
   positionX   Decimal    @default(0)
@@ -398,7 +410,7 @@ model Field {
   inserted    Boolean
   Document    Document?  @relation(fields: [documentId], references: [id], onDelete: Cascade)
   Template    Template?  @relation(fields: [templateId], references: [id], onDelete: Cascade)
-  Recipient   Recipient? @relation(fields: [recipientId], references: [id], onDelete: Cascade)
+  Recipient   Recipient  @relation(fields: [recipientId], references: [id], onDelete: Cascade)
   Signature   Signature?
 
   @@index([documentId])
@@ -415,7 +427,7 @@ model Signature {
   typedSignature         String?
 
   Recipient Recipient @relation(fields: [recipientId], references: [id], onDelete: Cascade)
-  Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Restrict)
+  Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Cascade)
 
   @@index([recipientId])
 }
@@ -457,7 +469,7 @@ model Team {
   emailVerification    TeamEmailVerification?
   transferVerification TeamTransferVerification?
 
-  owner        User          @relation(fields: [ownerUserId], references: [id])
+  owner        User          @relation(fields: [ownerUserId], references: [id], onDelete: Cascade)
   subscription Subscription?
 
   document  Document[]
@@ -483,7 +495,7 @@ model TeamMember {
   createdAt DateTime       @default(now())
   role      TeamMemberRole
   userId    Int
-  user      User           @relation(fields: [userId], references: [id])
+  user      User           @relation(fields: [userId], references: [id], onDelete: Cascade)
   team      Team           @relation(fields: [teamId], references: [id], onDelete: Cascade)
 
   @@unique([userId, teamId])
@@ -551,6 +563,7 @@ model Template {
 
   team                 Team?        @relation(fields: [teamId], references: [id], onDelete: Cascade)
   templateDocumentData DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
+  templateDocumentMeta TemplateDocumentMeta?
   User                 User         @relation(fields: [userId], references: [id], onDelete: Cascade)
   Recipient            Recipient[]
   Field                Field[]
@@ -564,5 +577,5 @@ model SiteSettings {
   data                 Json
   lastModifiedByUserId Int?
   lastModifiedAt       DateTime @default(now())
-  lastModifiedByUser   User?    @relation(fields: [lastModifiedByUserId], references: [id])
+  lastModifiedByUser   User?    @relation(fields: [lastModifiedByUserId], references: [id], onDelete: SetNull)
 }

packages/trpc/client/guards.ts

@@ -1,6 +1,6 @@
 import { TRPCClientError } from '@trpc/client';
 
-import { AppRouter } from '../server/router';
+import type { AppRouter } from '../server/router';
 
 export const isTRPCBadRequestError = (err: unknown): err is TRPCClientError<AppRouter> => {
   return err instanceof TRPCClientError && err.shape?.code === 'BAD_REQUEST';

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

@@ -4,6 +4,7 @@ import { DateTime } from 'luxon';
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { encryptSecondaryData } from '@documenso/lib/server-only/crypto/encrypt';
 import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
@@ -20,6 +21,7 @@ import { updateDocumentSettings } from '@documenso/lib/server-only/document/upda
 import { updateTitle } from '@documenso/lib/server-only/document/update-title';
 import { symmetricEncrypt } from '@documenso/lib/universal/crypto';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { DocumentStatus } from '@documenso/prisma/client';
 
 import { authenticatedProcedure, procedure, router } from '../trpc';
 import {
@@ -413,6 +415,10 @@ export const documentRouter = router({
           teamId,
         });
 
+        if (document.status !== DocumentStatus.COMPLETED) {
+          throw new AppError('DOCUMENT_NOT_COMPLETE');
+        }
+
         const encrypted = encryptSecondaryData({
           data: document.id.toString(),
           expiresAt: DateTime.now().plus({ minutes: 5 }).toJSDate().valueOf(),

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

@@ -90,7 +90,7 @@ export const profileRouter = router({
       try {
         const { url } = input;
 
-        if (IS_BILLING_ENABLED() && url.length <= 6) {
+        if (IS_BILLING_ENABLED() && url.length < 6) {
           const subscriptions = await getSubscriptionsByUserId({
             userId: ctx.user.id,
           }).then((subscriptions) =>

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

@@ -10,7 +10,7 @@ import { FROM_ADDRESS, FROM_NAME, SERVICE_USER_EMAIL } from '@documenso/lib/cons
 import { insertFieldInPDF } from '@documenso/lib/server-only/pdf/insert-field-in-pdf';
 import { alphaid } from '@documenso/lib/universal/id';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentStatus,
@@ -86,7 +86,7 @@ export const singleplayerRouter = router({
               },
             });
 
-            const { id: documentDataId } = await putFile({
+            const { id: documentDataId } = await putPdfFile({
               name: `${documentName}.pdf`,
               type: 'application/pdf',
               arrayBuffer: async () => Promise.resolve(signedPdfBuffer),

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

@@ -1,10 +1,15 @@
 import { TRPCError } from '@trpc/server';
 
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { sendDocument } from '@documenso/lib/server-only/document/send-document';
+import { upsertTemplateDocumentMeta } from '@documenso/lib/server-only/template-document-meta/upsert-template-document-meta';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { createTemplate } from '@documenso/lib/server-only/template/create-template';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
 import { duplicateTemplate } from '@documenso/lib/server-only/template/duplicate-template';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import type { Document } from '@documenso/prisma/client';
 
 import { authenticatedProcedure, router } from '../trpc';
 import {
@@ -12,6 +17,7 @@ import {
   ZCreateTemplateMutationSchema,
   ZDeleteTemplateMutationSchema,
   ZDuplicateTemplateMutationSchema,
+  ZSetSettingsForTemplateMutationSchema,
 } from './schema';
 
 export const templateRouter = router({
@@ -49,19 +55,34 @@ export const templateRouter = router({
           throw new Error('You have reached your document limit.');
         }
 
-        return await createDocumentFromTemplate({
+        const requestMetadata = extractNextApiRequestMetadata(ctx.req);
+
+        let document: Document = await createDocumentFromTemplate({
           templateId,
           teamId,
           userId: ctx.user.id,
           recipients: input.recipients,
+          requestMetadata,
         });
+
+        if (input.sendDocument) {
+          document = await sendDocument({
+            documentId: document.id,
+            userId: ctx.user.id,
+            teamId,
+            requestMetadata,
+          }).catch((err) => {
+            console.error(err);
+
+            throw new AppError('DOCUMENT_SEND_FAILED');
+          });
+        }
+
+        return document;
       } catch (err) {
         console.error(err);
 
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message: 'We were unable to create this document. Please try again later.',
-        });
+        throw AppError.parseErrorToTRPCError(err);
       }
     }),
 
@@ -104,4 +125,27 @@ export const templateRouter = router({
         });
       }
     }),
+  setSettingsForTemplate: authenticatedProcedure
+    .input(ZSetSettingsForTemplateMutationSchema)
+    .mutation(async ({ input }) => {
+      try {
+        const { meta, templateId } = input;
+
+        return await upsertTemplateDocumentMeta({
+          templateId,
+          subject: meta.subject,
+          message: meta.message,
+          dateFormat: meta.dateFormat,
+          timezone: meta.timezone,
+          redirectUrl: meta.redirectUrl,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to set template settings. Please try again later.',
+        });
+      }
+    }),
 });

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

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { RecipientRole } from '@documenso/prisma/client';
+import { URL_REGEX } from '@documenso/lib/constants/url-regex';
 
 export const ZCreateTemplateMutationSchema = z.object({
   title: z.string().min(1).trim(),
@@ -14,12 +14,32 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
   recipients: z
     .array(
       z.object({
+        id: z.number(),
         email: z.string().email(),
-        name: z.string(),
-        role: z.nativeEnum(RecipientRole),
+        name: z.string().optional(),
       }),
     )
-    .optional(),
+    .refine((recipients) => {
+      const emails = recipients.map((signer) => signer.email);
+      return new Set(emails).size === emails.length;
+    }, 'Recipients must have unique emails'),
+  sendDocument: z.boolean().optional(),
+});
+
+export const ZSetSettingsForTemplateMutationSchema = z.object({
+  templateId: z.number(),
+  meta: z.object({
+    subject: z.string().optional(),
+    message: z.string().optional(),
+    timezone: z.string().optional(),
+    dateFormat: z.string().optional(),
+    redirectUrl: z
+      .string()
+      .optional()
+      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
+        message: 'Please enter a valid URL',
+      }),
+  }),
 });
 
 export const ZDuplicateTemplateMutationSchema = z.object({

packages/ui/components/field/field.tsx

@@ -19,6 +19,7 @@ export type FieldContainerPortalProps = {
   field: Field;
   className?: string;
   children: React.ReactNode;
+  cardClassName?: string;
 };
 
 export function FieldContainerPortal({
@@ -44,7 +45,7 @@ export function FieldContainerPortal({
   );
 }
 
-export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
   const [isValidating, setIsValidating] = useState(false);
 
   const ref = React.useRef<HTMLDivElement>(null);
@@ -78,6 +79,7 @@ export function FieldRootContainer({ field, children }: FieldContainerPortalProp
           {
             'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
           },
+          cardClassName,
         )}
         ref={ref}
         data-inserted={field.inserted ? 'true' : 'false'}

packages/ui/components/recipient/recipient-action-auth-select.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+
+import type { SelectProps } from '@radix-ui/react-select';
+import { InfoIcon } from 'lucide-react';
+
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
+import { RecipientActionAuth } from '@documenso/lib/types/document-auth';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+export type RecipientActionAuthSelectProps = SelectProps;
+
+export const RecipientActionAuthSelect = (props: RecipientActionAuthSelectProps) => {
+  return (
+    <Select {...props}>
+      <SelectTrigger className="bg-background text-muted-foreground">
+        <SelectValue placeholder="Inherit authentication method" />
+
+        <Tooltip>
+          <TooltipTrigger className="-mr-1 ml-auto">
+            <InfoIcon className="mx-2 h-4 w-4" />
+          </TooltipTrigger>
+
+          <TooltipContent className="text-foreground max-w-md p-4">
+            <h2>
+              <strong>Recipient action authentication</strong>
+            </h2>
+
+            <p>The authentication required for recipients to sign fields</p>
+
+            <p className="mt-2">This will override any global settings.</p>
+
+            <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+              <li>
+                <strong>Inherit authentication method</strong> - Use the global action signing
+                authentication method configured in the "General Settings" step
+              </li>
+              {/* <li>
+                <strong>Require account</strong> - The recipient must be
+                signed in
+              </li> */}
+              <li>
+                <strong>Require passkey</strong> - The recipient must have an account and passkey
+                configured via their settings
+              </li>
+              <li>
+                <strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled
+                via their settings
+              </li>
+              <li>
+                <strong>None</strong> - No authentication required
+              </li>
+            </ul>
+          </TooltipContent>
+        </Tooltip>
+      </SelectTrigger>
+
+      <SelectContent position="popper">
+        {/* Note: -1 is remapped in the Zod schema to the required value. */}
+        <SelectItem value="-1">Inherit authentication method</SelectItem>
+
+        {Object.values(RecipientActionAuth)
+          .filter((auth) => auth !== RecipientActionAuth.ACCOUNT)
+          .map((authType) => (
+            <SelectItem key={authType} value={authType}>
+              {DOCUMENT_AUTH_TYPES[authType].value}
+            </SelectItem>
+          ))}
+      </SelectContent>
+    </Select>
+  );
+};

packages/ui/components/recipient/recipient-role-select.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+
+import type { SelectProps } from '@radix-ui/react-select';
+import { InfoIcon } from 'lucide-react';
+
+import { RecipientRole } from '@documenso/prisma/client';
+import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+export type RecipientRoleSelectProps = SelectProps;
+
+export const RecipientRoleSelect = (props: RecipientRoleSelectProps) => {
+  return (
+    <Select {...props}>
+      <SelectTrigger className="bg-background w-[60px]">
+        {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
+        {ROLE_ICONS[props.value as RecipientRole]}
+      </SelectTrigger>
+
+      <SelectContent align="end">
+        <SelectItem value={RecipientRole.SIGNER}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+              Needs to sign
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>The recipient is required to sign the document for it to be completed.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </SelectItem>
+
+        <SelectItem value={RecipientRole.APPROVER}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+              Needs to approve
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>The recipient is required to approve the document for it to be completed.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </SelectItem>
+
+        <SelectItem value={RecipientRole.VIEWER}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+              Needs to view
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>The recipient is required to view the document for it to be completed.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </SelectItem>
+
+        <SelectItem value={RecipientRole.CC}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+              Receives copy
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>
+                  The recipient is not required to take any action and receives a copy of the
+                  document after it is completed.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};

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

@@ -9,7 +9,11 @@ import { useForm } from 'react-hook-form';
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { DocumentAccessAuth, DocumentActionAuth } from '@documenso/lib/types/document-auth';
+import {
+  DocumentAccessAuth,
+  DocumentActionAuth,
+  DocumentAuth,
+} from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { DocumentStatus, type Field, type Recipient, SendStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -216,9 +220,9 @@ export const AddSettingsFormPartial = ({
                           </p>
 
                           <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
-                            <li>
+                            {/* <li>
                               <strong>Require account</strong> - The recipient must be signed in
-                            </li>
+                            </li> */}
                             <li>
                               <strong>Require passkey</strong> - The recipient must have an account
                               and passkey configured via their settings
@@ -242,11 +246,13 @@ export const AddSettingsFormPartial = ({
                         </SelectTrigger>
 
                         <SelectContent position="popper">
-                          {Object.values(DocumentActionAuth).map((authType) => (
-                            <SelectItem key={authType} value={authType}>
-                              {DOCUMENT_AUTH_TYPES[authType].value}
-                            </SelectItem>
-                          ))}
+                          {Object.values(DocumentActionAuth)
+                            .filter((auth) => auth !== DocumentAuth.ACCOUNT)
+                            .map((authType) => (
+                              <SelectItem key={authType} value={authType}>
+                                {DOCUMENT_AUTH_TYPES[authType].value}
+                              </SelectItem>
+                            ))}
 
                           {/* Note: -1 is remapped in the Zod schema to the required value. */}
                           <SelectItem value={'-1'}>None</SelectItem>

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

@@ -4,20 +4,18 @@ import React, { useId, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
-import { InfoIcon, Plus, Trash } from 'lucide-react';
+import { Plus, Trash } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
-import {
-  RecipientActionAuth,
-  ZRecipientAuthOptionsSchema,
-} from '@documenso/lib/types/document-auth';
+import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { RecipientRole, SendStatus } from '@documenso/prisma/client';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Button } from '../button';
@@ -25,10 +23,7 @@ import { Checkbox } from '../checkbox';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
-import { ROLE_ICONS } from '../recipient-role-icons';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
 import { useStep } from '../stepper';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import { useToast } from '../use-toast';
 import type { TAddSignersFormSchema } from './add-signers.types';
 import { ZAddSignersFormSchema } from './add-signers.types';
@@ -274,65 +269,11 @@ export const AddSignersFormPartial = ({
                       render={({ field }) => (
                         <FormItem className="col-span-6">
                           <FormControl>
-                            <Select
+                            <RecipientActionAuthSelect
                               {...field}
                               onValueChange={field.onChange}
                               disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
-                            >
-                              <SelectTrigger className="bg-background text-muted-foreground">
-                                <SelectValue placeholder="Inherit authentication method" />
-
-                                <Tooltip>
-                                  <TooltipTrigger className="-mr-1 ml-auto">
-                                    <InfoIcon className="mx-2 h-4 w-4" />
-                                  </TooltipTrigger>
-
-                                  <TooltipContent className="text-foreground max-w-md p-4">
-                                    <h2>
-                                      <strong>Recipient action authentication</strong>
-                                    </h2>
-
-                                    <p>The authentication required for recipients to sign fields</p>
-
-                                    <p className="mt-2">This will override any global settings.</p>
-
-                                    <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
-                                      <li>
-                                        <strong>Inherit authentication method</strong> - Use the
-                                        global action signing authentication method configured in
-                                        the "General Settings" step
-                                      </li>
-                                      <li>
-                                        <strong>Require account</strong> - The recipient must be
-                                        signed in
-                                      </li>
-                                      <li>
-                                        <strong>Require passkey</strong> - The recipient must have
-                                        an account and passkey configured via their settings
-                                      </li>
-                                      <li>
-                                        <strong>Require 2FA</strong> - The recipient must have an
-                                        account and 2FA enabled via their settings
-                                      </li>
-                                      <li>
-                                        <strong>None</strong> - No authentication required
-                                      </li>
-                                    </ul>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </SelectTrigger>
-
-                              <SelectContent position="popper">
-                                {/* Note: -1 is remapped in the Zod schema to the required value. */}
-                                <SelectItem value="-1">Inherit authentication method</SelectItem>
-
-                                {Object.values(RecipientActionAuth).map((authType) => (
-                                  <SelectItem key={authType} value={authType}>
-                                    {DOCUMENT_AUTH_TYPES[authType].value}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
+                            />
                           </FormControl>
 
                           <FormMessage />
@@ -346,100 +287,11 @@ export const AddSignersFormPartial = ({
                     render={({ field }) => (
                       <FormItem className="col-span-1 mt-auto">
                         <FormControl>
-                          <Select
+                          <RecipientRoleSelect
                             {...field}
                             onValueChange={field.onChange}
                             disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
-                          >
-                            <SelectTrigger className="bg-background w-[60px]">
-                              {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
-                              {ROLE_ICONS[field.value as RecipientRole]}
-                            </SelectTrigger>
-
-                            <SelectContent align="end">
-                              <SelectItem value={RecipientRole.SIGNER}>
-                                <div className="flex items-center">
-                                  <div className="flex w-[150px] items-center">
-                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                                    Needs to sign
-                                  </div>
-                                  <Tooltip>
-                                    <TooltipTrigger>
-                                      <InfoIcon className="h-4 w-4" />
-                                    </TooltipTrigger>
-                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                      <p>
-                                        The recipient is required to sign the document for it to be
-                                        completed.
-                                      </p>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </div>
-                              </SelectItem>
-
-                              <SelectItem value={RecipientRole.APPROVER}>
-                                <div className="flex items-center">
-                                  <div className="flex w-[150px] items-center">
-                                    <span className="mr-2">
-                                      {ROLE_ICONS[RecipientRole.APPROVER]}
-                                    </span>
-                                    Needs to approve
-                                  </div>
-                                  <Tooltip>
-                                    <TooltipTrigger>
-                                      <InfoIcon className="h-4 w-4" />
-                                    </TooltipTrigger>
-                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                      <p>
-                                        The recipient is required to approve the document for it to
-                                        be completed.
-                                      </p>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </div>
-                              </SelectItem>
-
-                              <SelectItem value={RecipientRole.VIEWER}>
-                                <div className="flex items-center">
-                                  <div className="flex w-[150px] items-center">
-                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                                    Needs to view
-                                  </div>
-                                  <Tooltip>
-                                    <TooltipTrigger>
-                                      <InfoIcon className="h-4 w-4" />
-                                    </TooltipTrigger>
-                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                      <p>
-                                        The recipient is required to view the document for it to be
-                                        completed.
-                                      </p>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </div>
-                              </SelectItem>
-
-                              <SelectItem value={RecipientRole.CC}>
-                                <div className="flex items-center">
-                                  <div className="flex w-[150px] items-center">
-                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                                    Receives copy
-                                  </div>
-                                  <Tooltip>
-                                    <TooltipTrigger>
-                                      <InfoIcon className="h-4 w-4" />
-                                    </TooltipTrigger>
-                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                      <p>
-                                        The recipient is not required to take any action and
-                                        receives a copy of the document after it is completed.
-                                      </p>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </div>
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
+                          />
                         </FormControl>
 
                         <FormMessage />

packages/ui/primitives/label.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 import { cn } from '../lib/utils';
 

packages/ui/primitives/password-input.tsx

@@ -4,7 +4,8 @@ import { Eye, EyeOff } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 import { Button } from './button';
-import { Input, InputProps } from './input';
+import type { InputProps } from './input';
+import { Input } from './input';
 
 const PasswordInput = React.forwardRef<HTMLInputElement, Omit<InputProps, 'type'>>(
   ({ className, ...props }, ref) => {

packages/ui/primitives/popover.tsx

@@ -30,4 +30,66 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+type PopoverHoverProps = {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  contentProps?: React.ComponentPropsWithoutRef<typeof PopoverContent>;
+};
+
+const PopoverHover = ({ trigger, children, contentProps }: PopoverHoverProps) => {
+  const [open, setOpen] = React.useState(false);
+
+  const isControlled = React.useRef(false);
+  const isMouseOver = React.useRef<boolean>(false);
+
+  const onMouseEnter = () => {
+    isMouseOver.current = true;
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setOpen(true);
+  };
+
+  const onMouseLeave = () => {
+    isMouseOver.current = false;
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setTimeout(() => {
+      setOpen(isMouseOver.current);
+    }, 200);
+  };
+
+  const onOpenChange = (newOpen: boolean) => {
+    isControlled.current = newOpen;
+
+    setOpen(newOpen);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        className="flex cursor-pointer outline-none"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {trigger}
+      </PopoverTrigger>
+
+      <PopoverContent
+        side="top"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...contentProps}
+      >
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverHover };

packages/ui/primitives/signature-pad/point.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   MouseEvent as ReactMouseEvent,
   PointerEvent as ReactPointerEvent,
   TouchEvent as ReactTouchEvent,

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

@@ -1,20 +1,25 @@
 'use client';
 
-import React, { useId, useState } from 'react';
+import React, { useId, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion } from 'framer-motion';
-import { InfoIcon, Plus, Trash } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { Plus, Trash } from 'lucide-react';
 import { useSession } from 'next-auth/react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 
+import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import { type Field, type Recipient, RecipientRole } from '@documenso/prisma/client';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 
+import { Checkbox } from '../checkbox';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -22,10 +27,8 @@ import {
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
 import type { DocumentFlowStep } from '../document-flow/types';
-import { ROLE_ICONS } from '../recipient-role-icons';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
 import { useStep } from '../stepper';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 
@@ -33,30 +36,29 @@ export type AddTemplatePlaceholderRecipientsFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
+  isTemplateOwnerEnterprise: boolean;
   onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
 };
 
 export const AddTemplatePlaceholderRecipientsFormPartial = ({
   documentFlow,
+  isTemplateOwnerEnterprise,
   recipients,
   fields: _fields,
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
   const { data: session } = useSession();
+
   const user = session?.user;
+
   const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
     recipients.length > 1 ? recipients.length + 1 : 2,
   );
 
   const { currentStep, totalSteps, previousStep } = useStep();
 
-  const {
-    control,
-    handleSubmit,
-    getValues,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
+  const form = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
     resolver: zodResolver(ZAddTemplatePlacholderRecipientsFormSchema),
     defaultValues: {
       signers:
@@ -67,6 +69,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
               name: recipient.name,
               email: recipient.email,
               role: recipient.role,
+              actionAuth:
+                ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
             }))
           : [
               {
@@ -74,12 +78,33 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                 name: `Recipient 1`,
                 email: `recipient.1@documenso.com`,
                 role: RecipientRole.SIGNER,
+                actionAuth: undefined,
               },
             ],
     },
   });
 
-  const onFormSubmit = handleSubmit(onSubmit);
+  // Always show advanced settings if any recipient has auth options.
+  const alwaysShowAdvancedSettings = useMemo(() => {
+    const recipientHasAuthOptions = recipients.find((recipient) => {
+      const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
+
+      return recipientAuthOptions?.accessAuth || recipientAuthOptions?.actionAuth;
+    });
+
+    const formHasActionAuth = form.getValues('signers').find((signer) => signer.actionAuth);
+
+    return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
+  }, [recipients, form]);
+
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
+
+  const {
+    formState: { errors, isSubmitting },
+    control,
+  } = form;
+
+  const onFormSubmit = form.handleSubmit(onSubmit);
 
   const {
     append: appendSigner,
@@ -102,7 +127,9 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
+      // Update TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX if this is ever changed.
       name: `Recipient ${placeholderRecipientCount}`,
+      // Update TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX if this is ever changed.
       email: `recipient.${placeholderRecipientCount}@documenso.com`,
       role: RecipientRole.SIGNER,
     });
@@ -117,180 +144,176 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   return (
     <>
       <DocumentFlowFormContainerContent>
-        <div className="flex w-full flex-col gap-y-4">
-          <AnimatePresence>
-            {signers.map((signer, index) => (
-              <motion.div
-                key={signer.id}
-                data-native-id={signer.nativeId}
-                className="flex flex-wrap items-end gap-x-4"
-              >
-                <div className="flex-1">
-                  <Label htmlFor={`signer-${signer.id}-email`}>Email</Label>
+        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
+          <Form {...form}>
+            <div className="flex w-full flex-col gap-y-2">
+              {signers.map((signer, index) => (
+                <motion.fieldset
+                  key={signer.id}
+                  data-native-id={signer.nativeId}
+                  disabled={isSubmitting}
+                  className={cn('grid grid-cols-8 gap-4 pb-4', {
+                    'border-b pt-2': showAdvancedSettings,
+                  })}
+                >
+                  <FormField
+                    control={form.control}
+                    name={`signers.${index}.email`}
+                    render={({ field }) => (
+                      <FormItem
+                        className={cn('relative', {
+                          'col-span-3': !showAdvancedSettings,
+                          'col-span-4': showAdvancedSettings,
+                        })}
+                      >
+                        {!showAdvancedSettings && index === 0 && (
+                          <FormLabel required>Email</FormLabel>
+                        )}
 
-                  <Input
-                    id={`signer-${signer.id}-email`}
-                    type="email"
-                    value={signer.email}
-                    disabled
-                    className="bg-background mt-2"
-                  />
-                </div>
+                        <FormControl>
+                          <Input
+                            type="email"
+                            placeholder="Email"
+                            {...field}
+                            disabled={isSubmitting || signers[index].email === user?.email}
+                          />
+                        </FormControl>
 
-                <div className="flex-1">
-                  <Label htmlFor={`signer-${signer.id}-name`}>Name</Label>
-
-                  <Input
-                    id={`signer-${signer.id}-name`}
-                    type="text"
-                    value={signer.name}
-                    disabled
-                    className="bg-background mt-2"
-                  />
-                </div>
-
-                <div className="w-[60px]">
-                  <Controller
-                    control={control}
-                    name={`signers.${index}.role`}
-                    render={({ field: { value, onChange } }) => (
-                      <Select value={value} onValueChange={(x) => onChange(x)}>
-                        <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
-
-                        <SelectContent className="" align="end">
-                          <SelectItem value={RecipientRole.SIGNER}>
-                            <div className="flex items-center">
-                              <div className="flex w-[150px] items-center">
-                                <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                                Needs to sign
-                              </div>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="h-4 w-4" />
-                                </TooltipTrigger>
-                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                  <p>
-                                    The recipient is required to sign the document for it to be
-                                    completed.
-                                  </p>
-                                </TooltipContent>
-                              </Tooltip>
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.APPROVER}>
-                            <div className="flex items-center">
-                              <div className="flex w-[150px] items-center">
-                                <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                                Needs to approve
-                              </div>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="h-4 w-4" />
-                                </TooltipTrigger>
-                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                  <p>
-                                    The recipient is required to approve the document for it to be
-                                    completed.
-                                  </p>
-                                </TooltipContent>
-                              </Tooltip>
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.VIEWER}>
-                            <div className="flex items-center">
-                              <div className="flex w-[150px] items-center">
-                                <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                                Needs to view
-                              </div>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="h-4 w-4" />
-                                </TooltipTrigger>
-                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                  <p>
-                                    The recipient is required to view the document for it to be
-                                    completed.
-                                  </p>
-                                </TooltipContent>
-                              </Tooltip>
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.CC}>
-                            <div className="flex items-center">
-                              <div className="flex w-[150px] items-center">
-                                <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                                Receives copy
-                              </div>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="h-4 w-4" />
-                                </TooltipTrigger>
-                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                                  <p>
-                                    The recipient is not required to take any action and receives a
-                                    copy of the document after it is completed.
-                                  </p>
-                                </TooltipContent>
-                              </Tooltip>
-                            </div>
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name={`signers.${index}.name`}
+                    render={({ field }) => (
+                      <FormItem
+                        className={cn({
+                          'col-span-3': !showAdvancedSettings,
+                          'col-span-4': showAdvancedSettings,
+                        })}
+                      >
+                        {!showAdvancedSettings && index === 0 && <FormLabel>Name</FormLabel>}
+
+                        <FormControl>
+                          <Input
+                            placeholder="Name"
+                            {...field}
+                            disabled={isSubmitting || signers[index].email === user?.email}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {showAdvancedSettings && isTemplateOwnerEnterprise && (
+                    <FormField
+                      control={form.control}
+                      name={`signers.${index}.actionAuth`}
+                      render={({ field }) => (
+                        <FormItem className="col-span-6">
+                          <FormControl>
+                            <RecipientActionAuthSelect
+                              {...field}
+                              onValueChange={field.onChange}
+                              disabled={isSubmitting}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+
+                  <FormField
+                    name={`signers.${index}.role`}
+                    render={({ field }) => (
+                      <FormItem className="col-span-1 mt-auto">
+                        <FormControl>
+                          <RecipientRoleSelect
+                            {...field}
+                            onValueChange={field.onChange}
+                            disabled={isSubmitting}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
-                </div>
 
-                <div>
                   <button
                     type="button"
-                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    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)}
                   >
                     <Trash className="h-5 w-5" />
                   </button>
-                </div>
+                </motion.fieldset>
+              ))}
+            </div>
 
-                <div className="w-full">
-                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
-                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
-                </div>
-              </motion.div>
-            ))}
-          </AnimatePresence>
-        </div>
+            <FormErrorMessage
+              className="mt-2"
+              // Dirty hack to handle errors when .root is populated for an array type
+              error={'signers__root' in errors && errors['signers__root']}
+            />
 
-        <FormErrorMessage
-          className="mt-2"
-          // Dirty hack to handle errors when .root is populated for an array type
-          error={'signers__root' in errors && errors['signers__root']}
-        />
+            <div
+              className={cn('mt-2 flex flex-row items-center space-x-4', {
+                'mt-4': showAdvancedSettings,
+              })}
+            >
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={isSubmitting}
+                onClick={() => onAddPlaceholderRecipient()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add Placeholder Recipient
+              </Button>
 
-        <div className="mt-4 flex flex-row items-center space-x-4">
-          <Button
-            type="button"
-            className="flex-1"
-            disabled={isSubmitting}
-            onClick={() => onAddPlaceholderRecipient()}
-          >
-            <Plus className="-ml-1 mr-2 h-5 w-5" />
-            Add Placeholder Recipient
-          </Button>
-          <Button
-            type="button"
-            className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
-            disabled={
-              isSubmitting || getValues('signers').some((signer) => signer.email === user?.email)
-            }
-            onClick={() => onAddPlaceholderSelfRecipient()}
-          >
-            <Plus className="-ml-1 mr-2 h-5 w-5" />
-            Add Myself
-          </Button>
-        </div>
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                disabled={
+                  isSubmitting ||
+                  form.getValues('signers').some((signer) => signer.email === user?.email)
+                }
+                onClick={() => onAddPlaceholderSelfRecipient()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add Myself
+              </Button>
+            </div>
+
+            {!alwaysShowAdvancedSettings && isTemplateOwnerEnterprise && (
+              <div className="mt-4 flex flex-row items-center">
+                <Checkbox
+                  id="showAdvancedRecipientSettings"
+                  className="h-5 w-5"
+                  checkClassName="dark:text-white text-primary"
+                  checked={showAdvancedSettings}
+                  onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
+                />
+
+                <label
+                  className="text-muted-foreground ml-2 text-sm"
+                  htmlFor="showAdvancedRecipientSettings"
+                >
+                  Show advanced settings
+                </label>
+              </div>
+            )}
+          </Form>
+        </AnimateGenericFadeInOut>
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>

packages/ui/primitives/template-flow/add-template-placeholder-recipients.types.ts

@@ -1,5 +1,8 @@
 import { z } from 'zod';
 
+import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
+
+import { ZMapNegativeOneToUndefinedSchema } from '../document-flow/add-settings.types';
 import { RecipientRole } from '.prisma/client';
 
 export const ZAddTemplatePlacholderRecipientsFormSchema = z
@@ -11,6 +14,9 @@ export const ZAddTemplatePlacholderRecipientsFormSchema = z
         email: z.string().min(1).email(),
         name: z.string(),
         role: z.nativeEnum(RecipientRole),
+        actionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+          ZRecipientActionAuthTypesSchema.optional(),
+        ),
       }),
     ),
   })

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

@@ -0,0 +1,281 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { InfoIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import type { Template, TemplateDocumentMeta } from '@documenso/prisma/client';
+import { type Recipient, SendStatus } from '@documenso/prisma/client';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+
+import { Combobox } from '../combobox';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from '../document-flow/document-flow-root';
+import type { DocumentFlowStep } from '../document-flow/types';
+import { Input } from '../input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { useStep } from '../stepper';
+import { Textarea } from '../textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import type { TTemplateSettingsFormSchema } from './add-template-settings.types';
+import { ZTemplateSettingsFormSchema } from './add-template-settings.types';
+
+export type AddSettingsFormProps = {
+  template: Template;
+  documentFlow: DocumentFlowStep;
+  recipients: Recipient[];
+  documentMeta: TemplateDocumentMeta | null;
+  onSubmit: (_data: TTemplateSettingsFormSchema) => void;
+};
+
+export const AddTemplateSettingsFormPartial = ({
+  documentFlow,
+  recipients,
+  documentMeta,
+  template,
+  onSubmit,
+}: AddSettingsFormProps) => {
+  const form = useForm<TTemplateSettingsFormSchema>({
+    resolver: zodResolver(ZTemplateSettingsFormSchema),
+    defaultValues: {
+      title: template.title,
+      meta: {
+        subject: documentMeta?.subject ?? '',
+        message: documentMeta?.message ?? '',
+        timezone: documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+        dateFormat: documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        redirectUrl: documentMeta?.redirectUrl ?? '',
+      },
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  const documentHasBeenSent = recipients.some(
+    (recipient) => recipient.sendStatus === SendStatus.SENT,
+  );
+
+  useEffect(() => {
+    if (!form.formState.touchedFields.meta?.timezone && !documentHasBeenSent) {
+      form.setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+  }, [documentHasBeenSent, form, form.setValue, form.formState.touchedFields.meta?.timezone]);
+
+  return (
+    <>
+      <DocumentFlowFormContainerContent>
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Title</FormLabel>
+                  <FormControl>
+                    <Input className="bg-background" {...field} disabled={field.disabled} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Accordion type="multiple" className="mt-6">
+              <AccordionItem value="advanced-options" className="border-none">
+                <AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                  Advanced Options
+                </AccordionTrigger>
+
+                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
+                  <div className="flex flex-col space-y-6 ">
+                    <FormField
+                      control={form.control}
+                      name="meta.dateFormat"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Date Format</FormLabel>
+
+                          <FormControl>
+                            <Select
+                              {...field}
+                              onValueChange={field.onChange}
+                              disabled={documentHasBeenSent}
+                            >
+                              <SelectTrigger className="bg-background">
+                                <SelectValue />
+                              </SelectTrigger>
+
+                              <SelectContent>
+                                {DATE_FORMATS.map((format) => (
+                                  <SelectItem key={format.key} value={format.value}>
+                                    {format.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.subject"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            Subject{' '}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <InfoIcon className="mx-2 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground max-w-xs">
+                                Add email subject
+                              </TooltipContent>
+                            </Tooltip>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Input
+                              id="subject"
+                              className="bg-background mt-2"
+                              disabled={field.disabled}
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.message"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            Message{' '}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <InfoIcon className="mx-2 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground max-w-xs">
+                                Add message to send in the email
+                              </TooltipContent>
+                            </Tooltip>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Textarea
+                              id="message"
+                              className="bg-background mt-2 h-24 resize-none"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.timezone"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Time Zone</FormLabel>
+
+                          <FormControl>
+                            <Combobox
+                              className="bg-background"
+                              options={TIME_ZONES}
+                              {...field}
+                              onChange={(value) => value && field.onChange(value)}
+                              disabled={documentHasBeenSent}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.redirectUrl"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            Redirect URL{' '}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <InfoIcon className="mx-2 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground max-w-xs">
+                                Add a URL to redirect the user to once the document is signed
+                              </TooltipContent>
+                            </Tooltip>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Input className="bg-background" {...field} />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/template-flow/add-template-settings.types.ts

@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { URL_REGEX } from '@documenso/lib/constants/url-regex';
+import {
+  ZDocumentAccessAuthTypesSchema,
+  ZDocumentActionAuthTypesSchema,
+} from '@documenso/lib/types/document-auth';
+
+export const ZMapNegativeOneToUndefinedSchema = z
+  .string()
+  .optional()
+  .transform((val) => {
+    if (val === '-1') {
+      return undefined;
+    }
+
+    return val;
+  });
+
+export const ZTemplateSettingsFormSchema = z.object({
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
+  globalAccessAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentAccessAuthTypesSchema.optional(),
+  ),
+  globalActionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentActionAuthTypesSchema.optional(),
+  ),
+  meta: z.object({
+    subject: z.string().optional(),
+    message: z.string().optional(),
+    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
+    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
+    redirectUrl: z
+      .string()
+      .optional()
+      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
+        message: 'Please enter a valid URL',
+      }),
+  }),
+});
+
+export type TTemplateSettingsFormSchema = z.infer<typeof ZTemplateSettingsFormSchema>;