Assist_Design/docs/operations/subscription-management.md
barsa 87fa789fce Add Account and Auth API Services with Profile Management
- Introduced `accountService` for managing user profiles, including fetching and updating profile and address information.
- Created `auth.store` to handle client-side authentication state, including login, signup, and session management.
- Added centralized exports for authentication services in `auth/api/index.ts`.
- Implemented API services for billing and checkout functionalities, enhancing the overall service architecture.
- Established a new structure for service APIs, promoting better organization and maintainability across the portal features.
2025-12-29 18:19:27 +09:00

2.4 KiB

Subscription Service Management

Guidance for SIM management in the Subscriptions detail page.

  • Location: Subscriptions > [Subscription] > SIM Management
  • Current status: SIM management available; other services (Internet, Netgear, VPN) to be added as needed

UI Structure

apps/portal/src/features/subscriptions/
├── sim/                              # SIM management subfolder
│   ├── components/
│   │   ├── SimManagementSection.tsx  # Main SIM management container
│   │   ├── SimDetailsCard.tsx        # SIM details display
│   │   ├── DataUsageChart.tsx        # Data usage visualization
│   │   ├── SimActions.tsx            # Action buttons
│   │   ├── TopUpModal.tsx            # Data top-up modal
│   │   ├── ChangePlanModal.tsx       # Plan change modal
│   │   ├── ReissueSimModal.tsx       # SIM reissue modal
│   │   └── SimFeatureToggles.tsx     # Voice/roaming toggles
│   ├── hooks/
│   │   └── useSimTopUpPricing.ts     # Top-up pricing hook
│   ├── utils/
│   │   └── plan.ts                   # Plan utilities
│   └── index.ts
├── views/
│   ├── SubscriptionDetail.tsx        # Main subscription detail view
│   ├── SimCancel.tsx                 # SIM cancellation flow
│   ├── SimTopUp.tsx                  # Data top-up flow
│   └── SimReissue.tsx                # SIM reissue flow
└── ...

Service Panels

  • SIM: Renders the existing SIM management UI
    • Source: apps/portal/src/features/subscriptions/sim/components/SimManagementSection.tsx
    • Backend: /api/subscriptions/{id}/sim/*
  • Internet: To be added when needed
  • Netgear: To be added when needed
  • VPN: To be added when needed

Integration

  • Entry point: apps/portal/src/app/account/subscriptions/[id]/page.tsx renders SubscriptionDetailContainer
  • SIM tab: Shows when subscription.productName includes sim (case-insensitive)
  • SIM management actions route to /account/subscriptions/{id}/sim/*

Future Expansion

  • Add service-specific management panels as needed (Internet, VPN, etc.)
  • Gate options per subscription capabilities
  • Deep-linking: support hash fragments like #sim-management to navigate to panels

Notes

  • SIM management is co-located with subscriptions since it's a subscription-level concern
  • All SIM-related routes live under /account/subscriptions/{id}/sim/*