1 files changed, 81 insertions, 26 deletions

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 963a19aa..2879fb3d 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -48,19 +48,16 @@ const CreateAddress = () => {
     pinedMaps,
     setPinedMaps
   } = useMaps();
-  useEffect(() => {
-    if (detailAddress) {
-      setValue('zip', detailAddress.postalCode);
-      const selectedState = states.find(
-        (state) =>
-          detailAddress?.province.includes(state.label) ||
-          state.label.includes(detailAddress?.province)
-      );
-      setValue('state', selectedState?.value);
-      setValue('street', detailAddress?.street);
-    
-    }
-  }, [detailAddress, setValue]);
+  
+  const resetPin = useMaps((state) => state.resetPin);
+  const [showValidationPopup, setShowValidationPopup] = useState(false);
+  const [popupMessage, setPopupMessage] = useState("");
+  const [selectedCityName, setSelectedCityName] = useState("");
+  const [normalizedDistrict, setNormalizedDistrict] = useState("");
+
+   useEffect(() => {
+    resetPin();
+  }, [resetPin]);
 
   useEffect(() => {
     const loadState = async () => {
@@ -75,6 +72,20 @@ const CreateAddress = () => {
     setAddressMaps('');
   }, []);
 
+  useEffect(() => {
+    if (detailAddress) {
+      setValue('zip', detailAddress.postalCode);
+      const selectedState = states.find(
+        (state) =>
+          (detailAddress?.province || "").includes(state.label) ||
+          state.label.includes(detailAddress?.province)
+      );
+      setValue('state', selectedState?.value);
+      setValue('street', detailAddress?.street);
+    
+    }
+  }, [detailAddress, setValue]);
+
   const watchState = watch('state');
   useEffect(() => {
     setValue('city', '');
@@ -91,19 +102,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) {
@@ -123,6 +121,29 @@ const CreateAddress = () => {
     }
   }, [auth]);
 
+  const normalizeName = (name = "") => {
+    return name
+      .toLowerCase()
+      .replace(/\bkabupaten\b/gi, "")
+      .replace(/\bkota\b/gi, "")
+      .trim();
+  };
+
+  useEffect(() => {
+    if (detailAddress?.district) {
+      const normalizedDistrict = normalizeName(detailAddress.district);
+
+      const selectedCity = cities.find((city) => {
+        const normalizedCity = normalizeName(city.label);
+        return normalizedCity === normalizedDistrict;
+      });
+
+      if (selectedCity) {
+        setValue("city", selectedCity.value);
+      }
+    }
+  }, [cities, detailAddress, setValue]);
+
   const watchCity = watch('city');
   useEffect(() => {
     setValue('district', '');
@@ -188,7 +209,23 @@ const CreateAddress = () => {
     }
   }, [subDistricts, detailAddress, setValue]);
 
+  
+  
+  // console.log(selectedCityName, '=', normalizedDistrict);
   const onSubmitHandler = async (values) => {
+    if (detailAddress) {
+      const cityName = normalizeName(
+        cities.find((c) => c.value === watch("city"))?.label || ""
+      );
+      const districtName = normalizeName(detailAddress?.district || "");
+      console.log(cityName, '=', districtName);
+
+      if (cityName && cityName !== districtName) {
+        setPopupMessage("Titik Koordinat tidak sesuai dengan Kota yang dipilih");
+        setShowValidationPopup(true);
+        return;
+      }
+    }
     const data = {
       ...values,
       state_id: values.state,
@@ -219,6 +256,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 />