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

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

Closed
wants to merge 1 commit into from
Closed

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

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
58 changes: 50 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
92 changes: 22 additions & 70 deletions src/Components/CartItems.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand All @@ -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");

Expand All @@ -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}`);
}
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down
Loading