🚧 signign workflow

apps/web/components/editor/pdf-signer.tsx

@@ -6,6 +6,7 @@ import SignatureDialog from "./signature-dialog";
 import { useState } from "react";
 import { Button } from "@documenso/ui";
 import { CheckBadgeIcon } from "@heroicons/react/24/outline";
+import toast from "react-hot-toast";
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
@@ -14,17 +15,61 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 export default function PDFSigner(props: any) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
-  const [fields, setFields] = useState<any[]>(props.fields);
+  const [signatures, setSignatures] = useState<any[]>([]);
+  const [dialogField, setDialogField] = useState<any>();
 
   function onClick(item: any) {
     if (item.type === "SIGNATURE") {
+      setDialogField(item);
       setOpen(true);
     }
   }
 
+  function onDialogClose(dialogResult: any) {
+    console.log(dialogResult);
+    console.log(dialogField);
+    setSignatures(
+      signatures.concat({
+        fieldId: dialogField.id,
+        type: dialogResult.type,
+        name: dialogResult.name,
+        signatureImage: null,
+      })
+    );
+    setOpen(false);
+    setDialogField(null);
+  }
+
+  function sign() {
+    const body = { documentId: props.document.id, signatures: signatures };
+    toast.promise(
+      fetch(
+        `/api/documents/${props.document.id}/sign?token=${router.query.token}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        }
+      ).then(() => {
+        router.push(
+          `/documents/${props.document.id}/signed?token=${router.query.token}`
+        );
+      }),
+      {
+        loading: "Signing...",
+        success: `"${props.document.title}" signed successfully.`,
+        error: "Could not sign :/",
+      }
+    );
+
+    // goto signing done page
+  }
+
   return (
     <>
-      <SignatureDialog open={open} setOpen={setOpen}></SignatureDialog>
+      <SignatureDialog open={open} setOpen={setOpen} onClose={onDialogClose} />
       <div className="bg-neon p-4">
         <div className="flex">
           <div className="flex-shrink-0">
@@ -36,9 +81,13 @@ export default function PDFSigner(props: any) {
               document.
             </p>
             <Button
+              disabled={signatures.length < props.fields.length}
               color="secondary"
               icon={CheckBadgeIcon}
               className="float-right"
+              onClick={() => {
+                sign();
+              }}
             >
               Done
             </Button>

apps/web/components/editor/signature-dialog.tsx

@@ -105,7 +105,16 @@ export default function SignatureDialog(props: any) {
                           >
                             Cancel
                           </Button>
-                          <Button className="ml-3" disabled={!typedName}>
+                          <Button
+                            className="ml-3"
+                            disabled={!typedName}
+                            onClick={() => {
+                              props.onClose({
+                                type: "type",
+                                name: "typedName",
+                              });
+                            }}
+                          >
                             Sign
                           </Button>
                         </div>

apps/web/pages/api/documents/[id]/sign.ts

@@ -14,8 +14,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { token: recipientToken } = req.query;
 
   if (!recipientToken) {
-    res.status(401).send("Missing recipient token.");
-    return;
+    return res.status(401).send("Missing recipient token.");
   }
 
   const recipient = await prisma.recipient.findFirstOrThrow({
@@ -23,36 +22,18 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   });
 
   if (!recipient) {
-    res.status(401).send("Recipient not found.");
-    return;
+    return res.status(401).send("Recipient not found.");
   }
 
   const document: PrismaDocument = await getDocument(
     recipient.documentId,
-    res,
-    req
+    req,
+    res
   );
 
   if (!document) res.status(404).end(`No document found.`);
 
-  // todo sign stuff
-
-  const unsignedRecipients = await prisma.recipient.findMany({
-    where: {
-      signingStatus: SigningStatus.NOT_SIGNED,
-    },
-  });
-
-  if (unsignedRecipients.length === 0) {
-    await prisma.document.update({
-      where: {
-        id: recipient.documentId,
-      },
-      data: {
-        status: DocumentStatus.COMPLETED,
-      },
-    });
-  }
+  // save signature to db for later use
 
   await prisma.recipient.update({
     where: {
@@ -63,6 +44,35 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     },
   });
 
+  const unsignedRecipients = await prisma.recipient.findMany({
+    where: {
+      documentId: recipient.documentId,
+      signingStatus: SigningStatus.NOT_SIGNED,
+    },
+  });
+
+  await prisma.document.update({
+    where: {
+      id: recipient.documentId,
+    },
+    data: {
+      status: DocumentStatus.COMPLETED,
+    },
+  });
+
+  if (unsignedRecipients.length === 0) {
+    // if everybody signed insert images and create signature
+    await prisma.document.update({
+      where: {
+        id: recipient.documentId,
+      },
+      data: {
+        status: DocumentStatus.COMPLETED,
+      },
+    });
+    // send notifications
+  }
+
   return res.status(200).end();
 }
 

apps/web/pages/documents/[id]/signed.tsx

@@ -0,0 +1,46 @@
+import prisma from "@documenso/prisma";
+import Head from "next/head";
+import { NextPageWithLayout } from "../../_app";
+import { ReadStatus } from "@prisma/client";
+
+const SignPage: NextPageWithLayout = (props: any) => {
+  return (
+    <>
+      <Head>
+        <title>Sign | Documenso</title>
+      </Head>
+      You signed,thanks for playing.
+    </>
+  );
+};
+
+export async function getServerSideProps(context: any) {
+  const recipientToken: string = context.query["token"];
+
+  const recipient = await prisma.recipient.findFirstOrThrow({
+    where: {
+      token: recipientToken,
+    },
+    include: {
+      Document: true,
+    },
+  });
+
+  const fields = await prisma.field.findMany({
+    where: {
+      documentId: recipient.Document.id,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  return {
+    props: {
+      document: recipient.Document,
+      fields: fields,
+    },
+  };
+}
+
+export default SignPage;