Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 01:01:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

sending dialog

Browse Source
This commit is contained in:
Timur Ercan
2023-02-08 16:17:55 +01:00
parent b81482abaf
commit 73cded1b4e
1 changed files with 92 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
apps/web/pages/documents/[id]/recipients.tsx
View File

@ -1,11 +1,12 @@
import Head from "next/head"; import Head from "next/head";
import { ReactElement, useState } from "react"; import { Fragment, ReactElement, useRef, useState } from "react";
import Layout from "../../../components/layout"; import Layout from "../../../components/layout";
import { NextPageWithLayout } from "../../_app"; import { NextPageWithLayout } from "../../_app";
import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib"; import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import { import {
CheckBadgeIcon, CheckBadgeIcon,
CheckIcon, CheckIcon,
EnvelopeIcon,
PaperAirplaneIcon, PaperAirplaneIcon,
UserPlusIcon, UserPlusIcon,
XMarkIcon, XMarkIcon,
@ -15,6 +16,7 @@ import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client"; import { Document as PrismaDocument } from "@prisma/client";
import { Breadcrumb, Button, IconButton } from "@documenso/ui"; import { Breadcrumb, Button, IconButton } from "@documenso/ui";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { Dialog, Transition } from "@headlessui/react";
const RecipientsPage: NextPageWithLayout = (props: any) => { const RecipientsPage: NextPageWithLayout = (props: any) => {
const title: string = const title: string =
@ -40,6 +42,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
const [signers, setSigners] = useState(props?.document?.Recipient); const [signers, setSigners] = useState(props?.document?.Recipient);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);
const cancelButtonRef = useRef(null);
return ( return (
<> <>
@ -62,9 +67,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
icon={PaperAirplaneIcon} icon={PaperAirplaneIcon}
onClick={() => { onClick={() => {
setLoading(true); setLoading(true);
send(props.document).finally(() => { setOpen(true);
setLoading(false);
});
}} }}
disabled={ disabled={
(signers.length || 0) === 0 || (signers.length || 0) === 0 ||
@ -108,7 +111,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
type="email" type="email"
name="email" name="email"
value={item.email} value={item.email}
disabled={item.sendStatus === "SENT"} disabled={item.sendStatus === "SENT" || loading}
onChange={(e) => { onChange={(e) => {
const updatedSigners = [...signers]; const updatedSigners = [...signers];
updatedSigners[index].email = e.target.value; updatedSigners[index].email = e.target.value;
@ -141,7 +144,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
type="email" type="email"
name="name" name="name"
value={item.name} value={item.name}
disabled={item.sendStatus === "SENT"} disabled={item.sendStatus === "SENT" || loading}
onChange={(e) => { onChange={(e) => {
const updatedSigners = [...signers]; const updatedSigners = [...signers];
updatedSigners[index].name = e.target.value; updatedSigners[index].name = e.target.value;
@ -217,7 +220,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
<div className="ml-auto flex"> <div className="ml-auto flex">
<IconButton <IconButton
icon={XMarkIcon} icon={XMarkIcon}
disabled={!item.id || item.sendStatus === "SENT"} disabled={
!item.id || item.sendStatus === "SENT" || loading
}
onClick={() => { onClick={() => {
const signersWithoutIndex = [...signers]; const signersWithoutIndex = [...signers];
const removedItem = signersWithoutIndex.splice( const removedItem = signersWithoutIndex.splice(
@ -254,6 +259,86 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</Button> </Button>
</div> </div>
</div> </div>
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="relative z-10"
initialFocus={cancelButtonRef}
onClose={setOpen}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<EnvelopeIcon
className="h-6 w-6 text-green-600"
aria-hidden="true"
/>
</div>
<div className="mt-3 text-center sm:mt-5">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Ready to send
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
{`"${props.document.title}" will be sent to ${
signers.filter((s: any) => s.sendStatus != "SENT")
.length
} recipients.`}
</p>
</div>
</div>
</div>
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
<Button
color="secondary"
onClick={() => setOpen(false)}
ref={cancelButtonRef}
>
Cancel
</Button>
<Button
onClick={() => {
setOpen(false);
send(props.document).finally(() => {
setLoading(false);
});
}}
>
Send
</Button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
</> </>
); );
}; };