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