# 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