/* The Cakerz — Atelier. File 3 of 3: cart, stepped checkout (fulfilment → schedule → details → review), Square payment handoff, order confirmation, custom-request confirmation, plus the App shell + mount. */ const { aS: cS, useVW, $, Crest, Logo, Btn, Stars } = window.Atelier; const { Shop, Product, CustomRequest, Gallery, About, Contact, FAQ } = window.AtelierShop; const ACD = window.CAKERZ_DATA; const PG = { maxWidth: 1200, margin: "0 auto" }; const TIMES = ["9:00 am", "10:00 am", "11:00 am", "12:30 pm", "2:00 pm", "3:30 pm"]; /* ============================ CART ============================ */ function Cart({ go, cart, setQty, remove, fulfil, setFulfil, mobile }) { const sub = cart.reduce((t, i) => t + i.price * i.qty, 0); const delivery = fulfil === "delivery" ? (sub >= 80 ? 0 : 12) : 0; if (!cart.length) return (

Your cart is empty

Browse the menu and build your order.

go("shop")}>Shop the menu
); return (

Your order

{["pickup", "delivery"].map((m) => )}
{cart.map((i) => (
{i.name}
{i.opts}
{i.qty}
{$(i.price * i.qty)}
))}
); } /* ============================ CHECKOUT (stepped) ============================ */ function Checkout({ go, cart, fulfil, setFulfil, sched, setSched, toSquare, mobile }) { const [step, setStep] = cS(0); const sub = cart.reduce((t, i) => t + i.price * i.qty, 0); const delivery = fulfil === "delivery" ? (sub >= 80 ? 0 : 12) : 0; const total = sub + delivery; const steps = ["Fulfilment", "Schedule", "Details", "Review"]; const canNext = step === 1 ? sched.date && sched.time : true; return (

Checkout

{/* stepper */}
{steps.map((s, i) => (
{i < step ? "✓" : i + 1} {s}
{i < 3 && !mobile && }
))}
{step === 0 && (<>

How would you like your order?

{[["pickup", "ph-storefront", "Pickup", "Collect from Knuckey St — free"], ["delivery", "ph-moped", "Delivery", "Darwin-wide · free over $80"]].map(([m, ic, t, d]) => ( ))}
{fulfil === "delivery" && } )} {step === 1 && (<>

Choose a date & time

Date
setSched((s) => ({ ...s, date: e.target.value }))} style={inp2} />

Custom cakes need 48h notice.

Time slot
{TIMES.map((t) => )}
)} {step === 2 && (<>

Your details

)} {step === 3 && (<>

Review your order

{cart.map((i) =>
{i.qty}× {i.name}
{i.opts}
{$(i.price * i.qty)}
)}
Fulfilment{fulfil}
When{sched.date || "—"} · {sched.time || "—"}
)}
(step === 0 ? go("cart") : setStep(step - 1))}>← Back {step < 3 ? canNext && setStep(step + 1)} disabled={!canNext}>Continue : toSquare()}>Continue to payment →}
); } function H3({ children }) { return

{children}

; } function Field({ label, ph, type = "text" }) { return ; } const inp2 = { width: "100%", boxSizing: "border-box", padding: "12px 14px", border: "1.5px solid var(--c-line-strong)", borderRadius: 9, font: "400 15px/1.5 var(--font-body)", outline: "none" }; /* ============================ SQUARE HANDOFF ============================ */ function SquareHandoff({ go, cart, fulfil, sched, placeOrder, mobile }) { const sub = cart.reduce((t, i) => t + i.price * i.qty, 0); const delivery = fulfil === "delivery" ? (sub >= 80 ? 0 : 12) : 0; const total = sub + delivery; const [loading, setLoading] = cS(false); return (
Secure handoff to Square

Complete payment

Payments securely handled by Square. Card details are processed by Square, not stored on this website.

Items ({cart.reduce((t, i) => t + i.qty, 0)}){$(sub)}
{fulfil} · {sched.date || "TBC"}{delivery === 0 ? "Free" : $(delivery)}
Amount due{$(total)}
PCI-DSS Visa · Mastercard · Amex Apple / Google Pay
); } /* ============================ ORDER CONFIRMATION ============================ */ function Confirm({ go, fulfil, sched, lastOrder, mobile }) { const total = lastOrder.total || 0; const stages = [["Order received", "ph-check-circle", true], ["Baking", "ph-cooking-pot", false], [fulfil === "delivery" ? "Out for delivery" : "Ready for pickup", fulfil === "delivery" ? "ph-moped" : "ph-storefront", false]]; return (

Order confirmed!

Thanks — your payment was successful. A receipt from Square is on its way to your email.

Order number
#TC-{lastOrder.num}
Paid via Square
{$(total)}
{/* status timeline */}
{stages.map(([t, ic, done], i) => (
{t}
))}
{fulfil === "delivery" ? "Delivery" : "Pickup"}{fulfil}
When{sched.date || "We'll confirm"} · {sched.time || ""}
Where{fulfil === "delivery" ? "Your address" : "Shop 4, 21 Knuckey St"}

We'll text you the moment your order is ready.

go("home")}>Back to home go("shop")}>Order again
); } /* ============================ CUSTOM REQUEST CONFIRMATION ============================ */ function RequestConfirm({ go, mobile }) { return (

Request received

Thank you! Our cake designers will review your brief and reply within one business day with a quote. Once you're happy, we'll send a secure Square deposit link to lock it in — no payment needed right now.

What happens next
{[["ph-magnifying-glass", "We review your brief & inspiration"], ["ph-chat-circle-text", "We send a quote & timeline"], ["ph-link", "You pay a deposit via secure Square link"], ["ph-cake", "We start baking your custom cake"]].map(([ic, t], i) => (
{t}
))}
go("home")}>Back to home
); } /* ============================ APP ============================ */ function routeFromPath() { const pathname = window.location.pathname; if (pathname.startsWith("/menu/")) return { name: "product", id: pathname.split("/").filter(Boolean)[1] || null, cat: null }; if (pathname === "/menu") return { name: "shop", id: null, cat: null }; if (pathname === "/custom-cakes") return { name: "custom", id: null, cat: null }; if (pathname === "/cart") return { name: "cart", id: null, cat: null }; if (pathname === "/checkout") return { name: "checkout", id: null, cat: null }; if (pathname === "/admin") return { name: "admin", id: null, cat: null }; return { name: "home", id: null, cat: null }; } function pathForRoute(route) { if (route.name === "product" && route.id) return "/menu/" + route.id; if (route.name === "shop") return "/menu"; if (route.name === "custom") return "/custom-cakes"; if (route.name === "cart") return "/cart"; if (route.name === "checkout") return "/checkout"; if (route.name === "admin") return "/admin"; return "/"; } function AdminPlaceholder({ mobile }) { return (

Admin coming soon

The customer storefront is ready for review. Staff ordering tools, Supabase auth and live order management belong in the backend phase.

window.history.length > 1 ? window.history.back() : window.location.assign("/")}>Back to storefront
); } function App() { const { Header, MobileNav, CartDrawer, Footer, Home: HomeC } = window.Atelier; const vw = useVW(); const mobile = vw < 820; const [route, setRoute] = cS(routeFromPath); const [cart, setCart] = cS([]); const [fulfil, setFulfil] = cS("pickup"); const [sched, setSched] = cS({ date: "", time: "" }); const [drawer, setDrawer] = cS(false); const [lastOrder, setLastOrder] = cS({ num: 2048, total: 0 }); React.useEffect(() => { const onPop = () => setRoute(routeFromPath()); window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); const go = (name, id = null) => { const next = { name, id, cat: name === "shop" ? id : null }; setRoute(next); const nextPath = pathForRoute(next); if (window.location.pathname !== nextPath) window.history.pushState({}, "", nextPath); window.scrollTo(0, 0); }; const addLine = (line) => setCart((c) => { const ex = c.find((i) => i.id === line.id && i.opts === line.opts && i.price === line.price); if (ex) return c.map((i) => (i === ex ? { ...i, qty: i.qty + line.qty } : i)); return [...c, { key: line.id + "-" + Date.now(), ...line }]; }); const quickAdd = (p) => { addLine({ id: p.id, name: p.name, kind: p.kind, price: p.price, qty: 1, opts: p.flavours[0] }); setDrawer(true); }; const addConfigured = (line) => { addLine(line); setDrawer(true); }; const setQty = (key, n) => setCart((c) => (n <= 0 ? c.filter((i) => i.key !== key) : c.map((i) => (i.key === key ? { ...i, qty: n } : i)))); const remove = (key) => setCart((c) => c.filter((i) => i.key !== key)); const toSquare = () => go("square"); const placeOrder = () => { const sub = cart.reduce((t, i) => t + i.price * i.qty, 0); const del = fulfil === "delivery" ? (sub >= 80 ? 0 : 12) : 0; setLastOrder({ num: Math.floor(2000 + Math.random() * 900), total: sub + del }); setCart([]); go("confirm"); }; const submitRequest = () => go("request-confirm"); const count = cart.reduce((t, i) => t + i.qty, 0); let s; switch (route.name) { case "shop": s = ; break; case "product": s = ; break; case "custom": s = ; break; case "gallery": s = ; break; case "about": s = ; break; case "contact": s = ; break; case "faq": s = ; break; case "cart": s = ; break; case "checkout": s = ; break; case "admin": s = ; break; case "square": s = ; break; case "confirm": s = ; break; case "request-confirm": s = ; break; default: s = ; } return ( <>
setDrawer(true)} fulfil={fulfil} setFulfil={setFulfil} mobile={mobile} /> {s}