Pantalla: Gestion de Suscripcion
Identificador: SCR-PAY-006
Nombre: Gestion de Suscripcion
Modulo: MTS-PAY-001 - Pagos y Suscripciones
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
| Atributo |
Valor |
| Tipo |
Dashboard de suscripcion |
| Acceso |
Perfil > Suscripcion, Tab Mas |
| Roles |
Usuarios suscritos |
| Tiers |
Pro, Perfect |
| Prioridad |
Alta |
2. Proposito
Centro de gestion de la suscripcion activa. Muestra estado actual, fecha de renovacion, opciones de upgrade/downgrade y acceso a cancelacion.
3. Wireframe - Suscripcion Activa
+--------------------------------------------------+
| [<] Mi Suscripcion |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [Pro badge grande] | |
| | | |
| | Plan Pro | |
| | Mensual | |
| | | |
| | [check] Activo | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| DETALLES DE FACTURACION |
+--------------------------------------------------+
| |
| Proxima renovacion 5 Ene 2026 |
| Monto $9.99 USD |
| Metodo de pago App Store |
| Suscrito desde 5 Jun 2025 |
| |
+--------------------------------------------------+
| OPCIONES |
+--------------------------------------------------+
| |
| [upgrade-icon] Actualizar a Perfect [>] |
| Mas cuidadores, SMS, seguridad |
| |
| [period-icon] Cambiar periodo [>] |
| Mensual <-> Anual |
| |
| [receipt-icon] Ver recibos [>] |
| Historial de pagos |
| |
| [store-icon] Gestionar en App Store [>] |
| Metodo de pago, familia |
| |
+--------------------------------------------------+
| CANCELAR |
+--------------------------------------------------+
| |
| [cancel-icon] Cancelar suscripcion [>] |
| (texto neutral, no rojo) |
| |
+--------------------------------------------------+
| |
| Tu suscripcion se procesa a traves de |
| App Store. Para cambios de pago, visita |
| Ajustes > [Tu nombre] > Suscripciones. |
| |
+--------------------------------------------------+
4. Wireframe - Trial Activo
+--------------------------------------------------+
| [<] Mi Suscripcion |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [Pro badge] | |
| | | |
| | Plan Pro | |
| | Prueba Gratuita | |
| | | |
| | [clock] Quedan 5 dias | |
| | de 7 | |
| | | |
| | [progress bar 5/7] | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| DETALLES DE LA PRUEBA |
+--------------------------------------------------+
| |
| Inicio de prueba 5 Dic 2025 |
| Fin de prueba 12 Dic 2025 |
| Primer cobro 12 Dic 2025 |
| Monto $9.99 USD |
| |
+--------------------------------------------------+
| AL TERMINAR LA PRUEBA |
+--------------------------------------------------+
| |
| Si decides continuar: |
| - Se cobrara $9.99 automaticamente |
| - Mantendras todas las funciones Pro |
| |
| Si cancelas antes: |
| - No se te cobrara nada |
| - Vuelves al plan Free |
| - Datos sincronizados se mantienen 30 dias |
| |
+--------------------------------------------------+
| |
| [Continuar con Pro] [Cancelar prueba] |
| |
+--------------------------------------------------+
5. Wireframe - Problema de Pago (Grace Period)
+--------------------------------------------------+
| [<] Mi Suscripcion |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [!] PROBLEMA DE PAGO | |
| +--------------------------------------------+ |
| | | |
| | No pudimos procesar tu pago. | |
| | Tu acceso Pro terminara en 14 dias | |
| | si no se resuelve. | |
| | | |
| | [Actualizar metodo de pago] | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| ESTADO ACTUAL |
+--------------------------------------------------+
| |
| Plan Pro |
| Estado Problema de pago |
| Acceso hasta 19 Dic 2025 |
| Ultimo intento de cobro 5 Dic 2025 |
| |
+--------------------------------------------------+
6. Elementos de UI
6.1. Componentes
| ID |
Componente |
Tipo |
Requerido |
| header |
Top App Bar |
CMP-NAV-002 |
Si |
| status_card |
Subscription Status Card |
Custom |
Si |
| billing_section |
Key-Value Section |
Custom |
Si |
| options_list |
Menu Row List |
CMP-LST-002 |
Si |
| cancel_row |
Menu Row |
CMP-LST-002 |
Si |
| footer_info |
Info Text |
- |
Si |
| grace_banner |
Warning Banner |
Custom |
Condicional |
6.2. Status Card Variants
| Estado |
Color |
Badge |
Extra |
| active |
success |
"Activo" |
- |
| trial |
info |
"Prueba" |
Progress bar |
| grace_period |
warning |
"Problema" |
CTA actualizar |
| cancelled |
neutral |
"Cancela [fecha]" |
- |
| expired |
error |
"Expirado" |
CTA reactivar |
7. Estados
7.1. Estados de Suscripcion
| Estado |
Source |
Visual |
| active |
Store webhook |
Badge verde |
| in_trial |
Store webhook |
Countdown + progress |
| grace_period |
Store webhook |
Banner warning |
| cancelled |
Store webhook |
Badge "Cancela el [fecha]" |
| expired |
Store webhook |
Badge rojo + CTA reactivar |
7.2. Cambio de Periodo
Al tap "Cambiar periodo":
- Redirigir a Store (gestionado por Apple/Google)
- Mostrar instrucciones especificas por plataforma
8. Interacciones
8.1. Navegacion
| Tap |
Destino |
| Actualizar a Perfect |
SCR-PAY-003 |
| Cambiar periodo |
Store subscription management |
| Ver recibos |
Lista de recibos (Store) |
| Gestionar en Store |
App Store / Google Play settings |
| Cancelar suscripcion |
SCR-PAY-007 |
8.2. Deep Link a Store
iOS: App-Prefs:root=STORE&path=SUBSCRIPTIONS
Android: market://account/subscriptions
9. Recibos
9.1. Lista de Recibos
+--------------------------------------------------+
| Recibos |
+--------------------------------------------------+
| |
| 5 Dic 2025 $9.99 USD |
| Plan Pro - Mensual |
| |
| 5 Nov 2025 $9.99 USD |
| Plan Pro - Mensual |
| |
| 5 Oct 2025 $9.99 USD |
| Plan Pro - Mensual |
| |
| [Ver mas] |
| |
+--------------------------------------------------+
Nota: Los recibos detallados estan en el Store.
10. Accesibilidad
10.1. Screen Reader
| Elemento |
Label |
Hint |
| status_card |
"Plan [nombre], estado [estado]" |
- |
| trial_progress |
"[dias] dias restantes de prueba" |
- |
| billing_row |
"[label]: [valor]" |
- |
| option_row |
"[titulo], [descripcion]" |
"Toca para [accion]" |
| grace_banner |
"Atencion: problema de pago" |
"Actualiza tu metodo de pago" |
11. Eventos de Analytics
| Evento |
Trigger |
Parametros |
| subscription_management_viewed |
Abrir pantalla |
plan, status |
| upgrade_option_tapped |
Tap upgrade |
current_plan |
| period_change_tapped |
Tap cambiar periodo |
current_period |
| receipts_viewed |
Tap ver recibos |
- |
| store_management_opened |
Tap gestionar Store |
- |
| cancel_initiated |
Tap cancelar |
tenure_days |
12. Casos de Prueba
| ID |
Caso |
Resultado Esperado |
| TC-001 |
Suscripcion activa |
Badge verde "Activo" |
| TC-002 |
En trial |
Countdown visible |
| TC-003 |
Grace period |
Banner warning |
| TC-004 |
Tap upgrade |
Navega a detalle Perfect |
| TC-005 |
Tap gestionar Store |
Abre Store settings |
| TC-006 |
Expirada |
Badge rojo + CTA reactivar |
13. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)