<hafid> fix pinpoint

4 files changed, 69 insertions, 27 deletions

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index fbb01fcc..35c966c7 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -212,7 +212,7 @@ const CreateAddress = () => {
     <>
       <BottomPopup
         className=' !h-[75%]'
-        title='Pin Maps Address'
+        title='Pin Koordinat Address'
         active={pinedMaps}
         close={() => setPinedMaps(false)}
       >
@@ -227,16 +227,20 @@ const CreateAddress = () => {
         <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
           <form onSubmit={handleSubmit(onSubmitHandler)}>
             <div className='mb-4 items-start'>
-              <label className='form-label mb-2'>PinPoint</label>
+              <label className='form-label mb-2'>Koordinat Alamat</label>
               {addressMaps ? (
-                <div className='flex gap-x-2 items-center'>
-                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '}
+                <div className='flex items-center'>
+                  <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+                  <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '}
+                    </button>
                   <span> {addressMaps} </span>
                 </div>
               ) : (
-                <Button variant='plain' onClick={() => setPinedMaps(true)}>
-                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
-                  Pin Alamat
+                <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}>
+                 <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+                    <MapPinIcon className="h-6 w-6" />
+                  </button>
+                    Pin Koordinat Alamat
                 </Button>
               )}
             </div>
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index cfb35fbd..743bb4c8 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -311,7 +311,12 @@ const EditAddress = ({ id, defaultValues }) => {
         close={() => setPinedMaps(false)}
       >
         <div className='flex mt-4'>
-          <PinPointMap />
+          <PinPointMap 
+              initialLatitude={selectedPosition?.lat} 
+              initialLongitude={selectedPosition?.lng} 
+              initialAddress={tempAddress} 
+            />
+
         </div>
       </BottomPopup>
       <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
@@ -327,16 +332,20 @@ const EditAddress = ({ id, defaultValues }) => {
           </div>
           <form onSubmit={handleSubmit(onSubmitHandler)}>
             <div className='mb-4 items-start'>
-              <label className='form-label mb-2'>PinPoint</label>
+              <label className='form-label mb-2'>Koordinat Alamat</label>
               {tempAddress ? (
                 <div className='flex gap-x-2 items-center'>
-                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '}
+                  <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+                  <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '}
+                    </button>
                   <span> {tempAddress} </span>
                 </div>
               ) : (
-                <Button variant='plain' onClick={() => setPinedMaps(true)}>
-                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
-                  Pin Alamat
+                <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}>
+                  <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+                    <MapPinIcon className="h-6 w-6" />
+                  </button>
+                  Pin Koordinat Alamat
                 </Button>
               )}
             </div>
diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index fde1f36c..c46d838a 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -19,7 +19,7 @@ const defaultCenter = {
   lng: 106.816666,
 };
 
-const PinpointLocation = () => {
+const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) => {
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
     libraries: ['places'],
@@ -34,8 +34,15 @@ const PinpointLocation = () => {
     setPinedMaps,
   } = useMaps();
 
-  const [tempAddress, setTempAddress] = useState('');
-  const [tempPosition, setTempPosition] = useState(defaultCenter);
+  const [tempAddress, setTempAddress] = useState(initialAddress || '');
+  const [tempPosition, setTempPosition] = useState(
+    initialLatitude && initialLongitude 
+      ? { lat: parseFloat(initialLatitude), lng: parseFloat(initialLongitude) }
+      : selectedPosition.lat && selectedPosition.lng
+        ? selectedPosition
+        : defaultCenter
+  );
+
   const [markerIcon, setMarkerIcon] = useState(null);
 
   const autocompleteRef = useRef(null);
@@ -47,7 +54,12 @@ const PinpointLocation = () => {
         scaledSize: new window.google.maps.Size(25, 40),
       });
     }
-  }, [isLoaded]);
+
+    // If we have initial coordinates but no address, fetch the address
+    if (initialLatitude && initialLongitude && !initialAddress) {
+      getAddress(parseFloat(initialLatitude), parseFloat(initialLongitude));
+    }
+  }, [isLoaded, initialLatitude, initialLongitude, initialAddress]);
 
   const getAddressComponent = (components, type) => {
     const component = components.find((comp) => comp.types.includes(type));
@@ -147,6 +159,8 @@ const PinpointLocation = () => {
             <input
               type='text'
               placeholder='Cari Alamat...'
+              value={tempAddress}
+              onChange={(e) => setTempAddress(e.target.value)}
               style={{ width: '100%', padding: '8px' }}
             />
           </Autocomplete>
@@ -209,4 +223,4 @@ const PinpointLocation = () => {
   );
 };
 
-export default PinpointLocation;
+export default PinpointLocation;
\ No newline at end of file
diff --git a/src/lib/maps/stores/useMaps.js b/src/lib/maps/stores/useMaps.js
index 4daf7f62..c57a05ad 100644
--- a/src/lib/maps/stores/useMaps.js
+++ b/src/lib/maps/stores/useMaps.js
@@ -6,12 +6,27 @@ const center = {
 };
 
 export const useMaps = create((set) => ({
-    selectedPosition: center,
-    addressMaps: '',
-    detailAddress: {},
-    pinedMaps : false,
-    setSelectedPosition: (position) => set({ selectedPosition: position }),
-    setAddressMaps: (addressMaps) => set({ addressMaps }),
-    setDetailAddress: (detailAddress) => set({ detailAddress }),
-    setPinedMaps: (pinedMaps) => set({pinedMaps})
-  }));
\ No newline at end of file
+  // State existing
+  selectedPosition: center,
+  addressMaps: '',
+  detailAddress: {},
+  pinedMaps: false,
+
+  // State tambahan untuk penyimpanan posisi sementara
+  tempPositionCreate: null,
+  tempPositionEdit: null,
+
+  // Setter existing
+  setSelectedPosition: (position) => set({ selectedPosition: position }),
+  setAddressMaps: (addressMaps) => set({ addressMaps }),
+  setDetailAddress: (detailAddress) => set({ detailAddress }),
+  setPinedMaps: (pinedMaps) => set({ pinedMaps }),
+
+  // Setter tambahan untuk posisi sementara
+  setTempPositionCreate: (position) => set({ tempPositionCreate: position }),
+  setTempPositionEdit: (position) => set({ tempPositionEdit: position }),
+
+  // Opsional: Reset jika ingin clear saat keluar halaman
+  resetTempPositionCreate: () => set({ tempPositionCreate: null }),
+  resetTempPositionEdit: () => set({ tempPositionEdit: null }),
+}));