Merge branch 'main' into feat/DOC-210-sign-dialog-broken-on-second-opening

This commit is contained in:
Timur Ercan
2023-04-21 15:49:40 +02:00
6 changed files with 29 additions and 13 deletions

View File

@ -45,10 +45,11 @@ export default function RecipientSelector(props: any) {
{props?.recipients.map((recipient: any) => (
<Listbox.Option
key={recipient?.id}
disabled={!recipient?.email}
className={({ active }) =>
classNames(
active ? "bg-neon-dark text-white" : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9"
"relative cursor-default select-none py-2 pl-3 pr-9 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
)
}
value={recipient}>
@ -66,7 +67,7 @@ export default function RecipientSelector(props: any) {
selected ? "font-semibold" : "font-normal",
"ml-3 block truncate"
)}>
{`${recipient?.name} <${recipient?.email}>`}
{`${recipient?.name} <${recipient?.email || 'unknown'}>`}
</span>
</div>
@ -76,7 +77,7 @@ export default function RecipientSelector(props: any) {
active ? "text-white" : "text-neon-dark",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
<CheckIcon className="h-5 w-5" strokeWidth={3} aria-hidden="true" />
</span>
) : null}
</>

View File

@ -18,13 +18,16 @@ import {
UserPlusIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { DocumentStatus, Document as PrismaDocument } from "@prisma/client";
import { DocumentStatus, Document as PrismaDocument, Recipient } from "@prisma/client";
import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
export type FormValues = {
signers: { id: number; email: string; name: string }[];
signers: Array<Pick<Recipient, 'id' | 'email' | 'name' | 'sendStatus' | 'readStatus' | 'signingStatus'>>;
};
type FormSigner = FormValues["signers"][number];
const RecipientsPage: NextPageWithLayout = (props: any) => {
const title: string = `"` + props?.document?.title + `"` + "Recipients | Documenso";
const breadcrumbItems = [
@ -63,7 +66,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
});
const formValues = useWatch({ control, name: "signers" });
const cancelButtonRef = useRef(null);
const hasEmailError = (formValue: any): boolean => {
const hasEmailError = (formValue: FormSigner): boolean => {
const index = formValues.findIndex((e) => e.id === formValue.id);
return !!errors?.signers?.[index]?.email;
};
@ -108,12 +111,14 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
color="primary"
icon={PaperAirplaneIcon}
onClick={() => {
setOpen(true);
formValues.some((r) => r.email && hasEmailError(r))
? toast.error("Please enter a valid email address.", { id: "invalid email" })
: setOpen(true);
}}
disabled={
(formValues.length || 0) === 0 ||
!formValues.some(
(r: any) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
(r) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
) ||
loading
}>
@ -138,7 +143,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
trigger();
}}>
<ul role="list" className="divide-y divide-gray-200">
{fields.map((item: any, index: number) => (
{fields.map((item, index) => (
<li
key={index}
className="group w-full border-0 px-2 py-3 hover:bg-green-50 sm:py-4">