From 369b873a89645c33910034ee656e46d0daf29522 Mon Sep 17 00:00:00 2001
From: AJAL ODORA JONATHAN <43242517+ODORA0@users.noreply.github.com>
Date: Tue, 18 Jun 2024 15:41:55 +0300
Subject: [PATCH] Add Zod validation to prevent creating Bill without payment
 option

---
 .../create-edit/add-billable-service.component.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/billable-services/create-edit/add-billable-service.component.tsx b/src/billable-services/create-edit/add-billable-service.component.tsx
index b24cfb2..694d276 100644
--- a/src/billable-services/create-edit/add-billable-service.component.tsx
+++ b/src/billable-services/create-edit/add-billable-service.component.tsx
@@ -44,7 +44,9 @@ const servicePriceSchema = z.object({
   ]),
 });
 
-const paymentFormSchema = z.object({ payment: z.array(servicePriceSchema) });
+const paymentFormSchema = z.object({
+  payment: z.array(servicePriceSchema).min(1, 'At least one payment option is required'),
+});
 
 const DEFAULT_PAYMENT_OPTION = { paymentMode: '', price: 0 };
 
@@ -61,7 +63,7 @@ const AddBillableService: React.FC = () => {
     formState: { errors },
   } = useForm<any>({
     mode: 'all',
-    defaultValues: {},
+    defaultValues: { payment: [DEFAULT_PAYMENT_OPTION] },
     resolver: zodResolver(paymentFormSchema),
   });
   const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
@@ -288,7 +290,7 @@ const AddBillableService: React.FC = () => {
                 )}
               />
               <div className={styles.removeButtonContainer}>
-                <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+                <TrashCan onClick={() => handleRemovePaymentMode(index)} className={styles.removeButton} size={20} />
               </div>
             </div>
           ))}