chore: [INCOMPLETE] checkbox ui for all fields

skill issue
probably

apps/marketing/next.config.js

@@ -22,7 +22,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

apps/marketing/src/app/(marketing)/layout.tsx

@@ -2,8 +2,10 @@
 
 import React, { useEffect, useState } from 'react';
 
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
+import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
@@ -46,8 +48,16 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         })}
       >
         {showProfilesAnnouncementBar && (
-          <div className="relative inline-flex w-full items-center justify-center overflow-hidden bg-[#e7f3df] px-4 py-2.5">
-            <div className="text-black text-center text-sm font-medium">
+          <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
+            <div className="absolute inset-0 -z-[1]">
+              <Image
+                src={launchWeekTwoImage}
+                className="h-full w-full object-cover"
+                alt="Launch Week 2"
+              />
+            </div>
+
+            <div className="text-background text-center text-sm text-white">
               Claim your documenso public profile username now!{' '}
               <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
               <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">

apps/marketing/src/components/(marketing)/footer.tsx

@@ -13,7 +13,7 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
-// import { StatusWidgetContainer } from './status-widget-container';
+import { StatusWidgetContainer } from './status-widget-container';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -65,9 +65,9 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             ))}
           </div>
 
-          {/* <div className="mt-6">
+          <div className="mt-6">
             <StatusWidgetContainer />
-          </div> */}
+          </div>
         </div>
 
         <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">

apps/marketing/src/components/(marketing)/status-widget-container.tsx

@@ -6,7 +6,7 @@ import { StatusWidget } from './status-widget';
 export function StatusWidgetContainer() {
   return (
     <Suspense fallback={<StatusWidgetFallback />}>
-      <StatusWidget slug="documenso-status" />
+      <StatusWidget />
     </Suspense>
   );
 }

apps/marketing/src/components/(marketing)/status-widget.tsx

@@ -1,6 +1,7 @@
-import { memo, use } from 'react';
+import { use, useMemo } from 'react';
 
-import { type Status, getStatus } from '@openstatus/react';
+import type { Status } from '@openstatus/react';
+import { getStatus } from '@openstatus/react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -44,8 +45,9 @@ const getStatusLevel = (level: Status) => {
   }[level];
 };
 
-export const StatusWidget = memo(function StatusWidget({ slug }: { slug: string }) {
-  const { status } = use(getStatus(slug));
+export function StatusWidget() {
+  const getStatusMemoized = useMemo(async () => getStatus('documenso-status'), []);
+  const { status } = use(getStatusMemoized);
   const level = getStatusLevel(status);
 
   return (
@@ -70,4 +72,4 @@ export const StatusWidget = memo(function StatusWidget({ slug }: { slug: string
       </span>
     </a>
   );
-});
+}

apps/web/next.config.js

@@ -23,7 +23,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

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

@@ -4,16 +4,7 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import {
-  Copy,
-  Download,
-  Edit,
-  Loader,
-  MoreHorizontal,
-  ScrollTextIcon,
-  Share,
-  Trash2,
-} from 'lucide-react';
+import { Copy, Download, Edit, Loader, MoreHorizontal, Share, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
@@ -115,13 +106,6 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem asChild>
-          <Link href={`${documentsPath}/${document.id}/logs`}>
-            <ScrollTextIcon className="mr-2 h-4 w-4" />
-            Logs
-          </Link>
-        </DropdownMenuItem>
-
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate

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

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, DownloadIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
@@ -10,6 +10,7 @@ import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Recipient, Team } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
 import { Card } from '@documenso/ui/primitives/card';
 
 import {
@@ -18,8 +19,6 @@ import {
 } from '~/components/formatter/document-status';
 
 import { DocumentLogsDataTable } from './document-logs-data-table';
-import { DownloadAuditLogButton } from './download-audit-log-button';
-import { DownloadCertificateButton } from './download-certificate-button';
 
 export type DocumentLogsPageViewProps = {
   params: {
@@ -133,9 +132,15 @@ 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} />
+          <Button variant="outline" className="mr-2 w-full sm:w-auto">
+            <DownloadIcon className="mr-1.5 h-4 w-4" />
+            Download certificate
+          </Button>
 
-          <DownloadAuditLogButton documentId={document.id} />
+          <Button className="w-full sm:w-auto">
+            <DownloadIcon className="mr-1.5 h-4 w-4" />
+            Download PDF
+          </Button>
         </div>
       </div>
 

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

@@ -1,74 +0,0 @@
-'use client';
-
-import { DownloadIcon } from 'lucide-react';
-
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type DownloadAuditLogButtonProps = {
-  className?: string;
-  documentId: number;
-};
-
-export const DownloadAuditLogButton = ({ className, documentId }: DownloadAuditLogButtonProps) => {
-  const { toast } = useToast();
-
-  const { mutateAsync: downloadAuditLogs, isLoading } =
-    trpc.document.downloadAuditLogs.useMutation();
-
-  const onDownloadAuditLogsClick = async () => {
-    try {
-      const { url } = await downloadAuditLogs({ documentId });
-
-      const iframe = Object.assign(document.createElement('iframe'), {
-        src: url,
-      });
-
-      Object.assign(iframe.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '0',
-        height: '0',
-      });
-
-      const onLoaded = () => {
-        if (iframe.contentDocument?.readyState === 'complete') {
-          iframe.contentWindow?.print();
-
-          iframe.contentWindow?.addEventListener('afterprint', () => {
-            document.body.removeChild(iframe);
-          });
-        }
-      };
-
-      // When the iframe has loaded, print the iframe and remove it from the dom
-      iframe.addEventListener('load', onLoaded);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
-    } catch (error) {
-      console.error(error);
-
-      toast({
-        title: 'Something went wrong',
-        description: 'Sorry, we were unable to download the audit logs. Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Button
-      className={cn('w-full sm:w-auto', className)}
-      loading={isLoading}
-      onClick={() => void onDownloadAuditLogsClick()}
-    >
-      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Audit Logs
-    </Button>
-  );
-};

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

@@ -1,78 +0,0 @@
-'use client';
-
-import { DownloadIcon } from 'lucide-react';
-
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type DownloadCertificateButtonProps = {
-  className?: string;
-  documentId: number;
-};
-
-export const DownloadCertificateButton = ({
-  className,
-  documentId,
-}: DownloadCertificateButtonProps) => {
-  const { toast } = useToast();
-
-  const { mutateAsync: downloadCertificate, isLoading } =
-    trpc.document.downloadCertificate.useMutation();
-
-  const onDownloadCertificatesClick = async () => {
-    try {
-      const { url } = await downloadCertificate({ documentId });
-
-      const iframe = Object.assign(document.createElement('iframe'), {
-        src: url,
-      });
-
-      Object.assign(iframe.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '0',
-        height: '0',
-      });
-
-      const onLoaded = () => {
-        if (iframe.contentDocument?.readyState === 'complete') {
-          iframe.contentWindow?.print();
-
-          iframe.contentWindow?.addEventListener('afterprint', () => {
-            document.body.removeChild(iframe);
-          });
-        }
-      };
-
-      // When the iframe has loaded, print the iframe and remove it from the dom
-      iframe.addEventListener('load', onLoaded);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
-    } catch (error) {
-      console.error(error);
-
-      toast({
-        title: 'Something went wrong',
-        description: 'Sorry, we were unable to download the certificate. Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Button
-      className={cn('w-full sm:w-auto', className)}
-      loading={isLoading}
-      variant="outline"
-      onClick={() => void onDownloadCertificatesClick()}
-    >
-      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Certificate
-    </Button>
-  );
-};

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { DateTime } from 'luxon';
-import type { DateTimeFormatOptions } from 'luxon';
-import { UAParser } from 'ua-parser-js';
-
-import type { TDocumentAuditLog } from '@documenso/lib/types/document-audit-logs';
-import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@documenso/ui/primitives/table';
-
-import { LocaleDate } from '~/components/formatter/locale-date';
-
-export type AuditLogDataTableProps = {
-  logs: TDocumentAuditLog[];
-};
-
-const dateFormat: DateTimeFormatOptions = {
-  ...DateTime.DATETIME_SHORT,
-  hourCycle: 'h12',
-};
-
-export const AuditLogDataTable = ({ logs }: AuditLogDataTableProps) => {
-  const parser = new UAParser();
-
-  const uppercaseFistLetter = (text: string) => {
-    return text.charAt(0).toUpperCase() + text.slice(1);
-  };
-
-  return (
-    <Table overflowHidden>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Time</TableHead>
-          <TableHead>User</TableHead>
-          <TableHead>Action</TableHead>
-          <TableHead>IP Address</TableHead>
-          <TableHead>Browser</TableHead>
-        </TableRow>
-      </TableHeader>
-
-      <TableBody className="print:text-xs">
-        {logs.map((log, i) => (
-          <TableRow className="break-inside-avoid" key={i}>
-            <TableCell>
-              <LocaleDate format={dateFormat} date={log.createdAt} />
-            </TableCell>
-
-            <TableCell>
-              {log.name || log.email ? (
-                <div>
-                  {log.name && (
-                    <p className="break-all" title={log.name}>
-                      {log.name}
-                    </p>
-                  )}
-
-                  {log.email && (
-                    <p className="text-muted-foreground break-all" title={log.email}>
-                      {log.email}
-                    </p>
-                  )}
-                </div>
-              ) : (
-                <p>N/A</p>
-              )}
-            </TableCell>
-
-            <TableCell>
-              {uppercaseFistLetter(formatDocumentAuditLogAction(log).description)}
-            </TableCell>
-
-            <TableCell>{log.ipAddress}</TableCell>
-
-            <TableCell>
-              {log.userAgent ? parser.setUA(log.userAgent).getBrowser().name : 'N/A'}
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-
-import { redirect } from 'next/navigation';
-
-import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
-import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
-import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
-import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import { Logo } from '~/components/branding/logo';
-import { LocaleDate } from '~/components/formatter/locale-date';
-
-import { AuditLogDataTable } from './data-table';
-
-type AuditLogProps = {
-  searchParams: {
-    d: string;
-  };
-};
-
-export default async function AuditLog({ searchParams }: AuditLogProps) {
-  const { d } = searchParams;
-
-  if (typeof d !== 'string' || !d) {
-    return redirect('/');
-  }
-
-  const rawDocumentId = decryptSecondaryData(d);
-
-  if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
-    return redirect('/');
-  }
-
-  const documentId = Number(rawDocumentId);
-
-  const document = await getEntireDocument({
-    id: documentId,
-  }).catch(() => null);
-
-  if (!document) {
-    return redirect('/');
-  }
-
-  const { data: auditLogs } = await findDocumentAuditLogs({
-    documentId: documentId,
-    userId: document.userId,
-    perPage: 100_000,
-  });
-
-  return (
-    <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
-      <div className="flex items-center">
-        <h1 className="my-8 text-2xl font-bold">Version History</h1>
-      </div>
-
-      <Card>
-        <CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs">
-          <p>
-            <span className="font-medium">Document ID</span>
-
-            <span className="mt-1 block break-words">{document.id}</span>
-          </p>
-
-          <p>
-            <span className="font-medium">Enclosed Document</span>
-
-            <span className="mt-1 block break-words">{document.title}</span>
-          </p>
-
-          <p>
-            <span className="font-medium">Status</span>
-
-            <span className="mt-1 block">{document.deletedAt ? 'DELETED' : document.status}</span>
-          </p>
-
-          <p>
-            <span className="font-medium">Owner</span>
-
-            <span className="mt-1 block break-words">
-              {document.User.name} ({document.User.email})
-            </span>
-          </p>
-
-          <p>
-            <span className="font-medium">Created At</span>
-
-            <span className="mt-1 block">
-              <LocaleDate date={document.createdAt} format="yyyy-mm-dd hh:mm:ss a (ZZZZ)" />
-            </span>
-          </p>
-
-          <p>
-            <span className="font-medium">Last Updated</span>
-
-            <span className="mt-1 block">
-              <LocaleDate date={document.updatedAt} format="yyyy-mm-dd hh:mm:ss a (ZZZZ)" />
-            </span>
-          </p>
-
-          <p>
-            <span className="font-medium">Time Zone</span>
-
-            <span className="mt-1 block break-words">
-              {document.documentMeta?.timezone ?? 'N/A'}
-            </span>
-          </p>
-
-          <div>
-            <p className="font-medium">Recipients</p>
-
-            <ul className="mt-1 list-inside list-disc">
-              {document.Recipient.map((recipient) => (
-                <li key={recipient.id}>
-                  <span className="text-muted-foreground">
-                    [{RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}]
-                  </span>{' '}
-                  {recipient.name} ({recipient.email})
-                </li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="mt-8">
-        <CardContent className="p-0">
-          <AuditLogDataTable logs={auditLogs} />
-        </CardContent>
-      </Card>
-
-      <div className="my-8 flex-row-reverse">
-        <div className="flex items-end justify-end gap-x-4">
-          <Logo className="max-h-6 print:max-h-4" />
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx

@@ -1,299 +0,0 @@
-import React from 'react';
-
-import { redirect } from 'next/navigation';
-
-import { match } from 'ts-pattern';
-import { UAParser } from 'ua-parser-js';
-
-import {
-  RECIPIENT_ROLES_DESCRIPTION,
-  RECIPIENT_ROLE_SIGNING_REASONS,
-} from '@documenso/lib/constants/recipient-roles';
-import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
-import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
-import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
-import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
-import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { FieldType } from '@documenso/prisma/client';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@documenso/ui/primitives/table';
-
-import { Logo } from '~/components/branding/logo';
-import { LocaleDate } from '~/components/formatter/locale-date';
-
-type SigningCertificateProps = {
-  searchParams: {
-    d: string;
-  };
-};
-
-const FRIENDLY_SIGNING_REASONS = {
-  ['__OWNER__']: 'I am the owner of this document',
-  ...RECIPIENT_ROLE_SIGNING_REASONS,
-};
-
-export default async function SigningCertificate({ searchParams }: SigningCertificateProps) {
-  const { d } = searchParams;
-
-  if (typeof d !== 'string' || !d) {
-    return redirect('/');
-  }
-
-  const rawDocumentId = decryptSecondaryData(d);
-
-  if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
-    return redirect('/');
-  }
-
-  const documentId = Number(rawDocumentId);
-
-  const document = await getEntireDocument({
-    id: documentId,
-  }).catch(() => null);
-
-  if (!document) {
-    return redirect('/');
-  }
-
-  const auditLogs = await getDocumentCertificateAuditLogs({
-    id: documentId,
-  });
-
-  const isOwner = (email: string) => {
-    return email.toLowerCase() === document.User.email.toLowerCase();
-  };
-
-  const getDevice = (userAgent?: string | null) => {
-    if (!userAgent) {
-      return 'Unknown';
-    }
-
-    const parser = new UAParser(userAgent);
-
-    parser.setUA(userAgent);
-
-    const result = parser.getResult();
-
-    return `${result.os.name} - ${result.browser.name} ${result.browser.version}`;
-  };
-
-  const getAuthenticationLevel = (recipientId: number) => {
-    const recipient = document.Recipient.find((recipient) => recipient.id === recipientId);
-
-    if (!recipient) {
-      return 'Unknown';
-    }
-
-    const extractedAuthMethods = extractDocumentAuthMethods({
-      documentAuth: document.authOptions,
-      recipientAuth: recipient.authOptions,
-    });
-
-    let authLevel = match(extractedAuthMethods.derivedRecipientActionAuth)
-      .with('ACCOUNT', () => 'Account Re-Authentication')
-      .with('TWO_FACTOR_AUTH', () => 'Two-Factor Re-Authentication')
-      .with('PASSKEY', () => 'Passkey Re-Authentication')
-      .with('EXPLICIT_NONE', () => 'Email')
-      .with(null, () => null)
-      .exhaustive();
-
-    if (!authLevel) {
-      authLevel = match(extractedAuthMethods.derivedRecipientAccessAuth)
-        .with('ACCOUNT', () => 'Account Authentication')
-        .with(null, () => 'Email')
-        .exhaustive();
-    }
-
-    return authLevel;
-  };
-
-  const getRecipientAuditLogs = (recipientId: number) => {
-    return {
-      [DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT]: auditLogs[DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT].filter(
-        (log) =>
-          log.type === DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT && log.data.recipientId === recipientId,
-      ),
-      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED]: auditLogs[
-        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED
-      ].filter(
-        (log) =>
-          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED &&
-          log.data.recipientId === recipientId,
-      ),
-      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED]: auditLogs[
-        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED
-      ].filter(
-        (log) =>
-          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED &&
-          log.data.recipientId === recipientId,
-      ),
-    };
-  };
-
-  const getRecipientSignatureField = (recipientId: number) => {
-    return document.Recipient.find((recipient) => recipient.id === recipientId)?.Field.find(
-      (field) => field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE,
-    );
-  };
-
-  return (
-    <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
-      <div className="flex items-center">
-        <h1 className="my-8 text-2xl font-bold">Signing Certificate</h1>
-      </div>
-
-      <Card>
-        <CardContent className="p-0">
-          <Table overflowHidden>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Signer Events</TableHead>
-                <TableHead>Signature</TableHead>
-                <TableHead>Details</TableHead>
-                {/* <TableHead>Security</TableHead> */}
-              </TableRow>
-            </TableHeader>
-
-            <TableBody className="print:text-xs">
-              {document.Recipient.map((recipient, i) => {
-                const logs = getRecipientAuditLogs(recipient.id);
-                const signature = getRecipientSignatureField(recipient.id);
-
-                return (
-                  <TableRow key={i} className="print:break-inside-avoid">
-                    <TableCell truncate={false} className="w-[min-content] max-w-[220px] align-top">
-                      <div className="hyphens-auto break-words font-medium">{recipient.name}</div>
-                      <div className="break-all">{recipient.email}</div>
-                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-                      </p>
-
-                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        <span className="font-medium">Authentication Level:</span>{' '}
-                        <span className="block">{getAuthenticationLevel(recipient.id)}</span>
-                      </p>
-                    </TableCell>
-
-                    <TableCell truncate={false} className="w-[min-content] align-top">
-                      {signature ? (
-                        <>
-                          <div
-                            className="inline-block rounded-lg p-1"
-                            style={{
-                              boxShadow: `0px 0px 0px 4.88px rgba(122, 196, 85, 0.1), 0px 0px 0px 1.22px rgba(122, 196, 85, 0.6), 0px 0px 0px 0.61px rgba(122, 196, 85, 1)`,
-                            }}
-                          >
-                            <img
-                              src={`${signature.Signature?.signatureImageAsBase64}`}
-                              alt="Signature"
-                              className="max-h-12 max-w-full"
-                            />
-                          </div>
-
-                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                            <span className="font-medium">Signature ID:</span>{' '}
-                            <span className="block font-mono uppercase">
-                              {signature.secondaryId}
-                            </span>
-                          </p>
-
-                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                            <span className="font-medium">IP Address:</span>{' '}
-                            <span className="inline-block">
-                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? 'Unknown'}
-                            </span>
-                          </p>
-
-                          <p className="text-muted-foreground mt-1 text-sm print:text-xs">
-                            <span className="font-medium">Device:</span>{' '}
-                            <span className="inline-block">
-                              {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
-                            </span>
-                          </p>
-                        </>
-                      ) : (
-                        <p className="text-muted-foreground">N/A</p>
-                      )}
-                    </TableCell>
-
-                    <TableCell truncate={false} className="w-[min-content] align-top">
-                      <div className="space-y-1">
-                        <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Sent:</span>{' '}
-                          <span className="inline-block">
-                            {logs.EMAIL_SENT[0] ? (
-                              <LocaleDate
-                                date={logs.EMAIL_SENT[0].createdAt}
-                                format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
-                              />
-                            ) : (
-                              'Unknown'
-                            )}
-                          </span>
-                        </p>
-
-                        <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Viewed:</span>{' '}
-                          <span className="inline-block">
-                            {logs.DOCUMENT_OPENED[0] ? (
-                              <LocaleDate
-                                date={logs.DOCUMENT_OPENED[0].createdAt}
-                                format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
-                              />
-                            ) : (
-                              'Unknown'
-                            )}
-                          </span>
-                        </p>
-
-                        <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Signed:</span>{' '}
-                          <span className="inline-block">
-                            {logs.DOCUMENT_RECIPIENT_COMPLETED[0] ? (
-                              <LocaleDate
-                                date={logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt}
-                                format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
-                              />
-                            ) : (
-                              'Unknown'
-                            )}
-                          </span>
-                        </p>
-
-                        <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Reason:</span>{' '}
-                          <span className="inline-block">
-                            {isOwner(recipient.email)
-                              ? FRIENDLY_SIGNING_REASONS['__OWNER__']
-                              : FRIENDLY_SIGNING_REASONS[recipient.role]}
-                          </span>
-                        </p>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-
-      <div className="my-8 flex-row-reverse">
-        <div className="flex items-end justify-end gap-x-4">
-          <p className="flex-shrink-0 text-sm font-medium print:text-xs">
-            Signing certificate provided by:
-          </p>
-
-          <Logo className="max-h-6 print:max-h-4" />
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useCallback, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { Form, FormControl, FormField } from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SigningFieldContainer } from './signing-field-container';
+
+export type CheckboxFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+const CheckBoxSchema = z.object({
+  check: z.boolean().default(false).optional(),
+});
+
+export const CheckboxField = ({ field, recipient }: CheckboxFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  // const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const form = useForm<z.infer<typeof CheckBoxSchema>>({
+    resolver: zodResolver(CheckBoxSchema),
+    defaultValues: {
+      check: false,
+    },
+  });
+
+  const onSign = useCallback(
+    async (authOptions?: TRecipientActionAuth) => {
+      try {
+        await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value: 'checked',
+          isBase64: true,
+          authOptions,
+        });
+
+        startTransition(() => router.refresh());
+      } catch (err) {
+        const error = AppError.parseError(err);
+
+        if (error.code === AppErrorCode.UNAUTHORIZED) {
+          throw error;
+        }
+
+        toast({
+          title: 'Error',
+          description: 'An error occurred while signing the document.',
+          variant: 'destructive',
+        });
+      }
+    },
+    [field.id, recipient.token, router, signFieldWithToken, toast],
+  );
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the text.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Checkbox"
+      raw={true}
+    >
+      <Form {...form}>
+        <form>
+          <FormField
+            control={form.control}
+            name="check"
+            render={({ field }) => (
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  className="h-8 w-8"
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            )}
+          />
+        </form>
+      </Form>
+    </SigningFieldContainer>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx

@@ -1,155 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { TRPCClientError } from '@documenso/trpc/client';
-import { trpc } from '@documenso/trpc/react';
-import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type ClaimAccountProps = {
-  defaultName: string;
-  defaultEmail: string;
-  trigger?: React.ReactNode;
-};
-
-export const ZClaimAccountFormSchema = z
-  .object({
-    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-    email: z.string().email().min(1),
-    password: ZPasswordSchema,
-  })
-  .refine(
-    (data) => {
-      const { name, email, password } = data;
-      return !password.includes(name) && !password.includes(email.split('@')[0]);
-    },
-    {
-      message: 'Password should not be common or based on personal information',
-      path: ['password'],
-    },
-  );
-
-export type TClaimAccountFormSchema = z.infer<typeof ZClaimAccountFormSchema>;
-
-export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) => {
-  const analytics = useAnalytics();
-  const { toast } = useToast();
-  const router = useRouter();
-
-  const { mutateAsync: signup } = trpc.auth.signup.useMutation();
-
-  const form = useForm<TClaimAccountFormSchema>({
-    values: {
-      name: defaultName ?? '',
-      email: defaultEmail,
-      password: '',
-    },
-    resolver: zodResolver(ZClaimAccountFormSchema),
-  });
-
-  const onFormSubmit = async ({ name, email, password }: TClaimAccountFormSchema) => {
-    try {
-      await signup({ name, email, password });
-
-      router.push(`/unverified-account`);
-
-      toast({
-        title: 'Registration Successful',
-        description:
-          'You have successfully registered. Please verify your account by clicking on the link you received in the email.',
-        duration: 5000,
-      });
-
-      analytics.capture('App: User Claim Account', {
-        email,
-        timestamp: new Date().toISOString(),
-      });
-    } catch (error) {
-      if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: 'An error occurred',
-          description: error.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: 'An unknown error occurred',
-          description:
-            'We encountered an unknown error while attempting to sign you up. Please try again later.',
-          variant: 'destructive',
-        });
-      }
-    }
-  };
-
-  return (
-    <div className="mt-2 w-full">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onFormSubmit)}>
-          <fieldset disabled={form.formState.isSubmitting} className="mt-4">
-            <FormField
-              name="name"
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder="Enter your name" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name="email"
-              control={form.control}
-              render={({ field }) => (
-                <FormItem className="mt-4">
-                  <FormLabel>Email address</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder="Enter your email" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name="password"
-              control={form.control}
-              render={({ field }) => (
-                <FormItem className="mt-4">
-                  <FormLabel>Set a password</FormLabel>
-                  <FormControl>
-                    <PasswordInput {...field} placeholder="Pick a password" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Button type="submit" className="mt-6 w-full" loading={form.formState.isSubmitting}>
-              Claim account
-            </Button>
-          </fieldset>
-        </form>
-      </Form>
-    </div>
-  );
-};

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

@@ -3,7 +3,6 @@ import { notFound } from 'next/navigation';
 
 import { CheckCircle2, Clock8 } from 'lucide-react';
 import { getServerSession } from 'next-auth';
-import { env } from 'next-runtime-env';
 import { match } from 'ts-pattern';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
@@ -17,13 +16,10 @@ import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/clie
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
-import { cn } from '@documenso/ui/lib/utils';
-import { Badge } from '@documenso/ui/primitives/badge';
 
 import { truncateTitle } from '~/helpers/truncate-title';
 
 import { SigningAuthPageView } from '../signing-auth-page';
-import { ClaimAccount } from './claim-account';
 import { DocumentPreviewButton } from './document-preview-button';
 
 export type CompletedSigningPageProps = {
@@ -35,8 +31,6 @@ export type CompletedSigningPageProps = {
 export default async function CompletedSigningPage({
   params: { token },
 }: CompletedSigningPageProps) {
-  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
-
   if (!token) {
     return notFound();
   }
@@ -85,120 +79,96 @@ export default async function CompletedSigningPage({
 
   const sessionData = await getServerSession();
   const isLoggedIn = !!sessionData?.user;
-  const canSignUp = !isLoggedIn && NEXT_PUBLIC_DISABLE_SIGNUP !== 'true';
 
   return (
-    <div
-      className={cn(
-        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
-        { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
-      )}
-    >
-      <div
-        className={cn('relative mt-6 flex w-full flex-col items-center justify-center', {
-          'mt-0 flex-col divide-y overflow-hidden pt-6 md:pt-16 lg:flex-row lg:divide-x lg:divide-y-0 lg:pt-20 xl:pt-24':
-            canSignUp,
-        })}
-      >
-        <div
-          className={cn('flex flex-col items-center', {
-            'mb-8 p-4 md:mb-0 md:p-12': canSignUp,
-          })}
-        >
-          <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
-            {truncatedTitle}
-          </Badge>
+    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44">
+      {/* Card with recipient */}
+      <SigningCard3D
+        name={recipientName}
+        signature={signatures.at(0)}
+        signingCelebrationImage={signingCelebration}
+      />
 
-          {/* Card with recipient */}
-          <SigningCard3D
-            name={recipientName}
-            signature={signatures.at(0)}
-            signingCelebrationImage={signingCelebration}
-          />
+      <div className="relative mt-6 flex w-full flex-col items-center">
+        {match({ status: document.status, deletedAt: document.deletedAt })
+          .with({ status: DocumentStatus.COMPLETED }, () => (
+            <div className="text-documenso-700 flex items-center text-center">
+              <CheckCircle2 className="mr-2 h-5 w-5" />
+              <span className="text-sm">Everyone has signed</span>
+            </div>
+          ))
+          .with({ deletedAt: null }, () => (
+            <div className="flex items-center text-center text-blue-600">
+              <Clock8 className="mr-2 h-5 w-5" />
+              <span className="text-sm">Waiting for others to sign</span>
+            </div>
+          ))
+          .otherwise(() => (
+            <div className="flex items-center text-center text-red-600">
+              <Clock8 className="mr-2 h-5 w-5" />
+              <span className="text-sm">Document no longer available to sign</span>
+            </div>
+          ))}
 
-          <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-            Document
-            {recipient.role === RecipientRole.SIGNER && ' Signed '}
-            {recipient.role === RecipientRole.VIEWER && ' Viewed '}
-            {recipient.role === RecipientRole.APPROVER && ' Approved '}
-          </h2>
+        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+          You have
+          {recipient.role === RecipientRole.SIGNER && ' signed '}
+          {recipient.role === RecipientRole.VIEWER && ' viewed '}
+          {recipient.role === RecipientRole.APPROVER && ' approved '}
+          <span className="mt-1.5 block">"{truncatedTitle}"</span>
+        </h2>
 
-          {match({ status: document.status, deletedAt: document.deletedAt })
-            .with({ status: DocumentStatus.COMPLETED }, () => (
-              <div className="text-documenso-700 mt-4 flex items-center text-center">
-                <CheckCircle2 className="mr-2 h-5 w-5" />
-                <span className="text-sm">Everyone has signed</span>
-              </div>
-            ))
-            .with({ deletedAt: null }, () => (
-              <div className="flex items-center text-center text-blue-600">
-                <Clock8 className="mr-2 h-5 w-5" />
-                <span className="text-sm">Waiting for others to sign</span>
-              </div>
-            ))
-            .otherwise(() => (
-              <div className="flex items-center text-center text-red-600">
-                <Clock8 className="mr-2 h-5 w-5" />
-                <span className="text-sm">Document no longer available to sign</span>
-              </div>
-            ))}
+        {match({ status: document.status, deletedAt: document.deletedAt })
+          .with({ status: DocumentStatus.COMPLETED }, () => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              Everyone has signed! You will receive an Email copy of the signed document.
+            </p>
+          ))
+          .with({ deletedAt: null }, () => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              You will receive an Email copy of the signed document once everyone has signed.
+            </p>
+          ))
+          .otherwise(() => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              This document has been cancelled by the owner and is no longer available for others to
+              sign.
+            </p>
+          ))}
 
-          {match({ status: document.status, deletedAt: document.deletedAt })
-            .with({ status: DocumentStatus.COMPLETED }, () => (
-              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-                Everyone has signed! You will receive an Email copy of the signed document.
-              </p>
-            ))
-            .with({ deletedAt: null }, () => (
-              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-                You will receive an Email copy of the signed document once everyone has signed.
-              </p>
-            ))
-            .otherwise(() => (
-              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-                This document has been cancelled by the owner and is no longer available for others
-                to sign.
-              </p>
-            ))}
+        <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+          <DocumentShareButton documentId={document.id} token={recipient.token} />
 
-          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-            <DocumentShareButton documentId={document.id} token={recipient.token} />
-
-            {document.status === DocumentStatus.COMPLETED ? (
-              <DocumentDownloadButton
-                className="flex-1"
-                fileName={document.title}
-                documentData={documentData}
-                disabled={document.status !== DocumentStatus.COMPLETED}
-              />
-            ) : (
-              <DocumentPreviewButton
-                className="text-[11px]"
-                title="Signatures will appear once the document has been completed"
-                documentData={documentData}
-              />
-            )}
-          </div>
+          {document.status === DocumentStatus.COMPLETED ? (
+            <DocumentDownloadButton
+              className="flex-1"
+              fileName={document.title}
+              documentData={documentData}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+            />
+          ) : (
+            <DocumentPreviewButton
+              className="text-[11px]"
+              title="Signatures will appear once the document has been completed"
+              documentData={documentData}
+            />
+          )}
         </div>
 
-        {canSignUp && (
-          <div className={`flex max-w-xl flex-col items-center justify-center p-4 md:p-12`}>
-            <h2 className="mt-8 text-center text-xl font-semibold md:mt-0">
-              Need to sign documents?
-            </h2>
-
-            <p className="text-muted-foreground/60 mt-4 max-w-[55ch] text-center leading-normal">
-              Create your account and start using state-of-the-art document signing.
-            </p>
-
-            <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
-          </div>
-        )}
-
-        {isLoggedIn && (
+        {isLoggedIn ? (
           <Link href="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
             Go Back Home
           </Link>
+        ) : (
+          <p className="text-muted-foreground/60 mt-36 text-sm">
+            Want to send slick signing links like this one?{' '}
+            <Link
+              href="https://documenso.com"
+              className="text-documenso-700 hover:text-documenso-600"
+            >
+              Check out Documenso.
+            </Link>
+          </p>
         )}
       </div>
     </div>

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -35,8 +35,10 @@ export type SignatureFieldProps = {
    */
   onSign?: (documentAuthValue?: TRecipientActionAuth) => Promise<void> | void;
   onRemove?: () => Promise<void> | void;
-  type?: 'Date' | 'Email' | 'Name' | 'Signature';
+  type?: 'Date' | 'Email' | 'Name' | 'Signature' | 'Checkbox';
   tooltipText?: string | null;
+
+  raw?: boolean;
 };
 
 export const SigningFieldContainer = ({
@@ -48,6 +50,7 @@ export const SigningFieldContainer = ({
   children,
   type,
   tooltipText,
+  raw = false,
 }: SignatureFieldProps) => {
   const { executeActionAuthProcedure, isAuthRedirectRequired } = useRequiredDocumentAuthContext();
 
@@ -103,8 +106,8 @@ export const SigningFieldContainer = ({
   };
 
   return (
-    <FieldRootContainer field={field}>
-      {!field.inserted && !loading && (
+    <FieldRootContainer raw={raw} field={field}>
+      {!field.inserted && !loading && !raw && (
         <button
           type="submit"
           className="absolute inset-0 z-10 h-full w-full"

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

@@ -12,6 +12,7 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { truncateTitle } from '~/helpers/truncate-title';
 
+import { CheckboxField } from './checkbox-field';
 import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
@@ -94,6 +95,9 @@ export const SigningPageView = ({ document, recipient, fields }: SigningPageView
             .with(FieldType.TEXT, () => (
               <TextField key={field.id} field={field} recipient={recipient} />
             ))
+            .with(FieldType.CHECKBOX, () => (
+              <CheckboxField key={field.id} field={field} recipient={recipient} />
+            ))
             .otherwise(() => null),
         )}
       </ElementVisible>

package-lock.json

@@ -22,7 +22,6 @@
         "eslint-config-custom": "*",
         "husky": "^9.0.11",
         "lint-staged": "^15.2.2",
-        "playwright": "^1.43.0",
         "prettier": "^2.5.1",
         "rimraf": "^5.0.1",
         "turbo": "^1.9.3"
@@ -4702,19 +4701,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",
@@ -4730,50 +4716,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/@playwright/test/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "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==",
-      "dev": true,
-      "dependencies": {
-        "playwright-core": "1.40.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "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==",
-      "dev": true,
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/@prisma/client": {
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.4.2.tgz",
@@ -17673,11 +17615,12 @@
       }
     },
     "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.40.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
+      "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
+      "dev": true,
       "dependencies": {
-        "playwright-core": "1.43.0"
+        "playwright-core": "1.40.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -17690,9 +17633,10 @@
       }
     },
     "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==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
+      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
+      "dev": true,
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -17704,6 +17648,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -24981,7 +24926,6 @@
         "next-auth": "4.24.5",
         "oslo": "^0.17.0",
         "pdf-lib": "^1.17.1",
-        "playwright": "^1.43.0",
         "react": "18.2.0",
         "remeda": "^1.27.1",
         "stripe": "^12.7.0",
@@ -24989,7 +24933,6 @@
         "zod": "^3.22.4"
       },
       "devDependencies": {
-        "@playwright/browser-chromium": "^1.43.0",
         "@types/luxon": "^3.3.1"
       }
     },

package.json

@@ -38,7 +38,6 @@
     "eslint-config-custom": "*",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "playwright": "^1.43.0",
     "prettier": "^2.5.1",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3"
@@ -60,4 +59,4 @@
       "next": "14.0.3"
     }
   }
-}
+}

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

@@ -254,7 +254,7 @@ test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', asyn
   await page.getByRole('button', { name: 'Sign' }).click();
 
   await page.waitForURL(`/sign/${token}/complete`);
-  await expect(page.getByText('Document Signed')).toBeVisible();
+  await expect(page.getByText('You have signed')).toBeVisible();
 
   // Check if document has been signed
   const { status: completedStatus } = await getDocumentByToken(token);

packages/lib/constants/recipient-roles.ts

@@ -32,10 +32,3 @@ export const RECIPIENT_ROLE_TO_EMAIL_TYPE = {
   [RecipientRole.VIEWER]: 'VIEW_REQUEST',
   [RecipientRole.APPROVER]: 'APPROVE_REQUEST',
 } as const;
-
-export const RECIPIENT_ROLE_SIGNING_REASONS = {
-  [RecipientRole.SIGNER]: 'I am a signer of this document',
-  [RecipientRole.APPROVER]: 'I am an approver of this document',
-  [RecipientRole.CC]: 'I am required to recieve a copy of this document',
-  [RecipientRole.VIEWER]: 'I am a viewer of this document',
-} satisfies Record<keyof typeof RecipientRole, string>;

packages/lib/package.json

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

packages/lib/server-only/admin/get-entire-document.ts

@@ -10,14 +10,6 @@ export const getEntireDocument = async ({ id }: GetEntireDocumentOptions) => {
       id,
     },
     include: {
-      documentMeta: true,
-      User: {
-        select: {
-          id: true,
-          name: true,
-          email: true,
-        },
-      },
       Recipient: {
         include: {
           Field: {

packages/lib/server-only/document/get-document-certificate-audit-logs.ts

@@ -1,43 +0,0 @@
-import { prisma } from '@documenso/prisma';
-
-import { DOCUMENT_AUDIT_LOG_TYPE, DOCUMENT_EMAIL_TYPE } from '../../types/document-audit-logs';
-import { parseDocumentAuditLogData } from '../../utils/document-audit-logs';
-
-export type GetDocumentCertificateAuditLogsOptions = {
-  id: number;
-};
-
-export const getDocumentCertificateAuditLogs = async ({
-  id,
-}: GetDocumentCertificateAuditLogsOptions) => {
-  const rawAuditLogs = await prisma.documentAuditLog.findMany({
-    where: {
-      documentId: id,
-      type: {
-        in: [
-          DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
-          DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
-          DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
-        ],
-      },
-    },
-  });
-
-  const auditLogs = rawAuditLogs.map((log) => parseDocumentAuditLogData(log));
-
-  const groupedAuditLogs = {
-    [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED]: auditLogs.filter(
-      (log) => log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
-    ),
-    [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED]: auditLogs.filter(
-      (log) => log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
-    ),
-    [DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT]: auditLogs.filter(
-      (log) =>
-        log.type === DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT &&
-        log.data.emailType !== DOCUMENT_EMAIL_TYPE.DOCUMENT_COMPLETED,
-    ),
-  } as const;
-
-  return groupedAuditLogs;
-};

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

@@ -15,7 +15,6 @@ import { signPdf } from '@documenso/signing';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
 import { putFile } from '../../universal/upload/put-file';
-import { getCertificatePdf } from '../htmltopdf/get-certificate-pdf';
 import { flattenAnnotations } from '../pdf/flatten-annotations';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
 import { normalizeSignatureAppearances } from '../pdf/normalize-signature-appearances';
@@ -92,10 +91,6 @@ export const sealDocument = async ({
   // !: Need to write the fields onto the document as a hard copy
   const pdfData = await getFile(documentData);
 
-  const certificate = await getCertificatePdf({ documentId }).then(async (doc) =>
-    PDFDocument.load(doc),
-  );
-
   const doc = await PDFDocument.load(pdfData);
 
   // Normalize and flatten layers that could cause issues with the signature
@@ -103,12 +98,6 @@ export const sealDocument = async ({
   doc.getForm().flatten();
   flattenAnnotations(doc);
 
-  const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());
-
-  certificatePages.forEach((page) => {
-    doc.addPage(page);
-  });
-
   for (const field of fields) {
     await insertFieldInPDF(doc, field);
   }

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

@@ -188,10 +188,17 @@ export const signFieldWithToken = async ({
               type,
               data: signatureImageAsBase64 || typedSignature || '',
             }))
-            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, FieldType.TEXT, (type) => ({
-              type,
-              data: updatedField.customText,
-            }))
+            .with(
+              FieldType.DATE,
+              FieldType.EMAIL,
+              FieldType.NAME,
+              FieldType.TEXT,
+              FieldType.CHECKBOX,
+              (type) => ({
+                type,
+                data: updatedField.customText,
+              }),
+            )
             .exhaustive(),
           fieldSecurity: derivedRecipientActionAuth
             ? {

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

@@ -1,45 +0,0 @@
-import { DateTime } from 'luxon';
-import type { Browser } from 'playwright';
-import { chromium } from 'playwright';
-
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
-import { encryptSecondaryData } from '../crypto/encrypt';
-
-export type GetCertificatePdfOptions = {
-  documentId: number;
-};
-
-export const getCertificatePdf = async ({ documentId }: GetCertificatePdfOptions) => {
-  const encryptedId = encryptSecondaryData({
-    data: documentId.toString(),
-    expiresAt: DateTime.now().plus({ minutes: 5 }).toJSDate().valueOf(),
-  });
-
-  let browser: Browser;
-
-  if (process.env.NEXT_PRIVATE_BROWSERLESS_URL) {
-    browser = await chromium.connect(process.env.NEXT_PRIVATE_BROWSERLESS_URL);
-  } else {
-    browser = await chromium.launch();
-  }
-
-  if (!browser) {
-    throw new Error(
-      'Failed to establish a browser, please ensure you have either a Browserless.io url or chromium browser installed',
-    );
-  }
-
-  const page = await browser.newPage();
-
-  await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encryptedId}`, {
-    waitUntil: 'networkidle',
-  });
-
-  const result = await page.pdf({
-    format: 'A4',
-  });
-
-  void browser.close();
-
-  return result;
-};

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -1,6 +1,7 @@
 // https://github.com/Hopding/pdf-lib/issues/20#issuecomment-412852821
 import fontkit from '@pdf-lib/fontkit';
-import { PDFDocument, StandardFonts } from 'pdf-lib';
+import type { PDFDocument } from 'pdf-lib';
+import { StandardFonts } from 'pdf-lib';
 
 import {
   DEFAULT_HANDWRITING_FONT_SIZE,
@@ -18,6 +19,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
   );
 
   const isSignatureField = isSignatureFieldType(field.type);
+  const isCheckboxField = field.type === FieldType.CHECKBOX;
 
   pdf.registerFontkit(fontkit);
 
@@ -73,6 +75,28 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
       width: imageWidth,
       height: imageHeight,
     });
+  } else if (isCheckboxField) {
+    const form = pdf.getForm();
+    const checkBox = form.createCheckBox(`checkBox.field.${field.id}`);
+
+    const textX = fieldX + fieldWidth / 2;
+    let textY = fieldY + fieldHeight / 2;
+
+    textY = pageHeight - textY;
+
+    checkBox.addToPage(page, {
+      x: textX,
+      y: textY,
+      width: 16,
+      height: 16,
+      borderWidth: 1,
+    });
+
+    if (field.customText === '✓') {
+      checkBox.check();
+    }
+
+    form.getField(`checkBox.field.${field.id}`).enableReadOnly();
   } else {
     const longestLineInTextForWidth = field.customText
       .split('\n')
@@ -102,14 +126,3 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
 
   return pdf;
 };
-
-export const insertFieldInPDFBytes = async (
-  pdf: ArrayBuffer | Uint8Array | string,
-  field: FieldWithSignature,
-) => {
-  const pdfDoc = await PDFDocument.load(pdf);
-
-  await insertFieldInPDF(pdfDoc, field);
-
-  return await pdfDoc.save();
-};

packages/lib/types/document-audit-logs.ts

@@ -231,6 +231,10 @@ export const ZDocumentAuditLogEventDocumentFieldInsertedSchema = z.object({
         type: z.literal(FieldType.TEXT),
         data: z.string(),
       }),
+      z.object({
+        type: z.literal(FieldType.CHECKBOX),
+        data: z.string(),
+      }),
       z.object({
         type: z.union([z.literal(FieldType.SIGNATURE), z.literal(FieldType.FREE_SIGNATURE)]),
         data: z.string(),

packages/prisma/migrations/20240409193420_checkbox_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FieldType" ADD VALUE 'CHECKBOX';

packages/prisma/schema.prisma

@@ -379,6 +379,7 @@ enum FieldType {
   EMAIL
   DATE
   TEXT
+  CHECKBOX
 }
 
 model Field {

packages/tailwind-config/index.cjs

@@ -7,9 +7,6 @@ module.exports = {
   content: ['src/**/*.{ts,tsx}'],
   theme: {
     extend: {
-      screens: {
-        print: { raw: 'print' },
-      },
       fontFamily: {
         sans: ['var(--font-sans)', ...fontFamily.sans],
         signature: ['var(--font-signature)'],

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

@@ -56,7 +56,7 @@ export const authRouter = router({
 
       return user;
     } catch (err) {
-      console.error(err);
+      console.log(err);
 
       const error = AppError.parseError(err);
 

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

@@ -23,7 +23,7 @@ export const ZSignUpMutationSchema = z.object({
   name: z.string().min(1),
   email: z.string().email(),
   password: ZPasswordSchema,
-  signature: z.string().nullish(),
+  signature: z.string().min(1, { message: 'A signature is required.' }),
   url: z
     .string()
     .trim()

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

@@ -1,10 +1,7 @@
 import { TRPCError } from '@trpc/server';
-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 { 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';
 import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
@@ -25,7 +22,6 @@ import { authenticatedProcedure, procedure, router } from '../trpc';
 import {
   ZCreateDocumentMutationSchema,
   ZDeleteDraftDocumentMutationSchema as ZDeleteDocumentMutationSchema,
-  ZDownloadAuditLogsMutationSchema,
   ZFindDocumentAuditLogsQuerySchema,
   ZGetDocumentByIdQuerySchema,
   ZGetDocumentByTokenQuerySchema,
@@ -368,66 +364,4 @@ export const documentRouter = router({
         });
       }
     }),
-
-  downloadAuditLogs: authenticatedProcedure
-    .input(ZDownloadAuditLogsMutationSchema)
-    .mutation(async ({ input, ctx }) => {
-      try {
-        const { documentId, teamId } = input;
-
-        const document = await getDocumentById({
-          id: documentId,
-          userId: ctx.user.id,
-          teamId,
-        });
-
-        const encrypted = encryptSecondaryData({
-          data: document.id.toString(),
-          expiresAt: DateTime.now().plus({ minutes: 5 }).toJSDate().valueOf(),
-        });
-
-        return {
-          url: `${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/audit-log?d=${encrypted}`,
-        };
-      } catch (err) {
-        console.error(err);
-
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message:
-            'We were unable to download the audit logs for this document. Please try again later.',
-        });
-      }
-    }),
-
-  downloadCertificate: authenticatedProcedure
-    .input(ZDownloadAuditLogsMutationSchema)
-    .mutation(async ({ input, ctx }) => {
-      try {
-        const { documentId, teamId } = input;
-
-        const document = await getDocumentById({
-          id: documentId,
-          userId: ctx.user.id,
-          teamId,
-        });
-
-        const encrypted = encryptSecondaryData({
-          data: document.id.toString(),
-          expiresAt: DateTime.now().plus({ minutes: 5 }).toJSDate().valueOf(),
-        });
-
-        return {
-          url: `${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encrypted}`,
-        };
-      } catch (err) {
-        console.error(err);
-
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message:
-            'We were unable to download the audit logs for this document. Please try again later.',
-        });
-      }
-    }),
 });

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

@@ -163,8 +163,3 @@ export type TDeleteDraftDocumentMutationSchema = z.infer<typeof ZDeleteDraftDocu
 export const ZSearchDocumentsMutationSchema = z.object({
   query: z.string(),
 });
-
-export const ZDownloadAuditLogsMutationSchema = z.object({
-  documentId: z.number(),
-  teamId: z.number().optional(),
-});

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

@@ -23,6 +23,7 @@ export const mapField = (
     .with(FieldType.EMAIL, () => signer.email)
     .with(FieldType.NAME, () => signer.name)
     .with(FieldType.TEXT, () => signer.customText)
+    .with(FieldType.CHECKBOX, () => signer.customText)
     .otherwise(() => '');
 
   return {

packages/tsconfig/process-env.d.ts

@@ -61,9 +61,6 @@ declare namespace NodeJS {
 
     NEXT_PUBLIC_DISABLE_SIGNUP?: string;
 
-    //
-    NEXT_PRIVATE_BROWSERLESS_URL?: string;
-
     /**
      * Vercel environment variables
      */

packages/ui/components/field/field.tsx

@@ -18,6 +18,7 @@ export type FieldRootContainerProps = {
 export type FieldContainerPortalProps = {
   field: Field;
   className?: string;
+  raw?: boolean;
   children: React.ReactNode;
 };
 
@@ -44,7 +45,7 @@ export function FieldContainerPortal({
   );
 }
 
-export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children, raw = false }: FieldContainerPortalProps) {
   const [isValidating, setIsValidating] = useState(false);
 
   const ref = React.useRef<HTMLDivElement>(null);
@@ -71,21 +72,36 @@ export function FieldRootContainer({ field, children }: FieldContainerPortalProp
 
   return (
     <FieldContainerPortal field={field}>
-      <Card
-        id={`field-${field.id}`}
-        className={cn(
-          'field-card-container bg-background relative z-20 h-full w-full transition-all',
-          {
+      {!raw && (
+        <Card
+          id={`field-${field.id}`}
+          className={cn(
+            'field-card-container bg-background relative z-20 h-full w-full transition-all',
+            {
+              'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
+            },
+          )}
+          ref={ref}
+          data-inserted={field.inserted ? 'true' : 'false'}
+        >
+          <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
+            {children}
+          </CardContent>
+        </Card>
+      )}
+
+      {raw && (
+        <div
+          id={`field-${field.id}`}
+          className={cn('field-card-container bg-background relative z-20 transition-all', {
             'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
-          },
-        )}
-        ref={ref}
-        data-inserted={field.inserted ? 'true' : 'false'}
-      >
-        <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
+          })}
+          ref={ref}
+          data-inserted={field.inserted ? 'true' : 'false'}
+        >
           {children}
-        </CardContent>
-      </Card>
+        </div>
+      )}
     </FieldContainerPortal>
   );
 }

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

@@ -19,6 +19,7 @@ import { FieldType, SendStatus } from '@documenso/prisma/client';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useStep } from '../stepper';
@@ -135,11 +136,17 @@ export const AddFieldsFormPartial = ({
       );
 
       setCoords({
-        x: event.clientX - fieldBounds.current.width / 2,
-        y: event.clientY - fieldBounds.current.height / 2,
+        x:
+          selectedField === FieldType.CHECKBOX
+            ? event.clientX - 16
+            : event.clientX - fieldBounds.current.width / 2,
+        y:
+          selectedField === FieldType.CHECKBOX
+            ? event.clientY - 16
+            : event.clientY - fieldBounds.current.height / 2,
       });
     },
-    [isWithinPageBounds],
+    [isWithinPageBounds, selectedField],
   );
 
   const onMouseClick = useCallback(
@@ -149,6 +156,7 @@ export const AddFieldsFormPartial = ({
       }
 
       const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+      const isCheckboxField = selectedField === FieldType.CHECKBOX;
 
       if (
         !$page ||
@@ -172,8 +180,8 @@ export const AddFieldsFormPartial = ({
       let pageY = ((event.pageY - top) / height) * 100;
 
       // Get the bounds as a percentage of the page width and height
-      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
-      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
+      const fieldPageWidth = ((isCheckboxField ? 32 : fieldBounds.current.width) / width) * 100;
+      const fieldPageHeight = ((isCheckboxField ? 32 : fieldBounds.current.height) / height) * 100;
 
       // And center it based on the bounds
       pageX -= fieldPageWidth / 2;
@@ -322,7 +330,8 @@ export const AddFieldsFormPartial = ({
 
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {selectedField && (
+          {/* When it is not a checkbox field */}
+          {selectedField && selectedField !== FieldType.CHECKBOX && (
             <Card
               className={cn(
                 'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
@@ -344,6 +353,27 @@ export const AddFieldsFormPartial = ({
             </Card>
           )}
 
+          {/* Checkbox Field */}
+          {selectedField && selectedField === FieldType.CHECKBOX && (
+            <div
+              className="pointer-events-none fixed z-50"
+              style={{
+                top: coords.y,
+                left: coords.x,
+                height: 6 * 4,
+                width: 6 * 4,
+              }}
+            >
+              <Checkbox
+                className={cn(
+                  'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
+                  'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
+                  'border-field-card-border',
+                )}
+              />
+            </div>
+          )}
+
           {isDocumentPdfLoaded &&
             localFields.map((field, index) => (
               <FieldItem
@@ -577,6 +607,28 @@ export const AddFieldsFormPartial = ({
                   </CardContent>
                 </Card>
               </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                onClick={() => setSelectedField(FieldType.CHECKBOX)}
+                onMouseDown={() => setSelectedField(FieldType.CHECKBOX)}
+                data-selected={selectedField === FieldType.CHECKBOX ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Checkbox'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Checkbox</p>
+                  </CardContent>
+                </Card>
+              </button>
             </fieldset>
           </div>
         </div>

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

@@ -147,6 +147,11 @@ export const AddSignatureFormPartial = ({
       return !form.formState.errors.customText;
     }
 
+    if (fieldType === FieldType.CHECKBOX) {
+      await form.trigger('customText');
+      return !form.formState.errors.customText;
+    }
+
     return true;
   };
 

packages/ui/primitives/document-flow/field-item.tsx

@@ -10,8 +10,10 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 
 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import type { TDocumentFlowFormSchema } from './types';
 import { FRIENDLY_FIELD_TYPE } from './types';
+import { FieldType } from '.prisma/client';
 
 type Field = TDocumentFlowFormSchema['fields'][0];
 
@@ -44,6 +46,8 @@ export const FieldItem = ({
     pageWidth: 0,
   });
 
+  const isCheckboxField = field.type === FieldType.CHECKBOX;
+
   const calculateCoords = useCallback(() => {
     const $page = document.querySelector<HTMLElement>(
       `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
@@ -102,8 +106,8 @@ export const FieldItem = ({
       default={{
         x: coords.pageX,
         y: coords.pageY,
-        height: coords.pageHeight,
-        width: coords.pageWidth,
+        height: isCheckboxField ? 32 : coords.pageHeight,
+        width: isCheckboxField ? 32 : coords.pageWidth,
       }}
       bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
       onDragStart={() => setActive(true)}
@@ -119,7 +123,13 @@ export const FieldItem = ({
     >
       {!disabled && (
         <button
-          className="text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border"
+          className={cn(
+            'text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex  items-center justify-center rounded-full border',
+            {
+              'h-8 w-8': !isCheckboxField,
+              'h-6 w-6': isCheckboxField,
+            },
+          )}
           onClick={() => onRemove?.()}
           onTouchEnd={() => onRemove?.()}
         >
@@ -127,25 +137,40 @@ export const FieldItem = ({
         </button>
       )}
 
-      <Card
-        className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
-          'border-field-card-border': !disabled,
-          'border-field-card-border/80': active,
-        })}
-      >
-        <CardContent
+      {!isCheckboxField && (
+        <Card
+          className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
+            'border-field-card-border': !disabled,
+            'border-field-card-border/80': active,
+          })}
+        >
+          <CardContent
+            className={cn(
+              'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
+              {
+                'text-field-card-foreground/50': disabled,
+              },
+            )}
+          >
+            {FRIENDLY_FIELD_TYPE[field.type]}
+
+            <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {isCheckboxField && (
+        <Checkbox
           className={cn(
-            'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
             {
-              'text-field-card-foreground/50': disabled,
+              'border-field-card-border': !disabled,
+              'border-field-card-border/80': active,
             },
           )}
-        >
-          {FRIENDLY_FIELD_TYPE[field.type]}
-
-          <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
-        </CardContent>
-      </Card>
+        />
+      )}
     </Rnd>,
     document.body,
   );

packages/ui/primitives/document-flow/show-field-item.tsx

@@ -4,9 +4,11 @@ import type { Prisma } from '@prisma/client';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { FieldType } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import { FRIENDLY_FIELD_TYPE } from './types';
 
 export type ShowFieldItemProps = {
@@ -19,6 +21,7 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
 
   const signerEmail =
     recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '';
+  const isCheckboxField = field.type === FieldType.CHECKBOX;
 
   return createPortal(
     <div
@@ -30,19 +33,30 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
         width: `${coords.width}px`,
       }}
     >
-      <Card className={cn('bg-background h-full w-full')}>
-        <CardContent
-          className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
-          )}
-        >
-          {FRIENDLY_FIELD_TYPE[field.type]}
+      {!isCheckboxField && (
+        <Card className={cn('bg-background h-full w-full')}>
+          <CardContent
+            className={cn(
+              'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
+            )}
+          >
+            {FRIENDLY_FIELD_TYPE[field.type]}
 
-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
-            {signerEmail}
-          </p>
-        </CardContent>
-      </Card>
+            <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+              {signerEmail}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {isCheckboxField && (
+        <Checkbox
+          className={cn(
+            'h-8 w-8',
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
+          )}
+        />
+      )}
     </div>,
     document.body,
   );

packages/ui/primitives/document-flow/types.ts

@@ -48,6 +48,7 @@ export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
   [FieldType.DATE]: 'Date',
   [FieldType.EMAIL]: 'Email',
   [FieldType.NAME]: 'Name',
+  [FieldType.CHECKBOX]: 'Checkbox',
 };
 
 export interface DocumentFlowStep {

packages/ui/primitives/table.tsx

@@ -2,16 +2,13 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement> & {
-    overflowHidden?: boolean;
-  }
->(({ className, overflowHidden, ...props }, ref) => (
-  <div className={cn('w-full', overflowHidden ? 'overflow-hidden' : 'overflow-auto')}>
-    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-  </div>
-));
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+);
 
 Table.displayName = 'Table';
 
@@ -79,17 +76,11 @@ TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement> & {
-    truncate?: boolean;
-  }
->(({ className, truncate = true, ...props }, ref) => (
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
-      'p-4 align-middle [&:has([role=checkbox])]:pr-0',
-      truncate && 'truncate',
-      className,
-    )}
+    className={cn('truncate p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
     {...props}
   />
 ));

packages/ui/styles/theme.css

@@ -97,21 +97,6 @@
   }
 }
 
-/*
- * Custom CSS for printing reports
- * - Sets page margins to 0.5 inches
- * - Hides the header and footer
- * - Hides the print button
- * - Sets page size to A4
- * - Sets the font size to 12pt
- */
-.print-provider {
-  @page {
-    margin: 1in;
-    size: A4;
-  }
-}
-
 .gradient-border-mask::before {
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

turbo.json

@@ -2,13 +2,8 @@
   "$schema": "https://turbo.build/schema.json",
   "pipeline": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "outputs": [
-        ".next/**",
-        "!.next/cache/**"
-      ]
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "!.next/cache/**"]
     },
     "lint": {
       "cache": false
@@ -24,9 +19,7 @@
       "persistent": true
     },
     "start": {
-      "dependsOn": [
-        "^build"
-      ],
+      "dependsOn": ["^build"],
       "cache": false,
       "persistent": true
     },
@@ -34,15 +27,11 @@
       "cache": false
     },
     "test:e2e": {
-      "dependsOn": [
-        "^build"
-      ],
+      "dependsOn": ["^build"],
       "cache": false
     }
   },
-  "globalDependencies": [
-    "**/.env.*local"
-  ],
+  "globalDependencies": ["**/.env.*local"],
   "globalEnv": [
     "APP_VERSION",
     "NEXT_PRIVATE_ENCRYPTION_KEY",
@@ -104,7 +93,6 @@
     "NEXT_PRIVATE_STRIPE_API_KEY",
     "NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET",
     "NEXT_PRIVATE_GITHUB_TOKEN",
-    "NEXT_PRIVATE_BROWSERLESS_URL",
     "CI",
     "VERCEL",
     "VERCEL_ENV",
@@ -122,4 +110,4 @@
     "E2E_TEST_AUTHENTICATE_USER_EMAIL",
     "E2E_TEST_AUTHENTICATE_USER_PASSWORD"
   ]
-}
+}