fix: asdf

fix: yeet
fix: ssr feature flags (#1119 )
2026-07-03 17:50:47 +10:00 · 2024-04-26 18:31:49 +07:00 · 2024-04-26 18:11:15 +07:00 · 2024-04-26 16:01:09 +07:00 · 2024-04-26 15:56:55 +10:00 · 2024-04-26 13:25:16 +10:00
27 changed files with 586 additions and 213 deletions
@@ -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">
@@ -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>
@@ -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" />}
@@ -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>
  );
@@ -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)
@@ -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>
  );
 };
@@ -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>
+  );
+};
@@ -22,7 +22,7 @@
        "eslint-config-custom": "*",
        "husky": "^9.0.11",
        "lint-staged": "^15.2.2",
-        "playwright": "1.41.0",
+        "playwright": "1.43.0",
        "prettier": "^2.5.1",
        "rimraf": "^5.0.1",
        "turbo": "^1.9.3"
@@ -4702,13 +4702,26 @@
        "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",
-      "integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==",
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
+      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.40.0"
+        "playwright": "1.43.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -4732,12 +4745,12 @@
      }
    },
    "node_modules/@playwright/test/node_modules/playwright": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
-      "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
+      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.40.0"
+        "playwright-core": "1.43.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -4750,9 +4763,9 @@
      }
    },
    "node_modules/@playwright/test/node_modules/playwright-core": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
-      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
+      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
@@ -17660,11 +17673,11 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.41.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.0.tgz",
-      "integrity": "sha512-XOsfl5ZtAik/T9oek4V0jAypNlaCNzuKOwVhqhgYT3os6kH34PzbRb74F0VWcLYa5WFdnmxl7qyAHBXvPv7lqQ==",
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz",
+      "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==",
      "dependencies": {
-        "playwright-core": "1.41.0"
+        "playwright-core": "1.43.0"
      },
      "bin": {
        "playwright": "cli.js"
@@ -17676,6 +17689,17 @@
        "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",
@@ -17689,17 +17713,6 @@
        "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",
@@ -24968,7 +24981,7 @@
        "next-auth": "4.24.5",
        "oslo": "^0.17.0",
        "pdf-lib": "^1.17.1",
-        "playwright": "1.41.0",
+        "playwright": "1.43.0",
        "react": "18.2.0",
        "remeda": "^1.27.1",
        "stripe": "^12.7.0",
@@ -24976,23 +24989,10 @@
        "zod": "^3.22.4"
      },
      "devDependencies": {
-        "@playwright/browser-chromium": "1.41.0",
+        "@playwright/browser-chromium": "1.43.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,18 +25010,6 @@
        "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",
@@ -38,7 +38,7 @@
    "eslint-config-custom": "*",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
-    "playwright": "1.41.0",
+    "playwright": "1.43.0",
    "prettier": "^2.5.1",
    "rimraf": "^5.0.1",
    "turbo": "^1.9.3"
@@ -39,7 +39,7 @@
    "next-auth": "4.24.5",
    "oslo": "^0.17.0",
    "pdf-lib": "^1.17.1",
-    "playwright": "1.41.0",
+    "playwright": "1.43.0",
    "react": "18.2.0",
    "remeda": "^1.27.1",
    "stripe": "^12.7.0",
@@ -48,6 +48,6 @@
  },
  "devDependencies": {
    "@types/luxon": "^3.3.1",
-    "@playwright/browser-chromium": "1.41.0"
+    "@playwright/browser-chromium": "1.43.0"
  }
 }
@@ -47,7 +47,13 @@ export const completeDocumentWithToken = async ({
 }: CompleteDocumentWithTokenOptions) => {
  'use server';

+  const startTime = Date.now();
+  console.log('Start:' + startTime);
+
+  console.log('getDocumentStart:' + startTime);
  const document = await getDocument({ token, documentId });
+  console.log('getDocumentEnd:' + (Date.now() - startTime));
+  console.log('Acc:' + (Date.now() - startTime));

  if (document.status !== DocumentStatus.PENDING) {
    throw new Error(`Document ${document.id} must be pending`);
@@ -63,12 +69,16 @@ export const completeDocumentWithToken = async ({
    throw new Error(`Recipient ${recipient.id} has already signed`);
  }

+  const fieldStartTime = Date.now();
+  console.log('fieldStart:' + fieldStartTime);
  const fields = await prisma.field.findMany({
    where: {
      documentId: document.id,
      recipientId: recipient.id,
    },
  });
+  console.log('fieldEnd:' + (Date.now() - fieldStartTime));
+  console.log('Acc:' + (Date.now() - startTime));

  if (fields.some((field) => !field.inserted)) {
    throw new Error(`Recipient ${recipient.id} has unsigned fields`);
@@ -93,6 +103,9 @@ export const completeDocumentWithToken = async ({
  //   throw new AppError(AppErrorCode.UNAUTHORIZED, 'Invalid authentication values');
  // }

+  const recipientUpdateStartTime = Date.now();
+  console.log('recipientUpdateStart:' + recipientUpdateStartTime);
+
  await prisma.$transaction(async (tx) => {
    await tx.recipient.update({
      where: {
@@ -124,6 +137,12 @@ export const completeDocumentWithToken = async ({
    });
  });

+  console.log('recipientUpdateEnd:' + (Date.now() - recipientUpdateStartTime));
+  console.log('Acc:' + (Date.now() - startTime));
+
+  const pendingRecipientsStartTime = Date.now();
+  console.log('pendingRecipientsStart:' + pendingRecipientsStartTime);
+
  const pendingRecipients = await prisma.recipient.count({
    where: {
      documentId: document.id,
@@ -132,11 +151,16 @@ export const completeDocumentWithToken = async ({
      },
    },
  });
+  console.log('pendingRecipientsEnd:' + (Date.now() - pendingRecipientsStartTime));
+  console.log('Acc:' + (Date.now() - startTime));

  if (pendingRecipients > 0) {
    await sendPendingEmail({ documentId, recipientId: recipient.id });
  }

+  const updateDocumentStartTime = Date.now();
+  console.log('updateDocumentStart:' + updateDocumentStartTime);
+
  const documents = await prisma.document.updateMany({
    where: {
      id: document.id,
@@ -151,12 +175,26 @@ export const completeDocumentWithToken = async ({
      completedAt: new Date(),
    },
  });
+  console.log('updateDocumentEnd:' + (Date.now() - updateDocumentStartTime));
+  console.log('Acc:' + (Date.now() - startTime));

  if (documents.count > 0) {
+    const sealDocumentStartTime = Date.now();
+    console.log('sealDocumentStart:' + sealDocumentStartTime);
    await sealDocument({ documentId: document.id, requestMetadata });
+    console.log('sealDocumentEnd:' + (Date.now() - sealDocumentStartTime));
+    console.log('Acc:' + (Date.now() - startTime));
  }

+  const updateDocumentStartTime2 = Date.now();
+  console.log('updateDocumentStart2:' + updateDocumentStartTime2);
+
  const updatedDocument = await getDocument({ token, documentId });
+  console.log('updateDocumentEnd2:' + (Date.now() - updateDocumentStartTime2));
+  console.log('Acc:' + (Date.now() - startTime));
+
+  const triggerWebhookStartTime = Date.now();
+  console.log('triggerWebhookStart:' + triggerWebhookStartTime);

  await triggerWebhook({
    event: WebhookTriggerEvents.DOCUMENT_SIGNED,
@@ -164,4 +202,6 @@ export const completeDocumentWithToken = async ({
    userId: updatedDocument.userId,
    teamId: updatedDocument.teamId ?? undefined,
  });
+  console.log('triggerWebhookEnd:' + (Date.now() - triggerWebhookStartTime));
+  console.log('Acc:' + (Date.now() - startTime));
 };
@@ -90,41 +90,69 @@ export const sealDocument = async ({
  }

  // !: Need to write the fields onto the document as a hard copy
+  const getFileTime = Date.now();
+  console.log('getFileStart:' + getFileTime);
  const pdfData = await getFile(documentData);
+  console.log('getFileEnd:' + (Date.now() - getFileTime));

+  const getCertificatePdfTime = Date.now();
+  console.log('getCertificatePdfStart:' + getCertificatePdfTime);
  const certificate = await getCertificatePdf({ documentId }).then(async (doc) =>
    PDFDocument.load(doc),
  );
+  console.log('getCertificatePdfEnd:' + (Date.now() - getCertificatePdfTime));

+  const loadDoc = Date.now();
+  console.log('loadDocStart:' + loadDoc);
  const doc = await PDFDocument.load(pdfData);
+  console.log('loadDocEnd:' + (Date.now() - loadDoc));

  // Normalize and flatten layers that could cause issues with the signature
  normalizeSignatureAppearances(doc);
  doc.getForm().flatten();
  flattenAnnotations(doc);

+  const certificatePageTime = Date.now();
+  console.log('certificatePageStart:' + certificatePageTime);
+
  const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());
+  console.log('certificatePageEnd:' + (Date.now() - certificatePageTime));

  certificatePages.forEach((page) => {
    doc.addPage(page);
  });

  for (const field of fields) {
+    const insertFIeldTime = Date.now();
+    console.log('insertFieldStart:' + insertFIeldTime);
    await insertFieldInPDF(doc, field);
+    console.log('insertFieldEnd:' + (Date.now() - insertFIeldTime));
  }

-  const pdfBytes = await doc.save();
+  const docSaveTime = Date.now();
+  console.log('docSaveStart:' + docSaveTime);

+  const pdfBytes = await doc.save();
+  console.log('docSaveEnd:' + (Date.now() - docSaveTime));
+
+  const pdfBufferTIme = Date.now();
+  console.log('pdfBufferStart:' + pdfBufferTIme);
  const pdfBuffer = await signPdf({ pdf: Buffer.from(pdfBytes) });
+  console.log('pdfBufferEnd:' + (Date.now() - pdfBufferTIme));

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

+  const putFIleTIme = Date.now();
+  console.log('putFileStart:' + putFIleTIme);
+
  const { data: newData } = await putFile({
    name: `${name}_signed${ext}`,
    type: 'application/pdf',
    arrayBuffer: async () => Promise.resolve(pdfBuffer),
  });

+  console.log('putFileEnd:' + (Date.now() - putFIleTIme));
+
  const postHog = PostHogServerClient();

  if (postHog) {
@@ -137,6 +165,9 @@ export const sealDocument = async ({
    });
  }

+  const updateDocumentTime = Date.now();
+  console.log('updateDocumentStart:' + updateDocumentTime);
+
  await prisma.$transaction(async (tx) => {
    await tx.documentData.update({
      where: {
@@ -160,10 +191,18 @@ export const sealDocument = async ({
    });
  });

+  console.log('updateDocumentEnd:' + (Date.now() - updateDocumentTime));
+
  if (sendEmail && !isResealing) {
+    const sendCompleteEmailTime = Date.now();
+    console.log('sendCompleteEmailStart:' + sendCompleteEmailTime);
    await sendCompletedEmail({ documentId, requestMetadata });
+    console.log('sendCompleteEmailEnd:' + (Date.now() - sendCompleteEmailTime));
  }

+  const asdfasdfasdf = Date.now();
+  console.log('updateDocumentStart:' + asdfasdfasdf);
+
  const updatedDocument = await prisma.document.findFirstOrThrow({
    where: {
      id: document.id,
@@ -173,6 +212,10 @@ export const sealDocument = async ({
      Recipient: true,
    },
  });
+  console.log('updateDocumentEnd:' + (Date.now() - asdfasdfasdf));
+
+  const triggerWebhookTime = Date.now();
+  console.log('triggerWebhookStart:' + triggerWebhookTime);

  await triggerWebhook({
    event: WebhookTriggerEvents.DOCUMENT_COMPLETED,
@@ -180,4 +223,5 @@ export const sealDocument = async ({
    userId: document.userId,
    teamId: document.teamId ?? undefined,
  });
+  console.log('triggerWebhookEnd:' + (Date.now() - triggerWebhookTime));
 };
@@ -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,
+        },
+      },
+    },
+  });
+};
@@ -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,
+        },
+      },
+    },
+  });
+};
@@ -18,9 +18,13 @@ export const getCertificatePdf = async ({ documentId }: GetCertificatePdfOptions
  let browser: Browser;

  if (process.env.NEXT_PRIVATE_BROWSERLESS_URL) {
-    browser = await chromium.connect(process.env.NEXT_PRIVATE_BROWSERLESS_URL);
+    // !: Use CDP rather than the default `connect` method to avoid coupling to the playwright version.
+    // !: Previously we would have to keep the playwright version in sync with the browserless version to avoid errors.
+    browser = await chromium.connectOverCDP(process.env.NEXT_PRIVATE_BROWSERLESS_URL);
  } else {
+    console.log('here');
    browser = await chromium.launch();
+    console.log('here2');
  }

  if (!browser) {
@@ -29,17 +33,41 @@ export const getCertificatePdf = async ({ documentId }: GetCertificatePdfOptions
    );
  }

+  console.log('1');
  const page = await browser.newPage();
+  console.log('2');

-  await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encryptedId}`, {
-    waitUntil: 'networkidle',
-  });
+  const domcontentloadedTime = Date.now();
+  console.log('domcontentloadedTime:' + domcontentloadedTime);
+
+  await page
+    .goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encryptedId}`, {
+      waitUntil: 'domcontentloaded',
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+  console.log('domcontentloadedEnd:' + (Date.now() - domcontentloadedTime));
+
+  const networkidleTime = Date.now();
+  console.log('networkidleTime:' + networkidleTime);
+
+  await page
+    .goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encryptedId}`, {
+      waitUntil: 'networkidle',
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+  console.log('networkidleEnd:' + (Date.now() - networkidleTime));

  const result = await page.pdf({
    format: 'A4',
  });
+  console.log(4);

  void browser.close();

+  console.log(5);
  return result;
 };
@@ -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,
      };
    }),
  });
@@ -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,
      };
    }),
  });
@@ -4,6 +4,7 @@ export const getWebhooksByUserId = async (userId: number) => {
  return await prisma.webhook.findMany({
    where: {
      userId,
+      teamId: null,
    },
    orderBy: {
      createdAt: 'desc',
@@ -0,0 +1,3 @@
+import type { getCompletedFieldsForToken } from '../server-only/field/get-completed-fields-for-token';
+
+export type CompletedField = Awaited<ReturnType<typeof getCompletedFieldsForToken>>[number];
@@ -17,6 +17,7 @@ export const getFlag = async (
  options?: GetFlagOptions,
 ): Promise<TFeatureFlagValue> => {
  const requestHeaders = options?.requestHeaders ?? {};
+  delete requestHeaders['content-length'];

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

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

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

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

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

 interface GetFlagOptions {
@@ -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;
@@ -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])
@@ -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(),
@@ -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'}
@@ -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>
@@ -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>
@@ -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 };
Author	SHA1	Message	Date
David Nguyen	ea93c1f508	fix: asdf	2024-04-26 18:31:49 +07:00
David Nguyen	2dd3e4440f	fix: yeet	2024-04-26 18:11:15 +07:00
David Nguyen	20edee7f1a	fix: ssr feature flags (#1119 ) ## Description Feature flags are broken on SSR due to this error ``` TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11731:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { cause: RequestContentLengthMismatchError: Request body length does not match content-length header at write (node:internal/deps/undici/undici:8590:41) at _resume (node:internal/deps/undici/undici:8563:33) at resume (node:internal/deps/undici/undici:8459:7) at [dispatch] (node:internal/deps/undici/undici:7704:11) at Client.Intercept (node:internal/deps/undici/undici:7377:20) at Client.dispatch (node:internal/deps/undici/undici:6023:44) at [dispatch] (node:internal/deps/undici/undici:6254:32) at Pool.dispatch (node:internal/deps/undici/undici:6023:44) at [dispatch] (node:internal/deps/undici/undici:9343:27) at Agent.Intercept (node:internal/deps/undici/undici:7377:20) { code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH' } } ``` I've removed content-length header since it isn't mandatory to my knowledge for get requests. ## Changes - Add fallback local flags when individual flag request fails - Add error logging - Remove `content-length` from headers being passed to Posthog	2024-04-26 16:01:09 +07:00
Lucas Smith	9bc5818d19	fix: use cdp and upgrade playwright again (#1117 ) ## Description Upgrade playwright once again and use CDP for remote connections to avoid version lock-in with `playwright.connect` Resolves the issue where all CI is failing currently due to downgrading playwright.	2024-04-26 15:56:55 +10:00
Mythie	481d739c37	chore: update package-lock	2024-04-26 13:25:16 +10:00
Mythie	88dedc9829	fix: use cdp and upgrade playwright again	2024-04-26 13:18:31 +10:00
Lucas Smith	e949fb14ae	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.	2024-04-26 11:14:52 +10:00
David Nguyen	e1573465f6	fix: hide team webhooks from users	2024-04-25 23:32:59 +07:00
Lucas Smith	0062359977	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 -->	2024-04-25 20:53:13 +10:00
Lucas Smith	03727bfad2	fix: disable cert download (#1114 ) ## Description Disable the document certificate download button when the document is not complete ## Changes Made - Disable UI button - Disable TRPC API endpoint ## Testing Performed Tested locally for pending, draft and completed documents	2024-04-25 20:43:52 +10:00
Lucas Smith	c4a680caf7	fix: hide account action reauth (#1115 ) ## Description Hide the account reauth option <img width="527" alt="image" src="https://github.com/documenso/documenso/assets/20962767/ee2169c7-856b-41ae-b756-43f15c2e8f69"> <img width="527" alt="image" src="https://github.com/documenso/documenso/assets/20962767/42ecc50a-2a7d-461b-9994-1af8f4a147ed">	2024-04-25 20:42:39 +10:00
David Nguyen	4de122f814	fix: hide account action reauth	2024-04-24 20:07:38 +07:00
David Nguyen	e4cf9c8251	fix: add server logic	2024-04-24 19:51:18 +07:00
David Nguyen	41ed6c9ad7	fix: disable cert download when document not complete	2024-04-24 19:49:10 +07:00
David Nguyen	afaeba9739	fix: resize fields	2024-04-22 13:31:49 +07:00
David Nguyen	f6e6dac46c	fix: update migration to drop invalid fields	2024-04-19 17:58:32 +07:00
David Nguyen	a97ffa97a4	Merge branch 'main' into feat/visible-fields	2024-04-19 17:54:32 +07:00
David Nguyen	6526377f1b	feat: add visible completed fields	2024-04-18 21:56:31 +07:00