integrasi google maps service

3 files changed, 166 insertions, 44 deletions

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index d852f52c..1007b9f8 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -18,7 +18,7 @@ const Addresses = () => {
   const selectedAddress = getItemAddress(select || '');
   const [changeConfirmation, setChangeConfirmation] = useState(false);
   const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah
-
+  
   const changeSelectedAddress = (id) => {
     if (!select) return;
     updateItemAddress(select, id);
@@ -187,8 +187,8 @@ const AddressCard = ({
             </>
           ) : (
             <>
-              <MapPinIcon class='h-7 w-8 text-red-600 mr-3 font-semibold' />
-              <p className='text-red-600 font-semibold'>Belum PinPoint</p>
+              <MapPinIcon class='h-7 w-8 text-red-600 mr-2 font-semibold' />
+              <p className='text-red-600 font-semibold text-sm'>Belum PinPoint</p>
             </>
           )}
         </div>
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>
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 23cf72a9..0b3b0aa3 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -14,6 +14,12 @@ import Menu from '@/lib/auth/components/Menu';
 import useAuth from '@/core/hooks/useAuth';
 import odooApi from '@/core/api/odooApi';
 import stateApi from '../api/stateApi';
+import { MapPinIcon } from 'lucide-react';
+import { Button } from '@chakra-ui/react';
+import { useMaps } from '../../maps/stores/useMaps';
+
+import PinPointMap from '../../maps/components/PinPointMap';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 
 const EditAddress = ({ id, defaultValues }) => {
   const auth = useAuth();
@@ -34,7 +40,19 @@ const EditAddress = ({ id, defaultValues }) => {
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
-  const [subDistricts, setSubDistricts] = useState([]); 
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [pinedMaps, setPinedMaps] = useState(false);
+  const [tempAddress, setTempAddress] = useState(getValues('address_maps'));
+  const { addressMaps, selectedPosition, detailAddress } = useMaps();
+
+  useEffect(() => {
+    if (addressMaps) {
+      setTempAddress(addressMaps);
+      setValue('address_map', addressMaps);
+      setValue('longtitude', selectedPosition.lng);
+      setValue('latitude', selectedPosition.lat);
+    }
+  }, [addressMaps, selectedPosition, setValue]);
 
   useEffect(() => {
     const loadProfile = async () => {
@@ -60,12 +78,12 @@ const EditAddress = ({ id, defaultValues }) => {
       setStates(dataStates);
     };
     loadStates();
-  },[])
+  }, []);
 
   const watchState = watch('state');
   useEffect(() => {
     setValue('city', '');
-    if(watchState) {
+    if (watchState) {
       const loadCities = async () => {
         let dataCities = await cityApi({ stateId: watchState });
         dataCities = dataCities.map((city) => ({
@@ -81,7 +99,6 @@ const EditAddress = ({ id, defaultValues }) => {
       };
       loadCities();
     }
-    
   }, [watchState, setValue, getValues]);
 
   const watchCity = watch('city');
@@ -136,40 +153,65 @@ const EditAddress = ({ id, defaultValues }) => {
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
+      longtitude: selectedPosition?.lng,
+      latitude: selectedPosition?.lat,
+      address_map: addressMaps,
     };
     if (!auth.company) {
       data.alamat_lengkap_text = values.street;
     }
-    const address = await editAddressApi({ id, data });
-    let dataAlamat;
-    let isUpdated = true;
-    if (auth.company) {
-      if (auth?.partnerId == id) {
-        dataAlamat = {
-          id_user: auth.partnerId,
-          alamat_lengkap_text: values.alamat_wajib_pajak,
-          street: values.street,
-        };
-        isUpdated = await odooApi(
-          'PUT',
-          `/api/v1/partner/${auth.parentId}`,
-          dataAlamat
-        );
+    try {
+      const address = await editAddressApi({ id, data });
+      let dataAlamat;
+      let isUpdated = true;
+      if (auth.company) {
+        if (auth?.partnerId == id) {
+          dataAlamat = {
+            id_user: auth.partnerId,
+            alamat_lengkap_text: values.alamat_wajib_pajak,
+            street: values.street,
+          };
+          isUpdated = await odooApi(
+            'PUT',
+            `/api/v1/partner/${auth.parentId}`,
+            dataAlamat
+          );
+        }
       }
-    }
-
-    // if (isUpdated?.id) {
-    if (address?.id && auth.company ? isUpdated?.id : true) {
-      toast.success('Berhasil mengubah alamat');
-      router.back();
-    } else {
+      if (address?.id) {
+        toast.success('Berhasil mengubah alamat');
+        router.back();
+      } else {
+        toast.error('Terjadi kesalahan internal');
+        router.back();
+      }
+    } catch (error) {
       toast.error('Terjadi kesalahan internal');
       router.back();
     }
+
+    // if (isUpdated?.id) {
+    // if (address?.id && auth.company ? isUpdated?.id : true) {
+    //   toast.success('Berhasil mengubah alamat');
+    //   router.back();
+    // } else {
+    //   toast.error('Terjadi kesalahan internal');
+    //   router.back();
+    // }
   };
 
   return (
     <>
+      <BottomPopup
+        className=' !h-[75%]'
+        title='Pin Maps Address'
+        active={pinedMaps}
+        close={() => setPinedMaps(false)}
+      >
+        <div className='flex mt-4'>
+          <PinPointMap />
+        </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 />
@@ -182,6 +224,20 @@ const EditAddress = ({ id, defaultValues }) => {
             {auth?.partnerId == id && <div className='badge-green'>Utama</div>}
           </div>
           <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className='mb-4 items-start'>
+              <label className='form-label mb-2'>PinPoint</label>
+              {tempAddress ? (
+                <div className='flex gap-x-2 items-center'>
+                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />{' '}
+                  <span> {tempAddress} </span>
+                </div>
+              ) : (
+                <Button variant='plain' onClick={() => setPinedMaps(true)}>
+                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
+                  Pin Alamat
+                </Button>
+              )}
+            </div>
             <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
               <div>
                 <label className='form-label mb-2'>Label Alamat</label>
@@ -287,7 +343,11 @@ const EditAddress = ({ id, defaultValues }) => {
                   name='city'
                   control={control}
                   render={(props) => (
-                    <HookFormSelect {...props} options={cities} disabled={!watchState} />
+                    <HookFormSelect
+                      {...props}
+                      options={cities}
+                      disabled={!watchState}
+                    />
                   )}
                 />
                 <div className='text-caption-2 text-danger-500 mt-1'>
@@ -348,7 +408,7 @@ const validationSchema = Yup.object().shape({
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
-  state : Yup.string().required('Harus di-pilih'),
+  state: Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
   district: Yup.string().required('Harus di-pilih'),
 });