From e50d2dfd4c26ad6ba75408e520dfd75d6753edd7 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Thu, 15 Jan 2026 07:49:58 +0300 Subject: [PATCH] delivery: fix map updating and enhance UI --- .../CustomBottomSheet/GoogleMap.tsx | 116 ++++++++++++++---- src/pages/address/page.tsx | 105 ++++++++-------- .../checkout/components/AddressSummary.tsx | 2 + 3 files changed, 141 insertions(+), 82 deletions(-) diff --git a/src/components/CustomBottomSheet/GoogleMap.tsx b/src/components/CustomBottomSheet/GoogleMap.tsx index 033bfc2..785eb22 100644 --- a/src/components/CustomBottomSheet/GoogleMap.tsx +++ b/src/components/CustomBottomSheet/GoogleMap.tsx @@ -1,4 +1,3 @@ - import { Status, Wrapper } from "@googlemaps/react-wrapper"; import { useEffect, useRef, useState } from "react"; @@ -74,7 +73,7 @@ function MapComponent({ }); setMap(newMap); - console.log('Map initialized successfully'); + console.log("Map initialized successfully"); // If we have an initial location, add a marker if (initialLocation) { @@ -148,16 +147,14 @@ function MapComponent({ geocoder.geocode({ location: { lat, lng } }, (results, status) => { if (status === "OK" && results && results[0]) { const address = results[0].formatted_address; - console.log( - "Initial marker drag - calling onLocationSelect:", - { lat, lng, address }, - ); + console.log("Initial marker drag - calling onLocationSelect:", { + lat, + lng, + address, + }); onLocationSelect?.(lat, lng, address); } else { - console.log( - "Geocoding failed on initial marker drag:", - status, - ); + console.log("Geocoding failed on initial marker drag:", status); // Fallback: use coordinates as address if geocoding fails const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`; console.log( @@ -198,22 +195,32 @@ function MapComponent({ if (position) { const lat = position.lat(); const lng = position.lng(); - + // Get address from coordinates const geocoder = new google.maps.Geocoder(); - geocoder.geocode({ location: { lat, lng } }, (results, status) => { - if (status === "OK" && results && results[0]) { - const address = results[0].formatted_address; - console.log('Marker drag - calling onLocationSelect:', { lat, lng, address }); - onLocationSelect?.(lat, lng, address); - } else { - console.log('Geocoding failed on drag:', status); - // Fallback: use coordinates as address if geocoding fails - const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`; - console.log('Using fallback address for drag:', fallbackAddress); - onLocationSelect?.(lat, lng, fallbackAddress); - } - }); + geocoder.geocode( + { location: { lat, lng } }, + (results, status) => { + if (status === "OK" && results && results[0]) { + const address = results[0].formatted_address; + console.log("Marker drag - calling onLocationSelect:", { + lat, + lng, + address, + }); + onLocationSelect?.(lat, lng, address); + } else { + console.log("Geocoding failed on drag:", status); + // Fallback: use coordinates as address if geocoding fails + const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`; + console.log( + "Using fallback address for drag:", + fallbackAddress, + ); + onLocationSelect?.(lat, lng, fallbackAddress); + } + }, + ); } }); @@ -222,13 +229,17 @@ function MapComponent({ geocoder.geocode({ location: { lat, lng } }, (results, status) => { if (status === "OK" && results && results[0]) { const address = results[0].formatted_address; - console.log('Map click - calling onLocationSelect:', { lat, lng, address }); + console.log("Map click - calling onLocationSelect:", { + lat, + lng, + address, + }); onLocationSelect?.(lat, lng, address); } else { - console.log('Geocoding failed on click:', status); + console.log("Geocoding failed on click:", status); // Fallback: use coordinates as address if geocoding fails const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`; - console.log('Using fallback address:', fallbackAddress); + console.log("Using fallback address:", fallbackAddress); onLocationSelect?.(lat, lng, fallbackAddress); } }); @@ -238,6 +249,57 @@ function MapComponent({ } }, [map, onLocationSelect, readOnly, initialLocation]); + // Update map center and marker when initialLocation changes (after map is initialized) + useEffect(() => { + if (map && initialLocation) { + // Update map center + map.setCenter({ + lat: initialLocation.lat, + lng: initialLocation.lng, + }); + map.setZoom(15); + + // Update or create marker + if (markerRef.current) { + // Update existing marker position + markerRef.current.setPosition({ + lat: initialLocation.lat, + lng: initialLocation.lng, + }); + } else { + // Create new marker if it doesn't exist + const newMarker = new google.maps.Marker({ + position: { lat: initialLocation.lat, lng: initialLocation.lng }, + map: map, + draggable: !readOnly, + }); + markerRef.current = newMarker; + + // Add drag end listener if not readOnly + if (!readOnly && onLocationSelect) { + newMarker.addListener("dragend", () => { + const position = newMarker.getPosition(); + if (position) { + const lat = position.lat(); + const lng = position.lng(); + + const geocoder = new google.maps.Geocoder(); + geocoder.geocode({ location: { lat, lng } }, (results, status) => { + if (status === "OK" && results && results[0]) { + const address = results[0].formatted_address; + onLocationSelect(lat, lng, address); + } else { + const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`; + onLocationSelect(lat, lng, fallbackAddress); + } + }); + } + }); + } + } + } + }, [map, initialLocation, readOnly, onLocationSelect]); + return (
-
+
+
+ + + {" "} + + + +
- {" "} + + + + +
- - - - - - - - - - - -
diff --git a/src/pages/checkout/components/AddressSummary.tsx b/src/pages/checkout/components/AddressSummary.tsx index 65b4460..587be21 100644 --- a/src/pages/checkout/components/AddressSummary.tsx +++ b/src/pages/checkout/components/AddressSummary.tsx @@ -106,6 +106,8 @@ export const AddressSummary = () => { return null; } + console.log(location); + return ( <>