import { ReactElement, useRef, useState } from "react"; import Head from "next/head"; import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib"; import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api"; import { getDocument } from "@documenso/lib/query"; import { getUserFromToken } from "@documenso/lib/server"; import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui"; import Layout from "../../../components/layout"; import { NextPageWithLayout } from "../../_app"; import { ArrowDownTrayIcon, CheckBadgeIcon, CheckIcon, EnvelopeIcon, PaperAirplaneIcon, PencilSquareIcon, TrashIcon, UserPlusIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { DocumentStatus, Document as PrismaDocument, Recipient } from "@prisma/client"; import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form"; import { toast } from "react-hot-toast"; import { useSubscription } from "@documenso/lib/stripe"; export type FormValues = { signers: Array>; }; type FormSigner = FormValues["signers"][number]; const RecipientsPage: NextPageWithLayout = (props: any) => { const { hasSubscription } = useSubscription(); const title: string = `"` + props?.document?.title + `"` + "Recipients | Documenso"; const breadcrumbItems = [ { title: "Documents", href: "/documents", }, { title: props.document.title, href: props.document.status !== DocumentStatus.COMPLETED ? NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id : NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients", }, { title: "Recipients", href: NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients", }, ]; const [loading, setLoading] = useState(false); const [open, setOpen] = useState(false); const form = useForm({ defaultValues: { signers: props?.document?.Recipient }, }); const { register, trigger, control, formState: { errors }, } = form; const { fields, append, remove } = useFieldArray({ keyName: "dieldArrayId", name: "signers", control, }); const formValues = useWatch({ control, name: "signers" }); const cancelButtonRef = useRef(null); const hasEmailError = (formValue: FormSigner): boolean => { const index = formValues.findIndex((e) => e.id === formValue.id); return !!errors?.signers?.[index]?.email; }; return ( <> {title}

{props.document.title}

{props.document.status !== DocumentStatus.COMPLETED && ( <> )}

Signers

{props.document.status !== DocumentStatus.COMPLETED ? "The people who will sign the document." : "The people who signed the document."}

{ trigger(); }}>
    {fields.map((item, index) => (
  • { if (!errors?.signers?.[index]) createOrUpdateRecipient({ ...formValues[index], documentId: props.document.id, }); }} onKeyDown={(event: any) => { if (event.key === "Enter") if (!errors?.signers?.[index]) createOrUpdateRecipient({ ...formValues[index], documentId: props.document.id, }); }} className="block w-full border-0 bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm" /> {errors?.signers?.[index] ? (

    Invalid Email

    ) : ( "" )}
    { if (!errors?.signers?.[index]) createOrUpdateRecipient({ ...formValues[index], documentId: props.document.id, }); }} onKeyDown={(event: any) => { if (event.key === "Enter" && !errors?.signers?.[index]) createOrUpdateRecipient({ ...formValues[index], documentId: props.document.id, }); }} className="block w-full border-0 bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm" />
    {item.sendStatus === "NOT_SENT" ? ( Not Sent ) : null} {item.sendStatus === "SENT" && item.readStatus !== "OPENED" ? ( Sent ) : null} {item.readStatus === "OPENED" && item.signingStatus === "NOT_SIGNED" ? ( Seen ) : null} {item.signingStatus === "SIGNED" ? ( Signed ) : null}
    {props.document.status !== DocumentStatus.COMPLETED && (
    { event.preventDefault(); event.stopPropagation(); if (confirm("Resend this signing request?")) { setLoading(true); sendSigningRequests(props.document, [item.id]).finally(() => { setLoading(false); }); } }} className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400" /> { event.preventDefault(); event.stopPropagation(); if (confirm("Delete this signing request?")) { const removedItem = { ...fields }[index]; remove(index); deleteRecipient(item)?.catch((err) => { append(removedItem); }); } }} className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400" />
    )}
    • ))}
{props.document.status !== "COMPLETED" && ( )}