{title}

import Head from "next/head"; import { ReactElement, useState } from "react"; import Layout from "../../../components/layout"; import { NextPageWithLayout } from "../../_app"; import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib"; import { PaperAirplaneIcon, TrashIcon, UserCircleIcon, 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 toast from "react-hot-toast"; 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 [signers, setSigners] = useState(props?.document?.Recipient); return ( <> {title}

{props.document.title}

Signers

The people who will sign the document.

Email { const updatedSigners = [...signers]; updatedSigners[index].email = e.target.value; setSigners(updatedSigners); }} onBlur={() => { item.documentId = props.document.id; upsertRecipient(item); }} onKeyDown={(event: any) => { if (event.key === "Enter") upsertRecipient(item); }} 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" />

Name (optional) { const updatedSigners = [...signers]; updatedSigners[index].name = e.target.value; setSigners(updatedSigners); }} onBlur={() => { item.documentId = props.document.id; upsertRecipient(item); }} onKeyDown={(event: any) => { if (event.key === "Enter") upsertRecipient(item); }} className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit" placeholder="John Dorian" />

{ const signersWithoutIndex = [...signers]; const removedItem = signersWithoutIndex.splice( index, 1 ); setSigners(signersWithoutIndex); deleteRecipient(item).catch((err) => { setSigners(signersWithoutIndex.concat(removedItem)); }); }} className="group-hover:text-neon-dark group-hover:disabled:text-gray-400" >

); }; async function deleteRecipient(recipient: any) { if (!recipient.id) { return; } return toast.promise( fetch( "/api/documents/" + recipient.documentId + "/recipients/" + recipient.id, { method: "DELETE", headers: { "Content-Type": "application/json", }, body: JSON.stringify(recipient), } ), { loading: "Deleting...", success: "Deleted.", error: "Could not delete :/", }, { id: "delete", style: { minWidth: "200px", }, } ); } async function upsertRecipient(recipient: any): Promise { try { const created = await toast.promise( fetch("/api/documents/" + recipient.documentId + "/recipients", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(recipient), }).then((res) => { if (!res.ok) { throw new Error(res.status.toString()); } return res.json(); }), { loading: "Saving...", success: "Saved.", error: "Could not save :/", }, { id: "saving", style: { minWidth: "200px", }, } ); return created; } catch (error) {} } 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: document, }, }; } export default RecipientsPage;