Merge pull request #31 from atlp-rwanda/ft-browser-location

Ft browser location

package.json

@@ -19,6 +19,7 @@
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@headlessui/react": "^2.1.2",
     "@reduxjs/toolkit": "^2.2.5",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.3",

src/Lib/locationButton.tsx

@@ -0,0 +1,96 @@
+
+import React, { useState, useEffect } from "react";
+import { HiMapPin } from "react-icons/hi2";
+import { toast } from "react-toastify";
+
+
+function LocationButton() {
+  const [location, setLocation] = useState<{
+    latitude: number;
+    longitude: number;
+  } | null>(null);
+  const address = typeof window !== "undefined" && localStorage?.getItem("delivery_address");
+  const [currentAddress, setCurrentAddress] = useState(address) || "";
+
+  const handleClick = () => {
+    if ("geolocation" in navigator) {
+      // console.log("i am here")
+      navigator.permissions
+        .query({ name: "geolocation" })
+        .then((result) => {
+          if (result.state === "granted" || result.state === "prompt") {
+            navigator.geolocation.getCurrentPosition(
+              (position) => {
+                const { latitude, longitude } = position.coords;
+                setLocation({ latitude, longitude });
+              },
+              (error) => {
+                toast.error(error.message);
+              }
+            );
+          } else if (result.state === "denied") {
+            toast.error("Allow the location access");
+          }
+        })
+        .catch((error: any) => {
+          console.error("Error checking the location permission:", error);
+        });
+    } else {
+      toast.error("Sorry! geolocation is not supported by this browser");
+    }
+  };
+
+  useEffect(() => {
+    if (location) {
+      const endpoint = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${location.latitude},${location.longitude}&result_type=street_address&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`;
+      fetch(endpoint)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log(data);
+          if (data.results && data.results.length > 0) {
+            const { formatted_address, address_components } = data.results[0];
+            const city = address_components.find((component: any) =>
+              component.types.includes("locality")
+            )?.long_name;
+            const street = address_components.find((component: any) =>
+              component.types.includes("route")
+            )?.long_name;
+            localStorage.setItem("delivery_address", formatted_address);
+            localStorage.setItem("delivery_address_city", city);
+            localStorage.setItem("delivery_address_street", street);
+            setCurrentAddress(formatted_address);
+          }
+        })
+        .catch((error) => {
+          console.log("Fetch error: ", error.message);
+        });
+    }
+  }, [location]);
+
+
+
+  return (
+    <>
+      <button
+        onClick={handleClick}
+        className={`flex items-center px-6 py-3 bg-slate-200 rounded-full md:rounded-lg`}
+      >
+        <HiMapPin className="shrink-0 text-secondary" />
+        <span
+          className={
+            "truncate max-w-[8rem]  font-outfit text-sm text-gray-300 md:max-w-full"
+          }
+        >
+          {currentAddress ? currentAddress : "Choose Your Delivery Address"}
+        </span>
+      </button>
+    </>
+  );
+}
+
+export default LocationButton;

src/Routes/index.tsx

@@ -14,6 +14,10 @@ import Analytics from "../pages/Analytics";
 import AdminHome from "../pages/Admin/AdminHome";
 import Homepage from "../pages/Homepage";
 import Products from "../pages/ProductsPage";
+import Location from "../pages/location"
+
+
+
 import { OrderTrackingPage } from "../pages/orderTrackingPage";
 import Cart from "../pages/Cart";
 import Checkout from "../pages/Checkout";
@@ -41,6 +45,9 @@ const AppRoutes: React.FC = () => (
       <Route path="/authgoogle" element={<AuthGoogle />} />
       <Route path="/singleproduct" element={<Singlepage />} />
       <Route path="/products" element={<Products />} />
+      <Route path="/geolocation" element={<Location />} />
+      <Route path="/product/:id" element={<Singlepage />} />
+      <Route path="/order-tracking" element={<OrderTrackingPage />} />
       <Route path="/forgot-password" element={<Forgotpassword />} />
       <Route path="/product/:id" element={<Singlepage />} />
       <Route path="/order/:orderId" element={<OrderTrackingPage />} />

src/pages/location.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import LocationBtn from '../Lib/locationButton';
+
+const location = () => {
+  return (
+	<div className="flex items-center justify-center mt-[120px]">
+		<LocationBtn />
+	</div>
+  )
+}
+
+export default location;
+
+