'use client'; /* * Vireo Next.js — Ecommerce / Checkout (route "ecommerce/checkout"). * * Faithful re-expression of src/html/ecommerce/checkout.html: a 4-step wizard * (contact & address, shipping method, payment, review) driven by a clickable * stepper, with a sticky order-summary rail (line items, promo, live totals). * The Alpine x-data (axCheckout) — step nav, method selection, coupon, totals — * is ported to React state; classes + ARIA match the reference 1:1. */ import { useState, type ReactElement } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { PageHead } from '../../components/shell/PageHead'; const C2 = 'var(--ax-viz-cyan)', C3 = 'var(--ax-viz-violet)', C4 = 'var(--ax-viz-amber)'; const money = (v: number) => '$' + v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const STEPS = [ { id: 'addr', label: 'Address' }, { id: 'ship', label: 'Shipping' }, { id: 'pay', label: 'Payment' }, { id: 'review', label: 'Review' }, ]; const SAVED_ADDRESSES = [ { id: 'home', name: 'Amelia Hart', tag: 'Default', lines: '1820 NW Glisan St, Apt 4B · Portland, OR 97201' }, { id: 'work', name: 'Amelia Hart', tag: 'Work', lines: '500 SW Broadway, Ste 900 · Portland, OR 97205' }, ]; interface ShipMethod { id: string; name: string; eta: string; price: number; c: string; icon: ReactElement; } const SHIP_METHODS: ShipMethod[] = [ { id: 'standard', name: 'Standard', eta: '5–7 business days', price: 0, c: 'var(--ax-viz-emerald)', icon: }, { id: 'express', name: 'Express', eta: '2–3 business days', price: 12.0, c: C2, icon: }, { id: 'priority', name: 'Priority overnight', eta: 'Next business day by 12 PM', price: 24.5, c: C4, icon: }, ]; interface PayMethod { id: string; name: string; icon: ReactElement; } const PAY_METHODS: PayMethod[] = [ { id: 'card', name: 'Card', icon: }, { id: 'paypal', name: 'PayPal', icon: }, { id: 'bank', name: 'Bank', icon: }, { id: 'cod', name: 'Cash', icon: }, ]; const ITEMS = [ { id: 1, name: 'Aperture Desk Lamp', variant: 'Brass / Warm white', qty: 1, price: 129.0, c: C2 }, { id: 2, name: 'Matte Ceramic Mug', variant: 'Slate · 12 oz', qty: 2, price: 24.0, c: C3 }, { id: 3, name: 'Walnut Monitor Riser', variant: 'Walnut / Large', qty: 1, price: 96.0, c: C4 }, ]; const PRODUCT_AV = ( ); export function Checkout() { const router = useRouter(); const [step, setStep] = useState(0); const [maxReached, setMaxReached] = useState(0); const [mode, setMode] = useState<'guest' | 'account'>('guest'); const [savedAddr, setSavedAddr] = useState('home'); const [shipDifferent, setShipDifferent] = useState(false); const [shipping, setShipping] = useState('standard'); const [payment, setPayment] = useState('card'); const [terms, setTerms] = useState(false); const [payError] = useState(false); const [coupon, setCoupon] = useState(''); const [couponMsg, setCouponMsg] = useState(''); const [discount, setDiscount] = useState(0); const subtotal = () => ITEMS.reduce((s, i) => s + i.price * i.qty, 0); const discountAmt = () => subtotal() * discount; const shipCost = () => (subtotal() - discountAmt() > 75 && shipping === 'standard' ? 0 : SHIP_METHODS.find((m) => m.id === shipping)?.price || 0); const tax = () => (subtotal() - discountAmt()) * 0.0825; const total = () => subtotal() - discountAmt() + shipCost() + tax(); const currentShip = () => SHIP_METHODS.find((m) => m.id === shipping)!; const currentPay = () => PAY_METHODS.find((m) => m.id === payment)!; const next = () => { if (step < 3) { const ns = step + 1; setStep(ns); setMaxReached((m) => Math.max(m, ns)); window.scrollTo({ top: 0, behavior: 'smooth' }); } }; const prev = () => { if (step > 0) { setStep(step - 1); window.scrollTo({ top: 0, behavior: 'smooth' }); } }; const goTo = (i: number) => { if (i <= maxReached) { setStep(i); window.scrollTo({ top: 0, behavior: 'smooth' }); } }; const applyCoupon = () => { const c = coupon.trim().toUpperCase(); if (c === 'WELCOME10') { setDiscount(0.1); setCouponMsg('WELCOME10 applied — 10% off'); } else if (c === 'SAVE20') { setDiscount(0.2); setCouponMsg('SAVE20 applied — 20% off'); } else if (c) { setDiscount(0); setCouponMsg('That code isn’t valid'); } }; const placeOrder = () => router.push('/ecommerce/order-success'); return ( <> Secure checkout — 3 items in your bag, ships from Portland, OR.) as unknown as string } actions={ Back to cart } /> {/* STEPPER */}
    {STEPS.map((s, i) => (
  1. {i > 0 &&
    2. ))}
{/* LEFT: STEP PANELS */}
{/* STEP 1 · ADDRESS */} {step === 0 && (
Step 1 of 4

Contact & address

Where should we ship your order?

Order confirmation & tracking will be sent here.
Saved addresses
{SAVED_ADDRESSES.map((a) => ( ))}
{savedAddr === 'new' && (
)}
)} {/* STEP 2 · SHIPPING */} {step === 1 && (
Step 2 of 4

Shipping method

Delivering to Portland, OR 97201.

{SHIP_METHODS.map((m) => ( ))}
Free standard shipping on orders over $75.00.
)} {/* STEP 3 · PAYMENT */} {step === 2 && (
Step 3 of 4

Payment

All transactions are secured & encrypted.

{payError && (

Card declined

Check the number or try another payment method.

)}
{PAY_METHODS.map((p) => ( ))}
{payment === 'card' && (
)} {payment === 'paypal' &&

You'll be redirected to PayPal to complete payment securely after placing your order.

} {payment === 'bank' &&

Transfer details will appear on the confirmation page. Order ships once payment clears.

} {payment === 'cod' &&

Pay the courier in cash on delivery. A $3.00 handling fee applies for COD.

}
Secured by 256-bit TLS encryption. We never store your CVC.
)} {/* STEP 4 · REVIEW */} {step === 3 && (
Step 4 of 4

Review & place order

Confirm everything looks right before you pay.

Contact
amelia.hart@gmail.com
Ship to
Amelia Hart
1820 NW Glisan St, Apt 4B · Portland, OR 97201 · United States
Shipping
{currentShip().name}
{currentShip().eta}
Payment
{payment === 'card' ? 'Visa •••• 4242' : currentPay().name}
    {ITEMS.map((it) => (
  • {PRODUCT_AV} {it.name}{it.variant + ' · Qty ' + it.qty} {money(it.price * it.qty)}
    • ))}
)}
{/* RIGHT: ORDER SUMMARY RAIL */}
); } export default Checkout;