From 0ed30e184b1fc54c6031d3473eaeb6753f22f1d3 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 8 Jan 2026 09:19:55 +0700
Subject: [PATCH] feat(FE): implement alert error list in marketing module

---
 .../pages/marketing/form/MarketingForm.tsx    | 32 +++++++++++++++-
 .../delivery-order/DeliverOrderProduct.tsx    | 35 ++++++++++++++---
 .../sales-order/SalesOrderProduct.schema.ts   | 12 ++++--
 .../sales-order/SalesOrderProductForm.tsx     | 38 ++++++++++++++++---
 4 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/marketing/form/MarketingForm.tsx b/src/components/pages/marketing/form/MarketingForm.tsx
index 1c5322e1..51c20d8e 100644
--- a/src/components/pages/marketing/form/MarketingForm.tsx
+++ b/src/components/pages/marketing/form/MarketingForm.tsx
@@ -48,6 +48,8 @@ import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -217,6 +219,7 @@ const MarketingForm = ({
   const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
     'add'
   );
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [deliveryOrderValues, setDeliveryOrderValues] = useState<
     DeliveryOrderProductFormValues[]
   >(
@@ -558,11 +561,28 @@ const MarketingForm = ({
     );
   }, [memoSalesOrder]);
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      // Parse and display errors
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return; // Stop submission
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit();
+  };
+
   return (
     <>
       <form
         className='flex flex-col gap-4'
-        onSubmit={formik.handleSubmit}
+        onSubmit={handleFormSubmit}
         onReset={formik.handleReset}
       >
         <FormHeader
@@ -666,6 +686,14 @@ const MarketingForm = ({
           </div>
         </div>
 
+        {/* Error List Alert */}
+        {formErrorList.length > 0 && (
+          <AlertErrorList
+            formErrorList={formErrorList}
+            onClose={() => setFormErrorList([])}
+          />
+        )}
+
         {/* Form Actions */}
         <div className='flex flex-row items-start justify-center gap-2 mt-4'>
           <Button type='reset' color='warning' disabled={formik.isSubmitting}>
@@ -673,7 +701,7 @@ const MarketingForm = ({
           </Button>
           <Button
             type='submit'
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={formik.isSubmitting}
             isLoading={formik.isSubmitting}
           >
             Submit
diff --git a/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
index 5c81396e..84f9e443 100644
--- a/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
+++ b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
@@ -16,6 +16,8 @@ import Badge from '@/components/Badge';
 import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
 import * as Yup from 'yup';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 const DeliveryOrderProductForm = ({
   formState,
@@ -40,6 +42,8 @@ const DeliveryOrderProductForm = ({
     null
   );
   const [currentInput, setCurrentInput] = useState<string>('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
+
   const salesOrder = salesOrders.find(
     (item) => item.id === initialValues?.marketing_product_id
   );
@@ -164,15 +168,27 @@ const DeliveryOrderProductForm = ({
     }
   }, [initialValues]);
 
+  const handleValidateForm = () => {
+    formik.validateForm();
+    const formErrorList = getUniqueFormikErrors(formik.errors);
+    setFormErrorList(formErrorList);
+    if (formErrorList.length > 0) {
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleBlurField(currentInput);
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   return (
     <>
       <form
         className='size-full'
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleBlurField(currentInput);
-          formik.handleSubmit(e);
-        }}
+        onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
         {formikErrorMessage && (
@@ -372,6 +388,13 @@ const DeliveryOrderProductForm = ({
           />
         </div>
 
+        {formErrorList.length > 0 && (
+          <AlertErrorList
+            formErrorList={formErrorList}
+            onClose={() => setFormErrorList([])}
+          />
+        )}
+
         <div className='flex flex-row justify-end gap-3 mt-4'>
           <Button type='reset' color='warning'>
             Reset
@@ -379,7 +402,7 @@ const DeliveryOrderProductForm = ({
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={formik.isSubmitting}
           >
             Submit
           </Button>
diff --git a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
index b2f42254..e62ed701 100644
--- a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
+++ b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
@@ -25,15 +25,19 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
     id: Yup.number(),
     vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
     kandang: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
+      value: Yup.number()
+        .min(1, 'Kandang wajib diisi!')
+        .required('Kandang wajib diisi!'),
+      label: Yup.string().required('Kandang wajib diisi!'),
     }).nullable(),
     kandang_id: Yup.number()
       .min(1, 'Kandang wajib diisi!')
       .required('Kandang wajib diisi!'),
     product_warehouse: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
+      value: Yup.number()
+        .min(1, 'Produk wajib diisi!')
+        .required('Produk wajib diisi!'),
+      label: Yup.string().required('Produk wajib diisi!'),
     }).nullable(),
     product_warehouse_id: Yup.number()
       .min(1, 'Produk wajib diisi!')
diff --git a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
index 1a61867f..97f7cb87 100644
--- a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
+++ b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
@@ -24,6 +24,8 @@ import {
 } from '@/lib/helper';
 import PatternInput from '@/components/input/PatternInput';
 import Alert from '@/components/Alert';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 const SalesOrderProductForm = ({
   initialValues,
@@ -37,6 +39,7 @@ const SalesOrderProductForm = ({
 }) => {
   const [formErrorMessage, setFormErrorMessage] = useState('');
   const [currentInput, setCurrentInput] = useState<string>('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ============ Formik ============
   const formik = useFormik<SalesOrderProductFormValues>({
@@ -169,15 +172,29 @@ const SalesOrderProductForm = ({
     }
   };
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      // Parse and display errors
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return; // Stop submission
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleBlurField(currentInput);
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   return (
     <>
       <form
         className='size-full'
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleBlurField(currentInput);
-          formik.handleSubmit(e);
-        }}
+        onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
         {formErrorMessage && (
@@ -338,6 +355,15 @@ const SalesOrderProductForm = ({
             placeholder='Masukan Total Penjualan'
           />
         </div>
+
+        {/* Error List Alert */}
+        {formErrorList.length > 0 && (
+          <AlertErrorList
+            formErrorList={formErrorList}
+            onClose={() => setFormErrorList([])}
+          />
+        )}
+
         <div className='flex flex-row justify-end gap-3 mt-4'>
           <Button type='reset' color='warning' onClick={handleResetForm}>
             Reset
@@ -345,7 +371,7 @@ const SalesOrderProductForm = ({
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={formik.isSubmitting}
           >
             Submit
           </Button>