From 70173ea4bfeb48da7df3a0497928ccca109158ea Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 23 Mar 2026 21:48:16 +0000 Subject: [PATCH] Add src/app/checkout/page.tsx --- src/app/checkout/page.tsx | 154 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 src/app/checkout/page.tsx diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx new file mode 100644 index 0000000..938e0bb --- /dev/null +++ b/src/app/checkout/page.tsx @@ -0,0 +1,154 @@ +'use client'; + +import React, { useState } from 'react'; +import { ThemeProvider } from '@/components/theme/ThemeProvider'; +import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; +import { CartProvider, useCart } from '@/components/cart/CartProvider'; +import { useRouter } from 'next/navigation'; +import { Package, CreditCard } from 'lucide-react'; +import Link from 'next/link'; + +const CheckoutPageContent = () => { + const { cartItems, getCartTotal, clearCart } = useCart(); + const router = useRouter(); + const cartTotal = getCartTotal(); + + const [shippingInfo, setShippingInfo] = useState({ + fullName: '', + address: '', + city: '', + zip: '', + country: '', + }); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setShippingInfo((prev) => ({ ...prev, [name]: value })); + }; + + const handlePlaceOrder = (paymentMethod: string) => { + if (cartItems.length === 0) { + alert('Your cart is empty. Please add items before checking out.'); + router.push('/products'); + return; + } + + if (!shippingInfo.fullName || !shippingInfo.address || !shippingInfo.city || !shippingInfo.zip || !shippingInfo.country) { + alert('Please fill in all shipping information.'); + return; + } + + alert(`Order placed successfully with ${paymentMethod}! Total: $${cartTotal.toFixed(2)}`); + clearCart(); + router.push('/products'); // Redirect to products after checkout + }; + + if (cartItems.length === 0) { + return ( +
+

+ + Checkout +

+
+

Your cart is empty. Nothing to checkout.

+ + Go to Products + +
+
+ ); + } + + return ( +
+

+ + Checkout +

+ +
+
+

+ + Shipping Information +

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ +
+

+ + Order Summary +

+
+ {cartItems.map((item) => ( +
+ {item.name} x {item.quantity} + ${(item.price * item.quantity).toFixed(2)} +
+ ))} +
+ Total: + ${cartTotal.toFixed(2)} +
+
+
+ + +
+
+
+
+ ); +}; + +export default function CheckoutPage() { + return ( + + + + + + + ); +}