- 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.
2.4 KiB
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/*
- Source:
- 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.tsxrendersSubscriptionDetailContainer - SIM tab: Shows when
subscription.productNameincludessim(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-managementto 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/*