7 publicações com a etiqueta "pagamentos"

Dia pesado: 25 PRs no front-web-base cobrindo um empurrão grande de performance (CSS, ícones, modal), refatoração do header secundário com gating de rota, novas features de cassino e pagamentos, e ajustes finos de SEO/mobile/auth. Plus 4 mudanças de CI/CD em front-ops pra suportar o novo modelo de cache por device/country/buildId.

Performance — empurrão grande​

• Drop important: true do Tailwind (tailwind.config.js). Removido globalmente — precedência CSS volta ao normal (inline style vence class). Resultado: CSS −23,5KB raw (−14,4%). Componentes que usavam o pattern condicional bgStyle ? "" : "bg-..." (omitir classe quando havia inline style) foram simplificados — agora basta sempre emitir a classe que o style inline sobrescreve quando presente. Atualizados: GameCardStacked, GameStats, GameWinners, MainLeaguesSquare, SidebarButtonsGradient, SidebarButtonsGrid.
• Migração react-modal-sheet → vaul (app/components/base/Modal.tsx). Modal chunk caiu de ~158KB pra ~65KB raw — −93KB (−59%). Mesma API externa, drop-in pelos consumers. (PR #405 fez ajustes finos depois pra resolver bugs de input-focus em mobile e espaço fantasma no footer.)
• Remoção do @tailwindcss/typography. Plugin não justificava o custo — uso restrito a 4 lugares (FaqSingleContent, WpPostContent, page.$slug, vip/levels) substituído por classes utilitárias inline. package.json enxuga uma dep + 22 linhas de pnpm-lock.yaml.
• Ícones direct-imports + lazy MainLeagues (app/widgets/home-leagues/). Drop do registry intermediário — agora cada componente faz import Icon from "~icons/<set>/<name>" direto. MainLeaguesSquare virou lazy chunk separado. 25 arquivos tocados, −564 linhas vs +454. Atualiza configs de home-leagues em 7 brands (7k-bet-br, cassino-bet-br, fi-7k-bet, ng-7k-bet, pb-bet, vera-bet-br, state77-com, x2b-bet).
• CI Lighthouse manual (.github/workflows/lighthouse.yml). Workflow caller dispatchável via workflow_dispatch pra rodar Lighthouse on-demand contra preview/prod sem precisar de schedule fixo. Útil pra validar PRs pesados de UI antes de mergear.

Topbar de Notificações​

• Redesign completo da TopbarNotification (PR #333): novo layout com botão de fechar (X) à esquerda, ícone em chip arredondado com tokens dedicados (topbar.icon-bg / topbar.icon-text), pilha de título + subtítulo no centro e CTA pill à direita, com altura de 72 px alinhada às barras modernas de instalação de app. Os ícones emoji foram substituídos por componentes do lucide-react (Smartphone, Bell, Gift, Send, Trophy, ShieldAlert) e o tipo TopbarDefinition.icon virou LucideIcon. Os modos default e restricted foram unificados num TopbarShell compartilhado, e a topbar deixou de ser sticky — agora rola junto com a página enquanto o header permanece fixo no topo do viewport. Tooltip de instalação iOS foi reancorado para o rodapé do viewport com safe-area-inset-bottom para que a seta inferior alinhe com a barra de endereços do Safari.
• Centralização do conteúdo no desktop (PR #334): o TopbarNotification recebeu um container interno max-w-[460px] mx-auto envolvendo close/ícone/texto/CTA. O fundo continua preenchendo edge-to-edge, mas em viewports largos o X e o CTA não escorregam mais para os cantos deixando um espaço vazio gigante no meio. Em mobile (< 460px) o comportamento é idêntico ao anterior — o container preenche naturalmente toda a largura.
• Refresh de tokens de tema da topbar em todos os overrides (PR #347): sincronizou o override 7k-bet-br (que estava sem icon-bg e icon-text), padronizou a paleta com fundo mais suave (lifted bg-primary), chip do ícone tingido com primary e CTA combinando com o botão primário da brand. Ajustes manuais aplicados nas variantes 7k, state77, vera-bet-br, betpontobet-bet-br e cassino-bet-br. Altura interna da linha do TopbarNotification reduzida de 68 px para 62 px para compactar o footprint vertical.

Layout e Responsividade​

• Corrigido o viewport meta tag para melhorar a usabilidade em mobile, prevenindo zoom indesejado com os atributos maximum-scale e user-scalable
• Atualizado o layout principal para usar altura dinâmica (h-dvh), melhorando a adaptação em diferentes dispositivos
• Ajustado o overflow do body para hidden com overscroll-behavior: none, garantindo melhor controle de scroll na aplicação

Área do Usuário (front-web-base)​

• Substituição completa do menu lateral por navegação em abas (tabs): geral, histórico e configurações
• Adicionadas páginas de conteúdo tabuladas: general.tsx (info da conta, segurança, métodos de pagamento), config.tsx (proteção, jogo responsável) e history.tsx (histórico de transações e de login)
• Removidas páginas legadas separadas: conta, segurança, proteção da conta, IRPF, histórico de login
• Seções de conta e segurança refatoradas com painéis colapsáveis e ícones
• Sections Pix, Clabe, Senha e Autenticação em dois fatores agora são componentes auto-contidos com gerenciamento de estado próprio
• Adicionado componente UserSummaryHeader com info do usuário e ações rápidas

Jogos​

• Modal fullscreen para o player de jogos no mobile: ao clicar em Jogar, o jogo abre em tela cheia com header próprio (botão voltar e botão Depositar)
• Detecção de dispositivo móvel no GameIframe para ajustar comportamento de exibição
• Carrossel de jogos relacionados atualizado com setas de navegação e link "Ver todos"
• Carrossel de provedores adicionado na página de detalhe do jogo
• Grid de jogos ajustado para 3 colunas com espaçamento mais compacto
• Deduplicação de jogos no cache para evitar itens repetidos nas linhas
• Chaves de componentes migradas de game.id para game.slug para maior consistência
• Ajuste no fallback de estatísticas: API pode retornar objeto com valores zerados, agora verificado corretamente antes de cair no mock

i18n — Suporte multi-idioma completo​

O maior entregável do dia: infraestrutura de internacionalização integrada em toda a plataforma.

• Adicionada infraestrutura base de i18n com i18next e react-i18next, incluindo alias ~i18n no Vite para seleção de idioma em tempo de build e constante __BRAND_LANGUAGE__
• Criados contextos CountryProvider (hook useCountry) e TranslationProvider com suporte a overrides por fork
• Migrados componentes de layout (Header, Sidebar, MobileBottomNav, Footer) para usar t() em todos os textos
• Migrados modais de autenticação (Login e Registro) com tipo de documento dinâmico por país (CPF/RUT/CURP)
• Migrados componentes de pagamento (Depósito, Saque, Cupom, Pix, resultados) para t() com locale dinâmico via useCountry().intlLocale
• Migrados steps de validação KYC (documentos, endereço, limites, termos, telefone, e-mail, senha) com símbolo de moeda e tipo de doc por país
• Migrada área do usuário (conta, carteira, proteção, segurança) com 26 labels de status antes hardcoded em PT-BR
• Migrados jogos, widgets da home e busca (títulos de seção, filtros, contagens, mensagens de resultado vazio)
• Migrados componentes de gamificação e rotas VIP (torneios, missões, loja, níveis, badges, bônus)
• Adicionados i18nKey nos arquivos de configuração de navegação (header, sidebar, bottomnav, menu horizontal, account-menu)
• Substituídas strings PT-BR hardcoded remanescentes por chamadas t() em validação, senha, sidebar e busca

Pagamentos​

• Implementado módulo completo de depósito e saque com integração a provedores de pagamento: novos componentes de modal (DepositModal, WithdrawModal), seletores de método, inputs de valor, atalhos de quantia e telas de resultado para PIX, SPEI e redirect
• Criado hook usePayments para interação com a API de pagamentos no client-side
• Adicionadas rotas de servidor para operações de pagamento: provedores, depósito, status de depósito, saque, lista de bancos e chave PIX
• Criada store Zustand (payments.ts) para gerenciamento de estado dos modais de pagamento
• Botões de depósito e saque ativados no menu de conta do usuário e na área de header (removidas badges "Em breve")
• Adicionado SDK @cactus-agents/payments ao monorepo core com suporte a: listagem de provedores por moeda, submissão e polling de depósito, saque, gerenciamento de chaves PIX (Brasil) e lista de bancos SPEI (México)
• Publicado pacote @cactus-agents/payments ^0.2.0 no registro; dependência adicionada ao front-web-base

Casino / Jogos​

• Adicionado módulo games/casino com cache, rotas e componentes para suporte ao casino legado
• Integrado serviço de jogos legado (createLegacyGamesFromClient) ao SDK @cactus-agents/games (versão 0.3.0)
• Corrigida ordem da entrada "Megaways" na configuração de home rows legado para exibição correta
• Migrada dependência @cactus-agents/games de referência local para pacote publicado no registro

Wallet​

• Corrigido tratamento de erros na API de rollover: falhas em getRollover() e checkRolloverAccomplished() não impedem mais o retorno dos dados principais da carteira
• Adicionado campo balance ao tipo RealWallet, com conversão de centavos para reais na transformação da resposta da API
• Publicados @cactus-agents/wallet ^0.2.2 (inclui correção do rollover) e atualizada dependência no front-web-base

Auth​

• Melhorados os fluxos de login e registro com suporte a manipulação de cookies no lado do servidor

API / Infra​

• Corrigido createClient para encaminhar automaticamente o header Cookie em todas as requisições server-side, eliminando a necessidade de extração manual por rota

Layout​

• Padronizadas classes de padding e margem (p-4 lg:p-6) em rotas de jogos, debug e área do usuário para layout responsivo consistente
• Ajustada largura padrão do conteúdo e alinhamentos visuais gerais

Acessibilidade​

• Modal agora fecha ao pressionar Enter ou Space na overlay; adicionado role="button" para conformidade com acessibilidade
• Componente Pagination refatorado para tratamento de elipse com maior segurança de tipos

Deploy / CI​

• Pipeline de deploy expandida com suporte ao ambiente demo, além de produção e staging