// Shopping cart — module-level store + React hook, persisted to localStorage. // Pattern mirrors the rest of the app: everything attaches to window, no build step. const CART_KEY = "onethird_cart_v1"; const cartStore = (() => { let items = []; try { items = JSON.parse(localStorage.getItem(CART_KEY) || "[]"); } catch { items = []; } const listeners = new Set(); const persist = () => { try { localStorage.setItem(CART_KEY, JSON.stringify(items)); } catch {} listeners.forEach((l) => l()); }; return { subscribe(l) { listeners.add(l); return () => listeners.delete(l); }, get() { return items; }, add(product, qty = 1) { const ex = items.find((i) => i.id === product.id); if (ex) { items = items.map((i) => i.id === product.id ? { ...i, qty: i.qty + qty } : i); } else { items = [...items, { id: product.id, name: product.name, num: product.num, price: product.price, volume: product.volume, image: product.image || null, qty, }]; } persist(); }, setQty(id, qty) { items = qty <= 0 ? items.filter((i) => i.id !== id) : items.map((i) => i.id === id ? { ...i, qty } : i); persist(); }, remove(id) { items = items.filter((i) => i.id !== id); persist(); }, clear() { items = []; persist(); }, }; })(); window.cartStore = cartStore; // Hook — re-renders any component subscribed to the cart. // Always resolves prices from current window.PRODUCTS + auth state so stale // localStorage prices (or price changes) are automatically corrected. function useCart() { const raw = React.useSyncExternalStore(cartStore.subscribe, cartStore.get, cartStore.get); const { user } = useAuth(); const items = raw.map((it) => { const product = (window.PRODUCTS || []).find((p) => p.id === it.id); if (!product) return it; const price = user && product.memberPrice ? product.memberPrice : product.price; return { ...it, price }; }); const count = items.reduce((s, i) => s + i.qty, 0); const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0); return { items, count, subtotal, add: cartStore.add, setQty: cartStore.setQty, remove: cartStore.remove, clear: cartStore.clear, }; } window.useCart = useCart; // Drawer open/close lives in its own tiny store so Nav + drawer share it. const drawerStore = (() => { let open = false; const listeners = new Set(); return { subscribe(l) { listeners.add(l); return () => listeners.delete(l); }, get() { return open; }, set(v) { open = v; document.body.style.overflow = v ? "hidden" : ""; listeners.forEach((l) => l()); }, }; })(); function useCartDrawer() { const open = React.useSyncExternalStore(drawerStore.subscribe, drawerStore.get, drawerStore.get); return [open, drawerStore.set]; } window.useCartDrawer = useCartDrawer; // ── Cart button for the nav ────────────────────────────────── const CartButton = ({ inverse = false }) => { const { count } = useCart(); const [, setOpen] = useCartDrawer(); return ( ); }; window.CartButton = CartButton; // ── Slide-over cart drawer ─────────────────────────────────── const CartDrawer = ({ navigate }) => { const { items, subtotal, setQty, remove } = useCart(); const [open, setOpen] = useCartDrawer(); const goCheckout = () => { setOpen(false); navigate("/checkout"); }; return ( {/* scrim */}
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 60, background: "rgba(15,14,12,0.4)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity .3s ease", }} /> ); }; window.CartDrawer = CartDrawer;