FASE 0 - Preparación y Purga: - Archived 21 completed tasks to _archive/2026-01/ - Marked 4 docs as DEPRECATED - Created 3 baseline coherence reports FASE 1 - DDL-Backend Coherence: - audit.types.ts: +4 types (SystemEvent, TradingAudit, ApiRequestLog, DataAccessLog) - investment.types.ts: +4 types (RiskQuestionnaire, WithdrawalRequest, DailyPerformance, DistributionHistory) - entity.types.ts: +5 types (Symbol, TradingBot, TradingSignal, TradingMetrics, PaperBalance) FASE 2 - Backend-Frontend Coherence: - investmentStore.ts: New Zustand store with 20+ actions - mlStore.ts: New Zustand store with signal caching - alerts.service.ts: New service with 15 functions FASE 3 - Documentation: - OQI-009: Updated to 100% coverage, added ET-MKT-004-productos.md - OQI-010: Created full structure (STATUS.md, ROADMAP-MT4.md, ET-MT4-001-gateway.md) Coherence Baseline Established: - DDL-Backend: 31% (target 95%) - Backend-Frontend: 72% (target 85%) - Global: 39.6% (target 90%) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
5.3 KiB
5.3 KiB
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
withStripeElementspara envolver componentes - Expone hook
useStripeAvailablepara verificar disponibilidad
Inputs:
config.publicKey: Clave pública de Stripeconfig.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, impuestosonConfirm/onCancel: Callbacks de acciónshowActions: 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 elegibilidadtransactionId/Amount/Date: Datos de transacciónonSubmit: 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 RefundtotalCount/currentPage/pageSize: PaginaciónonPageChange/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 + StripeElementspages/payments/refunds.tsx- Usará RefundList + RefundRequestModalpages/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
- Iconos: lucide-react para payments, heroicons para education
- Colores: Dark theme (slate-800/900, border-slate-700)
- Exports: default export + named type exports
- State: useState, useMemo, useCallback
- 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