From 3ce72012ec9ed23ee9e4e3397941c708292d109b Mon Sep 17 00:00:00 2001
From: siddheshhr <siddhesh.raskar04@gmail.com>
Date: Fri, 31 May 2024 19:48:49 +0530
Subject: [PATCH] Added Payment.jsx & fixed styling issues in cart

---
 package-lock.json            | 58 +++++++++++++++++++----
 src/App.jsx                  |  2 +
 src/Components/CartItems.jsx | 92 +++++++++---------------------------
 src/Components/Payment.jsx   | 86 +++++++++++++++++++++++++++++++++
 4 files changed, 160 insertions(+), 78 deletions(-)
 create mode 100644 src/Components/Payment.jsx

diff --git a/package-lock.json b/package-lock.json
index ba89d97..ea79ec5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1047,6 +1047,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
@@ -3939,6 +3952,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6405,7 +6424,8 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
-      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw=="
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.1",
@@ -6667,6 +6687,15 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
       "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q=="
     },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "peer": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
@@ -6868,7 +6897,8 @@
     "@mui/types": {
       "version": "7.2.14",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
-      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ=="
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "requires": {}
     },
     "@mui/utils": {
       "version": "5.15.14",
@@ -6929,7 +6959,8 @@
     "@react-icons/all-files": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
-      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ=="
+      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+      "requires": {}
     },
     "@remix-run/router": {
       "version": "1.14.2",
@@ -7179,7 +7210,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv": {
       "version": "6.12.6",
@@ -7970,13 +8002,15 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-react-refresh": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz",
       "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "7.2.2",
@@ -8664,6 +8698,12 @@
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
       "dev": true
     },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9239,7 +9279,8 @@
     "react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
-      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw=="
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "requires": {}
     },
     "react-is": {
       "version": "16.13.1",
@@ -9515,7 +9556,8 @@
     "slick-carousel": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
-      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "requires": {}
     },
     "source-map": {
       "version": "0.5.7",
diff --git a/src/App.jsx b/src/App.jsx
index 97bb51f..0d10a1f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,6 +19,7 @@ import CheckNow from "./Components/CheckNow";
 import "./index.css";
 import Signup from "./Pages/Signup";
 import NotFound from "./Pages/NotFound";
+import Payment from './Components/Payment'
 
 const App = () => {
   return (
@@ -40,6 +41,7 @@ const App = () => {
             <Route path="/contact" element={<Contact/>} />
           <Route path="/checknow" element={<CheckNowWithFooter />} />
           <Route path="*" element={<NotFound />} />
+          <Route path="/payment" element={<Payment />} />
           <Route path="/user/paymentsuccess" element={<PaymentSuccess />} />
           <Route path="/user/paymentfail" element={<PaymentFail />} />
         </Routes>
diff --git a/src/Components/CartItems.jsx b/src/Components/CartItems.jsx
index 4f3cc17..2d6a389 100644
--- a/src/Components/CartItems.jsx
+++ b/src/Components/CartItems.jsx
@@ -1,5 +1,5 @@
-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";
@@ -8,6 +8,9 @@ import { loadStripe } from "@stripe/stripe-js";
 import { Link } from "react-router-dom";
 
 const CartItems = () => {
+  // Initialize the useNavigate hook
+  const navigate = useNavigate();
+  
   const {
     getCartTotalAmount,
     all_products,
@@ -16,7 +19,11 @@ const CartItems = () => {
     AddToCart,
   } = useContext(ShopContext);
 
-  //payment gateway
+  // Function to handle navigation to the payment page
+  const handleProceedToPayment = () => {
+    navigate('/payment');
+  };
+
   const makePayment = async () => {
     const stripe = await loadStripe("Enter Your Stripe Public Key Here");
 
@@ -40,8 +47,9 @@ const CartItems = () => {
         body: JSON.stringify(body),
       }
     );
+
     if (!response.ok) {
-      const errorText = await response.text(); // or response.json() if the server returns JSON
+      const errorText = await response.text();
       console.error("Error response:", errorText);
       throw new Error(`Network response was not ok: ${response.status}`);
     }
@@ -56,18 +64,16 @@ const CartItems = () => {
       console.log(result.error);
     }
   };
-  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>
@@ -77,20 +83,19 @@ const CartItems = () => {
               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">
@@ -106,73 +111,20 @@ const CartItems = () => {
           </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..0ad5dc4
--- /dev/null
+++ b/src/Components/Payment.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Payment = () => {
+    const [cardDetails, setCardDetails] = useState({
+        name: '',
+        number: '',
+        expiry: '',
+        cvv: '',
+    });
+
+    const navigate = useNavigate();
+
+    const handleChange = (event) => {
+        setCardDetails({
+            ...cardDetails,
+            [event.target.name]: event.target.value,
+        });
+    };
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        console.log('Payment Details:', cardDetails);
+        navigate('/user/paymentsuccess');
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center p-4">
+            <div className="p-6 rounded-lg shadow-lg bg-white w-full max-w-md">
+                <h2 className="text-3xl font-semibold mb-6">Payment Info</h2>
+                <form onSubmit={handleSubmit}>
+                    <div className="mb-4">
+                        <label className="block font-semibold mb-1">Name on Card</label>
+                        <input 
+                            type="text" 
+                            name="name" 
+                            value={cardDetails.name} 
+                            onChange={handleChange} 
+                            className="w-full p-2 border rounded" 
+                            required 
+                        />
+                    </div>
+                    <div className="mb-4">
+                        <label className="block font-semibold mb-1">Card Number</label>
+                        <input 
+                            type="text" 
+                            name="number" 
+                            value={cardDetails.number} 
+                            onChange={handleChange} 
+                            className="w-full p-2 border rounded" 
+                            required 
+                        />
+                    </div>
+                    <div className="mb-4">
+                        <label className="block font-semibold mb-1">Expiration Date</label>
+                        <input 
+                            type="text" 
+                            name="expiry" 
+                            value={cardDetails.expiry} 
+                            onChange={handleChange} 
+                            className="w-full p-2 border rounded" 
+                            placeholder="MM/YY" 
+                            required 
+                        />
+                    </div>
+                    <div className="mb-4">
+                        <label className="block font-semibold mb-1">CVV</label>
+                        <input 
+                            type="text" 
+                            name="cvv" 
+                            value={cardDetails.cvv} 
+                            onChange={handleChange} 
+                            className="w-full p-2 border rounded" 
+                            required 
+                        />
+                    </div>
+                    <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded font-semibold">
+                        Submit Payment
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default Payment;