diff --git a/src/components/AutoCompleteSearch.jsx b/src/components/AutoCompleteSearch.jsx
index 54184af..bf091e9 100644
--- a/src/components/AutoCompleteSearch.jsx
+++ b/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";
diff --git a/src/components/Location.jsx b/src/components/Location.jsx
index 93be9b6..20cde85 100644
--- a/src/components/Location.jsx
+++ b/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 (
-
+
);
}
diff --git a/src/components/RestaurantDetailsForm.jsx b/src/components/RestaurantDetailsForm.jsx
new file mode 100644
index 0000000..ce12075
--- /dev/null
+++ b/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 (
+
+
+
Restaurant details
+
Name, address and location
+
+
+
+ Please ensure this is same as the address on your FSSAI document (if
+ applicable)
+
+
+
+ Please place the pin accurately at your outlet's location on the
+ map
+
+
+ This will help users to locate your store
+
+
+
+
+
+
+
+
Contact number at restaurant
+
+ Users will call on this number for general enquiries
+
+
+
+
+
+
Restaurant owner details
+
+ These will be used to share revenue related communications
+
+
+
+
+
+
+
+
+
+ );
+}
+export default RestaurantDetails;
diff --git a/src/components/RestaurantLocationSearch.jsx b/src/components/RestaurantLocationSearch.jsx
new file mode 100644
index 0000000..c628097
--- /dev/null
+++ b/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 (
+
+
+
+
(inputRef.current = ref)}
+ onPlaceChanged={handlePlaceChanged}
+ >
+
+
+
+
+
+ );
+}
+
+export default RestaurantLocationSearch;
diff --git a/src/pages/AddRestaurantForm.jsx b/src/pages/AddRestaurantForm.jsx
new file mode 100644
index 0000000..262cdbd
--- /dev/null
+++ b/src/pages/AddRestaurantForm.jsx
@@ -0,0 +1,16 @@
+import RestaurantDetails from "../components/RestaurantDetailsForm";
+
+function AddRestaurant() {
+ return (
+
+
+
+ Restaurant Information
+
+
+
+
+ );
+}
+
+export default AddRestaurant;
\ No newline at end of file
diff --git a/src/pages/NearByRestaurants.jsx b/src/pages/NearByRestaurants.jsx
index 9a363b7..99f0abb 100644
--- a/src/pages/NearByRestaurants.jsx
+++ b/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 (
-