integrasi google maps service

1 files changed, 88 insertions, 28 deletions

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'),
 });