detail adress

3 files changed, 57 insertions, 10 deletions

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index 9ca617ae..d852f52c 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -9,6 +9,7 @@ import MobileView from '@/core/components/views/MobileView';
 import DesktopView from '@/core/components/views/DesktopView';
 import Menu from '@/lib/auth/components/Menu';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { MapPinIcon } from 'lucide-react';
 
 const Addresses = () => {
   const router = useRouter();
@@ -177,6 +178,20 @@ const AddressCard = ({
           <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
         )}
         <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
+
+        <div className='flex items-center mt-4'>
+          {address.addressMap ? (
+            <>
+              <MapPinIcon class='h-7 w-8 text-yellow-600 mr-3 font-semibold' />
+              <p className='text-yellow-600 font-semibold'>Sudah PinPoint</p>
+            </>
+          ) : (
+            <>
+              <MapPinIcon class='h-7 w-8 text-red-600 mr-3 font-semibold' />
+              <p className='text-red-600 font-semibold'>Belum PinPoint</p>
+            </>
+          )}
+        </div>
       </div>
       <button
         onClick={() => {
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 70307401..a53be0fa 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -41,7 +41,7 @@ const CreateAddress = () => {
   const [subDistricts, setSubDistricts] = useState([]);
   const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
   const [pinedMaps, setPinedMaps] = useState(false);
-  const { addressMaps, setAddressMaps } = useMaps();
+  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } = useMaps();
 
   useEffect(() => {
     const loadState = async () => {
@@ -131,9 +131,12 @@ const CreateAddress = () => {
       district_id: values.district,
       sub_district_id: values.subDistrict,
       parent_id: auth.partnerId,
+      latitude: selectedPosition?.lat,
+      longtitude: selectedPosition?.lng,
+      address_maps: JSON.stringify(addressMaps),
     };
-
-    const address = await createAddressApi({ data });
+console.log('ini data',data);
+    // const address = await createAddressApi({ data });
     if (address?.id) {
       toast.success('Berhasil menambahkan alamat');
       router.back();
diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index 0781d8a8..1fa40036 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -8,6 +8,7 @@ import {
 import { useMaps } from '../stores/useMaps';
 import { LocateFixed, MapPinIcon } from 'lucide-react';
 import { Button } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 
 const containerStyle = {
   width: '100%',
@@ -30,6 +31,7 @@ const PinpointLocation = () => {
 
   const [tempAddress, setTempAddress] = useState('');
   const [tempPosition, setTempPosition] = useState(center);
+  const { setValue } = useForm();
 
   const autocompleteRef = useRef(null);
 
@@ -50,6 +52,11 @@ const PinpointLocation = () => {
     }
   };
 
+  const getAddressComponent = (components, type) => {
+    const component = components.find((comp) => comp.types.includes(type));
+    return component ? component.long_name : '';
+  };
+
   const getAddress = async (lat, lng) => {
     try {
       const response = await fetch(
@@ -57,6 +64,28 @@ const PinpointLocation = () => {
       );
       const data = await response.json();
       if (data.results[0]) {
+        const addressComponents = data.results[0].address_components;
+        const details = {
+          province: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_1'
+          ),
+          district: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_2'
+          ),
+          subDistrict: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_3'
+          ),
+          village: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_4'
+          ),
+          postalCode: getAddressComponent(addressComponents, 'postal_code'),
+        };
+        setValue('state', details?.province);
+        console.log(details);
         setTempAddress(data.results[0].formatted_address);
       }
     } catch (error) {
@@ -82,7 +111,7 @@ const PinpointLocation = () => {
 
   const handleSavePinpoint = (event) => {
     event.preventDefault();
-    if(tempAddress === '') {
+    if (tempAddress === '') {
       alert('Silahkan pilih lokasi terlebih dahulu');
       return;
     }
@@ -134,10 +163,7 @@ const PinpointLocation = () => {
       </div>
 
       <div style={{ marginTop: '20px' }}>
-        <Button
-          variant='solid'
-          onClick={handleUseCurrentLocation}
-        >
+        <Button variant='solid' onClick={handleUseCurrentLocation}>
           <LocateFixed class='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat
           ini
         </Button>
@@ -152,8 +178,11 @@ const PinpointLocation = () => {
       </div>
 
       <div className='mt-6 flex justify-end'>
-        <button className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg' onClick={handleSavePinpoint}>
-            Simpan Lokasi Ini
+        <button
+          className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg'
+          onClick={handleSavePinpoint}
+        >
+          Simpan Lokasi Ini
         </button>
       </div>
     </div>