trading-platform/docs/02-definicion-modulos/OQI-005-payments-stripe/historias-usuario/US-PAY-001-ver-planes.md

id	title	type	status	priority	epic	project	story_points	created_date	updated_date
US-PAY-001	Ver Planes Disponibles	User Story	Done	Media	OQI-005	trading-platform	3	2025-12-05	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

---

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:

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

---

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