complete enchnce add to cart

src/App.jsx

@@ -20,6 +20,7 @@ import { AllDataProvider } from './context/MyContext';
 import Popupmodelforbuy from './Pages/Popupmodelforbuy';
 import SigninandsignUp from './Pages/SigninandsignUp';
 import AllOrderProducts from './Pages/AllOrderProducts';
+import Addtocart from './Pages/Addtocart';
 
 
 
@@ -50,7 +51,7 @@ const MainCont = () => {
           <Route path="/Services" element={<Services/>}/> 
           <Route path='/SigninandsignUp' element={<SigninandsignUp/>}/>
           <Route path='/AllOrderProducts' element={<AllOrderProducts/>}/>
-
+      <Route path='/ADDtocart' element={<Addtocart/>}   />
           <Route path="/RentForm" element={<RentForm />} />
           <Route path="/Popupmodelforbuy" element={<Popupmodelforbuy/>} />
 

src/DesignSection/ParentRent.jsx

@@ -7,10 +7,11 @@ import { useNavigate } from 'react-router-dom';
 
 
 const ParentRent = ({ scrollToTop }) => {
+
   const { selectRate, PriceRange, PriceOrder,ForSearching,setRentData} = useContext(AllDataContext)
   const navigate = useNavigate();
   const [filteredData, setFilteredData] = useState(IndexForRent);
-  const [moneyRent, setmoneyRent] = useState(null);
+  // const [moneyRent, setmoneyRent] = useState(null);
 
   useEffect(() => {
     AOS.init({
@@ -22,10 +23,11 @@ const ParentRent = ({ scrollToTop }) => {
 
   }, []);
 
- 
+
   const handleRentNow = (card) => {
     setRentData({ description: card.NAME, image: card.image, type: card.type, OneDayprice: card.OneDayprice });
     console.log(card.OneDayprice)    
+
     navigate(`/Description`);
     if (scrollToTop) {
       scrollToTop();  // Call scrollToTop after navigation

src/Pages/Addtocart.jsx

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react'
+import { AllDataContext } from '../context/MyContext'
+
+const Addtocart = () => {
+
+const {cartItems}=useContext(AllDataContext)
+
+
+
+
+
+
+
+
+
+
+
+
+  return (
+    <div className="flex flex-wrap justify-center p-6 bg-gray-100">
+    {cartItems.map((item, index) => (
+      <div
+        key={index}
+        className="max-w-xs rounded-lg overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300 m-4 bg-white"
+      >
+        <div className="relative">
+          <img
+            className="w-full h-48 object-cover"
+            src={item.imageURL}
+            alt={item.Nameproduct}
+          />
+          <div className="absolute top-0 left-0 bg-gradient-to-r from-black to-transparent p-4">
+            <span className="text-white text-lg font-semibold">
+              {item.type}
+            </span>
+          </div>
+        </div>
+        <div className="px-6 py-4">
+          <div className="font-bold text-xl mb-2 text-gray-800">
+            {item.Nameproduct}
+          </div>
+          <p className="text-green-500 text-2xl font-bold">
+            ₹{item.price.toLocaleString()}
+          </p>
+          <p className="text-gray-600 mt-2">
+            Tax: ₹{item.alltax.toLocaleString()}
+          </p>
+          {item.forRentmoney && (
+            <p className="text-blue-500 mt-2">
+              Rent: ₹{item.forRentmoney.toLocaleString()}
+            </p>
+          )}
+        </div>
+        <div className="px-6 pt-4 pb-2">
+          {/* <button className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full shadow-md">
+            Add to Cart
+          </button> */}
+        </div>
+      </div>
+    ))}
+  </div>
+  )
+}
+
+export default Addtocart

src/Pages/Description.jsx

@@ -12,7 +12,7 @@ const Description = () => {
   const descriptionRef = useRef(null);
   let Desc = "Lorem ipsum dolor sit amet consectetur adipisicing elit..."; // Your description goes here
 
-  const { RentFormDataimage, RentFormDataprice, RentFormDataNAME, electricComponets } = useContext(AllDataContext);
+  const { RentFormDataimage, RentFormDataprice, RentFormDataNAME, electricComponets, tax,RentFormDatatype,ADDTOCART,moneydetailRent} = useContext(AllDataContext);
   const navigate = useNavigate();
 
   const [renderRelatedProduct, setRenderRelatedProduct] = useState(null);
@@ -29,7 +29,20 @@ const Description = () => {
     }
   };
 
+
+  const Addtocart = () => {
+    const img = RentFormDataimage;
+    const price = RentFormDataprice;
+    const Namepro = RentFormDataNAME;
+    const type = RentFormDatatype;
+    const alltax = tax;
+  const moneydetailrent=moneydetailRent
+    ADDTOCART(img, Namepro, price, type, alltax,moneydetailrent);
+  }
 
+
+
+
 
   useEffect(() => {
     if (electricComponets === "Regular") {
@@ -98,7 +111,7 @@ const Description = () => {
 
           <div className="flex items-center gap-9 mt-3">
             <button className="px-4 py-2 bg-blue-400 text-white hover:bg-blue-800 transition duration-300" onClick={navigateToRENTFORM}>{buyrent}</button>
-            <button className="px-4 py-2 bg-black text-white hover:bg-white hover:text-black transition duration-300">Add to Cart</button>
+            <button className="px-4 py-2 bg-black text-white hover:bg-white hover:text-black transition duration-300" onClick={Addtocart}>Add to Cart</button>
           </div>
 
           <div>

src/Pages/Popupmodelforbuy.jsx

@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { AllDataContext } from '../context/MyContext';
 import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+
+
 import { useNavigate } from 'react-router-dom';
 
 const Modal = ({ close }) => {

src/components/Header.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import { AllDataContext } from "../context/MyContext";
-
+import { MdAddShoppingCart } from "react-icons/md";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -92,6 +92,15 @@ const Header = () => {
 >
    {forlogologin? forlogologin: 'Sign Up' }
 </Link>
+
+
+
+<Link
+  to="/ADDtocart"
+ className="flex items-center justify-center text-green-800 bg-white rounded-full poetsen-one-regular2"
+>
+ < MdAddShoppingCart />
+</Link>
 
               </div>
             </div>
@@ -156,6 +165,14 @@ const Header = () => {
                     {forlogologin? forlogologin: 'Sign Up' }
                   </Link>
                 </li>
+                <li>
+                <Link
+  to="/ADDtocart"
+  className="block py-2 px-3 text-white rounded-full md:bg-transparent md:p-0 headingLink poetsen-one-regular2"
+>
+  <MdAddShoppingCart className="text-3xl" />
+</Link>
+                </li>
               </ul>
             </div>
           )}

src/context/MyContext.jsx

@@ -28,9 +28,8 @@ export const AllDataProvider = ({ children }) => {
 
 
 
-
-  const [RentFormDataimage, setRentFormDataimage] = useState(null);
-  const [RentFormDataprice, setRentFormDataimageprice] = useState(null);
+  const [RentFormDataimage,setRentFormDataimage] = useState(null);
+  const [RentFormDataprice,setRentFormDataimageprice] = useState(null);
   const [RentFormDatatype, setRentFormDataimagetype] = useState(null);
   const [RentFormDataNAME, setRentFormDataimageNAME] = useState(null);
   const [electricComponets,setelectricComponents]=useState(null)
@@ -249,11 +248,64 @@ useEffect(() => {
 }, [RENTorders]);
 
 
+
+//////////////////////////////////////////////////////////////////////////////////
+// here Addtocart 
+
+const [cartItems, setCartItems] = useState([]);
+
+
+const ADDTOCART = async (img, Nameproduct, price, type, alltax, forRentmoney) => {
+  try {
+    // Fetch the image from the URL and convert it into a Blob
+    const response = await fetch(img);
+    const blob = await response.blob();
+
+    // Create a reference for the image in Firebase Storage
+    const imageRef = ref(storage, `uploads/images/${Date.now()}-${Nameproduct}.jpg`);
+
+    // Upload the Blob to Firebase Storage
+    const uploadResult = await uploadBytes(imageRef, blob);
+    console.log("Image uploaded successfully:", uploadResult);
+
+    // Get the download URL of the uploaded image
+    const downloadURL = await getDownloadURL(uploadResult.ref);
+    console.log("Download URL:", downloadURL);
+
+    // Prepare the data object
+    const data = {
+      Nameproduct: Nameproduct || "",  // Provide a default value if undefined
+      price: price !== undefined ? price : 0,  // Ensure price is defined
+      type: type || "",
+      alltax: alltax !== undefined ? alltax : 0,
+      imageURL: downloadURL,
+    };
+
+    // Only add forRentmoney if it's defined
+    if (forRentmoney !== undefined) {
+      data.forRentmoney = forRentmoney;
+    }
+
+    // Update the state with the new cart item
+    setCartItems(prevItems => [...prevItems, data]);
+
+    // Create a new document in the 'addtocart' collection in Firestore
+    const newDocRef = await addDoc(collection(firestore, 'addtocart'), data);
+
+    console.log("Buy order created successfully:", newDocRef.id);
+    return newDocRef;
+  } catch (error) {
+    console.error("Error creating buy order:", error.message);
+    throw error;  // Optionally rethrow the error after logging
+  }
+};
+
+
 
 
   return (
     <AllDataContext.Provider value={{ setRentData, RentFormDataimage,RentFormDataNAME,RentFormDatatype,RentFormDataprice,electricComponets,tax,rateingfiltar,selectRate,PriceOrder,SearchingProducts,PriceRange,ForSearching,signUpWithEmailAndPassword,signInWithEmailAndPasswordFunc,islogin,
-        user,Forsigintextlogo,forlogologin,handleCreateBuyOrders,orders,moneydetailRent,RENTorders,handleCreateRentOrder,RENTorders   }}>
+        user,Forsigintextlogo,forlogologin,handleCreateBuyOrders,orders,moneydetailRent,RENTorders,handleCreateRentOrder,ADDTOCART,cartItems  }}>
       {children}
     </AllDataContext.Provider>
   );