const { useState, useEffect, useMemo, useCallback } = React; const CATEGORIES = ["Todos", "Ofertas", "Verduras", "Frutas", "Almacén"]; const fmt = window.ElyStore.formatPrice; const fmtQty = window.ElyStore.formatQty; function buildWhatsappMessage(items, config) { let total = 0; const lines = items.map(({ qty, product, subtotal, offerPrice }) => { total += subtotal; const tag = offerPrice != null ? " 🔥" : ""; return `- ${fmtQty(qty, product.unit)} ${product.name} — ${fmt(subtotal)}${tag}`; }); return [ `¡Hola ${config.storeName}! 🛒 Quiero hacer el siguiente pedido:`, "", ...lines, "", `🟢 *Total Estimado: ${fmt(total)}*`, "", "¿Me confirman si tienen todo?", ].join("\n"); } function buildWhatsappUrl(items, config) { if (!items.length || !config.whatsappNumber) return ""; const msg = buildWhatsappMessage(items, config); return `https://wa.me/${config.whatsappNumber}?text=${encodeURIComponent(msg)}`; } const IconSearch = () => ( ); const IconCart = () => ( ); const IconClose = () => ( ); const IconTrash = () => ( ); const IconWhatsapp = () => ( ); function Header({ cartCount, onOpenCart, config }) { return (
{config.storeName}
); } function TaglineBand({ config }) { const tagline = config.tagline || "Frescura todos los días"; return (
{tagline}
); } function Toolbar({ query, setQuery, category, setCategory }) { return (
setQuery(e.target.value)} />
{CATEGORIES.map((cat) => ( ))}
); } function ProductCard({ product, qtyInCart, onAdd, onInc, onDec }) { return (
0 ? " ely-card--offer" : "")}>
{product.image ? ( {product.name} { e.currentTarget.style.display = "none"; }} /> ) : ( {product.name} )} {product.category} {product.offers && product.offers.length > 0 && ( 🔥 Oferta )}
{product.name}
{fmt(product.price)} / {product.unit}
); } function CartPanel({ open, onClose, items, products, onInc, onDec, onRemove, config }) { const detailed = useMemo(() => ( items .map((it) => { const p = products.find((x) => x.id === it.id); if (!p) return null; return { ...it, product: p, subtotal: it.offerPrice != null ? it.offerPrice : Math.round(p.price * it.qty) }; }) .filter(Boolean) ), [items, products]); const total = detailed.reduce((acc, it) => acc + it.subtotal, 0); const waUrl = useMemo(() => buildWhatsappUrl(detailed, config), [detailed, config]); return ( <>
); } const TRUST_ITEMS = [ { label: "Productos\nseleccionados", icon: ( ), }, { label: "Siempre\nfrescos", icon: ( ), }, { label: "Comer sano\nhace bien", icon: ( ), }, { label: "Pedí online\ny retirá en el local", icon: ( ), }, ]; function TrustBand() { return (
{TRUST_ITEMS.map((it, i) => (
{it.icon}
{it.label.split("\n").map((line, j) => (
{line}
))}
))}
Elegí fresco,
elegí bien
); } function Footer({ config }) { const waHref = `https://wa.me/${config.whatsappNumber}`; return ( ); } const KG_QUICK = [ { label: "250g", value: 0.25 }, { label: "½ kg", value: 0.5 }, { label: "1 kg", value: 1 }, ]; function AddToCartModal({ product, onConfirm, onCancel }) { const [qty, setQty] = useState(1); const [offerPrice, setOfferPrice] = useState(null); const isKg = product.unit === "kg"; const offers = product.offers || []; const canDec = window.ElyStore.nextQty(qty, product.unit, -1) !== null; const canInc = window.ElyStore.nextQty(qty, product.unit, +1) !== null; const inc = () => { const next = window.ElyStore.nextQty(qty, product.unit, +1); if (next !== null) { setQty(next); setOfferPrice(null); } }; const dec = () => { const next = window.ElyStore.nextQty(qty, product.unit, -1); if (next !== null) { setQty(next); setOfferPrice(null); } }; return (
e.stopPropagation()}>

¿Cuánto llevás?

{product.name}

{fmtQty(qty, product.unit)}
{isKg && (
{KG_QUICK.map(({ label, value }) => ( ))}
)} {offers.length > 0 && (
🔥 Ofertas
{offers.map((offer) => { const isActive = Math.abs(qty - offer.qty) < 1e-6 && offerPrice === offer.price; const saving = Math.round(product.price * offer.qty) - offer.price; return ( ); })}
)}
); } function ComingSoon({ config }) { return (

¡Nos estamos preparando para vos!

Muy pronto abrimos.

{config.storeName}

{config.address}

); } function App() { const [products, setProducts] = useState([]); const [config, setConfig] = useState({ ...window.ELY_CONFIG }); const [cart, setCart] = useState(() => window.ElyStore.loadCart()); const [loaded, setLoaded] = useState(false); const [query, setQuery] = useState(""); const [category, setCategory] = useState("Todos"); const [cartOpen, setCartOpen] = useState(false); const [modalProduct, setModalProduct] = useState(null); useEffect(() => { const unsubP = window.ElyStore.subscribeProducts((list, err) => { if (err) console.error("subscribeProducts", err); if (list) setProducts(list); setLoaded(true); }); const unsubC = window.ElyStore.subscribeConfig((cfg, err) => { if (err) console.error("subscribeConfig", err); if (cfg) setConfig(cfg); }); return () => { unsubP(); unsubC(); }; }, []); useEffect(() => { window.ElyStore.saveCart(cart); }, [cart]); const visibleProducts = useMemo(() => { const q = query.trim().toLowerCase(); return products .filter((p) => p.active) .filter((p) => category === "Todos" || (category === "Ofertas" ? p.offers && p.offers.length > 0 : p.category === category)) .filter((p) => !q || p.name.toLowerCase().includes(q)); }, [products, query, category]); useEffect(() => { const validIds = new Set(products.filter((p) => p.active).map((p) => p.id)); setCart((curr) => curr.filter((it) => validIds.has(it.id))); }, [products]); const openModal = useCallback((id) => { const product = products.find((p) => p.id === id); if (product) setModalProduct(product); }, [products]); const confirmAddToCart = useCallback((qty, offerPrice) => { if (!modalProduct) return; setCart((curr) => { const item = { id: modalProduct.id, qty, cartId: Date.now().toString(36) }; if (offerPrice != null) item.offerPrice = offerPrice; return [...curr, item]; }); setModalProduct(null); }, [modalProduct]); const incItem = useCallback((cartId) => { setCart((curr) => { const item = curr.find((it) => it.cartId === cartId); if (!item) return curr; const product = products.find((p) => p.id === item.id); if (!product) return curr; const next = window.ElyStore.nextQty(item.qty, product.unit, +1); if (next === null) return curr; return curr.map((it) => it.cartId === cartId ? { ...it, qty: next, offerPrice: undefined } : it); }); }, [products]); const decItem = useCallback((cartId) => { setCart((curr) => { const item = curr.find((it) => it.cartId === cartId); if (!item) return curr; const product = products.find((p) => p.id === item.id); if (!product) return curr; const next = window.ElyStore.nextQty(item.qty, product.unit, -1); if (next === null) return curr.filter((it) => it.cartId !== cartId); return curr.map((it) => it.cartId === cartId ? { ...it, qty: next, offerPrice: undefined } : it); }); }, [products]); const removeItem = useCallback((cartId) => { setCart((curr) => curr.filter((it) => it.cartId !== cartId)); }, []); const qtyOf = useCallback((id) => { const it = cart.find((x) => x.id === id); return it ? it.qty : 0; }, [cart]); const cartCount = cart.length; if (config.comingSoon) { return ; } return ( <>
setCartOpen(true)} config={config} />
{!loaded ? (
Cargando catálogo…
) : visibleProducts.length === 0 ? (
Sin resultados
Probá con otra palabra o categoría.
) : (
{visibleProducts.map((p) => ( openModal(p.id)} onInc={() => incItem(p.id)} onDec={() => decItem(p.id)} /> ))}
)}