Merged in validation_address (pull request #459)

<hafid> validation Address

1 files changed, 61 insertions, 21 deletions

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 963a19aa..fcfad056 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -48,19 +48,39 @@ const CreateAddress = () => {
     pinedMaps,
     setPinedMaps
   } = useMaps();
+  
+  const resetPin = useMaps((state) => state.resetPin);
+  const [showValidationPopup, setShowValidationPopup] = useState(false);
+  const [popupMessage, setPopupMessage] = useState("");
+  const [selectedCityName, setSelectedCityName] = useState("");
+
+   useEffect(() => {
+    resetPin();
+  }, [resetPin]);
+
+
   useEffect(() => {
-    if (detailAddress) {
-      setValue('zip', detailAddress.postalCode);
+    if (defaultValues?.zip) {
+      setValue("zip", defaultValues.zip);
+    }
+
+    // set state/province
+    if (defaultValues?.province) {
       const selectedState = states.find(
         (state) =>
-          detailAddress?.province.includes(state.label) ||
-          state.label.includes(detailAddress?.province)
+          defaultValues.province.includes(state.label) ||
+          state.label.includes(defaultValues.province)
       );
-      setValue('state', selectedState?.value);
-      setValue('street', detailAddress?.street);
-    
+      if (selectedState) {
+        setValue("state", selectedState.value);
+      }
     }
-  }, [detailAddress, setValue]);
+
+    // set street
+    if (defaultValues?.street) {
+      setValue("street", defaultValues.street);
+    }
+  }, [states, setValue, defaultValues]);
 
   useEffect(() => {
     const loadState = async () => {
@@ -91,19 +111,6 @@ const CreateAddress = () => {
     }
   }, [watchState, setValue]);
 
-  useEffect(() => {
-    if (detailAddress && Object.keys(detailAddress).length > 0) {
-      const selectedCities = cities.find(
-          (city) => 
-            city.label.toLowerCase() === detailAddress?.district.toLowerCase()
-        ) || cities.find(
-          (city) =>
-            detailAddress?.district.toLowerCase().includes(city.label.toLowerCase()) ||
-            city.label.toLowerCase().includes(detailAddress?.district.toLowerCase())
-        );
-      setValue('city', selectedCities?.value);
-    }
-  }, [cities, detailAddress, setValue]);
 
   useEffect(() => {
     if (addresses) {
@@ -188,7 +195,22 @@ const CreateAddress = () => {
     }
   }, [subDistricts, detailAddress, setValue]);
 
+  useEffect(() => {
+    const currentCity = cities.find((c) => c.value === watch("city"))?.label || "";
+    setSelectedCityName(currentCity);
+  }, [watch("city"), cities]);
+
   const onSubmitHandler = async (values) => {
+    if (detailAddress?.district) {
+      if (
+        selectedCityName && 
+        selectedCityName.toLowerCase() !== detailAddress?.district?.toLowerCase()
+      ) {
+        setPopupMessage("Titik Koordinat tidak sesuai dengan Kota yang dipilih");
+        setShowValidationPopup(true);
+        return;
+      }
+    }
     const data = {
       ...values,
       state_id: values.state,
@@ -219,6 +241,24 @@ const CreateAddress = () => {
           <PinPointMap />
         </div>
       </BottomPopup>
+      <BottomPopup
+        active={showValidationPopup}
+        close={() => setShowValidationPopup(false)}
+      >
+        <div className="leading-7 text-gray_r-12/80 text-center">
+          {popupMessage}
+        </div>
+
+        <div className="flex justify-center mt-6">
+          <button
+            className="btn-solid-red w-full md:w-auto"
+            type="button"
+            onClick={() => setShowValidationPopup(false)}
+          >
+            OK
+          </button>
+        </div>
+      </BottomPopup>
       <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
         <div className='hidden md:block w-3/12 pr-4'>
           <Menu />