// J.A.V.A · Catálogo CULINÁRIO · App principal // // Layout revisado no Claude Design (handoff 31/07 — docs/erpIndustrial/ // bot-chat-automatico/catalogobarras). A recriação de lá NÃO tinha o fluxo // comercial (envio pelo site, bloco ORC do bot, validação de CNPJ/WhatsApp, // deep links) — isso vem daqui e não deve ser substituído por ela. const { useState, useMemo, useEffect } = React; const PRODUCTS = window.JAVA_CUL_PRODUCTS; const LINES = window.JAVA_CUL_LINES; const RESTR = window.JAVA_CUL_RESTRICTIONS; const RESTR_FILTERS = window.JAVA_CUL_RESTR_FILTERS; const CACAU_BINS = window.JAVA_CUL_CACAU_BINS; const PESO_BINS = window.JAVA_CUL_PESO_BINS; const PREPARO_BINS = window.JAVA_CUL_PREPARO_BINS; const NUTRI = window.JAVA_CUL_NUTRI || {}; const NUTRI_MAP = window.JAVA_CUL_NUTRI_MAP || {}; // Caminhos ABSOLUTOS: a página é servida tanto em /catalogoBarra/java/index.html // quanto em /catalogoBarra/java (rewrite) — relativo quebraria na segunda forma. const ASSETS = '/catalogo/java/assets'; // logos, compartilhados com o varejo const CAPA = '/catalogoBarra/java/assets/capa-culinarios.jpg'; // foto própria da linha culinária const PDF_MOBILE = '/catalogoBarra/java/catalogo-pdf-mobile.html?print=1'; // ─── Helpers ─────────────────────────────────────────────── // Peso SEM casa decimal em todo o catálogo (2 kg, 5 kg) — o comprador food // service raciocina na embalagem cheia; o 2,01/2,05 do cadastro só polui. function fmtKg(kg) { if (kg == null) return ''; return String(Math.round(Number(kg))); } function pesoLabel(size) { return `${fmtKg(size.kg)} kg`; } function packagingFor(size) { if (!size.embalagem) return `embalagem de ${pesoLabel(size)}`; return size.embalagem.replace(/[\d.,]+\s*kg/, pesoLabel(size)); } function cacauLabelOf(p) { return p.cacauLabel || `${p.cacau}% cacau`; } // Exibição: barras/blocos ganham "BARRAS" na frente. O nome em data.js segue // espelhando o cadastro do ERP — o prefixo é só de vitrine. function nameOf(p) { return p.line === 'barras' ? `BARRAS ${p.name}` : p.name; } function lineLabelOf(id) { return LINES.find((l) => l.id === id)?.label || id; } // Rótulo nutricional do produto — a etiqueta da barra vale para as gotas do // mesmo chocolate (ver JAVA_CUL_NUTRI_MAP). function nutriFor(p) { return NUTRI[NUTRI_MAP[p.id]] || null; } function restrLabel(id) { return RESTR.find((x) => x.id === id)?.label || id; } // Branco (cacau null) vai para o fim da ordenação por teor const cacauOrd = (p) => (p.cacau == null ? 999 : p.cacau); const isMobile = () => typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 700px)').matches; // No celular o "Baixar PDF" abre a folha A5 retrato; no desktop, as páginas A4 // da própria página (print-only). function abrirPdf() { if (isMobile()) { window.open(PDF_MOBILE, '_blank', 'noopener'); return; } window.print(); } // Barra fixa de saída dos painéis — no celular o ✕ do canto some ao rolar. function BarraVoltar({ onClose }) { return (
); } // ─── Top bar ─────────────────────────────────────────────── function TopBar({ variant, onPedidoRapido }) { return (
Java chocolates Culinários
Contato
); } // ─── Cover ───────────────────────────────────────────────── function Cover() { return (
Linha culinária · Food service Indústria brasileira

Chocolate
para produzir.

Barras, gotas e coberturas para confeitarias, cozinhas profissionais e indústrias de alimentos.

O mesmo chocolate bean to bar das nossas barrinhas, na escala da sua produção.

BARRAS E GOTAS Sem glúten Sem leite
Chocolate derretido escorrendo de uma barra
); } // ─── Sumário ─────────────────────────────────────────────── function Sumario() { return (
Sem leite
Sem glúten
Vegano
); } // ─── Filters ─────────────────────────────────────────────── function Filters({ tipo, setTipo, line, setLine, cacau, setCacau, peso, setPeso, preparo, setPreparo, restr, setRestr, onlyBest, setOnlyBest, count }) { // "Tipo" separa chocolate nobre de cobertura fracionada — é a primeira // pergunta de quem compra culinário, antes até do formato. const tipos = [ { id: 'all', label: 'todos' }, { id: 'nobre', label: 'chocolate nobre' }, { id: 'coberturas', label: 'coberturas fracionadas' }]; // Coberturas têm seção própria — o filtro de formato cobre só o que está na grade. const formatos = LINES.filter((l) => l.id !== 'coberturas'); return (
Destaques
Tipo {tipos.map((t) => )}
Formato {formatos.map((l) => )}
% cacau {CACAU_BINS.map((b) => )}
Embalagem {PESO_BINS.map((b) => )}
Preparo {PREPARO_BINS.map((b) => )}
Restrições {RESTR_FILTERS.map((f) => )}
); } // ─── Card ────────────────────────────────────────────────── function Card({ p, onOpen, compareIds, toggleCompare, orcamentoIds, toggleOrcamento }) { const isCompared = compareIds.includes(p.id); const isInOrc = orcamentoIds.includes(p.id); return (
onOpen(p)} role="button" tabIndex={0} onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();onOpen(p);}}}>
{p.img ? {p.name} :
{p.placeholder?.label || p.name} foto em breve
} {p.status === 'novo' &&
Novo
} {p.bestseller &&
★
} {p.temperagem === false &&
sem temperagem
}
{cacauLabelOf(p)}

{nameOf(p)}

{p.family}
{p.sizes.map((s) => {pesoLabel(s)} )}
{p.usos &&
{p.usos.slice(0, 3).map((u) => {u})}
}
); } function GradeProdutos({ items, onOpen, cmpIds, toggleCmp, orcIds, toggleOrc, style }) { return (
{items.map((p) => )}
); } // ─── Sheet (detail) ──────────────────────────────────────── function Sheet({ product, onClose, onCompare, compareIds, onOrcamento, orcamentoIds, onVerOrcamento }) { const p = product; useEffect(() => { const onEsc = (e) => e.key === 'Escape' && onClose(); window.addEventListener('keydown', onEsc); document.body.style.overflow = 'hidden'; return () => {window.removeEventListener('keydown', onEsc);document.body.style.overflow = '';}; }, []); const placeholderStyle = p.placeholder ? { '--placeholder-tone': p.placeholder.tone } : {}; const nutri = nutriFor(p); return (
); } // ─── Comparator ──────────────────────────────────────────── function Comparator({ ids, setIds }) { const items = ids.map((id) => PRODUCTS.find((p) => p.id === id)).filter(Boolean); const slots = Math.max(3, items.length); return (

Comparador

Adicione produtos pelo botão ⇆ comparar em cada card. Compare até 4 lado a lado.

{Array.from({ length: slots }).map((_, i) => { const p = items[i]; if (!p) return (
Slot vazio
); return (
{p.img ? :
{p.placeholder?.label || p.name}
}
); })} {comparatorRow('Produto', items, slots, (p) =>
{nameOf(p)}
{p.family}
)} {comparatorRow('% Cacau', items, slots, (p) => {p.cacauLabel || `${p.cacau}%`})} {comparatorRow('Formato', items, slots, (p) => lineLabelOf(p.line))} {comparatorRow('Preparo', items, slots, (p) => p.temperagem === false ? 'Não precisa temperar' : 'Requer temperagem')} {comparatorRow('Embalagens', items, slots, (p) =>
{p.sizes.map((s) =>
{pesoLabel(s)} · {s.sku}
)}
)} {comparatorRow('Aplicações', items, slots, (p) =>
{(p.usos || []).join(' · ')}
)} {comparatorRow('Restrições', items, slots, (p) =>
{p.restrictions.map((r) => {restrLabel(r)} )}
)}
); } function comparatorRow(label, items, slots, render) { return (
{label}
{Array.from({ length: slots }).map((_, i) => { const p = items[i]; return
{p ? render(p) : ''}
; })} ); } // ─── Orçamento (cart + send) ─────────────────────────────── const ORC_GRUPOS = [ { id: 'barras', label: 'Barras' }, { id: 'gotas', label: 'Gotas' }, { id: 'coberturas', label: 'Coberturas' }]; function OrcamentoModal({ items, qtyMap, setQty, onRemove, onClose, message, setMessage, onVerProduto }) { const [cnpj, setCnpj] = useState(''); const [zap, setZap] = useState(''); // WhatsApp do cliente (obrigatório no P0) const [enviando, setEnviando] = useState(false); const [enviado, setEnviado] = useState(null); // { numero } após o backend confirmar const [fallbackWa, setFallbackWa] = useState(false); // número não validado → wa.me manual const [formError, setFormError] = useState(''); const [toast, setToast] = useState(''); const [gruposFechados, setGruposFechados] = useState({}); const cnpjRef = React.useRef(null); const zapRef = React.useRef(null); useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(''), 2400); return () => clearTimeout(t); }, [toast]); const flagMissing = () => { if (!temItens) { setFormError('Escolha a quantidade de pelo menos um produto para pedir o orçamento.'); return; } if (!zapOk) setFormError('Informe o WhatsApp com DDD — é nele que o orçamento chega.'); else setFormError('Informe um CNPJ válido (14 dígitos) — o endereço sai do cadastro.'); const target = !zapOk ? zapRef.current : cnpjRef.current; if (target) { try { target.focus({ preventScroll: false }); } catch { target.focus(); } } }; const formatCnpj = (v) => { const d = v.replace(/\D/g, '').slice(0, 14); if (d.length <= 2) return d; if (d.length <= 5) return d.replace(/^(\d{2})(\d+)/, '$1.$2'); if (d.length <= 8) return d.replace(/^(\d{2})(\d{3})(\d+)/, '$1.$2.$3'); if (d.length <= 12) return d.replace(/^(\d{2})(\d{3})(\d{3})(\d+)/, '$1.$2.$3/$4'); return d.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d+)/, '$1.$2.$3/$4-$5'); }; const cnpjDigits = cnpj.replace(/\D/g, ''); const cnpjOk = cnpjDigits.length === 14; const formatZap = (v) => { const d = v.replace(/\D/g, '').slice(0, 13); const semDdi = (d.length >= 12 && d.startsWith('55')) ? d.slice(2) : d; if (semDdi.length <= 2) return semDdi; if (semDdi.length <= 6) return semDdi.replace(/^(\d{2})(\d+)/, '($1) $2'); if (semDdi.length <= 10) return semDdi.replace(/^(\d{2})(\d{4})(\d+)/, '($1) $2-$3'); return semDdi.replace(/^(\d{2})(\d{5})(\d+)/, '($1) $2-$3'); }; const zapDigits = (() => { let d = zap.replace(/\D/g, ''); if ((d.length === 12 || d.length === 13) && d.startsWith('55')) d = d.slice(2); return d; })(); const zapOk = zapDigits.length === 10 || zapDigits.length === 11; const temItens = items.some((p) => p.sizes.some((sz) => ((qtyMap[p.id] && qtyMap[p.id][sz.label]) | 0) > 0)); const formOk = zapOk && cnpjOk && temItens; // ─── Envio pelo PRÓPRIO SITE (Plano 0): o backend valida o número (conversa // recente = janela de 24h aberta), cria o orçamento no ERP e devolve o PDF no // WhatsApp informado. Sem conversa recente → fallback wa.me com a mensagem pronta. const enviarPeloSite = async () => { if (!formOk) { flagMissing(); return; } setEnviando(true); setFormError(''); setFallbackWa(false); try { // Culinários são vendidos por UNIDADE de embalagem (barra/saco) — a // quantidade digitada já é o número de embalagens (un = 1). const itens = []; items.forEach((p) => p.sizes.forEach((s) => { const q = getQty(p.id, s.label); if (!q) return; const codigo = s.skuUnidade || s.sku; if (codigo) itens.push({ sku: codigo, quantidade: q * (s.un || 1) }); })); const res = await fetch('/api/public/orcamento', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ slug: 'java', whatsapp: '55' + zapDigits, cnpj: cnpjDigits, itens, observacoes: message.trim() || undefined, }), }); const json = await res.json().catch(() => ({})); if (res.ok && json.ok) { setEnviado({ numero: json.numeroPedido || null }); } else if (res.status === 409) { setFallbackWa(true); setFormError(json.message || 'Não encontramos uma conversa recente com esse WhatsApp. Envie a mensagem pronta pelo botão verde — respondemos por lá.'); } else { setFallbackWa(true); setFormError(json.message || 'Não foi possível gerar o orçamento agora. Envie pelo botão verde que atendemos por lá.'); } } catch { setFallbackWa(true); setFormError('Falha de conexão. Envie pelo botão verde que atendemos por lá.'); } finally { setEnviando(false); } }; useEffect(() => { const onEsc = (e) => e.key === 'Escape' && onClose(); window.addEventListener('keydown', onEsc); document.body.style.overflow = 'hidden'; return () => {window.removeEventListener('keydown', onEsc);document.body.style.overflow = '';}; }, []); const getQty = (pid, label) => { const m = qtyMap[pid]; if (!m || typeof m !== 'object') return 0; return m[label] | 0; }; const productTotal = (p) => p.sizes.reduce((sum, s) => sum + getQty(p.id, s.label), 0); const nSelecionados = items.reduce((n, p) => n + p.sizes.filter((sz) => getQty(p.id, sz.label) > 0).length, 0); // Peso total do pedido — em food service o cliente raciocina em kg, não em peças const pesoTotal = items.reduce( (kg, p) => kg + p.sizes.reduce((s, sz) => s + getQty(p.id, sz.label) * (sz.kg || 0), 0), 0 ); // Itens ordenados por teor de cacau (branco no fim) e repartidos nas três // categorias expansíveis — com 17 produtos no pedido rápido, a lista corrida // era longa demais no celular. const ordenados = useMemo(() => [...items].sort((a, b) => cacauOrd(a) - cacauOrd(b)), [items]); const grupos = ORC_GRUPOS .map((g) => { const rows = ordenados.filter((p) => p.line === g.id); const comQtd = rows.filter((p) => productTotal(p) > 0).length; const aberto = !gruposFechados[g.id]; return { ...g, rows, aberto, caret: aberto ? '▾' : '▸', tip: aberto ? 'Toque para recolher' : 'Toque para expandir', meta: `${rows.length} ${rows.length === 1 ? 'produto' : 'produtos'}${comQtd > 0 ? ` · ${comQtd} com quantidade` : ''}`, }; }) .filter((g) => g.rows.length > 0); const toggleGrupo = (id) => setGruposFechados((f) => ({ ...f, [id]: !f[id] })); const buildMessage = () => { const lines = []; lines.push('Olá! Gostaria de orçamento da linha CULINÁRIA para os seguintes itens:'); lines.push(''); if (cnpj) { lines.push('Dados para emissão:'); lines.push(`CNPJ: ${cnpj}`); lines.push(''); } const orcPairs = []; ordenados.forEach((p) => { p.sizes.forEach((s) => { const qty = getQty(p.id, s.label); if (!qty) return; lines.push(`• ${qty} × ${nameOf(p)} — ${cacauLabelOf(p)} — ${packagingFor(s)} — cód. ${s.sku}`); const codigoOrc = s.skuUnidade || s.sku; if (codigoOrc) orcPairs.push(`${codigoOrc} x${qty * (s.un || 1)}`); }); }); if (pesoTotal > 0) { lines.push(''); lines.push(`Peso total aproximado: ${fmtKg(pesoTotal)} kg`); } if (message.trim()) {lines.push('');lines.push('Observações:');lines.push(message.trim());} // Bloco estruturado p/ o bot criar o orçamento no ERP sem interpretação de // texto livre (parse determinístico por SKU). Não remover. if (orcPairs.length) { lines.push(''); lines.push('Código do pedido (uso interno — não apague):'); lines.push(`ORC: ${orcPairs.join('; ')} | CNPJ ${cnpjDigits}`); } lines.push(''); lines.push('— Pedido gerado pelo catálogo culinário Java 2026'); return lines.join('\n'); }; const waUrl = `https://wa.me/5531973267809?text=${encodeURIComponent(buildMessage())}`; // Copia o texto antes de abrir — evita perder a mensagem se o WhatsApp // não abrir (preview embarcado, popup bloqueado etc.). const tryCopy = async () => { try {await navigator.clipboard.writeText(buildMessage());} catch {} }; const copyMsg = async () => { try {await navigator.clipboard.writeText(buildMessage());setToast('Mensagem copiada para a área de transferência.');} catch {setToast('Não foi possível copiar — selecione o texto manualmente.');} }; return (