From bc4fe87e012cc1b06572ca12f1a3b92f6d1757e0 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 31 Oct 2024 09:09:05 +0700
Subject: detail adress

---
 src/lib/address/components/Addresses.jsx     | 15 ++++++++++
 src/lib/address/components/CreateAddress.jsx |  9 ++++--
 src/lib/maps/components/PinPointMap.jsx      | 43 +++++++++++++++++++++++-----
 src/pages/my/address/[id]/edit.jsx           |  5 +++-
 4 files changed, 61 insertions(+), 11 deletions(-)

(limited to 'src')

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>
diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx
index 19d7af41..fdae8bb6 100644
--- a/src/pages/my/address/[id]/edit.jsx
+++ b/src/pages/my/address/[id]/edit.jsx
@@ -45,7 +45,10 @@ export async function getServerSideProps(context) {
     oldSubDistrict: address.subDistrict?.id || '',
     subDistrict: '',
     business_name: '',
+    longtitude: address?.longtitude || 0,
+    latitude: address?.latitude || 0,
+    address_maps: address?.address_maps ? JSON.stringify(address?.addressMaps) : '',
+
   };
-  // console.log('ini default',defaultValues);
   return { props: { id, defaultValues } };
 }
-- 
cgit v1.2.3