setOk(false)}
style={Object.assign({
width: s, height: s, objectFit: 'contain', display: 'block', margin: '0 auto',
mixBlendMode: T.escuro ? 'screen' : 'multiply',
filter: T.escuro ? 'invert(1) hue-rotate(180deg)' : 'none',
}, style)} />
);
}
/* ------------------------- monte o seu -------------------------
Um produto com `montavel` preenchido é um construtor: o preço dele é
a base e a ficha técnica dele é o que já vem incluso. Os extras
ofertados saem da união das fichas dos produtos da mesma família —
ou seja, o que já é usado nos lanches prontos é o que dá pra montar.
Só entram insumos com preco_venda > 0: preço zerado significa
"não oferecer", e não "de graça". */
const FAMILIAS = {
xis: (nome) => /\bxis\b/.test(norm(nome)),
burger: (nome) => /(burger|hamburgue)/.test(norm(nome)),
};
function extrasDoMontavel(prod, prods, fichas, insumos) {
const familia = FAMILIAS[prod.montavel];
if (!familia) return { inclusos: [], extras: [] };
const idsFamilia = prods.filter((p) => familia(p.nome)).map((p) => p.id);
const inclusosIds = fichas.filter((f) => f.product_id === prod.id).map((f) => f.stock_item_id);
const usados = {};
fichas.forEach((f) => {
if (idsFamilia.indexOf(f.product_id) >= 0) usados[f.stock_item_id] = true;
});
const porId = {};
insumos.forEach((i) => { porId[i.id] = i; });
const inclusos = inclusosIds.map((id) => porId[id]).filter(Boolean);
const extras = Object.keys(usados)
.map((id) => porId[id])
.filter((i) => i && Number(i.preco_venda) > 0 && inclusosIds.indexOf(i.id) < 0)
.sort((a, b) => a.nome.localeCompare(b.nome, 'pt-BR'));
return { inclusos, extras };
}
/* ---------------------------- dados ---------------------------- */
function useCardapio() {
const [cats, setCats] = useState([]);
const [prods, setProds] = useState([]);
const [bairros, setBairros] = useState([]);
const [cfg, setCfg] = useState({});
const [fichas, setFichas] = useState([]);
const [insumos, setInsumos] = useState([]);
const [loading, setLoading] = useState(true);
const timer = useRef(null);
const load = useCallback(async () => {
try {
/* fichas e insumos alimentam o "Monte o seu". Só as colunas necessárias:
custo de insumo não é da conta do cliente, preco_venda é. */
const [c, p, b, s, f, i] = await Promise.all([
supabase.from('categories').select('*').eq('ativo', true).order('ordem'),
supabase.from('products').select('*').eq('ativo', true).order('ordem'),
supabase.from('bairros').select('*').eq('ativo', true).order('nome'),
supabase.from('settings').select('*'),
supabase.from('product_recipe').select('product_id,stock_item_id,qtd'),
supabase.from('stock_items').select('id,nome,unidade,preco_venda').order('nome'),
]);
if (c.data) setCats(c.data);
if (p.data) setProds(p.data);
if (b.data) setBairros(b.data);
if (f.data) setFichas(f.data);
if (i.data) setInsumos(i.data);
if (s.data) {
const o = {};
s.data.forEach((r) => { o[r.key] = r.value || {}; });
setCfg(o);
}
} catch (e) {
console.error('[cardapio] load', e);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
load();
const debounced = () => {
clearTimeout(timer.current);
timer.current = setTimeout(load, 400);
};
const ch = supabase.channel('cardapio-pub')
.on('postgres_changes', { event: '*', schema: 'public', table: 'products' }, debounced)
.on('postgres_changes', { event: '*', schema: 'public', table: 'categories' }, debounced)
.on('postgres_changes', { event: '*', schema: 'public', table: 'bairros' }, debounced)
.on('postgres_changes', { event: '*', schema: 'public', table: 'settings' }, debounced)
.subscribe();
/* fallback: bloqueio de emergência reflete em até 30s mesmo sem realtime */
const iv = setInterval(load, 30000);
return () => { clearTimeout(timer.current); clearInterval(iv); supabase.removeChannel(ch); };
}, [load]);
return { cats, prods, bairros, cfg, fichas, insumos, loading, reload: load };
}
/* ---------------------------- carrinho ---------------------------- */
const CART_KEY = 'theducks_cart_v1';
function useCart() {
const [items, setItems] = useState(() => {
try { return JSON.parse(localStorage.getItem(CART_KEY) || '[]'); } catch (e) { return []; }
});
useEffect(() => {
try { localStorage.setItem(CART_KEY, JSON.stringify(items)); } catch (e) {}
}, [items]);
const add = (it) => setItems((prev) => {
const i = prev.findIndex((x) => x.key === it.key);
if (i >= 0) {
const cp = prev.slice();
cp[i] = Object.assign({}, cp[i], { qtd: cp[i].qtd + it.qtd });
return cp;
}
return prev.concat([it]);
});
const setQtd = (key, q) => setItems((prev) =>
q <= 0 ? prev.filter((x) => x.key !== key)
: prev.map((x) => (x.key === key ? Object.assign({}, x, { qtd: q }) : x)));
const clear = () => setItems([]);
const subtotal = items.reduce((a, x) => a + x.preco * x.qtd, 0);
const count = items.reduce((a, x) => a + x.qtd, 0);
return { items, add, setQtd, clear, subtotal, count };
}
/* ---------------------------- UI base ---------------------------- */
function Sheet({ open, onClose, children, title }) {
useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
if (!open) return null;
return (
{prod.descricao}
) : null}
{monta && (
{monta.inclusos.length > 0 && (
)}
{lista.length > 0 && (
Já vem com
)}
{monta.inclusos.map((i) => i.nome).join(' · ')}
MONTE DO SEU JEITO
{monta.extras.length === 0 ? (
Ainda não há ingredientes liberados para montagem.
) : monta.extras.map((i) => {
const on = ads.some((x) => x.stock_item_id === i.id);
return (
);
})}
ADICIONAIS
{lista.map((a, i) => {
const on = ads.some((x) => x.nome === a.nome);
return (
);
})}
{qtd}