Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PR:#235 Added Payment.jsx & fixed styling issues in cart #256

Merged
merged 1 commit into from
Jun 11, 2024
Merged

PR:#235 Added Payment.jsx & fixed styling issues in cart #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/App.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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