trading-platform/orchestration/tareas/_archive/2026-01/TASK-2026-01-25-OQI-005-PAYMENTS-ADVANCED/02-ANALISIS.md
Adrian Flores Cortes df43dd90cb [F0-F2] feat: Coherence analysis baseline + entity types + frontend stores
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>
2026-01-28 22:08:04 -06:00

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 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