import { useEffect, useRef, useState } from 'react'; import Head from 'next/head'; import SiteLayout from '../components/SiteLayout'; import { submitOrder } from '../lib/api'; import { useCart } from '../context/CartContext'; const INITIAL_CUSTOMER = { name: '', email: '', phone: '', fulfillment_method: 'pickup', scheduled_date: '', scheduled_time_slot: '', delivery_address_line1: '', delivery_city: '', delivery_state: 'WI', delivery_postal_code: '', override_code: '', notes: '', }; export default function CartPage() { const { items, updateQuantity, removeItem, clearCart, subtotal } = useCart(); const [customer, setCustomer] = useState(INITIAL_CUSTOMER); const [notice, setNotice] = useState(null); const [submitting, setSubmitting] = useState(false); const [confirmation, setConfirmation] = useState(null); const timeoutRef = useRef(null); useEffect(() => () => clearTimeout(timeoutRef.current), []); const showNotice = (message, variant = 'info') => { clearTimeout(timeoutRef.current); setNotice({ message, variant }); timeoutRef.current = setTimeout(() => setNotice(null), 4000); }; const handleQuantity = (id, delta) => { const entry = items.find((item) => item.id === id); if (!entry) return; const limit = Number.isFinite(entry.limit) ? entry.limit : Infinity; const next = Math.max(0, Math.min(entry.quantity + delta, limit)); updateQuantity(id, next); }; const deliveryFee = customer.fulfillment_method === 'delivery' ? 5 : 0; const total = subtotal + deliveryFee; const hasCartItems = items.length > 0; const updateCustomerField = (field, value) => { setCustomer((prev) => ({ ...prev, [field]: value })); }; const handleSubmit = async (event) => { event.preventDefault(); if (!hasCartItems) { showNotice('Add at least one item to your cart before checking out.', 'error'); return; } if (!customer.name.trim() || !customer.email.trim()) { showNotice('Name and email are required.', 'error'); return; } if (customer.fulfillment_method === 'delivery') { if (!customer.delivery_address_line1.trim() || !customer.delivery_city.trim() || !customer.delivery_postal_code.trim()) { showNotice('Delivery address, city, and postal code are required for delivery orders.', 'error'); return; } } if (items.some((item) => !item.id)) { showNotice('Cart contains placeholder items. Add products from the live menu once available.', 'info'); return; } const payload = { customer_name: customer.name.trim(), customer_email: customer.email.trim(), customer_phone: customer.phone.trim(), fulfillment_method: customer.fulfillment_method, scheduled_date: customer.scheduled_date || null, scheduled_time_slot: customer.scheduled_time_slot, delivery_address_line1: customer.fulfillment_method === 'delivery' ? customer.delivery_address_line1.trim() : '', delivery_address_line2: '', delivery_city: customer.fulfillment_method === 'delivery' ? customer.delivery_city.trim() : '', delivery_state: customer.fulfillment_method === 'delivery' ? customer.delivery_state.trim() : '', delivery_postal_code: customer.fulfillment_method === 'delivery' ? customer.delivery_postal_code.trim() : '', delivery_override_code: customer.override_code.trim() || null, notes: customer.notes, items: items.map((item) => ({ product: item.id, quantity: item.quantity })), }; try { setSubmitting(true); const order = await submitOrder(payload); setConfirmation(order.id); clearCart(); setCustomer(INITIAL_CUSTOMER); showNotice('Order received! Check your email for confirmation.', 'success'); } catch (error) { showNotice('We were unable to place your order. Please try again.', 'error'); } finally { setSubmitting(false); } }; return ( Cart · Full Moon Bakehouse

Your cart

Add or adjust items, then submit your preorder request.

{notice ?
{notice.message}
: null}

Items

{hasCartItems ? ( ) : null}
{hasCartItems ? (
{items.map((item) => (
{item.name} ${(item.price * item.quantity).toFixed(2)}
{item.quantity}
{Number.isFinite(item.limit) ? ( Max {item.limit} per order. ) : null}
))}
) : (
Your cart is empty. Browse the menu to get started.
)}
Subtotal ${subtotal.toFixed(2)}
Delivery fee {customer.fulfillment_method === 'delivery' ? '$5.00' : '$0.00'}
Total ${total.toFixed(2)}

Checkout

{confirmation ? (
Order #{confirmation} received!
) : null}
Fulfillment method
{customer.fulfillment_method === 'delivery' ? (
) : null}