// ===================================================================== // SOMOS SETAS — Storefront components // ===================================================================== const { useState, useEffect, useMemo, useRef, useCallback } = React; // ---------- Utilities ---------- const fmtPrice = (n) => "$ " + Math.round(n).toLocaleString("es-AR"); const slug = (s) => s.toString().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""); // ---------- Video URL parser ---------- // Devuelve { type: "youtube"|"vimeo"|"direct", embed, url } o null function parseVideoUrl(raw) { if (!raw || !raw.trim()) return null; const url = raw.trim(); const yt = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/); if (yt) { const id = yt[1]; return { type: "youtube", embed: `https://www.youtube.com/embed/${id}?autoplay=1&mute=1&loop=1&playlist=${id}&controls=0&playsinline=1` }; } const vm = url.match(/vimeo\.com\/(\d+)/); if (vm) { return { type: "vimeo", embed: `https://player.vimeo.com/video/${vm[1]}?autoplay=1&muted=1&loop=1&background=1` }; } if (/\.(mp4|webm|ogg)(\?|$)/i.test(url)) { return { type: "direct", url }; } return null; } // ---------- Pricing tiers ---------- // T_MINORISTA: subtotal >= $150k \u2192 env\u00edo gratis a sucursal, sin descuento // T_MAYORISTA: total pagado >= $250k con \u221230% \u2192 subtotal >= $250k / 0.70 \u2248 $357.143 // T_DISTRIBUIDOR: total pagado >= $500k con \u221245% \u2192 subtotal >= $500k / 0.55 \u2248 $909.091 const T_MINORISTA = 150000; const T_MAYORISTA = Math.ceil(250000 / 0.70); // 357143 \u2192 paga $250k con \u221230% const T_DISTRIBUIDOR = Math.ceil(500000 / 0.55); // 909091 \u2192 paga $500k con \u221245% function getPricingTier(subtotal) { if (subtotal >= T_DISTRIBUIDOR) { return { id: "distribuidor", name: "Distribuidor", discount: 0.45, freeShipping: true, freeToBranch: true, next: null }; } if (subtotal >= T_MAYORISTA) { return { id: "mayorista", name: "Mayorista", discount: 0.30, freeShipping: false, freeToBranch: true, next: { name: "Distribuidor", threshold: T_DISTRIBUIDOR, label: "precio Distribuidor \u221245% + env\u00edo gratis \ud83c\udfc6" } }; } if (subtotal >= T_MINORISTA) { return { id: "minorista", name: null, discount: 0, freeShipping: false, freeToBranch: true, next: { name: "Mayorista", threshold: T_MAYORISTA, label: "precio Mayorista \u221230% \ud83c\udf89" } }; } return { id: null, name: null, discount: 0, freeShipping: false, freeToBranch: false, next: { name: "Env\u00edo gratis a sucursal", threshold: T_MINORISTA, label: "env\u00edo gratis a sucursal \ud83d\ude9a" } }; } // ---------- Inline SVG icons (minimal line set) ---------- const Icon = { search: (p) => , user: (p) => , bag: (p) => , close: (p) => , arrow: (p) => , arrowL: (p) => , whatsapp: (p) => , plus: (p) => , edit: (p) => , trash: (p) => , insta: (p) => , pin: (p) => , phone: (p) => , download: (p) => , info: (p) => , }; // ---------- Hooks ---------- function useLocalState(key, initial) { const [val, setVal] = useState(() => { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch { return initial; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} }, [key, val]); return [val, setVal]; } function useHashRoute() { const [hash, setHash] = useState(window.location.hash || "#"); useEffect(() => { const fn = () => setHash(window.location.hash || "#"); window.addEventListener("hashchange", fn); return () => window.removeEventListener("hashchange", fn); }, []); const parts = hash.replace(/^#\/?/, "").split("/").filter(Boolean); return { hash, parts, raw: hash }; } const navigate = (h) => { window.location.hash = h; }; // ---------- App-wide stores ---------- function useStore() { const [products, setProductsState] = useState(window.SS_PRODUCTS); const [banners, setBannersState] = useState(window.SS_DEFAULT_BANNERS); const [config, setConfigState] = useState(window.SS_DEFAULT_CONFIG); const [orders, setOrdersState] = useState([]); const [discountCodes, setDiscountCodesState] = useState([]); const [dbLoading, setDbLoading] = useState(true); const [auth, setAuth] = useState(false); // Cart se mantiene en localStorage (es por dispositivo) const [cart, setCart] = useLocalState("ss_cart_v1", []); // Auth: derivada de la sesión de Supabase (no localStorage) useEffect(() => { window.sb.auth.getSession().then(({ data: { session } }) => setAuth(!!session)); const { data: { subscription } } = window.sb.auth.onAuthStateChange((_e, session) => setAuth(!!session)); return () => subscription.unsubscribe(); }, []); // Carga inicial desde Supabase + auto-seed si la DB está vacía useEffect(() => { Promise.all([ window.sb.from("ss_store").select("*").eq("id", 1).maybeSingle(), window.sb.from("ss_orders").select("*").order("ts", { ascending: false }), ]).then(([{ data }, { data: ordersRows, error: ordErr }]) => { if (data) { const prods = data.products?.length ? data.products : window.SS_PRODUCTS; const bans = data.banners?.length ? data.banners : window.SS_DEFAULT_BANNERS; const cfg = data.config && Object.keys(data.config).length ? { ...window.SS_DEFAULT_CONFIG, ...data.config } : window.SS_DEFAULT_CONFIG; setProductsState(prods); setBannersState(bans); setConfigState(cfg); if (data.discount_codes?.length) setDiscountCodesState(data.discount_codes); if (!data.products?.length) { window.sb.from("ss_store").update({ products: window.SS_PRODUCTS, banners: window.SS_DEFAULT_BANNERS, config: window.SS_DEFAULT_CONFIG, }).eq("id", 1).then(); } } // Pedidos: tabla dedicada ss_orders (cada pedido es una fila) if (!ordErr && ordersRows?.length) { setOrdersState(ordersRows.map((r) => ({ ...r.data, status: r.status, id: r.id, ts: r.ts }))); } }) .finally(() => setDbLoading(false)); }, []); // Setters: actualizan el estado local al instante y persisten en Supabase en background const setProducts = useCallback((updater) => { setProductsState((prev) => { const next = typeof updater === "function" ? updater(prev) : updater; window.sb.from("ss_store").update({ products: next }).eq("id", 1).then(); return next; }); }, []); const setBanners = useCallback((updater) => { setBannersState((prev) => { const next = typeof updater === "function" ? updater(prev) : updater; window.sb.from("ss_store").update({ banners: next }).eq("id", 1).then(); return next; }); }, []); const setConfig = useCallback((updater) => { setConfigState((prev) => { const next = typeof updater === "function" ? updater(prev) : updater; window.sb.from("ss_store").update({ config: next }).eq("id", 1).then(); return next; }); }, []); // addOrder: inserta UN pedido nuevo — guarda en localStorage como backup Y en ss_orders const addOrder = useCallback((order) => { // 1. Estado local inmediato setOrdersState((prev) => { const next = [order, ...prev]; // 2. Backup en localStorage (nunca se pierde aunque Supabase falle) try { localStorage.setItem("ss_orders_backup", JSON.stringify(next)); } catch {} return next; }); // 3. Persistir en tabla dedicada ss_orders window.sb.from("ss_orders") .insert({ id: order.id, ts: order.ts, status: order.status || "nuevo", data: order }) .then(({ error }) => { if (error) { console.error("❌ Error guardando pedido en Supabase:", error.message); console.warn("⚠️ Pedido guardado solo en localStorage como backup. Crear tabla ss_orders en Supabase."); } else { console.log("✅ Pedido guardado en Supabase:", order.id); } }); }, []); // updateOrderStatus: actualiza el estado de un pedido específico const updateOrderStatus = useCallback((id, status) => { setOrdersState((prev) => prev.map((o) => o.id === id ? { ...o, status } : o)); window.sb.from("ss_orders").update({ status }).eq("id", id) .then(({ error }) => { if (error) console.error("❌ Error actualizando pedido:", error.message); }); }, []); // deleteOrder: elimina un pedido específico const deleteOrder = useCallback((id) => { setOrdersState((prev) => prev.filter((o) => o.id !== id)); window.sb.from("ss_orders").delete().eq("id", id) .then(({ error }) => { if (error) console.error("❌ Error eliminando pedido:", error.message); }); }, []); // updateOrderRemito: guarda los datos del remito dentro del pedido const updateOrderRemito = useCallback((id, remitoData) => { setOrdersState((prev) => prev.map((o) => o.id === id ? { ...o, remito: remitoData } : o)); window.sb.from("ss_orders").select("data").eq("id", id).single() .then(({ data: row }) => { const newData = { ...(row?.data || {}), remito: remitoData }; window.sb.from("ss_orders").update({ data: newData }).eq("id", id) .then(({ error }) => { if (error) console.error("❌ Error guardando remito:", error.message); else console.log("✅ Remito guardado:", id); }); }); }, []); const setDiscountCodes = useCallback((updater) => { setDiscountCodesState((prev) => { const next = typeof updater === "function" ? updater(prev) : updater; window.sb.from("ss_store").update({ discount_codes: next }).eq("id", 1) .then(({ error }) => { if (error) console.error("Error guardando códigos:", error.message); }); return next; }); }, []); const addToCart = useCallback((product, presId, qty = 1) => { setCart((prev) => { const idx = prev.findIndex((i) => i.productId === product.id && i.presId === presId); if (idx >= 0) { const next = [...prev]; next[idx] = { ...next[idx], qty: next[idx].qty + qty }; return next; } const pres = product.presentations.find((p) => p.id === presId); return [...prev, { productId: product.id, productName: product.name, productImage: product.image || "", presId, presLabel: pres?.label || "", price: pres?.price || 0, qty, }]; }); }, [setCart]); const updateQty = useCallback((productId, presId, delta) => { setCart((prev) => prev .map((i) => i.productId === productId && i.presId === presId ? { ...i, qty: Math.max(0, i.qty + delta) } : i) .filter((i) => i.qty > 0) ); }, [setCart]); const removeItem = useCallback((productId, presId) => { setCart((prev) => prev.filter((i) => !(i.productId === productId && i.presId === presId))); }, [setCart]); const clearCart = useCallback(() => setCart([]), [setCart]); return { products, setProducts, banners, setBanners, config, setConfig, cart, setCart, addToCart, updateQty, removeItem, clearCart, orders, addOrder, updateOrderStatus, deleteOrder, updateOrderRemito, discountCodes, setDiscountCodes, auth, dbLoading, }; } // ===================================================================== // HEADER / NAV // ===================================================================== function Header({ store, currentRoute, onCartOpen, onSearchOpen }) { const itemCount = store.cart.reduce((s, i) => s + i.qty, 0); const isAt = (path) => currentRoute === path; const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // Cerrar menú al cambiar de ruta useEffect(() => { setMobileMenuOpen(false); }, [currentRoute]); const CATALOG_URL = "assets/catalogo-somos-setas-2026.pdf"; const navLinks = ( <> setMobileMenuOpen(false)}>Inicio setMobileMenuOpen(false)}>Catálogo setMobileMenuOpen(false)}>Hongos setMobileMenuOpen(false)}>Sinérgicos setMobileMenuOpen(false)}>Filosofía ); return (

Envíos a todo el paísPedidos por WhatsAppMendoza · Argentina

{mobileMenuOpen &&

setMobileMenuOpen(false)}/>}

Catálogo PDF

); } // ===================================================================== // SEARCH MODAL // ===================================================================== function SearchModal({ open, store, onClose }) { const [query, setQuery] = useState(""); const inputRef = useRef(null); useEffect(() => { if (open) { setQuery(""); setTimeout(() => inputRef.current?.focus(), 50); } }, [open]); useEffect(() => { const handler = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", handler); return () => document.removeEventListener("keydown", handler); }, [onClose]); const q = query.trim().toLowerCase(); const results = q.length < 2 ? [] : store.products.filter((p) => p.visible !== false).filter((p) => { const cat = window.SS_CATEGORIES.find((c) => c.id === p.category); return ( p.name.toLowerCase().includes(q) || (p.tagline || "").toLowerCase().includes(q) || (p.description || "").toLowerCase().includes(q) || (cat?.name || "").toLowerCase().includes(q) ); }); if (!open) return null; return (

e.stopPropagation()}>

setQuery(e.target.value)} className="search-input" />

{q.length >= 2 ? (

{results.length === 0 ? (

Sin resultados para "{query}"

) : results.map((p) => { const cat = window.SS_CATEGORIES.find((c) => c.id === p.category); return (

{p.image &&

}

{p.name}

{cat?.name}{p.tagline ? ` · ${p.tagline}` : ""}

); })}

) : (

Escribí al menos 2 caracteres para buscar

)}

); } // ===================================================================== // BANNER CAROUSEL // ===================================================================== function BannerCarousel({ banners }) { const active = banners.filter((b) => b.active); const [idx, setIdx] = useState(0); useEffect(() => { if (active.length <= 1) return; const t = setInterval(() => setIdx((i) => (i + 1) % active.length), 6000); return () => clearInterval(t); }, [active.length]); if (!active.length) return null; const go = (d) => setIdx((i) => (i + d + active.length) % active.length); return (

{active.map((b, i) => { const bgImage = b.gallery?.[0] || b.image || ""; const video = parseVideoUrl(b.video); return (

{/* Fondo: video o imagen */} {video ? ( video.type === "direct" ?