From a9befd342cc1a198e5d705d4c4290391c949469e Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 28 Mar 2023 12:47:28 +0000
Subject: [PATCH] Use dynamic values for title and icon for dialog

---
 apps/web/pages/documents/[id]/recipients.tsx |  3 +++
 packages/ui/components/dialog/Dialog.tsx     | 15 ++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 13c681a01..38ef2c329 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -11,6 +11,7 @@ import {
   PencilSquareIcon,
   TrashIcon,
   UserPlusIcon,
+  EnvelopeIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { getUserFromToken } from "@documenso/lib/server";
@@ -329,11 +330,13 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
       </div>
 
       <Dialog
+        title="Ready to send"
         document={props.document}
         formValues={formValues}
         open={open}
         setLoading={setLoading}
         setOpen={setOpen}
+        icon={<EnvelopeIcon className="w-6 h-6 text-green-600" aria-hidden="true" />}
       />
     </>
   );
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 4d4637246..e2625d036 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -2,10 +2,13 @@ import React from "react";
 import { Transition, Dialog as DialogComponent } from "@headlessui/react";
 import { Fragment } from "react";
 import { Button } from "@documenso/ui";
-import { EnvelopeIcon } from "@heroicons/react/24/outline";
 import { sendSigningRequests } from "@documenso/lib/api";
 
-export function Dialog({ open, setOpen, document, formValues, setLoading }: any) {
+export function Dialog({ title, open, setOpen, document, formValues, setLoading, icon }: any) {
+  const unsentEmailsLength = formValues.filter(
+    (s: any) => s.email && s.sendStatus != "SENT"
+  ).length;
+
   return (
     <Transition.Root show={open} as={Fragment}>
       <DialogComponent as="div" className="relative z-10" onClose={setOpen}>
@@ -35,20 +38,18 @@ export function Dialog({ open, setOpen, document, formValues, setLoading }: any)
               <DialogComponent.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <div>
                   <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
-                    <EnvelopeIcon className="w-6 h-6 text-green-600" aria-hidden="true" />
+                    {icon}
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <DialogComponent.Title
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-900"
                     >
-                      Ready to send
+                      {title}
                     </DialogComponent.Title>
                     <div className="mt-2">
                       <p className="text-sm text-gray-500">
-                        {`"${document.title}" will be sent to ${
-                          formValues.filter((s: any) => s.email && s.sendStatus != "SENT").length
-                        } recipients.`}
+                        {`"${document.title}" will be sent to ${unsentEmailsLength} recipients.`}
                       </p>
                     </div>
                   </div>