Hug and Bup flow

### 1. **HUG (Home Unified Gateway) Flow**
– **HUG** refers to flows or bundles related to **Home services**:
– **Internet**
– **TV**
– **Home Phone**
– **Fibe services**
– It’s part of the **residential product** experience.
– Flows include:
– Overview dashboard of home services
– Managing Wi-Fi and modems
– Viewing home usage and bills
– Upgrading or troubleshooting home products

🧠 Think of it as the **Residential (Home)** services portal for Bell users.

—

### 2. **BUP (Business Unified Portal) Flow**
– **BUP** is related to **Small Business** or **Enterprise services**.
– Includes:
– Business Internet
– Business Mobility
– VoIP and SIP solutions
– Business billing, user management, and bulk SIM handling
– These flows are typically more **complex**, often with account hierarchies and user role permissions.

🧠 Think of BUP as the **Business services** side of Bell's unified platform.

—

### How They're Used in Development:
If you're working on the **frontend (React)** or **backend (Node, Java, etc.)**, these flow types will define:
– **Routing logic** (different base paths or layout structures)
– **Component behaviors** (some components are shared between HUG and BUP with different props)
– **API structure** (some services are shared, some are flow-specific)
– **Feature toggles or flags** (using LaunchDarkly, etc.)

—

### Visual Summary

| Term | Stands For | Area of Bell | Used For |
|——|—————————|————–|———————————–|
| HUG | Home Unified Gateway | Residential | Internet, TV, phone (home users) |
| BUP | Business Unified Portal | Business | SMB/Enterprise services |

—

Let me know if you want the **directory structure**, **component hierarchy**, or **bundle setup** for HUG/BUP in your React monorepo – I can show you how to debug or identify which flow your ticket belongs to.

—

## ✅ 1. **Understand the Business Domains**
Bell Canada has **multiple verticals**, and each has different flows:

| Flow/Bundle | Services | Example Screens |
|————-|———-|——————|
| **HUG** (Home Unified Gateway) | Internet, TV, Home Phone | Overview, Wi-Fi Management, Billing |
| **BUP** (Business Unified Portal) | Small/Medium Business | Business Account Dashboard, Usage |
| **Mobility** | Mobile SIM, Postpaid/Prepaid | Usage, Plan Upgrades, Add-ons |

You’ll often get a **ticket scoped to one of these**.

—

## ✅ 2. **Project Structure (Monorepo + Nested Bundles)**

– **Monorepo (single Git repo)** with nested `bundles/`
– Structure might look like:

bell-monorepo/
  ├── myaccount-landing-common/
  ├── myaccount-landing-internet-overview/
  ├── myaccount-internet-overview/
  ├── shared-components/
  └── utilities/

– Build flow:
– First `cd` into the **child-most bundle**
– Run: `npm install –legacy-peer-deps`
– Build from **bottom up** using: `npm run build`

—

## ✅ 3. **Tech Stack**
| Area | Tech |
|——|——|
| Framework | React (sometimes with class + hooks mix) |
| State Management | Redux or Context API (bundle-specific) |
| Styling | SCSS, CSS Modules, Tailwind (bundle dependent) |
| Routing | React Router |
| Forms | Formik, React Hook Form |
| APIs | Axios, Fetch with token-based headers |
| Auth | JWT, MSAL (Azure AD), sometimes OAuth |

—

## ✅ 4. **Important Concepts to Know**
### 🔹 a. **Bundle Flow**
– Each page or flow lives in a bundle (e.g., `myaccount-internet-overview`)
– Reusable pieces live in `common` bundles

### 🔹 b. **Environment Configs**
– `.env.dev`, `.env.prod`
– Contains API base URLs, feature toggles, tokens

### 🔹 c. **LaunchDarkly / Feature Flags**
– Used to toggle features on/off per environment or user
– Check `useFeatureFlag()` or similar hooks

### 🔹 d. **Translation & Localization**
– `i18n` setup for English + French
– Use `t('key')` or “ for text

—

## ✅ 5. **How to Solve a Ticket (Process)**
1. **Identify the Bundle**
– Based on ticket or JIRA label (e.g., `internet-overview`)
2. **Understand Acceptance Criteria**
– Mobile/Desktop responsive, accessibility (WCAG AA), etc.
3. **Pull Correct Branch**
– Usually `develop`, `release/X`, or `feature/ABC-1234`
4. **Make UI changes**
– Component → Form → API → State → Translations
5. **Run Locally**

npm run start
   npm run build

6. **Test**
– Browser, iPhone/Android emulators
– Test edge cases: no data, API error, disabled state

—

## ✅ 6. **Debugging Skills**
– Use `console.log`, React DevTools, Redux DevTools
– Know how to trace a component to a bundle
– Be able to read network/API payloads (inspect headers/tokens)

—

## ✅ 7. **Collaboration**
– Use **JIRA** for tasks
– **Bitbucket** for PRs
– **Confluence** for documentation
– **Slack** or **MS Teams** for daily syncs and tech discussions

—

## ✅ 8. **Soft Skills**
– During standup: “I’m working on the XYZ screen under HUG bundle; stuck on integrating API response”
– Ask your lead: “Is this component shared or bundle-specific?”
– Know when to ask for API mocks or backend readiness

—

## 🔄 Quick Checklist Before Coding
| Task | ✅ Done? |
|——|———-|
| Found the correct bundle | ✅ |
| Understood the design + behavior | ✅ |
| Checked if the component already exists | ✅ |
| Verified the API contract | ✅ |
| Set up local environment | ✅ |
| Followed naming, SCSS, and folder conventions | ✅ |

—

Would you like me to give you a **custom onboarding checklist** or walkthrough of **how to start debugging in one specific bundle**?