From 31343e3f3a8747ce253bec89eea055668caa2e97 Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 09:36:24 +0000 Subject: [PATCH] Update src/app/checkout/page.tsx --- src/app/checkout/page.tsx | 628 +++++++++++++++++++++++++------------- 1 file changed, 418 insertions(+), 210 deletions(-) diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx index 3c579bf..7eb7698 100644 --- a/src/app/checkout/page.tsx +++ b/src/app/checkout/page.tsx @@ -1,241 +1,449 @@ -"use client"; +'use client'; -import { ThemeProvider } from "@/components/theme/ThemeProvider"; -import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; -import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal"; -import { CreditCard, Smartphone, Home } from "lucide-react"; -import { useState } from "react"; +import { ThemeProvider } from '@/components/theme-provider'; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import ReactLenis from 'lenis/react'; +import { useState } from 'react'; +import { CreditCard, Wallet, DollarSign } from 'lucide-react'; -const footerColumns = [ - { - title: "Platform", items: [ - { label: "Home", href: "/" }, - { label: "Checkout", href: "/checkout" }, - { label: "About", href: "#about" }, - { label: "Features", href: "#features" }, - ], - }, - { - title: "Community", items: [ - { label: "Petrolheads", href: "/" }, - { label: "Car Lovers", href: "/" }, - { label: "Events", href: "#features" }, - { label: "Forums", href: "/" }, - ], - }, - { - title: "Support", items: [ - { label: "Help Center", href: "/" }, - { label: "Contact", href: "/" }, - { label: "Privacy", href: "/" }, - { label: "Terms", href: "/" }, - ], - }, +const navItems = [ + { name: 'Home', id: '/' }, + { name: 'Checkout', id: '/checkout' }, ]; -export default function CheckoutPage() { - const [selectedMethod, setSelectedMethod] = useState(null); +interface ShippingFormData { + firstName: string; + lastName: string; + email: string; + phone: string; + street: string; + city: string; + state: string; + zipCode: string; + country: string; +} - const paymentMethods = [ - { - id: "ideal", name: "iDEAL", description: "Direct bank transfer (Netherlands)", icon: "💳"}, - { - id: "paypal", name: "PayPal", description: "Pay securely with your PayPal account", icon: "🅿️"}, - { - id: "mastercard", name: "Mastercard", description: "Credit/Debit card payment", icon: "💳"}, +interface OrderItem { + id: string; + name: string; + price: number; + quantity: number; +} + +export default function CheckoutPage() { + const [shippingData, setShippingData] = useState({ + firstName: '', + lastName: '', + email: '', + phone: '', + street: '', + city: '', + state: '', + zipCode: '', + country: '', + }); + + const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('ideal'); + const [currentStep, setCurrentStep] = useState<'shipping' | 'order' | 'payment'>('shipping'); + + const orderItems: OrderItem[] = [ + { id: '1', name: 'Premium Subscription (1 Year)', price: 99.99, quantity: 1 }, + { id: '2', name: 'Support Package', price: 49.99, quantity: 1 }, ]; + const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0); + const shipping = 10.0; + const tax = (subtotal + shipping) * 0.21; // 21% VAT + const total = subtotal + shipping + tax; + + const handleShippingChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setShippingData(prev => ({ + ...prev, + [name]: value, + })); + }; + + const handleShippingSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setCurrentStep('order'); + }; + + const handlePaymentSubmit = () => { + console.log('Processing payment with method:', selectedPaymentMethod); + alert(`Payment processing with ${selectedPaymentMethod.toUpperCase()}`); + }; + return ( - - -
-
- {/* Header */} -
-

- Secure Checkout -

-

- Select your preferred payment method to complete your purchase -

-
- - {/* Order Summary */} -
-

- Order Summary -

-
-
- Premium Membership (Annual) - $299.00 -
-
- Performance Bundle - $149.00 -
-
- Total: - $448.00 + + +
+
+ {/* Progress Steps */} +
+
+
+
+ 1 +
+

Shipping

+
+
+
+
+ 2 +
+

Order Summary

+
+
+
+
+ 3 +
+

Payment

+
-
- {/* Payment Methods */} -
-

- Select Payment Method -

-
- {paymentMethods.map((method) => ( - + +
+ )} + + {/* Order Summary */} + {currentStep === 'order' && ( +
+

Order Summary

+
+ {orderItems.map(item => ( +
+
+

{item.name}

+

Quantity: {item.quantity}

+
+

${(item.price * item.quantity).toFixed(2)}

+
+ ))} +
+ +
+
+ Subtotal + ${subtotal.toFixed(2)} +
+
+ Shipping + ${shipping.toFixed(2)} +
+
+ Tax (21%) + ${tax.toFixed(2)} +
+
+ Total + ${total.toFixed(2)}
-
-
- - ))} -
-
- {/* Selected Method Details */} - {selectedMethod && ( -
- {selectedMethod === "ideal" && ( -
-

- iDEAL Payment -

-

- You will be redirected to your bank to complete the payment securely. -

-
- Supported by all major Dutch banks including ING, ABN AMRO, and Rabobank. -
-
- )} - {selectedMethod === "paypal" && ( -
-

- 🅿️ PayPal Payment -

-

- Sign in to your PayPal account to complete the transaction securely. -

-
- Your PayPal account provides buyer protection for this purchase. -
-
- )} - {selectedMethod === "mastercard" && ( -
-

- Mastercard Payment -

-

- Enter your Mastercard details below. Your payment is secured with SSL encryption. -

-
- -
- - +
+ +
+ )} + + {/* Payment Methods */} + {currentStep === 'payment' && ( +
+

Select Payment Method

+
+ {/* iDEAL */} + + + {/* PayPal */} + + + {/* Mastercard */} + +
+ +
+ + +
+
+ )} +
+ + {/* Order Summary Sidebar */} +
+
+

Order Total

+
+
+ Subtotal + ${subtotal.toFixed(2)} +
+
+ Shipping + ${shipping.toFixed(2)} +
+
+ Tax (21%) + ${tax.toFixed(2)} +
+
+
+
+ Total + ${total.toFixed(2)} +
+
+
+

✓ Secure payment

+

✓ Money-back guarantee

+

✓ Fast delivery

+
- )} +
- )} - - {/* Action Buttons */} -
- - -
- - {/* Security Note */} -
- 🔒 Your payment information is secure and encrypted. We never store your full card details.
-
- - + ); }