Add src/app/checkout/page.tsx
This commit is contained in:
154
src/app/checkout/page.tsx
Normal file
154
src/app/checkout/page.tsx
Normal file
@@ -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<HTMLInputElement>) => {
|
||||
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 (
|
||||
<div className="min-h-screen pt-20 px-4 md:px-8 lg:px-16 pb-12 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold mb-10 text-foreground flex items-center justify-center space-x-4">
|
||||
<CreditCard className="w-10 h-10 text-primary-cta" />
|
||||
<span>Checkout</span>
|
||||
</h1>
|
||||
<div className="py-20 bg-background-accent rounded-lg shadow-inner">
|
||||
<p className="text-xl text-accent mb-4">Your cart is empty. Nothing to checkout.</p>
|
||||
<Link href="/products" className="inline-block px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors duration-200">
|
||||
Go to Products
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-20 px-4 md:px-8 lg:px-16 pb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-center mb-10 text-foreground flex items-center justify-center space-x-4">
|
||||
<CreditCard className="w-10 h-10 text-primary-cta" />
|
||||
<span>Checkout</span>
|
||||
</h1>
|
||||
|
||||
<div className="max-w-4xl mx-auto bg-card rounded-lg shadow-lg p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4 flex items-center space-x-2">
|
||||
<Package size={24} />
|
||||
<span>Shipping Information</span>
|
||||
</h2>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-accent">Full Name</label>
|
||||
<input type="text" id="fullName" name="fullName" value={shippingInfo.fullName} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="address" className="block text-sm font-medium text-accent">Address</label>
|
||||
<input type="text" id="address" name="address" value={shippingInfo.address} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="city" className="block text-sm font-medium text-accent">City</label>
|
||||
<input type="text" id="city" name="city" value={shippingInfo.city} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="zip" className="block text-sm font-medium text-accent">Zip Code</label>
|
||||
<input type="text" id="zip" name="zip" value={shippingInfo.zip} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="country" className="block text-sm font-medium text-accent">Country</label>
|
||||
<input type="text" id="country" name="country" value={shippingInfo.country} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4 flex items-center space-x-2">
|
||||
<CreditCard size={24} />
|
||||
<span>Order Summary</span>
|
||||
</h2>
|
||||
<div className="bg-background-accent p-4 rounded-md mb-4">
|
||||
{cartItems.map((item) => (
|
||||
<div key={item.id} className="flex justify-between items-center py-2 border-b last:border-b-0 border-card">
|
||||
<span className="text-foreground">{item.name} x {item.quantity}</span>
|
||||
<span className="text-foreground">${(item.price * item.quantity).toFixed(2)}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between items-center py-2 mt-2 font-bold text-xl text-foreground">
|
||||
<span>Total:</span>
|
||||
<span className="text-primary-cta">${cartTotal.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={() => handlePlaceOrder('Stripe')}
|
||||
className="w-full px-6 py-3 bg-[#635BFF] text-white rounded-md font-semibold hover:bg-[#574fe3] transition-colors duration-200 shadow-md"
|
||||
>
|
||||
Pay with Stripe
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePlaceOrder('PayPal')}
|
||||
className="w-full px-6 py-3 bg-[#0070BA] text-white rounded-md font-semibold hover:bg-[#005e9a] transition-colors duration-200 shadow-md"
|
||||
>
|
||||
Pay with PayPal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function CheckoutPage() {
|
||||
return (
|
||||
<ThemeProvider defaultButtonVariant="expand-hover" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="bold">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: 'Products', id: '/products' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
]}
|
||||
button={{ text: 'Checkout', href: '/checkout' }}
|
||||
/>
|
||||
<CartProvider>
|
||||
<CheckoutPageContent />
|
||||
</CartProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user