/* ============================================================
Shared components + cart store for the storefront template.
Loaded before pages.jsx and app.jsx. Exports to window.
============================================================ */
const { useState, useEffect, useCallback, useRef } = React;
/* ---- Cart store (localStorage, namespaced per brand) -------- */
function cartKey(brand) { return `cart:${brand}`; }
function useCart(brand, ephemeral = false) {
const [items, setItems] = useState(() => {
if (ephemeral) return {};
try { return JSON.parse(localStorage.getItem(cartKey(brand))) || {}; }
catch { return {}; }
});
const write = (next) => {
if (ephemeral) return;
localStorage.setItem(cartKey(brand), JSON.stringify(next));
window.dispatchEvent(new CustomEvent('cartchange', { detail: { brand } }));
};
// keep tabs / pages in sync
useEffect(() => {
if (ephemeral) return;
const onStorage = (e) => {
if (e.key === cartKey(brand)) {
try { setItems(JSON.parse(e.newValue) || {}); } catch { setItems({}); }
}
};
window.addEventListener('storage', onStorage);
return () => window.removeEventListener('storage', onStorage);
}, [brand, ephemeral]);
const persist = useCallback((next) => {
setItems(next);
write(next);
}, [brand, ephemeral]);
const setQty = useCallback((id, qty) => {
setItems((prev) => {
const next = { ...prev };
if (qty <= 0) delete next[id]; else next[id] = qty;
write(next);
return next;
});
}, [brand, ephemeral]);
const add = useCallback((id, n = 1) => {
setItems((prev) => {
const next = { ...prev, [id]: (prev[id] || 0) + n };
write(next);
return next;
});
}, [brand, ephemeral]);
const clear = useCallback(() => persist({}), [persist]);
// cross-component live updates within the same page
useEffect(() => {
if (ephemeral) return;
const onCart = (e) => {
if (e.detail?.brand !== brand) return;
try { setItems(JSON.parse(localStorage.getItem(cartKey(brand))) || {}); }
catch { setItems({}); }
};
window.addEventListener('cartchange', onCart);
return () => window.removeEventListener('cartchange', onCart);
}, [brand, ephemeral]);
return { items, add, setQty, clear };
}
function cartCount(items) {
return Object.values(items).reduce((a, b) => a + b, 0);
}
function cartTotal(items, products) {
return products.reduce((sum, p) => sum + (items[p.id] || 0) * p.price, 0);
}
function money(cur, n) {
return cur + (Number.isInteger(n) ? n : n.toFixed(2));
}
/* ---- Icons (simple line glyphs) ----------------------------- */
const Icon = {
cart: (p) => (),
plus: (p) => (),
minus: (p) => (),
arrow: (p) => (),
pin: (p) => (),
clock: (p) => (),
phone: (p) => (),
mail: (p) => (),
ig: (p) => (),
check: (p) => (),
star: (p) => (),
};
/* ---- Image placeholder ------------------------------------- */
const IMAGE_ASSETS = {
"hero — pizza out of the oven, charred crust": "shared/assets/pizza/hero-pizza-transparent.png",
"about — dough being stretched by hand": "shared/assets/pizza/about-dough-stretching.mp4",
"margherita pizza": "shared/assets/pizza/menu/margherita.jpg",
"marinara pizza": "shared/assets/pizza/menu/marinara.jpg",
"diavola pizza": "shared/assets/pizza/menu/diavola.jpg",
"napoletana pizza": "shared/assets/pizza/menu/napoletana.jpg",
"sausage pizza": "shared/assets/pizza/menu/salsiccia.jpg",
"capricciosa pizza": "shared/assets/pizza/menu/capricciosa.jpg",
"bufalina pizza": "shared/assets/pizza/menu/bufalina.jpg",
"four cheese pizza": "shared/assets/pizza/menu/quattro.jpg",
"mushroom pizza": "shared/assets/pizza/menu/funghi.jpg",
"prosciutto pizza": "shared/assets/pizza/menu/prosciutto.jpg",
"potato pizza": "shared/assets/pizza/menu/patate.jpg",
"vegetable pizza": "shared/assets/pizza/menu/vegetariana.jpg",
"truffle pizza": "shared/assets/pizza/menu/tartufo.jpg",
"nduja pizza": "shared/assets/pizza/menu/nduja.jpg",
"burrata pizza": "shared/assets/pizza/menu/burrata.jpg",
"calzone": "shared/assets/pizza/menu/calzone.jpg",
"hero — tray of glazed doughnuts, glossy": "shared/assets/doughnut/header-doughnut-cutout.png",
"about — baker glazing doughnuts by hand": "shared/assets/doughnut/about-glazing.png",
"glazed doughnut": "shared/assets/doughnut/menu/glazed.jpg",
"cinnamon sugar doughnut": "shared/assets/doughnut/menu/cinnamon.jpg",
"chocolate old fashioned": "shared/assets/doughnut/menu/oldfashion.jpg",
"vanilla bean doughnut": "shared/assets/doughnut/menu/vanilla.jpg",
"strawberry sprinkle doughnut": "shared/assets/doughnut/menu/sprinkle.jpg",
"double chocolate doughnut": "shared/assets/doughnut/menu/cocoa.jpg",
"boston cream doughnut": "shared/assets/doughnut/menu/boston.jpg",
"raspberry jam doughnut": "shared/assets/doughnut/menu/raspberry.jpg",
"lemon curd doughnut": "shared/assets/doughnut/menu/lemon.jpg",
"salted caramel doughnut": "shared/assets/doughnut/menu/caramel.jpg",
"bavarian cream doughnut": "shared/assets/doughnut/menu/bavarian.jpg",
"hazelnut chocolate doughnut": "shared/assets/doughnut/menu/nutella.jpg",
"maple bacon doughnut": "shared/assets/doughnut/menu/maple.jpg",
"matcha doughnut": "shared/assets/doughnut/menu/matcha.jpg",
"pistachio doughnut": "shared/assets/doughnut/menu/pistachio.jpg",
"birthday cake doughnut": "shared/assets/doughnut/menu/birthday.jpg",
};
function Ph({ label, className = "", center = false, style }) {
const directSrc = typeof label === "string" && (/[/\\]/.test(label) || /\.(png|jpe?g|webp|gif|svg|mp4|webm|ogg)$/i.test(label));
const assetSrc = directSrc ? label : IMAGE_ASSETS[label];
const src = resolveAssetSrc(assetSrc);
const isVideo = /\.(mp4|webm|ogg)$/i.test(src || "");
const assetClass = src?.includes("/pizza/") ? "pizza-img" : "";
const imageStyle = src && !isVideo
? { ...style, backgroundImage: `url("${src}")` }
: style;
const artStyle = src && !isVideo ? { backgroundImage: `url("${src}")` } : null;
return (
{src && !isVideo && }
{isVideo && }
);
}
function VisibleVideo({ src }) {
const ref = React.useRef(null);
React.useEffect(() => {
const video = ref.current;
if (!video) return;
const update = () => {
const r = video.getBoundingClientRect();
const fullyVisible = r.top >= 0 && r.left >= 0 && r.bottom <= window.innerHeight && r.right <= window.innerWidth;
if (fullyVisible) video.play().catch(() => {});
else video.pause();
};
update();
const observer = new IntersectionObserver(update, { threshold: [0, 1] });
observer.observe(video);
window.addEventListener("resize", update);
return () => {
observer.disconnect();
window.removeEventListener("resize", update);
};
}, []);
return (
);
}
function resolveAssetSrc(src) {
if (!src || /^https?:\/\//i.test(src) || src.startsWith("/") || src.startsWith("shared/")) return src;
return `${window.PROJECT_BASE_URL || ""}${src.replace(/^\.\//, "")}`;
}
/* ---- Quantity stepper -------------------------------------- */
function Stepper({ qty, onAdd, onSub, size = "md" }) {
const sm = size === "sm";
if (!qty) {
return (
);
}
return (
{qty}
);
}
/* ---- Product card (3 styles via `variant`) ------------------ */
function ProductCard({ p, cur, qty, onAdd, onSub, variant }) {
const tag = p.tag && (
{p.tag}
);
if (variant === "list") {
return (
{p.name} {tag}
{money(cur, p.price)}
{p.desc}
);
}
if (variant === "editorial") {
return (
{tag}
{money(cur, p.price)}
);
}
// default: "clean"
return (
{p.name}
{money(cur, p.price)}
{p.desc}
);
}
/* ---- Top navigation ---------------------------------------- */
const NAV = [
{ id: "home", label: "Home" },
{ id: "menu", label: "Menu" },
{ id: "order", label: "Order" },
{ id: "contact", label: "Contact" },
];
/* ---- Open-now status (live, computed in the venue's timezone) - */
const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const toMin = (hhmm) => { const [h, m] = hhmm.split(":").map(Number); return h * 60 + m; };
const to12 = (hhmm) => {
let [h, m] = hhmm.split(":").map(Number);
const ap = h >= 12 ? "pm" : "am";
h = h % 12 || 12;
return m ? `${h}:${String(m).padStart(2, "0")} ${ap}` : `${h} ${ap}`;
};
// "Now" resolved in the business timezone, so the badge is correct for any visitor.
function zonedNow(tz) {
try {
const parts = new Intl.DateTimeFormat("en-US", {
timeZone: tz, weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false,
}).formatToParts(new Date());
const p = Object.fromEntries(parts.map((x) => [x.type, x.value]));
let hour = parseInt(p.hour, 10); if (hour === 24) hour = 0;
return { day: DOW.indexOf(p.weekday), min: hour * 60 + parseInt(p.minute, 10) };
} catch {
const d = new Date();
return { day: d.getDay(), min: d.getHours() * 60 + d.getMinutes() };
}
}
function OpenStatus({ info }) {
const sched = info?.openHours;
const tz = info?.tz || "America/New_York";
const [now, setNow] = useState(() => zonedNow(tz));
useEffect(() => {
const id = setInterval(() => setNow(zonedNow(tz)), 60000);
return () => clearInterval(id);
}, [tz]);
if (!Array.isArray(sched) || sched.length !== 7) return null;
const today = sched[now.day];
const open = !!(today && now.min >= toMin(today.open) && now.min < toMin(today.close));
let detail;
if (open) {
detail = `till ${to12(today.close)}`;
} else if (today && now.min < toMin(today.open)) {
detail = `opens ${to12(today.open)}`;
} else {
for (let i = 1; i <= 7; i++) {
const d = sched[(now.day + i) % 7];
if (d) { detail = `opens ${DOW[(now.day + i) % 7]} ${to12(d.open)}`; break; }
}
}
return (
{open ? "Open now" : "Closed"}
{detail && · {detail}}
);
}
function Nav({ brand, route, go, count }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const logo = brand.logo || brand.name[0];
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => { setOpen(false); }, [route]);
return (
);
}
/* ---- Footer ------------------------------------------------- */
function Footer({ brand, go }) {
const { info } = brand;
const handle = brand.social?.instagram || brand.socialHandle || brand.id;
const footerNote = brand.footerNote || "Made with care";
const logo = brand.logo || brand.name[0];
return (
);
}
Object.assign(window, {
useCart, cartCount, cartTotal, money, Icon, Ph, Stepper, ProductCard, Nav, Footer, NAV,
});