Skip to content

Commit

Permalink
Merge pull request #256 from siddheshhr/main
Browse files Browse the repository at this point in the history 
PR:#235 Added Payment.jsx & fixed styling issues in cart
  • Loading branch information
@mohitparmar1
mohitparmar1 authored Jun 11, 2024
2 parents ab46195 + b6e08f5 commit 953dc39
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 159 deletions.
86 changes: 43 additions & 43 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 = () => (
<>
Expand All @@ -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 />
</>
);
Expand Down
139 changes: 23 additions & 116 deletions src/Components/CartItems.jsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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">
Expand All @@ -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>
Expand Down
63 changes: 63 additions & 0 deletions src/Components/Payment.jsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 953dc39

Please sign in to comment.