feat: add visible completed fields (#1109)

## Description

Added the ability for recipients to see fields from other recipients who
have completed the document when they are signing the document

Added the ability for the document owner to see fields from recipients
who have completed the field on the document page view (only visible
when the document is pending)


## 🚨🚨 Migrations🚨🚨

- Drop all `Fields` that do not have a `Recipient` set (not sure how it
was possible in the first place)
- Remove optional `Recipient` field on `Field` which doesn't make sense 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Enhanced document viewing by adding read-only fields based on document
status.
- Improved signing page by fetching and displaying completed fields for
tokens.
- Updated avatar component to show recipient status with tooltips for
better user interaction.

- **Bug Fixes**
- Made `recipientId` a required field in the database to ensure data
consistency.

- **Refactor**
- Optimized popover functionality in UI components for better
performance and user experience.

- **Documentation**
- Added detailed component and function descriptions for new features in
the system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -158,6 +158,7 @@ export const SinglePlayerClient = () => {
     expired: null,
     signedAt: null,
     readStatus: 'OPENED',
+    documentDeletedAt: null,
     signingStatus: 'NOT_SIGNED',
     sendStatus: 'NOT_SENT',
     role: 'SIGNER',

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

@@ -19,7 +19,7 @@ import { useSession } from 'next-auth/react';
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, TeamEmail, User } from '@documenso/prisma/client';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@@ -41,7 +41,7 @@ export type DocumentPageViewDropdownProps = {
     Recipient: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail: TeamEmail | null };
 };
 
 export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
@@ -59,9 +59,10 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
 
   const isOwner = document.User.id === session.user.id;
   const isDraft = document.status === DocumentStatus.DRAFT;
+  const isDeleted = document.deletedAt !== null;
   const isComplete = document.status === DocumentStatus.COMPLETED;
-  const isDocumentDeletable = isOwner;
   const isCurrentTeamDocument = team && document.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
 
@@ -127,7 +128,10 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -154,15 +158,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
         />
       </DropdownMenuContent>
 
-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={document.id}
-          status={document.status}
-          documentTitle={document.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={document.id}
+        status={document.status}
+        documentTitle={document.title}
+        open={isDeleteDialogOpen}
+        canManageDocument={canManageDocument}
+        onOpenChange={setDeleteDialogOpen}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={document.id}

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

@@ -8,17 +8,20 @@ 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';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { Team } from '@documenso/prisma/client';
+import type { Team, TeamEmail } from '@documenso/prisma/client';
+import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 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,
@@ -34,7 +37,7 @@ export type DocumentPageViewProps = {
   params: {
     id: string;
   };
-  team?: Team;
+  team?: Team & { teamEmail: TeamEmail | null };
 };
 
 export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
@@ -83,11 +86,16 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     documentMeta.password = securePassword;
   }
 
-  const recipients = await getRecipientsForDocument({
-    documentId,
-    teamId: team?.id,
-    userId: user.id,
-  });
+  const [recipients, completedFields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      teamId: team?.id,
+      userId: user.id,
+    }),
+    getCompletedFieldsForDocument({
+      documentId,
+    }),
+  ]);
 
   const documentWithRecipients = {
     ...document,
@@ -118,11 +126,17 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
               <div className="text-muted-foreground flex items-center">
                 <Users2 className="mr-2 h-5 w-5" />
 
-                <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
                   <span>{recipients.length} Recipient(s)</span>
                 </StackAvatarsWithTooltip>
               </div>
             )}
+
+            {document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
           </div>
         </div>
 
@@ -148,6 +162,13 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
           </CardContent>
         </Card>
 
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields
+            fields={completedFields}
+            documentMeta={document.documentMeta || undefined}
+          />
+        )}
+
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
           <div className="space-y-6">
             <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">

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

@@ -92,7 +92,11 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+            <StackAvatarsWithTooltip
+              recipients={recipients}
+              documentStatus={document.status}
+              position="bottom"
+            >
               <span>{recipients.length} Recipient(s)</span>
             </StackAvatarsWithTooltip>
           </div>

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

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

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

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

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -15,7 +15,6 @@ import {
   Pencil,
   Share,
   Trash2,
-  XCircle,
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -45,7 +44,7 @@ export type DataTableActionDropdownProps = {
     Recipient: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };
 
 export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
@@ -67,8 +66,8 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
   // const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner;
   const isCurrentTeamDocument = team && row.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
 
@@ -107,14 +106,14 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger data-testid="document-table-action-btn">
         <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        {recipient && recipient?.role !== RecipientRole.CC && (
+        {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
             <Link href={`/sign/${recipient?.token}`}>
               {recipient?.role === RecipientRole.VIEWER && (
@@ -141,7 +140,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+        <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
@@ -158,14 +157,18 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        {/* No point displaying this if there's no functionality. */}
+        {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />
           Void
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail)}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          {canManageDocument ? 'Delete' : 'Hide'}
         </DropdownMenuItem>
 
         <DropdownMenuLabel>Share</DropdownMenuLabel>
@@ -186,16 +189,16 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         />
       </DropdownMenuContent>
 
-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={row.id}
-          status={row.status}
-          documentTitle={row.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-          teamId={team?.id}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={row.id}
+        status={row.status}
+        documentTitle={row.title}
+        open={isDeleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        teamId={team?.id}
+        canManageDocument={canManageDocument}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={row.id}

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -29,7 +29,7 @@ export type DocumentsDataTableProps = {
     }
   >;
   showSenderColumn?: boolean;
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };
 
 export const DocumentsDataTable = ({
@@ -76,7 +76,12 @@ export const DocumentsDataTable = ({
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
+            cell: ({ row }) => (
+              <StackAvatarsWithTooltip
+                recipients={row.original.Recipient}
+                documentStatus={row.original.status}
+              />
+            ),
           },
           {
             header: 'Status',

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

@@ -2,8 +2,11 @@ import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { match } from 'ts-pattern';
+
 import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -23,6 +26,7 @@ type DeleteDocumentDialogProps = {
   status: DocumentStatus;
   documentTitle: string;
   teamId?: number;
+  canManageDocument: boolean;
 };
 
 export const DeleteDocumentDialog = ({
@@ -32,6 +36,7 @@ export const DeleteDocumentDialog = ({
   status,
   documentTitle,
   teamId,
+  canManageDocument,
 }: DeleteDocumentDialogProps) => {
   const router = useRouter();
 
@@ -83,47 +88,82 @@ export const DeleteDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you sure you want to delete "{documentTitle}"?</DialogTitle>
+          <DialogTitle>Are you sure?</DialogTitle>
 
           <DialogDescription>
-            Please note that this action is irreversible. Once confirmed, your document will be
-            permanently deleted.
+            You are about to {canManageDocument ? 'delete' : 'hide'}{' '}
+            <strong>"{documentTitle}"</strong>
           </DialogDescription>
         </DialogHeader>
 
-        {status !== DocumentStatus.DRAFT && (
-          <div className="mt-4">
-            <Input
-              type="text"
-              value={inputValue}
-              onChange={onInputChange}
-              placeholder="Type 'delete' to confirm"
-            />
-          </div>
+        {canManageDocument ? (
+          <Alert variant="warning" className="-mt-1">
+            {match(status)
+              .with(DocumentStatus.DRAFT, () => (
+                <AlertDescription>
+                  Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                  this document will be permanently deleted.
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.PENDING, () => (
+                <AlertDescription>
+                  <p>
+                    Please note that this action is <strong>irreversible</strong>.
+                  </p>
+
+                  <p className="mt-1">Once confirmed, the following will occur:</p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>Document will be permanently deleted</li>
+                    <li>Document signing process will be cancelled</li>
+                    <li>All inserted signatures will be voided</li>
+                    <li>All recipients will be notified</li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.COMPLETED, () => (
+                <AlertDescription>
+                  <p>By deleting this document, the following will occur:</p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>The document will be hidden from your account</li>
+                    <li>Recipients will still retain their copy of the document</li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .exhaustive()}
+          </Alert>
+        ) : (
+          <Alert variant="warning" className="-mt-1">
+            <AlertDescription>
+              Please contact support if you would like to revert this action.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {status !== DocumentStatus.DRAFT && canManageDocument && (
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={onInputChange}
+            placeholder="Type 'delete' to confirm"
+          />
         )}
 
         <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
 
-            <Button
-              type="button"
-              loading={isLoading}
-              onClick={onDelete}
-              disabled={!isDeleteEnabled}
-              variant="destructive"
-              className="flex-1"
-            >
-              Delete
-            </Button>
-          </div>
+          <Button
+            type="button"
+            loading={isLoading}
+            onClick={onDelete}
+            disabled={!isDeleteEnabled && canManageDocument}
+            variant="destructive"
+          >
+            {canManageDocument ? 'Delete' : 'Hide'}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/web/src/app/(dashboard)/documents/documents-page-view.tsx

@@ -41,7 +41,9 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
   const senderIds = parseToIntegerArray(searchParams.senderIds ?? '');
-  const currentTeam = team ? { id: team.id, url: team.url } : undefined;
+  const currentTeam = team
+    ? { id: team.id, url: team.url, teamEmail: team.teamEmail?.email }
+    : undefined;
 
   const getStatOptions: GetStatsInput = {
     user,

apps/web/src/app/(dashboard)/documents/empty-state.tsx

@@ -37,7 +37,10 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
     }));
 
   return (
-    <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+    <div
+      className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4"
+      data-testid="empty-document-state"
+    >
       <Icon className="h-12 w-12" strokeWidth={1.5} />
 
       <div className="text-center">

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

@@ -18,7 +18,10 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -34,7 +37,6 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZCreateTemplateFormSchema = z.object({
@@ -61,8 +63,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
     resolver: zodResolver(ZCreateTemplateFormSchema),
   });
 
-  const { mutateAsync: createTemplate, isLoading: isCreatingTemplate } =
-    trpc.template.createTemplate.useMutation();
+  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
   const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
   const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
@@ -140,6 +141,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
   useEffect(() => {
     if (!showNewTemplateDialog) {
       form.reset();
+      setUploadedFile(null);
     }
   }, [form, showNewTemplateDialog]);
 
@@ -154,20 +156,23 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
       <DialogContent className="w-full max-w-xl">
         <DialogHeader>
-          <DialogTitle className="mb-4">New Template</DialogTitle>
+          <DialogTitle>New Template</DialogTitle>
+          <DialogDescription>
+            Templates allow you to quickly generate documents with pre-filled recipients and fields.
+          </DialogDescription>
         </DialogHeader>
 
-        <div>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="flex flex-col gap-y-4">
               <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Name your template</FormLabel>
+                    <FormLabel>Template name</FormLabel>
                     <FormControl>
-                      <Input id="email" type="text" className="bg-background mt-1.5" {...field} />
+                      <Input {...field} />
                     </FormControl>
                     <FormDescription>
                       <span className="text-muted-foreground text-xs">
@@ -180,55 +185,57 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
                 )}
               />
 
-              <div>
-                <Label htmlFor="template">Upload a Document</Label>
+              <div className="mt-1.5">
+                {uploadedFile ? (
+                  <Card gradient className="h-[40vh]">
+                    <CardContent className="flex h-full flex-col items-center justify-center p-2">
+                      <button
+                        onClick={() => resetForm()}
+                        title="Remove Template"
+                        className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+                      >
+                        <X className="h-6 w-6" />
+                        <span className="sr-only">Remove Template</span>
+                      </button>
 
-                <div className="my-3">
-                  {uploadedFile ? (
-                    <Card gradient className="h-[40vh]">
-                      <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                        <button
-                          onClick={() => resetForm()}
-                          title="Remove Template"
-                          className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
-                        >
-                          <X className="h-6 w-6" />
-                          <span className="sr-only">Remove Template</span>
-                        </button>
+                      <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                      </div>
 
-                        <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                        </div>
+                      <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
+                        Uploaded Document
+                      </p>
 
-                        <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
-                          Uploaded Document
-                        </p>
-
-                        <span className="text-muted-foreground/80 mt-1 text-sm">
-                          {uploadedFile.file.name}
-                        </span>
-                      </CardContent>
-                    </Card>
-                  ) : (
-                    <DocumentDropzone
-                      className="mt-1.5 h-[40vh]"
-                      onDrop={onFileDrop}
-                      type="template"
-                    />
-                  )}
-                </div>
+                      <span className="text-muted-foreground/80 mt-1 text-sm">
+                        {uploadedFile.file.name}
+                      </span>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
+                )}
               </div>
 
-              <div className="flex w-full justify-end">
-                <Button loading={isCreatingTemplate} type="submit">
-                  Create Template
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Cancel
+                  </Button>
+                </DialogClose>
+
+                <Button
+                  loading={form.formState.isSubmitting}
+                  disabled={!uploadedFile}
+                  type="submit"
+                >
+                  Create template
                 </Button>
-              </div>
-            </form>
-          </Form>
-        </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

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

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

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

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

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

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

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -8,6 +8,7 @@ import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -15,18 +16,21 @@ import { StackAvatar } from './stack-avatar';
 
 export type AvatarWithRecipientProps = {
   recipient: Recipient;
+  documentStatus: DocumentStatus;
 };
 
-export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
+export function AvatarWithRecipient({ recipient, documentStatus }: AvatarWithRecipientProps) {
   const [, copy] = useCopyToClipboard();
   const { toast } = useToast();
 
+  const signingToken = documentStatus === DocumentStatus.PENDING ? recipient.token : null;
+
   const onRecipientClick = () => {
-    if (!recipient.token) {
+    if (!signingToken) {
       return;
     }
 
-    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`).then(() => {
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${signingToken}`).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'The signing link has been copied to your clipboard.',
@@ -37,10 +41,10 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
   return (
     <div
       className={cn('my-1 flex items-center gap-2', {
-        'cursor-pointer hover:underline': recipient.token,
+        'cursor-pointer hover:underline': signingToken,
       })}
-      role={recipient.token ? 'button' : undefined}
-      title={recipient.token && 'Click to copy signing link for sending to recipient'}
+      role={signingToken ? 'button' : undefined}
+      title={signingToken ? 'Click to copy signing link for sending to recipient' : undefined}
       onClick={onRecipientClick}
     >
       <StackAvatar
@@ -49,16 +53,15 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
         type={getRecipientType(recipient)}
         fallbackText={recipientAbbreviation(recipient)}
       />
-      <div>
-        <div
-          className="text-muted-foreground text-sm"
-          title="Click to copy signing link for sending to recipient"
-        >
-          <p>{recipient.email} </p>
-          <p className="text-muted-foreground/70 text-xs">
-            {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-          </p>
-        </div>
+
+      <div
+        className="text-muted-foreground text-sm"
+        title={signingToken ? 'Click to copy signing link for sending to recipient' : undefined}
+      >
+        <p>{recipient.email}</p>
+        <p className="text-muted-foreground/70 text-xs">
+          {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+        </p>
       </div>
     </div>
   );

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

@@ -1,33 +1,28 @@
 '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 { Recipient } from '@documenso/prisma/client';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import type { DocumentStatus, Recipient } from '@documenso/prisma/client';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
 import { StackAvatars } from './stack-avatars';
 
 export type StackAvatarsWithTooltipProps = {
+  documentStatus: DocumentStatus;
   recipients: Recipient[];
   position?: 'top' | 'bottom';
   children?: React.ReactNode;
 };
 
 export const StackAvatarsWithTooltip = ({
+  documentStatus,
   recipients,
   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',
   );
@@ -44,105 +39,74 @@ export const StackAvatarsWithTooltip = ({
     (recipient) => getRecipientType(recipient) === 'unsigned',
   );
 
-  const onMouseEnter = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    isMouseOverTimeout.current = setTimeout(() => {
-      setOpen((o) => (!o ? true : o));
-    }, 200);
-  };
-
-  const onMouseLeave = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    setTimeout(() => {
-      setOpen((o) => (o ? false : o));
-    }, 200);
-  };
-
-  const onOpenChange = (newOpen: boolean) => {
-    isControlled.current = newOpen;
-
-    setOpen(newOpen);
-  };
-
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
-      <PopoverTrigger
-        className="flex cursor-pointer"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {children || <StackAvatars recipients={recipients} />}
-      </PopoverTrigger>
-
-      <PopoverContent
-        side={position}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className="flex flex-col gap-y-5 py-2"
-      >
-        {completedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Completed</h1>
-            {completedRecipients.map((recipient: Recipient) => (
-              <div key={recipient.id} className="my-1 flex items-center gap-2">
-                <StackAvatar
-                  first={true}
-                  key={recipient.id}
-                  type={getRecipientType(recipient)}
-                  fallbackText={recipientAbbreviation(recipient)}
-                />
-                <div className="">
-                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
-                  <p className="text-muted-foreground/70 text-xs">
-                    {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-                  </p>
-                </div>
+    <PopoverHover
+      trigger={children || <StackAvatars recipients={recipients} />}
+      contentProps={{
+        className: 'flex flex-col gap-y-5 py-2',
+        side: position,
+      }}
+    >
+      {completedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Completed</h1>
+          {completedRecipients.map((recipient: Recipient) => (
+            <div key={recipient.id} className="my-1 flex items-center gap-2">
+              <StackAvatar
+                first={true}
+                key={recipient.id}
+                type={getRecipientType(recipient)}
+                fallbackText={recipientAbbreviation(recipient)}
+              />
+              <div className="">
+                <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                <p className="text-muted-foreground/70 text-xs">
+                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                </p>
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          ))}
+        </div>
+      )}
 
-        {waitingRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Waiting</h1>
-            {waitingRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </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} />
-            ))}
-          </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} />
-            ))}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
+      {uncompletedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Uncompleted</h1>
+          {uncompletedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
+    </PopoverHover>
   );
 };

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 
@@ -12,8 +10,6 @@ import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { CommandMenu } from '../common/command-menu';
-
 const navigationLinks = [
   {
     href: '/documents',
@@ -25,13 +21,14 @@ const navigationLinks = [
   },
 ];
 
-export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+export type DesktopNavProps = HTMLAttributes<HTMLDivElement> & {
+  setIsCommandMenuOpen: (value: boolean) => void;
+};
 
-export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+export const DesktopNav = ({ className, setIsCommandMenuOpen, ...props }: DesktopNavProps) => {
   const pathname = usePathname();
   const params = useParams();
 
-  const [open, setOpen] = useState(false);
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
   const rootHref = getRootHref(params, { returnEmptyRootString: true });
@@ -70,12 +67,10 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         ))}
       </div>
 
-      <CommandMenu open={open} onOpenChange={setOpen} />
-
       <Button
         variant="outline"
         className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
-        onClick={() => setOpen((open) => !open)}
+        onClick={() => setIsCommandMenuOpen(true)}
       >
         <div className="flex items-center">
           <Search className="mr-2 h-5 w-5" />

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -58,7 +58,7 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
           <Logo className="h-6 w-auto" />
         </Link>
 
-        <DesktopNav />
+        <DesktopNav setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
         <div className="flex gap-x-4 md:ml-8">
           <MenuSwitcher user={user} teams={teams} />

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

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

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,19 +4702,6 @@
         "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.40.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz",
@@ -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",

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"

packages/api/v1/contract.ts

@@ -11,6 +11,7 @@ import {
   ZDeleteDocumentMutationSchema,
   ZDeleteFieldMutationSchema,
   ZDeleteRecipientMutationSchema,
+  ZDownloadDocumentSuccessfulSchema,
   ZGetDocumentsQuerySchema,
   ZSendDocumentForSigningMutationSchema,
   ZSuccessfulDocumentResponseSchema,
@@ -51,6 +52,17 @@ export const ApiContractV1 = c.router(
       summary: 'Get a single document',
     },
 
+    downloadSignedDocument: {
+      method: 'GET',
+      path: '/api/v1/documents/:id/download',
+      responses: {
+        200: ZDownloadDocumentSuccessfulSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Download a signed document when the storage transport is S3',
+    },
+
     createDocument: {
       method: 'POST',
       path: '/api/v1/documents',

packages/api/v1/implementation.ts

@@ -23,7 +23,10 @@ import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
+import {
+  getPresignGetUrl,
+  getPresignPostUrl,
+} from '@documenso/lib/universal/upload/server-actions';
 import { DocumentDataType, DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
 import { ApiContractV1 } from './contract';
@@ -83,6 +86,68 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
     }
   }),
 
+  downloadSignedDocument: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId } = args.params;
+
+    try {
+      if (process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
+        return {
+          status: 500,
+          body: {
+            message: 'Please make sure the storage transport is set to S3.',
+          },
+        };
+      }
+
+      const document = await getDocumentById({
+        id: Number(documentId),
+        userId: user.id,
+        teamId: team?.id,
+      });
+
+      if (!document || !document.documentDataId) {
+        return {
+          status: 404,
+          body: {
+            message: 'Document not found',
+          },
+        };
+      }
+
+      if (DocumentDataType.S3_PATH !== document.documentData.type) {
+        return {
+          status: 400,
+          body: {
+            message: 'Invalid document data type',
+          },
+        };
+      }
+
+      if (document.status !== DocumentStatus.COMPLETED) {
+        return {
+          status: 400,
+          body: {
+            message: 'Document is not completed yet.',
+          },
+        };
+      }
+
+      const { url } = await getPresignGetUrl(document.documentData.data);
+
+      return {
+        status: 200,
+        body: { downloadUrl: url },
+      };
+    } catch (err) {
+      return {
+        status: 500,
+        body: {
+          message: 'Error downloading the document. Please try again.',
+        },
+      };
+    }
+  }),
+
   deleteDocument: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
 

packages/api/v1/schema.ts

@@ -53,6 +53,10 @@ export const ZUploadDocumentSuccessfulSchema = z.object({
   key: z.string(),
 });
 
+export const ZDownloadDocumentSuccessfulSchema = z.object({
+  downloadUrl: z.string(),
+});
+
 export type TUploadDocumentSuccessfulSchema = z.infer<typeof ZUploadDocumentSuccessfulSchema>;
 
 export const ZCreateDocumentMutationSchema = z.object({

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

@@ -45,7 +45,7 @@ test.describe('[EE_ONLY]', () => {
     await page
       .getByRole('textbox', { name: 'Email', exact: true })
       .fill('recipient2@documenso.com');
-    await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Recipient 2');
+    await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('Recipient 2');
 
     // Display advanced settings.
     await page.getByLabel('Show advanced settings').click();
@@ -82,7 +82,7 @@ test('[DOCUMENT_FLOW]: add signers', async ({ page }) => {
   await page.getByPlaceholder('Name').fill('Recipient 1');
   await page.getByRole('button', { name: 'Add Signer' }).click();
   await page.getByRole('textbox', { name: 'Email', exact: true }).fill('recipient2@documenso.com');
-  await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Recipient 2');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('Recipient 2');
 
   // Advanced settings should not be visible for non EE users.
   await expect(page.getByLabel('Show advanced settings')).toBeHidden();

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

@@ -136,7 +136,7 @@ test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipie
   await page.getByPlaceholder('Name').fill('User 1');
   await page.getByRole('button', { name: 'Add Signer' }).click();
   await page.getByRole('textbox', { name: 'Email', exact: true }).fill('user2@example.com');
-  await page.getByRole('textbox', { name: 'Name', exact: true }).fill('User 2');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('User 2');
 
   await page.getByRole('button', { name: 'Continue' }).click();
 

packages/app-tests/e2e/documents/delete-documents.spec.ts

@@ -8,6 +8,7 @@ import {
 import { seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin, apiSignout } from '../fixtures/authentication';
+import { checkDocumentTabCount } from '../fixtures/documents';
 
 test.describe.configure({ mode: 'serial' });
 
@@ -74,7 +75,7 @@ test('[DOCUMENTS]: deleting a completed document should not remove it from recip
     email: sender.email,
   });
 
-  // open actions menu
+  // Open document action menu.
   await page
     .locator('tr', { hasText: 'Document 1 - Completed' })
     .getByRole('cell', { name: 'Download' })
@@ -115,7 +116,7 @@ test('[DOCUMENTS]: deleting a pending document should remove it from recipients'
     email: sender.email,
   });
 
-  // open actions menu
+  // Open document action menu.
   await page.locator('tr', { hasText: 'Document 1 - Pending' }).getByRole('button').nth(1).click();
 
   // delete document
@@ -135,20 +136,11 @@ test('[DOCUMENTS]: deleting a pending document should remove it from recipients'
     });
 
     await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).not.toBeVisible();
-
-    await page.goto(`/sign/${recipient.token}`);
-    await expect(page.getByText(/document.*cancelled/i).nth(0)).toBeVisible();
-
-    await page.goto('/documents');
-    await page.waitForURL('/documents');
-
     await apiSignout({ page });
   }
 });
 
-test('[DOCUMENTS]: deleting a draft document should remove it without additional prompting', async ({
-  page,
-}) => {
+test('[DOCUMENTS]: deleting draft documents should permanently remove it', async ({ page }) => {
   const { sender } = await seedDeleteDocumentsTestRequirements();
 
   await apiSignin({
@@ -156,11 +148,10 @@ test('[DOCUMENTS]: deleting a draft document should remove it without additional
     email: sender.email,
   });
 
-  // open actions menu
+  // Open document action menu.
   await page
     .locator('tr', { hasText: 'Document 1 - Draft' })
-    .getByRole('cell', { name: 'Edit' })
-    .getByRole('button')
+    .getByTestId('document-table-action-btn')
     .click();
 
   // delete document
@@ -169,4 +160,155 @@ test('[DOCUMENTS]: deleting a draft document should remove it without additional
   await page.getByRole('button', { name: 'Delete' }).click();
 
   await expect(page.getByRole('row', { name: /Document 1 - Draft/ })).not.toBeVisible();
+
+  // Check document counts.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 1);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 2);
+});
+
+test('[DOCUMENTS]: deleting pending documents should permanently remove it', async ({ page }) => {
+  const { sender } = await seedDeleteDocumentsTestRequirements();
+
+  await apiSignin({
+    page,
+    email: sender.email,
+  });
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Pending' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
+
+  // Check document counts.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 2);
+});
+
+test('[DOCUMENTS]: deleting completed documents as an owner should hide it from only the owner', async ({
+  page,
+}) => {
+  const { sender, recipients } = await seedDeleteDocumentsTestRequirements();
+
+  await apiSignin({
+    page,
+    email: sender.email,
+  });
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Completed' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  // Check document counts.
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 1);
+  await checkDocumentTabCount(page, 'Completed', 0);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 2);
+
+  // Sign into the recipient account.
+  await apiSignout({ page });
+  await apiSignin({
+    page,
+    email: recipients[0].email,
+  });
+
+  // Check document counts.
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).toBeVisible();
+  await checkDocumentTabCount(page, 'Inbox', 1);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 2);
+});
+
+test('[DOCUMENTS]: deleting documents as a recipient should only hide it for them', async ({
+  page,
+}) => {
+  const { sender, recipients } = await seedDeleteDocumentsTestRequirements();
+  const recipientA = recipients[0];
+  const recipientB = recipients[1];
+
+  await apiSignin({
+    page,
+    email: recipientA.email,
+  });
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Completed' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Hide' }).click();
+  await page.getByRole('button', { name: 'Hide' }).click();
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Pending' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Hide' }).click();
+  await page.getByRole('button', { name: 'Hide' }).click();
+
+  // Check document counts.
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
+  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 0);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 0);
+
+  // Sign into the sender account.
+  await apiSignout({ page });
+  await apiSignin({
+    page,
+    email: sender.email,
+  });
+
+  // Check document counts for sender.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 1);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 3);
+
+  // Sign into the other recipient account.
+  await apiSignout({ page });
+  await apiSignin({
+    page,
+    email: recipientB.email,
+  });
+
+  // Check document counts for other recipient.
+  await checkDocumentTabCount(page, 'Inbox', 1);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 2);
 });

packages/app-tests/e2e/fixtures/documents.ts

@@ -0,0 +1,17 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export const checkDocumentTabCount = async (page: Page, tabName: string, count: number) => {
+  await page.getByRole('tab', { name: tabName }).click();
+
+  if (tabName !== 'All') {
+    await expect(page.getByRole('tab', { name: tabName })).toContainText(count.toString());
+  }
+
+  if (count === 0) {
+    await expect(page.getByTestId('empty-document-state')).toBeVisible();
+    return;
+  }
+
+  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
+};

packages/app-tests/e2e/teams/team-documents.spec.ts

@@ -1,4 +1,3 @@
-import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
 import { DocumentStatus } from '@documenso/prisma/client';
@@ -7,24 +6,10 @@ import { seedTeamEmail, unseedTeam, unseedTeamEmail } from '@documenso/prisma/se
 import { seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin, apiSignout } from '../fixtures/authentication';
+import { checkDocumentTabCount } from '../fixtures/documents';
 
 test.describe.configure({ mode: 'parallel' });
 
-const checkDocumentTabCount = async (page: Page, tabName: string, count: number) => {
-  await page.getByRole('tab', { name: tabName }).click();
-
-  if (tabName !== 'All') {
-    await expect(page.getByRole('tab', { name: tabName })).toContainText(count.toString());
-  }
-
-  if (count === 0) {
-    await expect(page.getByRole('main')).toContainText(`Nothing to do`);
-    return;
-  }
-
-  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
-};
-
 test('[TEAMS]: check team documents count', async ({ page }) => {
   const { team, teamMember2 } = await seedTeamDocuments();
 
@@ -245,24 +230,6 @@ test('[TEAMS]: check team documents count with external team email', async ({ pa
   await unseedTeam(team.url);
 });
 
-test('[TEAMS]: delete pending team document', async ({ page }) => {
-  const { team, teamMember2: currentUser } = await seedTeamDocuments();
-
-  await apiSignin({
-    page,
-    email: currentUser.email,
-    redirectPath: `/t/${team.url}/documents?status=PENDING`,
-  });
-
-  await page.getByRole('row').getByRole('button').nth(1).click();
-
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
-  await page.getByRole('button', { name: 'Delete' }).click();
-
-  await checkDocumentTabCount(page, 'Pending', 1);
-});
-
 test('[TEAMS]: resend pending team document', async ({ page }) => {
   const { team, teamMember2: currentUser } = await seedTeamDocuments();
 
@@ -280,3 +247,125 @@ test('[TEAMS]: resend pending team document', async ({ page }) => {
 
   await expect(page.getByRole('status')).toContainText('Document re-sent');
 });
+
+test('[TEAMS]: delete draft team document', async ({ page }) => {
+  const { team, teamMember2: teamEmailMember, teamMember3 } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamMember3.email,
+    redirectPath: `/t/${team.url}/documents?status=DRAFT`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(1).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Draft', 1);
+
+  // Should be hidden for all team members.
+  await apiSignout({ page });
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 1);
+    await checkDocumentTabCount(page, 'Draft', 1);
+    await checkDocumentTabCount(page, 'All', 4);
+
+    await apiSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: delete pending team document', async ({ page }) => {
+  const { team, teamMember2: teamEmailMember, teamMember3 } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamMember3.email,
+    redirectPath: `/t/${team.url}/documents?status=PENDING`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(1).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Pending', 1);
+
+  // Should be hidden for all team members.
+  await apiSignout({ page });
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 1);
+    await checkDocumentTabCount(page, 'Completed', 1);
+    await checkDocumentTabCount(page, 'Draft', 2);
+    await checkDocumentTabCount(page, 'All', 4);
+
+    await apiSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: delete completed team document', async ({ page }) => {
+  const { team, teamMember2: teamEmailMember, teamMember3 } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamMember3.email,
+    redirectPath: `/t/${team.url}/documents?status=COMPLETED`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(2).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Completed', 0);
+
+  // Should be hidden for all team members.
+  await apiSignout({ page });
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 0);
+    await checkDocumentTabCount(page, 'Draft', 2);
+    await checkDocumentTabCount(page, 'All', 4);
+
+    await apiSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});

packages/email/template-components/template-document-cancel.tsx

@@ -23,6 +23,10 @@ export const TemplateDocumentCancel = ({
           <br />"{documentName}"
         </Text>
 
+        <Text className="my-1 text-center text-base text-slate-400">
+          All signatures have been voided.
+        </Text>
+
         <Text className="my-1 text-center text-base text-slate-400">
           You don't need to sign it anymore.
         </Text>

packages/email/template-components/template-document-invite.tsx

@@ -11,6 +11,7 @@ export interface TemplateDocumentInviteProps {
   signDocumentLink: string;
   assetBaseUrl: string;
   role: RecipientRole;
+  selfSigner: boolean;
 }
 
 export const TemplateDocumentInvite = ({
@@ -19,6 +20,7 @@ export const TemplateDocumentInvite = ({
   signDocumentLink,
   assetBaseUrl,
   role,
+  selfSigner,
 }: TemplateDocumentInviteProps) => {
   const { actionVerb, progressiveVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
 
@@ -28,8 +30,19 @@ export const TemplateDocumentInvite = ({
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has invited you to {actionVerb.toLowerCase()}
-          <br />"{documentName}"
+          {selfSigner ? (
+            <>
+              {`Please ${actionVerb.toLowerCase()} your document`}
+              <br />
+              {`"${documentName}"`}
+            </>
+          ) : (
+            <>
+              {`${inviterName} has invited you to ${actionVerb.toLowerCase()}`}
+              <br />
+              {`"${documentName}"`}
+            </>
+          )}
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">

packages/email/templates/document-invite.tsx

@@ -22,6 +22,7 @@ import { TemplateFooter } from '../template-components/template-footer';
 export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
   customBody?: string;
   role: RecipientRole;
+  selfSigner?: boolean;
 };
 
 export const DocumentInviteEmailTemplate = ({
@@ -32,10 +33,13 @@ export const DocumentInviteEmailTemplate = ({
   assetBaseUrl = 'http://localhost:3002',
   customBody,
   role,
+  selfSigner = false,
 }: DocumentInviteEmailTemplateProps) => {
   const action = RECIPIENT_ROLES_DESCRIPTION[role].actionVerb.toLowerCase();
 
-  const previewText = `${inviterName} has invited you to ${action} ${documentName}`;
+  const previewText = selfSigner
+    ? `Please ${action} your document ${documentName}`
+    : `${inviterName} has invited you to ${action} ${documentName}`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -71,6 +75,7 @@ export const DocumentInviteEmailTemplate = ({
                   signDocumentLink={signDocumentLink}
                   assetBaseUrl={assetBaseUrl}
                   role={role}
+                  selfSigner={selfSigner}
                 />
               </Section>
             </Container>

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"
   }
 }

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

@@ -49,8 +49,8 @@ export const completeDocumentWithToken = async ({
 
   const document = await getDocument({ token, documentId });
 
-  if (document.status === DocumentStatus.COMPLETED) {
-    throw new Error(`Document ${document.id} has already been completed`);
+  if (document.status !== DocumentStatus.PENDING) {
+    throw new Error(`Document ${document.id} must be pending`);
   }
 
   if (document.Recipient.length === 0) {

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

@@ -6,6 +6,7 @@ import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import DocumentCancelTemplate from '@documenso/email/templates/document-cancel';
 import { prisma } from '@documenso/prisma';
+import type { Document, DocumentMeta, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
@@ -27,110 +28,178 @@ export const deleteDocument = async ({
   teamId,
   requestMetadata,
 }: DeleteDocumentOptions) => {
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  });
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
   const document = await prisma.document.findUnique({
     where: {
       id,
-      ...(teamId
-        ? {
-            team: {
-              id: teamId,
-              members: {
-                some: {
-                  userId,
-                },
-              },
-            },
-          }
-        : {
-            userId,
-            teamId: null,
-          }),
     },
     include: {
       Recipient: true,
       documentMeta: true,
-      User: true,
+      team: {
+        select: {
+          members: true,
+        },
+      },
     },
   });
 
-  if (!document) {
+  if (!document || (teamId !== undefined && teamId !== document.teamId)) {
     throw new Error('Document not found');
   }
 
-  const { status, User: user } = document;
+  const isUserOwner = document.userId === userId;
+  const isUserTeamMember = document.team?.members.some((member) => member.userId === userId);
+  const userRecipient = document.Recipient.find((recipient) => recipient.email === user.email);
 
-  // if the document is a draft, hard-delete
-  if (status === DocumentStatus.DRAFT) {
+  if (!isUserOwner && !isUserTeamMember && !userRecipient) {
+    throw new Error('Not allowed');
+  }
+
+  // Handle hard or soft deleting the actual document if user has permission.
+  if (isUserOwner || isUserTeamMember) {
+    await handleDocumentOwnerDelete({
+      document,
+      user,
+      requestMetadata,
+    });
+  }
+
+  // Continue to hide the document from the user if they are a recipient.
+  if (userRecipient?.documentDeletedAt === null) {
+    await prisma.recipient.update({
+      where: {
+        documentId_email: {
+          documentId: document.id,
+          email: user.email,
+        },
+      },
+      data: {
+        documentDeletedAt: new Date().toISOString(),
+      },
+    });
+  }
+
+  // Return partial document for API v1 response.
+  return {
+    id: document.id,
+    userId: document.userId,
+    teamId: document.teamId,
+    title: document.title,
+    status: document.status,
+    documentDataId: document.documentDataId,
+    createdAt: document.createdAt,
+    updatedAt: document.updatedAt,
+    completedAt: document.completedAt,
+  };
+};
+
+type HandleDocumentOwnerDeleteOptions = {
+  document: Document & {
+    Recipient: Recipient[];
+    documentMeta: DocumentMeta | null;
+  };
+  user: User;
+  requestMetadata?: RequestMetadata;
+};
+
+const handleDocumentOwnerDelete = async ({
+  document,
+  user,
+  requestMetadata,
+}: HandleDocumentOwnerDeleteOptions) => {
+  if (document.deletedAt) {
+    return;
+  }
+
+  // Soft delete completed documents.
+  if (document.status === DocumentStatus.COMPLETED) {
     return await prisma.$transaction(async (tx) => {
-      // Currently redundant since deleting a document will delete the audit logs.
-      // However may be useful if we disassociate audit lgos and documents if required.
       await tx.documentAuditLog.create({
         data: createDocumentAuditLogData({
-          documentId: id,
+          documentId: document.id,
           type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED,
           user,
           requestMetadata,
           data: {
-            type: 'HARD',
+            type: 'SOFT',
           },
         }),
       });
 
-      return await tx.document.delete({ where: { id, status: DocumentStatus.DRAFT } });
+      return await tx.document.update({
+        where: {
+          id: document.id,
+        },
+        data: {
+          deletedAt: new Date().toISOString(),
+        },
+      });
     });
   }
 
-  // if the document is pending, send cancellation emails to all recipients
-  if (status === DocumentStatus.PENDING && document.Recipient.length > 0) {
-    await Promise.all(
-      document.Recipient.map(async (recipient) => {
-        const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
-
-        const template = createElement(DocumentCancelTemplate, {
-          documentName: document.title,
-          inviterName: user.name || undefined,
-          inviterEmail: user.email,
-          assetBaseUrl,
-        });
-
-        await mailer.sendMail({
-          to: {
-            address: recipient.email,
-            name: recipient.name,
-          },
-          from: {
-            name: FROM_NAME,
-            address: FROM_ADDRESS,
-          },
-          subject: 'Document Cancelled',
-          html: render(template),
-          text: render(template, { plainText: true }),
-        });
-      }),
-    );
-  }
-
-  // If the document is not a draft, only soft-delete.
-  return await prisma.$transaction(async (tx) => {
+  // Hard delete draft and pending documents.
+  const deletedDocument = await prisma.$transaction(async (tx) => {
+    // Currently redundant since deleting a document will delete the audit logs.
+    // However may be useful if we disassociate audit logs and documents if required.
     await tx.documentAuditLog.create({
       data: createDocumentAuditLogData({
-        documentId: id,
+        documentId: document.id,
         type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED,
         user,
         requestMetadata,
         data: {
-          type: 'SOFT',
+          type: 'HARD',
         },
       }),
     });
 
-    return await tx.document.update({
+    return await tx.document.delete({
       where: {
-        id,
-      },
-      data: {
-        deletedAt: new Date().toISOString(),
+        id: document.id,
+        status: {
+          not: DocumentStatus.COMPLETED,
+        },
       },
     });
   });
+
+  // Send cancellation emails to recipients.
+  await Promise.all(
+    document.Recipient.map(async (recipient) => {
+      const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
+
+      const template = createElement(DocumentCancelTemplate, {
+        documentName: document.title,
+        inviterName: user.name || undefined,
+        inviterEmail: user.email,
+        assetBaseUrl,
+      });
+
+      await mailer.sendMail({
+        to: {
+          address: recipient.email,
+          name: recipient.name,
+        },
+        from: {
+          name: FROM_NAME,
+          address: FROM_ADDRESS,
+        },
+        subject: 'Document Cancelled',
+        html: render(template),
+        text: render(template, { plainText: true }),
+      });
+    }),
+  );
+
+  return deletedDocument;
 };

packages/lib/server-only/document/find-documents.ts

@@ -94,24 +94,65 @@ export const findDocuments = async ({
     };
   }
 
-  const whereClause: Prisma.DocumentWhereInput = {
-    ...termFilters,
-    ...filters,
+  let deletedFilter: Prisma.DocumentWhereInput = {
     AND: {
       OR: [
         {
-          status: ExtendedDocumentStatus.COMPLETED,
+          userId: user.id,
+          deletedAt: null,
         },
         {
-          status: {
-            not: ExtendedDocumentStatus.COMPLETED,
+          Recipient: {
+            some: {
+              email: user.email,
+              documentDeletedAt: null,
+            },
           },
-          deletedAt: null,
         },
       ],
     },
   };
 
+  if (team) {
+    deletedFilter = {
+      AND: {
+        OR: team.teamEmail
+          ? [
+              {
+                teamId: team.id,
+                deletedAt: null,
+              },
+              {
+                User: {
+                  email: team.teamEmail.email,
+                },
+                deletedAt: null,
+              },
+              {
+                Recipient: {
+                  some: {
+                    email: team.teamEmail.email,
+                    documentDeletedAt: null,
+                  },
+                },
+              },
+            ]
+          : [
+              {
+                teamId: team.id,
+                deletedAt: null,
+              },
+            ],
+      },
+    };
+  }
+
+  const whereClause: Prisma.DocumentWhereInput = {
+    ...termFilters,
+    ...filters,
+    ...deletedFilter,
+  };
+
   if (period) {
     const daysAgo = parseInt(period.replace(/d$/, ''), 10);
 

packages/lib/server-only/document/get-stats.ts

@@ -72,6 +72,7 @@ type GetCountsOption = {
 
 const getCounts = async ({ user, createdAt }: GetCountsOption) => {
   return Promise.all([
+    // Owner counts.
     prisma.document.groupBy({
       by: ['status'],
       _count: {
@@ -84,6 +85,7 @@ const getCounts = async ({ user, createdAt }: GetCountsOption) => {
         deletedAt: null,
       },
     }),
+    // Not signed counts.
     prisma.document.groupBy({
       by: ['status'],
       _count: {
@@ -95,12 +97,13 @@ const getCounts = async ({ user, createdAt }: GetCountsOption) => {
           some: {
             email: user.email,
             signingStatus: SigningStatus.NOT_SIGNED,
+            documentDeletedAt: null,
           },
         },
         createdAt,
-        deletedAt: null,
       },
     }),
+    // Has signed counts.
     prisma.document.groupBy({
       by: ['status'],
       _count: {
@@ -120,9 +123,9 @@ const getCounts = async ({ user, createdAt }: GetCountsOption) => {
               some: {
                 email: user.email,
                 signingStatus: SigningStatus.SIGNED,
+                documentDeletedAt: null,
               },
             },
-            deletedAt: null,
           },
           {
             status: ExtendedDocumentStatus.COMPLETED,
@@ -130,6 +133,7 @@ const getCounts = async ({ user, createdAt }: GetCountsOption) => {
               some: {
                 email: user.email,
                 signingStatus: SigningStatus.SIGNED,
+                documentDeletedAt: null,
               },
             },
           },
@@ -198,6 +202,7 @@ const getTeamCounts = async (options: GetTeamCountsOption) => {
           some: {
             email: teamEmail,
             signingStatus: SigningStatus.NOT_SIGNED,
+            documentDeletedAt: null,
           },
         },
         deletedAt: null,
@@ -219,6 +224,7 @@ const getTeamCounts = async (options: GetTeamCountsOption) => {
               some: {
                 email: teamEmail,
                 signingStatus: SigningStatus.SIGNED,
+                documentDeletedAt: null,
               },
             },
             deletedAt: null,
@@ -229,6 +235,7 @@ const getTeamCounts = async (options: GetTeamCountsOption) => {
               some: {
                 email: teamEmail,
                 signingStatus: SigningStatus.SIGNED,
+                documentDeletedAt: null,
               },
             },
             deletedAt: null,

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

@@ -88,6 +88,11 @@ export const resendDocument = async ({
       const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
 
       const { email, name } = recipient;
+      const selfSigner = email === user.email;
+
+      const selfSignerCustomEmail = `You have initiated the document ${`"${document.title}"`} that requires you to ${RECIPIENT_ROLES_DESCRIPTION[
+        recipient.role
+      ].actionVerb.toLowerCase()} it.`;
 
       const customEmailTemplate = {
         'signer.name': name,
@@ -104,12 +109,20 @@ export const resendDocument = async ({
         inviterEmail: user.email,
         assetBaseUrl,
         signDocumentLink,
-        customBody: renderCustomEmailTemplate(customEmail?.message || '', customEmailTemplate),
+        customBody: renderCustomEmailTemplate(
+          selfSigner ? selfSignerCustomEmail : customEmail?.message || '',
+          customEmailTemplate,
+        ),
         role: recipient.role,
+        selfSigner,
       });
 
       const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
 
+      const emailSubject = selfSigner
+        ? `Reminder: Please ${actionVerb.toLowerCase()} your document`
+        : `Reminder: Please ${actionVerb.toLowerCase()} this document`;
+
       await prisma.$transaction(
         async (tx) => {
           await mailer.sendMail({
@@ -123,7 +136,7 @@ export const resendDocument = async ({
             },
             subject: customEmail?.subject
               ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-              : `Please ${actionVerb.toLowerCase()} this document`,
+              : emailSubject,
             html: render(template),
             text: render(template, { plainText: true }),
           });

packages/lib/server-only/document/send-completed-email.ts

@@ -80,7 +80,7 @@ export const sendCompletedEmail = async ({ documentId, requestMetadata }: SendDo
       text: render(template, { plainText: true }),
       attachments: [
         {
-          filename: document.title,
+          filename: document.title.endsWith('.pdf') ? document.title : document.title + '.pdf',
           content: Buffer.from(completedDocument),
         },
       ],
@@ -130,7 +130,7 @@ export const sendCompletedEmail = async ({ documentId, requestMetadata }: SendDo
         text: render(template, { plainText: true }),
         attachments: [
           {
-            filename: document.title,
+            filename: document.title.endsWith('.pdf') ? document.title : document.title + '.pdf',
             content: Buffer.from(completedDocument),
           },
         ],

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

@@ -127,6 +127,11 @@ export const sendDocument = async ({
       const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
 
       const { email, name } = recipient;
+      const selfSigner = email === user.email;
+
+      const selfSignerCustomEmail = `You have initiated the document ${`"${document.title}"`} that requires you to ${RECIPIENT_ROLES_DESCRIPTION[
+        recipient.role
+      ].actionVerb.toLowerCase()} it.`;
 
       const customEmailTemplate = {
         'signer.name': name,
@@ -143,12 +148,20 @@ export const sendDocument = async ({
         inviterEmail: user.email,
         assetBaseUrl,
         signDocumentLink,
-        customBody: renderCustomEmailTemplate(customEmail?.message || '', customEmailTemplate),
+        customBody: renderCustomEmailTemplate(
+          selfSigner ? selfSignerCustomEmail : customEmail?.message || '',
+          customEmailTemplate,
+        ),
         role: recipient.role,
+        selfSigner,
       });
 
       const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
 
+      const emailSubject = selfSigner
+        ? `Please ${actionVerb.toLowerCase()} your document`
+        : `Please ${actionVerb.toLowerCase()} this document`;
+
       await prisma.$transaction(
         async (tx) => {
           await mailer.sendMail({
@@ -162,7 +175,7 @@ export const sendDocument = async ({
             },
             subject: customEmail?.subject
               ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-              : `Please ${actionVerb.toLowerCase()} this document`,
+              : emailSubject,
             html: render(template),
             text: render(template, { plainText: true }),
           });

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

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

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

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

packages/lib/server-only/field/remove-signed-field-with-token.ts

@@ -36,8 +36,8 @@ export const removeSignedFieldWithToken = async ({
     throw new Error(`Document not found for field ${field.id}`);
   }
 
-  if (document.status === DocumentStatus.COMPLETED) {
-    throw new Error(`Document ${document.id} has already been completed`);
+  if (document.status !== DocumentStatus.PENDING) {
+    throw new Error(`Document ${document.id} must be pending`);
   }
 
   if (recipient?.signingStatus === SigningStatus.SIGNED) {

packages/lib/server-only/field/sign-field-with-token.ts

@@ -58,14 +58,14 @@ export const signFieldWithToken = async ({
     throw new Error(`Recipient not found for field ${field.id}`);
   }
 
-  if (document.status === DocumentStatus.COMPLETED) {
-    throw new Error(`Document ${document.id} has already been completed`);
-  }
-
   if (document.deletedAt) {
     throw new Error(`Document ${document.id} has been deleted`);
   }
 
+  if (document.status !== DocumentStatus.PENDING) {
+    throw new Error(`Document ${document.id} must be pending for signing`);
+  }
+
   if (recipient?.signingStatus === SigningStatus.SIGNED) {
     throw new Error(`Recipient ${recipient.id} has already signed`);
   }

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

@@ -89,6 +89,10 @@ export const createDocumentFromTemplate = async ({
 
       const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
 
+      if (!documentRecipient) {
+        throw new Error('Recipient not found.');
+      }
+
       return {
         type: field.type,
         page: field.page,
@@ -99,7 +103,7 @@ export const createDocumentFromTemplate = async ({
         customText: field.customText,
         inserted: field.inserted,
         documentId: document.id,
-        recipientId: documentRecipient?.id || null,
+        recipientId: documentRecipient.id,
       };
     }),
   });

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

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

packages/lib/types/fields.ts

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

packages/prisma/migrations/20240408142543_add_recipient_document_delete/migration.sql

@@ -0,0 +1,13 @@
+-- AlterTable
+ALTER TABLE "Recipient" ADD COLUMN     "documentDeletedAt" TIMESTAMP(3);
+
+-- Hard delete all PENDING documents that have been soft deleted
+DELETE FROM "Document" WHERE "deletedAt" IS NOT NULL AND "status" = 'PENDING';
+
+-- Update all recipients who are the owner of the document and where the document has deletedAt set to not null
+UPDATE "Recipient"
+SET "documentDeletedAt" = "Document"."deletedAt"
+FROM "Document", "User"
+WHERE "Recipient"."documentId" = "Document"."id"
+AND "Recipient"."email" = "User"."email"
+AND "Document"."deletedAt" IS NOT NULL;

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

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

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

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

packages/prisma/schema.prisma

@@ -98,7 +98,7 @@ model PasswordResetToken {
   createdAt DateTime @default(now())
   expiry    DateTime
   userId    Int
-  User      User     @relation(fields: [userId], references: [id])
+  User      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model Passkey {
@@ -347,23 +347,24 @@ enum RecipientRole {
 }
 
 model Recipient {
-  id            Int           @id @default(autoincrement())
-  documentId    Int?
-  templateId    Int?
-  email         String        @db.VarChar(255)
-  name          String        @default("") @db.VarChar(255)
-  token         String
-  expired       DateTime?
-  signedAt      DateTime?
-  authOptions   Json?
-  role          RecipientRole @default(SIGNER)
-  readStatus    ReadStatus    @default(NOT_OPENED)
-  signingStatus SigningStatus @default(NOT_SIGNED)
-  sendStatus    SendStatus    @default(NOT_SENT)
-  Document      Document?     @relation(fields: [documentId], references: [id], onDelete: Cascade)
-  Template      Template?     @relation(fields: [templateId], references: [id], onDelete: Cascade)
-  Field         Field[]
-  Signature     Signature[]
+  id                Int           @id @default(autoincrement())
+  documentId        Int?
+  templateId        Int?
+  email             String        @db.VarChar(255)
+  name              String        @default("") @db.VarChar(255)
+  token             String
+  documentDeletedAt DateTime?
+  expired           DateTime?
+  signedAt          DateTime?
+  authOptions       Json?
+  role              RecipientRole @default(SIGNER)
+  readStatus        ReadStatus    @default(NOT_OPENED)
+  signingStatus     SigningStatus @default(NOT_SIGNED)
+  sendStatus        SendStatus    @default(NOT_SENT)
+  Document          Document?     @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  Template          Template?     @relation(fields: [templateId], references: [id], onDelete: Cascade)
+  Field             Field[]
+  Signature         Signature[]
 
   @@unique([documentId, email])
   @@unique([templateId, email])
@@ -386,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)
@@ -397,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])
@@ -414,7 +415,7 @@ model Signature {
   typedSignature         String?
 
   Recipient Recipient @relation(fields: [recipientId], references: [id], onDelete: Cascade)
-  Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Restrict)
+  Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Cascade)
 
   @@index([recipientId])
 }
@@ -456,7 +457,7 @@ model Team {
   emailVerification    TeamEmailVerification?
   transferVerification TeamTransferVerification?
 
-  owner        User          @relation(fields: [ownerUserId], references: [id])
+  owner        User          @relation(fields: [ownerUserId], references: [id], onDelete: Cascade)
   subscription Subscription?
 
   document  Document[]
@@ -482,7 +483,7 @@ model TeamMember {
   createdAt DateTime       @default(now())
   role      TeamMemberRole
   userId    Int
-  user      User           @relation(fields: [userId], references: [id])
+  user      User           @relation(fields: [userId], references: [id], onDelete: Cascade)
   team      Team           @relation(fields: [teamId], references: [id], onDelete: Cascade)
 
   @@unique([userId, teamId])
@@ -563,5 +564,5 @@ model SiteSettings {
   data                 Json
   lastModifiedByUserId Int?
   lastModifiedAt       DateTime @default(now())
-  lastModifiedByUser   User?    @relation(fields: [lastModifiedByUserId], references: [id])
+  lastModifiedByUser   User?    @relation(fields: [lastModifiedByUserId], references: [id], onDelete: SetNull)
 }

packages/prisma/seed/documents.ts

@@ -342,14 +342,15 @@ export const seedPendingDocumentWithFullFields = async ({
     },
   });
 
-  const latestDocument = updateDocumentOptions
-    ? await prisma.document.update({
-        where: {
-          id: document.id,
-        },
-        data: updateDocumentOptions,
-      })
-    : document;
+  const latestDocument = await prisma.document.update({
+    where: {
+      id: document.id,
+    },
+    data: {
+      ...updateDocumentOptions,
+      status: DocumentStatus.PENDING,
+    },
+  });
 
   return {
     document: latestDocument,

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

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

packages/ui/components/field/field.tsx

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

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

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

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

@@ -5,6 +5,7 @@ import React, { useId, useMemo, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
 import { InfoIcon, Plus, Trash } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -60,6 +61,8 @@ export const AddSignersFormPartial = ({
 }: AddSignersFormProps) => {
   const { toast } = useToast();
   const { remaining } = useLimits();
+  const { data: session } = useSession();
+  const user = session?.user;
 
   const initialId = useId();
 
@@ -135,6 +138,16 @@ export const AddSignersFormPartial = ({
     );
   };
 
+  const onAddSelfSigner = () => {
+    appendSigner({
+      formId: nanoid(12),
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+      actionAuth: undefined,
+    });
+  };
+
   const onAddSigner = () => {
     appendSigner({
       formId: nanoid(12),
@@ -209,8 +222,12 @@ export const AddSignersFormPartial = ({
                           <Input
                             type="email"
                             placeholder="Email"
-                            disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                             {...field}
+                            disabled={
+                              isSubmitting ||
+                              hasBeenSentToRecipientId(signer.nativeId) ||
+                              signers[index].email === user?.email
+                            }
                             onKeyDown={onKeyDown}
                           />
                         </FormControl>
@@ -230,15 +247,17 @@ export const AddSignersFormPartial = ({
                           'col-span-4': showAdvancedSettings,
                         })}
                       >
-                        {!showAdvancedSettings && index === 0 && (
-                          <FormLabel required>Name</FormLabel>
-                        )}
+                        {!showAdvancedSettings && index === 0 && <FormLabel>Name</FormLabel>}
 
                         <FormControl>
                           <Input
                             placeholder="Name"
-                            disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                             {...field}
+                            disabled={
+                              isSubmitting ||
+                              hasBeenSentToRecipientId(signer.nativeId) ||
+                              signers[index].email === user?.email
+                            }
                             onKeyDown={onKeyDown}
                           />
                         </FormControl>
@@ -283,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
@@ -307,11 +326,13 @@ 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).map((authType) => (
-                                  <SelectItem key={authType} value={authType}>
-                                    {DOCUMENT_AUTH_TYPES[authType].value}
-                                  </SelectItem>
-                                ))}
+                                {Object.values(RecipientActionAuth)
+                                  .filter((auth) => auth !== RecipientActionAuth.ACCOUNT)
+                                  .map((authType) => (
+                                    <SelectItem key={authType} value={authType}>
+                                      {DOCUMENT_AUTH_TYPES[authType].value}
+                                    </SelectItem>
+                                  ))}
                               </SelectContent>
                             </Select>
                           </FormControl>
@@ -340,29 +361,83 @@ export const AddSignersFormPartial = ({
                             <SelectContent align="end">
                               <SelectItem value={RecipientRole.SIGNER}>
                                 <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                                  Signer
-                                </div>
-                              </SelectItem>
-
-                              <SelectItem value={RecipientRole.CC}>
-                                <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                                  Receives copy
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                                    Needs to sign
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to sign the document for it to be
+                                        completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
                                 </div>
                               </SelectItem>
 
                               <SelectItem value={RecipientRole.APPROVER}>
                                 <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                                  Approver
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">
+                                      {ROLE_ICONS[RecipientRole.APPROVER]}
+                                    </span>
+                                    Needs to approve
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to approve the document for it to
+                                        be completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
                                 </div>
                               </SelectItem>
 
                               <SelectItem value={RecipientRole.VIEWER}>
                                 <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                                  Viewer
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                                    Needs to view
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to view the document for it to be
+                                        completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </div>
+                              </SelectItem>
+
+                              <SelectItem value={RecipientRole.CC}>
+                                <div className="flex items-center">
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                                    Receives copy
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is not required to take any action and
+                                        receives a copy of the document after it is completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
                                 </div>
                               </SelectItem>
                             </SelectContent>
@@ -403,32 +478,46 @@ export const AddSignersFormPartial = ({
             >
               <Button
                 type="button"
+                className="flex-1"
                 disabled={isSubmitting || signers.length >= remaining.recipients}
                 onClick={() => onAddSigner()}
               >
                 <Plus className="-ml-1 mr-2 h-5 w-5" />
                 Add Signer
               </Button>
-
-              {!alwaysShowAdvancedSettings && isDocumentEnterprise && (
-                <div className="flex flex-row items-center">
-                  <Checkbox
-                    id="showAdvancedRecipientSettings"
-                    className="h-5 w-5"
-                    checkClassName="dark:text-white text-primary"
-                    checked={showAdvancedSettings}
-                    onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
-                  />
-
-                  <label
-                    className="text-muted-foreground ml-2 text-sm"
-                    htmlFor="showAdvancedRecipientSettings"
-                  >
-                    Show advanced settings
-                  </label>
-                </div>
-              )}
+              <Button
+                type="button"
+                variant="secondary"
+                className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+                disabled={
+                  isSubmitting ||
+                  form.getValues('signers').some((signer) => signer.email === user?.email)
+                }
+                onClick={() => onAddSelfSigner()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add myself
+              </Button>
             </div>
+
+            {!alwaysShowAdvancedSettings && isDocumentEnterprise && (
+              <div className="mt-4 flex flex-row items-center">
+                <Checkbox
+                  id="showAdvancedRecipientSettings"
+                  className="h-5 w-5"
+                  checkClassName="dark:text-white text-primary"
+                  checked={showAdvancedSettings}
+                  onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
+                />
+
+                <label
+                  className="text-muted-foreground ml-2 text-sm"
+                  htmlFor="showAdvancedRecipientSettings"
+                >
+                  Show advanced settings
+                </label>
+              </div>
+            )}
           </Form>
         </AnimateGenericFadeInOut>
       </DocumentFlowFormContainerContent>

packages/ui/primitives/popover.tsx

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

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

@@ -4,7 +4,8 @@ import React, { useId, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Plus, Trash } from 'lucide-react';
+import { InfoIcon, Plus, Trash } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { nanoid } from '@documenso/lib/universal/id';
@@ -24,6 +25,7 @@ import type { DocumentFlowStep } from '../document-flow/types';
 import { ROLE_ICONS } from '../recipient-role-icons';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
 import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 
@@ -41,6 +43,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
+  const { data: session } = useSession();
+  const user = session?.user;
   const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
     recipients.length > 1 ? recipients.length + 1 : 2,
   );
@@ -50,6 +54,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   const {
     control,
     handleSubmit,
+    getValues,
     formState: { errors, isSubmitting },
   } = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
     resolver: zodResolver(ZAddTemplatePlacholderRecipientsFormSchema),
@@ -85,6 +90,15 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     name: 'signers',
   });
 
+  const onAddPlaceholderSelfRecipient = () => {
+    appendSigner({
+      formId: nanoid(12),
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+    });
+  };
+
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
@@ -146,29 +160,81 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                         <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>
-
-                          <SelectItem value={RecipientRole.CC}>
-                            <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                              Receives copy
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                                Needs to sign
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to sign the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
                             </div>
                           </SelectItem>
 
                           <SelectItem value={RecipientRole.APPROVER}>
                             <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                              Approver
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+                                Needs to approve
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to approve the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
                             </div>
                           </SelectItem>
 
                           <SelectItem value={RecipientRole.VIEWER}>
                             <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                              Viewer
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                                Needs to view
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to view the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.CC}>
+                            <div className="flex items-center">
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                                Receives copy
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is not required to take any action and receives a
+                                    copy of the document after it is completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
                             </div>
                           </SelectItem>
                         </SelectContent>
@@ -203,11 +269,27 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
           error={'signers__root' in errors && errors['signers__root']}
         />
 
-        <div className="mt-4">
-          <Button type="button" disabled={isSubmitting} onClick={() => onAddPlaceholderRecipient()}>
+        <div className="mt-4 flex flex-row items-center space-x-4">
+          <Button
+            type="button"
+            className="flex-1"
+            disabled={isSubmitting}
+            onClick={() => onAddPlaceholderRecipient()}
+          >
             <Plus className="-ml-1 mr-2 h-5 w-5" />
             Add Placeholder Recipient
           </Button>
+          <Button
+            type="button"
+            className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+            disabled={
+              isSubmitting || getValues('signers').some((signer) => signer.email === user?.email)
+            }
+            onClick={() => onAddPlaceholderSelfRecipient()}
+          >
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Myself
+          </Button>
         </div>
       </DocumentFlowFormContainerContent>