fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delivery: fix map updating and enhance UI

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-15 07:49:58 +03:00
parent ab5867b0cb
commit e50d2dfd4c
3 changed files with 141 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/CustomBottomSheet/GoogleMap.tsx
View File

@@ -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(
@@ -201,19 +198,29 @@ function MapComponent({
// 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 (
<div
ref={mapRef}

105
src/pages/address/page.tsx
View File

@@ -64,30 +64,70 @@ export default function AddressPage() {
name="loginForm"
form={form}
>
<div style={{ display: "flex", gap: 10 }}>
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
<div style={{ display: "flex", gap: 10 }}>
<Form.Item
name="floor"
rules={[{ required: true, message: "" }]}
style={{ width: "100%" }}
>
<Input
placeholder={t("address.floor")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>{" "}
<Form.Item
name="apt"
rules={[{ required: true, message: "" }]}
style={{ width: "100%" }}
>
<Input
placeholder={t("address.aptNumber")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>
</div>
<Form.Item
label={t("floor")}
name="floor"
name="street"
rules={[{ required: true, message: "" }]}
style={{ width: "100%" }}
>
<Input
placeholder={t("address.floor")}
placeholder={t("address.street")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>{" "}
</Form.Item>
<Form.Item
label={t("address.aptNumber")}
name="apt"
name="additional"
rules={[{ required: true, message: "" }]}
style={{ width: "100%" }}
>
<Input
placeholder={t("address.aptNumber")}
placeholder={t("address.additionalDirection")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>
<Form.Item
name="addressLabel"
rules={[{ required: true, message: "" }]}
>
<Input
placeholder={t("address.addressLabel")}
style={{
fontSize: 14,
height: 50,
@@ -96,51 +136,6 @@ export default function AddressPage() {
/>
</Form.Item>
</div>
<Form.Item
label={t("address.street")}
name="street"
rules={[{ required: true, message: "" }]}
>
<Input
placeholder={t("address.street")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>
<Form.Item
label={t("address.additionalDirection")}
name="additional"
rules={[{ required: true, message: "" }]}
>
<Input
placeholder={t("address.additionalDirection")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>
<ProPhoneInput label={t("address.mobileNumber")} propName="phone" />
<Form.Item
label={t("address.addressLabel")}
name="addressLabel"
rules={[{ required: true, message: "" }]}
>
<Input
placeholder={t("address.addressLabel")}
style={{
fontSize: 14,
height: 50,
}}
autoFocus={false}
/>
</Form.Item>
</Form>
</Card>
</div>

2
src/pages/checkout/components/AddressSummary.tsx
View File

@@ -106,6 +106,8 @@ export const AddressSummary = () => {
return null;
}
console.log(location);
return (
<>
<Card