feat: allow for the deletion of any document (#711)

Allow for the deletion of any document with notifications of document cancellation for pending documents.

.github/workflows/e2e-tests.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Create the database
         run: npm run prisma:migrate-dev
 
+      - name: Seed the database
+        run: npm run prisma:seed
+
       - name: Run Playwright tests
         run: npm run ci
 

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

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}

apps/web/src/app/(dashboard)/documents/delete-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>

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

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

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 }))[0];
+
+  if (document.deletedAt) {
+    return (
+      <NoLongerAvailable
+        document={document}
+        recipientName={recipient.name}
+        recipientSignature={recipientSignature}
+      />
+    );
+  }
+
   return (
     <SigningProvider
       email={recipient.email}

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>

packages/app-tests/e2e/pr-711-deletion-of-documents.spec.ts

@@ -0,0 +1,192 @@
+import { expect, test } from '@playwright/test';
+
+import { TEST_USERS } from '@documenso/prisma/seed/pr-711-deletion-of-documents';
+
+test.describe.configure({ mode: 'serial' });
+
+test('[PR-711]: seeded documents should be visible', async ({ page }) => {
+  const [sender, ...recipients] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  await page.getByLabel('Email').fill(sender.email);
+  await page.getByLabel('Password', { exact: true }).fill(sender.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).toBeVisible();
+
+  await page.getByTitle('Profile Dropdown').click();
+  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+
+  await page.waitForURL('/signin');
+
+  for (const recipient of recipients) {
+    await page.goto('/signin');
+
+    await page.getByLabel('Email').fill(recipient.email);
+    await page.getByLabel('Password', { exact: true }).fill(recipient.password);
+    await page.getByRole('button', { name: 'Sign In' }).click();
+
+    await page.waitForURL('/documents');
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).not.toBeVisible();
+
+    await page.getByTitle('Profile Dropdown').click();
+    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+
+    await page.waitForURL('/signin');
+  }
+});
+
+test('[PR-711]: deleting a completed document should not remove it from recipients', async ({
+  page,
+}) => {
+  const [sender, ...recipients] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  // sign in
+  await page.getByLabel('Email').fill(sender.email);
+  await page.getByLabel('Password', { exact: true }).fill(sender.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  // open actions menu
+  await page
+    .locator('tr', { hasText: 'Document 1 - Completed' })
+    .getByRole('cell', { name: 'Download' })
+    .getByRole('button')
+    .nth(1)
+    .click();
+
+  // delete document
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
+
+  // signout
+  await page.getByTitle('Profile Dropdown').click();
+  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+
+  await page.waitForURL('/signin');
+
+  for (const recipient of recipients) {
+    await page.goto('/signin');
+
+    // sign in
+    await page.getByLabel('Email').fill(recipient.email);
+    await page.getByLabel('Password', { exact: true }).fill(recipient.password);
+    await page.getByRole('button', { name: 'Sign In' }).click();
+
+    await page.waitForURL('/documents');
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Completed' })).toBeVisible();
+
+    await page.goto(`/sign/completed-token-${recipients.indexOf(recipient)}`);
+    await expect(page.getByText('Everyone has signed').nth(0)).toBeVisible();
+
+    await page.goto('/documents');
+
+    await page.getByTitle('Profile Dropdown').click();
+    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+
+    await page.waitForURL('/signin');
+  }
+});
+
+test('[PR-711]: deleting a pending document should remove it from recipients', async ({ page }) => {
+  const [sender, ...recipients] = TEST_USERS;
+
+  for (const recipient of recipients) {
+    await page.goto(`/sign/pending-token-${recipients.indexOf(recipient)}`);
+
+    await expect(page.getByText('Waiting for others to sign').nth(0)).toBeVisible();
+  }
+
+  await page.goto('/signin');
+
+  // sign in
+  await page.getByLabel('Email').fill(sender.email);
+  await page.getByLabel('Password', { exact: true }).fill(sender.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  // open actions menu
+  await page.locator('tr', { hasText: 'Document 1 - Pending' }).getByRole('button').nth(1).click();
+
+  // delete document
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
+
+  // signout
+  await page.getByTitle('Profile Dropdown').click();
+  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+
+  await page.waitForURL('/signin');
+
+  for (const recipient of recipients) {
+    await page.goto('/signin');
+
+    // sign in
+    await page.getByLabel('Email').fill(recipient.email);
+    await page.getByLabel('Password', { exact: true }).fill(recipient.password);
+    await page.getByRole('button', { name: 'Sign In' }).click();
+
+    await page.waitForURL('/documents');
+
+    await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).not.toBeVisible();
+
+    await page.goto(`/sign/pending-token-${recipients.indexOf(recipient)}`);
+    await expect(page.getByText(/document.*cancelled/i).nth(0)).toBeVisible();
+
+    await page.goto('/documents');
+
+    await page.getByTitle('Profile Dropdown').click();
+    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+
+    await page.waitForURL('/signin');
+  }
+});
+
+test('[PR-711]: deleting a draft document should remove it without additional prompting', async ({
+  page,
+}) => {
+  const [sender] = TEST_USERS;
+
+  await page.goto('/signin');
+
+  // sign in
+  await page.getByLabel('Email').fill(sender.email);
+  await page.getByLabel('Password', { exact: true }).fill(sender.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  await page.waitForURL('/documents');
+
+  // open actions menu
+  await page
+    .locator('tr', { hasText: 'Document 1 - Draft' })
+    .getByRole('cell', { name: 'Edit' })
+    .getByRole('button')
+    .click();
+
+  // delete document
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await expect(page.getByPlaceholder("Type 'delete' to confirm")).not.toBeVisible();
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Draft/ })).not.toBeVisible();
+});

packages/app-tests/e2e/test-auth-flow.spec.ts

@@ -4,15 +4,15 @@ import { deleteUser } from '@documenso/lib/server-only/user/delete-user';
 
 test.use({ storageState: { cookies: [], origins: [] } });
 
-/* 
+/*
   Using them sequentially so the 2nd test
   uses the details from the 1st (registration) test
 */
 test.describe.configure({ mode: 'serial' });
 
-const username = process.env.E2E_TEST_AUTHENTICATE_USERNAME;
-const email = process.env.E2E_TEST_AUTHENTICATE_USER_EMAIL;
-const password = process.env.E2E_TEST_AUTHENTICATE_USER_PASSWORD;
+const username = 'Test User';
+const email = 'test-user@auth-flow.documenso.com';
+const password = 'Password123';
 
 test('user can sign up with email and password', async ({ page }: { page: Page }) => {
   await page.goto('/signup');

packages/app-tests/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@playwright/test": "^1.18.1",
     "@types/node": "^20.8.2",
+    "@documenso/prisma": "*",
     "@documenso/web": "*"
   },
   "dependencies": {

packages/app-tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@documenso/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": ["@documenso/tsconfig/process-env.d.ts"]
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}

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

@@ -0,0 +1,34 @@
+import { Section, Text } from '../components';
+import { TemplateDocumentImage } from './template-document-image';
+
+export interface TemplateDocumentCancelProps {
+  inviterName: string;
+  inviterEmail: string;
+  documentName: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateDocumentCancel = ({
+  inviterName,
+  documentName,
+  assetBaseUrl,
+}: TemplateDocumentCancelProps) => {
+  return (
+    <>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+      <Section>
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          {inviterName} has cancelled the document
+          <br />"{documentName}"
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          You don't need to sign it anymore.
+        </Text>
+      </Section>
+    </>
+  );
+};
+
+export default TemplateDocumentCancel;

packages/email/templates/document-cancel.tsx

@@ -0,0 +1,66 @@
+import config from '@documenso/tailwind-config';
+
+import { Body, Container, Head, Hr, Html, Img, Preview, Section, Tailwind } from '../components';
+import type { TemplateDocumentCancelProps } from '../template-components/template-document-cancel';
+import { TemplateDocumentCancel } from '../template-components/template-document-cancel';
+import { TemplateFooter } from '../template-components/template-footer';
+
+export type DocumentCancelEmailTemplateProps = Partial<TemplateDocumentCancelProps>;
+
+export const DocumentCancelTemplate = ({
+  inviterName = 'Lucas Smith',
+  inviterEmail = 'lucas@documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentCancelEmailTemplateProps) => {
+  const previewText = `${inviterName} has cancelled the document ${documentName}, you don't need to sign it anymore.`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateDocumentCancel
+                  inviterName={inviterName}
+                  inviterEmail={inviterEmail}
+                  documentName={documentName}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentCancelTemplate;

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

@@ -0,0 +1,88 @@
+'use server';
+
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import DocumentCancelTemplate from '@documenso/email/templates/document-cancel';
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus } from '@documenso/prisma/client';
+
+import { FROM_ADDRESS, FROM_NAME } from '../../constants/email';
+
+export type DeleteDocumentOptions = {
+  id: number;
+  userId: number;
+  status: DocumentStatus;
+};
+
+export const deleteDocument = async ({ id, userId, status }: DeleteDocumentOptions) => {
+  // if the document is a draft, hard-delete
+  if (status === DocumentStatus.DRAFT) {
+    return await prisma.document.delete({ where: { id, userId, status: DocumentStatus.DRAFT } });
+  }
+
+  // if the document is pending, send cancellation emails to all recipients
+  if (status === DocumentStatus.PENDING) {
+    const user = await prisma.user.findFirstOrThrow({
+      where: {
+        id: userId,
+      },
+    });
+
+    const document = await prisma.document.findUnique({
+      where: {
+        id,
+        status,
+        userId,
+      },
+      include: {
+        Recipient: true,
+        documentMeta: true,
+      },
+    });
+
+    if (!document) {
+      throw new Error('Document not found');
+    }
+
+    if (document.Recipient.length > 0) {
+      await Promise.all(
+        document.Recipient.map(async (recipient) => {
+          const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+          const template = createElement(DocumentCancelTemplate, {
+            documentName: document.title,
+            inviterName: user.name || undefined,
+            inviterEmail: user.email,
+            assetBaseUrl,
+          });
+
+          await mailer.sendMail({
+            to: {
+              address: recipient.email,
+              name: recipient.name,
+            },
+            from: {
+              name: FROM_NAME,
+              address: FROM_ADDRESS,
+            },
+            subject: 'Document Cancelled',
+            html: render(template),
+            text: render(template, { plainText: true }),
+          });
+        }),
+      );
+    }
+  }
+
+  // If the document is not a draft, only soft-delete.
+  return await prisma.document.update({
+    where: {
+      id,
+    },
+    data: {
+      deletedAt: new Date().toISOString(),
+    },
+  });
+};

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

@@ -1,13 +0,0 @@
-'use server';
-
-import { prisma } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
-
-export type DeleteDraftDocumentOptions = {
-  id: number;
-  userId: number;
-};
-
-export const deleteDraftDocument = async ({ id, userId }: DeleteDraftDocumentOptions) => {
-  return await prisma.document.delete({ where: { id, userId, status: DocumentStatus.DRAFT } });
-};

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

@@ -55,17 +55,25 @@ export const findDocuments = async ({
       OR: [
         {
           userId,
+          deletedAt: null,
         },
         {
-          status: {
-            not: ExtendedDocumentStatus.DRAFT,
-          },
+          status: ExtendedDocumentStatus.COMPLETED,
           Recipient: {
             some: {
               email: user.email,
             },
           },
         },
+        {
+          status: ExtendedDocumentStatus.PENDING,
+          Recipient: {
+            some: {
+              email: user.email,
+            },
+          },
+          deletedAt: null,
+        },
       ],
     }))
     .with(ExtendedDocumentStatus.INBOX, () => ({
@@ -78,26 +86,29 @@ export const findDocuments = async ({
           signingStatus: SigningStatus.NOT_SIGNED,
         },
       },
+      deletedAt: null,
     }))
     .with(ExtendedDocumentStatus.DRAFT, () => ({
       userId,
       status: ExtendedDocumentStatus.DRAFT,
+      deletedAt: null,
     }))
     .with(ExtendedDocumentStatus.PENDING, () => ({
       OR: [
         {
           userId,
           status: ExtendedDocumentStatus.PENDING,
+          deletedAt: null,
         },
         {
           status: ExtendedDocumentStatus.PENDING,
-
           Recipient: {
             some: {
               email: user.email,
               signingStatus: SigningStatus.SIGNED,
             },
           },
+          deletedAt: null,
         },
       ],
     }))
@@ -106,6 +117,7 @@ export const findDocuments = async ({
         {
           userId,
           status: ExtendedDocumentStatus.COMPLETED,
+          deletedAt: null,
         },
         {
           status: ExtendedDocumentStatus.COMPLETED,

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

@@ -1,5 +1,6 @@
 import { prisma } from '@documenso/prisma';
-import { SigningStatus, User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
+import { SigningStatus } from '@documenso/prisma/client';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
@@ -16,6 +17,7 @@ export const getStats = async ({ user }: GetStatsInput) => {
       },
       where: {
         userId: user.id,
+        deletedAt: null,
       },
     }),
     prisma.document.groupBy({
@@ -31,6 +33,7 @@ export const getStats = async ({ user }: GetStatsInput) => {
             signingStatus: SigningStatus.NOT_SIGNED,
           },
         },
+        deletedAt: null,
       },
     }),
     prisma.document.groupBy({
@@ -39,15 +42,27 @@ export const getStats = async ({ user }: GetStatsInput) => {
         _all: true,
       },
       where: {
-        status: {
-          not: ExtendedDocumentStatus.DRAFT,
-        },
-        Recipient: {
-          some: {
-            email: user.email,
-            signingStatus: SigningStatus.SIGNED,
+        OR: [
+          {
+            status: ExtendedDocumentStatus.PENDING,
+            Recipient: {
+              some: {
+                email: user.email,
+                signingStatus: SigningStatus.SIGNED,
+              },
+            },
+            deletedAt: null,
           },
-        },
+          {
+            status: ExtendedDocumentStatus.COMPLETED,
+            Recipient: {
+              some: {
+                email: user.email,
+                signingStatus: SigningStatus.SIGNED,
+              },
+            },
+          },
+        ],
       },
     }),
   ]);

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

@@ -37,6 +37,10 @@ export const signFieldWithToken = async ({
     throw new Error(`Document ${document.id} has already been completed`);
   }
 
+  if (document.deletedAt) {
+    throw new Error(`Document ${document.id} has been deleted`);
+  }
+
   if (recipient?.signingStatus === SigningStatus.SIGNED) {
     throw new Error(`Recipient ${recipient.id} has already signed`);
   }

packages/prisma/migrations/20231202134005_deletedocuments/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "deletedAt" TIMESTAMP(3);

packages/prisma/schema.prisma

@@ -135,6 +135,7 @@ model Document {
   createdAt      DateTime            @default(now())
   updatedAt      DateTime            @default(now()) @updatedAt
   completedAt    DateTime?
+  deletedAt      DateTime?
 
   @@unique([documentDataId])
   @@index([userId])

packages/prisma/seed-database.ts

@@ -1,74 +1,22 @@
-import { DocumentDataType, Role } from '@prisma/client';
 import fs from 'node:fs';
 import path from 'node:path';
 
-import { hashSync } from '@documenso/lib/server-only/auth/hash';
-
-import { prisma } from './index';
-
 const seedDatabase = async () => {
-  const examplePdf = fs
-    .readFileSync(path.join(__dirname, '../../assets/example.pdf'))
-    .toString('base64');
+  const files = fs.readdirSync(path.join(__dirname, './seed'));
 
-  const exampleUser = await prisma.user.upsert({
-    where: {
-      email: 'example@documenso.com',
-    },
-    create: {
-      name: 'Example User',
-      email: 'example@documenso.com',
-      password: hashSync('password'),
-      roles: [Role.USER],
-    },
-    update: {},
-  });
+  for (const file of files) {
+    const stat = fs.statSync(path.join(__dirname, './seed', file));
 
-  const adminUser = await prisma.user.upsert({
-    where: {
-      email: 'admin@documenso.com',
-    },
-    create: {
-      name: 'Admin User',
-      email: 'admin@documenso.com',
-      password: hashSync('password'),
-      roles: [Role.USER, Role.ADMIN],
-    },
-    update: {},
-  });
+    if (stat.isFile()) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const mod = require(path.join(__dirname, './seed', file));
 
-  const examplePdfData = await prisma.documentData.upsert({
-    where: {
-      id: 'clmn0kv5k0000pe04vcqg5zla',
-    },
-    create: {
-      id: 'clmn0kv5k0000pe04vcqg5zla',
-      type: DocumentDataType.BYTES_64,
-      data: examplePdf,
-      initialData: examplePdf,
-    },
-    update: {},
-  });
-
-  await prisma.document.upsert({
-    where: {
-      id: 1,
-    },
-    create: {
-      id: 1,
-      title: 'Example Document',
-      documentDataId: examplePdfData.id,
-      userId: exampleUser.id,
-      Recipient: {
-        create: {
-          name: String(adminUser.name),
-          email: adminUser.email,
-          token: Math.random().toString(36).slice(2, 9),
-        },
-      },
-    },
-    update: {},
-  });
+      if ('seedDatabase' in mod && typeof mod.seedDatabase === 'function') {
+        console.log(`[SEEDING]: ${file}`);
+        await mod.seedDatabase();
+      }
+    }
+  }
 };
 
 seedDatabase()

packages/prisma/seed/initial-seed.ts

@@ -0,0 +1,67 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+
+import { prisma } from '..';
+import { DocumentDataType, Role } from '../client';
+
+export const seedDatabase = async () => {
+  const examplePdf = fs
+    .readFileSync(path.join(__dirname, '../../../assets/example.pdf'))
+    .toString('base64');
+
+  const exampleUser = await prisma.user.upsert({
+    where: {
+      email: 'example@documenso.com',
+    },
+    create: {
+      name: 'Example User',
+      email: 'example@documenso.com',
+      password: hashSync('password'),
+      roles: [Role.USER],
+    },
+    update: {},
+  });
+
+  const adminUser = await prisma.user.upsert({
+    where: {
+      email: 'admin@documenso.com',
+    },
+    create: {
+      name: 'Admin User',
+      email: 'admin@documenso.com',
+      password: hashSync('password'),
+      roles: [Role.USER, Role.ADMIN],
+    },
+    update: {},
+  });
+
+  const examplePdfData = await prisma.documentData.upsert({
+    where: {
+      id: 'clmn0kv5k0000pe04vcqg5zla',
+    },
+    create: {
+      id: 'clmn0kv5k0000pe04vcqg5zla',
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+    update: {},
+  });
+
+  await prisma.document.create({
+    data: {
+      title: 'Example Document',
+      documentDataId: examplePdfData.id,
+      userId: exampleUser.id,
+      Recipient: {
+        create: {
+          name: String(adminUser.name),
+          email: adminUser.email,
+          token: Math.random().toString(36).slice(2, 9),
+        },
+      },
+    },
+  });
+};

packages/prisma/seed/pr-711-deletion-of-documents.ts

@@ -0,0 +1,221 @@
+import type { User } from '@prisma/client';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+
+import { prisma } from '..';
+import {
+  DocumentDataType,
+  DocumentStatus,
+  FieldType,
+  Prisma,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '../client';
+
+const PULL_REQUEST_NUMBER = 711;
+const EMAIL_DOMAIN = `pr-${PULL_REQUEST_NUMBER}.documenso.com`;
+
+export const TEST_USERS = [
+  {
+    name: 'Sender 1',
+    email: `sender1@${EMAIL_DOMAIN}`,
+    password: 'Password123',
+  },
+  {
+    name: 'Sender 2',
+    email: `sender2@${EMAIL_DOMAIN}`,
+    password: 'Password123',
+  },
+  {
+    name: 'Sender 3',
+    email: `sender3@${EMAIL_DOMAIN}`,
+    password: 'Password123',
+  },
+] as const;
+
+const examplePdf = fs
+  .readFileSync(path.join(__dirname, '../../../assets/example.pdf'))
+  .toString('base64');
+
+export const seedDatabase = async () => {
+  const users = await Promise.all(
+    TEST_USERS.map(async (u) =>
+      prisma.user.create({
+        data: {
+          name: u.name,
+          email: u.email,
+          password: hashSync(u.password),
+          emailVerified: new Date(),
+        },
+      }),
+    ),
+  );
+
+  const [user1, user2, user3] = users;
+
+  await createDraftDocument(user1, [user2, user3]);
+  await createPendingDocument(user1, [user2, user3]);
+  await createCompletedDocument(user1, [user2, user3]);
+};
+
+const createDraftDocument = async (sender: User, recipients: User[]) => {
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      title: `[${PULL_REQUEST_NUMBER}] Document 1 - Draft`,
+      status: DocumentStatus.DRAFT,
+      documentDataId: documentData.id,
+      userId: sender.id,
+    },
+  });
+
+  for (const recipient of recipients) {
+    const index = recipients.indexOf(recipient);
+
+    await prisma.recipient.create({
+      data: {
+        email: String(recipient.email),
+        name: String(recipient.name),
+        token: `draft-token-${index}`,
+        readStatus: ReadStatus.NOT_OPENED,
+        sendStatus: SendStatus.NOT_SENT,
+        signingStatus: SigningStatus.NOT_SIGNED,
+        signedAt: new Date(),
+        Document: {
+          connect: {
+            id: document.id,
+          },
+        },
+        Field: {
+          create: {
+            page: 1,
+            type: FieldType.NAME,
+            inserted: true,
+            customText: String(recipient.name),
+            positionX: new Prisma.Decimal(1),
+            positionY: new Prisma.Decimal(1),
+            width: new Prisma.Decimal(1),
+            height: new Prisma.Decimal(1),
+            documentId: document.id,
+          },
+        },
+      },
+    });
+  }
+};
+
+const createPendingDocument = async (sender: User, recipients: User[]) => {
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      title: `[${PULL_REQUEST_NUMBER}] Document 1 - Pending`,
+      status: DocumentStatus.PENDING,
+      documentDataId: documentData.id,
+      userId: sender.id,
+    },
+  });
+
+  for (const recipient of recipients) {
+    const index = recipients.indexOf(recipient);
+
+    await prisma.recipient.create({
+      data: {
+        email: String(recipient.email),
+        name: String(recipient.name),
+        token: `pending-token-${index}`,
+        readStatus: ReadStatus.OPENED,
+        sendStatus: SendStatus.SENT,
+        signingStatus: SigningStatus.SIGNED,
+        signedAt: new Date(),
+        Document: {
+          connect: {
+            id: document.id,
+          },
+        },
+        Field: {
+          create: {
+            page: 1,
+            type: FieldType.NAME,
+            inserted: true,
+            customText: String(recipient.name),
+            positionX: new Prisma.Decimal(1),
+            positionY: new Prisma.Decimal(1),
+            width: new Prisma.Decimal(1),
+            height: new Prisma.Decimal(1),
+            documentId: document.id,
+          },
+        },
+      },
+    });
+  }
+};
+
+const createCompletedDocument = async (sender: User, recipients: User[]) => {
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      title: `[${PULL_REQUEST_NUMBER}] Document 1 - Completed`,
+      status: DocumentStatus.COMPLETED,
+      documentDataId: documentData.id,
+      userId: sender.id,
+    },
+  });
+
+  for (const recipient of recipients) {
+    const index = recipients.indexOf(recipient);
+
+    await prisma.recipient.create({
+      data: {
+        email: String(recipient.email),
+        name: String(recipient.name),
+        token: `completed-token-${index}`,
+        readStatus: ReadStatus.OPENED,
+        sendStatus: SendStatus.SENT,
+        signingStatus: SigningStatus.SIGNED,
+        signedAt: new Date(),
+        Document: {
+          connect: {
+            id: document.id,
+          },
+        },
+        Field: {
+          create: {
+            page: 1,
+            type: FieldType.NAME,
+            inserted: true,
+            customText: String(recipient.name),
+            positionX: new Prisma.Decimal(1),
+            positionY: new Prisma.Decimal(1),
+            width: new Prisma.Decimal(1),
+            height: new Prisma.Decimal(1),
+            documentId: document.id,
+          },
+        },
+      },
+    });
+  }
+};

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

@@ -3,7 +3,7 @@ import { TRPCError } from '@trpc/server';
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
-import { deleteDraftDocument } from '@documenso/lib/server-only/document/delete-draft-document';
+import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
 import { duplicateDocumentById } from '@documenso/lib/server-only/document/duplicate-document-by-id';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
@@ -97,15 +97,15 @@ export const documentRouter = router({
       }
     }),
 
-  deleteDraftDocument: authenticatedProcedure
+  deleteDocument: authenticatedProcedure
     .input(ZDeleteDraftDocumentMutationSchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { id } = input;
+        const { id, status } = input;
 
         const userId = ctx.user.id;
 
-        return await deleteDraftDocument({ id, userId });
+        return await deleteDocument({ id, userId, status });
       } catch (err) {
         console.error(err);
 

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

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { FieldType } from '@documenso/prisma/client';
+import { DocumentStatus, FieldType } from '@documenso/prisma/client';
 
 export const ZGetDocumentByIdQuerySchema = z.object({
   id: z.number().min(1),
@@ -80,6 +80,7 @@ export type TSendDocumentMutationSchema = z.infer<typeof ZSendDocumentMutationSc
 
 export const ZDeleteDraftDocumentMutationSchema = z.object({
   id: z.number().min(1),
+  status: z.nativeEnum(DocumentStatus),
 });
 
 export type TDeleteDraftDocumentMutationSchema = z.infer<typeof ZDeleteDraftDocumentMutationSchema>;