feat: signature rejection (#1472)

## Description

Adds support for rejecting a given document informing the document
owner.

Flows for resolving a rejection don't currently exist so it's up to the
document owner to reach out to the recipient and work out a way to move
forward via a new document or offline agreement.

## Related Issue


## Changes Made

- Added new rejection properties to the recipient schema
- Added API endpoints to support rejection
- Added email templates for notifying the document owner and recipient
- Added a dialog on the signing page to start the rejection flow.

## Testing Performed

- Manually tested the flow end to end
- Automated tests are planned

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

@@ -99,6 +99,10 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const { documentMeta } = document;
 
+  if (recipient.signingStatus === SigningStatus.REJECTED) {
+    return redirect(`/sign/${token}/rejected`);
+  }
+
   if (
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED

apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { Document } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZRejectDocumentFormSchema = z.object({
+  reason: z
+    .string()
+    .min(5, msg`Please provide a reason`)
+    .max(500, msg`Reason must be less than 500 characters`),
+});
+
+type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
+
+export interface RejectDocumentDialogProps {
+  document: Pick<Document, 'id'>;
+  token: string;
+}
+
+export function RejectDocumentDialog({ document, token }: RejectDocumentDialogProps) {
+  const { toast } = useToast();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: rejectDocumentWithToken } =
+    trpc.recipient.rejectDocumentWithToken.useMutation();
+
+  const form = useForm<TRejectDocumentFormSchema>({
+    resolver: zodResolver(ZRejectDocumentFormSchema),
+    defaultValues: {
+      reason: '',
+    },
+  });
+
+  const onRejectDocument = async ({ reason }: TRejectDocumentFormSchema) => {
+    try {
+      // TODO: Add trpc mutation here
+      await rejectDocumentWithToken({
+        documentId: document.id,
+        token,
+        reason,
+      });
+
+      toast({
+        title: 'Document rejected',
+        description: 'The document has been successfully rejected.',
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+
+      router.push(`/sign/${token}/rejected`);
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while rejecting the document. Please try again.',
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (searchParams?.get('reject') === 'true') {
+      setIsOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Trans>Reject Document</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reject Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Are you sure you want to reject this document? This action cannot be undone.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onRejectDocument)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="reason"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={4}
+                      placeholder="Please provide a reason for rejecting this document"
+                      disabled={form.formState.isSubmitting}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => setIsOpen(false)}
+                disabled={form.formState.isSubmitting}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={form.formState.isSubmitting}
+                disabled={!form.formState.isValid}
+              >
+                <Trans>Reject Document</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,110 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import { Trans } from '@lingui/macro';
+import { XCircle } from 'lucide-react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+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 { FieldType } from '@documenso/prisma/client';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { truncateTitle } from '~/helpers/truncate-title';
+
+import { SigningAuthPageView } from '../signing-auth-page';
+
+export type RejectedSigningPageProps = {
+  params: {
+    token?: string;
+  };
+};
+
+export default async function RejectedSigningPage({ params: { token } }: RejectedSigningPageProps) {
+  await setupI18nSSR();
+
+  if (!token) {
+    return notFound();
+  }
+
+  const { user } = await getServerComponentSession();
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+    requireAccessAuth: false,
+  }).catch(() => null);
+
+  if (!document) {
+    return notFound();
+  }
+
+  const truncatedTitle = truncateTitle(document.title);
+
+  const [fields, recipient] = await Promise.all([
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!recipient) {
+    return notFound();
+  }
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  if (!isDocumentAccessValid) {
+    return <SigningAuthPageView email={recipient.email} />;
+  }
+
+  const recipientName =
+    recipient.name ||
+    fields.find((field) => field.type === FieldType.NAME)?.customText ||
+    recipient.email;
+
+  return (
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
+      <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
+        {truncatedTitle}
+      </Badge>
+
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-x-4">
+          <XCircle className="text-destructive h-10 w-10" />
+
+          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Document Rejected</Trans>
+          </h2>
+        </div>
+
+        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+          <Trans>You have rejected this document</Trans>
+        </div>
+
+        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+          <Trans>
+            The document owner has been notified of your decision. They may contact you with further
+            instructions if necessary.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+          <Trans>No further action is required from you at this time.</Trans>
+        </p>
+
+        {user && (
+          <Button className="mt-6" asChild>
+            <Link href={`/`}>Return Home</Link>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -31,6 +31,7 @@ import { InitialsField } from './initials-field';
 import { NameField } from './name-field';
 import { NumberField } from './number-field';
 import { RadioField } from './radio-field';
+import { RejectDocumentDialog } from './reject-document-dialog';
 import { SignatureField } from './signature-field';
 import { TextField } from './text-field';
 
@@ -57,28 +58,32 @@ export const SigningPageView = ({
         {document.title}
       </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <p
-          className="text-muted-foreground truncate"
-          title={document.User.name ? document.User.name : ''}
-        >
-          {document.User.name}
-        </p>
-      </div>
+      <div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6">
+        <div>
+          <p
+            className="text-muted-foreground truncate"
+            title={document.User.name ? document.User.name : ''}
+          >
+            {document.User.name}
+          </p>
 
-      <p className="text-muted-foreground">
-        {match(recipient.role)
-          .with(RecipientRole.VIEWER, () => (
-            <Trans>({document.User.email}) has invited you to view this document</Trans>
-          ))
-          .with(RecipientRole.SIGNER, () => (
-            <Trans>({document.User.email}) has invited you to sign this document</Trans>
-          ))
-          .with(RecipientRole.APPROVER, () => (
-            <Trans>({document.User.email}) has invited you to approve this document</Trans>
-          ))
-          .otherwise(() => null)}
-      </p>
+          <p className="text-muted-foreground">
+            {match(recipient.role)
+              .with(RecipientRole.VIEWER, () => (
+                <Trans>({document.User.email}) has invited you to view this document</Trans>
+              ))
+              .with(RecipientRole.SIGNER, () => (
+                <Trans>({document.User.email}) has invited you to sign this document</Trans>
+              ))
+              .with(RecipientRole.APPROVER, () => (
+                <Trans>({document.User.email}) has invited you to approve this document</Trans>
+              ))
+              .otherwise(() => null)}
+          </p>
+        </div>
+
+        <RejectDocumentDialog document={document} token={recipient.token} />
+      </div>
 
       <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
         <Card