import React, { useEffect, useMemo, useState } from "react"; /** * Minimal Storefront (Walmart‑style) * - NO prices; show product CODE instead (e.g., LOLF3941) * - Add to cart; checkout composes WhatsApp / SMS message (no online payment) * - Clean, minimal UI with Tailwind classes * - Cart persists to localStorage * * Fix: Addressed "Unterminated string constant" by removing raw newlines inside * double-quoted strings. All multi-line content now uses \n or safe template literals. * * Lightweight runtime tests are included at the bottom via console.assert. */ // ----------------------------- // Product Data (sample) // ----------------------------- const PRODUCTS = [ { id: "sku-1001", code: "LOLF3941", name: "UltraSoft Bath Towels (2-Pack)", img: "https://picsum.photos/seed/towels/800/600", category: "Home", rating: 4.6 }, { id: "sku-1002", code: "ABXK2107", name: "LED Bulb 60W Equivalent (6-Pack)", img: "https://picsum.photos/seed/bulbs/800/600", category: "Home", rating: 4.4 }, { id: "sku-1003", code: "QWER7712", name: "Stainless Steel Water Bottle 32oz", img: "https://picsum.photos/seed/bottle/800/600", category: "Outdoors", rating: 4.8 }, { id: "sku-1004", code: "MOU5E990", name: "Wireless Mouse Pro", img: "https://picsum.photos/seed/mouse/800/600", category: "Tech", rating: 4.5 }, { id: "sku-1005", code: "HEAD2400", name: "Bluetooth Headphones Lite", img: "https://picsum.photos/seed/headphones/800/600", category: "Tech", rating: 4.2 }, { id: "sku-1006", code: "COF12049", name: "Premium Ground Coffee 12oz", img: "https://picsum.photos/seed/coffee/800/600", category: "Grocery", rating: 4.7 }, { id: "sku-1007", code: "GRN16198", name: "Organic Granola 16oz", img: "https://picsum.photos/seed/granola/800/600", category: "Grocery", rating: 4.3 }, { id: "sku-1008", code: "PAN10019", name: "Non‑Stick Frying Pan 10\"", img: "https://picsum.photos/seed/pan/800/600", category: "Kitchen", rating: 4.5 }, { id: "sku-1009", code: "PIL22750", name: "Memory Foam Pillow", img: "https://picsum.photos/seed/pillow/800/600", category: "Home", rating: 4.6 }, { id: "sku-1010", code: "USBC3049", name: "USB-C Fast Charger 30W", img: "https://picsum.photos/seed/charger/800/600", category: "Tech", rating: 4.4 }, ]; const CATEGORIES = ["All", ...Array.from(new Set(PRODUCTS.map((p) => p.category)))]; // ----------------------------- // Utilities // ----------------------------- function useLocalStorage(key, initial) { const [value, setValue] = useState(() => { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch { return initial; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(value)); } catch {} }, [key, value]); return [value, setValue]; } /** * Build an encoded WhatsApp/SMS message from summary lines. * All newlines explicit to prevent syntax errors and ensure clean encoding. */ export function buildEncodedMessage(lines) { const header = "🛒 Pedido desde la tienda\n"; const body = lines && lines.length ? lines.join("\n") : ""; const footer = "\n\nPor favor confirma dirección y horario de entrega."; const full = header + body + footer; return encodeURIComponent(full); } // ----------------------------- // React Component // ----------------------------- export default function Storefront() { const [query, setQuery] = useState(""); const [cat, setCat] = useState("All"); const [cart, setCart] = useLocalStorage("demo-cart", {}); // { [id]: { product, qty } } const [drawerOpen, setDrawerOpen] = useState(false); const filtered = useMemo(() => { return PRODUCTS.filter((p) => (cat === "All" || p.category === cat) && (p.name.toLowerCase().includes(query.toLowerCase()) || p.code.toLowerCase().includes(query.toLowerCase())) ); }, [query, cat]); const totalItems = useMemo(() => Object.values(cart).reduce((a, c) => a + c.qty, 0), [cart]); const add = (product) => { setCart((prev) => { const next = { ...prev }; const current = next[product.id]; next[product.id] = { product, qty: current ? current.qty + 1 : 1 }; return next; }); setDrawerOpen(true); }; const inc = (id) => setCart((prev) => ({ ...prev, [id]: { ...prev[id], qty: prev[id].qty + 1 } })); const dec = (id) => setCart((prev) => { const entry = prev[id]; if (!entry) return prev; const q = entry.qty - 1; const next = { ...prev }; if (q <= 0) delete next[id]; else next[id] = { ...entry, qty: q }; return next; }); const remove = (id) => setCart((prev) => { const n = { ...prev }; delete n[id]; return n; }); const clear = () => setCart({}); const summaryLines = useMemo(() => { const values = Object.values(cart); const lines = values.map((c) => `• ${c.product.name} (${c.product.code}) x${c.qty}`); lines.push(`Total artículos: ${values.reduce((a, c) => a + c.qty, 0)}`); return lines; }, [cart]); const message = useMemo(() => buildEncodedMessage(summaryLines), [summaryLines]); const waHref = `https://wa.me/?text=${message}`; // WhatsApp composer const smsHref = `sms:?&body=${message}`; // SMS composer return (
{/* Header */}
🛍️

Mi Súper

{/* Mobile categories */}
{CATEGORIES.map((c) => ( ))}
{/* Main */}
{/* Grid */}
{filtered.map((p) => (
{p.name}
{p.category}

{p.name}

{Array.from({ length: 5 }).map((_, i) => ( {i < Math.round(p.rating) ? "★" : "☆"} ))} {p.rating.toFixed(1)}
Código: {p.code}
))}
{/* Cart Drawer */} {/* Drawer backdrop */} {drawerOpen && (
); } function PromoBanner() { return (

Ofertas de la semana

Precios bajos todos los días. Ahorra en esenciales para tu hogar.

Hasta 30% OFF Envío local disponible
); } // ----------------------------- // Lightweight Test Cases (Runtime) // These run once at module load and log to console. They do not affect UI. // ----------------------------- (function runDevTests() { try { // Test 1: buildEncodedMessage encodes newlines const msg1 = buildEncodedMessage(["• A (CODE1) x2", "• B (CODE2) x1", "Total artículos: 3"]); console.assert(typeof msg1 === "string" && msg1.includes("%0A"), "Test 1 failed: Expected encoded newlines"); // Test 2: Decoded shape correctness const dec1 = decodeURIComponent(msg1); console.assert(dec1.startsWith("🛒 Pedido desde la tienda\n"), "Test 2 failed: Missing header"); console.assert(dec1.includes("Total artículos: 3"), "Test 2 failed: Missing total line"); // Test 3: Empty body still valid const msg2 = buildEncodedMessage([]); const dec2 = decodeURIComponent(msg2); console.assert(dec2 === "🛒 Pedido desde la tienda\n\nPor favor confirma dirección y horario de entrega.", "Test 3 failed: Unexpected empty message format"); // Test 4: No unterminated strings at runtime (smoke) console.assert(/\n/.test(dec1), "Test 4 failed: newline structure missing"); // Test 5: Ensure codes are present in summary line formatting const lines = ["• X (XYZ123) x5"]; const msg3 = decodeURIComponent(buildEncodedMessage(lines)); console.assert(msg3.includes("(XYZ123)"), "Test 5 failed: code not present in message"); console.log("✅ Dev tests passed"); } catch (err) { console.error("❌ Dev tests failed", err); } })();