Demosecond

Frontend/package.json

@@ -12,11 +12,13 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.0.7",
     "axios": "^1.8.4",
+    "crypto-js": "^4.2.0",
     "js-cookie": "^3.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.2.0",
-    "tailwindcss": "^4.0.7"
+    "tailwindcss": "^4.0.7",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

Frontend/src/App.jsx

@@ -6,90 +6,51 @@ import Contact from "./components/Pages/Contact";
 import Products from "./components/Pages/Products";
 import Cart from "./components/Cart/Cart";
 import Login from "./components/Pages/Login";
-import PlaceOrder from "./components/Pages/PlaceOrder";
+import LogOut from "./components/Pages/LogOut";
 import Orders from "./components/Pages/Orders";
-import Navbar from "./components/Pages/Navbar";
-// import Policy from "./components/Pages/Policies";
-import Footer from './components/Pages/Footer';
+import Footer from "./components/Pages/Footer";
 import Collection from "./components/Pages/Collection";
 import Register from "./components/Pages/Register";
 import SearchBar from "./components/Pages/SearchBar";
-// import AuthProtected from "./components/AuthProtected";
-// import { ShopContextProvider } from "./components/Context/ShopContext";
+import Navbar from "./components/Pages/Navbar";
+import PaymentGateway from "./components/Payment/PaymentGateway";
+import Success from "./components/Payment/Success";
+import Failure from "./components/Payment/Failure";
+import ShopContextProvider from "./components/Context/ShopContext";
+
+
 function App() {
 	return (
 		<>
-
-			<Navbar/>
-			<SearchBar/>
+			{/* <AuthProvider> */}
+			<ShopContextProvider>
+				<Navbar />
+				<SearchBar />
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="/collection" element={<Collection />} />
 					<Route path="/about" element={<About />} />
 					<Route path="/contact" element={<Contact />} />
 					<Route path="/product/:productId" element={<Products />} />
 					<Route path="/cart" element={<Cart />} />
+					{/* <Route path="/cart" element={<CartPage />} /> */}
+
 					<Route path="/login" element={<Login />} />
+					{/* <Route path="/logout" element={<LogOut />} /> */}
 					<Route path="/register" element={<Register />} />
-					<Route path="/place-order" element={<PlaceOrder />} />
 					<Route path="/orders" element={<Orders />} />
+					<Route path="/success" element={<Success/>} />
+					<Route path="/failure" element={<Failure/>} />
+					<Route path="/paymentGateway" element={<PaymentGateway />} />
 				</Routes>
+
 				{/* <Policy/> */}
-		<Footer/>
+				<Footer />
+			</ShopContextProvider>
+
+			{/* </AuthProvider> */}
 		</>
 	);
 }
 
 export default App;
-
-// import React from "react";
-// import { Routes, Route } from "react-router-dom";
-// import Home from "./components/Pages/Home";
-// import About from "./components/Pages/About";
-// import Contact from "./components/Pages/Contact";
-// // import Products from "./components/Pages/Products";
-// import Cart from "./components/Cart/Cart";
-// import Login from "./components/Pages/Login";
-// import Register from "./components/Pages/Register";
-// import PlaceOrder from "./components/Pages/PlaceOrder";
-// import Orders from "./components/Pages/Orders";
-// import Navbar from "./components/Pages/Navbar";
-// import Policy from "./components/Pages/Policies";
-// import Footer from './components/Pages/Footer';
-// import Collection from "./components/Pages/Collection";
-
-
-// // function App() {
-// //     return (
-// //         <ShopContextProvider>
-// //             <Navbar/>
-// //                 <Routes>
-// //                     <Route path="/" element={<Home />} />
-// //                     <Route path="/collection" element={<Collection />} />
-// //                     <Route path="/about" element={<About />} />
-// //                     <Route path="/contact" element={<Contact />} />
-// //                     {/* <Route path="/product/:productId" element={<Products />} /> */}
-// //                     <Route path="/cart" element={
-// //                         <AuthProtected>
-// //                             <Cart />
-// //                         </AuthProtected>
-// //                     } />
-// //                     <Route path="/login" element={<Login />} />
-// //                     <Route path="/register" element={<Register />} />
-// //                     <Route path="/place-order" element={
-// //                         <AuthProtected>
-// //                             <PlaceOrder />
-// //                         </AuthProtected>
-// //                     } />
-// //                     <Route path="/orders" element={
-// //                         <AuthProtected>
-// //                             <Orders />
-// //                         </AuthProtected>
-// //                     } />
-// //                 </Routes>
-// //                 <Policy/>
-// //             <Footer/>
-// //         </ShopContextProvider>
-// //     );
-// // }
-// // export default App;

Frontend/src/components/Cart/Cart.jsx

@@ -1,9 +1,165 @@
-import React from 'react'
+
+
+import React, { useContext, useEffect, useState } from "react";
+import { ShopContext } from "../Context/ShopContext";
+import Title from "../Pages/Title";
+import { Link, useNavigate } from "react-router-dom";
 
 function Cart() {
-  return (
-    <div>Cart</div>
-  )
+	const navigate= useNavigate()
+	const {
+		products,
+		currency,
+		cartItems,
+		getTotalCartAmount,
+		addToCart,
+		removeFromCart,delivery_fee
+	} = useContext(ShopContext);
+	const [cartData, setCartData] = useState([]);
+	const shippingFee = 10;
+
+	useEffect(() => {
+		const tempData = [];
+		Object.keys(cartItems).forEach((itemId) => {
+			if (cartItems[itemId] > 0) {
+				const product = products.find((p) => p.id.toString() === itemId);
+				if (product) {
+					tempData.push({
+						id: itemId,
+						quantity: cartItems[itemId],
+						product: {
+							...product,
+							img: getImageUrl(product.img),
+						},
+					});
+				}
+			}
+		});
+		setCartData(tempData);
+	}, [cartItems, products]);
+
+	const getImageUrl = (imagePath) => {
+		if (!imagePath) return "/default-product.jpg";
+		if (imagePath.startsWith("http")) return imagePath;
+		return `http://localhost:8000${imagePath}`;
+	};
+
+	// Add this useEffect to sync with backend when cart changes
+useEffect(() => {
+	const syncCartWithBackend = async () => {
+	  const token = localStorage.getItem('token');
+	  if (!token || cartData.length === 0) return;
+
+	  try {
+		await fetch('http://localhost:8000/api/cart/sync/', {
+		  method: 'POST',
+		  headers: {
+			'Content-Type': 'application/json',
+			'Authorization': `Bearer ${token}`
+		  },
+		  body: JSON.stringify({
+			items: cartData.map(item => ({
+			  product_id: item.id,
+			  quantity: item.quantity
+			}))
+		  })
+		});
+	  } catch (error) {
+		console.error('Cart sync failed:', error);
+	  }
+	};
+
+	syncCartWithBackend();
+  }, [cartData]);
+	return (
+		<div className="border-t pt-14 max-w-6xl mx-auto px-4">
+			<div className="text-2xl mb-8">
+				<Title text1={"Your"} text2={"CART"} />
+			</div>
+
+			<div className="flex flex-col lg:flex-row gap-8">
+				<div className="flex-1">
+					{cartData.length > 0 ? (
+						cartData.map((item) => (
+							<div key={item.id} className="border-b py-6 flex flex-col sm:flex-row gap-6">
+								<div className="w-32 h-32 flex-shrink-0 bg-gray-100">
+									<img
+										src={item.product.img}
+										alt={item.product.name}
+										className="w-full h-full object-contain"
+										onError={(e) => {
+											e.target.onerror = null;
+											e.target.src = "/default-product.jpg";
+										}}
+									/>
+								</div>
+
+								<div className="flex-1">
+									<h3 className="text-lg font-medium uppercase">{item.product.name}</h3>
+									<p className="text-gray-800 mt-2">
+										{currency} {item.product.price} {item.product.size || ""}
+									</p>
+									<div className="flex items-center gap-4 mt-4">
+										<span className="text-lg font-medium">Qty:</span>
+										<div className="flex items-center gap-4">
+											<button onClick={() => removeFromCart(item.id)} className="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-lg">-</button>
+											<span className="text-lg font-medium">{item.quantity}</span>
+											<button onClick={() => addToCart(item.id)} className="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-lg">+</button>
+											<button onClick={() => removeFromCart(item.id, item.quantity)} className="px-3 py-2 bg-gray-600 text-white rounded hover:bg-red-600">🗑️ Delete</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						))
+					) : (
+						<div className="text-center">
+							<p className="text-gray-500 text-[30px] font-bold">Your cart is empty</p>
+							<Link to="/collection">
+								<button className="bg-black text-white px-6 py-3 rounded hover:bg-gray-800 mt-4">
+									Continue Shopping
+								</button>
+							</Link>
+						</div>
+					)}
+				</div>
+
+				{cartData.length > 0 && (
+					<div className="lg:w-80 bg-gray-50 p-6 h-fit">
+						<h3 className="text-xl font-bold mb-4">CART TOTALS</h3>
+						<div className="space-y-3">
+							<div className="flex justify-between">
+								<span>Subtotal</span>
+								<span>{currency} {getTotalCartAmount().toFixed(2)}</span>
+							</div>
+							<div className="flex justify-between">
+								<span>Shipping Fee</span>
+								<span>{currency} {delivery_fee.toFixed(2)}</span>
+							</div>
+							<div className="flex justify-between font-bold text-lg pt-3 border-t border-gray-200">
+								<span>Total</span>
+								<span>{currency} {(getTotalCartAmount() + delivery_fee).toFixed(2)}</span>
+							</div>
+						</div>
+
+
+<button 
+  onClick={() => navigate("/paymentGateway", {
+    state: {
+      cartItems: cartData,
+      total: (getTotalCartAmount() + delivery_fee).toFixed(2),
+      currency,
+      subtotal: getTotalCartAmount()
+    }
+  })}
+  className="w-full bg-black text-white py-3 mt-6 hover:bg-gray-800 transition-colors"
+>
+  PROCEED TO CHECKOUT
+</button>
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }
 
-export default Cart
+export default Cart;