Renew Subscription › My Subscriptions
๐ŸŽฌ Simulate:

My Subscriptions

Plan / Course Type Start Expiry Status
Premium Yearly Period 2026-01-15 2027-01-15 Active
Intro to Welding Lifetime 2025-11-02 Lifetime Active โ€”
Basic Monthly Period 2025-12-01 2026-04-30 Expired
๐Ÿ”€
Sub-flow invocation
Step 3 invokes SUC-BIL-01 โ€” Checkout via BCEL
After the sub-flow completes it returns to /renew-subscription/
โ†’ Enter Sub-flow
๐Ÿ“ Spec notes โ€” UC-BIL.03 / SCR-BIL.01 (fields, actions, requirements)
Identity
  • Screen: SCR-BIL.01 โ€” Subscription Detail (My Subscriptions)
  • Use case: UC-BIL.03 โ€” Renew Subscription
Brief description

The "My Subscriptions" page for learners โ€” displays all subscriptions of the user, sorted active first, expired last (within grace period). Each card shows product name + type + period + status + expiry; period subscriptions have a "Renew" button (expands inline renew config on that card), lifetime subscriptions have no button (no renewal needed). This page is the entry point for UC-BIL.03 Renew Subscription โ€” click "Renew" to expand qty picker + (optional) switch product then confirm โ†’ invoke SUC-BIL-01.

Fields
  • filter_status "Status" โ€” enum [all, active, expired] ยท default: all ยท always visible
  • row_product_name "Plan / Course" โ€” text ยท lookup ยท always ยท read-only
  • row_product_type "Type" โ€” enum [lifetime, period] ยท lookup ยท always ยท read-only
  • row_started_at "Start" โ€” date ยท lookup ยท always ยท read-only
  • row_expiry_date "Expiry" โ€” date ยท lookup ยท visible when row_product_type != lifetime ยท read-only
  • row_status "Status" โ€” enum [active, expired, revoked] ยท lookup ยท always ยท read-only
  • renew_qty "Renewal Period" โ€” enum (qty_tier from active DiscountRule for this product) ยท required & visible when renew config expanded ยท fallback: ""
  • renew_total_preview "Total (preview)" โ€” computed: Product.price ร— renew_qty โˆ’ (Product.price ร— renew_qty ร— DiscountRule.discount_pct) ยท visible when renew config expanded ยท read-only
Actions
  • apply_filter "Filter" โ€” always enabled
  • renew "Renew" โ€” enabled when status == active OR (status == expired && within grace period) AND type != lifetime ยท triggers UC-BIL.03-M-1
  • confirm_renew "Checkout" โ€” enabled when renew config expanded AND renew_qty != "" ยท invokes SUC-BIL-01 โ†’ /checkout-via-bcel/?returnUrl=/renew-subscription/ ยท triggers UC-BIL.03-M-2
  • cancel_renew "Cancel" โ€” enabled when renew config expanded ยท collapses inline config ยท triggers UC-BIL.03-A-2A-1
  • browse_catalog "Browse Courses" โ€” enabled when subscriptions.count == 0 (empty state only)
Additional requirements
  1. Supports concurrent users per NFR-01 (100โ€“200 peak) [refs: NFR-01]
  2. Usable on connection โ‰ค1 Mbps โ€” list paginate (default 20 cards/page), lazy-load expired subscriptions on a separate page [refs: NFR-02]
  3. TLS 1.2+ during transit; users see only their own subscriptions (server-side filter by session) [refs: NFR-03, NFR-10]
  4. Supports desktop/laptop/tablet/smartphone โ€” card list (responsive, no horizontal scroll) [refs: NFR-08]
  5. WCAG accessibility โ€” card must have proper heading + aria-label (product name + status), expand/collapse renew region uses aria-expanded, qty dropdown has <fieldset>+<legend>, clear focus order [refs: NFR-09]
  6. Empty state when user has no subscriptions โ†’ show message + button to catalog (not an error) [refs: NFR-04]
  7. Lifetime subscription displays "Lifetime" instead of expiry date and does not show a Renew button (UC-BIL.03 covers period subscriptions only) [refs: โ€”]
  8. Renew config expands inline โ€” other cards remain accessible; user can only expand one row at a time (opening a new one auto-closes the previous) to reduce UI confusion [refs: NFR-04]
  9. Total (preview) in Renew config computed from Product.price ร— renew_qty minus discount per the DiscountRule matching the selected qty_tier; displayed before learner clicks Checkout [refs: โ€”]
๐Ÿ“ Reviewer notes (overlay)

Renew panel โ€” total display

Override: Do not show the calculation formula in the renewal total preview. Show only the final total amount (e.g. Total: 10,800 LAK), not the breakdown formula (e.g. 2,000 ร— 6 โˆ’ 10% = 10,800 LAK).

Applies to: initial static display value in each inline renew row ยท dynamic updateRenewTotal() JS function output โ€” always render Total: X LAK regardless of whether a discount applies.

Source: Prototype/screen-notes/renew-subscription/index.md โ€” applied as override layer at generation time