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

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.
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."
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).
Each card shows the service name, a subtitle, a short description, key feature pills, and a "View Plans" link.
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.
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)

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.
Plans are grouped by offering type (e.g., Hikari Cross for standalone homes, Hikari for apartment buildings).
Each offering shows speed tiers (Standard, Pro, Platinum) with monthly prices starting from a given amount, plus a setup fee.
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)

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.
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

Go to /services/sim (public) or /account/services/sim (logged in).
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.
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
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.
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

Go to /services/vpn (public) or /account/services/vpn (logged in).
The page shows VPN router plans with two region options: US (San Francisco) and UK (London).
Each plan card shows the region, monthly price, and key features (streaming access to region-specific content, pre-configured plug-and-play router).
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.
Clicking a plan takes you to the VPN configuration/checkout flow.

Internet Eligibility Check (Public Flow)

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.
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

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.
Pricing accuracy: Verify that the monthly and one-time prices shown on plan cards match the PricebookEntry unit prices in Salesforce.
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.
Display order: Check that plans appear in the correct sort order based on Display_Order__c.
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.
Active subscription warning: If a user already has an active internet subscription in WHMCS, the warning banner should appear on the internet plans page.
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.
Navigation: Verify all "Back to Services" links work correctly and that clicking plan cards navigates to the correct configuration page.
Responsive design: Browse the service pages on mobile and tablet sizes to confirm layouts adapt correctly.

11 KiB Raw Blame History