Frontend Components

StatusBanner

Compact status messaging with tone support.

Status

Account Update

Your refill dashboard is ready.

PaymentCard

Due amount summary with method and CTA.

Amount Due

Review details before paying.

Amount

$54.73

Due

3/20/2026

Method

Visa ending 4242

BalanceGauge

Simple percentage indicator with contextual hint.

Remaining data

68%

6.8 of 10 GB left.

ActionStrip

Quick grouped actions for common operations.

Quick Actions

PlansGrid

Plan cards with selectable options and feature lists.

Recommended Plans

Unlimited Plus

$45/mo
  • 15GB hotspot
  • Priority support
  • Streaming bundle

Flex Basic

$30/mo
  • 5GB hotspot
  • No annual contract

CurrentUserBalance

Current refill balance plus plan context.

Current User Balance

Latest account snapshot

Current Balance

$18.50

Auto-refill: Enabled

Account
Your Account
Plan
Unlimited Plus
Due Date
N/A

RefillCreditCard

Preset refill amounts with action dispatch.

Refill Your Credit

Choose an amount to top up now.

AccountSummaryCard

Account overview with compact metadata.

Your Account

Amina Primary Account

Unlimited Plus · Renews in 3 days

  • International texting
  • Priority support
  • 15GB hotspot

TopUpCard

Top-up CTA with payment method summary.

Top Up

Due Soon

Renew Your Plan

Complete payment to continue service.

$49.99

  • CARDVisa ending 4242
  • BANKBank ending 1001

PaymentMethodList

List and selectable mode for saved methods.

Payment Methods

Pick Payment Method

Tap one to continue top-up flow.

Select a method to continue. A UI action is sent on every tap.

AddPaymentMethodModal

Modal flow to add prepaid/debit/credit payment methods.

Payment Methods

Add Payment Method

Use prepaid, debit, or credit cards.

AutoPayPromoCard

Promotional card for auto-pay enrollment.

SAVE 10 PER MONTH

Enable AutoPay

Save each month with automatic payments.

That is 120 saved per year

LoyaltyTrackerCard

Milestone progression with highlighted active step.

Loyalty Tracker

Loyalty Gold

Your Savings Journey

Progress to next discount.

Month 1

Active

Month 3

5 off

Month 6

10 off

RedeemCreditsCard

Credit redemption offer with itemized value list.

Redeem Now

20 CREDIT

You Have Credits

Apply credits on your next refill.

  • ✓Apply 5 credit now
  • ✓Apply 15 credit on next renewal

ProductCard

Upsell/add-on/cross-sell style offer card.

UPSELL

Best Value

Unlimited Premium

Upgrade for extra speed and support.

  • ✓Priority support
  • ✓Premium streaming pass

$60/mo

$70/mo

QuickReply

Pre-filled suggestion chips for quick user prompts.

Quick Reply

TransactionsList

Recent payment and renewal history with balance impact.

Transaction History

Recent Transactions

Latest account activity

  • Payment

    3/10/2026, 10:37:34 PM

    success

    ID: txn_fa770085b9

    Payment accepted

    Amount

    $100.00

    Method

    1111

    Balance Effect

    Credited: $100.00

    Applied To Due: $0.00

    Balance After: $1,022.56

    Due Amount: $5.00

    Due Date: 2026-04-08

  • Payment

    3/10/2026, 10:14:11 PM

    success

    ID: txn_2375f6f384

    Payment accepted

    Amount

    $100.00

    Method

    pm_card_1111

    Balance Effect

    Credited: $100.00

    Applied To Due: $0.00

    Balance After: $922.56

    Due Amount: $5.00

    Due Date: 2026-04-08

  • Plan Renewal

    3/9/2026, 1:43:02 AM

    success

    ID: txn_cadfddc144

    Total Charge

    $113.30

    Plan

    PLAN_PREPAID_BASIC

    Duration

    1 month

    Sales Tax

    $13.30

    Balance Effect

    Deducted: $113.30

    Added To Due: $0.00

    Balance After: $722.56

    Due Amount: $5.00

    Due Date: 2026-04-08