/* ============================================================ lomi — app principal (routing + carrito + favoritos + cuenta) ============================================================ */ // Claves de localStorage por usuario — cada cuenta tiene su propio carro y favoritos function cartKey(user) { return user ? `lomi_cart_${user.id}` : 'lomi_cart_guest'; } function favKey(user) { return user ? `lomi_fav_${user.id}` : 'lomi_fav_guest'; } function loadCart(user) { try { return JSON.parse(localStorage.getItem(cartKey(user)) || '[]'); } catch { return []; } } function loadFav(user) { try { return JSON.parse(localStorage.getItem(favKey(user)) || '[]'); } catch { return []; } } function App() { const [route, setRoute] = useState({ name: "home" }); const [query, setQuery] = useState(""); const [toast, setToast] = useState(null); const [_v, _setV] = useState(0); const [clientUser, setClientUserState] = useState(() => { try { return JSON.parse(localStorage.getItem('lomi_client_user') || 'null'); } catch { return null; } }); const [cart, setCart] = useState(() => loadCart( (() => { try { return JSON.parse(localStorage.getItem('lomi_client_user') || 'null'); } catch { return null; } })() )); const [favorites, setFavorites] = useState(() => loadFav( (() => { try { return JSON.parse(localStorage.getItem('lomi_client_user') || 'null'); } catch { return null; } })() )); const [resetToken] = useState(() => { const p = new URLSearchParams(window.location.search); return p.get('reset') || null; }); const [paymentReturn] = useState(() => { const p = new URLSearchParams(window.location.search); const payment = p.get('payment'); const order = p.get('order'); if (payment && order) return { status: payment, orderId: order }; return null; }); useEffect(() => { if (resetToken) setRoute({ name: 'account' }); }, []); useEffect(() => { if (paymentReturn) { window.history.replaceState({}, '', '/'); setRoute({ name: 'payment-return' }); } }, []); const toastTimer = useRef(null); // Persistir carro y favoritos con clave por usuario useEffect(() => { localStorage.setItem(cartKey(clientUser), JSON.stringify(cart)); }, [cart]); useEffect(() => { localStorage.setItem(favKey(clientUser), JSON.stringify(favorites)); }, [favorites]); // Trigger re-render desde el admin preview window.__lomi_reload = useCallback(() => _setV(v => v + 1), []); const go = useCallback((r) => { setRoute(r); if (r.q !== undefined) setQuery(r.q); window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); }, []); const addToCart = useCallback((product, qty = 1) => { setCart((c) => { const ex = c.find((i) => i.id === product.id); if (ex) return c.map((i) => i.id === product.id ? { ...i, qty: i.qty + qty } : i); return [...c, { id: product.id, qty }]; }); setToast({ name: product.name, tint: product.tint, cat: product.category }); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 2600); }, []); const setQty = useCallback((id, qty) => setCart((c) => c.map((i) => i.id === id ? { ...i, qty } : i)), []); const removeItem = useCallback((id) => setCart((c) => c.filter((i) => i.id !== id)), []); const clearCart = useCallback(() => setCart([]), []); const toggleFavorite = useCallback((productId) => { setFavorites(f => f.includes(productId) ? f.filter(id => id !== productId) : [...f, productId]); }, []); const setClientUser = useCallback((user) => { setClientUserState(user); if (user) { localStorage.setItem('lomi_client_user', JSON.stringify(user)); } else { localStorage.removeItem('lomi_client_user'); localStorage.removeItem('lomi_client_token'); } // Cargar carro y favoritos del nuevo usuario (o invitado) setCart(loadCart(user)); setFavorites(loadFav(user)); }, []); const cartCount = cart.reduce((s, i) => s + i.qty, 0); const favProps = { favorites, onToggleFavorite: toggleFavorite }; let screen; if (route.name === "home") screen = ; else if (route.name === "catalog") screen = ; else if (route.name === "product") screen = ; else if (route.name === "cart") screen = ; else if (route.name === "checkout") screen = ; else if (route.name === "favorites") screen = ; else if (route.name === "account") screen = ; else if (route.name === "payment-return") screen = ; else if (route.name === "tracking") screen = ; const settings = (window.LOMI_DATA && window.LOMI_DATA.settings) || {}; const waActive = settings.whatsapp_float_active === '1'; const waNumber = settings.social_whatsapp || ''; const waMsg = settings.whatsapp_float_message || '¡Hola! Necesito ayuda con mi pedido.'; const waHref = waNumber ? `https://wa.me/${waNumber.replace(/\D/g,'')}?text=${encodeURIComponent(waMsg)}` : null; return (
); } ReactDOM.createRoot(document.getElementById("root")).render();