// Produtos → Teste A/B (spec 2026-07-28-teste-ab-funis-design): compara duas fatias de
// vendas buygoods etapa a etapa, com normalização por cohort. Self-contained (molde
// Leads/DRE): filtros locais, fetch próprio, SEM mock — comparação inventada é dado falso.
//
// Layout (redesenho 28/jul): filtros e KPIs em DUAS colunas alinhadas (Referência à
// esquerda, Analisado à direita) → card de mix em largura cheia → TRÊS tabelas empilhadas,
// cada uma auto-contida com seus próprios rótulos de linha (Referência, Analisado,
// Veredito). Empilhar em largura cheia é o que garante zero rolagem lateral: 7 colunas
// numa tabela cabem folgado, 14 lado a lado não caberiam.
//
// Prefixo `abt` em TODOS os identificadores de topo: os .jsx dividem um único escopo de
// script (Babel standalone) e colisão de nome dá tela branca.
const ABT_SIDES = [
{ key: 'ref', label: 'Referência', color: 'var(--fenix-blue)' },
{ key: 'cur', label: 'Analisado', color: 'var(--fenix-orange)' },
];
const ABT_TONE = {
verde: 'var(--positive)', vermelho: 'var(--negative)',
amarelo: 'var(--warning)', inconclusivo: 'var(--fg-4)',
};
// Palavra do semáforo de DEVOLUÇÃO (independente do de lucro — `confiancaDev` já vem do
// backend com o sinal invertido: devolver MENOS é "caiu", o verde). Nunca só a cor: o
// design da tela exige ponto + palavra, senão a leitura falha em daltonismo e no impresso.
const ABT_DEV_LABEL = {
verde: 'caiu', vermelho: 'subiu', amarelo: 'sinal fraco', inconclusivo: 'inconclusivo',
};
// Dinheiro POR LEAD com 2 casas. O USD() do projeto arredonda para o inteiro — aqui os
// centavos são o dado: $0,74/lead × 2.700 leads = ~US$ 2.000 de diferença no funil.
// Respeita a moeda global (FX) igual aos formatadores oficiais.
const abtMoney = (v, signed) => {
if (v == null || !isFinite(v)) return '—';
const c = v * FX.rate;
const sym = FX.code === 'BRL' ? 'R$ ' : '$';
const loc = FX.code === 'BRL' ? 'pt-BR' : 'en-US';
const sinal = signed ? (c >= 0 ? '+' : '−') : (c < 0 ? '−' : '');
return sinal + sym + Math.abs(c).toLocaleString(loc,
{ minimumFractionDigits: 2, maximumFractionDigits: 2 });
};
const abtUsd = (v) => abtMoney(v, true); // delta assinado
const abtPp = (v) => (v == null ? '—' : `${v >= 0 ? '+' : '−'}${Math.abs(v).toFixed(1)} pp`);
// pValue PODE ser null e é caminho normal (pedidos da etapa acima da população exposta,
// ou algum lado sem amostra) — o backend devolve null de propósito, a UI mostra "—".
const abtP = (p) => (p == null ? '—' : p < 0.001 ? 'p<0,001' : `p=${p.toFixed(3)}`);
const abtWilson = (ic) => (ic ? `IC95% ${(ic[0] * 100).toFixed(1)}–${(ic[1] * 100).toFixed(1)}%`
: 'IC95% indisponível (população exposta não fecha)');
// Feedback visual direção-consciente (pedido do dono do produto, 30/jul): Δ% = (analisado
// − referência) ÷ |referência| × 100. `null` quando a referência é zero — percentual de
// nada não existe, e inventar um violaria o contrato de "nunca invente um número" da tela.
const abtDeltaPct = (delta, refVal) =>
(delta == null || refVal == null || refVal === 0) ? null : (delta / Math.abs(refVal)) * 100;
const abtFmtPct = (pct) =>
(pct == null ? '—' : `${pct >= 0 ? '+' : '−'}${Math.abs(pct).toFixed(1)}%`);
// Seta da variação BRUTA (nunca da "bondade" — isso é a cor). Vazia quando o delta é zero:
// não inventa direção onde não houve movimento.
const abtArrow = (delta) => (delta == null || delta === 0 ? '' : delta > 0 ? '▲' : '▼');
// Célula padrão "seta + valor + Δ%" repetida nas três aplicações (Veredito, Síntese,
// gaveta). `tone` é SEMPRE emprestado do semáforo que o backend já calculou
// (ABT_TONE[confianca] ou ABT_TONE[confiancaDev], já com o sinal de devolução invertido) —
// esta célula nunca re-deriva verde/vermelho. `muted` reduz a opacidade quando a linha é
// inconclusiva: a tela nunca finge confiança que o teste z não deu.
const AbtDelta = ({ value, delta, pct, tone, muted }) => (
{abtArrow(delta) && {abtArrow(delta)} }
{value}
({abtFmtPct(pct)})
);
const abtFmtDia = (iso) => iso
? new Date(iso.slice(0, 10) + 'T12:00:00').toLocaleDateString('pt-BR',
{ day: '2-digit', month: 'short' })
: '—';
// Colunas de métrica das tabelas de lado (Referência e Analisado). Uma lista só → os dois
// lados nunca saem de sincronia. Nas linhas de FRONT-END o "CVR" é o peso do pote no mix,
// não conversão — o cabeçalho da seção diz isso, e a célula carrega o sufixo "do mix".
const ABT_METRICS = [
{ key: 'orders', label: 'Vendas', fmt: (s) => NUM(s.orders) },
{ key: 'cvr', label: 'CVR', fmt: (s) => `${s.cvr.toFixed(1)}%` },
{ key: 'revenue', label: 'Receita', fmt: (s) => USD(s.revenue) },
{ key: 'devRate', label: 'Reembolso + CGBK', fmt: (s) => `${s.devRate.toFixed(1)}%` },
{ key: 'devLead', label: 'Reemb+CGBK/lead', fmt: (s) => `$${s.devLead.toFixed(2)}` },
{ key: 'oppOrder', label: 'OPP/ord', fmt: (s) => abtMoney(s.oppOrder) },
{ key: 'oppLead', label: 'OPP/lead', fmt: (s) => abtMoney(s.oppLead) },
];
const ABT_BLANK = { period: '30d', customRange: null, product: 'todos',
funnelTag: 'todos', affiliate: 'todos', refundBy: 'pedido' };
// Largura mínima do container para as tabelas de Referência e Analisado caberem LADO A
// LADO. Medido em 28/jul: com 6 métricas o conteúdo pede ~565px por tabela, então o par
// precisa de ~1.144px + o respiro. A folga até 1.240 cobre o dado crescer (receita na casa
// dos milhões, nome de etapa mais longo). Abaixo disso empilha — nunca corta nem rola,
// que é o requisito da tela.
const ABT_LADO_A_LADO_MIN = 1240;
// Filtros de UM lado. `tags` vem do payload do próprio lado (funis vistos na seleção).
// ATENÇÃO: `funnelTag` é o funil de MARKETING (b3/b4…), extraído do codename — NÃO é o
// param `funnel` do FilterBar global, que filtra variação de SKU. Nomes parecidos,
// filtros diferentes.
const AbtSideFilters = ({ side, value, patch, families, roster, tags }) => {
// Se a tag escolhida sumiu da lista devolvida (trocou de produto, janela sem venda),
// ela continua na lista: sem isso o Dropdown mostraria "—" com um filtro ativo.
const tagOpts = [{ key: 'todos', label: 'Todos' },
...(tags || []).map(t => ({ key: t, label: String(t).toUpperCase() }))];
if (value.funnelTag !== 'todos' && !tagOpts.some(o => o.key === value.funnelTag)) {
tagOpts.push({ key: value.funnelTag, label: String(value.funnelTag).toUpperCase() });
}
return (
);
};
// KPI de um lado — mesma coluna e mesma ordem dos filtros, para os dois blocos alinharem.
// O número grande é o TOTAL de vendas (FE + BE), na régua do resto do dashboard
// (decisão 30/jul); os checkouts de FE viram contexto no subtítulo porque seguem
// sendo o denominador do OPP/lead e do mix — sumir com eles esconderia a base
// da normalização.
const AbtSideKpi = ({ side, dados }) => (
);
// Barras de mix de um lado (peso de cada pote no front-end).
// `maxPct` é o maior peso entre OS DOIS lados: escala compartilhada, senão o pote
// dominante de cada lado ficaria da mesma altura e a comparação — que é o ponto do
// bloco — mentiria. Altura útil de 46px; o mínimo de 3px mantém visível o pote de 1%.
const ABT_MIX_H = 46;
const AbtMixBars = ({ mix, color, maxPct }) => {
if (!mix || !mix.length) return
sem checkouts no período
;
const teto = Math.max(maxPct || 0, 1);
return (
{mix.map(m => (
{m.bottles}p
{m.pesoPct.toFixed(0)}%
))}
);
};
// Tabela padrão da tela: linhas de FRONT-END, respiro, faixa BACK-END, linhas de back-end.
// `linhas` = [{key, label, role, tag, celulas: [{v, style, title}]}]. Sem minWidth e sem
// overflowX: 7 colunas em largura cheia cabem — a tela não tem rolagem lateral.
const AbtTable = ({ eyebrow, color, cols, linhas, notaFe, notaBe, onRowClick }) => {
const fe = linhas.filter(l => l.role === 'fe');
const be = linhas.filter(l => l.role !== 'fe');
const nCols = cols.length + 1;
const faixa = (nome, nota) => (
{nome}
{nota && {nota}}
);
// Só as linhas de BACK-END abrem a gaveta: a de front-end é o próprio mix, sem camada
// nem diagnóstico próprio (mesmo critério do resto da tela).
const linha = (l) => {
const clicavel = !!onRowClick && l.role !== 'fe';
return (
Sem vendas nesta seleção — ajuste os filtros deste lado.
)}
);
};
const AbTestView = ({ families = [], rosterAll = [] }) => {
const [ref, setRef] = React.useState(ABT_BLANK);
const [cur, setCur] = React.useState(ABT_BLANK);
const [data, setData] = React.useState(null);
const [err, setErr] = React.useState(false);
const [etapaAberta, setEtapaAberta] = React.useState(null);
const fullLoading = useFullLoading();
// useWidth é o ResizeObserver que o projeto já usa no Charts.jsx — mede o container
// real, não a viewport, então acerta mesmo com a sidebar aberta/fechada.
const [wrapRef, wrapW] = useWidth();
const ladoALado = wrapW >= ABT_LADO_A_LADO_MIN;
// mark() em TODO setter de filtro: é o que faz o FullLoadingOverlay aparecer só quando
// a troca veio do usuário (molde spec 2026-07-23).
const patchRef = (p) => { fullLoading.mark(); setRef(s => ({ ...s, ...p })); };
const patchCur = (p) => { fullLoading.mark(); setCur(s => ({ ...s, ...p })); };
const espelhar = () => { fullLoading.mark(); setCur({ ...ref }); };
const retry = useAutoRetry(err); // falhou → tenta de novo a cada 15s, sozinho
React.useEffect(() => {
const began = fullLoading.begin();
let cancelled = false;
fetchAbTestAPI({ ref, cur })
.then(d => { if (!cancelled) { setData(d); setErr(false); } })
.catch(() => { if (!cancelled) setErr(true); })
.finally(() => { if (!cancelled) fullLoading.end(began); });
return () => { cancelled = true; };
}, [ref, cur, retry]);
// Índices por chave de etapa: a gaveta precisa das linhas CRUAS dos dois lados, e
// `cmp.stages` só carrega a comparação.
const refPorKey = React.useMemo(
() => Object.fromEntries((data?.ref?.stages || []).map((s) => [s.key, s])), [data]);
const curPorKey = React.useMemo(
() => Object.fromEntries((data?.cur?.stages || []).map((s) => [s.key, s])), [data]);
// Dropdown de afiliado — `rosterAll` é o roster do /affiliates SEM os filtros globais
// (esta tela esconde o FilterBar), mesmo critério da DRE.
const affiliateOptions = React.useMemo(() => {
const seen = new Set(); const opts = [];
rosterAll.forEach(r => {
if (r.name && r.name !== 'Não atribuído' && !seen.has(r.name)) {
seen.add(r.name); opts.push({ key: r.name, label: r.name });
}
});
return opts;
}, [rosterAll]);
const sortedFamilies = React.useMemo(
() => [...families].sort((a, b) => a.name.localeCompare(b.name)), [families]);
// Os dois lados nascem idênticos: a tela abre comparando a fatia com ela mesma, tudo
// zerado. Sem esta dica o primeiro render parece defeito.
const espelhados = React.useMemo(
() => JSON.stringify(ref) === JSON.stringify(cur), [ref, cur]);
// O wrapper com `wrapRef` precisa existir em TODOS os estados: se ele só aparecesse com
// dado, o ResizeObserver do useWidth montaria com a ref nula e nunca mediria (o efeito
// tem deps []), e a tela ficaria presa no layout empilhado mesmo sobrando largura.
// 1º load falhou: LoadingScreen offline + retry automático — nunca card estático
// sem retry (requisito ui-fenix, spec 2026-07-30-reconexao). O wrapper mantém o
// ref do useWidth: o ResizeObserver monta com deps [] e precisa do nó desde já.
if (err && !data) return (
A comparação não tem versão de demonstração — nenhum número inventado entra
aqui. Reconectando sozinha a cada 15s.
);
// Primeiro carregamento: tela padrão do projeto.
if (!data) return
;
const cmp = data.comparison;
const sides = { ref: data.ref, cur: data.cur };
const stageOf = (sideKey, key) => sides[sideKey].stages.find(s => s.key === key) || null;
const falhas = (cmp.selfChecks || []).filter(c => !c.ok);
const tot = cmp.totals;
const sep = tot.separacao;
// A cascata visual (4 termos: mix CVR, mix estrutura, conversão, devolução) mora no
// componente AbtCascata, acima das tabelas — ela substitui o antigo resumo de 3 termos
// que ficava aqui embaixo, porque `efeitoReal` é justamente o que a cisão em
// efeitoConversao/efeitoDevolucao (Task 9) precisava abrir.
// Escala compartilhada das barras de mix: o maior peso entre os dois lados.
const maxPeso = Math.max(
...ABT_SIDES.flatMap(s => (sides[s.key].mix || []).map(m => m.pesoPct)), 1);
// --- linhas das três tabelas, todas na MESMA ordem de etapa (a do backend) ---
const NOTA_FE = 'a coluna CVR mostra o peso do pote no mix, não conversão';
const NOTA_BE = 'CVR = pedidos ÷ população exposta à etapa';
const linhasDoLado = (sideKey) => cmp.stages.map(st => {
const s = stageOf(sideKey, st.key);
const z = st.zTest || {};
const isFe = st.role === 'fe';
const celulas = ABT_METRICS.map(m => {
if (!s) return { v: '—' };
// CVR ganha marca de alerta quando os pedidos da etapa superam a população exposta:
// a taxa é impossível (>100%) e não pode ser lida como número normal.
const invalida = m.key === 'cvr' && st.popInvalida && s.orders > s.popExposta;
const wl = sideKey === 'ref' ? z.wilsonRef : z.wilsonCur;
const title = m.key !== 'cvr' ? undefined
: invalida
? `CVR impossível: ${NUM(s.orders)} pedidos para ${NUM(s.popExposta)} expostos. `
+ 'Parte do back-end veio de um front-end fora da janela — a taxa desta linha '
+ 'não é comparável.'
: isFe
? `${NUM(s.orders)} de ${NUM(sides[sideKey].feCheckouts)} checkouts de front-end`
: `${NUM(s.orders)} de ${NUM(s.popExposta)} expostos · ${abtWilson(wl)}`;
return {
v: (m.key === 'cvr' && isFe)
? {m.fmt(s)} do mix
: {m.fmt(s)}{invalida ? ' ⚠' : ''},
title,
style: invalida ? { color: 'var(--warning)', fontWeight: 700, cursor: 'help' }
: (m.key === 'cvr' && isFe) ? { cursor: 'help' } : undefined,
};
});
return { key: st.key, label: st.label, role: st.role, celulas };
});
const linhasVeredito = cmp.stages.map(st => {
const r = stageOf('ref', st.key);
const z = st.zTest || {};
const isFe = st.role === 'fe';
const tone = ABT_TONE[st.confianca] || ABT_TONE.inconclusivo;
// Δ CVR normalizado: o CVR do lado analisado sob o mix da REFERÊNCIA, menos o CVR da
// referência. É o número que o bruto ao lado pode estar distorcendo — mostrar os dois
// lado a lado é o ponto da tela. Não se aplica a linha de mix.
const cvrNorm = st.camadas && st.camadas.cvrNorm;
const deltaNorm = (!isFe && r && cvrNorm != null) ? cvrNorm - r.cvr : null;
// Semáforo de DEVOLUÇÃO — independente do de lucro (`confiancaDev` já vem com o
// sinal invertido do backend). É o par que importa: lucro verde com devolução
// vermelha é exatamente o caso que este eixo existe para capturar.
const toneDev = ABT_TONE[st.confiancaDev] || ABT_TONE.inconclusivo;
const zDev = st.zTestDev || {};
return {
key: st.key, label: st.label, role: st.role,
tag: st.precoMudou ? 'preço' : null,
tagTitle: 'O preço desta etapa mudou entre os dois lados — a comparação de '
+ 'comportamento cai para C2.',
celulas: [
{ v: st.camadaPrincipal
? {st.camadaPrincipal}
: —,
title: st.razao, style: { cursor: 'help', textAlign: 'center' } },
{ v: isFe
? {abtPp(st.deltaCvrPp)}
: ,
title: isFe ? 'Quanto o peso deste pote no mix mudou entre os dois lados — nem '
+ 'melhor nem pior, só diferente (linha de mix é neutra).'
: 'Delta do CVR BRUTO — pode estar contaminado pela mudança de mix. '
+ 'Compare com a coluna normalizada ao lado.' },
{ v: deltaNorm == null
? '—'
: ,
title: deltaNorm == null
? 'Linha de mix — não há CVR normalizado a comparar.'
: 'Delta do CVR já normalizado pelo mix da referência: é a mudança de '
+ 'comportamento, sem o efeito de ter entrado público diferente.' },
{ v: isFe
? {abtUsd(st.deltaOppLead)}
: ,
title: isFe
? 'Linha de mix: só se mexe se o ticket do próprio front-end mudou — não é '
+ 'veredito de melhora/piora, por isso fica neutro.'
: 'Contribuição desta etapa para o total normalizado.' },
{ v: abtP(z.pValue), style: { color: tone },
title: z.pValue == null
? 'Sem teste z: algum lado ficou sem amostra ou os pedidos da etapa superam a população exposta.'
: st.confianca === 'inconclusivo'
? 'Inconclusivo: diferença dentro do ruído a 95% ou volume insuficiente (n < 10 em algum lado).'
: (z.significant ? 'Diferença significativa a 95%.' : 'Diferença dentro do ruído a 95%.') },
{ v:
{abtArrow(st.deltaDevLead) && {abtArrow(st.deltaDevLead)}}
{abtUsd(st.deltaDevLead)}
({abtFmtPct(abtDeltaPct(st.deltaDevLead, r && r.devLead))})
{ABT_DEV_LABEL[st.confiancaDev] || ABT_DEV_LABEL.inconclusivo},
title: `Reembolso + CGBK: ${abtPp(st.deltaDevRatePp)} · ${abtP(zDev.pValue)} · semáforo `
+ 'independente do lucro — devolver menos é sempre "caiu", mesmo com o lucro piorando.' },
],
};
});
return (
Produtos
Teste A/B de funis
{err && (
Falha ao atualizar — mostrando a última comparação carregada.
)}
{/* filtros e KPIs na MESMA grade de 2 colunas: o que está embaixo de cada filtro é
o resultado daquele filtro. */}
{espelhados && (
Os dois lados estão com os mesmos filtros, então tudo dá zero. Mude o funil, o
período ou o produto de um dos lados para começar a comparação.
)}
{/* Mix em card próprio: é ele que explica por que o número bruto pode enganar, então
vem antes das tabelas. */}
Mix de front-end
Quem compra 6 potes se comporta diferente de quem compra 2. Se o mix mudou, a
comparação bruta engana — é isso que as camadas corrigem.
{/* Cascata (spec 2026-07-30): entra ANTES das tabelas — o card de mix explica por
que o número bruto engana, a cascata dá a resposta corrigida, e as três tabelas
abaixo são a trilha de auditoria daquele número. */}
{/* Lado a lado quando há largura para as duas tabelas inteiras; empilhado quando
não. Cortar conteúdo ou criar rolagem lateral não são opções nesta tela. */}
OPP = lucro operacional (OPP/ord por pedido, OPP/lead por checkout de
front-end){data.costs &&
{' '}— receita menos COGS de {abtMoney(data.costs.cogsPerBottle)}/frasco, frete de{' '}
{abtMoney(data.costs.shipFe)} (só no front-end) e a devolução OBSERVADA de cada
etapa×cohort — não uma reserva fixa}. A coluna Δ OPP/lead soma exatamente {abtUsd(tot.oppLeadCur - tot.oppLeadRef)} —
a diferença até o normalizado ({abtMoney(tot.oppLeadCur)}/lead), não até o que
de fato aconteceu ({abtMoney(tot.oppLeadCurBruto)}/lead); a decomposição do número real
está na síntese abaixo. Linha em cinza = inconclusiva; CVR em âmbar com ⚠ = população
exposta não fecha (back-end vindo de um front-end fora da janela). A coluna
Reemb+CGBK/lead tem semáforo PRÓPRIO — lucro verde com devolução vermelha é o par que
importa: significa que o resultado veio à custa de mais reembolso (só reembolso e
chargeback nesta tela — cancelamento fica fora, decisão de produto de 30/jul/2026).
Linha de back-end:
clique para abrir o diagnóstico da etapa.
{/* síntese: os TRÊS ancoradouros (a cascata em si já está acima, antes das tabelas) */}
Síntese
OPP/lead · referência
{abtMoney(tot.oppLeadRef)}
a régua da comparação
OPP/lead · analisado (real)
{abtMoney(tot.oppLeadCurBruto)}
{/* Comparativo contra a referência (spec 2026-07-30-feedback-visual): mesma
régua direção-consciente do resto da tela, sem confiança estatística própria
nesta síntese (é soma, não teste), por isso sem opacidade reduzida. */}
{/* Só o texto do alerta — os tipos (populacao_invalida, sobreposicao,
cohort_sumido, modo_parcial, volume, taxa_diaria, concentracao) são do
backend e podem mudar; a UI não os hardcoda. */}
{(cmp.alerts || []).map((a, i) => (
{a.texto}
))}
{falhas.length > 0 && (
`${f.nome}: ${f.detalhe}`).join('\n')}>
{falhas.length} conferência(s) interna(s) não fecharam — passe o mouse para ver.
)}
{etapaAberta && refPorKey[etapaAberta.key] && curPorKey[etapaAberta.key] && (
// `refEtapa`, não `ref` — nome reservado do React (ver comentário no topo do
// AbtStageDrawer): um prop JSX chamado `ref` nunca chega em `props`.
setEtapaAberta(null)} />
)}