fix: hide team webhooks from users (#1116)

## Description

Currently if you create a team webhook, you can see it in your personal
webhooks.

However, interacting with them will throw errors because there is server
side logic preventing any interaction with them since they are outside
of the correct context.

So the solution is to either:
- Allow the user to edit the team webhooks that they created on their
personal webhooks page
- Hide team webhooks for personal webhooks pages

This PR goes with the second option, but is open to suggestions.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/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/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/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/server-only/webhooks/get-webhooks-by-user-id.ts

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

packages/lib/types/fields.ts

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

packages/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/schema.prisma

@@ -387,7 +387,7 @@ model Field {
   secondaryId String     @unique @default(cuid())
   documentId  Int?
   templateId  Int?
-  recipientId Int?
+  recipientId Int
   type        FieldType
   page        Int
   positionX   Decimal    @default(0)
@@ -398,7 +398,7 @@ model Field {
   inserted    Boolean
   Document    Document?  @relation(fields: [documentId], references: [id], onDelete: Cascade)
   Template    Template?  @relation(fields: [templateId], references: [id], onDelete: Cascade)
-  Recipient   Recipient? @relation(fields: [recipientId], references: [id], onDelete: Cascade)
+  Recipient   Recipient  @relation(fields: [recipientId], references: [id], onDelete: Cascade)
   Signature   Signature?
 
   @@index([documentId])

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

@@ -302,10 +302,10 @@ export const AddSignersFormPartial = ({
                                         global action signing authentication method configured in
                                         the "General Settings" step
                                       </li>
-                                      <li>
+                                      {/* <li>
                                         <strong>Require account</strong> - The recipient must be
                                         signed in
-                                      </li>
+                                      </li> */}
                                       <li>
                                         <strong>Require passkey</strong> - The recipient must have
                                         an account and passkey configured via their settings
@@ -326,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>

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