Mesma regra, mesmas rotas e os mesmos fluxos. Mudou a cara, que agora segue o Figma do Pedágio Digital, e o acabamento: movimento, Web e acessibilidade.
src/servico-campanha.js é o mesmo arquivo da v0.2 (SHA-256 igual).pdapp://, ordem dos passos e travas de fluxo.data-teste, data-acao, data-tela, data-forma, data-tipo, aria-label, #endereco e .erro da v0.2 (conferido por teste).noindex.src/, build.js nem tests/cenarios.test.js. Reconstruí o código a partir do HTML da v0.2 (o build reproduz o arquivo original byte a byte). Os 45 testes originais seguem pendentes; no lugar, rodei a suíte abaixo.| Suíte | Resultado | O que cobre |
|---|---|---|
| Regra de negócio | 17 de 17 | Inclui o SHA-256 do serviço, teto de R$ 10, 10% da 1ª passagem, uso inteiro, expiração e token. |
| Contrato da interface | 10 de 10 | Nada da v0.2 sumiu: data-*, aria-label, ações, rotas, #endereco, .erro e noindex. |
| Roteiro ponta a ponta | 21 de 21 passos | Landing → cadastro → pagamento → recibo → carteira → uso → expiração, sem erro de console. |
| Piso de qualidade | sem pendências | Contraste AA, alvos de 44 px, foco visível, sem rolagem horizontal e nada cortado em 1280 × 800, 1440 × 900 e 1280 × 720, mais movimento reduzido. |
| Capturas | 44 telas | 23 no Web e 21 no App, nas duas versões. |
Os testes são da CAISLAB, escritos nesta rodada. A suíte original de 45 testes não veio no pacote. Para rodar: node build.js, node --test tests/*.test.js, node tests/e2e.js, node tests/qualidade.js.
Capturas em 1440 × 900 com o mesmo roteiro e dados de demonstração. Clique numa imagem para ampliar.
Logo oficial no lugar do símbolo provisório. Selo "Campanha de cashback", título maior e celular com a carteira real do app. Textos da regra iguais aos da v0.2.
Passos em cartões com número em lima e "Duas formas de usar" com exemplos reais da interface (carteira e chave "Usar cashback").
Barra de progresso "Passo 1 de 3". Campos no padrão do Figma: rótulo à esquerda, valor à direita. Aviso "Cashback vinculado" em cartão de vidro.
Prévia da placa Mercosul enquanto a pessoa digita. Botão principal fixo no rodapé.
Mesmo padrão de campos e botão no rodapé. A regra da senha aparece como texto de apoio.
Check desenhado com animação curta. Selo do cashback em pílula. Botão "Acessar minha conta" no rodapé.
Logo oficial no topo. No App, folha inferior; no Web, diálogo central sobre o layout do Figma.
Faixa de cashback com selo, veículo com a imagem oficial do Figma e navegação Liquid Glass com o botão de IA separado.
Resumo "Valor total" com botão "Pagar" e aviso de pagamento automático, como no Figma.
Débitos agrupados por data, cabeçalho com voltar e barra com o total selecionado e "Pagar".
Formas de pagamento com ícones e seleção clara. Aviso do cashback previsto junto ao resumo. Pagar mostra "processando" por 480 ms.
Check lima no topo, valores com contagem rápida e aviso do cashback que não cobre os botões.
Cartão escuro do Figma com brilho lima. O cashback fica dentro do cartão. Extrato com filtro.
Cartão de saldo com selo "Ativo" e prazo. "Como funciona" em lista com checks e histórico abaixo.
A faixa mostra o valor ganho e até quando usar.
Chave "Usar cashback" anima ao ligar. O desconto entra no resumo e o total atualiza com contagem.
Chips de valor com o selecionado em preto e resumo com a taxa. No Web abre como janela sobre a carteira, como no Figma.
Lista com a imagem oficial do carro e o botão "Adicionar veículo".
Avatar com iniciais e as seções "Minha conta" e "Ajuda e informações" do Figma.
Logo oficial, campos no padrão do Figma e botão no rodapé.
Selo laranja "Faltam 5 dias" na faixa de cashback.
O cartão avisa que o saldo expirou e o extrato mostra o movimento "Cashback expirado".
Sem o aviso de cashback, como na v0.2: a regra não mudou.
Barra de progresso "Passo 1 de 3". Campos no padrão do Figma: rótulo à esquerda, valor à direita. Aviso "Cashback vinculado" em cartão de vidro.
Prévia da placa Mercosul enquanto a pessoa digita. Botão principal fixo no rodapé.
Mesmo padrão de campos e botão no rodapé. A regra da senha aparece como texto de apoio.
Check desenhado com animação curta. Selo do cashback em pílula. Botão "Acessar minha conta" no rodapé.
Logo oficial no topo. No App, folha inferior; no Web, diálogo central sobre o layout do Figma.
Faixa de cashback com selo, veículo com a imagem oficial do Figma e navegação Liquid Glass com o botão de IA separado.
Resumo "Valor total" com botão "Pagar" e aviso de pagamento automático, como no Figma.
Débitos agrupados por data, cabeçalho com voltar e barra com o total selecionado e "Pagar".
Formas de pagamento com ícones e seleção clara. Aviso do cashback previsto junto ao resumo. Pagar mostra "processando" por 480 ms.
Check lima no topo, valores com contagem rápida e aviso do cashback que não cobre os botões.
Cartão escuro do Figma com brilho lima. O cashback fica dentro do cartão. Extrato com filtro.
Cartão de saldo com selo "Ativo" e prazo. "Como funciona" em lista com checks e histórico abaixo.
A faixa mostra o valor ganho e até quando usar.
Chave "Usar cashback" anima ao ligar. O desconto entra no resumo e o total atualiza com contagem.
Chips de valor com o selecionado em preto e resumo com a taxa. No Web abre como janela sobre a carteira, como no Figma.
Lista com a imagem oficial do carro e o botão "Adicionar veículo".
Avatar com iniciais e as seções "Minha conta" e "Ajuda e informações" do Figma.
Logo oficial, campos no padrão do Figma e botão no rodapé.
Selo laranja "Faltam 5 dias" na faixa de cashback.
O cartão avisa que o saldo expirou e o extrato mostra o movimento "Cashback expirado".
Sem o aviso de cashback, como na v0.2: a regra não mudou.