Merge branch 'main' into doc-162

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

@@ -173,7 +173,11 @@ export default function PDFSigner(props: any) {
       FieldType.FREE_SIGNATURE
     );
 
-    createOrUpdateField(props.document, freeSignatureField).then((res) => {
+    createOrUpdateField(
+      props.document,
+      freeSignatureField,
+      recipient.token
+    ).then((res) => {
       setFields((prevState) => [...prevState, res]);
       setDialogField(res);
       setOpen(true);

apps/web/components/editor/pdf-viewer.jsx

@@ -3,6 +3,7 @@ import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 import EditableField from "./editable-field";
 import SignableField from "./signable-field";
 import short from "short-uuid";
+import { FieldType } from "@prisma/client";
 
 export default function PDFViewer(props) {
   const [numPages, setNumPages] = useState(null);
@@ -71,21 +72,25 @@ export default function PDFViewer(props) {
                   onRenderError={() => setLoading(false)}
                 ></Page>
                 {props?.fields
-                  .filter((item) => item.page === index)
-                  .map((item) =>
+                  .filter((field) => field.page === index)
+                  .map((field) =>
                     props.readonly ? (
                       <SignableField
                         onClick={props.onClick}
-                        key={item.id}
-                        field={item}
+                        key={field.id}
+                        field={field}
                         className="absolute"
                         onDelete={onDeleteHandler}
                       ></SignableField>
                     ) : (
                       <EditableField
-                        hidden={item.Signature || item.inserted}
-                        key={item.id}
-                        field={item}
+                        hidden={
+                          field.Signature ||
+                          field.inserted ||
+                          field.type === FieldType.FREE_SIGNATURE
+                        }
+                        key={field.id}
+                        field={field}
                         className="absolute"
                         onPositionChanged={onPositionChangedHandler}
                         onDelete={onDeleteHandler}

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Draggable from "react-draggable";
 import { IconButton } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/20/solid";
+import { classNames } from "@documenso/lib";
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -43,13 +44,19 @@ export default function SignableField(props: FieldPropsType) {
           if (!field?.signature) props.onClick(props.field);
         }}
         ref={nodeRef}
-        className="cursor-pointer opacity-80 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none hover:brightness-50"
+        className={classNames(
+          "opacity-80 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none",
+          field.type === "SIGNATURE"
+            ? "cursor-pointer hover:brightness-50"
+            : "cursor-not-allowed"
+        )}
         style={{
           background: stc(props.field.Recipient.email),
         }}
       >
         <div hidden={field?.signature} className="font-medium my-4">
           {field.type === "SIGNATURE" ? "SIGN HERE" : ""}
+          {field.type === "DATE" ? <small>Date (filled on sign)</small> : ""}
         </div>
         <div
           hidden={!field?.signature}