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

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

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}