Add restaurant page with location search

src/components/AutoCompleteSearch.jsx

@@ -1,8 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {useRef} from "react";
 import { FaSearch } from "react-icons/fa";
 import { TbCurrentLocation } from "react-icons/tb";
 import { useNavigate } from "react-router-dom";
-import { useLoadScript, Autocomplete} from "@react-google-maps/api";
+import { useLoadScript, Autocomplete } from "@react-google-maps/api";
+
+const libraries = ["places"];
 
 function AutocompleteSearch() {
   const inputRef = useRef();
@@ -40,7 +42,7 @@ function AutocompleteSearch() {
 
   const { isLoaded, loadError } = useLoadScript({
     googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY, // Replace with your actual API key
-    libraries: ["places"],
+    libraries: libraries,
   });
 
   if (loadError) return "Error loading maps";

src/components/Location.jsx

@@ -1,19 +1,37 @@
-import { GoogleMap, MarkerF } from "@react-google-maps/api";
+import { GoogleMap, MarkerF, useLoadScript } from "@react-google-maps/api";
+import { useEffect, useState } from "react";
+
+const libraries = ["places"];
 
 function Location(props) {
+  const [location, setLocation] = useState({
+    lat: 40.6851868,
+    lng: -73.97599050000001
+  })
+
+  useEffect(() => {
+    setLocation({
+      lat: parseFloat(props.latitude),
+      lng: parseFloat(props.longitude),
+    });
+  }, [props.latitude, props.longitude]);
+
+  const { isLoaded, loadError } = useLoadScript({
+    googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY, // Replace with your actual API key
+    libraries: libraries,
+  });
+
+  if (loadError) return "Error loading maps";
+  if (!isLoaded) return "Loading Maps";
 
-  const currentLocation = {
-    lat: parseFloat(props.latitude),
-    lng: parseFloat(props.longitude),
-  };
 
   return (
     <GoogleMap
       zoom={20}
-      center={currentLocation}
-      mapContainerClassName="w-screen h-screen"
+      center={location}
+      mapContainerClassName="w-full h-full"
     >
-      <MarkerF position={currentLocation} />
+      <MarkerF position={location} />
     </GoogleMap>
   );
 }

src/components/RestaurantDetailsForm.jsx

@@ -0,0 +1,158 @@
+import RestaurantLocationSearch from "./RestaurantLocationSearch";
+import { useState } from "react";
+import Location from "./Location";
+
+function RestaurantDetails() {
+  const [restaurantLocation, setRestaurantLocation] = useState({
+    lat: 40.6851868,
+    lng: -73.97599050000001,
+    country: "",
+    state: "",
+    locality: "",
+    postalCode: ""
+  });
+
+  return (
+    <div className="mt-10">
+      <div className="border rounded-lg p-4">
+        <h2 className="text-xl">Restaurant details</h2>
+        <h3 className="text-thin text-sm">Name, address and location</h3>
+        <div className="mt-10">
+          <form className="flex flex-col gap-10" action="">
+            <input
+              className="border rounded-lg w-full p-2"
+              type="text"
+              name="restaurantName"
+              id=""
+              placeholder="Restaurant Name"
+            />
+            <input
+              className="border rounded-lg w-full p-2"
+              type="text"
+              name="restaurantAddress"
+              id=""
+              placeholder="Restaurant Complete address"
+            />
+          </form>
+          <p className="border-2 rounded-lg p-1 text-xs mt-3 text-textColor">
+            Please ensure this is same as the address on your FSSAI document (if
+            applicable)
+          </p>
+          <div className="mt-10">
+            <h3 className="text-l">
+              Please place the pin accurately at your outlet's location on the
+              map
+            </h3>
+            <h5 className="text-sm">
+              This will help users to locate your store
+            </h5>
+            <div className="mt-3">
+              <RestaurantLocationSearch
+                restaurantLocation={restaurantLocation}
+                setRestaurantLocation={setRestaurantLocation}
+              />
+              <div className="w-full h-80 rounded-xl border mt-3">
+                <Location
+                  latitude={restaurantLocation.lat}
+                  longitude={restaurantLocation.lng}
+                />
+              </div>
+            </div>
+            <div className="mt-10">
+              <h3 className="text-l">Restaurant address details</h3>
+              <h5 className="text-sm">
+                Address details are basis the restaurant location mentioned
+                above
+              </h5>
+              <div className="flex flex-wrap gap-4 w-full mt-4">
+                <input
+                  className="border rounded-lg p-2 w-5/12"
+                  type="text"
+                  name="Country"
+                  id=""
+                  placeholder={restaurantLocation.country}
+                />
+                <input
+                  className="border rounded-lg p-2 w-5/12"
+                  type="text"
+                  name="pincode"
+                  id=""
+                  placeholder={restaurantLocation.postalCode}
+                />
+                <input
+                  className="border rounded-lg p-2 w-5/12"
+                  type="text"
+                  name="City"
+                  id=""
+                  placeholder={restaurantLocation.locality}
+                />
+                <input
+                  className="border rounded-lg p-2 w-5/12"
+                  type="text"
+                  name="State"
+                  id=""
+                  placeholder={restaurantLocation.state}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="border rounded-lg p-4 mt-10">
+        <h2 className="text-xl">Contact number at restaurant</h2>
+        <h3 className="text-thin text-sm">
+          Users will call on this number for general enquiries
+        </h3>
+        <div className="mt-4 flex gap-24">
+          <div className="flex w-full gap-2 items-center border rounded-lg">
+            <span>+91</span>
+            <div className="border h-8"></div>
+            <input
+              className="p-2 w-full"
+              type="text"
+              placeholder="Mobile number at restaurant"
+            />
+          </div>
+          <button className="border rounded-lg w-1/3 bg-gray-200">
+            Verify
+          </button>
+        </div>
+      </div>
+      <div className="border rounded-lg p-4 mt-10 flex flex-col gap-4">
+        <div>
+          <h2 className="text-xl">Restaurant owner details</h2>
+          <h3 className="text-thin text-sm">
+            These will be used to share revenue related communications
+          </h3>
+        </div>
+        <div className="flex gap-5">
+          <input
+            className="p-2 w-5/12 border rounded-lg"
+            type="text"
+            placeholder="Restaurant owner full name"
+          />
+          <input
+            className="p-2 w-5/12 border rounded-lg"
+            type="text"
+            placeholder="Restaurant owner email address"
+          />
+        </div>
+        <div className="mt-4 flex gap-24">
+          <div className="flex w-full gap-2 items-center border rounded-lg">
+            <span>+91</span>
+            <div className="border h-8"></div>
+            <input
+              className="p-2 w-full"
+              type="text"
+              placeholder="Mobile number at restaurant"
+            />
+          </div>
+          <button className="border rounded-lg w-1/3 bg-gray-200">
+            Verify
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default RestaurantDetails;

src/components/RestaurantLocationSearch.jsx

@@ -0,0 +1,117 @@
+import React, {useRef} from "react";
+import { FaSearch } from "react-icons/fa";
+import { TbCurrentLocation } from "react-icons/tb";
+import { useLoadScript,Autocomplete } from "@react-google-maps/api";
+
+const libraries = ["places"]
+
+function RestaurantLocationSearch(props) {
+  const inputRef = useRef();
+
+  const handlePlaceChanged = () => {
+    const place = inputRef.current.getPlace();
+      if (place) {
+      console.log(place.formatted_address);
+      props.setRestaurantLocation( {
+        lat: place.geometry.location.lat(),
+        lng: place.geometry.location.lng(),
+        country: place.address_components.find(component =>
+    component.types.includes("country")
+          )?.long_name,
+        state: place.address_components.find(component =>
+    component.types.includes("administrative_area_level_1")
+          )?.long_name,
+        locality: place.address_components.find(component =>
+    component.types.includes("locality")
+          )?.long_name,
+        postalCode: place.address_components.find(component =>
+    component.types.includes("postal_code")
+          )?.long_name,        
+      });
+    }
+  };
+
+  const getUserLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+          const userLocation = {
+                lat: position.coords.latitude,
+                lng: position.coords.longitude      
+          };
+
+          fetch(
+            `https://maps.googleapis.com/maps/api/geocode/json?latlng=${
+              userLocation.lat
+            },${userLocation.lng}&key=${
+              import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY
+            }`
+          )
+            .then((response) => response.json())
+            .then((data) => {
+              const country = data.results[0].address_components.find(
+                (component) => component.types.includes("country")
+              )?.long_name;
+
+              const state = data.results[0].address_components.find(
+                (component) =>
+                  component.types.includes("administrative_area_level_1")
+              )?.long_name;
+
+              const locality = data.results[0].address_components.find(
+                (component) => component.types.includes("locality")
+              )?.long_name;
+              const postalCode = data.results[0].address_components.find(
+                (component) => component.types.includes("postal_code")
+              )?.long_name;
+
+              // Update the restaurant location with the postal code
+              props.setRestaurantLocation((prevLocation) => ({
+                  ...prevLocation,
+                  lat: userLocation.lat,
+                  lng: userLocation.lng,
+                  country: country || "",
+                  state: state || "",
+                  locality: locality || "",
+                  postalCode: postalCode || "",
+
+              }));
+            })
+            .catch((error) => {
+              console.error("Error fetching postal code:", error);
+            });
+    });
+    }
+  };
+
+  const { isLoaded, loadError } = useLoadScript({
+    googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY, // Replace with your actual API key
+    libraries: libraries,
+  });
+
+  if (loadError) return "Error loading maps";
+  if (!isLoaded) return "Loading Maps";
+
+  return (
+    <div className="mt-3">
+      <div className="bg-white w-full rounded-xl h-12 flex items-center px-4 border">
+        <FaSearch className="text-primary text-xl" />
+        <Autocomplete
+          className="w-full"
+          onLoad={(ref) => (inputRef.current = ref)}
+          onPlaceChanged={handlePlaceChanged}
+        >
+          <input
+            placeholder="Type to Search..."
+            className="bg-transparent border-none text-xl h-full w-full ml-2.5 focus:outline-none"
+          />
+        </Autocomplete>
+        <TbCurrentLocation
+          onClick={getUserLocation}
+          className="text-primary text-2xl ml-4"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default RestaurantLocationSearch;

src/pages/AddRestaurantForm.jsx

@@ -0,0 +1,16 @@
+import RestaurantDetails from "../components/RestaurantDetailsForm";
+
+function AddRestaurant() {
+    return (
+      <div className="py-20">
+        <div className="m-auto w-5/12">
+          <h1 className="text-thin text-3xl">
+            Restaurant Information
+          </h1>
+          <RestaurantDetails />
+        </div>
+      </div>
+    );
+}
+
+export default AddRestaurant;

src/pages/NearByRestaurants.jsx

@@ -1,12 +1,14 @@
 import { useLocation } from "react-router-dom";
 import Location from "../components/Location";
+
 function NearByRestaurants() {
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const latitude = params.get("lat");
   const longitude = params.get("lng");
+
   return (
-    <div>
+    <div className="w-screen h-screen">
       <Location
         latitude={latitude}
         longitude={longitude}