// App root: ties everything together. Manages pedidos drafts, favorites, modals, tweaks. const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA, useCallback: useCallbackA } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "layout": "editorial", "showPrice": true, "theme": "earthy" }/*EDITMODE-END*/; function App() { const [products] = useStateA(window.CATALOG); const [q, setQ] = useStateA(''); const [filters, setFilters] = useStateA({ categoria: new Set(), cor: new Set(), acabamento: new Set(), tamanho: new Set(), ambiente: new Set(), faixa: new Set(), favOnly: false, }); const [openProduct, setOpenProduct] = useStateA(null); // product object being configured const [editingPedido, setEditingPedido] = useStateA(null); // pedido id being edited const [pedidos, setPedidos] = useStateA(() => { try { const raw = localStorage.getItem('six.pedidos'); return raw ? JSON.parse(raw).map(p => ({...p, product: window.CATALOG.find(c => c.id === p.productId)})).filter(p => p.product) : []; } catch { return []; } }); const [favorites, setFavorites] = useStateA(() => { try { const raw = localStorage.getItem('six.favorites'); return new Set(raw ? JSON.parse(raw) : []); } catch { return new Set(); } }); const [savedClient, setSavedClient] = useStateA(() => { try { const raw = localStorage.getItem('six.client'); return raw ? JSON.parse(raw) : null; } catch { return null; } }); const [drawerOpen, setDrawerOpen] = useStateA(false); const [checkoutFor, setCheckoutFor] = useStateA(null); // [pedidos] when checkout modal is open const [sentToast, setSentToast] = useStateA(null); const [shareOpen, setShareOpen] = useStateA(false); const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); const showPrice = tweaks.showPrice; const layout = tweaks.layout; const theme = tweaks.theme; // Persist useEffectA(() => { const serializable = pedidos.map(p => ({ id: p.id, productId: p.product.id, config: p.config })); localStorage.setItem('six.pedidos', JSON.stringify(serializable)); }, [pedidos]); useEffectA(() => { localStorage.setItem('six.favorites', JSON.stringify([...favorites])); }, [favorites]); useEffectA(() => { document.documentElement.dataset.theme = theme; }, [theme]); // Defaults reused across new pedidos: last CEP, last m2 const savedDefaults = useMemoA(() => { const last = pedidos[pedidos.length - 1]; return { cep: last ? last.config.cep : (savedClient?.cep || ''), m2: '', }; }, [pedidos, savedClient]); const toggleFav = (id) => { setFavorites(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }; const addDraft = ({ product, config }) => { if (editingPedido) { setPedidos(ps => ps.map(p => p.id === editingPedido.id ? { ...p, config } : p)); setEditingPedido(null); } else { setPedidos(ps => [...ps, { id: crypto.randomUUID(), product, config }]); } setOpenProduct(null); setDrawerOpen(true); }; const removeDraft = (id) => setPedidos(ps => ps.filter(p => p.id !== id)); const editDraft = (ped) => { setEditingPedido(ped); setDrawerOpen(false); setOpenProduct(ped.product); }; const startSend = (target) => { setDrawerOpen(false); if (target === 'all') { setCheckoutFor([...pedidos]); } else { setCheckoutFor([target]); } }; const finalizeSend = (client) => { setSavedClient(client); try { localStorage.setItem('six.client', JSON.stringify(client)); } catch {} const pedidosToSend = checkoutFor; pedidosToSend.forEach((ped, i) => { // Stagger opens so popup blocker doesn't reject all setTimeout(() => { window.sendToWhatsApp(ped, i+1, client, pedidosToSend.length); }, i * 350); }); setCheckoutFor(null); setSentToast({ count: pedidosToSend.length, pedidos: pedidosToSend, }); // Optimistically clear sent items after a short window? Keep them — user might want to re-send. }; return (
setDrawerOpen(true)} onOpenFavorites={() => setFilters(f => ({...f, favOnly: !f.favOnly}))} q={q} setQ={setQ} onOpenShare={() => setShareOpen(true)} /> {openProduct ? ( { setOpenProduct(null); setEditingPedido(null); }} onAddDraft={addDraft} /> ) : ( <> )}
); } // — Footer — const Footer = () => ( ); // — Floating bar at bottom (mobile-style cart shortcut) — const FloatingBar = ({ pedidos, onOpenDrawer }) => { if (pedidos.length === 0) return null; return (
); }; // — Sent confirmation toast — const SentToast = ({ info, onClose }) => { React.useEffect(() => { const id = setTimeout(onClose, 9000); return () => clearTimeout(id); }, [onClose]); return (
{info.count === 1 ? '1 orçamento enviado ao WhatsApp da Six' : `${info.count} abas do WhatsApp abertas`}
{info.count > 1 ? 'Clique em "Enviar" em cada conversa.' : 'Confirme e envie a mensagem na conversa.'} Vamos responder em horário comercial.
); }; // — Share modal — const ShareModal = ({ favorites, pedidos, products, onClose }) => { const favProducts = products.filter(p => favorites.has(p.id)); // Build a shareable text + fake link const items = favProducts.length > 0 ? favProducts.map(p => p.nome) : pedidos.map(p => p.product.nome); const text = items.length > 0 ? `Olha essa seleção de revestimentos da Six:\n\n${items.map((n,i) => `${i+1}. ${n}`).join('\n')}\n\nCatálogo: https://sixmateriais.com.br` : 'Confira o catálogo Six Revestimentos em https://sixmateriais.com.br'; const link = `https://sixmateriais.com.br/lista?ids=${[...favorites, ...pedidos.map(p=>p.product.id)].slice(0,12).join(',')}`; const [copied, setCopied] = React.useState(false); const copy = (t) => { navigator.clipboard.writeText(t).then(()=>{ setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; return (
e.stopPropagation()}>
COMPARTILHAR

Sua lista, em um link.

Envie sua seleção para o cliente, o arquiteto ou a equipe da obra. {items.length === 0 ? 'Adicione favoritos ou orçamentos primeiro.' : `${items.length} item${items.length > 1 ? 'ns' : ''} na lista.`}