/* Yan's Cakes desktop — buy flow: Cart, Checkout, Confirmation. */ function DCart({ items, onQty, onNav }) { const { fmt } = window.YANS; const sub = items.reduce((s, it) => s + it.price * it.qty, 0); const FREE = 60, toFree = Math.max(0, FREE - sub), fee = sub >= FREE ? 0 : 8; if (items.length === 0) { return (

Your box is empty

Add a few handcrafted favourites to get started.

); } return (

Your box

{items.map((it) => (
onNav({ s: "product", p: it })} style={{ width: 90, height: 90, borderRadius: "var(--radius-md)", overflow: "hidden", flex: "none", cursor: "pointer" }}>
{it.name}
{it.detail &&
{it.detail}
}
{fmt(it.price)} each
{it.qty}
{fmt(Math.round(it.price * it.qty * 100) / 100)}
))}
); } function DCheckout({ items, onPlace }) { const { fmt } = window.YANS; const sub = items.reduce((s, it) => s + it.price * it.qty, 0); const [name, setName] = React.useState(""); const [phone, setPhone] = React.useState(""); const [email, setEmail] = React.useState(""); const [method, setMethod] = React.useState("delivery"); const [addr, setAddr] = React.useState(""); const [note, setNote] = React.useState(""); const pickup = method === "pickup"; const fee = pickup ? 0 : (sub >= 60 ? 0 : 10); const [day, setDay] = React.useState(null); React.useEffect(() => { setDay(null); }, [method]); const [slot, setSlot] = React.useState("Before 2PM"); const [pay, setPay] = React.useState("PayNow"); const [promo, setPromo] = React.useState(""); const [applied, setApplied] = React.useState(null); const [promoErr, setPromoErr] = React.useState(false); const applyPromo = () => { if (promo.trim().toUpperCase() === "YANSNEW") { setApplied({ code: "YANSNEW", rate: 0.1 }); setPromoErr(false); } else { setApplied(null); setPromoErr(true); } }; const discount = applied ? sub * applied.rate : 0; const grand = Math.round((sub - discount + fee) * 100) / 100; return (

Checkout

{[["delivery", "ph-truck", "Delivery", "$10 / location · free above $60"], ["pickup", "ph-storefront", "Self-collection", "Pick up at our kitchen · free"]].map(([m, ic, t, sub2]) => ( ))}
setName(e.target.value)} /> setPhone(e.target.value)} />
setEmail(e.target.value)} />
{pickup ?
Collect at Yan’s Cakes
3020 Ubi Ave 2, #01-137, Singapore 408896
:
setAddr(e.target.value)} />
setNote(e.target.value)} />
}
{(() => { const now = new Date(); const isToday = day && day.toDateString() === now.toDateString(); const beforeDisabled = isToday && now.getHours() >= 14; if (beforeDisabled && slot === "Before 2PM") setTimeout(() => setSlot("After 2PM"), 0); return
{["Before 2PM", "After 2PM"].map((s) => { const dis = s === "Before 2PM" && beforeDisabled; return !dis && setSlot(s)}>{s}; })}
; })()}

Orders paid before 2PM deliver next day. No delivery on public holidays.

{[["PayNow", "ph-qr-code"], ["Credit / debit card", "ph-credit-card"]].map(([m, ic]) => ( ))}
{ setPromo(e.target.value); setPromoErr(false); }} placeholder="Promo code" style={{ flex: 1, border: 0, outline: "none", background: "transparent", padding: "14px 0", fontFamily: "var(--font-body)", fontSize: 14.5, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-primary)" }} />
{applied &&
Code {applied.code} applied — 10% off
} {promoErr &&
That code isn’t valid.
}
); } function DConfirm({ order, onNav }) { const { fmt } = window.YANS; const pickup = order.method === "pickup"; return (
Yan's Cakes

Order confirmed

Thank you — we’ve received your order and a confirmation has been sent to your phone.

Yan’s Cakes · 3020 Ubi Ave 2, #01-137, Singapore 408896

Order #{order.code || "YC-2048"}
{pickup ? "Self-pickup " : "Delivering "}{order.day}, {order.slot}
{pickup ? "Collect at 3020 Ubi Ave 2, #01-137. Keep chilled — enjoy within 2–3 days." : "Please keep your cakes chilled on arrival. Enjoy within 2–3 days."}

Thank you for your support!

A receipt has been emailed to you{order.email ? " (" + order.email + ")" : ""} and to admin@yanscakes.com.

); } const fmtDate = (d) => d.toLocaleDateString("en-SG", { weekday: "short", day: "numeric", month: "short" }); function toISODate(d) { const dd = new Date(d); const y = dd.getFullYear(); const m = String(dd.getMonth() + 1).padStart(2, "0"); const day = String(dd.getDate()).padStart(2, "0"); return y + "-" + m + "-" + day; } function makeOrderCode(method, day) { const d = day || new Date(); const dd = String(d.getDate()).padStart(2, "0"); const mm = String(d.getMonth() + 1).padStart(2, "0"); const yy = String(d.getFullYear()).slice(-2); const seq = String(Math.floor(1000 + Math.random() * 9000)); return (method === "pickup" ? "SP" : "DO") + "-" + dd + mm + yy + "-" + seq; } function DCalendar({ value, onChange, method }) { const today = new Date(); today.setHours(0, 0, 0, 0); const rule = window.YANS.dateRule(method); const min = rule.min; const [view, setView] = React.useState(new Date(min.getFullYear(), min.getMonth(), 1)); const y = view.getFullYear(), m = view.getMonth(); const first = new Date(y, m, 1).getDay(); const days = new Date(y, m + 1, 0).getDate(); const canPrev = new Date(y, m, 1) > new Date(min.getFullYear(), min.getMonth(), 1); const cells = []; for (let i = 0; i < first; i++) cells.push(null); for (let d = 1; d <= days; d++) cells.push(new Date(y, m, d)); const same = (a, b) => a && b && a.toDateString() === b.toDateString(); const navBtn = (on) => ({ width: 30, height: 30, borderRadius: "50%", border: "1px solid var(--border-default)", background: "var(--surface-card)", color: on ? "var(--text-primary)" : "var(--text-muted)", cursor: on ? "pointer" : "not-allowed", opacity: on ? 1 : 0.4, display: "flex", alignItems: "center", justifyContent: "center" }); return (
{view.toLocaleDateString("en-SG", { month: "long", year: "numeric" })}
{["S", "M", "T", "W", "T", "F", "S"].map((d, i) =>
{d}
)} {cells.map((d, i) => { if (!d) return
; const past = d < min || rule.blocked(d); const sel = same(d, value); return ( ); })}
); } function DStep({ n, label }) { return
{n}{label}
; } function DField({ icon, placeholder, value, onChange }) { return
; } function DPick({ on, onClick, children, disabled }) { return ; } function DRow({ label, val, big }) { return
{label}{val}
; } const cStep = { width: 36, height: 38, border: 0, background: "transparent", color: "var(--text-primary)", cursor: "pointer", fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center" }; const dPrimary = { height: 50, padding: "0 28px", border: 0, borderRadius: "var(--radius-md)", background: "var(--gold)", color: "#fff", fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 700, letterSpacing: "0.02em", cursor: "pointer", boxShadow: "var(--shadow-foil)" }; Object.assign(window, { DCart, DCheckout, DConfirm, DRow });