import Head from "next/head"; import { Fragment, ReactElement, useRef, useState } from "react"; import Layout from "../../../components/layout"; import { NextPageWithLayout } from "../../_app"; import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib"; import { ArrowDownTrayIcon, CheckBadgeIcon, CheckIcon, EnvelopeIcon, PaperAirplaneIcon, PencilSquareIcon, TrashIcon, UserPlusIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { getUserFromToken } from "@documenso/lib/server"; import { getDocument } from "@documenso/lib/query"; import { Document as PrismaDocument } from "@prisma/client"; import { Breadcrumb, Button, IconButton } from "@documenso/ui"; import { Dialog, Transition } from "@headlessui/react"; import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests, } from "@documenso/lib/api"; import { FormProvider, useFieldArray, useForm, useWatch, } from "react-hook-form"; type FormValues = { signers: { id: number; email: string; name: string }[]; }; const RecipientsPage: NextPageWithLayout = (props: any) => { const title: string = `"` + props?.document?.title + `"` + "Recipients | Documenso"; const breadcrumbItems = [ { title: "Documents", href: "/documents", }, { title: props.document.title, href: NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id, }, { 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: any): boolean => { const index = formValues.findIndex((e) => e.id === formValue.id); return !!errors?.signers?.[index]?.email; }; return ( <> {title}

{props.document.title}

Signers

The people who will sign the document.

{ trigger(); }} >
    {fields.map((item: any, index: number) => (
  • { 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 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit" placeholder="john.dorian@loremipsum.com" /> {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 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit" placeholder="John Dorian" />
    {item.sendStatus === "NOT_SENT" ? ( Not Sent ) : ( "" )} {item.sendStatus === "SENT" && item.readStatus !== "OPENED" ? ( {" "} Sent ) : ( "" )} {item.readStatus === "OPENED" && item.signingStatus === "NOT_SIGNED" ? ( Seen ) : ( "" )} {item.signingStatus === "SIGNED" ? ( Signed ) : ( "" )}
    { if (confirm("Resend this signing request?")) { setLoading(true); sendSigningRequests(props.document, [ item.id, ]).finally(() => { setLoading(false); }); } }} > Resend { const removedItem = { ...fields }[index]; remove(index); deleteRecipient(item)?.catch((err) => { append(removedItem); }); }} className="group-hover:text-neon-dark group-hover:disabled:text-gray-400" />
    • ))}
Ready to send

{`"${props.document.title}" will be sent to ${ formValues.filter( (s: any) => s.email && s.sendStatus != "SENT" ).length } recipients.`}

); }; RecipientsPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export async function getServerSideProps(context: any) { const user = await getUserFromToken(context.req, context.res); if (!user) return; const { id: documentId } = context.query; const document: PrismaDocument = await getDocument( +documentId, context.req, context.res ); return { props: { document: JSON.parse(JSON.stringify({ ...document, document: "" })), }, }; } export default RecipientsPage;