Merge branch 'main' into refactor-forms

2025-11-14 08:42:12 +10:00 · 2023-12-08 16:31:13 +11:00
parent 369d08ae6e 5e9bc56329
commit bc38009392
91 changed files with 2332 additions and 558 deletions
--- a/apps/marketing/content/careers.mdx
+++ b/apps/marketing/content/careers.mdx
@ -0,0 +1,13 @@
+---
+title: Careers at Documenso
+---
+
+# Careers at Documenso
+
+So you love Documenso and all the things that we do and now you want to work with us to unlock the future of open signing?
+
+---
+
+## Open Positions
+
+Unfortunately we have no open positions available at the moment. Our team has grown and so we must grow with it, please check back from time to time as now is not forever and we may be hiring again in the future.
--- a/apps/marketing/src/app/(marketing)/layout.tsx
+++ b/apps/marketing/src/app/(marketing)/layout.tsx
@ -29,7 +29,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {

  return (
    <div
-      className={cn('relative max-w-[100vw] pt-20 md:pt-28', {
+      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
      })}
    >
@ -41,7 +41,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
        <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
      </div>

-      <div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
+      <div className="relative mx-auto max-w-screen-xl flex-1 px-4 lg:px-8">{children}</div>

      <Footer className="bg-background border-muted mt-24 border-t" />
    </div>
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
@ -17,15 +17,14 @@ import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add
 import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
 import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
 import type { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';

-type SinglePlayerModeStep = 'fields' | 'sign';
+const SinglePlayerModeSteps = ['fields', 'sign'] as const;
+type SinglePlayerModeStep = (typeof SinglePlayerModeSteps)[number];

 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during
@ -226,37 +225,35 @@ export const SinglePlayerClient = () => {
        </div>

        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
-            <DocumentFlowFormContainerHeader
-              title={currentDocumentFlow.title}
-              description={currentDocumentFlow.description}
-            />
-
-            {/* Add fields to PDF page. */}
-            {step === 'fields' && (
+          <DocumentFlowFormContainer
+            className="top-24 lg:h-[calc(100vh-7rem)]"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Stepper
+              currentStep={currentDocumentFlow.stepIndex}
+              setCurrentStep={(step) => setStep(SinglePlayerModeSteps[step - 1])}
+            >
+              {/* Add fields to PDF page. */}
              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
                <AddFieldsFormPartial
                  documentFlow={documentFlow.fields}
                  hideRecipients={true}
                  recipients={uploadedFile ? [placeholderRecipient] : []}
-                  numberOfSteps={Object.keys(documentFlow).length}
                  fields={fields}
                  onSubmit={onFieldsSubmit}
                />
              </fieldset>
-            )}

-            {/* Enter user details and signature. */}
-            {step === 'sign' && (
+              {/* Enter user details and signature. */}
+
              <AddSignatureFormPartial
                documentFlow={documentFlow.sign}
-                numberOfSteps={Object.keys(documentFlow).length}
                fields={fields}
                onSubmit={onSignSubmit}
                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
              />
-            )}
+            </Stepper>
          </DocumentFlowFormContainer>
        </div>
      </div>
--- a/apps/marketing/src/components/(marketing)/footer.tsx
+++ b/apps/marketing/src/components/(marketing)/footer.tsx
@ -31,6 +31,7 @@ const FOOTER_LINKS = [
  { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
  { href: 'mailto:support@documenso.com', text: 'Support', target: '_blank' },
  { href: '/oss-friends', text: 'OSS Friends' },
+  { href: '/careers', text: 'Careers' },
  { href: '/privacy', text: 'Privacy' },
 ];

--- a/apps/marketing/src/pages/api/trpc/[trpc].ts
+++ b/apps/marketing/src/pages/api/trpc/[trpc].ts
@ -4,6 +4,11 @@ import { appRouter } from '@documenso/trpc/server/router';

 export const config = {
  maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
 };

 export default trpcNext.createNextApiHandler({
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -8,6 +8,7 @@
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+    "e2e:prepare": "next build && next start",
    "lint:fix": "next lint --fix",
    "clean": "rimraf .next && rimraf node_modules",
    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@ -4,8 +4,8 @@ import { useState } from 'react';

 import { useRouter } from 'next/navigation';

-import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@ -18,12 +18,10 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { AddTitleFormPartial } from '@documenso/ui/primitives/document-flow/add-title';
 import type { TAddTitleFormSchema } from '@documenso/ui/primitives/document-flow/add-title.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 export type EditDocumentFormProps = {
@ -36,6 +34,7 @@ export type EditDocumentFormProps = {
 };

 type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
+const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'subject'];

 export const EditDocumentForm = ({
  className,
@ -48,6 +47,7 @@ export const EditDocumentForm = ({
  const { toast } = useToast();
  const router = useRouter();

+  // controlled stepper state
  const [step, setStep] = useState<EditDocumentStep>(
    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
  );
@ -67,24 +67,19 @@ export const EditDocumentForm = ({
      title: 'Add Signers',
      description: 'Add the people who will sign the document.',
      stepIndex: 2,
-      onBackStep: () => document.status === DocumentStatus.DRAFT && setStep('title'),
    },
    fields: {
      title: 'Add Fields',
      description: 'Add all relevant fields for each recipient.',
      stepIndex: 3,
-      onBackStep: () => setStep('signers'),
    },
    subject: {
      title: 'Add Subject',
      description: 'Add the subject and message you wish to send to signers.',
      stepIndex: 4,
-      onBackStep: () => setStep('fields'),
    },
  };

-  const currentDocumentFlow = documentFlow[step];
-
  const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
    try {
      // Custom invocation server action
@ -116,7 +111,6 @@ export const EditDocumentForm = ({
      });

      router.refresh();
-
      setStep('fields');
    } catch (err) {
      console.error(err);
@ -138,7 +132,6 @@ export const EditDocumentForm = ({
      });

      router.refresh();
-
      setStep('subject');
    } catch (err) {
      console.error(err);
@ -181,6 +174,8 @@ export const EditDocumentForm = ({
    }
  };

+  const currentDocumentFlow = documentFlow[step];
+
  return (
    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
      <Card
@ -197,56 +192,43 @@ export const EditDocumentForm = ({
          className="lg:h-[calc(100vh-6rem)]"
          onSubmit={(e) => e.preventDefault()}
        >
-          <DocumentFlowFormContainerHeader
-            title={currentDocumentFlow.title}
-            description={currentDocumentFlow.description}
-          />
-
-          {step === 'title' && (
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
+          >
            <AddTitleFormPartial
              key={recipients.length}
              documentFlow={documentFlow.title}
              recipients={recipients}
              fields={fields}
              document={document}
-              numberOfSteps={Object.keys(documentFlow).length}
              onSubmit={onAddTitleFormSubmit}
            />
-          )}

-          {step === 'signers' && (
            <AddSignersFormPartial
              key={recipients.length}
              documentFlow={documentFlow.signers}
              document={document}
              recipients={recipients}
              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
              onSubmit={onAddSignersFormSubmit}
            />
-          )}
-
-          {step === 'fields' && (
            <AddFieldsFormPartial
              key={fields.length}
              documentFlow={documentFlow.fields}
              recipients={recipients}
              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
              onSubmit={onAddFieldsFormSubmit}
            />
-          )}
-
-          {step === 'subject' && (
            <AddSubjectFormPartial
+              key={recipients.length}
              documentFlow={documentFlow.subject}
              document={document}
              recipients={recipients}
              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
              onSubmit={onAddSubjectFormSubmit}
            />
-          )}
+          </Stepper>
        </DocumentFlowFormContainer>
      </div>
    </div>
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
@ -12,6 +12,7 @@ import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';

 export type DataTableActionButtonProps = {
  row: Document & {
@ -22,6 +23,7 @@ export type DataTableActionButtonProps = {

 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
  const { data: session } = useSession();
+  const { toast } = useToast();

  if (!session) {
    return null;
@ -37,39 +39,47 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;

  const onDownloadClick = async () => {
-    let document: DocumentWithData | null = null;
+    try {
+      let document: DocumentWithData | null = null;

-    if (!recipient) {
-      document = await trpcClient.document.getDocumentById.query({
-        id: row.id,
+      if (!recipient) {
+        document = await trpcClient.document.getDocumentById.query({
+          id: row.id,
+        });
+      } else {
+        document = await trpcClient.document.getDocumentByToken.query({
+          token: recipient.token,
+        });
+      }
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      const documentBytes = await getFile(documentData);
+
+      const blob = new Blob([documentBytes], {
+        type: 'application/pdf',
      });
-    } else {
-      document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
+
+      const link = window.document.createElement('a');
+      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
+
+      link.href = window.URL.createObjectURL(blob);
+      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
+    } catch (error) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while trying to download file.',
+        variant: 'destructive',
      });
    }
-
-    const documentData = document?.documentData;
-
-    if (!documentData) {
-      return;
-    }
-
-    const documentBytes = await getFile(documentData);
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
  };

  return match({
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@ -32,7 +32,7 @@ import {
 } from '@documenso/ui/primitives/dropdown-menu';

 import { ResendDocumentActionItem } from './_action-items/resend-document';
-import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';
+import { DeleteDocumentDialog } from './delete-document-dialog';
 import { DuplicateDocumentDialog } from './duplicate-document-dialog';

 export type DataTableActionDropdownProps = {
@ -60,7 +60,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
  // const isPending = row.status === DocumentStatus.PENDING;
  const isComplete = row.status === DocumentStatus.COMPLETED;
  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner && row.status === DocumentStatus.DRAFT;
+  const isDocumentDeletable = isOwner;

  const onDownloadClick = async () => {
    let document: DocumentWithData | null = null;
@ -161,8 +161,9 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
      </DropdownMenuContent>

      {isDocumentDeletable && (
-        <DeleteDraftDocumentDialog
+        <DeleteDocumentDialog
          id={row.id}
+          status={row.status}
          open={isDeleteDialogOpen}
          onOpenChange={setDeleteDialogOpen}
        />
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -8,6 +8,7 @@ import { useSession } from 'next-auth/react';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { FindResultSet } from '@documenso/lib/types/find-result-set';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';

@ -74,12 +75,14 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
          },
          {
            header: 'Actions',
-            cell: ({ row }) => (
-              <div className="flex items-center gap-x-4">
-                <DataTableActionButton row={row.original} />
-                <DataTableActionDropdown row={row.original} />
-              </div>
-            ),
+            cell: ({ row }) =>
+              (!row.original.deletedAt ||
+                row.original.status === ExtendedDocumentStatus.COMPLETED) && (
+                <div className="flex items-center gap-x-4">
+                  <DataTableActionButton row={row.original} />
+                  <DataTableActionDropdown row={row.original} />
+                </div>
+              ),
          },
        ]}
        data={results.data}
--- a/apps/web/src/app/(dashboard)/documents/delete-draft-document-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/documents/delete-draft-document-dialog.tsx
@ -1,5 +1,8 @@
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';

+import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -10,41 +13,46 @@ import {
  DialogHeader,
  DialogTitle,
 } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 type DeleteDraftDocumentDialogProps = {
  id: number;
  open: boolean;
  onOpenChange: (_open: boolean) => void;
+  status: DocumentStatus;
 };

-export const DeleteDraftDocumentDialog = ({
+export const DeleteDocumentDialog = ({
  id,
  open,
  onOpenChange,
+  status,
 }: DeleteDraftDocumentDialogProps) => {
  const router = useRouter();

  const { toast } = useToast();

-  const { mutateAsync: deleteDocument, isLoading } =
-    trpcReact.document.deleteDraftDocument.useMutation({
-      onSuccess: () => {
-        router.refresh();
+  const [inputValue, setInputValue] = useState('');
+  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);

-        toast({
-          title: 'Document deleted',
-          description: 'Your document has been successfully deleted.',
-          duration: 5000,
-        });
+  const { mutateAsync: deleteDocument, isLoading } = trpcReact.document.deleteDocument.useMutation({
+    onSuccess: () => {
+      router.refresh();

-        onOpenChange(false);
-      },
-    });
+      toast({
+        title: 'Document deleted',
+        description: 'Your document has been successfully deleted.',
+        duration: 5000,
+      });

-  const onDraftDelete = async () => {
+      onOpenChange(false);
+    },
+  });
+
+  const onDelete = async () => {
    try {
-      await deleteDocument({ id });
+      await deleteDocument({ id, status });
    } catch {
      toast({
        title: 'Something went wrong',
@ -55,6 +63,11 @@ export const DeleteDraftDocumentDialog = ({
    }
  };

+  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    setIsDeleteEnabled(event.target.value === 'delete');
+  };
+
  return (
    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
      <DialogContent>
@ -67,6 +80,17 @@ export const DeleteDraftDocumentDialog = ({
          </DialogDescription>
        </DialogHeader>

+        {status !== DocumentStatus.DRAFT && (
+          <div className="mt-8">
+            <Input
+              type="text"
+              value={inputValue}
+              onChange={onInputChange}
+              placeholder="Type 'delete' to confirm"
+            />
+          </div>
+        )}
+
        <DialogFooter>
          <div className="flex w-full flex-1 flex-nowrap gap-4">
            <Button
@ -78,7 +102,14 @@ export const DeleteDraftDocumentDialog = ({
              Cancel
            </Button>

-            <Button type="button" loading={isLoading} onClick={onDraftDelete} className="flex-1">
+            <Button
+              type="button"
+              loading={isLoading}
+              onClick={onDelete}
+              disabled={!isDeleteEnabled}
+              variant="destructive"
+              className="flex-1"
+            >
              Delete
            </Button>
          </div>
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@ -9,6 +9,7 @@ import { Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';

 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { TRPCClientError } from '@documenso/trpc/client';
@ -23,6 +24,7 @@ export type UploadDocumentProps = {

 export const UploadDocument = ({ className }: UploadDocumentProps) => {
  const router = useRouter();
+  const analytics = useAnalytics();
  const { data: session } = useSession();

  const { toast } = useToast();
@ -55,6 +57,12 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
        duration: 5000,
      });

+      analytics.capture('App: Document Uploaded', {
+        userId: session?.user.id,
+        documentId: id,
+        timestamp: new Date().toISOString(),
+      });
+
      router.push(`/documents/${id}`);
    } catch (error) {
      console.error(error);
--- a/apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts
+++ b/apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts
@ -23,7 +23,7 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
  let stripeCustomer: Stripe.Customer | null = null;

  // Find the Stripe customer for the current user subscription.
-  if (existingSubscription) {
+  if (existingSubscription?.periodEnd && existingSubscription.periodEnd >= new Date()) {
    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);

    if (!stripeCustomer) {
--- a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
@ -67,18 +67,24 @@ export default async function CompletedSigningPage({
      />

      <div className="relative mt-6 flex w-full flex-col items-center">
-        {match(document.status)
-          .with(DocumentStatus.COMPLETED, () => (
+        {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>
          ))
-          .otherwise(() => (
+          .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">
@ -86,16 +92,22 @@ export default async function CompletedSigningPage({
          <span className="mt-1.5 block">"{document.title}"</span>
        </h2>

-        {match(document.status)
-          .with(DocumentStatus.COMPLETED, () => (
+        {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>
          ))
-          .otherwise(() => (
+          .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">
--- a/apps/web/src/app/(signing)/sign/[token]/form.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/form.tsx
@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';

+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { Document, Field, Recipient } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@ -29,6 +30,7 @@ export type SigningFormProps = {

 export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
  const router = useRouter();
+  const analytics = useAnalytics();
  const { data: session } = useSession();

  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
@ -60,6 +62,12 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
      documentId: document.id,
    });

+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
    router.push(`/sign/${recipient.token}/complete`);
  };

--- a/apps/web/src/app/(signing)/sign/[token]/no-longer-available.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/no-longer-available.tsx
@ -0,0 +1,66 @@
+import React from 'react';
+
+import Link from 'next/link';
+
+import { Clock8 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import type { Document, Signature } from '@documenso/prisma/client';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+
+type NoLongerAvailableProps = {
+  document: Document;
+  recipientName: string;
+  recipientSignature: Signature;
+};
+
+export const NoLongerAvailable = ({
+  document,
+  recipientName,
+  recipientSignature,
+}: NoLongerAvailableProps) => {
+  const { data: session } = useSession();
+
+  return (
+    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
+      <SigningCard3D
+        name={recipientName}
+        signature={recipientSignature}
+        signingCelebrationImage={signingCelebration}
+      />
+
+      <div className="relative mt-2 flex w-full flex-col items-center">
+        <div className="mt-8 flex items-center text-center text-red-600">
+          <Clock8 className="mr-2 h-5 w-5" />
+          <span className="text-sm">Document Cancelled</span>
+        </div>
+
+        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+          <span className="mt-1.5 block">"{document.title}"</span>
+          is no longer available to sign
+        </h2>
+
+        <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.
+        </p>
+
+        {session?.user ? (
+          <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>
+  );
+};
--- a/apps/web/src/app/(signing)/sign/[token]/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx
@ -8,6 +8,7 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 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';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@ -17,6 +18,7 @@ import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
 import { NameField } from './name-field';
+import { NoLongerAvailable } from './no-longer-available';
 import { SigningProvider } from './provider';
 import { SignatureField } from './signature-field';

@ -55,6 +57,18 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
    redirect(`/sign/${token}/complete`);
  }

+  const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
+
+  if (document.deletedAt) {
+    return (
+      <NoLongerAvailable
+        document={document}
+        recipientName={recipient.name}
+        recipientSignature={recipientSignature}
+      />
+    );
+  }
+
  return (
    <SigningProvider
      email={recipient.email}
--- a/apps/web/src/components/(dashboard)/common/command-menu.tsx
+++ b/apps/web/src/components/(dashboard)/common/command-menu.tsx
@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from 'react';

 import { useRouter } from 'next/navigation';

-import { Monitor, Moon, Sun } from 'lucide-react';
+import { Loader, Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';

@ -12,6 +12,7 @@ import {
  DOCUMENTS_PAGE_SHORTCUT,
  SETTINGS_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
  CommandDialog,
  CommandEmpty,
@ -29,13 +30,20 @@ const DOCUMENTS_PAGES = [
    shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
  },
  { label: 'Draft documents', path: '/documents?status=DRAFT' },
-  { label: 'Completed documents', path: '/documents?status=COMPLETED' },
+  {
+    label: 'Completed documents',
+    path: '/documents?status=COMPLETED',
+  },
  { label: 'Pending documents', path: '/documents?status=PENDING' },
  { label: 'Inbox documents', path: '/documents?status=INBOX' },
 ];

 const SETTINGS_PAGES = [
-  { label: 'Settings', path: '/settings', shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', '') },
+  {
+    label: 'Settings',
+    path: '/settings',
+    shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', ''),
+  },
  { label: 'Profile', path: '/settings/profile' },
  { label: 'Password', path: '/settings/password' },
 ];
@ -53,6 +61,29 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
  const [search, setSearch] = useState('');
  const [pages, setPages] = useState<string[]>([]);

+  const { data: searchDocumentsData, isLoading: isSearchingDocuments } =
+    trpcReact.document.searchDocuments.useQuery(
+      {
+        query: search,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const searchResults = useMemo(() => {
+    if (!searchDocumentsData) {
+      return [];
+    }
+
+    return searchDocumentsData.map((document) => ({
+      label: document.title,
+      path: `/documents/${document.id}`,
+      value:
+        document.title + ' ' + document.Recipient.map((recipient) => recipient.email).join(' '),
+    }));
+  }, [searchDocumentsData]);
+
  const currentPage = pages[pages.length - 1];

  const toggleOpen = () => {
@ -113,7 +144,13 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
  };

  return (
-    <CommandDialog commandProps={{ onKeyDown: handleKeyDown }} open={open} onOpenChange={setOpen}>
+    <CommandDialog
+      commandProps={{
+        onKeyDown: handleKeyDown,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
      <CommandInput
        value={search}
        onValueChange={setSearch}
@ -121,7 +158,17 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
      />

      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
+        {isSearchingDocuments ? (
+          <CommandEmpty>
+            <div className="flex items-center justify-center">
+              <span className="animate-spin">
+                <Loader />
+              </span>
+            </div>
+          </CommandEmpty>
+        ) : (
+          <CommandEmpty>No results found.</CommandEmpty>
+        )}
        {!currentPage && (
          <>
            <CommandGroup heading="Documents">
@ -133,6 +180,11 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
            <CommandGroup heading="Preferences">
              <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
            </CommandGroup>
+            {searchResults.length > 0 && (
+              <CommandGroup heading="Your documents">
+                <Commands push={push} pages={searchResults} />
+              </CommandGroup>
+            )}
          </>
        )}
        {currentPage === 'theme' && <ThemeCommands setTheme={setTheme} />}
@ -146,10 +198,14 @@ const Commands = ({
  pages,
 }: {
  push: (_path: string) => void;
-  pages: { label: string; path: string; shortcut?: string }[];
+  pages: { label: string; path: string; shortcut?: string; value?: string }[];
 }) => {
-  return pages.map((page) => (
-    <CommandItem key={page.path} onSelect={() => push(page.path)}>
+  return pages.map((page, idx) => (
+    <CommandItem
+      key={page.path + idx}
+      value={page.value ?? page.label}
+      onSelect={() => push(page.path)}
+    >
      {page.label}
      {page.shortcut && <CommandShortcut>{page.shortcut}</CommandShortcut>}
    </CommandItem>
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@ -20,7 +20,7 @@ import { LuGithub } from 'react-icons/lu';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -56,7 +56,11 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+        <Button
+          variant="ghost"
+          title="Profile Dropdown"
+          className="relative h-10 w-10 rounded-full"
+        >
          <Avatar className="h-10 w-10">
            <AvatarFallback>{avatarFallback}</AvatarFallback>
          </Avatar>
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@ -5,6 +5,7 @@ import { signIn } from 'next-auth/react';
 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 { cn } from '@documenso/ui/lib/utils';
@ -64,6 +65,11 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
        password,
        callbackUrl: '/',
      });
+
+      analytics.capture('App: User Sign Up', {
+        email,
+        timestamp: new Date().toISOString(),
+      });
    } catch (err) {
      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
        toast({
--- a/apps/web/src/pages/api/trpc/[trpc].ts
+++ b/apps/web/src/pages/api/trpc/[trpc].ts
@ -4,6 +4,11 @@ import { appRouter } from '@documenso/trpc/server/router';

 export const config = {
  maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
 };

 export default trpcNext.createNextApiHandler({