Integrating map

scruter-nextjs/app/(routes)/(mainNavPages)/food/page.tsx

@@ -7,6 +7,7 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons'; // Import FontAwes
 import { GetAllListing, ListingWithImages } from '@/actions/seller/listing';
 import toast, { Toaster } from 'react-hot-toast';
 import ListingCardFE from '@/components/listingCardFE';
+import { Search } from 'lucide-react';
 
 const FoodPage: React.FC = () => {
   const [foodItems, setFoodItems] = useState<ListingWithImages[]>([]);
@@ -82,8 +83,7 @@ const FoodPage: React.FC = () => {
               value={query}
               onChange={e => setQuery(e.target.value)}
             />
-            <FontAwesomeIcon
-              icon={faSearch} // Using FontAwesomeIcon component
+            <Search
               className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
             />
           </div>

scruter-nextjs/app/seller/[sellerId]/components/main.tsx

@@ -4,6 +4,7 @@ import ListingDetails from './listingDetails';
 import SelectCategory from './selectCategory';
 import { Toaster } from 'react-hot-toast';
 import SelectImage from './selectImage';
+import MapLocationForm from './mapLocationForm';
 
 const Main = ({ sellerId }: { sellerId: string }) => {
   const {
@@ -83,6 +84,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
         {currentStep === 1 && <ListingDetails />}
         {currentStep === 2 && <SelectCategory />}
         {currentStep === 3 && <SelectImage />}
+        {currentStep === 4 && <MapLocationForm />}
         {!formCompleted && (
           <footer className="md:block hidden w-full left-0 right-0 bottom-0">
             <div className="flex">
@@ -99,7 +101,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
               <div className="text-right text-sm mt-2">
                 <button
                   onClick={
-                    currentStep === 3
+                    currentStep === 4
                       ? e => {
                           e.preventDefault();
                           submitListingForm(sellerId);
@@ -108,7 +110,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
                   }
                   className="bg-black text-gray-200 rounded-full p-3"
                 >
-                  {currentStep === 3 ? 'Confirm' : 'Next Step'}
+                  {currentStep === 4 ? 'Confirm' : 'Next Step'}
                 </button>
               </div>
             </div>
@@ -133,7 +135,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
               <div className="text-right">
                 <button
                   onClick={
-                    currentStep === 3
+                    currentStep === 4
                       ? e => {
                           e.preventDefault();
                           submitListingForm(sellerId);
@@ -142,7 +144,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
                   }
                   className="bg-black text-gray-200 rounded-full p-2"
                 >
-                  {currentStep === 3 ? 'Confirm' : 'Next Step'}
+                  {currentStep === 4 ? 'Confirm' : 'Next Step'}
                 </button>
               </div>
             </div>

scruter-nextjs/app/seller/[sellerId]/components/mapLocationForm.tsx

@@ -0,0 +1,36 @@
+import LazyMap from "@/components/Maps/PinDropInput/LazyMapWithPin";
+import StorePage from "@/components/Maps/PinDropInput/mapWithPin";
+import MapWithPin from "@/components/Maps/PinDropInput/mapWithPinComp";
+import { useGlobalListing } from "@/context/GlobalListingProvider";
+
+const MapLocationForm = () => {
+  const { listingLat, listingLng, setListingLat, setListingLng } = useGlobalListing()
+  return (
+    <div>
+      <h1 className="text-primary-marineBlue h-3/4 font-bold text-[1.6rem] md:text-4xl leading-9">
+        Listing Location
+      </h1>
+      <h3 className="text-gray-400 mt-2">
+        Please drop a pin on the location of your Listing
+        {/* {ListingLat},{ListingLng} */}
+      </h3>
+      {/* <div className="w-full h-2/4"> */}
+      {/* <LazyMap
+        latitude={listingLat}
+        longitude={listingLng}
+        setLatitude={(lat: number) => setListingLat(lat)}
+        setLongitude={(lng: number) => setListingLng(lng)}
+      /> */}
+      <StorePage
+        latitude={listingLat}
+        longitude={listingLng}
+        setLatitude={(lat: number) => setListingLat(lat)}
+        setLongitude={(lng: number) => setListingLng(lng)}
+      />
+
+      {/* </div> */}
+    </div>
+  );
+};
+
+export default MapLocationForm;

scruter-nextjs/app/seller/[sellerId]/components/sidebarConstants.tsx

@@ -14,4 +14,9 @@ export const data = [
     step: 'step 3',
     title: 'Upload Immages',
   },
+  {
+    id: 4,
+    step: 'step 4',
+    title: 'select Location',
+  },
 ];

scruter-nextjs/context/GlobalListingProvider.tsx

@@ -26,6 +26,10 @@ interface GlobalContextType {
   setListingCategory: (category: Category) => void; // Ensure this matches your Category type
   imageUrl: string[];
   setImageUrl: (url: string[]) => void;
+  listingLat: number;
+  setListingLat: (lat: number) => void;
+  listingLng: number;
+  setListingLng: (lng: number) => void;
 
   handleImageChange: (url: string) => void;
   handleImageRemove: (url: string) => void;
@@ -69,7 +73,7 @@ export const GlobalListingProvider = ({
 }: {
   children: ReactNode;
 }) => {
-  const [currentStep, setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(4);
   const [completed, setCompleted] = useState(false);
 
   const [listingName, setListingName] = useState('');
@@ -78,6 +82,9 @@ export const GlobalListingProvider = ({
   const [listingCategory, setListingCategory] = useState<Category>(
     Category.Housing
   ); // Ensure you set the default correctly
+  const [listingLat, setListingLat] = useState(28.61);
+  const [listingLng, setListingLng] = useState(77.23);
+
 
   const [validListingName, setValidListingName] = useState(false);
   const [validListingPrice, setValidListingPrice] = useState(false);
@@ -139,6 +146,17 @@ export const GlobalListingProvider = ({
       setValidImageUrls(true); // At least one image URL is present
     }
 
+    if (listingLat < -90 || listingLat > 90) {
+      toast.error('Latitude must be between -90 and 90.');
+      allValid = false;
+    }
+
+    if (listingLng < -180 || listingLng > 180) {
+      toast.error('Longitude must be between -180 and 180.');
+      allValid = false;
+    }
+
+
     // Check if all fields are valid
     if (allValid) {
       setFormCompleted(true); // Set form completed to true
@@ -159,6 +177,8 @@ export const GlobalListingProvider = ({
             description: listingDescription,
             category: listingCategory,
             images: imageUrl,
+            listingLat,
+            listingLng
           },
         });
 
@@ -197,6 +217,11 @@ export const GlobalListingProvider = ({
         handleImageChange,
         handleImageRemove,
 
+        listingLat,
+        listingLng,
+        setListingLat,
+        setListingLng,
+
         validListingName,
         setValidListingName,
         validListingPrice,