Added user geolocation detection for map at cart

Author: andriiafanasiev

Diff for: package-lock.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^11.0.5",

Diff for: package.json

@@ -1,20 +1,76 @@
+import { useEffect, useState, useRef } from 'react';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
 import { FaTruck } from 'react-icons/fa';
+import L from 'leaflet';
+
+// Custom marker icon
+const customIcon = new L.Icon({
+  iconUrl:
+    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+});
+
+const MoveMap = ({ location }) => {
+  const map = useMap();
+  useEffect(() => {
+    map.setView([location.lat, location.lng], 13, { animate: true });
+  }, [location, map]);
+  return null;
+};
 
 const DeliveryCard = () => {
+  const [location, setLocation] = useState({ lat: 50.4501, lng: 30.5234 }); // Default: Kyiv
+  const [userLocated, setUserLocated] = useState(false);
+  const [error, setError] = useState(null);
+  const mapRef = useRef(null);
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const newLocation = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          };
+          setLocation(newLocation);
+          setUserLocated(true);
+        },
+        (error) => {
+          console.error('Geolocation error:', error);
+          setError('Location access denied. Using default location (Kyiv).');
+        }
+      );
+    } else {
+      setError('Geolocation is not supported in this browser.');
+    }
+  }, []);
+
   return (
-    <div className="p-4 shadow-lg rounded-2xl w-full  bg-white">
-      <h2 className="text-lg font-semibold mb-2 self-start">Delivery</h2>
+    <div className="p-4 shadow-lg rounded-2xl w-full bg-white">
+      <h2 className="text-lg font-semibold mb-2">Delivery</h2>
       <div className="relative w-full h-40 rounded-lg overflow-hidden">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093703!2d144.95373631531795!3d-37.816279979751554!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf57760c2f073bdde!2sMelbourne%20CBD%2C%20Victoria%2C%20Australia!5e0!3m2!1sen!2sus!4v1633044297056!5m2!1sen!2sus"
-          width="100%"
-          height="100%"
-          style={{ border: 0 }}
-          allowFullScreen=""
-          loading="lazy"
-          referrerPolicy="no-referrer-when-downgrade"
-        ></iframe>
+        <MapContainer
+          center={[location.lat, location.lng]}
+          zoom={13}
+          style={{ height: '100%', width: '100%' }}
+          ref={mapRef}
+        >
+          <TileLayer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          />
+          <Marker position={[location.lat, location.lng]} icon={customIcon}>
+            <Popup>
+              {userLocated ? 'You are here!' : 'Default location: Kyiv'}
+            </Popup>
+          </Marker>
+          <MoveMap location={location} />
+        </MapContainer>
       </div>
+      {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
       <div className="flex justify-between items-center mt-4">
         <div className="flex items-center gap-2">
           <FaTruck size={20} />