From e640bce8eada42f939e1c7984f268d08383bb752 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 15:25:39 +0700
Subject: [PATCH] refactor(FE-208): streamline supplier change handling and
 reset purchase items in PurchaseRequestForm

---
 .../form/request/PurchaseRequestForm.tsx      | 58 ++++++++++++-------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 7496ab97..698fdcfe 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 import { useRouter } from 'next/navigation';
@@ -330,17 +330,9 @@ const PurchaseRequestForm = ({
     setSelectedPurchaseItems([]);
   };
 
-  // ===== FORM HANDLERS =====
-  const handleSupplierChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const supplier = val as OptionType | null;
-      const supplierId = Number(supplier?.value);
-
-      formik.setFieldTouched('supplier', true);
-      formik.setFieldValue('supplier', supplier);
-      formik.setFieldTouched('supplier_id', true);
-      formik.setFieldValue('supplier_id', supplierId);
-
+  // ===== UTILITY FUNCTIONS =====
+  const updateCreditTermBasedOnSupplier = useCallback(
+    (supplierId: number) => {
       if (supplierId > 0 && isResponseSuccess(supplierRawData)) {
         const supplierData = supplierRawData.data.find(
           (s: Supplier) => s.id === supplierId
@@ -356,16 +348,40 @@ const PurchaseRequestForm = ({
         formik.setFieldTouched('credit_term', false);
         formik.setFieldValue('credit_term', '');
       }
-
-      if (formik.values.items) {
-        formik.values.items.forEach((_, idx) => {
-          formik.setFieldValue(`items.${idx}.product`, null);
-          formik.setFieldValue(`items.${idx}.product_id`, 0);
-          formik.setFieldValue(`items.${idx}.qty`, 0);
-        });
-      }
     },
-    [, supplierRawData]
+    [supplierRawData]
+  );
+
+  const resetPurchaseItems = useCallback(() => {
+    if (formik.values.items) {
+      formik.values.items.forEach((_, idx) => {
+        formik.setFieldValue(`items.${idx}.product`, null);
+        formik.setFieldValue(`items.${idx}.product_id`, 0);
+        formik.setFieldValue(`items.${idx}.qty`, 0);
+      });
+    }
+  }, []);
+
+  // ===== SIDE EFFECTS =====
+  useEffect(() => {
+    if (formik.values.supplier_id) {
+      updateCreditTermBasedOnSupplier(Number(formik.values.supplier_id));
+      resetPurchaseItems();
+    }
+  }, [formik.values.supplier_id]);
+
+  // ===== FORM HANDLERS =====
+  const handleSupplierChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const supplier = val as OptionType | null;
+      const supplierId = Number(supplier?.value);
+
+      formik.setFieldTouched('supplier', true);
+      formik.setFieldValue('supplier', supplier);
+      formik.setFieldTouched('supplier_id', true);
+      formik.setFieldValue('supplier_id', supplierId);
+    },
+    []
   );
 
   const handleAreaChange = useCallback(