{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); if (signers.length === 0) setSigners([{ email: "", name: "" }]); 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]; signersWithoutIndex.splice(index, 1); setSigners(signersWithoutIndex); console.log("click"); // todo save to api }} className="group-hover:text-neon-dark" >

CC

Anybody who should get a copy.

); }; async delete(recipient:any){ toast.promise( fetch("/api/documents/" + recipient.documentId + "/recipients", { method: "DELETE", headers: { "Content-Type": "application/json", }, body: JSON.stringify(recipient), }), { loading: "Deleting...", success: "Deleted.", error: "Could not delete :/", }, { id: "deleting", style: { minWidth: "200px", }, } ); } async function upsertRecipient(recipient: any) { toast.promise( fetch("/api/documents/" + recipient.documentId + "/recipients", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(recipient), }), { loading: "Saving...", success: "Saved.", error: "Could not save :/", }, { id: "saving", style: { minWidth: "200px", }, } ); } 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;