/* global React, SFIcons, Header, HomeView, CatalogView, CartDrawer, CheckoutView, OrderConfirmed */ const { Truck: TruckF, Phone: PhoneF, MapPin: MapF } = SFIcons; function Footer({ onCategory, onShop, onNav }) { const col = (title, items) => (

{title}

{items.map(([label, onClick]) => {label})}

); return ( ); } function App() { const data = window.SF_DATA; // Si la URL trae ?token=... (enlace del correo de contraseña), arrancamos en la pantalla de crear clave. const [resetToken] = React.useState(() => { try { return new URLSearchParams(window.location.search).get('token'); } catch (e) { return null; } }); const [view, setView] = React.useState(resetToken ? 'reset' : 'home'); // home | catalog | product | account | checkout | done | reset // El carrito se guarda en el navegador para que no se pierda al recargar o volver atrás. const [cart, setCart] = React.useState(() => { try { return JSON.parse(localStorage.getItem('madeci_cart') || '[]'); } catch (e) { return []; } }); React.useEffect(() => { try { localStorage.setItem('madeci_cart', JSON.stringify(cart)); } catch (e) {} }, [cart]); const [drawer, setDrawer] = React.useState(false); const [query, setQuery] = React.useState(''); const [catFilter, setCatFilter] = React.useState('all'); const [selected, setSelected] = React.useState(null); const [acctTab, setAcctTab] = React.useState('resumen'); const [loggedIn, setLoggedIn] = React.useState(false); const [ordered, setOrdered] = React.useState(false); const [ultimoPedido, setUltimoPedido] = React.useState(null); // nº del pedido recién creado // Productos/categorías: arrancan con los datos demo y se reemplazan por los reales al loguearse. const [products, setProducts] = React.useState(data.products); const [categories, setCategories] = React.useState(data.categories); const [account, setAccount] = React.useState(null); // cuenta REAL del cliente logueado const [orders, setOrders] = React.useState([]); // pedidos REALES del cliente logueado // Trae el catálogo real del backend y lo deja en formato del diseño. const cargarCatalogo = async () => { const crudos = await window.MadeciAPI.getCatalogo(); setProducts(crudos.map(window.MadeciAPI.mapProducto)); setCategories(window.MadeciAPI.categoriasDesde(crudos.map(window.MadeciAPI.mapProducto))); }; // Catálogo real PERO SIN PRECIOS, para visitantes sin sesión. const cargarCatalogoPublico = async () => { const crudos = await window.MadeciAPI.getCatalogoPublico(); setProducts(crudos.map(window.MadeciAPI.mapProducto)); setCategories(window.MadeciAPI.categoriasDesde(crudos.map(window.MadeciAPI.mapProducto))); }; // Carga la cuenta real (ficha completa) y el historial de pedidos del cliente logueado. const cargarCuenta = async () => { const ficha = await window.MadeciAPI.getFicha(); if (ficha && ficha.cliente) setAccount(window.MadeciAPI.cuentaDesde(ficha.cliente)); const peds = await window.MadeciAPI.getMisPedidos(); setOrders(peds.map(window.MadeciAPI.mapPedido)); }; // Al cargar la página: si hay sesión, catálogo con precios + cuenta real; si no, catálogo público (sin precios). React.useEffect(() => { window.MadeciAPI.me().then((cliente) => { if (cliente) { setLoggedIn(true); cargarCatalogo().catch(() => {}); cargarCuenta().catch(() => {}); } else { cargarCatalogoPublico().catch(() => {}); } }).catch(() => { cargarCatalogoPublico().catch(() => {}); }); }, []); // Cada vez que se entra a "Mi cuenta", refresca la ficha y los pedidos (así se ve el // estado actualizado que cambió el ejecutivo, sin tener que recargar la página). React.useEffect(() => { if (view === 'account' && loggedIn) cargarCuenta().catch(() => {}); }, [view]); // EN LÍNEA: mientras haya sesión, refresca los pedidos cada 25 s (solo si la pestaña // está visible) para que los cambios de estado aparezcan solos, sin recargar. React.useEffect(() => { if (!loggedIn) return; const tick = () => { if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return; window.MadeciAPI.getMisPedidos() .then((peds) => setOrders(peds.map(window.MadeciAPI.mapPedido))) .catch(() => {}); }; const id = setInterval(tick, 25000); return () => clearInterval(id); }, [loggedIn]); // Cantidad que YA hay en el carrito de un producto (según la unidad). 0 si no está. const qtyEnCarrito = (sku, modo) => { const unidad = modo === 'UN' ? 'UN' : 'CJ'; const l = cart.find((i) => i.id === sku + ':' + unidad); return l ? l.qty : 0; }; // modo: 'CJ' (por caja, default) o 'UN' (por unidad, solo si el producto lo permite). // FIJA la cantidad elegida (no suma): así el cliente actualiza a lo que quiere y no envía de más por error. const addToCart = (p, qty, modo) => { if (!loggedIn) { setView('login'); window.scrollTo(0, 0); return; } const unidad = modo === 'UN' ? 'UN' : 'CJ'; // Precio efectivo (aplica descuento por volumen si el producto tiene escala). const price = window.MadeciAPI.precioEfectivo(p, unidad, qty); const pack = unidad === 'UN' ? (p.unitPack || 'Unidad') : (p.cajaPack || p.pack); const lineId = p.sku + ':' + unidad; // UN y CJ del mismo producto son líneas distintas setCart((c) => { const ex = c.find((i) => i.id === lineId); // FIJA la cantidad (no suma) y recalcula el precio según el tramo de volumen. if (ex) return c.map((i) => i.id === lineId ? { ...i, qty, price: window.MadeciAPI.precioEfectivo(i, unidad, qty) } : i); return [...c, { ...p, id: lineId, sku: p.sku, unidad, price, pack, qty }]; }); setDrawer(true); }; const setQty = (id, qty) => setCart((c) => c.map((i) => i.id === id ? { ...i, qty, price: window.MadeciAPI.precioEfectivo(i, i.unidad, qty) } : i)); const remove = (id) => setCart((c) => c.filter((i) => i.id !== id)); const count = cart.reduce((s, i) => s + i.qty, 0); const go = (v) => { setView(v); window.scrollTo(0, 0); }; const openProduct = (p) => { setSelected(p); go('product'); // Traemos las imágenes de galería (solo para la ficha) y las adjuntamos al producto. window.MadeciAPI.getImagenes(p.sku).then((galeria) => { setSelected((actual) => (actual && actual.id === p.id ? { ...actual, galeria } : actual)); }).catch(() => {}); }; // Repetir un pedido: carga sus productos al carrito con el PRECIO ACTUAL del catálogo. const repetirPedido = async (orderId) => { const det = await window.MadeciAPI.getPedido(orderId); if (!det || !det.items) return { agregados: 0, faltan: 0 }; let agregados = 0, faltan = 0; det.items.forEach((it) => { const prod = products.find((p) => p.sku === it.sku); // producto actual = precio actual if (prod && prod.stockStatus !== 'out') { addToCart(prod, it.cantidad, it.unidad === 'UN' ? 'UN' : 'CJ'); agregados++; } else faltan++; }); return { agregados, faltan }; }; // Cancelar un pedido no confirmado (queda 'anulado' en el historial) y refrescar la lista. const cancelarPedido = async (orderId) => { await window.MadeciAPI.cancelarPedido(orderId); const peds = await window.MadeciAPI.getMisPedidos(); setOrders(peds.map(window.MadeciAPI.mapPedido)); }; const related = selected ? products.filter((x) => x.category === selected.category && x.id !== selected.id).slice(0, 4) : []; const logout = () => { window.MadeciAPI.logout().catch(() => {}); setDrawer(false); setCart([]); setLoggedIn(false); setAccount(null); setOrders([]); cargarCatalogoPublico().catch(() => {}); go('home'); }; // Login REAL: valida contra el backend; si anda, carga catálogo real + cuenta real. Lanza error si falla (lo muestra LoginView). const login = async (rut, pass) => { await window.MadeciAPI.login(rut, pass); setLoggedIn(true); await cargarCatalogo(); cargarCuenta().catch(() => {}); go('home'); }; const hasActivity = cart.length > 0 || ordered; // La página de crear/recuperar contraseña es una pantalla LIMPIA, sin encabezado ni buscador // (así el autocompletar del navegador no puede meter el RUT en la búsqueda y desviar la página). if (view === 'reset') { return { try { window.history.replaceState({}, '', '/storefront/'); } catch (e) {} go('login'); }} />; } return (

setDrawer(true)} onLogo={() => go('home')} onAccount={() => go('account')} onLogout={logout} onEnter={() => go('login')} onShop={() => { setQuery(''); setCatFilter('all'); go('catalog'); }} onCategory={(c) => { setQuery(''); setCatFilter(c); go('catalog'); }} loggedIn={loggedIn} account={account} query={query} setQuery={(q) => { setQuery(q); if (q) go('catalog'); }} /> {view === 'home' && go('catalog')} onView={openProduct} loggedIn={loggedIn} onLogin={() => go('login')} showExec={loggedIn && !hasActivity} account={account} />} {view === 'catalog' && go('login')} />} {view === 'product' && go('catalog')} loggedIn={loggedIn} onLogin={() => go('login')} />} {view === 'login' && go('register')} />} {view === 'register' && go('login')} onHome={() => go('home')} onSubmit={() => {}} />} {view === 'account' && go('catalog')} onLogout={logout} />} {view === 'checkout' && go('catalog')} onPlace={async (despacho, observaciones) => { const payload = { items: cart.map((i) => ({ sku: i.sku, unidad: i.unidad || 'CJ', cantidad: i.qty })), despacho, observaciones: observaciones || undefined }; const res = await window.MadeciAPI.crearPedido(payload); // lanza error si falla (lo muestra CheckoutView) setUltimoPedido(res.pedido_id); setOrdered(true); setCart([]); cargarCuenta().catch(() => {}); // refresca "Mis pedidos" con el pedido recién creado go('done'); }} />} {view === 'done' && { go('home'); }} />} {view === 'about' && { setQuery(''); setCatFilter('all'); go('catalog'); }} />} {view === 'coverage' && } {view === 'terms' && } {view === 'contact' && } {view === 'faq' && } {view !== 'checkout' && view !== 'done' && view !== 'login' && view !== 'register' && view !== 'reset' &&

); } Object.assign(window, { App }); ReactDOM.createRoot(document.getElementById('root')).render();