🚸 ✨ Associate recipients to fields, improved flow

apps/web/components/editor/field.tsx

@@ -16,7 +16,7 @@ type FieldPropsType = {
     positionX: number;
     positionY: number;
     id: string;
-    recipient: string;
+    Recipient: { name: ""; email: "" };
   };
   onPositionChanged: any;
   onDelete: any;
@@ -53,13 +53,22 @@ export default function Field(props: FieldPropsType) {
     >
       <div
         ref={nodeRef}
-        style={{ background: stc(props.field.recipient) }}
         className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
+        style={{
+          background: stc(props.field.Recipient.email),
+        }}
       >
+        <Logo className="mx-auto w-16 mb-2"></Logo>
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
           {/* todo icons */}
           {field.type}
-          <div className="text-xs text-center">{props.field.recipient}</div>
+          {field.type === "SIGNATURE" ? (
+            <div className="text-xs text-center">
+              {`${props.field.Recipient?.name} <${props.field.Recipient?.email}>`}
+            </div>
+          ) : (
+            ""
+          )}
         </div>
         <strong>
           <IconButton

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

@@ -1,18 +1,25 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import { Button } from "@documenso/ui";
 import short from "short-uuid";
 import toast from "react-hot-toast";
 import { FieldType } from "@prisma/client";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import { classNames } from "@documenso/lib";
+const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
 });
 
 export default function PDFEditor(props: any) {
-  const [selectedRecipient, setSelectedRecipient] = useState("");
+  const [selectedRecipient, setSelectedRecipient]: any = useState(
+    props?.document?.Recipient[0]
+  );
+  const noRecipients = props?.document?.Recipient?.length === 0;
   const [fields, setFields] = useState<any[]>(props.document.Field);
   const router = useRouter();
 
@@ -43,48 +50,134 @@ export default function PDFEditor(props: any) {
 
   return (
     <>
-      <label
-        htmlFor="location"
-        className="block text-sm font-medium text-gray-700"
-      >
-        Location
-      </label>
-      <select
-        className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-        value={selectedRecipient}
-        onChange={(e) => setSelectedRecipient(e.target.value)}
-      >
-        {props?.document?.Recipient?.map((item: any) => (
-          <option key={item.email + short.generate().toString()}>
-            {item.name ? `${item.name} <${item.email}>` : item.email}
-          </option>
-        ))}
-      </select>
-      <Button
-        className="inline ml-1"
-        onClick={() => {
-          const signatureField = {
-            id: -1,
-            page: 0,
-            type: FieldType.SIGNATURE,
-            positionX: 0,
-            positionY: 0,
-            recipient: selectedRecipient,
-          };
+      <div hidden={noRecipients}>
+        <Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
+          {({ open }) => (
+            <div className="relative mt-1 mb-2">
+              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
+                <span className="flex items-center">
+                  <span
+                    className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
+                    style={{ background: stc(selectedRecipient?.email) }}
+                  />
+                  <span className="ml-3 block truncate">
+                    {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+                  </span>
+                </span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon
+                    className="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </Listbox.Button>
 
-          upsertField(props?.document, signatureField).then((res) => {
-            setFields(fields.concat(res));
-          });
-        }}
-      >
-        Add Signature Field
-      </Button>
-      <Button color="secondary" className="inline ml-1">
-        Add Date Field
-      </Button>
-      <Button color="secondary" className="inline ml-1">
-        Add Text Field
-      </Button>
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {props?.document?.Recipient?.map((recipient: any) => (
+                    <Listbox.Option
+                      key={recipient?.id}
+                      className={({ active }) =>
+                        classNames(
+                          active ? "text-white bg-indigo-600" : "text-gray-900",
+                          "relative cursor-default select-none py-2 pl-3 pr-9"
+                        )
+                      }
+                      value={recipient}
+                    >
+                      {({ selected, active }) => (
+                        <>
+                          <div className="flex items-center">
+                            <span
+                              className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
+                              style={{
+                                background: stc(recipient?.email),
+                              }}
+                            />
+                            <span
+                              className={classNames(
+                                selected ? "font-semibold" : "font-normal",
+                                "ml-3 block truncate"
+                              )}
+                            >
+                              {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+                            </span>
+                          </div>
+
+                          {selected ? (
+                            <span
+                              className={classNames(
+                                active ? "text-white" : "text-indigo-600",
+                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                              )}
+                            >
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          ) : null}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          )}
+        </Listbox>
+        <Button
+          className="inline ml-1"
+          color="secondary"
+          onClick={() => {
+            console.log(selectedRecipient);
+            const signatureField = {
+              id: -1,
+              page: 0,
+              type: FieldType.SIGNATURE,
+              positionX: 0,
+              positionY: 0,
+              Recipient: selectedRecipient,
+            };
+
+            upsertField(props?.document, signatureField).then((res) => {
+              setFields(fields.concat(res));
+            });
+          }}
+        >
+          <span
+            className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
+            style={{
+              background: stc(selectedRecipient?.email),
+            }}
+          />
+          Add Signature Field
+        </Button>
+        <Button color="secondary" className="inline ml-1" disabled>
+          <span
+            className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
+            style={{
+              background: stc(selectedRecipient?.email),
+            }}
+          />
+          Add Date Field
+        </Button>
+        <Button color="secondary" className="inline ml-1" disabled>
+          <span
+            className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
+            style={{
+              background: stc(selectedRecipient?.email),
+            }}
+          />
+          Add Text Field
+        </Button>
+      </div>
       <PDFViewer
         document={props.document}
         fields={fields}

apps/web/pages/api/documents/[id]/fields/index.ts

@@ -30,6 +30,7 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
 
   const fields = await prisma.field.findMany({
     where: { documentId: +documentId },
+    include: { Recipient: true },
   });
 
   return res.status(200).end(JSON.stringify(fields));
@@ -44,6 +45,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     page: number;
     positionX: number;
     positionY: number;
+    Recipient: { id: number };
   } = req.body;
 
   if (!user) return;
@@ -69,6 +71,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       page: +body.page,
       positionX: +body.positionX,
       positionY: +body.positionY,
+      recipientId: body.Recipient.id,
     },
     create: {
       documentId: +documentId,
@@ -76,6 +79,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       page: +body.page,
       positionX: +body.positionX,
       positionY: +body.positionY,
+      // todo refactor only one type of recipientId
+      recipientId: body.Recipient.id,
+    },
+    include: {
+      Recipient: true,
     },
   });
 

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

@@ -9,6 +9,7 @@ import { DocumentStatus } from "@prisma/client";
 import {
   InformationCircleIcon,
   PaperAirplaneIcon,
+  UserPlusIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
@@ -66,7 +67,6 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
             <Button
               icon={PaperAirplaneIcon}
-              disabled={(props?.document?.Recipient?.length || 0) === 0}
               className="ml-3"
               href={
                 NEXT_PUBLIC_WEBAPP_URL +

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

@@ -8,6 +8,7 @@ import {
   CheckIcon,
   EnvelopeIcon,
   PaperAirplaneIcon,
+  PencilSquareIcon,
   UserPlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
@@ -62,6 +63,14 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
             </h2>
           </div>
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
+            <Button
+              icon={PencilSquareIcon}
+              color="secondary"
+              className="mr-2"
+              href={breadcrumbItems[1].href}
+            >
+              Customize Document
+            </Button>
             <Button
               className="min-w-[125px]"
               color="primary"