---
id: "US-PAY-001"
title: "Ver Planes Disponibles"
type: "User Story"
status: "Done"
priority: "Media"
epic: "OQI-005"
project: "trading-platform"
story_points: 3
created_date: "2025-12-05"
updated_date: "2026-01-04"
---

# US-PAY-001: Ver Planes Disponibles

**Version:** 1.0.0
**Fecha:** 2025-12-05
**Estado:** ✅ Implementado
**Story Points:** 2
**Prioridad:** P0 (Crítica)
**Épica:** [OQI-005](../_MAP.md)

---

## Historia de Usuario

**Como** visitante o usuario registrado de Trading Platform
**Quiero** ver los diferentes planes de suscripción disponibles con sus características y precios
**Para** decidir cuál plan se adapta mejor a mis necesidades de trading

---

## Criterios de Aceptación

### AC-001: Página de Pricing

**Dado** que estoy en la página de pricing
**Cuando** veo los planes disponibles
**Entonces** debería ver:
- Plan Free con sus características
- Plan Basic ($19/mes) con sus características
- Plan Pro ($49/mes) con sus características
- Plan Premium ($99/mes) con sus características
- Cada plan claramente diferenciado visualmente
- Badge de "Más Popular" en plan Pro

### AC-002: Características por Plan

**Dado** que estoy revisando los planes
**Cuando** veo las características de cada plan
**Entonces** debería ver claramente:

**Free:**
- Predicciones básicas (5/día)
- 3 cursos introductorios
- Gráficos básicos
- Comunidad

**Basic ($19/mes):**
- ✅ Todo lo de Free
- Predicciones básicas ilimitadas
- Todos los cursos básicos
- Soporte por email

**Pro ($49/mes):**
- ✅ Todo lo de Basic
- Predicciones avanzadas con IA
- Todos los cursos (básicos + avanzados)
- Indicadores técnicos premium
- Alertas personalizadas
- Badge "Más Popular"

**Premium ($99/mes):**
- ✅ Todo lo de Pro
- Análisis personalizados
- Soporte prioritario
- Sesiones 1-on-1 mensuales
- Acceso anticipado a nuevas features

### AC-003: Comparación de Planes

**Dado** que estoy decidiendo entre planes
**Cuando** veo la tabla comparativa
**Entonces** debería ver una matriz de características con checkmarks/X para cada plan

### AC-004: Call to Action

**Dado** que he decidido un plan
**Cuando** hago click en el botón del plan
**Entonces** debería:
- Si estoy logueado → Ir a checkout de suscripción
- Si NO estoy logueado → Ir a registro con plan preseleccionado

### AC-005: Trial Period Destacado

**Dado** que veo los planes Pro y Premium
**Cuando** reviso los detalles
**Entonces** debería ver claramente:
- Badge "7 días gratis" en planes Pro y Premium
- Nota: "Cancela cuando quieras"
- Sin cargo durante trial

### AC-006: FAQ de Planes

**Dado** que tengo dudas sobre los planes
**Cuando** scroll a la sección de preguntas frecuentes
**Entonces** debería ver respuestas a:
- ¿Puedo cambiar de plan después?
- ¿Puedo cancelar en cualquier momento?
- ¿Los precios incluyen impuestos?
- ¿Qué métodos de pago aceptan?
- ¿Hay descuento por pago anual?

### AC-007: Plan Actual (Usuario Logueado)

**Dado** que estoy logueado y tengo una suscripción activa
**Cuando** veo la página de pricing
**Entonces** debería:
- Ver badge "Plan Actual" en mi plan
- Botón "Gestionar Suscripción" en lugar de "Suscribirse"
- Opción de upgrade/downgrade en otros planes

---

## Mockup

```
┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│                      Elige el plan perfecto para ti                    │
│                    Cancela o cambia de plan cuando quieras              │
│                                                                         │
├─────────────┬─────────────┬─────────────────┬─────────────────────────┤
│    Free     │    Basic    │      Pro        │        Premium          │
│             │             │  [MÁS POPULAR]  │                         │
├─────────────┼─────────────┼─────────────────┼─────────────────────────┤
│   $0/mes    │  $19/mes    │    $49/mes      │       $99/mes           │
│             │             │ 7 días gratis   │    7 días gratis        │
├─────────────┼─────────────┼─────────────────┼─────────────────────────┤
│ ✅ 5 predic/│ ✅ Prediccio│ ✅ Todo de Basic│  ✅ Todo de Pro         │
│    día      │   nes ilim. │ ✅ Predicciones │  ✅ Análisis            │
│ ✅ 3 cursos │ ✅ Cursos   │    avanzadas IA │     personalizados      │
│ ✅ Gráficos │    básicos  │ ✅ Todos cursos │  ✅ Soporte prioritario │
│    básicos  │ ✅ Soporte  │ ✅ Indicadores  │  ✅ Sesiones 1-on-1     │
│ ✅ Comunidad│    email    │    técnicos     │     mensuales           │
│             │             │ ✅ Alertas      │  ✅ Early access        │
│             │             │    personalizad.│                         │
├─────────────┼─────────────┼─────────────────┼─────────────────────────┤
│ [Comienza  ]│ [Suscribir-]│ [Suscribirme]   │ [Suscribirme]           │
│  gratis     │    me       │                 │                         │
└─────────────┴─────────────┴─────────────────┴─────────────────────────┘

                    ¿Necesitas un plan empresarial?
                      [Contactar Ventas]


────────────────── Comparación Detallada ──────────────────

┌──────────────────────────┬──────┬───────┬──────┬─────────┐
│ Característica           │ Free │ Basic │ Pro  │ Premium │
├──────────────────────────┼──────┼───────┼──────┼─────────┤
│ Predicciones básicas     │ 5/día│   ∞   │  ∞   │    ∞    │
│ Predicciones avanzadas IA│  ❌  │   ❌  │  ✅  │   ✅    │
│ Cursos básicos           │  3   │   ∞   │  ∞   │    ∞    │
│ Cursos avanzados         │  ❌  │   ❌  │  ✅  │   ✅    │
│ Gráficos TradingView     │  ✅  │   ✅  │  ✅  │   ✅    │
│ Indicadores técnicos     │  ❌  │   ❌  │  ✅  │   ✅    │
│ Alertas personalizadas   │  ❌  │   ❌  │  ✅  │   ✅    │
│ Paper trading            │  ❌  │   ❌  │  ✅  │   ✅    │
│ Análisis personalizados  │  ❌  │   ❌  │  ❌  │   ✅    │
│ Soporte                  │ Comu │ Email │Email │Priority │
│ Sesiones 1-on-1          │  ❌  │   ❌  │  ❌  │  1/mes  │
└──────────────────────────┴──────┴───────┴──────┴─────────┘


────────────────── Preguntas Frecuentes ──────────────────

❓ ¿Puedo cambiar de plan después?
Sí, puedes hacer upgrade o downgrade en cualquier momento.

❓ ¿Puedo cancelar cuando quiera?
Sí, cancela con un click. Sin compromisos ni penalizaciones.

❓ ¿Los precios incluyen impuestos?
Los precios no incluyen IVA (varía según tu país).

❓ ¿Qué métodos de pago aceptan?
Tarjetas de crédito/débito (Visa, Mastercard, Amex) y wallet interno.

❓ ¿Hay descuento por pago anual?
Próximamente ofreceremos planes anuales con 20% de descuento.
```

---

## Notas Técnicas

### Frontend

- Componente: `apps/frontend/src/pages/Pricing.tsx`
- Fetch planes desde backend: `GET /api/v1/payments/plans`
- Detectar plan actual del usuario desde JWT claims
- Animaciones sutiles en hover de cards
- Responsive: stack vertical en mobile

### Backend

- Endpoint: `GET /api/v1/payments/plans`
- Response:
```json
{
  "plans": [
    {
      "id": "free",
      "name": "Free",
      "price": 0,
      "currency": "USD",
      "interval": "month",
      "stripePriceId": null,
      "features": [
        "5 predicciones básicas/día",
        "3 cursos introductorios",
        "Gráficos básicos",
        "Comunidad"
      ],
      "limits": {
        "predictions_basic": 5,
        "courses_basic": 3
      }
    },
    {
      "id": "basic",
      "name": "Basic",
      "price": 19,
      "currency": "USD",
      "interval": "month",
      "stripePriceId": "price_1Sb3k64dPtEGmLmpeAdxvmIu",
      "features": [...],
      "limits": {...}
    },
    ...
  ]
}
```

### Database

- Planes hardcodeados en config (no en DB)
- Price IDs desde environment variables
- Features cargados desde `config/plans.ts`

### SEO

- Meta title: "Planes y Precios - Trading Platform"
- Meta description: "Elige el plan perfecto para tu trading. Desde gratis hasta $99/mes con análisis personalizados."
- Schema markup: `offers` para planes

---

## Dependencias

- Ninguna (página estática con datos de config)

---

## Requerimientos Relacionados

- [RF-PAY-001: Sistema de Planes y Suscripciones](../requerimientos/RF-PAY-001-suscripciones.md)

---

## Tareas Técnicas

### Frontend
- [ ] Crear componente `PricingCard` reutilizable
- [ ] Implementar tabla comparativa responsive
- [ ] Agregar sección FAQ con acordeón
- [ ] Detectar plan actual del usuario
- [ ] Agregar analytics tracking (plan_viewed, plan_clicked)

### Backend
- [ ] Endpoint `GET /api/v1/payments/plans`
- [ ] Configurar Price IDs en environment
- [ ] Documentar estructura de planes en config

### Testing
- [ ] Usuario ve 4 planes claramente diferenciados
- [ ] Plan actual se marca correctamente si usuario logueado
- [ ] Click en plan redirige a checkout/registro según auth
- [ ] Página es responsive en mobile/tablet/desktop
