Add src/app/checkout/page.tsx
This commit is contained in:
264
src/app/checkout/page.tsx
Normal file
264
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ButtonHoverBubble from '@/components/button/ButtonHoverBubble';
|
||||
import Textarea from '@/components/form/Textarea';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Shop', id: '/shop' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Checkout', id: '/checkout' },
|
||||
];
|
||||
|
||||
interface OrderItem {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
address: string;
|
||||
city: string;
|
||||
postalCode: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
address: '',
|
||||
city: '',
|
||||
postalCode: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
const [orderPlaced, setOrderPlaced] = useState(false);
|
||||
|
||||
// Sample order data
|
||||
const orderItems: OrderItem[] = [
|
||||
{ id: '1', name: 'Premium Headphones', price: 199.99, quantity: 1 },
|
||||
{ id: '2', name: 'Wireless Mouse', price: 49.99, quantity: 2 },
|
||||
];
|
||||
|
||||
const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
const tax = subtotal * 0.1;
|
||||
const shipping = 10.0;
|
||||
const total = subtotal + tax + shipping;
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Simulate order placement
|
||||
setOrderPlaced(true);
|
||||
};
|
||||
|
||||
if (orderPlaced) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Shop"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
<main className="w-full py-12">
|
||||
<div className="max-w-2xl mx-auto px-4 text-center">
|
||||
<div className="mb-8">
|
||||
<div className="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-3xl">✓</span>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-4">Order Confirmed!</h1>
|
||||
<p className="text-lg text-gray-600 mb-6">
|
||||
Thank you for your order. A confirmation email has been sent to {formData.email}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 border rounded-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-6">Order Details</h2>
|
||||
<div className="text-left space-y-3 mb-6">
|
||||
<p><strong>Name:</strong> {formData.firstName} {formData.lastName}</p>
|
||||
<p><strong>Email:</strong> {formData.email}</p>
|
||||
<p><strong>Address:</strong> {formData.address}, {formData.city} {formData.postalCode}</p>
|
||||
<p><strong>Total:</strong> ${total.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonHoverBubble text="Continue Shopping" href="/shop" />
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Shop"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
<main className="w-full py-12">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<h1 className="text-4xl font-bold mb-8">Checkout</h1>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Checkout Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Shipping Information</h2>
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
placeholder="First Name"
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="border rounded-lg px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
placeholder="Last Name"
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="border rounded-lg px-4 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="border rounded-lg px-4 py-2 w-full mb-4"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
placeholder="Address"
|
||||
value={formData.address}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="border rounded-lg px-4 py-2 w-full mb-4"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
placeholder="City"
|
||||
value={formData.city}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="border rounded-lg px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="postalCode"
|
||||
placeholder="Postal Code"
|
||||
value={formData.postalCode}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="border rounded-lg px-4 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Order Notes</h2>
|
||||
<Textarea
|
||||
value={formData.notes}
|
||||
onChange={(value) => setFormData(prev => ({ ...prev, notes: value }))}
|
||||
placeholder="Add any special instructions for your order..."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="border rounded-lg p-6 sticky top-4">
|
||||
<h2 className="text-2xl font-bold mb-6">Order Summary</h2>
|
||||
|
||||
{/* Order Items */}
|
||||
<div className="mb-6 space-y-3">
|
||||
{orderItems.map(item => (
|
||||
<div key={item.id} className="flex justify-between text-sm">
|
||||
<span>{item.name} x{item.quantity}</span>
|
||||
<span>${(item.price * item.quantity).toFixed(2)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pricing Breakdown */}
|
||||
<div className="border-t pt-4 space-y-3 mb-6">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Subtotal</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Tax (10%)</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Shipping</span>
|
||||
<span>${shipping.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="border-t pt-3 flex justify-between font-semibold text-lg">
|
||||
<span>Total</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Place Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user