delivery: fix map updating and enhance UI

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(
+                console.log("Initial marker drag - calling onLocationSelect:", {
-                  "Initial marker drag - calling onLocationSelect:",
+                  lat,
-                  { lat, lng, address },
+                  lng,
-                );
+                  address,
+                });
                 onLocationSelect?.(lat, lng, address);
               } else {
-                console.log(
+                console.log("Geocoding failed on initial marker drag:", status);
-                  "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) => {
+                geocoder.geocode(
-                  if (status === "OK" && results && results[0]) {
+                  { location: { lat, lng } },
-                    const address = results[0].formatted_address;
+                  (results, status) => {
-                    console.log('Marker drag - calling onLocationSelect:', { lat, lng, address });
+                    if (status === "OK" && results && results[0]) {
-                    onLocationSelect?.(lat, lng, address);
+                      const address = results[0].formatted_address;
-                  } else {
+                      console.log("Marker drag - calling onLocationSelect:", {
-                    console.log('Geocoding failed on drag:', status);
+                        lat,
-                    // Fallback: use coordinates as address if geocoding fails
+                        lng,
-                    const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
+                        address,
-                    console.log('Using fallback address for drag:', fallbackAddress);
+                      });
-                    onLocationSelect?.(lat, lng, fallbackAddress);
+                      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}

src/pages/address/page.tsx

@@ -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="street"
-                name="floor"
                 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="additional"
-                name="apt"
                 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>

src/pages/checkout/components/AddressSummary.tsx

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