Merge branch 'main' into feat/DOC-170-add-name-field

Adds support for a name field which will be prefilled with the recipients name if they haven't signed a form on Documenso before.

apps/web/components/editor/field-type-selector.tsx

@@ -8,10 +8,17 @@ const stc = require("string-to-color");
 export default function FieldTypeSelector(props: any) {
   const fieldTypes = [
     {
-      name: "Signature",
       id: FieldType.SIGNATURE,
+      name: "Signature",
+    },
+    {
+      id: FieldType.NAME,
+      name: "Name",
+    },
+    {
+      id: FieldType.DATE,
+      name: "Date",
     },
-    { name: "Date", id: FieldType.DATE },
   ];
 
   const [selectedFieldType, setSelectedFieldType] = useState(fieldTypes[0].id);

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

@@ -0,0 +1,95 @@
+import { Fragment, useEffect, useState } from "react";
+import { classNames, localStorage } from "@documenso/lib";
+import { Button } from "@documenso/ui";
+import { Dialog, Transition } from "@headlessui/react";
+
+export default function NameDialog(props: any) {
+  const [name, setName] = useState(props.defaultName);
+
+  useEffect(() => {
+    const nameFromStorage = localStorage.getItem("typedName");
+
+    if (nameFromStorage) {
+      setName(nameFromStorage);
+    }
+  }, []);
+
+  return (
+    <Transition.Root show={props.open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={() => {
+          props.setOpen(false);
+        }}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className="relative min-h-[350px] transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                <div>
+                  <h4 className="text-center text-2xl font-medium">
+                    Enter your name in the input below!
+                  </h4>
+
+                  <div className="my-3 border-b border-gray-300">
+                    <input
+                      value={name}
+                      onChange={(e) => {
+                        setName(e.target.value);
+                      }}
+                      className={classNames(
+                        "focus:border-neon focus:ring-neon mt-14 block h-10 w-full text-center align-bottom font-sans text-2xl leading-none"
+                      )}
+                      placeholder="Kindly type your name"
+                    />
+                  </div>
+
+                  <div className="flex flex-row-reverse items-center gap-x-4">
+                    <Button
+                      color="secondary"
+                      onClick={() => {
+                        props.onClose();
+                        props.setOpen(false);
+                      }}>
+                      Cancel
+                    </Button>
+                    <Button
+                      className="ml-3"
+                      disabled={!name}
+                      onClick={() => {
+                        localStorage.setItem("typedName", name);
+                        props.onClose({
+                          type: "type",
+                          typedSignature: name,
+                        });
+                      }}>
+                      Sign
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { createField } from "@documenso/features/editor";
@@ -6,6 +6,7 @@ import { createOrUpdateField, deleteField, signDocument } from "@documenso/lib/a
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { Button } from "@documenso/ui";
 import Logo from "../logo";
+import NameDialog from "./name-dialog";
 import SignatureDialog from "./signature-dialog";
 import { CheckBadgeIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
 import { FieldType } from "@prisma/client";
@@ -16,21 +17,62 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 
 export default function PDFSigner(props: any) {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
+  const [signatureDialogOpen, setSignatureDialogOpen] = useState(false);
+  const [nameDialogOpen, setNameDialogOpen] = useState(false);
   const [signingDone, setSigningDone] = useState(false);
   const [localSignatures, setLocalSignatures] = useState<any[]>([]);
   const [fields, setFields] = useState<any[]>(props.fields);
-  const signatureFields = fields.filter((field) => field.type === FieldType.SIGNATURE);
+  const signatureFields = useMemo(
+    () => fields.filter((field) => [FieldType.SIGNATURE].includes(field.type)),
+    [fields]
+  );
   const [dialogField, setDialogField] = useState<any>();
 
-  useEffect(() => {
-    setSigningDone(checkIfSigningIsDone());
-  }, [fields]);
+  function signField(options: {
+    fieldId: string;
+    type: string;
+    typedSignature?: string;
+    signatureImage?: string;
+  }) {
+    const { fieldId, type, typedSignature, signatureImage } = options;
+
+    const signature = {
+      fieldId,
+      type,
+      typedSignature,
+      signatureImage,
+    };
+
+    const field = fields.find((e) => e.id == fieldId);
+
+    if (!field) {
+      return;
+    }
+
+    setLocalSignatures((s) => [...s.filter((e) => e.fieldId !== fieldId), signature]);
+
+    setFields((prevState) => {
+      const newState = [...prevState];
+      const index = newState.findIndex((e) => e.id == fieldId);
+
+      newState[index] = {
+        ...newState[index],
+        signature,
+      };
+
+      return newState;
+    });
+  }
 
   function onClick(item: any) {
-    if (item.type === "SIGNATURE") {
+    if (item.type === FieldType.SIGNATURE) {
       setDialogField(item);
-      setOpen(true);
+      setSignatureDialogOpen(true);
+    }
+
+    if (item.type === FieldType.NAME) {
+      setDialogField(item);
+      setNameDialogOpen(true);
     }
   }
 
@@ -43,31 +85,107 @@ export default function PDFSigner(props: any) {
 
     if (!dialogResult) return;
 
-    const signature = {
+    signField({
       fieldId: dialogField.id,
       type: dialogResult.type,
       typedSignature: dialogResult.typedSignature,
       signatureImage: dialogResult.signatureImage,
-    };
+    });
 
-    setLocalSignatures(localSignatures.concat(signature));
-
-    fields.splice(
-      fields.findIndex(function (i) {
-        return i.id === signature.fieldId;
-      }),
-      1
-    );
-    const signedField = { ...dialogField };
-    signedField.signature = signature;
-    setFields((prevState) => [...prevState, signedField]);
-    setOpen(false);
+    setSignatureDialogOpen(false);
+    setNameDialogOpen(false);
     setDialogField(null);
   }
 
+  function checkIfSigningIsDone(): boolean {
+    // Check if all fields are signed..
+    if (signatureFields.length > 0) {
+      // If there are no fields to sign at least one signature is enough
+      return fields
+        .filter((field) => field.type === FieldType.SIGNATURE)
+        .every((field) => field.signature);
+    } else {
+      // If we don't have a signature field, we need at least one free signature
+      // to be able to complete signing
+      const freeSignatureFields = fields.filter((field) => field.type === FieldType.FREE_SIGNATURE);
+
+      return freeSignatureFields.length > 0 && freeSignatureFields.every((field) => field.signature);
+    }
+  }
+
+  function addFreeSignature(e: any, page: number, recipient: any): any {
+    const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
+
+    createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
+      setFields((prevState) => [...prevState, res]);
+      setDialogField(res);
+      setSignatureDialogOpen(true);
+    });
+
+    return freeSignatureField;
+  }
+
+  function onDeleteHandler(id: any) {
+    const field = fields.find((e) => e.id == id);
+    const fieldIndex = fields.map((item) => item.id).indexOf(id);
+    if (fieldIndex > -1) {
+      const fieldWithoutRemoved = [...fields];
+      const removedField = fieldWithoutRemoved.splice(fieldIndex, 1);
+      setFields(fieldWithoutRemoved);
+
+      const signaturesWithoutRemoved = [...localSignatures];
+      const removedSignature = signaturesWithoutRemoved.splice(
+        signaturesWithoutRemoved.findIndex(function (i) {
+          return i.fieldId === id;
+        }),
+        1
+      );
+
+      setLocalSignatures(signaturesWithoutRemoved);
+      deleteField(field).catch((err) => {
+        setFields(fieldWithoutRemoved.concat(removedField));
+        setLocalSignatures(signaturesWithoutRemoved.concat(removedSignature));
+      });
+    }
+  }
+
+  useEffect(() => {
+    setSigningDone(checkIfSigningIsDone());
+  }, [fields]);
+
+  useEffect(() => {
+    const nameFields = fields.filter((field) => field.type === FieldType.NAME);
+
+    if (nameFields.length > 0) {
+      nameFields.forEach((field) => {
+        if (!field.signature && props.recipient?.name) {
+          signField({
+            fieldId: field.id,
+            type: "type",
+            typedSignature: props.recipient.name,
+          });
+        }
+      });
+    }
+    // We are intentionally not specifying deps here
+    // because we want to run this effect on the initial render
+  }, []);
+
   return (
     <>
-      <SignatureDialog open={open} setOpen={setOpen} onClose={onDialogClose} />
+      <SignatureDialog
+        open={signatureDialogOpen}
+        setOpen={setSignatureDialogOpen}
+        onClose={onDialogClose}
+      />
+
+      <NameDialog
+        open={nameDialogOpen}
+        setOpen={setNameDialogOpen}
+        onClose={onDialogClose}
+        defaultName={props.recipient?.name ?? ""}
+      />
+
       <div className="bg-neon p-4">
         <div className="flex">
           <div className="flex-shrink-0">
@@ -133,52 +251,4 @@ export default function PDFSigner(props: any) {
         onDelete={onDeleteHandler}></PDFViewer>
     </>
   );
-
-  function checkIfSigningIsDone(): boolean {
-    // Check if all fields are signed..
-    if (signatureFields.length > 0) {
-      // If there are no fields to sign at least one signature is enough
-      return fields
-        .filter((field) => field.type === FieldType.SIGNATURE)
-        .every((field) => field.signature);
-    } else {
-      return localSignatures.length > 0;
-    }
-  }
-
-  function addFreeSignature(e: any, page: number, recipient: any): any {
-    const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
-
-    createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
-      setFields((prevState) => [...prevState, res]);
-      setDialogField(res);
-      setOpen(true);
-    });
-
-    return freeSignatureField;
-  }
-
-  function onDeleteHandler(id: any) {
-    const field = fields.find((e) => e.id == id);
-    const fieldIndex = fields.map((item) => item.id).indexOf(id);
-    if (fieldIndex > -1) {
-      const fieldWithoutRemoved = [...fields];
-      const removedField = fieldWithoutRemoved.splice(fieldIndex, 1);
-      setFields(fieldWithoutRemoved);
-
-      const signaturesWithoutRemoved = [...localSignatures];
-      const removedSignature = signaturesWithoutRemoved.splice(
-        signaturesWithoutRemoved.findIndex(function (i) {
-          return i.fieldId === id;
-        }),
-        1
-      );
-
-      setLocalSignatures(signaturesWithoutRemoved);
-      deleteField(field).catch((err) => {
-        setFields(fieldWithoutRemoved.concat(removedField));
-        setLocalSignatures(signaturesWithoutRemoved.concat(removedSignature));
-      });
-    }
-  }
 }

apps/web/components/editor/signable-field.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { classNames } from "@documenso/lib";
 import { IconButton } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/20/solid";
+import { FieldType } from "@prisma/client";
 import Draggable from "react-draggable";
 
 const stc = require("string-to-color");
@@ -46,7 +47,9 @@ export default function SignableField(props: FieldPropsType) {
         ref={nodeRef}
         className={classNames(
           "absolute top-0 left-0 m-auto h-16 w-48 select-none flex-row-reverse text-center text-lg font-bold opacity-80",
-          field.type === "SIGNATURE" ? "cursor-pointer hover:brightness-50" : "cursor-not-allowed"
+          [FieldType.SIGNATURE, FieldType.NAME].includes(field.type)
+            ? "cursor-pointer hover:brightness-50"
+            : "cursor-not-allowed"
         )}
         style={{
           background: stc(props.field.Recipient.email),
@@ -54,10 +57,15 @@ export default function SignableField(props: FieldPropsType) {
         <div hidden={field?.signature} className="my-4 font-medium">
           {field.type === "SIGNATURE" ? "SIGN HERE" : ""}
           {field.type === "DATE" ? <small>Date (filled on sign)</small> : ""}
+          {field.type === "NAME" ? "ENTER NAME HERE" : ""}
         </div>
         <div
           hidden={!field?.signature}
-          className="font-qwigley m-auto w-auto flex-row-reverse text-center text-5xl font-medium">
+          className={classNames(
+            "m-auto w-auto flex-row-reverse text-center font-medium",
+            field.type === FieldType.SIGNATURE && "font-qwigley text-5xl",
+            field.type === FieldType.NAME && "font-sans text-3xl"
+          )}>
           {field?.signature?.type === "type" ? (
             <div className="my-4">{field?.signature.typedSignature}</div>
           ) : (

apps/web/next.config.js

@@ -4,6 +4,10 @@ require("dotenv").config({ path: "../../.env" });
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: false,
+  env: {
+    IS_PULL_REQUEST: process.env.IS_PULL_REQUEST,
+    RENDER_EXTERNAL_URL: process.env.RENDER_EXTERNAL_URL,
+  },
 };
 
 const transpileModules = require("next-transpile-modules")([

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

@@ -162,7 +162,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
         signedField.Signature.typedSignature,
         signedField.positionX,
         signedField.positionY,
-        signedField.page
+        signedField.page,
+        // useHandwritingFont only for typed signatures
+        signedField.type === FieldType.SIGNATURE,
+        // fontSize only for name field
+        signedField.type === FieldType.NAME ? 30 : undefined
       );
     } else {
       documentWithInserts = document.document;

packages/pdf/insertTextInPDF.ts

@@ -8,7 +8,8 @@ export async function insertTextInPDF(
   positionX: number,
   positionY: number,
   page: number = 0,
-  useHandwritingFont = true
+  useHandwritingFont = true,
+  fontSize = 15
 ): Promise<string> {
   const fontBytes = fs.readFileSync("public/fonts/Qwigley-Regular.ttf");
 
@@ -21,7 +22,7 @@ export async function insertTextInPDF(
   const pages = pdfDoc.getPages();
   const pdfPage = pages[page];
 
-  const textSize = useHandwritingFont ? 50 : 15;
+  const textSize = useHandwritingFont ? 50 : fontSize;
   const textWidth = font.widthOfTextAtSize(text, textSize);
   const textHeight = font.heightAtSize(textSize);
   const fieldSize = { width: 192, height: 64 };

packages/prisma/migrations/20230419055523_doc_170_add_name_field_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FieldType" ADD VALUE 'NAME';

packages/prisma/schema.prisma

@@ -126,6 +126,7 @@ model Recipient {
 }
 
 enum FieldType {
+  NAME
   SIGNATURE
   FREE_SIGNATURE
   DATE