930c3bec75
- Add 01-CONTEXTO.md, 02-ANALISIS.md, 03-PLANEACION.md, 04-VALIDACION.md - Update _INDEX.yml with complete CAPVED file list - Update ET-PAY-005-frontend.md with new components section - Update TRACEABILITY.yml with frontend implementation status Full SIMCO compliance achieved for TASK-2026-01-25-OQI-005-PAYMENTS-ADVANCED Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
161 lines
5.3 KiB
Markdown
161 lines
5.3 KiB
Markdown
# 02-ANALISIS.md - OQI-005 Payments Advanced Components
|
|
|
|
## Analisis de Comportamiento Esperado
|
|
|
|
### StripeElementsWrapper
|
|
**Comportamiento:**
|
|
- Envuelve la aplicación con Stripe Elements Provider
|
|
- Carga el SDK de Stripe.js de forma lazy
|
|
- Proporciona configuración de apariencia (stripe, night, flat)
|
|
- Expone HOC `withStripeElements` para envolver componentes
|
|
- Expone hook `useStripeAvailable` para verificar disponibilidad
|
|
|
|
**Inputs:**
|
|
- `config.publicKey`: Clave pública de Stripe
|
|
- `config.locale`: Idioma (en, es, auto)
|
|
- `config.appearance`: Tema visual
|
|
|
|
**Outputs:**
|
|
- Provider con contexto de Stripe
|
|
- Componentes hijos con acceso a Elements
|
|
|
|
### InvoicePreview
|
|
**Comportamiento:**
|
|
- Muestra desglose itemizado de la factura
|
|
- Calcula subtotal, descuentos, impuestos, total
|
|
- Soporta múltiples tipos de descuento (% o fijo)
|
|
- Muestra período de facturación
|
|
- Botones de acción configurables
|
|
|
|
**Inputs:**
|
|
- `data`: InvoicePreviewData con items, descuentos, impuestos
|
|
- `onConfirm/onCancel`: Callbacks de acción
|
|
- `showActions`: Mostrar/ocultar botones
|
|
|
|
**Outputs:**
|
|
- Vista renderizada de factura
|
|
- Eventos de confirmación/cancelación
|
|
|
|
### RefundRequestModal
|
|
**Comportamiento:**
|
|
- Verifica elegibilidad de reembolso
|
|
- Permite seleccionar razón predefinida
|
|
- Permite reembolso parcial o total
|
|
- Valida monto contra máximo permitido
|
|
- Requiere explicación textual
|
|
|
|
**Inputs:**
|
|
- `eligibility`: Datos de elegibilidad
|
|
- `transactionId/Amount/Date`: Datos de transacción
|
|
- `onSubmit`: Callback con RefundRequestData
|
|
|
|
**Outputs:**
|
|
- Modal interactivo
|
|
- RefundRequestData al enviar
|
|
|
|
### RefundList
|
|
**Comportamiento:**
|
|
- Lista paginada de reembolsos
|
|
- Filtro por estado (pending, processing, completed, failed, cancelled)
|
|
- Badge de estado con colores semánticos
|
|
- Click para ver detalles
|
|
- Navegación de páginas
|
|
|
|
**Inputs:**
|
|
- `refunds`: Array de Refund
|
|
- `totalCount/currentPage/pageSize`: Paginación
|
|
- `onPageChange/onStatusFilter/onRefundClick`: Callbacks
|
|
|
|
**Outputs:**
|
|
- Lista renderizada con paginación
|
|
- Eventos de navegación y filtrado
|
|
|
|
---
|
|
|
|
## Analisis de Capas Impactadas
|
|
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ FRONTEND │
|
|
├─────────────────────────────────────────────┤
|
|
│ components/payments/ │
|
|
│ ├── StripeElementsWrapper.tsx [NUEVO] │
|
|
│ ├── InvoicePreview.tsx [NUEVO] │
|
|
│ ├── RefundRequestModal.tsx [NUEVO] │
|
|
│ ├── RefundList.tsx [NUEVO] │
|
|
│ └── index.ts [MODIFICADO]
|
|
├─────────────────────────────────────────────┤
|
|
│ Dependencias: │
|
|
│ @stripe/react-stripe-js │
|
|
│ @stripe/stripe-js │
|
|
│ lucide-react │
|
|
└─────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Analisis de Dependencias
|
|
|
|
### Dependencias Externas
|
|
| Paquete | Version | Uso |
|
|
|---------|---------|-----|
|
|
| @stripe/react-stripe-js | ^2.x | Elements Provider |
|
|
| @stripe/stripe-js | ^2.x | Stripe SDK |
|
|
| lucide-react | ^0.x | Iconos |
|
|
| react | ^18.x | Framework |
|
|
|
|
### Dependencias Internas
|
|
| Componente | Ubicación | Relación |
|
|
|------------|-----------|----------|
|
|
| WalletCard | components/payments/ | Relacionado |
|
|
| TransactionHistory | components/payments/ | Relacionado |
|
|
| PaymentMethodForm | components/payments/ | Debe migrar a usar StripeElements |
|
|
|
|
### Componentes que Dependerán
|
|
- `pages/payments/checkout.tsx` - Usará InvoicePreview + StripeElements
|
|
- `pages/payments/refunds.tsx` - Usará RefundList + RefundRequestModal
|
|
- `pages/settings/billing.tsx` - Usará StripeElements
|
|
|
|
---
|
|
|
|
## Analisis de Riesgos
|
|
|
|
| Riesgo | Probabilidad | Impacto | Mitigación |
|
|
|--------|--------------|---------|------------|
|
|
| API Key expuesta | Baja | Alto | Usar solo public key en frontend |
|
|
| Stripe SDK no carga | Media | Alto | Hook useStripeAvailable para fallback |
|
|
| Formato moneda incorrecto | Baja | Medio | Usar Intl.NumberFormat |
|
|
| Estado de refund desactualizado | Media | Medio | Polling o websocket |
|
|
|
|
---
|
|
|
|
## Analisis de Patrones Existentes
|
|
|
|
### Patrones Identificados en Codebase
|
|
1. **Iconos:** lucide-react para payments, heroicons para education
|
|
2. **Colores:** Dark theme (slate-800/900, border-slate-700)
|
|
3. **Exports:** default export + named type exports
|
|
4. **State:** useState, useMemo, useCallback
|
|
5. **Props:** TypeScript interfaces con JSDoc
|
|
|
|
### Patrones Aplicados
|
|
- Seguir lucide-react para consistencia con payments
|
|
- Mantener dark theme con slate colors
|
|
- Exportar tipos nombrados para uso externo
|
|
- Optimización con useMemo/useCallback
|
|
|
|
---
|
|
|
|
## Conclusion del Analisis
|
|
|
|
**Viabilidad:** ALTA
|
|
- Componentes bien definidos con responsabilidades claras
|
|
- Dependencias disponibles y maduras
|
|
- Patrones establecidos en codebase
|
|
- Sin breaking changes a componentes existentes
|
|
|
|
**Complejidad:** MEDIA
|
|
- Integración con SDK externo (Stripe)
|
|
- Múltiples estados y validaciones
|
|
- Tipado TypeScript completo requerido
|