sending dialog

apps/web/pages/documents/[id]/recipients.tsx

@@ -1,11 +1,12 @@
 import Head from "next/head";
-import { ReactElement, useState } from "react";
+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 {
   CheckBadgeIcon,
   CheckIcon,
+  EnvelopeIcon,
   PaperAirplaneIcon,
   UserPlusIcon,
   XMarkIcon,
@@ -15,6 +16,7 @@ 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";
+import { Dialog, Transition } from "@headlessui/react";
 
 const RecipientsPage: NextPageWithLayout = (props: any) => {
   const title: string =
@@ -40,6 +42,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
 
   const [signers, setSigners] = useState(props?.document?.Recipient);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  const cancelButtonRef = useRef(null);
 
   return (
     <>
@@ -62,9 +67,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
               icon={PaperAirplaneIcon}
               onClick={() => {
                 setLoading(true);
-                send(props.document).finally(() => {
-                  setLoading(false);
-                });
+                setOpen(true);
               }}
               disabled={
                 (signers.length || 0) === 0 ||
@@ -108,7 +111,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                       type="email"
                       name="email"
                       value={item.email}
-                      disabled={item.sendStatus === "SENT"}
+                      disabled={item.sendStatus === "SENT" || loading}
                       onChange={(e) => {
                         const updatedSigners = [...signers];
                         updatedSigners[index].email = e.target.value;
@@ -141,7 +144,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                       type="email"
                       name="name"
                       value={item.name}
-                      disabled={item.sendStatus === "SENT"}
+                      disabled={item.sendStatus === "SENT" || loading}
                       onChange={(e) => {
                         const updatedSigners = [...signers];
                         updatedSigners[index].name = e.target.value;
@@ -217,7 +220,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                   <div className="ml-auto flex">
                     <IconButton
                       icon={XMarkIcon}
-                      disabled={!item.id || item.sendStatus === "SENT"}
+                      disabled={
+                        !item.id || item.sendStatus === "SENT" || loading
+                      }
                       onClick={() => {
                         const signersWithoutIndex = [...signers];
                         const removedItem = signersWithoutIndex.splice(
@@ -254,6 +259,86 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
           </Button>
         </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>
     </>
   );
 };