124 lines
11 KiB
Markdown
124 lines
11 KiB
Markdown
# Browsing Services
|
|
|
|
## Overview
|
|
|
|
This journey covers how users browse the service catalog on the Customer Portal. The portal offers three main orderable service types -- Internet (fiber optic), SIM/eSIM (mobile data and voice), and VPN Router (streaming access) -- plus informational pages for Business and Onsite Support. Services are sourced from the Salesforce product catalog and displayed differently depending on whether the user is logged in or visiting as a guest.
|
|
|
|
## Portal Flow
|
|
|
|
### Services Landing Page
|
|
|
|
1. **As a guest**, go to `/services`. You see the public services overview page with a hero section titled "Our Services," value proposition badges (Full English Support, One provider all services, English support, Fast activation), and a grid of service cards.
|
|
2. **As a logged-in user**, go to `/account/services`. You see the same service cards (without the large hero section), wrapped in the standard account page layout with the title "Services" and description "Browse and order connectivity services."
|
|
3. The page shows five service cards in two rows:
|
|
- **Top row (larger cards):** Internet (Fiber Optic) and SIM & eSIM (Mobile Data). These are the primary services. The SIM card has a badge that says "1st month free."
|
|
- **Bottom row (smaller cards):** VPN Router (Streaming Access), Business (Enterprise IT), and Onsite Support (Tech Assistance).
|
|
4. Each card shows the service name, a subtitle, a short description, key feature pills, and a "View Plans" link.
|
|
5. Clicking a card takes you to that service's plans page. Internet and SIM link to either `/services/{type}` (public) or `/account/services/{type}` (logged in). Business and Onsite Support always link to their respective public pages.
|
|
6. At the bottom of the public page, there is a "Need help choosing?" section with a "Get in Touch" button and a toll-free phone number.
|
|
|
|
### Browsing Internet Plans
|
|
|
|
#### Public View (Not Logged In)
|
|
|
|
1. Go to `/services/internet`. You see a marketing-style page with speed offerings (Hikari Cross for houses, Hikari for apartments), plan tier comparisons, and a "How It Works" section.
|
|
2. Plans are grouped by offering type (e.g., Hikari Cross for standalone homes, Hikari for apartment buildings).
|
|
3. Each offering shows speed tiers (Standard, Pro, Platinum) with monthly prices starting from a given amount, plus a setup fee.
|
|
4. There is a call-to-action button to check availability. Clicking it either takes you to the eligibility check flow (if not logged in) or to the account-side plans page.
|
|
|
|
#### Account View (Logged In)
|
|
|
|
1. Go to `/account/services/internet`. What you see depends on your **internet eligibility status**:
|
|
|
|
**Not Requested:** You see the same public marketing content with a "Check Availability" button. Clicking it takes you to `/account/services/internet/request` to submit an eligibility check.
|
|
|
|
**Pending:** You see a "Your Internet Options" heading with a status badge showing "Checking Availability." A message explains that the team is reviewing your address and you will be contacted within 1-2 business days. The date your request was submitted is shown.
|
|
|
|
**Eligible:** You see a status badge showing your eligible speed (e.g., "Cross 10G"). Below that, a plan comparison guide appears, followed by offering cards for the speed options available at your address. Each offering card shows the available tiers with pricing. You can expand a card to see tier details and click to configure.
|
|
|
|
**Ineligible:** You see a message explaining that internet service is not available at your address, along with any notes from the review team.
|
|
|
|
2. If you already have an active internet subscription, a warning banner appears saying "Active subscription found" with a link to contact support for additional lines.
|
|
|
|
### Browsing SIM & eSIM Plans
|
|
|
|
1. Go to `/services/sim` (public) or `/account/services/sim` (logged in).
|
|
2. Plans are organized into three tabs at the top:
|
|
- **Data + Voice** (default tab): Plans that include mobile data, SMS, and voice calling. These run on the NTT Docomo network.
|
|
- **Data Only**: Plans with data and SMS but no voice calling.
|
|
- **Voice Only**: Plans for voice service only.
|
|
3. Each plan card shows:
|
|
- Plan name and data allowance (e.g., "3GB", "20GB")
|
|
- Monthly price
|
|
- Whether the plan includes voice calling
|
|
- Whether a family discount is available
|
|
4. The page also shows informational sections such as device compatibility guidance, calling rates, SIM fees, and a "How It Works" section explaining the order process.
|
|
5. Clicking a plan's "Select Plan" button takes you to the SIM configuration page at `/account/services/sim/configure?planSku={sku}`.
|
|
|
|
### Browsing VPN Router Plans
|
|
|
|
1. Go to `/services/vpn` (public) or `/account/services/vpn` (logged in).
|
|
2. The page shows VPN router plans with two region options: US (San Francisco) and UK (London).
|
|
3. Each plan card shows the region, monthly price, and key features (streaming access to region-specific content, pre-configured plug-and-play router).
|
|
4. The page includes highlight features, a "How It Works" section (Sign Up, Choose Region, Place Order, Connect & Stream), and an FAQ section covering topics like supported streaming services, connection speed, and multi-device use.
|
|
5. Clicking a plan takes you to the VPN configuration/checkout flow.
|
|
|
|
### Internet Eligibility Check (Public Flow)
|
|
|
|
1. If a guest user wants to check internet availability, they reach the eligibility check flow. This is a multi-step process:
|
|
- **Step 1 - Enter Details**: The user provides their email address and optionally an address.
|
|
- **Step 2 - Verify Email**: A one-time code is sent to the email. The user enters it to verify.
|
|
- **Step 3 - Complete Account** (if needed): If the user does not have an account, they are prompted to create one so the eligibility result can be saved.
|
|
- **Step 4 - Success**: The request is submitted. The user sees a confirmation message.
|
|
2. This flow creates a new Salesforce Case for the eligibility check request (a new Case is created each time, even if one was submitted before).
|
|
|
|
## What Happens in Salesforce
|
|
|
|
- **Product Catalog**: All service plans, add-ons, installation options, and activation fees are stored as **Product2** records in Salesforce. Key fields include:
|
|
- `SKU__c` (unique product identifier)
|
|
- `Portal_Category__c` (Internet, SIM, VPN)
|
|
- `Portal_Catalog__c` (plan, installation, addon, activation)
|
|
- `Portal_Accessible__c` (whether the product appears in the portal catalog)
|
|
- `Item_Class__c` (Service, Installation, Add-on, Activation)
|
|
- `Billing_Cycle__c` (Monthly, Onetime)
|
|
- `Internet_Plan_Tier__c` (Standard, Pro, Platinum -- for internet plans)
|
|
- `Internet_Offering_Type__c` (Hikari, Hikari Cross -- for internet plans)
|
|
- `SIM_Data_Size__c` and `SIM_Plan_Type__c` (for SIM plans)
|
|
- `VPN_Region__c` (US, UK -- for VPN plans)
|
|
- `Display_Order__c` (controls sort order in the catalog)
|
|
- **Pricebook Entries**: Each Product2 has associated **PricebookEntry** records that define the unit price. The portal reads the standard pricebook to display prices.
|
|
- **Internet Eligibility**: The eligibility status is stored on the Salesforce **Account** record in these fields:
|
|
|
|
| Field | API Name | What It Stores |
|
|
| ------------------ | ------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
| Eligibility Value | `Internet_Eligibility__c` | The speed/type (e.g., "Cross 10G", "Hikari 1G"), or empty if not yet checked |
|
|
| Eligibility Status | `Internet_Eligibility_Status__c` | Status of the check |
|
|
| Request Date | `Internet_Eligibility_Request_Date_Time__c` | When the customer requested the check |
|
|
| Checked Date | `Internet_Eligibility_Checked_Date_Time__c` | When the agent completed the review |
|
|
|
|
The portal determines the customer's eligibility state based on these fields: if `Internet_Eligibility__c` has a value, the customer is eligible for that speed; if it's blank with a pending request, the check is in progress; if blank with no request, no check has been done.
|
|
|
|
- **Eligibility Requests**: Submitting an eligibility check always creates a **new Case** in Salesforce (with Origin "Portal Notification") linked to the user's Account. A new Case is created each time, even if the customer has submitted a request before. A support agent then manually checks NTT fiber availability at the customer's address and updates the Account's eligibility field accordingly. This is not an automated check -- a person reviews it.
|
|
- **Opportunities**: When a user requests an eligibility check, the system looks for an existing open Opportunity for internet on the Account. If one exists, it reuses it. If none exists, it creates a new Opportunity at the "Introduction" stage. This Opportunity tracks the customer's journey from initial interest through to ordering.
|
|
|
|
## What Happens in WHMCS
|
|
|
|
- WHMCS is not directly involved in the service browsing flow. The catalog is served entirely from Salesforce.
|
|
- Each Salesforce Product2 record has a `WH_Product_ID__c` field that maps it to a corresponding WHMCS product ID. This mapping is used later during order fulfillment to create the correct WHMCS service (covered in the next journey).
|
|
|
|
## Key Things to Verify
|
|
|
|
1. **Catalog completeness**: Confirm that all expected Internet, SIM, and VPN plans appear on their respective pages. Check that plans marked as `Portal_Accessible__c = true` in Salesforce show up, and plans marked `false` do not.
|
|
2. **Pricing accuracy**: Verify that the monthly and one-time prices shown on plan cards match the PricebookEntry unit prices in Salesforce.
|
|
3. **Plan grouping**: For Internet, verify plans are correctly grouped by offering type (Hikari vs. Hikari Cross). For SIM, verify plans appear under the correct tab (Data+Voice, Data Only, Voice Only) based on the `SIM_Plan_Type__c` field.
|
|
4. **Display order**: Check that plans appear in the correct sort order based on `Display_Order__c`.
|
|
5. **Internet eligibility flow**: Test each eligibility status:
|
|
- Create a test user with no eligibility value -- they should see "Check Availability."
|
|
- Set the Account's eligibility field to blank with a pending Case -- they should see "Checking Availability."
|
|
- Set the Account's eligibility field to a value like "Cross 10G" -- they should see eligible plans for that speed.
|
|
- Set the eligibility status to ineligible -- they should see the ineligible message.
|
|
6. **Active subscription warning**: If a user already has an active internet subscription in WHMCS, the warning banner should appear on the internet plans page.
|
|
7. **Public vs. account views**: Confirm that public pages at `/services/...` show the same catalog as account pages at `/account/services/...`. The account view should show personalized eligibility for internet; SIM and VPN catalogs should be identical.
|
|
8. **Navigation**: Verify all "Back to Services" links work correctly and that clicking plan cards navigates to the correct configuration page.
|
|
9. **Responsive design**: Browse the service pages on mobile and tablet sizes to confirm layouts adapt correctly.
|