/* ============================================================ Global store: routing, cart, currency, wishlist, toasts ============================================================ */ const Store = createContext(null); const useStore = () => useContext(Store); const LS = 'bb_state_v1'; function loadState() { try { return JSON.parse(localStorage.getItem(LS)) || {}; } catch { return {}; } } function StoreProvider({ children }) { const saved = loadState(); const _CUR = BB.BRAND.currency; const [route, setRoute] = useState({ page: 'home', params: {} }); const [currency, setCurrency] = useState([_CUR.primary.code, _CUR.secondary.code].includes(saved.currency) ? saved.currency : _CUR.primary.code); const [cart, setCart] = useState(saved.cart || []); // [{id, qty, opts}] const [wish, setWish] = useState(saved.wish || []); // [id] const [drawer, setDrawer] = useState(false); const [toasts, setToasts] = useState([]); const [orders, setOrders] = useState(saved.orders || []); const [user, setUser] = useState(saved.user || null); // { firstName, lastName, email, phone } // persist useEffect(() => { localStorage.setItem(LS, JSON.stringify({ currency, cart, wish, orders, user })); }, [currency, cart, wish, orders]); // routing helpers const nav = (page, params = {}) => { setRoute({ page, params }); window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' }); setDrawer(false); }; const toast = (msg, icon = 'check') => { const id = Math.random().toString(36).slice(2); setToasts(t => [...t, { id, msg, icon }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2600); }; // cart ops const addToCart = (prod, qty = 1, opts = {}) => { setCart(c => { const key = JSON.stringify(opts); const i = c.findIndex(x => x.id === prod.id && JSON.stringify(x.opts || {}) === key); if (i >= 0) { const n = [...c]; n[i] = { ...n[i], qty: n[i].qty + qty }; return n; } return [...c, { id: prod.id, qty, opts }]; }); toast(`Added to bag · ${prod.name}`, 'bag'); }; const setQty = (idx, qty) => setCart(c => qty <= 0 ? c.filter((_, i) => i !== idx) : c.map((x, i) => i === idx ? { ...x, qty } : x)); const removeItem = (idx) => setCart(c => c.filter((_, i) => i !== idx)); const clearCart = () => setCart([]); const toggleWish = (id) => setWish(w => w.includes(id) ? w.filter(x => x !== id) : [...w, id]); const cartCount = cart.reduce((s, x) => s + x.qty, 0); const cartLines = cart.map((line, idx) => { const p = BB.products.find(p => p.id === line.id); return { ...line, idx, product: p, lineTotal: p ? p.price * line.qty : 0 }; }).filter(l => l.product); const subtotal = cartLines.reduce((s, l) => s + l.lineTotal, 0); const placeOrder = (details) => { const num = BB.BRAND.orderPrefix + Date.now().toString().slice(-6); const order = { num, date: new Date().toISOString(), currency, lines: cartLines.map(l => ({ name: l.product.name, qty: l.qty, price: l.product.price, opts: l.opts })), subtotal, ...details, status: 1, }; setOrders(o => [order, ...o]); clearCart(); return order; }; /* ---- Auth helpers ---- */ const signIn = (email, password) => { // In production replace with a real API call. // For now: accept any stored user whose email matches. const stored = JSON.parse(localStorage.getItem('hpn_users') || '[]'); const match = stored.find(u => u.email.toLowerCase() === email.toLowerCase() && u.password === password); if (match) { const { password: _, ...safe } = match; setUser(safe); return true; } return false; }; const signUp = (data) => { const users = JSON.parse(localStorage.getItem('hpn_users') || '[]'); users.push(data); localStorage.setItem('hpn_users', JSON.stringify(users)); const { password: _, ...safe } = data; setUser(safe); }; const signOut = () => { setUser(null); }; const money = (base) => BB.fmt(base, currency); const value = { route, nav, currency, setCurrency, money, cart, cartLines, cartCount, subtotal, addToCart, setQty, removeItem, clearCart, wish, toggleWish, drawer, setDrawer, toast, toasts, orders, placeOrder, user, signIn, signUp, signOut, }; return {children}; } /* ---------- Toasts ---------- */ function Toasts() { const { toasts } = useStore(); return (
{toasts.map(t => (
{I[t.icon] && I[t.icon]({ width: 17, height: 17, style: { color: 'var(--gold-soft)' } })} {t.msg}
))}
); } /* ---------- Cart drawer ---------- */ function CartDrawer() { const { drawer, setDrawer, cartLines, subtotal, setQty, removeItem, money, nav, cartCount } = useStore(); return ( <>
setDrawer(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(42,17,51,.38)', backdropFilter: 'blur(3px)', zIndex: 150, opacity: drawer ? 1 : 0, pointerEvents: drawer ? 'auto' : 'none', transition: 'opacity .4s' }} /> ); } Object.assign(window, { Store, useStore, StoreProvider, Toasts, CartDrawer });