chore: draft onBlur and unmount

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
2024-04-29 01:17:32 +05:30
51 changed files with 555 additions and 1025 deletions
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } 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 putPdfFile(uploadedFile.file);
+      const putFileData = await putFile(uploadedFile.file);

      const documentToken = await createSinglePlayerDocument({
        documentData: {
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
@@ -8,7 +8,6 @@ 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';
@@ -21,7 +20,6 @@ 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,
@@ -86,16 +84,11 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
    documentMeta.password = securePassword;
  }

-  const [recipients, completedFields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      teamId: team?.id,
-      userId: user.id,
-    }),
-    getCompletedFieldsForDocument({
-      documentId,
-    }),
-  ]);
+  const recipients = await getRecipientsForDocument({
+    documentId,
+    teamId: team?.id,
+    userId: user.id,
+  });

  const documentWithRecipients = {
    ...document,
@@ -162,13 +155,6 @@ 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">
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -224,6 +224,10 @@ export const EditDocumentForm = ({
    }
  };

+  const setSubjectFormFields = (subject?: string, message?: string) => {
+    // Add functionality here
+  };
+
  const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
    try {
      await addFields({
@@ -359,6 +363,7 @@ export const EditDocumentForm = ({
              fields={fields}
              onSubmit={onAddSubjectFormSubmit}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              setSubjectFormFields={setSubjectFormFields}
            />
          </Stepper>
        </DocumentFlowFormContainer>
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
@@ -133,11 +133,7 @@ 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}
-            documentStatus={document.status}
-          />
+          <DownloadCertificateButton className="mr-2" documentId={document.id} />

          <DownloadAuditLogButton documentId={document.id} />
        </div>
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx
@@ -2,7 +2,6 @@

 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';
@@ -11,13 +10,11 @@ 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();

@@ -72,7 +69,6 @@ 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" />}
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@@ -10,9 +10,8 @@ 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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } 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';
@@ -58,7 +57,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
    try {
      setIsLoading(true);

-      const { type, data } = await putPdfFile(file);
+      const { type, data } = await putFile(file);

      const { id: documentDataId } = await createDocumentData({
        type,
@@ -84,21 +83,13 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
      });

      router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
-    } catch (err) {
-      const error = AppError.parseError(err);
+    } catch (error) {
+      console.error(error);

-      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) {
+      if (error instanceof TRPCClientError) {
        toast({
          title: 'Error',
-          description: err.message,
+          description: error.message,
          variant: 'destructive',
        });
      } else {
--- a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
+++ b/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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } 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 putPdfFile(file);
+      const { type, data } = await putFile(file);

      const { id: templateDocumentDataId } = await createDocumentData({
        type,
--- a/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
@@ -1,16 +1,14 @@
 import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { InfoIcon, Plus } from 'lucide-react';
-import { useFieldArray, useForm } from 'react-hook-form';
+import { Plus } from 'lucide-react';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';

-import { TEMPLATE_RECIPIENT_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,
@@ -21,59 +19,24 @@ import {
  DialogTitle,
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-import type { Toast } from '@documenso/ui/primitives/use-toast';
+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 { useToast } from '@documenso/ui/primitives/use-toast';

 import { useOptionalCurrentTeam } from '~/providers/team';

-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'],
-      });
-    }
-  });
+const ZAddRecipientsForNewDocumentSchema = z.object({
+  recipients: z.array(
+    z.object({
+      email: z.string().email(),
+      name: z.string(),
+      role: z.nativeEnum(RecipientRole),
+    }),
+  ),
+});

 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;

@@ -93,31 +56,33 @@ export function UseTemplateDialog({

  const team = useOptionalCurrentTeam();

-  const form = useForm<TAddRecipientsForNewDocumentSchema>({
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddRecipientsForNewDocumentSchema>({
    resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
    defaultValues: {
-      sendDocument: false,
-      recipients: recipients.map((recipient) => {
-        const isRecipientPlaceholder = recipient.email.match(TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX);
-
-        if (isRecipientPlaceholder) {
-          return {
-            id: recipient.id,
-            name: '',
-            email: '',
-          };
-        }
-
-        return {
-          id: recipient.id,
-          name: recipient.name,
-          email: recipient.email,
-        };
-      }),
+      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,
+              },
+            ],
    },
  });

-  const { mutateAsync: createDocumentFromTemplate } =
+  const { mutateAsync: createDocumentFromTemplate, isLoading: isCreatingDocumentFromTemplate } =
    trpc.template.createDocumentFromTemplate.useMutation();

  const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
@@ -126,7 +91,6 @@ export function UseTemplateDialog({
        templateId,
        teamId: team?.id,
        recipients: data.recipients,
-        sendDocument: data.sendDocument,
      });

      toast({
@@ -137,24 +101,18 @@ export function UseTemplateDialog({

      router.push(`${documentRootPath}/${id}`);
    } catch (err) {
-      const error = AppError.parseError(err);
-
-      const toastPayload: Toast = {
+      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: form.control,
+    control,
    name: 'recipients',
  });

@@ -168,110 +126,121 @@ export function UseTemplateDialog({
      </DialogTrigger>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
-          <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>
+          <DialogTitle>Document Recipients</DialogTitle>
+          <DialogDescription>Add the recipients to create the template 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>

-        <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} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
+                <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}
                    />
-
-                    <FormField
-                      control={form.control}
-                      name={`recipients.${index}.name`}
-                      render={({ field }) => (
-                        <FormItem className="w-full">
-                          {index === 0 && <FormLabel>Name</FormLabel>}
-
-                          <FormControl>
-                            <Input {...field} placeholder={recipients[index].name} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                ))}
+                  )}
+                />
              </div>

-              {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}
-                          />
+              <div className="flex-1">
+                <Label htmlFor={`recipient-${recipient.id}-name`}>Name</Label>

-                          <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>
+                <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}
+                    />
+                  )}
+                />
+              </div>

-                              <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>
+              <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>

-                                <p>Otherwise, the document will be created as a draft.</p>
-                              </TooltipContent>
-                            </Tooltip>
-                          </label>
-                        </div>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              )}
+                      <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>

-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                    Close
-                  </Button>
-                </DialogClose>
+                        <SelectItem value={RecipientRole.CC}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                            Receives copy
+                          </div>
+                        </SelectItem>

-                <Button type="submit" loading={form.formState.isSubmitting}>
-                  {form.getValues('sendDocument') ? 'Create and send' : 'Create as draft'}
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
+                        <SelectItem value={RecipientRole.APPROVER}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+                            Approver
+                          </div>
+                        </SelectItem>
+
+                        <SelectItem value={RecipientRole.VIEWER}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                            Viewer
+                          </div>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </div>
+
+              <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>
      </DialogContent>
    </Dialog>
  );
--- a/apps/web/src/app/(signing)/sign/[token]/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx
@@ -6,7 +6,6 @@ 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';
@@ -38,7 +37,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp

  const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);

-  const [document, fields, recipient, completedFields] = await Promise.all([
+  const [document, fields, recipient] = await Promise.all([
    getDocumentAndSenderByToken({
      token,
      userId: user?.id,
@@ -46,7 +45,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
    }).catch(() => null),
    getFieldsForToken({ token }),
    getRecipientByToken({ token }).catch(() => null),
-    getCompletedFieldsForToken({ token }),
  ]);

  if (
@@ -127,12 +125,7 @@ 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}
-          completedFields={completedFields}
-        />
+        <SigningPageView recipient={recipient} document={document} fields={fields} />
      </DocumentAuthProvider>
    </SigningProvider>
  );
--- a/apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx
@@ -4,14 +4,12 @@ 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';
@@ -25,15 +23,9 @@ export type SigningPageViewProps = {
  document: DocumentAndSender;
  recipient: Recipient;
  fields: Field[];
-  completedFields: CompletedField[];
 };

-export const SigningPageView = ({
-  document,
-  recipient,
-  fields,
-  completedFields,
-}: SigningPageViewProps) => {
+export const SigningPageView = ({ document, recipient, fields }: SigningPageViewProps) => {
  const truncatedTitle = truncateTitle(document.title);

  const { documentData, documentMeta } = document;
@@ -78,8 +70,6 @@ export const SigningPageView = ({
        </div>
      </div>

-      <DocumentReadOnlyFields fields={completedFields} />
-
      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
        {fields.map((field) =>
          match(field.type)
--- a/apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx
+++ b/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 dark:prose-invert">
+      <article className="prose">
        <h1>Electronic Signature Disclosure</h1>

        <h2>Welcome</h2>
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
@@ -1,10 +1,12 @@
 '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 { PopoverHover } from '@documenso/ui/primitives/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';

 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
@@ -23,6 +25,11 @@ 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',
  );
@@ -39,74 +46,117 @@ 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 (
-    <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>
+    <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>
              </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>
-      )}
-    </PopoverHover>
+        {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>
  );
 };
--- a/apps/web/src/components/document/document-read-only-fields.tsx
+++ b/apps/web/src/components/document/document-read-only-fields.tsx
@@ -1,112 +0,0 @@
-'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>
-  );
-};
--- a/apps/web/src/pages/api/auth/[...nextauth].ts
+++ b/apps/web/src/pages/api/auth/[...nextauth].ts
@@ -2,8 +2,6 @@ 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';
@@ -20,29 +18,15 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
      error: '/signin',
    },
    events: {
-      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);
-          });
-        }
+      signIn: async ({ user }) => {
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId: user.id,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.SIGN_IN,
+          },
+        });
      },
      signOut: async ({ token }) => {
        const userId = typeof token.id === 'string' ? parseInt(token.id) : token.id;
--- a/apps/web/src/pages/api/trpc/[trpc].ts
+++ b/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: 120,
+  maxDuration: 60,
  api: {
    bodyParser: {
      sizeLimit: '50mb',
--- a/package-lock.json
+++ b/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.41.0",
        "prettier": "^2.5.1",
        "rimraf": "^5.0.1",
        "turbo": "^1.9.3"
@@ -4702,26 +4702,13 @@
        "node": ">=14"
      }
    },
-    "node_modules/@playwright/browser-chromium": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/@playwright/browser-chromium/-/browser-chromium-1.43.0.tgz",
-      "integrity": "sha512-F0S4KIqSqQqm9EgsdtWjaJRpgP8cD2vWZHPSB41YI00PtXUobiv/3AnYISeL7wNuTanND7giaXQ4SIjkcIq3KQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "playwright-core": "1.43.0"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
    "node_modules/@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz",
+      "integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.43.1"
+        "playwright": "1.40.0"
      },
      "bin": {
        "playwright": "cli.js"
@@ -4745,12 +4732,12 @@
      }
    },
    "node_modules/@playwright/test/node_modules/playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
+      "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.40.0"
      },
      "bin": {
        "playwright": "cli.js"
@@ -4763,9 +4750,9 @@
      }
    },
    "node_modules/@playwright/test/node_modules/playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
+      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
@@ -17673,11 +17660,11 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz",
-      "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==",
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.0.tgz",
+      "integrity": "sha512-XOsfl5ZtAik/T9oek4V0jAypNlaCNzuKOwVhqhgYT3os6kH34PzbRb74F0VWcLYa5WFdnmxl7qyAHBXvPv7lqQ==",
      "dependencies": {
-        "playwright-core": "1.43.0"
+        "playwright-core": "1.41.0"
      },
      "bin": {
        "playwright": "cli.js"
@@ -17689,17 +17676,6 @@
        "fsevents": "2.3.2"
      }
    },
-    "node_modules/playwright-core": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz",
-      "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
    "node_modules/playwright/node_modules/fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -17713,6 +17689,17 @@
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
+    "node_modules/playwright/node_modules/playwright-core": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.0.tgz",
+      "integrity": "sha512-UGKASUhXmvqm2Lxa1fNr8sFwAtqjpgBRr9jQ7XBI8Rn5uFiEowGUGwrruUQsVPIom4bk7Lt+oLGpXobnXzrBIw==",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "node_modules/possible-typed-array-names": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -24981,7 +24968,7 @@
        "next-auth": "4.24.5",
        "oslo": "^0.17.0",
        "pdf-lib": "^1.17.1",
-        "playwright": "1.43.0",
+        "playwright": "1.41.0",
        "react": "18.2.0",
        "remeda": "^1.27.1",
        "stripe": "^12.7.0",
@@ -24989,10 +24976,23 @@
        "zod": "^3.22.4"
      },
      "devDependencies": {
-        "@playwright/browser-chromium": "1.43.0",
+        "@playwright/browser-chromium": "1.41.0",
        "@types/luxon": "^3.3.1"
      }
    },
+    "packages/lib/node_modules/@playwright/browser-chromium": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/@playwright/browser-chromium/-/browser-chromium-1.41.0.tgz",
+      "integrity": "sha512-TaHfh3rDsz4+tVKdMMo4kdFOk8/4U6cPyMXHhoiJVmhOhjHXjR0qPMoa5gz5jDGl478cn5SoXmtgKPgTDFuS0g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "playwright-core": "1.41.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "packages/lib/node_modules/nanoid": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
@@ -25010,6 +25010,18 @@
        "node": "^14 || ^16 || >=18"
      }
    },
+    "packages/lib/node_modules/playwright-core": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.0.tgz",
+      "integrity": "sha512-UGKASUhXmvqm2Lxa1fNr8sFwAtqjpgBRr9jQ7XBI8Rn5uFiEowGUGwrruUQsVPIom4bk7Lt+oLGpXobnXzrBIw==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "packages/prettier-config": {
      "name": "@documenso/prettier-config",
      "version": "0.0.0",
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
    "eslint-config-custom": "*",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
-    "playwright": "1.43.0",
+    "playwright": "1.41.0",
    "prettier": "^2.5.1",
    "rimraf": "^5.0.1",
    "turbo": "^1.9.3"
--- a/packages/api/v1/implementation.ts
+++ b/packages/api/v1/implementation.ts
@@ -22,7 +22,7 @@ import { updateRecipient } from '@documenso/lib/server-only/recipient/update-rec
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import {
  getPresignGetUrl,
  getPresignPostUrl,
@@ -229,13 +229,6 @@ 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,
@@ -303,7 +296,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
        formValues: body.formValues,
      });

-      const newDocumentData = await putPdfFile({
+      const newDocumentData = await putFile({
        name: fileName,
        type: 'application/pdf',
        arrayBuffer: async () => Promise.resolve(prefilled),
@@ -331,7 +324,10 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
      await upsertDocumentMeta({
        documentId: document.id,
        userId: user.id,
-        ...body.meta,
+        subject: body.meta.subject,
+        message: body.meta.message,
+        dateFormat: body.meta.dateFormat,
+        timezone: body.meta.timezone,
        requestMetadata: extractNextApiRequestMetadata(args.req),
      });
    }
--- a/packages/api/v1/schema.ts
+++ b/packages/api/v1/schema.ts
@@ -100,21 +100,13 @@ export type TCreateDocumentMutationResponseSchema = z.infer<

 export const ZCreateDocumentFromTemplateMutationSchema = z.object({
  title: z.string().min(1),
-  recipients: z.union([
-    z.array(
-      z.object({
-        id: z.number(),
-        name: z.string().min(1),
-        email: z.string().email().min(1),
-      }),
-    ),
-    z.array(
-      z.object({
-        name: z.string().min(1),
-        email: z.string().email().min(1),
-      }),
-    ),
-  ]),
+  recipients: z.array(
+    z.object({
+      name: z.string().min(1),
+      email: z.string().email().min(1),
+      role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+    }),
+  ),
  meta: z
    .object({
      subject: z.string(),
--- a/packages/app-tests/e2e/templates/manage-templates.spec.ts
+++ b/packages/app-tests/e2e/templates/manage-templates.spec.ts
@@ -189,14 +189,7 @@ test('[TEMPLATES]: use template', async ({ page }) => {

  // Use personal template.
  await page.getByRole('button', { name: 'Use Template' }).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.getByRole('button', { name: 'Create Document' }).click();
  await page.waitForURL(/documents/);
  await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
  await page.waitForURL('/documents');
@@ -207,14 +200,7 @@ test('[TEMPLATES]: use template', async ({ page }) => {

  // Use team template.
  await page.getByRole('button', { name: 'Use Template' }).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.getByRole('button', { name: 'Create Document' }).click();
  await page.waitForURL(/\/t\/.+\/documents/);
  await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
  await page.waitForURL(`/t/${team.url}/documents`);
--- a/packages/ee/server-only/stripe/webhook/on-early-adopters-checkout.ts
+++ b/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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } 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 putPdfFile({
+    const { id: documentDataId } = await putFile({
      name: 'Documenso Supporter Pledge.pdf',
      type: 'application/pdf',
      arrayBuffer: async () => Promise.resolve(documentBuffer),
--- a/packages/lib/constants/feature-flags.ts
+++ b/packages/lib/constants/feature-flags.ts
@@ -21,7 +21,6 @@ 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.
--- a/packages/lib/constants/template.ts
+++ b/packages/lib/constants/template.ts
@@ -1 +0,0 @@
-export const TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;
--- a/packages/lib/package.json
+++ b/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.41.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.41.0"
  }
 }
--- a/packages/lib/server-only/document/complete-document-with-token.ts
+++ b/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 haveAllRecipientsSigned = await prisma.document.findFirst({
+  const documents = await prisma.document.updateMany({
    where: {
      id: document.id,
      Recipient: {
@@ -146,9 +146,13 @@ export const completeDocumentWithToken = async ({
        },
      },
    },
+    data: {
+      status: DocumentStatus.COMPLETED,
+      completedAt: new Date(),
+    },
  });

-  if (haveAllRecipientsSigned) {
+  if (documents.count > 0) {
    await sealDocument({ documentId: document.id, requestMetadata });
  }

--- a/packages/lib/server-only/document/delete-document.ts
+++ b/packages/lib/server-only/document/delete-document.ts
@@ -75,20 +75,18 @@ 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: {
-          id: userRecipient.id,
+    await prisma.recipient.update({
+      where: {
+        documentId_email: {
+          documentId: document.id,
+          email: user.email,
        },
-        data: {
-          documentDeletedAt: new Date().toISOString(),
-        },
-      })
-      .catch(() => {
-        // Do nothing.
-      });
+      },
+      data: {
+        documentDeletedAt: new Date().toISOString(),
+      },
+    });
  }

  // Return partial document for API v1 response.
--- a/packages/lib/server-only/document/resend-document.tsx
+++ b/packages/lib/server-only/document/resend-document.tsx
@@ -110,7 +110,7 @@ export const resendDocument = async ({
        assetBaseUrl,
        signDocumentLink,
        customBody: renderCustomEmailTemplate(
-          selfSigner && !customEmail?.message ? selfSignerCustomEmail : customEmail?.message || '',
+          selfSigner ? selfSignerCustomEmail : customEmail?.message || '',
          customEmailTemplate,
        ),
        role: recipient.role,
@@ -135,7 +135,7 @@ export const resendDocument = async ({
              address: FROM_ADDRESS,
            },
            subject: customEmail?.subject
-              ? renderCustomEmailTemplate(`Reminder: ${customEmail.subject}`, customEmailTemplate)
+              ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
              : emailSubject,
            html: render(template),
            text: render(template, { plainText: true }),
--- a/packages/lib/server-only/document/seal-document.ts
+++ b/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 { putPdfFile } from '../../universal/upload/put-file';
+import { putFile } 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,11 +40,6 @@ export const sealDocument = async ({
  const document = await prisma.document.findFirstOrThrow({
    where: {
      id: documentId,
-      Recipient: {
-        every: {
-          signingStatus: SigningStatus.SIGNED,
-        },
-      },
    },
    include: {
      documentData: true,
@@ -58,6 +53,10 @@ 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,
@@ -93,9 +92,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))
-    .catch(() => null);
+  const certificate = await getCertificatePdf({ documentId }).then(async (doc) =>
+    PDFDocument.load(doc),
+  );

  const doc = await PDFDocument.load(pdfData);

@@ -104,13 +103,11 @@ export const sealDocument = async ({
  doc.getForm().flatten();
  flattenAnnotations(doc);

-  if (certificate) {
-    const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());
+  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);
@@ -122,7 +119,7 @@ export const sealDocument = async ({

  const { name, ext } = path.parse(document.title);

-  const { data: newData } = await putPdfFile({
+  const { data: newData } = await putFile({
    name: `${name}_signed${ext}`,
    type: 'application/pdf',
    arrayBuffer: async () => Promise.resolve(pdfBuffer),
@@ -141,16 +138,6 @@ 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,
--- a/packages/lib/server-only/document/send-document.tsx
+++ b/packages/lib/server-only/document/send-document.tsx
@@ -4,11 +4,8 @@ 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';
@@ -21,6 +18,7 @@ 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';

@@ -102,7 +100,7 @@ export const sendDocument = async ({
      formValues: document.formValues as Record<string, string | number | boolean>,
    });

-    const newDocumentData = await putPdfFile({
+    const newDocumentData = await putFile({
      name: document.title,
      type: 'application/pdf',
      arrayBuffer: async () => Promise.resolve(prefilled),
@@ -151,7 +149,7 @@ export const sendDocument = async ({
        assetBaseUrl,
        signDocumentLink,
        customBody: renderCustomEmailTemplate(
-          selfSigner && !customEmail?.message ? selfSignerCustomEmail : customEmail?.message || '',
+          selfSigner ? selfSignerCustomEmail : customEmail?.message || '',
          customEmailTemplate,
        ),
        role: recipient.role,
@@ -213,31 +211,6 @@ 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({
--- a/packages/lib/server-only/field/get-completed-fields-for-document.ts
+++ b/packages/lib/server-only/field/get-completed-fields-for-document.ts
@@ -1,29 +0,0 @@
-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,
-        },
-      },
-    },
-  });
-};
--- a/packages/lib/server-only/field/get-completed-fields-for-token.ts
+++ b/packages/lib/server-only/field/get-completed-fields-for-token.ts
@@ -1,33 +0,0 @@
-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,
-        },
-      },
-    },
-  });
-};
--- a/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
+++ b/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
@@ -18,9 +18,7 @@ export const getCertificatePdf = async ({ documentId }: GetCertificatePdfOptions
  let browser: Browser;

  if (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);
+    browser = await chromium.connect(process.env.NEXT_PRIVATE_BROWSERLESS_URL);
  } else {
    browser = await chromium.launch();
  }
@@ -35,7 +33,6 @@ 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({
--- a/packages/lib/server-only/template/create-document-from-template.ts
+++ b/packages/lib/server-only/template/create-document-from-template.ts
@@ -1,35 +1,16 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
-import type { Field } from '@documenso/prisma/client';
-import { type Recipient, WebhookTriggerEvents } from '@documenso/prisma/client';
-
-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 RecipientWithId = {
-  id: number;
-  name?: string;
-  email: string;
-};
-
-type FinalRecipient = Pick<Recipient, 'name' | 'email' | 'role'> & {
-  templateRecipientId: number;
-  fields: Field[];
-};
+import type { RecipientRole } from '@documenso/prisma/client';

 export type CreateDocumentFromTemplateOptions = {
  templateId: number;
  userId: number;
  teamId?: number;
-  recipients:
-    | RecipientWithId[]
-    | {
-        name?: string;
-        email: string;
-      }[];
-  requestMetadata?: RequestMetadata;
+  recipients?: {
+    name?: string;
+    email: string;
+    role?: RecipientRole;
+  }[];
 };

 export const createDocumentFromTemplate = async ({
@@ -37,14 +18,7 @@ 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,
@@ -65,11 +39,8 @@ export const createDocumentFromTemplate = async ({
          }),
    },
    include: {
-      Recipient: {
-        include: {
-          Field: true,
-        },
-      },
+      Recipient: true,
+      Field: true,
      templateDocumentData: true,
    },
  });
@@ -78,43 +49,6 @@ export const createDocumentFromTemplate = async ({
    throw new Error('Template not found.');
  }

-  if (recipients.length !== template.Recipient.length) {
-    throw new Error('Invalid number of recipients.');
-  }
-
-  let finalRecipients: FinalRecipient[] = [];
-
-  if (recipients.length > 0 && Object.prototype.hasOwnProperty.call(recipients[0], 'id')) {
-    finalRecipients = template.Recipient.map((templateRecipient) => {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const foundRecipient = (recipients as RecipientWithId[]).find(
-        (recipient) => recipient.id === templateRecipient.id,
-      );
-
-      if (!foundRecipient) {
-        throw new Error('Recipient not found.');
-      }
-
-      return {
-        templateRecipientId: templateRecipient.id,
-        fields: templateRecipient.Field,
-        name: foundRecipient.name ?? '',
-        email: foundRecipient.email,
-        role: templateRecipient.role,
-      };
-    });
-  } else {
-    // Backwards compatible logic for /v1/ API where we use the index to associate
-    // the provided recipient with the template recipient.
-    finalRecipients = recipients.map((recipient, index) => ({
-      templateRecipientId: template.Recipient[index].id,
-      fields: template.Recipient[index].Field,
-      name: recipient.name ?? '',
-      email: recipient.email,
-      role: template.Recipient[index].role,
-    }));
-  }
-
  const documentData = await prisma.documentData.create({
    data: {
      type: template.templateDocumentData.type,
@@ -123,82 +57,81 @@ export const createDocumentFromTemplate = async ({
    },
  });

-  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(),
-            })),
-          },
-        },
-      },
-      include: {
-        Recipient: {
-          orderBy: {
-            id: 'asc',
-          },
-        },
-        documentData: true,
-      },
-    });
-
-    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,
+  const document = await prisma.document.create({
+    data: {
      userId,
-      teamId,
-    });
+      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(),
+        })),
+      },
+    },

-    return document;
+    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);
+
+      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({
+          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;
 };
--- a/packages/lib/server-only/template/duplicate-template.ts
+++ b/packages/lib/server-only/template/duplicate-template.ts
@@ -81,10 +81,6 @@ export const duplicateTemplate = async ({
        (doc) => doc.email === recipient?.email,
      );

-      if (!duplicatedTemplateRecipient) {
-        throw new Error('Recipient not found.');
-      }
-
      return {
        type: field.type,
        page: field.page,
@@ -95,7 +91,7 @@ export const duplicateTemplate = async ({
        customText: field.customText,
        inserted: field.inserted,
        templateId: duplicatedTemplate.id,
-        recipientId: duplicatedTemplateRecipient.id,
+        recipientId: duplicatedTemplateRecipient?.id || null,
      };
    }),
  });
--- a/packages/lib/server-only/webhooks/get-webhooks-by-user-id.ts
+++ b/packages/lib/server-only/webhooks/get-webhooks-by-user-id.ts
@@ -4,7 +4,6 @@ export const getWebhooksByUserId = async (userId: number) => {
  return await prisma.webhook.findMany({
    where: {
      userId,
-      teamId: null,
    },
    orderBy: {
      createdAt: 'desc',
--- a/packages/lib/types/fields.ts
+++ b/packages/lib/types/fields.ts
@@ -1,3 +0,0 @@
-import type { getCompletedFieldsForToken } from '../server-only/field/get-completed-fields-for-token';
-
-export type CompletedField = Awaited<ReturnType<typeof getCompletedFieldsForToken>>[number];
--- a/packages/lib/universal/get-feature-flag.ts
+++ b/packages/lib/universal/get-feature-flag.ts
@@ -17,7 +17,6 @@ export const getFlag = async (
  options?: GetFlagOptions,
 ): Promise<TFeatureFlagValue> => {
  const requestHeaders = options?.requestHeaders ?? {};
-  delete requestHeaders['content-length'];

  if (!isFeatureFlagEnabled()) {
    return LOCAL_FEATURE_FLAGS[flag] ?? true;
@@ -26,7 +25,7 @@ export const getFlag = async (
  const url = new URL(`${APP_BASE_URL()}/api/feature-flag/get`);
  url.searchParams.set('flag', flag);

-  return await fetch(url, {
+  const response = await fetch(url, {
    headers: {
      ...requestHeaders,
    },
@@ -36,10 +35,9 @@ export const getFlag = async (
  })
    .then(async (res) => res.json())
    .then((res) => ZFeatureFlagValueSchema.parse(res))
-    .catch((err) => {
-      console.error(err);
-      return LOCAL_FEATURE_FLAGS[flag] ?? false;
-    });
+    .catch(() => false);
+
+  return response;
 };

 /**
@@ -52,7 +50,6 @@ export const getAllFlags = async (
  options?: GetFlagOptions,
 ): Promise<Record<string, TFeatureFlagValue>> => {
  const requestHeaders = options?.requestHeaders ?? {};
-  delete requestHeaders['content-length'];

  if (!isFeatureFlagEnabled()) {
    return LOCAL_FEATURE_FLAGS;
@@ -70,10 +67,7 @@ export const getAllFlags = async (
  })
    .then(async (res) => res.json())
    .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
-    .catch((err) => {
-      console.error(err);
-      return LOCAL_FEATURE_FLAGS;
-    });
+    .catch(() => LOCAL_FEATURE_FLAGS);
 };

 /**
@@ -95,10 +89,7 @@ export const getAllAnonymousFlags = async (): Promise<Record<string, TFeatureFla
  })
    .then(async (res) => res.json())
    .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
-    .catch((err) => {
-      console.error(err);
-      return LOCAL_FEATURE_FLAGS;
-    });
+    .catch(() => LOCAL_FEATURE_FLAGS);
 };

 interface GetFlagOptions {
--- a/packages/lib/universal/upload/put-file.ts
+++ b/packages/lib/universal/upload/put-file.ts
@@ -1,12 +1,9 @@
 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 = {
@@ -15,38 +12,14 @@ 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');

-  return await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
+  const { type, data } = 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) => {
--- a/packages/prisma/migrations/20240418140819_remove_impossible_field_optional_states/migration.sql
+++ b/packages/prisma/migrations/20240418140819_remove_impossible_field_optional_states/migration.sql
@@ -1,11 +0,0 @@
-/*
-  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;
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -387,7 +387,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 +398,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])
--- a/packages/trpc/server/document-router/router.ts
+++ b/packages/trpc/server/document-router/router.ts
@@ -4,7 +4,6 @@ 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';
@@ -21,7 +20,6 @@ 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 {
@@ -223,6 +221,10 @@ export const documentRouter = router({
      }
    }),

+  getDocumentMetaById: authenticatedProcedure
+    .input(ZSetSettingsForDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {}),
+
  setTitleForDocument: authenticatedProcedure
    .input(ZSetTitleForDocumentMutationSchema)
    .mutation(async ({ input, ctx }) => {
@@ -415,10 +417,6 @@ 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(),
--- a/packages/trpc/server/singleplayer-router/router.ts
+++ b/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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } 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 putPdfFile({
+            const { id: documentDataId } = await putFile({
              name: `${documentName}.pdf`,
              type: 'application/pdf',
              arrayBuffer: async () => Promise.resolve(signedPdfBuffer),
--- a/packages/trpc/server/template-router/router.ts
+++ b/packages/trpc/server/template-router/router.ts
@@ -1,14 +1,10 @@
 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 { 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 {
@@ -53,34 +49,19 @@ export const templateRouter = router({
          throw new Error('You have reached your document limit.');
        }

-        const requestMetadata = extractNextApiRequestMetadata(ctx.req);
-
-        let document: Document = await createDocumentFromTemplate({
+        return 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 AppError.parseErrorToTRPCError(err);
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to create this document. Please try again later.',
+        });
      }
    }),

--- a/packages/trpc/server/template-router/schema.ts
+++ b/packages/trpc/server/template-router/schema.ts
@@ -1,5 +1,7 @@
 import { z } from 'zod';

+import { RecipientRole } from '@documenso/prisma/client';
+
 export const ZCreateTemplateMutationSchema = z.object({
  title: z.string().min(1).trim(),
  teamId: z.number().optional(),
@@ -9,14 +11,15 @@ export const ZCreateTemplateMutationSchema = z.object({
 export const ZCreateDocumentFromTemplateMutationSchema = z.object({
  templateId: z.number(),
  teamId: z.number().optional(),
-  recipients: z.array(
-    z.object({
-      id: z.number(),
-      email: z.string().email(),
-      name: z.string().optional(),
-    }),
-  ),
-  sendDocument: z.boolean().optional(),
+  recipients: z
+    .array(
+      z.object({
+        email: z.string().email(),
+        name: z.string(),
+        role: z.nativeEnum(RecipientRole),
+      }),
+    )
+    .optional(),
 });

 export const ZDuplicateTemplateMutationSchema = z.object({
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@@ -19,7 +19,6 @@ export type FieldContainerPortalProps = {
  field: Field;
  className?: string;
  children: React.ReactNode;
-  cardClassName?: string;
 };

 export function FieldContainerPortal({
@@ -45,7 +44,7 @@ export function FieldContainerPortal({
  );
 }

-export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
  const [isValidating, setIsValidating] = useState(false);

  const ref = React.useRef<HTMLDivElement>(null);
@@ -79,7 +78,6 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
          {
            'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
          },
-          cardClassName,
        )}
        ref={ref}
        data-inserted={field.inserted ? 'true' : 'false'}
--- a/packages/ui/primitives/document-flow/add-settings.tsx
+++ b/packages/ui/primitives/document-flow/add-settings.tsx
@@ -9,11 +9,7 @@ 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,
-  DocumentAuth,
-} from '@documenso/lib/types/document-auth';
+import { DocumentAccessAuth, DocumentActionAuth } 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';
@@ -220,9 +216,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
@@ -246,13 +242,11 @@ export const AddSettingsFormPartial = ({
                        </SelectTrigger>

                        <SelectContent position="popper">
-                          {Object.values(DocumentActionAuth)
-                            .filter((auth) => auth !== DocumentAuth.ACCOUNT)
-                            .map((authType) => (
-                              <SelectItem key={authType} value={authType}>
-                                {DOCUMENT_AUTH_TYPES[authType].value}
-                              </SelectItem>
-                            ))}
+                          {Object.values(DocumentActionAuth).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>
--- a/packages/ui/primitives/document-flow/add-settings.types.ts
+++ b/packages/ui/primitives/document-flow/add-settings.types.ts
@@ -28,6 +28,8 @@ export const ZAddSettingsFormSchema = z.object({
    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
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -302,10 +302,10 @@ export const AddSignersFormPartial = ({
                                        global action signing authentication method configured in
                                        the "General Settings" step
                                      </li>
-                                      {/* <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
@@ -326,13 +326,11 @@ export const AddSignersFormPartial = ({
                                {/* 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>
-                                  ))}
+                                {Object.values(RecipientActionAuth).map((authType) => (
+                                  <SelectItem key={authType} value={authType}>
+                                    {DOCUMENT_AUTH_TYPES[authType].value}
+                                  </SelectItem>
+                                ))}
                              </SelectContent>
                            </Select>
                          </FormControl>
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@@ -1,5 +1,7 @@
 'use client';

+import { useEffect } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';

@@ -30,6 +32,8 @@ export type AddSubjectFormProps = {
  document: DocumentWithData;
  onSubmit: (_data: TAddSubjectFormSchema) => void;
  isDocumentPdfLoaded: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setSubjectFormFields: (subject?: string, message?: string) => void;
 };

 export const AddSubjectFormPartial = ({
@@ -39,10 +43,12 @@ export const AddSubjectFormPartial = ({
  document,
  onSubmit,
  isDocumentPdfLoaded,
+  setSubjectFormFields,
 }: AddSubjectFormProps) => {
  const {
    register,
    handleSubmit,
+    getValues,
    formState: { errors, isSubmitting },
  } = useForm<TAddSubjectFormSchema>({
    defaultValues: {
@@ -57,6 +63,13 @@ export const AddSubjectFormPartial = ({
  const onFormSubmit = handleSubmit(onSubmit);
  const { currentStep, totalSteps, previousStep } = useStep();

+  useEffect(() => {
+    return () => {
+      const { meta } = getValues();
+      setSubjectFormFields(meta.subject, meta.message);
+    };
+  }, [getValues, setSubjectFormFields]);
+
  return (
    <>
      <DocumentFlowFormContainerHeader
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -30,66 +30,4 @@ const PopoverContent = React.forwardRef<

 PopoverContent.displayName = PopoverPrimitive.Content.displayName;

-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 };
+export { Popover, PopoverTrigger, PopoverContent };
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@@ -103,7 +103,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
    appendSigner({
      formId: nanoid(12),
      name: `Recipient ${placeholderRecipientCount}`,
-      // Update TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX if this is ever changed.
      email: `recipient.${placeholderRecipientCount}@documenso.com`,
      role: RecipientRole.SIGNER,
    });
@@ -283,7 +282,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
          <Button
            type="button"
            className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
-            variant="secondary"
            disabled={
              isSubmitting || getValues('signers').some((signer) => signer.email === user?.email)
            }
				`@@ -1 +0,0 @@`
				`export const TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;`