Add src/app/checkout/page.tsx
This commit is contained in:
200
src/app/checkout/page.tsx
Normal file
200
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import ProductCartItem from '@/components/ecommerce/cart/ProductCartItem';
|
||||
import { useState } from "react";
|
||||
|
||||
const mockCartItemsData = [
|
||||
{
|
||||
id: "1", name: "Roof Affairs Platter", price: "200", quantity: 1,
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/top-view-tasty-cooked-rice-with-meatballs-different-seasonings-black-table_140725-104447.jpg", variants: ["Best of everything – for 2"]
|
||||
},
|
||||
{
|
||||
id: "2", name: "Masala Corn Bowl", price: "70", quantity: 2,
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/top-view-corn-plate-with-limes_23-2148283026.jpg", variants: ["Rooftop special, spicy butter corn"]
|
||||
}
|
||||
];
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const [cartItems] = useState(mockCartItemsData);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zip: '',
|
||||
phone: '',
|
||||
cardNumber: '',
|
||||
expiry: '',
|
||||
cvc: '',
|
||||
});
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Order Placed!', formData);
|
||||
alert('Order placed successfully!');
|
||||
// Here you would typically integrate with a payment gateway and order processing logic
|
||||
};
|
||||
|
||||
const calculateSubtotal = () => {
|
||||
return cartItems.reduce((sum, item) => sum + parseFloat(item.price) * item.quantity, 0);
|
||||
};
|
||||
const shippingCost = 20.00; // Example shipping cost
|
||||
const total = calculateSubtotal() + shippingCost;
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
name: "Home", id: "/"}, {
|
||||
name: "Menu", id: "#menu"}, {
|
||||
name: "Why Us", id: "#why-us"}, {
|
||||
name: "Reviews", id: "#reviews"}, {
|
||||
name: "FAQs", id: "#faq"}, {
|
||||
name: "Contact", id: "#contact"}, {
|
||||
name: "Cart", id: "/cart"}, {
|
||||
name: "Checkout", id: "/checkout"}, {
|
||||
name: "Order", id: "https://www.google.com/maps/place/Roof+Affairs"}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Roof Affairs" />
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto px-4 py-16 min-h-[calc(100vh-120px)]">
|
||||
<h1 className="text-4xl font-bold mb-8 text-center">Checkout</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="space-y-8">
|
||||
{/* Shipping Information */}
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg">
|
||||
<h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-1">Full Name</label>
|
||||
<input type="text" id="name" name="name" value={formData.name} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="address" className="block text-sm font-medium mb-1">Address</label>
|
||||
<input type="text" id="address" name="address" value={formData.address} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="city" className="block text-sm font-medium mb-1">City</label>
|
||||
<input type="text" id="city" name="city" value={formData.city} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="state" className="block text-sm font-medium mb-1">State</label>
|
||||
<input type="text" id="state" name="state" value={formData.state} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="zip" className="block text-sm font-medium mb-1">Zip Code</label>
|
||||
<input type="text" id="zip" name="zip" value={formData.zip} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium mb-1">Phone Number</label>
|
||||
<input type="tel" id="phone" name="phone" value={formData.phone} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Information */}
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg">
|
||||
<h2 className="text-2xl font-semibold mb-4">Payment Information</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="cardNumber" className="block text-sm font-medium mb-1">Card Number</label>
|
||||
<input type="text" id="cardNumber" name="cardNumber" value={formData.cardNumber} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="expiry" className="block text-sm font-medium mb-1">Expiry Date</label>
|
||||
<input type="text" id="expiry" name="expiry" value={formData.expiry} onChange={handleInputChange} placeholder="MM/YY" required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cvc" className="block text-sm font-medium mb-1">CVC</label>
|
||||
<input type="text" id="cvc" name="cvc" value={formData.cvc} onChange={handleInputChange} required className="w-full p-2 border border-border rounded-md bg-transparent focus:ring focus:ring-primary-cta focus:border-primary-cta outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="space-y-8">
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg">
|
||||
<h2 className="text-2xl font-semibold mb-4">Order Summary</h2>
|
||||
<div className="space-y-4">
|
||||
{cartItems.map((item) => (
|
||||
<div key={item.id} className="flex items-center space-x-4">
|
||||
<img src={item.imageSrc} alt={item.name} className="w-16 h-16 object-cover rounded-md" />
|
||||
<div className="flex-grow">
|
||||
<h3 className="font-medium">{item.name}</h3>
|
||||
<p className="text-sm text-gray-500">Quantity: {item.quantity}</p>
|
||||
</div>
|
||||
<p className="font-semibold">₹{(parseFloat(item.price) * item.quantity).toFixed(2)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 pt-4 border-t">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span>Subtotal:</span>
|
||||
<span>₹{calculateSubtotal().toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span>Shipping:</span>
|
||||
<span>₹{shippingCost.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-bold text-xl border-t pt-4">
|
||||
<span>Total:</span>
|
||||
<span>₹{total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="w-full bg-primary-cta hover:bg-primary-cta/90 text-foreground py-3 px-6 rounded-md text-center transition-colors">
|
||||
Place Order
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoSrc="https://img.b2bpic.net/free-vector/modern-restaurant-menu-template_52683-30607.jpg"
|
||||
logoAlt="Roof Affairs Logo"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "097177 30330", href: "tel:09717730330" },
|
||||
{ label: "WhatsApp", href: "https://wa.me/919717730330" },
|
||||
{ label: "Google Maps", href: "https://maps.google.com/?q=Roof+Affairs+Pul+Pehladpur+Delhi" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Roof Affairs (रूफ अफेयर्स)"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user