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

Use dynamic values for title and icon for dialog

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-03-28 12:47:28 +00:00
parent 16f6da01c0
commit a9befd342c
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import {
PencilSquareIcon, PencilSquareIcon,
TrashIcon, TrashIcon,
UserPlusIcon, UserPlusIcon,
EnvelopeIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { getUserFromToken } from "@documenso/lib/server"; import { getUserFromToken } from "@documenso/lib/server";
@ -329,11 +330,13 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</div> </div>
<Dialog <Dialog
title="Ready to send"
document={props.document} document={props.document}
formValues={formValues} formValues={formValues}
open={open} open={open}
setLoading={setLoading} setLoading={setLoading}
setOpen={setOpen} setOpen={setOpen}
icon={<EnvelopeIcon className="w-6 h-6 text-green-600" aria-hidden="true" />}
/> />
</> </>
); );

15
packages/ui/components/dialog/Dialog.tsx
View File

@ -2,10 +2,13 @@ import React from "react";
import { Transition, Dialog as DialogComponent } from "@headlessui/react"; import { Transition, Dialog as DialogComponent } from "@headlessui/react";
import { Fragment } from "react"; import { Fragment } from "react";
import { Button } from "@documenso/ui"; import { Button } from "@documenso/ui";
import { EnvelopeIcon } from "@heroicons/react/24/outline";
import { sendSigningRequests } from "@documenso/lib/api"; 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 ( return (
<Transition.Root show={open} as={Fragment}> <Transition.Root show={open} as={Fragment}>
<DialogComponent as="div" className="relative z-10" onClose={setOpen}> <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"> <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>
<div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full"> <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>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-3 text-center sm:mt-5">
<DialogComponent.Title <DialogComponent.Title
as="h3" as="h3"
className="text-lg font-medium leading-6 text-gray-900" className="text-lg font-medium leading-6 text-gray-900"
> >
Ready to send {title}
</DialogComponent.Title> </DialogComponent.Title>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
{`"${document.title}" will be sent to ${ {`"${document.title}" will be sent to ${unsentEmailsLength} recipients.`}
formValues.filter((s: any) => s.email && s.sendStatus != "SENT").length
} recipients.`}
</p> </p>
</div> </div>
</div> </div>