diff options
Diffstat (limited to 'lib/po/table/sign-request-dialog.tsx')
| -rw-r--r-- | lib/po/table/sign-request-dialog.tsx | 410 |
1 files changed, 410 insertions, 0 deletions
diff --git a/lib/po/table/sign-request-dialog.tsx b/lib/po/table/sign-request-dialog.tsx new file mode 100644 index 00000000..f70e5e33 --- /dev/null +++ b/lib/po/table/sign-request-dialog.tsx @@ -0,0 +1,410 @@ +"use client" + +import { useState, useEffect } from "react" +import { z } from "zod" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { toast } from "sonner" + +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { Input } from "@/components/ui/input" +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" +import { ContractDetail } from "@/db/schema/contract" +import { getVendorContacts } from "../service" + +// Type for vendor contact +interface VendorContact { + id: number + contactName: string + contactEmail: string + contactPosition: string | null + isPrimary: boolean +} + +// Form schema for signature request +const signatureRequestSchema = z.object({ + // Requester signer information + includeRequesterSigner: z.boolean().default(true), + requesterEmail: z.string().email("Please enter a valid email address").optional(), + requesterName: z.string().min(1, "Please enter the signer's name").optional(), + requesterPosition: z.string().optional(), + + // Vendor signer information + includeVendorSigner: z.boolean().default(true), + vendorContactId: z.number().optional(), +}).refine(data => data.includeRequesterSigner || data.includeVendorSigner, { + message: "At least one signer must be included", + path: ["includeRequesterSigner"] +}).refine(data => !data.includeRequesterSigner || (data.requesterEmail && data.requesterName), { + message: "Requester email and name are required", + path: ["requesterEmail"] +}).refine(data => !data.includeVendorSigner || data.vendorContactId, { + message: "Please select a vendor contact", + path: ["vendorContactId"] +}); + +type SignatureRequestFormValues = z.infer<typeof signatureRequestSchema> + +// Interface for signing parties +interface SigningParty { + signerEmail: string; + signerName: string; + signerPosition: string; + signerType: "REQUESTER" | "VENDOR"; + vendorContactId?: number; +} + +// Updated interface to accept multiple signers +interface SignatureRequestModalProps { + contract: ContractDetail + open: boolean + onOpenChange: (open: boolean) => void + onSubmit: ( + values: { + signers: SigningParty[] + }, + contractId: number + ) => Promise<{ success: boolean; message: string } | void> +} + +export function SignatureRequestModal({ + contract, + open, + onOpenChange, + onSubmit, +}: SignatureRequestModalProps) { + const [isSubmitting, setIsSubmitting] = useState(false) + const [vendorContacts, setVendorContacts] = useState<VendorContact[]>([]) + const [selectedVendorContact, setSelectedVendorContact] = useState<VendorContact | null>(null) + + const form = useForm<SignatureRequestFormValues>({ + resolver: zodResolver(signatureRequestSchema), + defaultValues: { + includeRequesterSigner: true, + requesterEmail: "", + requesterName: "", + requesterPosition: "", + includeVendorSigner: true, + vendorContactId: undefined, + }, + }) + + // Load vendor contacts when the modal opens + useEffect(() => { + if (open && contract?.vendorId) { + const loadVendorContacts = async () => { + try { + const contacts = await getVendorContacts(contract.vendorId); + setVendorContacts(contacts); + + // Auto-select primary contact if available + const primaryContact = contacts.find(c => c.isPrimary); + if (primaryContact) { + handleVendorContactSelect(primaryContact.id.toString()); + } + } catch (error) { + console.error("Error loading vendor contacts:", error); + toast.error("Failed to load vendor contacts"); + } + }; + + loadVendorContacts(); + } + }, [open, contract]); + + // Handle selection of a vendor contact + const handleVendorContactSelect = (contactId: string) => { + const id = Number(contactId); + form.setValue("vendorContactId", id); + + // Find the selected contact to show details + const contact = vendorContacts.find(c => c.id === id); + if (contact) { + setSelectedVendorContact(contact); + } + }; + + async function handleSubmit(values: SignatureRequestFormValues) { + setIsSubmitting(true); + + try { + const signers: SigningParty[] = []; + + // Add requester signer if included + if (values.includeRequesterSigner && values.requesterEmail && values.requesterName) { + signers.push({ + signerEmail: values.requesterEmail, + signerName: values.requesterName, + signerPosition: values.requesterPosition || "", + signerType: "REQUESTER" + }); + } + + // Add vendor signer if included + if (values.includeVendorSigner && values.vendorContactId && selectedVendorContact) { + signers.push({ + signerEmail: selectedVendorContact.contactEmail, + signerName: selectedVendorContact.contactName, + signerPosition: selectedVendorContact.contactPosition || "", + vendorContactId: values.vendorContactId, + signerType: "VENDOR" + }); + } + + if (signers.length === 0) { + throw new Error("At least one signer must be included"); + } + + const result = await onSubmit({ signers }, contract.id); + + // Handle the result if it exists + if (result && typeof result === 'object') { + if (result.success) { + toast.success(result.message || "Signature requests sent successfully"); + } else { + toast.error(result.message || "Failed to send signature requests"); + } + } else { + // If no result is returned, assume success + toast.success("Electronic signature requests sent successfully"); + } + + form.reset(); + onOpenChange(false); + } catch (error) { + console.error("Error sending signature requests:", error); + toast.error(error instanceof Error ? error.message : "Failed to send signature requests. Please try again."); + } finally { + setIsSubmitting(false); + } + } + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="sm:max-w-[600px]"> + <DialogHeader> + <DialogTitle>Request Electronic Signatures</DialogTitle> + <DialogDescription> + Send signature requests for contract: {contract?.contractName || ""} + </DialogDescription> + </DialogHeader> + + <Form {...form}> + <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6"> + <Accordion type="multiple" defaultValue={["requester", "vendor"]} className="w-full"> + {/* Requester Signature Section */} + <AccordionItem value="requester"> + <div className="flex items-center space-x-2"> + <FormField + control={form.control} + name="includeRequesterSigner" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <AccordionTrigger className="hover:no-underline ml-2"> + <div className="text-sm font-medium">Requester Signature</div> + </AccordionTrigger> + </FormItem> + )} + /> + </div> + <AccordionContent> + {form.watch("includeRequesterSigner") && ( + <Card className="border-none shadow-none"> + <CardContent className="p-0 space-y-4"> + <FormField + control={form.control} + name="requesterEmail" + render={({ field }) => ( + <FormItem> + <FormLabel>Signer Email</FormLabel> + <FormControl> + <Input placeholder="email@example.com" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="requesterName" + render={({ field }) => ( + <FormItem> + <FormLabel>Signer Name</FormLabel> + <FormControl> + <Input placeholder="Full Name" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="requesterPosition" + render={({ field }) => ( + <FormItem> + <FormLabel>Signer Position</FormLabel> + <FormControl> + <Input placeholder="e.g. CEO, Manager" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </CardContent> + </Card> + )} + </AccordionContent> + </AccordionItem> + + {/* Vendor Signature Section */} + <AccordionItem value="vendor"> + <div className="flex items-center space-x-2"> + <FormField + control={form.control} + name="includeVendorSigner" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <AccordionTrigger className="hover:no-underline ml-2"> + <div className="text-sm font-medium">Vendor Signature</div> + </AccordionTrigger> + </FormItem> + )} + /> + </div> + <AccordionContent> + {form.watch("includeVendorSigner") && ( + <Card className="border-none shadow-none"> + <CardContent className="p-0 space-y-4"> + <FormField + control={form.control} + name="vendorContactId" + render={({ field }) => ( + <FormItem> + <FormLabel>Select Vendor Contact</FormLabel> + <Select + onValueChange={handleVendorContactSelect} + defaultValue={field.value?.toString()} + > + <FormControl> + <SelectTrigger> + <SelectValue placeholder="Select a contact" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {vendorContacts.length > 0 ? ( + vendorContacts.map((contact) => ( + <SelectItem + key={contact.id} + value={contact.id.toString()} + > + {contact.contactName} {contact.isPrimary ? "(Primary)" : ""} + </SelectItem> + )) + ) : ( + <SelectItem value="none" disabled> + No contacts available + </SelectItem> + )} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {/* Display selected contact info (read-only) */} + {selectedVendorContact && ( + <> + <FormItem className="pb-2"> + <FormLabel>Contact Email</FormLabel> + <div className="p-2 border rounded-md bg-muted"> + {selectedVendorContact.contactEmail} + </div> + </FormItem> + + <FormItem className="pb-2"> + <FormLabel>Contact Name</FormLabel> + <div className="p-2 border rounded-md bg-muted"> + {selectedVendorContact.contactName} + </div> + </FormItem> + + <FormItem className="pb-2"> + <FormLabel>Contact Position</FormLabel> + <div className="p-2 border rounded-md bg-muted"> + {selectedVendorContact.contactPosition || "N/A"} + </div> + </FormItem> + </> + )} + </CardContent> + </Card> + )} + </AccordionContent> + </AccordionItem> + </Accordion> + + <DialogFooter> + <Button type="button" variant="outline" onClick={() => onOpenChange(false)}> + Cancel + </Button> + <Button type="submit" disabled={isSubmitting}> + {isSubmitting ? "Sending..." : "Send Requests"} + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file |