From c757c19897642c945795a49dc5fb24c153466aa9 Mon Sep 17 00:00:00 2001
From: AJAL ODORA JONATHAN <43242517+ODORA0@users.noreply.github.com>
Date: Thu, 20 Jun 2024 11:26:53 +0300
Subject: [PATCH] Show validation to add atleast one payment

---
 .../create-edit/add-billable-service.component.tsx       | 9 +++++++++
 1 file changed, 9 insertions(+)

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 5b86c86..7985b19 100644
--- a/src/billable-services/create-edit/add-billable-service.component.tsx
+++ b/src/billable-services/create-edit/add-billable-service.component.tsx
@@ -129,6 +129,14 @@ const AddBillableService: React.FC = () => {
     );
   };
 
+  const getPaymentErrorMessage = () => {
+    const paymentError = errors.payment;
+    if (paymentError && typeof paymentError.message === 'string') {
+      return paymentError.message;
+    }
+    return null;
+  };
+
   return (
     <Form className={styles.form}>
       <h4>{t('addBillableServices', 'Add Billable Services')}</h4>
@@ -302,6 +310,7 @@ const AddBillableService: React.FC = () => {
             iconDescription="Add">
             {t('addPaymentOptions', 'Add payment option')}
           </Button>
+          {getPaymentErrorMessage() && <div className={styles.errorMessage}>{getPaymentErrorMessage()}</div>}
         </div>
       </section>