From b6e08f56d8d213c5f0265aac4a6a5db285a88c0d Mon Sep 17 00:00:00 2001
From: siddheshhr <siddhesh.raskar04@gmail.com>
Date: Mon, 10 Jun 2024 00:28:55 +0530
Subject: [PATCH] initial commit

---
 src/App.jsx                  |  86 +++++++++++-----------
 src/Components/CartItems.jsx | 139 ++++++-----------------------------
 src/Components/Payment.jsx   |  63 ++++++++++++++++
 src/Pages/PaymentSucces.jsx  |  16 ++++
 4 files changed, 145 insertions(+), 159 deletions(-)
 create mode 100644 src/Components/Payment.jsx
 create mode 100644 src/Pages/PaymentSucces.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 8c8dc71..55665bc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,54 +1,54 @@
 import React from "react";
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
-import kids_banner from "./assets/banner_kids.png";
-import men_banner from "./assets/banner_mens.png";
-import women_banner from "./assets/banner_women.png";
-import Footer from "./Components/Footer";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Navbar from "./Components/Navbar";
+import Footer from "./Components/Footer";
+import Payment from "./Components/Payment";
+import PaymentSuccess from "./Pages/PaymentSucces";
 import PaymentFail from "./Pages/paymentfail";
-import PaymentSuccess from "./Pages/Success";
 import Cart from "./Pages/Cart";
 import Login from "./Pages/Login";
-import Product from "./Pages/Product";
+import Signup from "./Pages/Signup";
 import Shop from "./Pages/Shop";
 import ShopCategory from "./Pages/ShopCategory";
+import Product from "./Pages/Product";
 import Saved from "./Pages/WishList";
 import About from "./Pages/About";
 import Contact from "./Pages/Contact";
 import CheckNow from "./Components/CheckNow";
-import "./index.css";
-import Signup from "./Pages/Signup";
 import NotFound from "./Pages/NotFound";
 import Search from "./Pages/Search";
+import kids_banner from "./assets/banner_kids.png";
+import men_banner from "./assets/banner_mens.png";
+import women_banner from "./assets/banner_women.png";
+import "./index.css";
 
-const App = () => {
-  return (
-    <Router>
-      <Navbar />
-      <div className="bg-white text-black dark:bg-black dark:text-white min-h-screen">
-        <Routes>
-          <Route path="/login" element={<LoginWithFooter />} />
-          <Route path="/signup" element={<SignupWithFooter />} />
-          <Route path="/" element={<Shop />} />
-          <Route path="/women" element={<ShopCategoryWithFooter banner={women_banner} category="women" />} />
-          <Route path="/mens" element={<ShopCategoryWithFooter banner={men_banner} category="men" />} />
-          <Route path="/kids" element={<ShopCategoryWithFooter banner={kids_banner} category="kid" />} />
-          <Route path="/product/:productId" element={<ProductWithFooter />} />
-          <Route path="/cart" element={<CartWithFooter />} />
-          <Route path="/wishlist" element={<WishlistWithFooter />} />
-          <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact/>} />
-          <Route path="/checknow" element={<CheckNowWithFooter />} />
-          <Route path="*" element={<NotFound />} />
-          <Route path="/user/paymentsuccess" element={<PaymentSuccess />} />
-          <Route path="/user/paymentfail" element={<PaymentFail />} />
-            <Route path="/search" element={<Search/>} />
-        </Routes>
-      </div>
-
-    </Router>
-  );
-};
+const App = () => (
+  <Router>
+    <Navbar />
+    <div className="bg-white text-black dark:bg-black dark:text-white min-h-screen">
+      <Routes>
+        <Route path="/" element={<Shop />} />
+        <Route path="/login" element={<LoginWithFooter />} />
+        <Route path="/signup" element={<SignupWithFooter />} />
+        <Route path="/women" element={<ShopCategoryWithFooter banner={women_banner} category="women" />} />
+        <Route path="/mens" element={<ShopCategoryWithFooter banner={men_banner} category="men" />} />
+        <Route path="/kids" element={<ShopCategoryWithFooter banner={kids_banner} category="kids" />} />
+        <Route path="/product/:productId" element={<ProductWithFooter />} />
+        <Route path="/cart" element={<CartWithFooter />} />
+        <Route path="/wishlist" element={<WishlistWithFooter />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/contact" element={<Contact />} />
+        <Route path="/checknow" element={<CheckNowWithFooter />} />
+        <Route path="*" element={<NotFound />} />
+        <Route path="/payment" element={<Payment />} />
+        <Route path="/paymentsuccess" element={<PaymentSuccess />} />
+        <Route path="/user/paymentsuccess" element={<PaymentSuccess />} />
+        <Route path="/user/paymentfail" element={<PaymentFail />} />
+        <Route path="/search" element={<Search />} />
+      </Routes>
+    </div>
+  </Router>
+);
 
 const LoginWithFooter = () => (
   <>
@@ -64,23 +64,23 @@ const SignupWithFooter = () => (
   </>
 );
 
-const ProductWithFooter = () => (
+const ShopCategoryWithFooter = ({ banner, category }) => (
   <>
-    <Product />
+    <ShopCategory banner={banner} category={category} />
     <Footer />
   </>
 );
 
-const CartWithFooter = () => (
+const ProductWithFooter = () => (
   <>
-    <Cart />
+    <Product />
     <Footer />
   </>
 );
 
-const ShopCategoryWithFooter = ({ banner, category }) => (
+const CartWithFooter = () => (
   <>
-    <ShopCategory banner={banner} category={category} />
+    <Cart />
     <Footer />
   </>
 );
diff --git a/src/Components/CartItems.jsx b/src/Components/CartItems.jsx
index a74d3b6..f980224 100644
--- a/src/Components/CartItems.jsx
+++ b/src/Components/CartItems.jsx
@@ -1,14 +1,14 @@
-import React from "react";
-import { useContext } from "react";
+import React, { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import { ShopContext } from "../Context/ShopContext";
 import removeIcon from "../assets/cart_cross_icon.png";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
-import { loadStripe } from "@stripe/stripe-js";
 import { Link } from "react-router-dom";
-import img from '../assets/Empty_Cart_img.png'
+import img from '../assets/Empty_Cart_img.png';
 
 const CartItems = () => {
+  const navigate = useNavigate();
   const {
     getCartTotalAmount,
     all_products,
@@ -17,87 +17,45 @@ const CartItems = () => {
     AddToCart,
   } = useContext(ShopContext);
 
+  const isEmptyCart = Object.keys(cartItem).length === 0;
 
-  const isEmptyCart=Object.keys(cartItem).length
-
-  //payment gateway
-  const makePayment = async () => {
-    const stripe = await loadStripe("Enter Your Stripe Public Key Here");
-
-    const filteredProducts = all_products.filter(
-      (product) => cartItem[product.id] > 0
-    );
-    console.log(filteredProducts);
-    const body = {
-      products: filteredProducts,
-      cartItem: cartItem,
-    };
-
-    const headers = {
-      "Content-Type": "application/json",
-    };
-    const response = await fetch(
-      "http://localhost:7000/api/create-checkout-session",
-      {
-        method: "POST",
-        headers: headers,
-        body: JSON.stringify(body),
-      }
-    );
-    if (!response.ok) {
-      const errorText = await response.text(); // or response.json() if the server returns JSON
-      console.error("Error response:", errorText);
-      throw new Error(`Network response was not ok: ${response.status}`);
-    }
-
-    const session = await response.json();
-
-    const result = await stripe.redirectToCheckout({
-      sessionId: session.id,
-    });
-
-    if (result.error) {
-      console.log(result.error);
-    }
+  const handleProceedToPayment = () => {
+    navigate('/payment');
   };
-  console.log(all_products);
-  console.log(cartItem);
+
   return (
     <div className="min-h-screen flex items-center justify-center p-4">
       <div className="flex flex-col lg:flex-row w-full lg:w-3/4">
-        {/* Shopping Cart */}
-        <div className=" p-6 rounded-lg w-full lg:w-2/3 lg:mr-4 mb-4 lg:mb-0">
+        <div className="p-6 rounded-lg w-full lg:w-2/3 lg:mr-4 mb-4 lg:mb-0">
           <h2 className="text-5xl font-semibold mb-6 heading-font">
             Shopping Cart.
           </h2>
           <div className="mb-4">
-            <div className="flex justify-between mb-2">
+            <div className="flex justify-between mb-4 ml-25">
               <span className="font-semibold">Product</span>
               <span className="font-semibold hidden md:inline">Size</span>
               <span className="font-semibold">Quantity</span>
               <span className="font-semibold">Total Price</span>
             </div>
-
-            {isEmptyCart && (<img src={img} alt="image" />)}
-
-            {all_products &&
+            {isEmptyCart ? (
+              <img src={img} alt="Empty Cart" />
+            ) : (
               all_products.map((item) => {
                 if (cartItem[item.id] > 0) {
                   return (
-                    <div className="flex justify-between items-center border-b py-2">
+                    <div className="flex justify-between items-center border-b py-2" key={item.id}>
                       <div className="flex items-center">
                         <img
                           src={item.image}
                           alt={item.name}
                           className="w-12 h-12 rounded mr-2"
                         />
-
                         <div>
                           <p className="font-semibold max-w-44">{item.name}</p>
                           <p className="text-gray-500 text-sm">Black</p>
                         </div>
                       </div>
-                      <select className="border rounded p-1 -ml-48 hidden md:inline">
+                      <select className="border rounded p-1 -ml-28 hidden md:inline">
                         <option>{item.size}</option>
                       </select>
                       <div className="flex items-center">
@@ -109,77 +67,26 @@ const CartItems = () => {
                     </div>
                   );
                 }
-              })}
+                return null;
+              })
+            )}
           </div>
           <div className="flex justify-between mt-6">
             <Link to={"/"}>
-              <button className="text-blue-500">
-                &larr; Continue Shopping
-              </button>
+              <button className="text-blue-500">&larr; Continue Shopping</button>
             </Link>
             <div className="text-right">
               <p className="font-semibold">Subtotal: ${getCartTotalAmount()}</p>
               <p className="font-semibold">Shipping: $0</p>
-              <p className="font-bold text-xl">
-                Total: ${getCartTotalAmount()}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Payment Info */}
-        <div className="gradient p-6 rounded-lg shadow-lg w-full lg:w-1/3 text-white">
-          <h2 className="text-5xl heading-font font-semibold mb-6">
-            Payment Info.
-          </h2>
-          <div className="mb-4">
-            <label className="block font-semibold mb-1">Payment Method</label>
-            <div className="flex">
-              <button className="flex-1 bg-blue-700 p-2 rounded mr-2">
-                Credit Card
-              </button>
+              <p className="font-bold text-xl">Total: ${getCartTotalAmount()}</p>
               <button
-                className="flex-1 bg-blue-700 p-2 rounded"
-                onClick={makePayment}
+                className="bg-blue-500 text-white p-2 rounded mt-4 ml-100"
+                onClick={handleProceedToPayment}
               >
-                Stripe
+                Proceed to Payment
               </button>
             </div>
           </div>
-          <div className="mb-4">
-            <label className="block font-semibold mb-1">Name on Card</label>
-            <input type="text" className="w-full p-2 rounded text-gray-900" />
-          </div>
-          <div className="mb-4">
-            <label className="block font-semibold mb-1">Card Number</label>
-            <input
-              type="text"
-              className="w-full p-2 rounded text-gray-900"
-              placeholder="**** **** **** 3271"
-            />
-          </div>
-          <div className="mb-4">
-            <label className="block font-semibold mb-1">Expiration Date</label>
-            <div className="flex">
-              <input
-                type="text"
-                className="w-1/2 p-2 rounded mr-2 text-gray-900"
-                placeholder="MM"
-              />
-              <input
-                type="text"
-                className="w-1/2 p-2 rounded text-gray-900"
-                placeholder="YYYY"
-              />
-            </div>
-          </div>
-          <div className="mb-4">
-            <label className="block font-semibold mb-1">CVV</label>
-            <input type="text" className="w-full p-2 rounded text-gray-900" />
-          </div>
-          <button className="w-full bg-blue-700 p-2 rounded text-white font-semibold">
-            Check Out
-          </button>
         </div>
       </div>
     </div>
diff --git a/src/Components/Payment.jsx b/src/Components/Payment.jsx
new file mode 100644
index 0000000..7c7f1a2
--- /dev/null
+++ b/src/Components/Payment.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const Payment = () => {
+  const navigate = useNavigate();
+
+  const handleCheckout = () => {
+    navigate("/paymentsuccess");
+  };
+
+  return (
+    <div className="gradient p-6 rounded-lg shadow-lg w-full lg:w-1/3 text-white">
+      <h2 className="text-5xl heading-font font-semibold mb-6">Payment Info.</h2>
+      <div className="mb-4">
+        <label className="block font-semibold mb-1">Payment Method</label>
+        <div className="flex">
+          <button className="flex-1 bg-blue-700 p-2 rounded mr-2">
+            Credit Card
+          </button>
+          <button className="flex-1 bg-blue-700 p-2 rounded">
+            Stripe
+          </button>
+        </div>
+      </div>
+      <div className="mb-4">
+        <label className="block font-semibold mb-1">Name on Card</label>
+        <input type="text" className="w-full p-2 rounded text-gray-900" />
+      </div>
+      <div className="mb-4">
+        <label className="block font-semibold mb-1">Card Number</label>
+        <input
+          type="text"
+          className="w-full p-2 rounded text-gray-900"
+          placeholder="**** **** **** 3271"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block font-semibold mb-1">Expiration Date</label>
+        <div className="flex">
+          <input
+            type="text"
+            className="w-1/2 p-2 rounded mr-2 text-gray-900"
+            placeholder="MM"
+          />
+          <input
+            type="text"
+            className="w-1/2 p-2 rounded text-gray-900"
+            placeholder="YYYY"
+          />
+        </div>
+      </div>
+      <div className="mb-4">
+        <label className="block font-semibold mb-1">CVV</label>
+        <input type="text" className="w-full p-2 rounded text-gray-900" />
+      </div>
+      <button className="w-full bg-blue-700 p-2 rounded text-white font-semibold" onClick={handleCheckout}>
+        Check Out
+      </button>
+    </div>
+  );
+};
+
+export default Payment;
diff --git a/src/Pages/PaymentSucces.jsx b/src/Pages/PaymentSucces.jsx
new file mode 100644
index 0000000..73b686e
--- /dev/null
+++ b/src/Pages/PaymentSucces.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const PaymentSuccess = () => {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-white text-black dark:bg-black dark:text-white">
+      <h1 className="text-5xl font-semibold mb-4">Payment Successful!</h1>
+      <p className="text-xl mb-8">Thank you for your purchase.</p>
+      <Link to="/">
+        <button className="bg-blue-500 text-white p-3 rounded">Go to Home</button>
+      </Link>
+    </div>
+  );
+};
+
+export default PaymentSuccess;