<iman>update pengajuan tempo request

1 files changed, 591 insertions, 142 deletions

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 000f209c..cfc8aeb5 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -4,6 +4,8 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import odooApi from '~/libs/odooApi';
 import stateApi from '@/lib/address/api/stateApi.js';
 import cityApi from '@/lib/address/api/cityApi';
+import districtApi from '@/lib/address/api/districtApi';
+import subDistrictApi from '@/lib/address/api/subDistrictApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import {
   usePengajuanTempoStorePengiriman,
@@ -20,10 +22,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validatePengiriman,
     updateFormPengiriman,
   } = usePengajuanTempoStorePengiriman();
-  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
+  const { form } = usePengajuanTempoStore();
   const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [zips, setZips] = useState([]);
   const [citiesInvoice, setCitiesInvoice] = useState([]);
+  const [districtsInvoice, setDistrictsInvoice] = useState([]);
+  const [subDistrictsInvoice, setSubDistrictsInvoice] = useState([]);
+  const [zipsInvoice, setZipsInvoice] = useState([]);
   const [sameAddress, setSameAddress] = useState(false);
   const [sameAddressStreet, setSameAddressStreet] = useState(false);
   const [everyWeekday, setEveryWeekday] = useState(false);
@@ -104,6 +112,10 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const watchState = watch('statePengiriman');
   useEffect(() => {
     // updateFormPengiriman('cityPengiriman', '');
+    // setValue('cityPengiriman', '');
+    // setValue('districtPengiriman', '');
+    // setValue('subDistrictPengiriman', '');
+    // setValue('zipPengiriman', '');
     if (watchState) {
       updateFormPengiriman('statePengiriman', `${watchState}`);
       validatePengiriman();
@@ -120,16 +132,86 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   }, [watchState]);
 
   const watchCity = watch('cityPengiriman');
+
   useEffect(() => {
     if (watchCity) {
       updateFormPengiriman('cityPengiriman', `${watchCity}`);
       validatePengiriman();
+      const loadDistricts = async () => {
+        let dataDistricts = await districtApi({ cityId: watchCity });
+        dataDistricts = dataDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setDistricts(dataDistricts);
+      };
+      loadDistricts();
+    }
+  }, [watchCity, setValue]);
+
+  const watchDistrict = watch('districtPengiriman');
+  useEffect(() => {
+    // setValue('subDistrictPengiriman', '');
+    if (watchDistrict) {
+      updateFormPengiriman('districtPengiriman', `${watchDistrict}`);
+      validatePengiriman();
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await subDistrictApi({
+          districtId: watchDistrict,
+        });
+        dataSubDistricts = dataSubDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setSubDistricts(dataSubDistricts);
+      };
+      loadSubDistricts();
+    }
+  }, [watchDistrict, setValue]);
+
+  const watchsubDistrict = watch('subDistrictPengiriman');
+
+  useEffect(() => {
+    let kelurahan = '';
+
+    if (watchsubDistrict) {
+      updateFormPengiriman('subDistrictPengiriman', `${watchsubDistrict}`);
+      validatePengiriman();
+      for (const data in subDistricts) {
+        if (subDistricts[data].value == watchsubDistrict) {
+          kelurahan = subDistricts[data].label.toLowerCase();
+        }
+      }
+      const loadZip = async () => {
+        const response = await fetch(
+          `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+        );
+
+        const result = await response.json();
+        const dataZips = result.result.map((zip) => ({
+          value: parseInt(zip.kodepos),
+          label: zip.kodepos,
+        }));
+        setZips(dataZips);
+      };
+      loadZip();
     }
-  }, [watchCity]);
+  }, [watchsubDistrict, setValue, subDistricts]);
+
+  const watchZip = watch('zipPengiriman');
+  useEffect(() => {
+    if (watchZip) {
+      updateFormPengiriman('zipPengiriman', `${watchZip}`);
+      validatePengiriman();
+    }
+  }, [watchZip, setValue]);
 
   const watchStateInvoice = watch('stateInvoice');
   useEffect(() => {
-    // updateFormPengiriman('cityPengiriman', '');
+    // setValue('cityInvoice', '');
+    // setValue('districtInvoice', '');
+    // setValue('subDistrictInvoice', '');
+    // setValue('zipInvoice', '');
     if (watchStateInvoice) {
       updateFormPengiriman('stateInvoice', `${watchStateInvoice}`);
       validatePengiriman();
@@ -150,9 +232,75 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     if (watchCityInvoice) {
       updateFormPengiriman('cityInvoice', `${watchCityInvoice}`);
       validatePengiriman();
+      const loadDistricts = async () => {
+        let dataDistricts = await districtApi({ cityId: watchCityInvoice });
+        dataDistricts = dataDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setDistrictsInvoice(dataDistricts);
+      };
+      loadDistricts();
     }
   }, [watchCityInvoice]);
 
+  const watchDistrictInvoice = watch('districtInvoice');
+  useEffect(() => {
+    // setValue('subDistrictInvoice', '');
+    if (watchDistrictInvoice) {
+      updateFormPengiriman('districtInvoice', `${watchDistrictInvoice}`);
+      validatePengiriman();
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await subDistrictApi({
+          districtId: watchDistrictInvoice,
+        });
+        dataSubDistricts = dataSubDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setSubDistrictsInvoice(dataSubDistricts);
+      };
+      loadSubDistricts();
+    }
+  }, [watchDistrictInvoice, setValue]);
+
+  const watchsubDistrictInvoice = watch('subDistrictInvoice');
+
+  useEffect(() => {
+    let kelurahan = '';
+
+    if (watchsubDistrictInvoice) {
+      updateFormPengiriman('subDistrictInvoice', `${watchsubDistrictInvoice}`);
+      validatePengiriman();
+      for (const data in subDistrictsInvoice) {
+        if (subDistrictsInvoice[data].value == watchsubDistrictInvoice) {
+          kelurahan = subDistrictsInvoice[data].label.toLowerCase();
+        }
+      }
+      const loadZip = async () => {
+        const response = await fetch(
+          `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+        );
+
+        const result = await response.json();
+        const dataZips = result.result.map((zip) => ({
+          value: parseInt(zip.kodepos),
+          label: zip.kodepos,
+        }));
+        setZipsInvoice(dataZips);
+      };
+      loadZip();
+    }
+  }, [watchsubDistrictInvoice, setValue, subDistrictsInvoice]);
+
+  const watchZipInvoice = watch('zipInvoice');
+  useEffect(() => {
+    if (watchZipInvoice) {
+      updateFormPengiriman('zipInvoice', `${watchZipInvoice}`);
+      validatePengiriman();
+    }
+  }, [watchZipInvoice, setValue]);
+
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     updateFormPengiriman(name, value);
@@ -208,11 +356,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const streetPengirimanRef = useRef(null);
   const statePengirimanRef = useRef(null);
   const cityPengirimanRef = useRef(null);
+  const districtPengirimanRef = useRef(null);
+  const subDistrictPengirimanRef = useRef(null);
   const zipRef = useRef(null);
   const invoicePicRef = useRef(null);
   const streetInvoiceRef = useRef(null);
   const stateInvoiceRef = useRef(null);
   const cityInvoiceRef = useRef(null);
+  const districtInvoiceRef = useRef(null);
+  const subDistrictInvoiceRef = useRef(null);
+  const zipInvoiceRef = useRef(null);
   const everyWeekdayInputRef = useRef(null);
   const everyWeekInputRef = useRef(null);
   const dokumenPengirimanRef = useRef(null);
@@ -243,6 +396,20 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           cityPengirimanRef.current.scrollIntoView(options);
           return;
         }
+        if (
+          errorsPengiriman.districtsPengiriman &&
+          districtPengirimanRef.current
+        ) {
+          districtPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.subDistrictsPengiriman &&
+          subDistrictPengirimanRef.current
+        ) {
+          subDistrictPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
         if (errorsPengiriman.zip && zipRef.current) {
           zipRef.current.scrollIntoView(options);
           return;
@@ -263,6 +430,21 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           cityInvoiceRef.current.scrollIntoView(options);
           return;
         }
+        if (errorsPengiriman.districtsInvoice && districtInvoiceRef.current) {
+          districtInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.subDistrictsInvoice &&
+          subDistrictInvoiceRef.current
+        ) {
+          subDistrictInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.zipInvoice && zipInvoiceRef.current) {
+          zipInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
         if (
           errorsPengiriman.everyWeekdayInput &&
           everyWeekdayInputRef.current
@@ -312,6 +494,8 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     if (formPengiriman.isSameAddreesStreet == 'true') {
       setSameAddressStreet(true);
+    } else {
+      setSameAddressStreet(false);
     }
   }, [formPengiriman.isSameAddreesStreet]);
   useEffect(() => {
@@ -361,14 +545,53 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   //   }
   //   validatePengiriman();
   // }, [formPengiriman.isSameAddrees, formPengiriman.isSameAddreesStreet]);
+
+  useEffect(() => {
+    if (sameAddressStreet) {
+      updateFormPengiriman('streetPengiriman', form.street);
+      updateFormPengiriman('statePengiriman', form.state);
+      setValue('statePengiriman', parseInt(form.state));
+      updateFormPengiriman('cityPengiriman', form.city);
+      setValue('cityPengiriman', parseInt(form.city));
+      updateFormPengiriman('districtPengiriman', form.district);
+      setValue('districtPengiriman', parseInt(form.district));
+      updateFormPengiriman('subDistrictPengiriman', form.subDistrict);
+      setValue('subDistrictPengiriman', parseInt(form.subDistrict));
+      updateFormPengiriman('zipPengiriman', form.zip);
+      setValue('zipPengiriman', parseInt(form.zip));
+    }
+    // else {
+    //   updateFormPengiriman('streetPengiriman', '');
+    //   updateFormPengiriman('statePengiriman', '');
+    //   updateFormPengiriman('cityPengiriman', '');
+    //   updateFormPengiriman('zipPengiriman', '');
+    //   setValue('streetPengiriman', '');
+    //   setValue('statePengiriman', '');
+    //   setValue('cityPengiriman', '');
+    // }
+    validatePengiriman();
+  }, [
+    sameAddressStreet,
+    form.state,
+    form.city,
+    form.district,
+    form.subDistrict,
+    form.zip,
+  ]);
+
   useEffect(() => {
     if (sameAddress) {
-      updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
-      updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
-      setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
-      updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
-      setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
-      updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+      updateFormPengiriman('streetInvoice', form.street);
+      updateFormPengiriman('stateInvoice', form.state);
+      setValue('stateInvoice', parseInt(form.state));
+      updateFormPengiriman('cityInvoice', form.city);
+      setValue('cityInvoice', parseInt(form.city));
+      updateFormPengiriman('districtInvoice', form.district);
+      setValue('districtInvoice', parseInt(form.district));
+      updateFormPengiriman('subDistrictInvoice', form.subDistrict);
+      setValue('subDistrictInvoice', parseInt(form.subDistrict));
+      updateFormPengiriman('zipInvoice', form.zip);
+      setValue('zipInvoice', parseInt(form.zip));
     } else {
       // updateFormPengiriman('streetInvoice', '');
       // updateFormPengiriman('stateInvoice', '');
@@ -380,40 +603,44 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validatePengiriman();
   }, [
     sameAddress,
-    formPengiriman.streetPengiriman,
-    formPengiriman.statePengiriman,
-    formPengiriman.cityPengiriman,
+    form.street,
+    form.state,
+    form.city,
+    form.district,
+    form.subDistrict,
   ]);
 
-  useEffect(() => {
-    if (sameAddress) {
-      updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
-      updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
-      setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
-      updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
-      setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
-      updateFormPengiriman('isSameAddrees', `${sameAddress}`);
-    } else {
-      // updateFormPengiriman('stateInvoice', formPengiriman.stateInvoice);
-      // setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
-      // updateFormPengiriman('cityInvoice', formPengiriman.cityInvoice);
-      // setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
-    }
-    validatePengiriman();
-  }, [
-    sameAddress,
-    formPengiriman.streetPengiriman,
-    formPengiriman.statePengiriman,
-    formPengiriman.cityPengiriman,
-  ]);
+  // useEffect(() => {
+  //   if (sameAddress) {
+  //     updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
+  //     updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
+  //     setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
+  //     updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
+  //     setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
+
+  //     updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+  //   } else {
+  //     // updateFormPengiriman('stateInvoice', formPengiriman.stateInvoice);
+  //     // setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
+  //     // updateFormPengiriman('cityInvoice', formPengiriman.cityInvoice);
+  //     // setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
+  //   }
+  //   validatePengiriman();
+  // }, [
+  //   sameAddress,
+  //   formPengiriman.streetPengiriman,
+  //   formPengiriman.statePengiriman,
+  //   formPengiriman.cityPengiriman,
+  // ]);
+
+  // useEffect(() => {
+  //   if (formPengiriman.sameAddressStreet?.toLowerCase().includes('true')) {
+  //     setSameAddressStreet(true);
+  //   } else {
+  //     setSameAddressStreet(false);
+  //   }
+  // }, [formPengiriman.sameAddressStreet]);
 
-  useEffect(() => {
-    if (formPengiriman.sameAddressStreet?.toLowerCase().includes('true')) {
-      setSameAddressStreet(true);
-    } else {
-      setSameAddressStreet(false);
-    }
-  }, [formPengiriman.sameAddressStreet]);
   useEffect(() => {
     if (formPengiriman.statePengiriman) {
       setValue('statePengiriman', parseInt(formPengiriman.statePengiriman));
@@ -425,6 +652,27 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     }
   }, [formPengiriman.cityPengiriman]);
   useEffect(() => {
+    if (formPengiriman.districtPengiriman) {
+      setValue(
+        'districtPengiriman',
+        parseInt(formPengiriman.districtPengiriman)
+      );
+    }
+  }, [formPengiriman.districtPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.subDistrictPengiriman) {
+      setValue(
+        'subDistrictPengiriman',
+        parseInt(formPengiriman.subDistrictPengiriman)
+      );
+    }
+  }, [formPengiriman.subDistrictPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.zipPengiriman) {
+      setValue('zipPengiriman', parseInt(formPengiriman.zipPengiriman));
+    }
+  }, [formPengiriman.zipPengiriman]);
+  useEffect(() => {
     if (formPengiriman.stateInvoice) {
       setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
     }
@@ -434,28 +682,24 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
     }
   }, [formPengiriman.cityInvoice]);
-
   useEffect(() => {
-    if (sameAddressStreet) {
-      updateFormPengiriman('streetPengiriman', form.street);
-      updateFormPengiriman('statePengiriman', form.state);
-      setValue('statePengiriman', parseInt(form.state));
-      updateFormPengiriman('cityPengiriman', form.city);
-      setValue('cityPengiriman', parseInt(form.city));
-      updateFormPengiriman('zipPengiriman', form.zip);
-      updateFormPengiriman('isSameAddreesStreet', `${sameAddressStreet}`);
+    if (formPengiriman.districtInvoice) {
+      setValue('districtInvoice', parseInt(formPengiriman.districtInvoice));
     }
-    // else {
-    //   updateFormPengiriman('streetPengiriman', '');
-    //   updateFormPengiriman('statePengiriman', '');
-    //   updateFormPengiriman('cityPengiriman', '');
-    //   updateFormPengiriman('zipPengiriman', '');
-    //   setValue('streetPengiriman', '');
-    //   setValue('statePengiriman', '');
-    //   setValue('cityPengiriman', '');
-    // }
-    validatePengiriman();
-  }, [sameAddressStreet]);
+  }, [formPengiriman.districtInvoice]);
+  useEffect(() => {
+    if (formPengiriman.subDistrictInvoice) {
+      setValue(
+        'subDistrictInvoice',
+        parseInt(formPengiriman.subDistrictInvoice)
+      );
+    }
+  }, [formPengiriman.subDistrictInvoice]);
+  useEffect(() => {
+    if (formPengiriman.zipInvoice) {
+      setValue('zipInvoice', parseInt(formPengiriman.zipInvoice));
+    }
+  }, [formPengiriman.zipInvoice]);
 
   const getFromLocalStorage = (key) => {
     const itemStr = localStorage.getItem(key);
@@ -531,75 +775,28 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const handleChangeSameAddress = () => {
     // setSameAddress(!sameAddress);
     // if (sameAddress) {
-    //   console.log('sameAddress adalah', sameAddress);
     //   updateFormPengiriman('sameAddress', `true`);
     // } else {
-    //   console.log('sameAddress merupakan', sameAddress);
     // }
     updateFormPengiriman('isSameAddrees', `${!sameAddress}`);
-    validate();
+    validatePengiriman();
   };
   const handleChangeSameAddressStreet = () => {
     // updateFormPengiriman('sameAddressStreet', `${!sameAddressStreet}`);
     // setSameAddressStreet(!sameAddressStreet);
-    if (sameAddressStreet == false) {
-      updateFormPengiriman('streetPengiriman', '');
-      updateFormPengiriman('statePengiriman', '');
-      updateFormPengiriman('cityPengiriman', '');
-      updateFormPengiriman('zipPengiriman', '');
-      setValue('streetPengiriman', '');
-      setValue('statePengiriman', '');
-      setValue('cityPengiriman', '');
-    }
+    // if (sameAddressStreet == false) {
+    //   updateFormPengiriman('streetPengiriman', '');
+    //   updateFormPengiriman('statePengiriman', '');
+    //   updateFormPengiriman('cityPengiriman', '');
+    //   updateFormPengiriman('zipPengiriman', '');
+    //   setValue('streetPengiriman', '');
+    //   setValue('statePengiriman', '');
+    //   setValue('cityPengiriman', '');
+    // }
     updateFormPengiriman('isSameAddreesStreet', `${!sameAddressStreet}`);
-    validate();
+    validatePengiriman();
   };
 
-  useEffect(() => {
-    const options = {
-      behavior: 'smooth',
-      block: 'center',
-    };
-
-    const loadIndustries = async () => {
-      const watchZip = formPengiriman.zipPengiriman?.trim(); // Menghapus spasi berlebih
-
-      // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
-      if (watchZip && watchZip.length >= 5) {
-        const loadZip = async () => {
-          try {
-            const response = await fetch(
-              `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
-            );
-
-            const result = await response.json();
-
-            if (!result.result.length > 0) {
-              toast.error('Alamat pos salah');
-              updateFormPengiriman('zipPengiriman', ''); // Reset form.zip jika salah
-              validate(); // Memanggil validasi formulir
-              return false;
-            } else {
-              updateFormPengiriman('zipPengiriman', watchZip);
-              validate();
-              return true; // Jika valid
-            }
-          } catch (error) {
-            toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
-            console.error('Error:', error);
-            return false;
-          }
-        };
-
-        const isValidZip = await loadZip();
-        if (!isValidZip) {
-          zipRef.current.scrollIntoView(options);
-        }
-      }
-    };
-
-    loadIndustries();
-  }, [formPengiriman.zipPengiriman]);
   return (
     <>
       {isDesktop && (
@@ -737,22 +934,62 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                           </div>
                         )}
                       </div>
-                      <div className='w-1/3'>
-                        <input
-                          id='zipPengiriman'
-                          aria-label='zipPengiriman'
-                          disabled={sameAddressStreet}
+                      <div className='w-1/3' ref={districtPengirimanRef}>
+                        <Controller
+                          name='districtPengiriman'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={districts}
+                              disabled={
+                                !watchState || !watchCity || sameAddressStreet
+                              }
+                              placeholder='Kelurahan'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.subDistrictPengiriman}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-1/3' ref={subDistrictPengirimanRef}>
+                        <Controller
+                          name='subDistrictPengiriman'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={subDistricts}
+                              disabled={!watchDistrict || sameAddressStreet}
+                              placeholder='Kelurahan'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.subDistrictPengiriman}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-1/3' ref={zipRef}>
+                        <Controller
                           name='zipPengiriman'
-                          ref={zipRef}
-                          placeholder='Kode Pos'
-                          type='number'
-                          value={formPengiriman.zipPengiriman}
-                          className='form-input'
-                          onChange={handleInputChange}
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={zips}
+                              disabled={!watchsubDistrict || sameAddressStreet}
+                              placeholder='Zip'
+                            />
+                          )}
                         />
                         {chekValid && (
                           <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errorsPengiriman.zipPengiriman}
+                            {errors.zipPengiriman}
                           </div>
                         )}
                       </div>
@@ -822,7 +1059,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       isChecked={sameAddress}
                       onChange={handleChangeSameAddress}
                     >
-                      Alamat invoice sama dengan alamat pengiriman
+                      Alamat invoice sama dengan alamat bisnis
                     </Checkbox>
                   </div>
 
@@ -893,6 +1130,67 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                           </div>
                         )}
                       </div>
+                      <div className='w-1/3' ref={districtInvoiceRef}>
+                        <Controller
+                          name='districtInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={districtsInvoice}
+                              disabled={
+                                !watchStateInvoice ||
+                                !watchCityInvoice ||
+                                sameAddress
+                              }
+                              placeholder='Kecamatan'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.districtInvoice}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-1/3' ref={subDistrictInvoiceRef}>
+                        <Controller
+                          name='subDistrictInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={subDistrictsInvoice}
+                              disabled={!watchDistrictInvoice || sameAddress}
+                              placeholder='Kelurahan'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.subDistrictsInvoice}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-1/3' ref={zipInvoiceRef}>
+                        <Controller
+                          name='zipInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={zipsInvoice}
+                              disabled={!watchsubDistrictInvoice || sameAddress}
+                              placeholder='Zip'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.zipInvoice}
+                          </div>
+                        )}
+                      </div>
                     </div>
                   </>
                 </div>
@@ -1002,29 +1300,31 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     Lembar Penerimaan Barang (LPB)
                   </Checkbox>
 
-                  {/* <div className='flex gap-3 flex-col'>
+                  <div className='flex gap-3 flex-col'>
                     <Checkbox
                       colorScheme='red'
                       key='4'
-                      isChecked={isChecked(4)}
+                      isChecked={
+                        isChecked(4) || formPengiriman.dokumenKirimInput
+                      }
                       onChange={() => handleCheckboxChange(4)}
                     >
                       Lainnya
                     </Checkbox>
                     <textarea
-                      id='dokumenPengirimanInput'
-                      name='dokumenPengirimanInput'
-                      aria-label='dokumenPengirimanInput'
+                      id='dokumenKirimInput'
+                      name='dokumenKirimInput'
+                      aria-label='dokumenKirimInput'
                       placeholder='isi manual dokumen yang anda mau'
                       type='textarea'
                       ref={dokumenPengirimanInputRef}
-                      value={formPengiriman.dokumenPengirimanInput}
+                      value={formPengiriman.dokumenKirimInput}
                       className='form-input'
                       rows={4}
                       cols={40}
                       onChange={handleInputChange}
                     />
-                  </div> */}
+                  </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.dokumenPengiriman}
@@ -1036,12 +1336,12 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <div className='flex flex-row  justify-between items-start'>
                 <div className='w-2/5'>
                   <label className='form-label   text-wrap'>
-                    Dokumen saat Pengiriman Barang{' '}
+                    Dokumen yang dibawa saat pengiriman barang
                     <span className=' opacity-60'>(Opsional)</span>
                   </label>
                   {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
-                      Dokumen lampiran saat pengiriman barang
+                      Dokumen lampiran yang dibawa saat pengiriman barang
                     </span>
                   )}
                 </div>
@@ -1207,7 +1507,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     )}
                   </div>
                   <div
-                    className='w-1/3'
+                    className='w-3/5'
                     ref={cityPengirimanRef}
                     aria-label='cityPengiriman'
                   >
@@ -1229,7 +1529,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       </div>
                     )}
                   </div>
-                  <div className='w-1/3'>
+                  {/* <div className='w-1/3'>
                     <input
                       id='zipPengiriman'
                       aria-label='zipPengiriman'
@@ -1247,6 +1547,67 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                         {errorsPengiriman.zipPengiriman}
                       </div>
                     )}
+                  </div> */}
+                </div>
+                <div className='flex flex-row w-full gap-2'>
+                  <div className='w-1/3' ref={districtPengirimanRef}>
+                    <Controller
+                      name='districtPengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={districts}
+                          disabled={
+                            !watchState || !watchCity || sameAddressStreet
+                          }
+                          placeholder='Kelurahan'
+                        />
+                      )}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.subDistrictPengiriman}
+                      </div>
+                    )}
+                  </div>
+                  <div className='w-1/3' ref={subDistrictPengirimanRef}>
+                    <Controller
+                      name='subDistrictPengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={subDistricts}
+                          disabled={!watchDistrict || sameAddressStreet}
+                          placeholder='Kelurahan'
+                        />
+                      )}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.subDistrictPengiriman}
+                      </div>
+                    )}
+                  </div>
+                  <div className='w-1/3' ref={zipRef}>
+                    <Controller
+                      name='zipPengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={zips}
+                          disabled={!watchsubDistrict || sameAddressStreet}
+                          placeholder='Zip'
+                        />
+                      )}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.zipPengiriman}
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>
@@ -1372,6 +1733,69 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       )}
                     </div>
                   </div>
+                  <div className='sub-alamat flex flex-row w-full gap-3'>
+                    <div className='w-1/3' ref={districtInvoiceRef}>
+                      <Controller
+                        name='districtInvoice'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={districtsInvoice}
+                            disabled={
+                              !watchStateInvoice ||
+                              !watchCityInvoice ||
+                              sameAddress
+                            }
+                            placeholder='Kecamatan'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.districtInvoice}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={subDistrictInvoiceRef}>
+                      <Controller
+                        name='subDistrictInvoice'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={subDistrictsInvoice}
+                            disabled={!watchDistrictInvoice || sameAddress}
+                            placeholder='Kelurahan'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.subDistrictsInvoice}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={zipInvoiceRef}>
+                      <Controller
+                        name='zipInvoice'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={zipsInvoice}
+                            disabled={!watchsubDistrictInvoice || sameAddress}
+                            placeholder='Zip'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.zipInvoice}
+                        </div>
+                      )}
+                    </div>
+                  </div>
                 </>
               </div>
 
@@ -1478,6 +1902,31 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   >
                     Lembar Penerimaan Barang (LPB)
                   </Checkbox>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      key='4'
+                      isChecked={
+                        isChecked(4) || formPengiriman.dokumenKirimInput
+                      }
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenKirimInput'
+                      name='dokumenKirimInput'
+                      aria-label='dokumenKirimInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenKirimInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
 
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>