Initial commit

src/components/CustomBottomSheet/MapBottomSheet.tsx

@@ -0,0 +1,135 @@
+import { Button } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import { GoogleMap } from "./GoogleMap";
+import styles from "./MapBottomSheet.module.css";
+import { MapFallback } from "./MapFallback";
+
+interface MapBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: string;
+  onSave: (value: string) => void;
+}
+
+interface LocationData {
+  lat: number;
+  lng: number;
+  address: string;
+}
+
+export function MapBottomSheet({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: MapBottomSheetProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(initialValue);
+  const [selectedLocation, setSelectedLocation] = useState<LocationData | null>(
+    null
+  );
+  const [useMapFallback, setUseMapFallback] = useState(false);
+
+  useEffect(() => {
+    setValue(initialValue);
+    
+    // Try to parse initialValue as JSON to set selectedLocation
+    if (initialValue) {
+      try {
+        const parsed = JSON.parse(initialValue);
+        if (parsed.lat && parsed.lng && parsed.address) {
+          setSelectedLocation(parsed);
+        }
+      } catch {
+        // If parsing fails, it's just a string value, not a location object
+        setSelectedLocation(null);
+      }
+    }
+  }, [initialValue]);
+
+  const handleLocationSelect = (lat: number, lng: number, address: string) => {
+    console.log('Location selected:', { lat, lng, address });
+    setSelectedLocation({ lat, lng, address });
+    setValue(address);
+  };
+
+  const handleSave = () => {
+    console.log('Save clicked, selectedLocation:', selectedLocation);
+    if (selectedLocation) {
+      onSave(JSON.stringify(selectedLocation));
+    } else {
+      onSave(value);
+    }
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    setSelectedLocation(null);
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("cart.selectLocation")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={"100vh"}
+      snapPoints={["100vh"]}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          padding: 0, // Override ProBottomSheet padding
+          margin: 0, // Remove any margins
+        }}
+      >
+        <div className={styles.mapContainer}>
+          <div className={styles.mapWrapper}>
+            {useMapFallback ? (
+              <MapFallback 
+                onLocationSelect={handleLocationSelect} 
+                height="100%" 
+                initialAddress={selectedLocation?.address || ""}
+              />
+            ) : (
+              <GoogleMap onLocationSelect={handleLocationSelect} height="100%" />
+            )}
+          </div>  
+        </div>
+
+        {!useMapFallback && (
+          <div className={styles.fallbackButton}>
+            <Button 
+              type="link" 
+              size="small"
+              onClick={() => setUseMapFallback(true)}
+            >
+              {t("cart.mapFallbackText")}
+            </Button>
+          </div>
+        )}
+
+        <div className={styles.actionButtons}>
+          <Button className={styles.actionButton} onClick={handleCancel}>
+            {t("cart.cancel")}
+          </Button>
+          <Button
+            type="primary"
+            className={styles.actionButton}
+            onClick={handleSave}
+            disabled={!selectedLocation}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
+      </div>
+    </ProBottomSheet>
+  );
+}