Update src/app/checkout/page.tsx
This commit is contained in:
@@ -1,154 +1,210 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { ThemeProvider } from '@/components/theme/ThemeProvider';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/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';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { useCart } from '@/components/cart/CartProvider';
|
||||
import { CreditCard, Truck, Receipt, Facebook, Twitter, Instagram } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const CheckoutPageContent = () => {
|
||||
const { cartItems, getCartTotal, clearCart } = useCart();
|
||||
const router = useRouter();
|
||||
const cartTotal = getCartTotal();
|
||||
|
||||
const [shippingInfo, setShippingInfo] = useState({
|
||||
fullName: '',
|
||||
const { cartItems, getTotalPrice, clearCart } = useCart();
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
city: '',
|
||||
zip: '',
|
||||
country: '',
|
||||
cardNumber: '',
|
||||
cardExpiry: '',
|
||||
cardCVC: '',
|
||||
});
|
||||
const [orderConfirmed, setOrderConfirmed] = useState(false);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setShippingInfo((prev) => ({ ...prev, [name]: value }));
|
||||
const handleChange = (e) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.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
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
// Simulate order processing
|
||||
console.log('Order submitted:', formData, 'Items:', cartItems);
|
||||
setOrderConfirmed(true);
|
||||
clearCart(); // Clear cart after successful order
|
||||
};
|
||||
|
||||
if (cartItems.length === 0) {
|
||||
const navItems = [
|
||||
{ name: 'Products', id: '/products' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Checkout', id: '/checkout' },
|
||||
];
|
||||
|
||||
if (orderConfirmed) {
|
||||
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>
|
||||
<>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
button={{ text: 'Continue Shopping', href: '/products' }}
|
||||
/>
|
||||
<main className="container mx-auto px-4 py-8 text-center min-h-[calc(100vh-160px)]">
|
||||
<Receipt className="mx-auto text-green-500 mb-4" size={64} />
|
||||
<h1 className="text-4xl font-bold mb-4">Order Confirmed!</h1>
|
||||
<p className="text-lg mb-6">Thank you for your purchase. Your order will be shipped soon.</p>
|
||||
<a href="/products" className="btn-primary px-6 py-3 rounded-md text-lg">Continue Shopping</a>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="GR Tackle"
|
||||
copyrightText="© 2024 GR Tackle. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Facebook, href: '#', ariaLabel: 'Facebook' },
|
||||
{ icon: Twitter, href: '#', ariaLabel: 'Twitter' },
|
||||
{ icon: Instagram, href: '#', ariaLabel: 'Instagram' }
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
<>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
button={{ text: 'Return to Cart', href: '/cart' }}
|
||||
/>
|
||||
<main className="container mx-auto px-4 py-8 min-h-[calc(100vh-160px)]">
|
||||
<h1 className="text-3xl font-bold mb-6 flex items-center">
|
||||
<CreditCard className="mr-3" /> Checkout
|
||||
</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">
|
||||
{cartItems.length === 0 ? (
|
||||
<p className="text-lg">Your cart is empty. Please <a href="/products" className="text-primary-cta hover:underline">add items</a> before checking out.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<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>
|
||||
<h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Full Name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
placeholder="Address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
placeholder="City"
|
||||
value={formData.city}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="zip"
|
||||
placeholder="ZIP Code"
|
||||
value={formData.zip}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
<h2 className="text-2xl font-semibold mb-4 pt-6">Payment Information</h2>
|
||||
<input
|
||||
type="text"
|
||||
name="cardNumber"
|
||||
placeholder="Card Number"
|
||||
value={formData.cardNumber}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
name="cardExpiry"
|
||||
placeholder="MM/YY"
|
||||
value={formData.cardExpiry}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="cardCVC"
|
||||
placeholder="CVC"
|
||||
value={formData.cardCVC}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-md"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn-primary w-full px-6 py-3 rounded-md text-lg">Place Order</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">Order Summary</h2>
|
||||
<div className="border rounded-md p-4">
|
||||
{cartItems.map((item) => (
|
||||
<div key={item.id} className="flex justify-between items-center mb-2">
|
||||
<span>{item.name} (x{item.quantity})</span>
|
||||
<span>${(parseFloat(item.price) * item.quantity).toFixed(2)}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="border-t pt-4 mt-4 flex justify-between items-center font-bold text-xl">
|
||||
<span>Total:</span>
|
||||
<span>${getTotalPrice().toFixed(2)}</span>
|
||||
</div>
|
||||
</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>
|
||||
)}
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="GR Tackle"
|
||||
copyrightText="© 2024 GR Tackle. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Facebook, href: '#', ariaLabel: 'Facebook' },
|
||||
{ icon: Twitter, href: '#', ariaLabel: 'Twitter' },
|
||||
{ icon: Instagram, href: '#', ariaLabel: 'Instagram' }
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
<CheckoutPageContent />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user