Initial commit

src/components/CustomBottomSheet/MapFallback.tsx

@@ -0,0 +1,114 @@
+
+import { Button, Input, Space, Typography } from "antd";
+import { useState } from "react";
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+interface MapFallbackProps {
+  onLocationSelect?: (lat: number, lng: number, address: string) => void;
+  height?: string;
+  initialAddress?: string;
+}
+
+export function MapFallback({ onLocationSelect, height = "100%", initialAddress = "" }: MapFallbackProps) {
+  const [address, setAddress] = useState(initialAddress);
+
+  // Prevent events from bubbling up to parent components
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleMouseUp = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleWheel = (e: React.WheelEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleSubmit = () => {
+    if (address.trim()) {
+      // For fallback, we'll use dummy coordinates
+      // In a real implementation, you might want to use a geocoding service
+      const dummyLat = 24.7136 + (Math.random() - 0.5) * 0.01;
+      const dummyLng = 46.6753 + (Math.random() - 0.5) * 0.01;
+      onLocationSelect?.(dummyLat, dummyLng, address);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: height,
+        padding: "20px",
+        backgroundColor: "#f8f9fa",
+        borderRadius: "8px",
+        border: "2px dashed #dee2e6",
+      }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onWheel={handleWheel}
+    >
+      <div
+        style={{
+          textAlign: "center",
+          marginBottom: "20px",
+        }}
+      >
+        <div style={{ fontSize: "48px", marginBottom: "12px" }}>📍</div>
+        <Text strong style={{ fontSize: "16px" }}>
+          Map Not Available
+        </Text>
+        <br />
+        <Text type="secondary" style={{ fontSize: "12px" }}>
+          Please enter your address manually
+        </Text>
+      </div>
+
+      <Space direction="vertical" size="middle" style={{ flex: 1 }}>
+        <div>
+          <Text strong>Enter Address:</Text>
+          <TextArea
+            rows={4}
+            placeholder="Enter your full address including street, city, and postal code..."
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            style={{ marginTop: "8px" }}
+          />
+        </div>
+
+        <Button
+          type="primary"
+          onClick={handleSubmit}
+          disabled={!address.trim()}
+          style={{ alignSelf: "flex-end" }}
+        >
+          Use This Address
+        </Button>
+      </Space>
+    </div>
+  );
+}