feat: Adição de novos steps e mudanças de estilização seguindo os padrões do figma #1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive redesign of the payment widget interface following Figma design specifications, introducing new validation steps, modernized UI components, and improved user experience. The changes include renaming components to kebab-case, adding new credit card brand icons, implementing identity validation flows, and updating the color scheme to match the new design system.
Key Changes
- Migration of all step components from PascalCase to kebab-case naming convention
- Addition of 6 new credit card brand SVG icons (Visa, Mastercard, Amex, Diners, Elo, Hipercard)
- Implementation of new validation steps: token validation, QR code identity validation, and their result screens
- Replacement of
merchantIdwithorderIdthroughout the codebase for better semantic clarity - Introduction of new UI components (Combobox, Dialog, Command, OTP, Password Toggler, Popover, QR Code)
- Updated theme colors and styling following Figma specifications
Reviewed Changes
Copilot reviewed 76 out of 77 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/index.ts | Changed merchantId to orderId, added new widget steps and option types |
| src/utils/masks.ts | Updated phone and expiry date masks to support longer formats |
| src/schemas/validation.ts | Replaced CPF/income validation with password validation, updated field structure |
| src/components/ui/*.tsx | Added 8 new UI components for enhanced user interactions |
| src/components/steps/*.tsx | Migrated 10+ step components to kebab-case, added 4 new validation steps |
| src/components/icons/*.tsx | Added 6 credit card brand icon components |
| src/styles/widget.css | Updated color scheme and added new CSS variables |
| docs/*.md | Updated documentation to reflect orderId naming change |
| public/examples/*.html | Updated all examples with new configuration and formatting |
Comments suppressed due to low confidence (1)
src/components/ui/command.tsx:1
- The class string starts with ':data-[slot=command-input-wrapper]' which appears to be a typo. The '' selector is likely meant to be a different CSS selector pattern.
"use client"
Rellyso
approved these changes
Oct 22, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎨 Nova Interface de Pagamento: Steps Redesenhados e Experiência Aprimorada
📊 Resumo das Alterações
Esta PR introduz uma refatoração completa da interface do widget de pagamento, com 45 arquivos modificados e melhorias significativas na experiência do usuário e organização do código.
✨ Principais Melhorias
🔄 Reestruturação dos Steps
PaymentFormStep→payment-form-step.tsxCreditAnalysisStep→credit-analysis-step.tsxAddressFormStep→address-form-step.tsx💳 Sistema de Cartões de Crédito Aprimorado
🆕 Novos Componentes e Funcionalidades
🔐 Validação de Identidade
qr-code-identity-validation-step.tsx- Validação via QR Codeidentity-validation-result-step.tsx- Resultado da validaçãotoken-validation-step.tsx- Validação por tokentoken-result-step.tsx- Resultado da tokenização🎯 Componentes UI Modernos
combobox.tsx- Seleção avançada com buscacommand.tsx- Interface de comandodialog.tsx- Modais aprimoradosotp.tsx- Entrada de código OTPpassword-toggler.tsx- Alternador de senhapopover.tsx- Pop-overs interativosqr-code.tsx- Gerador de QR Codes🎨 Melhorias Visuais e de Tema
🎨 Nova Paleta de Cores
widget.css📱 Responsividade Aprimorada
📚 Documentação Expandida
📖 Novos Guias
GUIA-SDK-NPM.md(621 linhas) - Guia completo do SDK NPMGUIA-USO-CLIENTE.md(748 linhas) - Manual do clienteREADME-SDK.md(458 linhas) - Documentação técnica do SDK🔧 Atualizações de Configuração
merchantIdparaorderIdem toda documentação⚙️ Melhorias Técnicas
📦 Novas Dependências
{ "@fontsource-variable/inter": "^5.2.8", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-popover": "^1.1.15", "cmdk": "^1.1.1", "input-otp": "^1.4.2", "qrcode.react": "^4.2.0" }🏗️ Hooks Customizados
use-address-form.ts- Gerenciamento de formulário de endereçouse-widget-form.ts🔒 Validação Aprimorada
🚀 Impacto no Usuário
✅ Benefícios Imediatos
🎨 Experiência Visual
📁 Arquivos Principais Modificados
🔍 Ver lista completa de alterações
🔧 Core Components
src/components/payment-widget.tsx- Widget principalsrc/components/payment-modal.tsx- Modal de pagamentosrc/components/theme-provider.tsx- Provedor de tema📝 Steps (10 componentes)
🎨 UI Components (8 novos)
📖 Documentação (14 arquivos)
🧪 Exemplos (12 arquivos)
🔍 Como Testar
Clone e instale dependências:
Execute o ambiente de desenvolvimento:
Teste os exemplos:
/examples/Verifique a documentação:
/docs/🎯 Próximos Passos
Após merge desta PR:
📸 Screenshots