--- id: US-MKT-004 title: Activar Visualizacion Premium type: user-story status: Draft priority: High epic: OQI-009 project: trading-platform version: 1.0.0 dates: created: 2026-01-04 updated: 2026-01-04 tags: - marketplace - visualization - charts - premium - user-story story_points: 8 sprint: TBD assignee: TBD --- # US-MKT-004: Activar Visualizacion Premium ## Historia de Usuario **Como** trader que utiliza los graficos de la plataforma **Quiero** activar el addon de visualizacion premium **Para** acceder a indicadores ML exclusivos y herramientas avanzadas de analisis ## Descripcion El usuario puede suscribirse al addon de Visualizacion Premium para desbloquear indicadores ML exclusivos (Range Predictor, AMD Detector, Signal Overlay), backtesting visual ilimitado, alertas avanzadas y layouts multi-chart. ## Criterios de Aceptacion ### AC-001: Ver Oferta Premium ```gherkin Given soy usuario con plan Free When accedo a la seccion de Charts Then veo banner promocional de Visualizacion Premium And veo indicadores bloqueados con icono de candado When hago click en "Ver Premium" Then veo detalle de la oferta: | caracteristica | free | premium | | Indicadores basicos | Si | Si | | Indicadores ML | No | Si | | Backtesting | 30 dias | Ilimitado | | Alertas | 3 | Ilimitadas| | Multi-chart | No | 4 charts | | Layouts guardados | 1 | Ilimitados| | Precio | $0 | $19/mes | ``` ### AC-002: Suscribirse a Premium ```gherkin Given estoy viendo la oferta Premium When hago click en "Suscribirse - $19/mes" Then veo resumen de suscripcion: | campo | valor | | Producto | Visualizacion Premium| | Precio | $19.00/mes USD | | Renovacion | Automatica mensual | | Primer cobro | Hoy | And confirmo el pago And mi suscripcion se activa inmediatamente ``` ### AC-003: Acceder a Indicadores ML ```gherkin Given tengo Premium activo When accedo a la lista de indicadores Then veo indicadores ML desbloqueados: | indicador | descripcion | | Range Predictor | Predice rangos de precio | | AMD Detector | Detecta patrones AMD | | Signal Overlay | Muestra senales en el grafico | | Smart Money | Rastrea movimientos grandes | And puedo agregar cualquiera al chart ``` ### AC-004: Usar Range Predictor ```gherkin Given tengo Premium activo When agrego Range Predictor al chart Then veo: | elemento | descripcion | | Bandas proyectadas | High/Low esperados 4-24h | | Colores | Verde (probable), Rojo (riesgo)| | Panel de stats | Probabilidades numericas | And puedo configurar timeframe de prediccion ``` ### AC-005: Usar AMD Detector ```gherkin Given tengo Premium activo When agrego AMD Detector al chart Then veo: | elemento | descripcion | | Fase actual | A/M/D con color | | Zonas marcadas | Areas de interes | | Alertas de cambio | Notificacion de transicion | And puedo ver historial de detecciones ``` ### AC-006: Ejecutar Backtesting ```gherkin Given tengo Premium activo When accedo a "Backtesting" Then puedo configurar: | parametro | opciones | | Estrategia | AMD + Signals, Custom | | Periodo | Sin limite | | Capital inicial | $1,000 - $1,000,000 | | Par | Cualquier disponible | When ejecuto el backtest Then veo resultados en el grafico And veo panel de estadisticas And puedo exportar resultados ``` ### AC-007: Crear Alertas Avanzadas ```gherkin Given tengo Premium activo When creo una alerta Then puedo configurar: | campo | opciones | | Indicador | Cualquier ML | | Condicion | Multiples condiciones | | Combinacion | AND/OR entre condiciones | | Notificacion | Push, Email, SMS | | Frecuencia | Una vez, Cada vez | And no tengo limite de alertas activas ``` ### AC-008: Configurar Multi-Chart ```gherkin Given tengo Premium activo When accedo a "Multi-Chart" Then puedo crear layout de hasta 4 charts And puedo asignar diferentes pares a cada uno And el scroll/zoom esta sincronizado And puedo guardar el layout con nombre ``` ### AC-009: Guardar Layouts ```gherkin Given tengo Premium activo And he configurado un layout personalizado When hago click en "Guardar Layout" Then puedo nombrar el layout And se guarda con todos mis indicadores y configuracion And puedo crear layouts ilimitados And puedo establecer uno como default ``` ### AC-010: Degradacion al Cancelar ```gherkin Given tengo Premium activo When cancelo mi suscripcion Then mantengo acceso hasta fin del periodo pagado And despues: | caracteristica | resultado | | Indicadores ML | Se ocultan del chart | | Backtesting | Limitado a 30 dias | | Alertas | Solo primeras 3 activas | | Multi-chart | Se muestra solo 1 | | Layouts | Solo puedo usar 1 | And veo mensaje invitando a reactivar ``` ## Mockups ### Banner Promocional ``` +----------------------------------------------------------+ | +------------------------------------------------------+ | | | DESBLOQUEA VISUALIZACION PREMIUM | | | | Indicadores ML exclusivos + Backtesting ilimitado | | | | $19/mes [ACTIVAR AHORA] | | | +------------------------------------------------------+ | +----------------------------------------------------------+ ``` ### Comparativa de Planes ``` +----------------------------------------------------------+ | VISUALIZACION PREMIUM | +----------------------------------------------------------+ | | | +------------------------+ +------------------------+ | | | FREE | | PREMIUM | | | +------------------------+ +------------------------+ | | | Indicadores basicos | | Indicadores basicos | | | | * SMA, EMA, RSI | | * SMA, EMA, RSI | | | | * MACD, Bollinger | | * MACD, Bollinger | | | | | | | | | | Indicadores ML | | Indicadores ML | | | | X Bloqueados | | * Range Predictor | | | | | | * AMD Detector | | | | | | * Signal Overlay | | | | | | * Smart Money | | | | | | | | | | Backtesting: 30 dias | | Backtesting: Ilimitado | | | | Alertas: 3 | | Alertas: Ilimitadas | | | | Multi-chart: No | | Multi-chart: 4 | | | | Layouts: 1 | | Layouts: Ilimitados | | | | | | | | | | $0 | | $19/mes | | | | | | | | | | [PLAN ACTUAL] | | [SUSCRIBIRSE] | | | +------------------------+ +------------------------+ | | | +----------------------------------------------------------+ ``` ### Indicadores ML en Chart ``` +----------------------------------------------------------+ | BTC/USDT 4H | Indicadores: [+Agregar] | +----------------------------------------------------------+ | [Price Chart con velas] | | | | ==================== Range Predictor =================== | | [Bandas verdes mostrando rango proyectado] | | High esperado: $43,200 (72% prob) | | Low esperado: $41,800 (68% prob) | | | | ===================== AMD Detector ===================== | | Fase actual: ACCUMULATION | | [Zonas marcadas en verde] | | | | ==================== Signal Overlay ==================== | | [Flechas de BUY/SELL con SL/TP] | | Ultima senal: BUY @ $42,150 (87% conf) | | | +----------------------------------------------------------+ | Panel: Win Rate 67% | Profit Factor 2.1 | Sharpe 1.8 | +----------------------------------------------------------+ ``` ## Flujo de Usuario ```mermaid flowchart TD A[Usuario en Charts] --> B{Tiene Premium?} B -->|No| C[Ver indicadores bloqueados] C --> D[Click en Premium] D --> E[Ver comparativa] E --> F[Suscribirse] F --> G{Pago OK?} G -->|No| F G -->|Si| H[Premium Activo] B -->|Si| H H --> I[Usar indicadores ML] H --> J[Backtesting ilimitado] H --> K[Alertas avanzadas] H --> L[Multi-chart] ``` ## Notas Tecnicas ### Verificacion de Suscripcion ```typescript // Middleware para verificar premium async function requirePremiumVisualization(userId: string) { const subscription = await getActiveSubscription(userId, 'visualization_premium'); if (!subscription || subscription.status !== 'active') { throw new ForbiddenError('Premium visualization required'); } return subscription; } // Hook en frontend function usePremiumVisualization() { const { user } = useAuth(); const { data: subscription } = useQuery(['visualization-subscription', user.id]); return { isPremium: subscription?.status === 'active', expiresAt: subscription?.expiresAt, canUseIndicator: (indicatorId: string) => { const premiumIndicators = ['ml_range_predictor', 'ml_amd_detector', 'ml_signal_overlay', 'ml_smart_money']; return !premiumIndicators.includes(indicatorId) || subscription?.status === 'active'; } }; } ``` ### Carga de Indicadores ```typescript // Registro condicional de indicadores function registerIndicators(chartEngine: ChartEngine, isPremium: boolean) { // Basicos - siempre disponibles chartEngine.registerIndicator(new SMAIndicator()); chartEngine.registerIndicator(new EMAIndicator()); chartEngine.registerIndicator(new RSIIndicator()); // Premium - solo si tiene suscripcion if (isPremium) { chartEngine.registerIndicator(new RangePredictorIndicator()); chartEngine.registerIndicator(new AMDDetectorIndicator()); chartEngine.registerIndicator(new SignalOverlayIndicator()); chartEngine.registerIndicator(new SmartMoneyIndicator()); } } ``` ### API Endpoints - `GET /api/visualization/subscription` - Estado de suscripcion - `POST /api/visualization/subscribe` - Crear suscripcion - `DELETE /api/visualization/subscribe` - Cancelar suscripcion - `GET /api/visualization/indicators` - Listar indicadores - `POST /api/visualization/layouts` - Guardar layout - `GET /api/visualization/layouts` - Listar layouts - `POST /api/visualization/alerts` - Crear alerta ## Definicion de Done - [ ] Banner promocional visible para usuarios Free - [ ] Comparativa de planes clara - [ ] Flujo de suscripcion funcional - [ ] Indicadores ML renderizados correctamente - [ ] Backtesting sin limite para Premium - [ ] Sistema de alertas avanzadas - [ ] Multi-chart funcional y sincronizado - [ ] Guardado de layouts ilimitado - [ ] Degradacion graceful al expirar - [ ] Tests unitarios y E2E ## Dependencias - **RF-MKT-004**: Requerimiento de visualizacion - **OQI-003-trading-charts**: Motor de graficos base - **OQI-004-payments**: Suscripciones ## Referencias - [RF-MKT-004: Visualizacion](../requerimientos/RF-MKT-004-visualizacion.md) - [ET-MKT-001: Database](../especificaciones/ET-MKT-001-database.md)