integrasi google maps service

1 files changed, 75 insertions, 13 deletions

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index a53be0fa..404143f9 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -1,23 +1,23 @@
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import useAuth from '@/core/hooks/useAuth';
+import Menu from '@/lib/auth/components/Menu';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { useRouter } from 'next/router';
-import { Controller, set, useForm } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 import cityApi from '../api/cityApi';
+import createAddressApi from '../api/createAddressApi';
 import districtApi from '../api/districtApi';
+import stateApi from '../api/stateApi';
 import subDistrictApi from '../api/subDistrictApi';
-import { useEffect, useState } from 'react';
-import createAddressApi from '../api/createAddressApi';
-import { toast } from 'react-hot-toast';
-import { yupResolver } from '@hookform/resolvers/yup';
-import Menu from '@/lib/auth/components/Menu';
 import useAddresses from '../hooks/useAddresses';
-import stateApi from '../api/stateApi';
 
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
-import PinPointMap from '../../maps/components/PinPointMap';
 import { Button } from '@chakra-ui/react';
 import { MapPinIcon } from 'lucide-react';
+import PinPointMap from '../../maps/components/PinPointMap';
 import { useMaps } from '../../maps/stores/useMaps';
 
 const CreateAddress = () => {
@@ -41,7 +41,24 @@ const CreateAddress = () => {
   const [subDistricts, setSubDistricts] = useState([]);
   const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
   const [pinedMaps, setPinedMaps] = useState(false);
-  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } = useMaps();
+  const {
+    addressMaps,
+    selectedPosition,
+    detailAddress,
+  } = 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);
+    
+    }
+  }, [detailAddress, setValue]);
 
   useEffect(() => {
     const loadState = async () => {
@@ -56,6 +73,7 @@ const CreateAddress = () => {
   }, []);
 
   const watchState = watch('state');
+  console.log(watchState);
   useEffect(() => {
     setValue('city', '');
     if (watchState) {
@@ -72,6 +90,21 @@ const CreateAddress = () => {
   }, [watchState, setValue]);
 
   useEffect(() => {
+    if (detailAddress) {
+      const selectedCities = 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) {
       let hasContactAddress = false;
 
@@ -105,6 +138,21 @@ const CreateAddress = () => {
     }
   }, [watchCity, setValue]);
 
+  useEffect(() => {
+    if (detailAddress) {
+      const selectedDistrict = districts.find(
+        (district) =>
+          detailAddress.subDistrict
+            .toLowerCase()
+            .includes(district.label.toLowerCase()) ||
+          district.label
+            .toLowerCase()
+            .includes(detailAddress.subDistrict.toLowerCase())
+      );
+      setValue('district', selectedDistrict?.value);
+    }
+  }, [districts, detailAddress, setValue]);
+
   const watchDistrict = watch('district');
   useEffect(() => {
     setValue('subDistrict', '');
@@ -123,6 +171,22 @@ const CreateAddress = () => {
     }
   }, [watchDistrict, setValue]);
 
+  useEffect(() => {
+    if (detailAddress) {
+      const selectedSubDistrict = subDistricts.find(
+        (district) =>
+          detailAddress.village
+            .toLowerCase()
+            .includes(district.label.toLowerCase()) ||
+          district.label
+            .toLowerCase()
+            .includes(detailAddress.village.toLowerCase())
+      );
+
+      setValue('subDistrict', selectedSubDistrict?.value);
+    }
+  }, [subDistricts, detailAddress, setValue]);
+
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
@@ -133,10 +197,9 @@ const CreateAddress = () => {
       parent_id: auth.partnerId,
       latitude: selectedPosition?.lat,
       longtitude: selectedPosition?.lng,
-      address_maps: JSON.stringify(addressMaps),
+      address_map: addressMaps,
     };
-console.log('ini data',data);
-    // const address = await createAddressApi({ data });
+    const address = await createAddressApi({ data });
     if (address?.id) {
       toast.success('Berhasil menambahkan alamat');
       router.back();
@@ -174,7 +237,6 @@ console.log('ini data',data);
                   Pin Alamat
                 </Button>
               )}
-             
             </div>
             <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
               <div>