igloo-d2c-components 1.0.12 → 1.0.14

package/README.md

@@ -5,17 +5,31 @@ Reusable React component library with **centralized tenant themes** and tenant-a
 ## 📋 Table of Contents
 
 - [Overview](#-overview)
+- [Project Architecture](#-project-architecture)
 - [Features](#-features)
 - [Installation](#-installation)
 - [Quick Start](#-quick-start)
 - [Centralized Themes](#-centralized-themes)
 - [Components](#-components)
+  - [General Components](#general-components)
+  - [Interactive Components](#interactive-components)
+  - [Checkout Components](#checkout-components)
+  - [Form Components](#form-components)
 - [Hooks & Utilities](#-hooks--utilities)
+- [Asset Management](#-asset-management)
+- [Integration Guide](#-integration-guide)
+  - [Multi-Tenant Architecture](#multi-tenant-architecture)
+  - [Checkout Flow Integration](#checkout-flow-integration)
+  - [Recommendations Feature](#recommendations-feature)
+  - [Header Integration](#header-integration)
+  - [Routing Guide](#routing-guide)
 - [Development](#-development)
-- [Publishing](#-publishing)
 - [Storybook](#-storybook)
+- [Build Pipeline](#-build-pipeline)
+- [Publishing](#-publishing)
 - [Technical Details](#-technical-details)
 - [Troubleshooting](#-troubleshooting)
+- [Changelog](#-changelog)
 - [Contributing](#-contributing)
 
 ---
@@ -24,6 +38,15 @@ Reusable React component library with **centralized tenant themes** and tenant-a
 
 The D2C Component Library provides reusable, tenant-aware UI components with **centralized theme management**. All tenant themes are defined in one place, ensuring consistency across all applications.
 
+### What Are These Projects?
+
+We've built a **multi-tenant B2C insurance platform** that enables rapid deployment of white-label insurance applications for different partners.
+
+| Project                   | Purpose                                                                     |
+| ------------------------- | --------------------------------------------------------------------------- |
+| **d2c-component-library** | Shared component library with centralized themes and reusable UI components |
+| **b2c-web-demo**          | Multi-tenant web application consuming the component library                |
+
 ### Key Highlights
 
 - 🎨 **Centralized Themes** - All tenant themes (Igloo, CIMB, AmmetLife) in one library
@@ -33,6 +56,70 @@ The D2C Component Library provides reusable, tenant-aware UI components with **c
 - 📖 **Full TypeScript Support** - Complete type definitions
 - ⚡ **Tree-Shakeable** - Import only what you need
 
+### Supported Tenants
+
+| Tenant        | Port | Description             |
+| ------------- | ---- | ----------------------- |
+| **Igloo**     | 8000 | Default insurance brand |
+| **AmmetLife** | 8001 | Life insurance partner  |
+| **CIMB**      | 8002 | Banking partner         |
+
+---
+
+## 🏗️ Project Architecture
+
+### The Solution Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                     d2c-component-library                        │
+│  ┌─────────────────────────────────────────────────────────────┐│
+│  │                    Centralized Themes                        ││
+│  │  ┌───────────────────────┐  ┌───────────────────────┐       ││
+│  │  │       iglooTheme      │  │    ammetlifeTheme     │       ││
+│  │  └───────────────────────┘  └───────────────────────┘       ││
+│  └─────────────────────────────────────────────────────────────┘│
+│  ┌─────────────────────────────────────────────────────────────┐│
+│  │                 Shared Components                            ││
+│  │  Button │ Card │ Banner │ Header │ CheckoutProgress │ ...   ││
+│  └─────────────────────────────────────────────────────────────┘│
+│  ┌─────────────────────────────────────────────────────────────┐│
+│  │                    Theme Utilities                           ││
+│  │  TenantThemeProvider │ useTenantTheme │ getTenantTheme       ││
+│  └─────────────────────────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                        b2c-web-demo                              │
+│  ┌─────────────────────────────────────────────────────────────┐│
+│  │                   Tenant Configurations                      ││
+│  │  ┌───────────────────────┐  ┌───────────────────────┐       ││
+│  │  │       igloo.ts        │  │     ammetlife.ts      │       ││
+│  │  │   (uses iglooTheme)   │  │ (uses ammetlifeTheme) │       ││
+│  │  └───────────────────────┘  └───────────────────────┘       ││
+│  └─────────────────────────────────────────────────────────────┘│
+│  ┌─────────────────────────────────────────────────────────────┐│
+│  │               Single Codebase, Multiple Tenants              ││
+│  │  yarn start-igloo       → http://localhost:8000             ││
+│  │  yarn start-ammetlife   → http://localhost:8001             ││
+│  └─────────────────────────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Technical Stack
+
+```
+Frontend Framework:    React 17 + TypeScript
+Build System:          UmiJS (React framework) for b2c-web-demo
+UI Components:         MUI v5 + Custom Components
+Styling:               Emotion (CSS-in-JS) + Tailwind CSS
+State Management:      Recoil + React Context
+Component Library:     Rollup (ES2015 output)
+Documentation:         Storybook
+Package Manager:       Yarn
+```
+
 ---
 
 ## ✨ Features
@@ -47,41 +134,28 @@ The D2C Component Library provides reusable, tenant-aware UI components with **c
 
 ### Available Themes
 
-| Tenant | Theme Export | Description |
-|--------|-------------|-------------|
-| **Igloo** | `iglooTheme` | Default insurance brand |
-| **CIMB** | `cimbTheme` | Banking partner theme |
-| **AmmetLife** | `ammetlifeTheme` | Life insurance partner |
-
-### Components
-
-#### General Components
-- **Button** - Tenant-themed button component
-- **Card** - Card with tenant accent border
-- **Banner** - Promotional banner with gradients
-- **Header** - Application header with navigation
-- **NewHeader** - Enhanced header with tenant branding
-- **Footer** - Application footer with links
-
-#### Interactive Components
-- **RecommendationsDrawer** - Mobile drawer for user recommendations
-- **ProductSelectionDrawer** - Mobile drawer for product selection
-- **QuestionSection** - Interactive question component
-- **OptionButton** - Customizable option button
-- **ToggleGroup** - Toggle button group
-
-#### Checkout Components
-- **CheckoutProgress** - Progress bar with step indicator
-- **ProductCard** - Product information card for checkout
-- **CheckoutHeader** - Complete checkout header (progress + product + section)
-- **CheckoutFormButton** - Fixed/floating form button
-- **HealthQuestionGroup** - Health question with Yes/No options
+| Tenant        | Theme Export     | Description             |
+| ------------- | ---------------- | ----------------------- |
+| **Igloo**     | `iglooTheme`     | Default insurance brand |
+| **CIMB**      | `cimbTheme`      | Banking partner theme   |
+| **AmmetLife** | `ammetlifeTheme` | Life insurance partner  |
+
+### Component Categories
+
+| Category        | Components                                                                                |
+| --------------- | ----------------------------------------------------------------------------------------- |
+| **General**     | Button, Card, Banner, Header, NewHeader, Footer                                           |
+| **Interactive** | RecommendationsDrawer, ProductSelectionDrawer, QuestionSection, OptionButton, ToggleGroup |
+| **Checkout**    | CheckoutProgress, ProductCard, CheckoutHeader, CheckoutFormButton, HealthQuestionGroup    |
+| **Forms**       | PersonalInformationForm, ContactDetailsForm, HealthInformationForm                        |
 
 ### Hooks
 
 - `useTenantTheme()` - Access tenant theme and ID
 - `useTenantId()` - Get current tenant ID
 - `useIsTenant()` - Check tenant match
+- `useTenantLogo()` - Get tenant logo
+- `useTenantAsset()` - Get tenant-specific asset
 
 ### Utilities
 
@@ -90,6 +164,27 @@ The D2C Component Library provides reusable, tenant-aware UI components with **c
 - `getThemeColor()` - Extract colors from theme
 - `createThemeCSSVariables()` - Generate CSS variables
 
+### Key Benefits
+
+#### For Development Teams
+
+| Benefit                    | Impact                                                   |
+| -------------------------- | -------------------------------------------------------- |
+| **Single Source of Truth** | Update themes once, reflected everywhere                 |
+| **~585 Lines Removed**     | From consuming apps (no more duplicated themes)          |
+| **Type Safety**            | Full TypeScript support with interfaces                  |
+| **Faster Development**     | Reuse tested components instead of building from scratch |
+| **Better DX**              | Hot reload, Storybook for component development          |
+
+#### For Business
+
+| Benefit                       | Impact                                       |
+| ----------------------------- | -------------------------------------------- |
+| **Faster Partner Onboarding** | Days instead of weeks to launch a new tenant |
+| **Consistent UX**             | Same quality experience across all brands    |
+| **Reduced Costs**             | One team maintains one codebase              |
+| **Scalability**               | Easy to add new tenants and features         |
+
 ---
 
 ## 📦 Installation
@@ -119,6 +214,7 @@ yarn install
 ```
 
 **Workflow:**
+
 ```bash
 # Make changes to library
 cd d2c-component-library
@@ -135,6 +231,7 @@ yarn install  # Copies updated build
 For production deployments and CI/CD.
 
 **Install:**
+
 ```bash
 yarn add igloo-d2c-components
 # or
@@ -142,6 +239,7 @@ npm install igloo-d2c-components
 ```
 
 **Configure authentication (if using private registry):**
+
 ```bash
 # For npm
 export NPM_AUTH_TOKEN="your-npm-token"
@@ -150,6 +248,28 @@ export NPM_AUTH_TOKEN="your-npm-token"
 export GITLAB_NPM_TOKEN="glpat-your-token"
 ```
 
+### Component Library Management Scripts (in b2c-web-demo)
+
+```bash
+# Check installed version
+yarn lib:check
+
+# Get package information
+yarn lib:info
+
+# Upgrade to latest version (from registry)
+yarn lib:upgrade
+
+# Install local development version
+yarn lib:install-local
+
+# Install registry version
+yarn lib:install-registry
+
+# Verify registry configuration
+yarn lib:verify-registry
+```
+
 ---
 
 ## 🚀 Quick Start
@@ -227,6 +347,7 @@ function MyPage() {
 ### Why Centralized Themes?
 
 **Before** (❌ Old Way):
+
 ```typescript
 // In each consuming app - duplicated code
 const iglooTheme = {
@@ -238,6 +359,7 @@ const iglooTheme = {
 ```
 
 **After** (✅ New Way):
+
 ```typescript
 // Import from library - single source of truth
 import { iglooTheme } from 'igloo-d2c-components'
@@ -290,13 +412,18 @@ interface TenantThemeConfig {
     fontFamily: string
   }
   logo: string
+  logoDark?: string
+  logoAlt?: string
+  logoWhite?: string
   favicon: string
+  assetBaseUrl?: string
 }
 ```
 
 ### Using Themes
 
 **In Tenant Configuration:**
+
 ```typescript
 // config/tenants/igloo.ts
 import { iglooTheme } from 'igloo-d2c-components'
@@ -308,19 +435,8 @@ const iglooConfig: TenantConfig = {
 }
 ```
 
-**Dynamic Loading:**
-```typescript
-import { getTenantTheme, isValidTenantId } from 'igloo-d2c-components'
-
-function loadTheme(tenantId: string) {
-  if (isValidTenantId(tenantId)) {
-    return getTenantTheme(tenantId)
-  }
-  throw new Error(`Invalid tenant: ${tenantId}`)
-}
-```
-
 **In Components:**
+
 ```typescript
 import { useTenantTheme } from 'igloo-d2c-components'
 
@@ -338,19 +454,13 @@ function MyComponent() {
 }
 ```
 
-### Theme Benefits
-
-- ✅ **Single source of truth** - Update in one place
-- ✅ **Type-safe** - Full TypeScript support
-- ✅ **Consistent** - Same themes across all apps
-- ✅ **Maintainable** - Easy to update and extend
-- ✅ **Scalable** - Add new tenants easily
-
 ---
 
 ## 📚 Components
 
-### Button
+### General Components
+
+#### Button
 
 Tenant-aware button component based on MUI Button.
 
@@ -369,11 +479,12 @@ import { Button } from 'igloo-d2c-components'
 ```
 
 **Props:**
+
 - `tenantColored?: boolean` - Use tenant primary color
 - `variant?: 'text' | 'outlined' | 'contained'` - Button variant
 - All MUI ButtonProps
 
-### Card
+#### Card
 
 Tenant-aware card component based on MUI Card.
 
@@ -389,14 +500,14 @@ import { Card } from 'igloo-d2c-components'
 ```
 
 **Props:**
+
 - `title?: React.ReactNode` - Card title
 - `content?: React.ReactNode` - Card content
 - `actions?: React.ReactNode` - Card actions
 - `tenantAccent?: boolean` - Add tenant-colored top border
-- `headerAction?: React.ReactNode` - Action in header
 - All MUI CardProps
 
-### Banner
+#### Banner
 
 Promotional banner with tenant theming.
 
@@ -411,12 +522,402 @@ import { Banner } from 'igloo-d2c-components'
 />
 ```
 
+#### NewHeader
+
+Simplified header component with mobile drawer navigation.
+
+```tsx
+import { NewHeader } from 'igloo-d2c-components'
+
+<NewHeader
+  logo="/path/to/logo.svg"
+  navigationLinks={[
+    {
+      key: 'car',
+      label: 'Car Insurance',
+      onClick: () => navigate('/car')
+    }
+  ]}
+  additionalMenuSections={[
+    {
+      title: 'Account',
+      items: [
+        { key: 'login', label: 'Log in', onClick: handleLogin }
+      ]
+    }
+  ]}
+  onLogoClick={() => navigate('/')}
+/>
+```
+
 **Props:**
-- `title: string` - Banner title (required)
-- `description?: string` - Banner description
-- `action?: React.ReactNode` - Action button/element
-- `gradient?: boolean` - Use gradient background (default: true)
-- All MUI BoxProps
+
+```typescript
+interface NewHeaderProps {
+  logo: string                          // Logo image source
+  navigationLinks?: NewHeaderNavigationLink[]
+  additionalMenuSections?: {
+    title?: string
+    items: NewHeaderNavigationLink[]
+  }[]
+  isMobile?: boolean
+  onLogoClick?: () => void
+  onMenuOpen?: () => void
+  onMenuClose?: () => void
+  customDrawerContent?: React.ReactNode
+  formatMessage?: (descriptor: { id: string }) => string
+}
+```
+
+### Interactive Components
+
+#### RecommendationsDrawer
+
+Mobile drawer for collecting user preferences and showing personalized recommendations.
+
+```tsx
+import {
+  RecommendationsDrawer,
+  QuestionSection,
+  OptionButton,
+  ToggleGroup
+} from 'igloo-d2c-components'
+
+function MyComponent() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedOption, setSelectedOption] = React.useState('')
+
+  const options = [
+    { value: 'option1', label: 'Option 1', icon: '🎯' },
+    { value: 'option2', label: 'Option 2', icon: '✨' },
+  ]
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        See my recommendations
+      </Button>
+
+      <RecommendationsDrawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Personalize Your Plan"
+        subtitle="Answer a few questions"
+        primaryButtonText="Next"
+        onPrimaryAction={handleSubmit}
+      >
+        <QuestionSection
+          question="What's your preference?"
+          options={options}
+          selectedValue={selectedOption}
+          onSelect={setSelectedOption}
+          renderOption={(option, isSelected) => (
+            <OptionButton
+              key={option.value}
+              value={option.value}
+              label={option.label}
+              icon={option.icon}
+              selected={isSelected}
+              onClick={setSelectedOption}
+            />
+          )}
+        />
+      </RecommendationsDrawer>
+    </>
+  )
+}
+```
+
+**RecommendationsDrawer Props:**
+
+```typescript
+interface RecommendationsDrawerProps {
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+  headerIcon?: string
+  title?: string
+  subtitle?: string
+  showBackButton?: boolean
+  onBack?: () => void
+  primaryButtonText?: string
+  onPrimaryAction?: () => void
+  primaryButtonDisabled?: boolean
+  secondaryButtonText?: string
+  onSecondaryAction?: () => void
+  showFooter?: boolean
+  customFooter?: React.ReactNode
+  formatMessage?: (descriptor: { id: string }) => string
+}
+```
+
+#### ProductSelectionDrawer
+
+Mobile-first bottom drawer for displaying insurance products in a grid.
+
+```tsx
+import { ProductSelectionDrawer, Product } from 'igloo-d2c-components'
+
+const products: Product[] = [
+  {
+    id: 'life-byond',
+    name: 'LIFE BYOND',
+    type: 'Term Plan',
+    logo: '/path/to/logo.png',
+  },
+  {
+    id: 'health-cvr',
+    name: 'HEALTH CVR',
+    type: 'CI Plan',
+    logo: '/path/to/logo.png',
+  },
+]
+
+<ProductSelectionDrawer
+  open={open}
+  onClose={() => setOpen(false)}
+  products={products}
+  onProductSelect={(productId) => {
+    console.log('Selected:', productId)
+    setOpen(false)
+  }}
+  title="Select your product"
+  subtitle="Pick the product that suits your protection goals"
+  viewPlansButtonText="View plans"
+/>
+```
+
+#### ToggleGroup
+
+Segmented control for binary/multiple choice toggles.
+
+```tsx
+import { ToggleGroup } from 'igloo-d2c-components'
+
+<ToggleGroup
+  options={[
+    { value: 'domestic', label: 'Domestic', icon: '/icon1.svg' },
+    { value: 'international', label: 'International', icon: '/icon2.svg' }
+  ]}
+  value={travelType}
+  onChange={setTravelType}
+/>
+```
+
+### Checkout Components
+
+#### CheckoutProgress
+
+Progress bar with step indicator for multi-step checkout flows.
+
+```tsx
+import { CheckoutProgress } from 'igloo-d2c-components'
+
+<CheckoutProgress
+  currentStep={0}
+  totalSteps={3}
+  onBack={() => handleBack()}
+  showBackButton={true}
+/>
+```
+
+**Props:**
+
+| Prop             | Type         | Default  | Description                          |
+| ---------------- | ------------ | -------- | ------------------------------------ |
+| `currentStep`    | `number`     | Required | Current step (0-indexed)             |
+| `totalSteps`     | `number`     | Required | Total number of steps                |
+| `onBack`         | `() => void` | -        | Callback when back button is clicked |
+| `showBackButton` | `boolean`    | `true`   | Whether to show the back button      |
+
+#### ProductCard
+
+Product information card for checkout flows.
+
+```tsx
+import { ProductCard } from 'igloo-d2c-components'
+
+<ProductCard
+  productName="LIFE BYOND"
+  planName="Plan A"
+  price="25"
+  currency="RM"
+  period="/month"
+  logoUrl="path/to/logo.png"
+  showIndicator={true}
+/>
+```
+
+#### CheckoutHeader
+
+Complete header component combining progress, product card, and section information.
+
+```tsx
+import { CheckoutHeader } from 'igloo-d2c-components'
+
+<CheckoutHeader
+  progress={{
+    currentStep: 0,
+    totalSteps: 3,
+    onBack: () => handleBack(),
+  }}
+  product={{
+    productName: 'LIFE BYOND',
+    planName: 'Plan A',
+    price: '25',
+    currency: 'RM',
+    period: '/month',
+  }}
+  sectionTitle="Personal information"
+  sectionDescription="Let's get to know you better..."
+  sticky={true}
+/>
+```
+
+#### CheckoutFormButton
+
+Fixed or floating button for form submission.
+
+```tsx
+import { CheckoutFormButton } from 'igloo-d2c-components'
+
+<CheckoutFormButton
+  text="Next"
+  disabled={!isValid}
+  onClick={handleSubmit}
+  fixed={true}
+  type="button"
+  loading={isSubmitting}
+/>
+```
+
+**Tenant Theme Support:** The button automatically uses tenant-specific colors:
+
+- **AmmetLife**: Blue (#317ABC)
+- **CIMB**: Red (#D71920)
+- **Igloo**: Black (#13131B)
+
+#### HealthQuestionGroup
+
+Health questions with Yes/No button options.
+
+```tsx
+import { HealthQuestionGroup } from 'igloo-d2c-components'
+
+<HealthQuestionGroup
+  question="Have you ever had any ongoing or past health conditions?"
+  questionNumber={1}
+  value={healthConditions}
+  onChange={(value) => setHealthConditions(value)}
+  error={errors.healthConditions}
+  labels={{ yes: 'Yes', no: 'No' }}
+/>
+```
+
+### Form Components
+
+The library includes three reusable checkout form components designed to be **form library agnostic**.
+
+#### PersonalInformationForm
+
+Collects personal details, occupation, and banking information.
+
+```tsx
+import { PersonalInformationForm } from 'igloo-d2c-components'
+
+<PersonalInformationForm
+  renderField={renderField}
+  fields={{
+    full_name: {
+      name: 'full_name',
+      label: 'Full name',
+      value: formik.values.full_name,
+      error: formik.errors.full_name,
+      touched: formik.touched.full_name,
+      helperText: 'Full name as per your ID card',
+      onChange: formik.handleChange,
+      onBlur: formik.handleBlur,
+    },
+    nric: { /* ... */ },
+    date_of_birth: { /* ... */ },
+    gender: { /* ... */ },
+    // ... other fields
+  }}
+  consents={{
+    bank_account_confirmation: {
+      checked: formik.values.bank_account_confirmation,
+      onChange: (checked) =>
+        formik.setFieldValue('bank_account_confirmation', checked),
+      error: formik.errors.bank_account_confirmation,
+    },
+    marketing_consent: {
+      checked: formik.values.marketing_consent,
+      onChange: (checked) =>
+        formik.setFieldValue('marketing_consent', checked),
+    },
+  }}
+  onSubmit={formik.handleSubmit}
+/>
+```
+
+#### ContactDetailsForm
+
+Collects contact and address information.
+
+```tsx
+import { ContactDetailsForm } from 'igloo-d2c-components'
+
+<ContactDetailsForm
+  renderField={renderField}
+  fields={{
+    phone_number: { /* ... */ },
+    email_address: { /* ... */ },
+    residential_address: { /* ... */ },
+    postal_code: { /* ... */ },
+    city: { /* ... */ },
+    state: { /* ... */ },
+  }}
+  mailingAddressSame={{
+    checked: formik.values.mailing_same_as_residential,
+    onChange: (checked) =>
+      formik.setFieldValue('mailing_same_as_residential', checked),
+  }}
+  onSubmit={formik.handleSubmit}
+/>
+```
+
+#### HealthInformationForm
+
+Collects health measurements and questions with gender-specific support.
+
+```tsx
+import { HealthInformationForm } from 'igloo-d2c-components'
+
+<HealthInformationForm
+  renderField={renderField}
+  measurementFields={{
+    weight: {
+      name: 'weight',
+      label: 'Weight (kg)',
+      type: 'number',
+      value: formik.values.weight,
+      inputProps: { min: 20, max: 300 },
+      onChange: formik.handleChange,
+    },
+    height: { /* ... */ },
+  }}
+  healthQuestions={[
+    {
+      question: 'Have you ever had any ongoing or past health conditions?',
+      questionNumber: 1,
+      name: 'health_conditions',
+      value: formik.values.health_conditions,
+      onChange: (value) => formik.setFieldValue('health_conditions', value),
+    },
+  ]}
+  onSubmit={formik.handleSubmit}
+/>
+```
 
 ---
 
@@ -470,6 +971,20 @@ function MyComponent() {
 }
 ```
 
+#### useTenantLogo()
+
+Get tenant logo URL.
+
+```tsx
+import { useTenantLogo } from 'igloo-d2c-components'
+
+function MyComponent() {
+  const logo = useTenantLogo()           // Default logo
+  const darkLogo = useTenantLogo('dark') // Dark variant
+  return <img src={logo} alt="Logo" />
+}
+```
+
 ### Utility Functions
 
 #### getTenantTheme()
@@ -483,8 +998,6 @@ const theme = getTenantTheme('igloo')
 console.log(theme.palette.primary.main) // '#5656F6'
 ```
 
-**Throws:** Error if tenant ID is invalid
-
 #### isValidTenantId()
 
 Type guard to check if a string is a valid tenant ID.
@@ -519,15 +1032,348 @@ const color = getThemeColor(theme, 'primary.main', '#000')
 // Returns theme.palette.primary.main or '#000' if not found
 ```
 
-#### createThemeCSSVariables()
+---
 
-Create CSS variables from theme.
+## 📦 Asset Management
+
+### Asset Organization
+
+```
+d2c-component-library/src/assets/
+├── icons/                    # Common UI icons
+│   ├── alert.svg
+│   ├── arrow-down.svg
+│   ├── close.svg
+│   ├── facebook.svg
+│   ├── instagram.svg
+│   ├── youtube.svg
+│   └── index.ts             # Icon path utilities
+├── tenants/                 # Tenant-specific assets
+│   ├── igloo/logo.svg
+│   ├── cimb/logo.svg
+│   └── ammetlife/logo.svg
+└── index.ts                 # Main asset exports
+```
+
+### Asset Flow Architecture
+
+```
+┌─────────────────────────────────────────────────────┐
+│  ASSET MANAGEMENT ARCHITECTURE                       │
+├─────────────────────────────────────────────────────┤
+│                                                      │
+│  d2c-component-library/                             │
+│  └── src/assets/                                    │
+│      ├── icons/           → Common UI icons         │
+│      └── tenants/         → Tenant logos            │
+│          ├── igloo/logo.svg                         │
+│          ├── cimb/logo.svg                          │
+│          └── ammetlife/logo.svg                     │
+│                                                      │
+│  BUILD ⬇️                                            │
+│  dist/assets/            → Published with library   │
+│                                                      │
+│  INSTALL ⬇️                                          │
+│  node_modules/igloo-d2c-components/dist/assets/     │
+│                                                      │
+│  COPY (yarn copy-assets) ⬇️                         │
+│  public/assets/          → Served by UMI            │
+│                                                      │
+└─────────────────────────────────────────────────────┘
+```
+
+### Using Assets
 
-```tsx
-import { createThemeCSSVariables } from 'igloo-d2c-components'
+```typescript
+// Get Tenant Logo
+import { useTenantLogo } from 'igloo-d2c-components'
 
-const vars = createThemeCSSVariables(theme, '--my-app')
-// { '--my-app-primary-main': '#5656F6', ... }
+function MyComponent() {
+  const logo = useTenantLogo()           // Default logo
+  const darkLogo = useTenantLogo('dark') // Dark variant
+  return <img src={logo} alt="Logo" />
+}
+
+// Get Icon Paths
+import { ICON_PATHS, getIconPath } from 'igloo-d2c-components'
+<img src={ICON_PATHS.facebook} alt="Facebook" />
+<img src={getIconPath('instagram')} alt="Instagram" />
+```
+
+### Asset Distribution Strategy
+
+| Asset Type            | Location            | Reason                      |
+| --------------------- | ------------------- | --------------------------- |
+| **Generic UI Icons**  | Library             | Reusable across projects    |
+| **Tenant Logos**      | Library (via theme) | Centralized management      |
+| **Insurer Logos**     | CDN                 | Shared, updated by partners |
+| **Marketing Banners** | Application         | Frequent changes            |
+| **Documents (PDFs)**  | CDN                 | Large, rarely change        |
+
+### Logo Rendering in Applications
+
+**Important**: Assets need to be copied to the `public/` folder for UMI to serve them:
+
+```bash
+# In consuming application
+yarn copy-assets  # Copies library assets to public/assets/
+```
+
+The theme paths reference `/assets/tenants/{tenant}/logo.svg` which maps to:
+
+- Theme config: `logo: '/assets/tenants/igloo/logo.svg'`
+- File location: `public/assets/tenants/igloo/logo.svg`
+- Browser URL: `http://localhost:8001/assets/tenants/igloo/logo.svg`
+
+---
+
+## 🔌 Integration Guide
+
+### Multi-Tenant Architecture
+
+#### Tenant Configuration Structure
+
+```
+config/tenants/
+├── index.ts         # Tenant registry and utility functions
+├── types.ts         # TypeScript interfaces
+├── igloo.ts         # Igloo tenant configuration
+├── ammetlife.ts     # AmmetLife tenant configuration
+└── cimb.ts          # CIMB tenant configuration
+```
+
+#### Tenant Configuration Example
+
+```typescript
+// config/tenants/igloo.ts
+import { iglooTheme } from 'igloo-d2c-components'
+import { TenantConfig } from './types'
+
+const iglooConfig: TenantConfig = {
+  id: 'igloo',
+  name: 'igloo',
+  displayName: 'Igloo',
+  domain: 'igloo.co.id',
+
+  theme: iglooTheme, // ← Centralized theme from component library
+
+  features: {
+    showPAMenu: true,
+    enableAIChatbot: true,
+    showWorkshopEntryPoint: false,
+    enableFreeAddons: false,
+  },
+
+  routes: {
+    enabled: ['car', 'motorbike', 'health', 'life', 'travel', 'pet'],
+    disabled: [],
+  },
+
+  branding: {
+    companyName: 'Igloo',
+    supportEmail: 'hello@iglooinsure.com',
+    supportPhone: '+62 21 5022 0888',
+  },
+
+  integrations: {
+    gtmCode: 'GTM-5RHHNVQ',
+    gaCode: 'G-QQV6F41YPJ',
+  },
+}
+
+export default iglooConfig
+```
+
+#### AmmetLife Custom Homepage
+
+AmMetLife uses a custom homepage that displays the life insurance landing page:
+
+```typescript
+// config/tenants/ammetlife.ts
+customRoutes: [
+  {
+    path: '/',
+    exact: true,
+    component: '@/pages/life-landing-page/index.tsx',
+  },
+]
+```
+
+### Checkout Flow Integration
+
+#### Complete 3-Step Checkout
+
+The library provides components for a complete checkout flow:
+
+1. **Personal Information** - 11 fields + 2 consent checkboxes
+2. **Contact Details** - 6 address fields + mailing checkbox
+3. **Health Information** - 2 measurements + health questions (gender-specific)
+
+#### Session Storage Requirements
+
+```typescript
+// Required before navigating to checkout
+session.setItem('plan', {
+  name: 'Plan A',
+  premiumInfo: { currency: 'RM', monthlyAmount: '25' }
+});
+
+session.setItem('product', {
+  name: 'LIFE BYOND',
+  logoUrl: 'url-to-logo'
+});
+```
+
+#### Navigation Flow
+
+```
+PDP (/en/ammetlife-pdp)
+  ↓ Click "Buy now"
+Checkout Step 1/3 (Personal Info) ← Back → PDP
+  ↓ Click "Next"
+Checkout Step 2/3 (Contact Details) ← Back → Step 1
+  ↓ Click "Next"
+Checkout Step 3/3 (Health Information) ← Back → Step 2
+  ↓ Click "Submit"
+Payment (/en/payment-options)
+```
+
+#### Back Button Logic
+
+```typescript
+const handleBack = () => {
+  if (currentStep === 0) {
+    // On first step, redirect to PDP
+    window.location.href = `/${currentLocale}/ammetlife-pdp`;
+  } else {
+    // On other steps, go to previous step
+    setCurrentStep(currentStep - 1);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+};
+```
+
+#### Validation Rules
+
+**Personal Information:**
+
+- Full name: minimum 2 characters
+- NRIC: numbers and dashes only
+- DOB: 30 days to 80 years old
+- Bank account: numbers only
+- Bank confirmation: must be checked
+
+**Contact Details:**
+
+- Phone: 9-14 digits
+- Email: valid format
+- Address: minimum 10 characters
+- Postal code: exactly 5 digits
+
+**Health Information:**
+
+- Weight: 20-300 kg
+- Height: 50-250 cm
+- All questions: must select Yes or No
+
+### Recommendations Feature
+
+#### User Flow
+
+```
+1. User sees "See my recommendations" button
+   ↓ User clicks
+2. Mobile drawer slides up from bottom (95vh height)
+   ↓
+3. Drawer shows:
+   - Toggle: Domestic/International
+   - 5 Questions with selectable options
+   - Next button
+   ↓ User answers questions
+4. User clicks "Next" button
+   ↓
+5. Data collected, drawer closes, recommendations shown
+```
+
+#### Implementation
+
+```typescript
+import { TravelRecommendations } from '@/components/recommendations';
+import { RecommendationsButton } from '@/components/recommendations/recommendations-button';
+
+export default function MyPage() {
+  const [showRecommendations, setShowRecommendations] = React.useState(false);
+
+  return (
+    <div>
+      <RecommendationsButton
+        onClick={() => setShowRecommendations(true)}
+      />
+
+      <TravelRecommendations
+        open={showRecommendations}
+        onClose={() => setShowRecommendations(false)}
+        onSubmit={(data) => {
+          console.log('User selected:', data);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+#### Data Structure
+
+```typescript
+interface TravelRecommendationsData {
+  travelType: 'domestic' | 'international';
+  selectedPlan: string;
+  monthlyIncome: string;
+  monthlyExpenses: string;
+  currentCoverage: string;
+  employerCoverage: string;
+}
+```
+
+### Header Integration
+
+#### NewHeader Implementation
+
+The NewHeader component provides a simplified header with mobile drawer navigation.
+
+**Features:**
+
+1. **Product Navigation** - Dynamically loaded from navLinks
+2. **User Authentication** - Login/Logout flow
+3. **Additional Links** - Partnership, About Us, Blog
+4. **Language Selector** - EN/ID with cookie persistence
+5. **Analytics** - Google Analytics integration
+
+**Performance Improvement:**
+
+| Metric         | Before    | After     |
+| -------------- | --------- | --------- |
+| Component size | 860 lines | 200 lines |
+| Bundle size    | ~45KB     | ~15KB     |
+| Props count    | 30+       | 9         |
+
+### Routing Guide
+
+#### Route Pattern
+
+```
+/:locale/life-checkout
+```
+
+#### Navigation with Locale
+
+```typescript
+// ✅ CORRECT - With locale
+const { currentLocale } = local.getItem('globalState');
+window.location.href = `/${currentLocale}/life-checkout`;
+
+// ❌ WRONG - Without locale
+window.location.href = '/life-checkout';
 ```
 
 ---
@@ -540,6 +1386,7 @@ const vars = createThemeCSSVariables(theme, '--my-app')
 - **Yarn**: `^1.22.0` (recommended) or npm
 
 Check your version:
+
 ```bash
 node --version  # Should be 16.20.0 - 18.x
 yarn --version  # Should be 1.22.x
@@ -594,22 +1441,11 @@ dist/
 ├── esm/
 │   ├── index.js          # ES Module bundle (unminified, ES2015)
 │   └── index.js.map      # Source map
-└── types/
-    └── index.d.ts        # TypeScript definitions
+├── types/
+│   └── index.d.ts        # TypeScript definitions
+└── assets/               # Copied assets
 ```
 
-**Why unminified?**
-- ✅ Consuming apps handle minification
-- ✅ Better debugging experience
-- ✅ Better tree-shaking
-- ✅ No impact on final bundle size
-
-**Why ES2015?**
-- ✅ Maximum compatibility with older webpack configs
-- ✅ No babel-loader required in consuming apps
-- ✅ Optional chaining (`?.`) transpiled to verbose checks
-- ✅ Works with webpack 4+
-
 ### Project Structure
 
 ```
@@ -618,7 +1454,13 @@ d2c-component-library/
 │   ├── components/          # Component implementations
 │   │   ├── Button/
 │   │   ├── Card/
-│   │   └── Banner/
+│   │   ├── Banner/
+│   │   ├── NewHeader/
+│   │   ├── RecommendationsDrawer/
+│   │   ├── ProductSelectionDrawer/
+│   │   ├── CheckoutHeader/
+│   │   ├── PersonalInformationForm/
+│   │   └── ...
 │   ├── context/
 │   │   └── TenantThemeContext.tsx
 │   ├── themes/
@@ -626,7 +1468,9 @@ d2c-component-library/
 │   ├── types/
 │   │   └── tenant.ts       # TypeScript types
 │   ├── utils/
-│   │   └── theme.ts        # Theme utilities
+│   │   ├── theme.ts        # Theme utilities
+│   │   └── assets.ts       # Asset utilities
+│   ├── assets/             # UI icons and tenant logos
 │   └── index.ts            # Main exports
 ├── dist/                    # Build output (generated)
 ├── examples/
@@ -635,8 +1479,129 @@ d2c-component-library/
 ├── rollup.config.cjs       # Rollup build config
 ├── tsconfig.json           # TypeScript config
 ├── package.json
-├── README.md               # This file
-└── CHANGELOG.md            # Version history
+└── README.md               # This file
+```
+
+---
+
+## 📖 Storybook
+
+The library includes Storybook for component documentation and testing.
+
+### Running Storybook
+
+```bash
+# Start Storybook dev server
+yarn storybook
+# Opens at http://localhost:6006
+
+# Build static Storybook
+yarn build-storybook
+# Output in storybook-static/
+```
+
+### Available Stories
+
+**NewHeader Stories (12 scenarios):**
+
+1. Default - Basic header with Igloo branding
+2. Authenticated User - Header with logged-in user menu
+3. Mobile View - Responsive mobile layout
+4. CIMB Tenant - CIMB branding
+5. AmMetLife Tenant - AmMetLife branding
+6. Minimal Header - Bare-bones implementation
+7. Custom Drawer Content - Advanced customization
+8. Many Menu Items - Stress test with scrolling
+9. Without Logo - Edge case testing
+10. With Internationalization - i18n integration
+11. All Tenants Comparison - Side-by-side view
+12. Responsive Demo - Interactive responsive testing
+
+**Other Component Stories:**
+
+- RecommendationsDrawer - Complete questionnaire flow
+- ProductSelectionDrawer - Product grid selection
+- CheckoutHeader - Progress and product display
+- All checkout components
+
+### Keyboard Shortcuts
+
+| Key | Action              |
+| --- | ------------------- |
+| `F` | Toggle fullscreen   |
+| `S` | Toggle sidebar      |
+| `A` | Toggle addons panel |
+| `T` | Toggle toolbar      |
+| `D` | Toggle dark mode    |
+| `/` | Search stories      |
+
+---
+
+## 🔧 Build Pipeline
+
+### Problems Solved
+
+1. **Module parse error**: Webpack couldn't parse igloo-d2c-components ESM format
+2. **Source map error**: Terser plugin couldn't process source maps
+
+### Solutions Applied
+
+#### 1. Library: Disabled Source Maps
+
+```javascript
+// rollup.config.cjs
+output: [
+  {
+    file: packageJson.main,
+    format: 'cjs',
+    sourcemap: false,  // ✅ Disabled
+    exports: 'named',
+    banner: '"use client"',
+  },
+]
+```
+
+#### 2. Consumer App: Webpack Configuration
+
+```typescript
+// .umirc.ts
+chainWebpack: (memo, { type, webpack }) => {
+  // Prefer CommonJS over ESM
+  memo.resolve.mainFields.clear().add('main').add('module').add('browser');
+
+  // Include igloo-d2c-components in babel transpilation
+  memo.module
+    .rule('js')
+    .include.add(/node_modules[\\/]igloo-d2c-components/)
+    .end();
+}
+```
+
+### CI/CD Pipeline Options
+
+**Option A: Publish to npm (Recommended)**
+
+```bash
+cd d2c-component-library
+npm publish --access public
+```
+
+**Option B: Use Git URL**
+
+```json
+{
+  "igloo-d2c-components": "git+https://gitlab.com/axinan/fe/d2c-component-library.git#main"
+}
+```
+
+**Option C: Multi-Repo CI/CD**
+
+```yaml
+before_script:
+  - cd ..
+  - git clone https://gitlab.com/axinan/fe/d2c-component-library.git
+  - cd d2c-component-library && yarn install && yarn build
+  - cd ../b2c-web-demo && yarn install
 ```
 
 ---
@@ -646,21 +1611,21 @@ d2c-component-library/
 ### Prerequisites
 
 1. **Ensure clean working directory:**
+
    ```bash
    git status  # Should be clean
    ```
 
 2. **Update version in package.json:**
+
    ```json
    {
      "version": "1.0.7"
    }
    ```
 
-3. **Update CHANGELOG.md:**
-   Document changes in the new version section
+3. **Build the library:**
 
-4. **Build the library:**
    ```bash
    yarn build
    ```
@@ -668,15 +1633,13 @@ d2c-component-library/
 ### Publishing to NPM
 
 **Set up NPM token:**
+
 ```bash
-# Get token from https://www.npmjs.com/settings/YOUR_USERNAME/tokens
 export NPM_AUTH_TOKEN="npm_your_actual_token"
-
-# Or add to ~/.npmrc globally
-//registry.npmjs.org/:_authToken=npm_your_token
 ```
 
 **Publish:**
+
 ```bash
 # Automated script with safety checks
 ./publish-to-npm.sh
@@ -686,137 +1649,22 @@ yarn build
 npm publish --access public
 ```
 
-### Publishing to GitLab Package Registry
-
-**Set up GitLab token:**
-```bash
-# Get token from https://gitlab.com/-/profile/personal_access_tokens
-# Scopes: api, read_registry, write_registry
-export GITLAB_NPM_TOKEN="glpat-your-token"
-```
-
-**Configure `.npmrc` for GitLab:**
-```ini
-@igloo:registry=https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/
-//gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/:_authToken=${GITLAB_NPM_TOKEN}
-```
-
-**Publish:**
-```bash
-yarn build
-npm publish
-```
-
-### CI/CD Publishing
-
-The library includes a GitLab CI/CD configuration (`.gitlab-ci.yml`) that automatically:
-
-1. **Runs on main branch** or tags
-2. **Lints and type-checks** code
-3. **Builds** the library
-4. **Publishes** to registry (if tag)
-
-**Trigger CI/CD publish:**
-```bash
-# Create and push a tag
-git tag v1.0.7
-git push origin v1.0.7
-```
-
 ### Version Management
 
 **Semantic Versioning:**
+
 - **Major** (1.0.0 → 2.0.0): Breaking changes
 - **Minor** (1.0.0 → 1.1.0): New features, backwards compatible
 - **Patch** (1.0.0 → 1.0.1): Bug fixes
 
 **Update version:**
-```bash
-# Manually in package.json
-"version": "1.0.7"
 
-# Or using npm version
+```bash
 npm version patch  # 1.0.6 → 1.0.7
 npm version minor  # 1.0.6 → 1.1.0
 npm version major  # 1.0.6 → 2.0.0
 ```
 
-### Post-Publishing
-
-After publishing:
-
-1. **Tag the release:**
-   ```bash
-   git tag v1.0.7
-   git push origin v1.0.7
-   ```
-
-2. **Update consuming apps:**
-   ```bash
-   cd ../b2c-web-demo
-   yarn upgrade igloo-d2c-components@latest
-   ```
-
-3. **Announce the release** to the team
-
----
-
-## 📖 Storybook
-
-The library includes Storybook for component documentation and testing.
-
-### Running Storybook
-
-```bash
-# Start Storybook dev server
-yarn storybook
-# Opens at http://localhost:6006
-
-# Build static Storybook
-yarn build-storybook
-# Output in storybook-static/
-```
-
-### Storybook Features
-
-- **Component Playground** - Interactive component testing
-- **Props Documentation** - Auto-generated from TypeScript
-- **Theme Switching** - Test with different tenant themes
-- **Responsive Design** - Test different viewports
-- **Accessibility** - Built-in a11y addon
-
-### Adding Stories
-
-Create a `.stories.tsx` file next to your component:
-
-```tsx
-// src/components/MyComponent/MyComponent.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react'
-import { TenantThemeProvider, iglooTheme } from '../../index'
-import { MyComponent } from './MyComponent'
-
-const meta: Meta<typeof MyComponent> = {
-  title: 'Components/MyComponent',
-  component: MyComponent,
-  decorators: [
-    (Story) => (
-      <TenantThemeProvider tenantId="igloo" theme={iglooTheme}>
-        <Story />
-      </TenantThemeProvider>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof MyComponent>
-
-export const Default: Story = {
-  args: {
-    prop1: 'value1',
-  },
-}
-```
-
 ---
 
 ## 🔬 Technical Details
@@ -824,6 +1672,7 @@ export const Default: Story = {
 ### Build Configuration
 
 **Rollup Configuration** (`rollup.config.cjs`):
+
 ```javascript
 {
   input: 'src/index.ts',
@@ -843,19 +1692,6 @@ export const Default: Story = {
       banner: '"use client"',
     },
   ],
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    typescript({
-      tsconfig: './tsconfig.json',
-      compilerOptions: {
-        declaration: false,
-        target: 'ES2015', // For compatibility
-      },
-    }),
-    // NO terser() - libraries should not be minified
-  ],
 }
 ```
 
@@ -881,17 +1717,6 @@ export const Default: Story = {
 }
 ```
 
-### Package Exports
-
-```json
-{
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "files": ["dist", "README.md"]
-}
-```
-
 ---
 
 ## 🐛 Troubleshooting
@@ -899,129 +1724,107 @@ export const Default: Story = {
 ### Webpack Module Parse Error
 
 **Error:**
+
 ```
 Module parse failed: Unexpected token
 ```
 
-**Cause:** Webpack can't parse the library output.
-
 **Solution:**
 
-1. **Check library build target:** The library should be built with ES2015 target (✅ already configured)
-2. **Rebuild library:**
-   ```bash
-   cd d2c-component-library
-   yarn clean && yarn build
-   ```
-3. **Reinstall in consuming app:**
-   ```bash
-   cd ../b2c-web-demo
-   rm -rf node_modules/igloo-d2c-components
-   yarn install
-   ```
-
-**Prevention:** The library is configured to output ES2015 JavaScript which is compatible with webpack 4+. Modern syntax like optional chaining (`?.`) is transpiled to verbose null checks.
+```bash
+cd d2c-component-library
+yarn clean && yarn build
+cd ../b2c-web-demo
+rm -rf node_modules/igloo-d2c-components
+yarn install
+```
 
 ### Theme Not Found Error
 
 **Error:**
+
 ```
 Theme not found for tenant: xxx
 ```
 
 **Solution:** Use valid tenant IDs: `'igloo'`, `'cimb'`, or `'ammetlife'`.
 
-```typescript
-import { isValidTenantId, getTenantTheme } from 'igloo-d2c-components'
-
-if (isValidTenantId(tenantId)) {
-  const theme = getTenantTheme(tenantId)
-} else {
-  console.error('Invalid tenant ID:', tenantId)
-}
-```
-
 ### TypeScript Errors with Imports
 
 **Error:**
+
 ```
 Module '"igloo-d2c-components"' has no exported member 'iglooTheme'
 ```
 
 **Solution:**
 
-1. **Rebuild the library:**
-   ```bash
-   cd d2c-component-library
-   yarn build
-   ```
-
-2. **Reinstall in consuming app:**
-   ```bash
-   cd ../b2c-web-demo
-   yarn remove igloo-d2c-components
-   yarn add igloo-d2c-components@file:../d2c-component-library
-   ```
-
-3. **Restart TypeScript server** in your IDE:
-   - VS Code: Cmd+Shift+P → "TypeScript: Restart TS Server"
+1. Rebuild the library: `yarn build`
+2. Reinstall in consuming app: `yarn install`
+3. Restart TypeScript server in your IDE
 
 ### Build Failures
 
 **Error:** Build fails with memory issues
 
 **Solution:**
+
 ```bash
 export NODE_OPTIONS="--max-old-space-size=4096"
 yarn build
 ```
 
-**Error:** Type errors during build
+### Asset Issues
 
-**Solution:**
-```bash
-# Check types first
-yarn type-check
+**Logos not displaying:**
 
-# Fix any type errors, then build
-yarn build
-```
+1. Run `yarn copy-assets` in consuming app
+2. Verify assets in `public/assets/tenants/`
+3. Check theme path: `/assets/tenants/igloo/logo.svg`
 
-### Missing Peer Dependencies
+### Routing Issues
 
-**Warning:** `peer dependency "react" not installed`
-
-**Solution:** Install peer dependencies in consuming app:
-```bash
-yarn add react@17 react-dom@17 @mui/material@5 @emotion/react @emotion/styled
-```
+**Issue: 404 on /life-checkout**
+Use locale prefix: `/en/life-checkout`, not `/life-checkout`
 
 ---
 
-## 🎯 Best Practices
+## 📝 Changelog
+
+### [Unreleased]
+
+#### Added
 
-### For Library Development
+- **CheckoutProgress** - Progress bar component with step indicator
+- **ProductCard** - Product information card for checkout flows
+- **CheckoutHeader** - Complete checkout header combining progress and product card
+- **CheckoutFormButton** - Fixed/floating button for form submission
+- **HealthQuestionGroup** - Health question component with Yes/No options
+- **ProductSelectionDrawer** - Mobile-first bottom drawer for product selection
+- **PersonalInformationForm** - Personal details form component
+- **ContactDetailsForm** - Contact and address form component
+- **HealthInformationForm** - Health measurements and questions form
+- Comprehensive Storybook documentation
+- Integration guides for multi-tenant architecture
 
-1. **Always build before testing** - Run `yarn build` after changes
-2. **Use ES2015 features** - Avoid ES2020+ syntax
-3. **Test in consuming apps** - Test changes in b2c-web-demo
-4. **Update CHANGELOG** - Document all changes
-5. **Version appropriately** - Follow semantic versioning
+### [1.0.1] - 2025-11-11
 
-### For Library Usage
+#### Changed
 
-1. **Wrap with TenantThemeProvider** - Required for theming to work
-2. **Use pre-built themes** - Import `iglooTheme`, `cimbTheme`, `ammetlifeTheme`
-3. **Use tenantColored prop** - For tenant-specific styling
-4. **Maintain type safety** - Use provided TypeScript types
-5. **Extend via composition** - Don't modify library components
+- Package name configured for public NPM registry
+- Updated all documentation
 
-### For Theme Management
+### [1.0.0] - 2025-10-31
 
-1. **Update themes in library** - Not in consuming apps
-2. **Test all tenants** - When changing theme structure
-3. **Document breaking changes** - If theme interface changes
-4. **Version bump** - Increment version after theme changes
+#### Added
+
+- Initial release of D2C Component Library
+- `TenantThemeProvider` - Context provider for tenant theming
+- Hooks: `useTenantTheme()`, `useTenantId()`, `useIsTenant()`
+- Components: `Button`, `Card`, `Banner`
+- Utility functions for theme management
+- Full TypeScript support
+- ESM and CommonJS builds
 
 ---
 
@@ -1031,31 +1834,35 @@ yarn add react@17 react-dom@17 @mui/material@5 @emotion/react @emotion/styled
 
 1. **Fork the repository**
 2. **Create a feature branch:**
+
    ```bash
    git checkout -b feature/my-new-feature
    ```
+
 3. **Make your changes**
 4. **Test thoroughly:**
+
    ```bash
    yarn lint
    yarn type-check
    yarn build
    ```
+
 5. **Test in consuming app:**
+
    ```bash
    cd ../b2c-web-demo
    yarn install
    yarn start-igloo-dev
    ```
+
 6. **Commit your changes:**
+
    ```bash
    git commit -m "feat: add new feature"
    ```
-7. **Push to branch:**
-   ```bash
-   git push origin feature/my-new-feature
-   ```
-8. **Create a Pull Request**
+
+7. **Push and create a Pull Request**
 
 ### Commit Message Format
 
@@ -1063,13 +1870,10 @@ Follow [Conventional Commits](https://www.conventionalcommits.org/):
 
 ```
 <type>(<scope>): <description>
-
-[optional body]
-
-[optional footer]
 ```
 
 **Types:**
+
 - `feat`: New feature
 - `fix`: Bug fix
 - `docs`: Documentation changes
@@ -1078,22 +1882,15 @@ Follow [Conventional Commits](https://www.conventionalcommits.org/):
 - `test`: Test additions/changes
 - `chore`: Maintenance tasks
 
-**Examples:**
-```
-feat(themes): add new tenant theme
-fix(Button): correct hover state color
-docs: update installation guide
-chore: bump version to 1.0.7
-```
-
 ### Adding a New Tenant
 
 1. **Add theme to `src/themes/index.ts`:**
+
    ```typescript
    export const newTenantTheme: TenantThemeConfig = {
      palette: { /* ... */ },
      typography: { /* ... */ },
-     logo: '/assets/new-tenant/logo.svg',
+     logo: '/assets/tenants/newtenant/logo.svg',
      favicon: 'https://...',
    }
 
@@ -1106,18 +1903,26 @@ chore: bump version to 1.0.7
    ```
 
 2. **Update TenantId type in `src/types/tenant.ts`:**
+
    ```typescript
    export type TenantId = 'igloo' | 'cimb' | 'ammetlife' | 'newtenant'
    ```
 
-3. **Build and test:**
+3. **Add logo asset to `src/assets/tenants/newtenant/`**
+
+4. **Build and test:**
+
    ```bash
    yarn build
-   cd ../b2c-web-demo
-   yarn install
    ```
 
-4. **Update documentation and CHANGELOG**
+### Adding New Components
+
+1. Create component folder in `src/components/`
+2. Include: `ComponentName.tsx`, `styled.tsx`, `index.ts`
+3. Add Storybook stories
+4. Export from `src/index.ts`
+5. Update documentation
 
 ---
 
@@ -1135,16 +1940,16 @@ Frontend Engineering Team - Axinan/Igloo
 
 ## 🔗 Links
 
-- **Repository:** https://gitlab.iglooinsure.com/axinan/fe/d2c-component-library
-- **NPM Package:** https://www.npmjs.com/package/igloo-d2c-components
-- **Consuming App:** https://gitlab.iglooinsure.com/axinan/fe/b2c-web-demo
-- **Issue Tracker:** https://gitlab.iglooinsure.com/axinan/fe/d2c-component-library/-/issues
+- **Repository:** <https://gitlab.iglooinsure.com/axinan/fe/d2c-component-library>
+- **NPM Package:** <https://www.npmjs.com/package/igloo-d2c-components>
+- **Consuming App:** <https://gitlab.iglooinsure.com/axinan/fe/b2c-web-demo>
 
 ---
 
 ## 📝 Quick Reference
 
 ### Installation
+
 ```bash
 # Local development
 yarn add igloo-d2c-components@file:../d2c-component-library
@@ -1154,38 +1959,45 @@ yarn add igloo-d2c-components@latest
 ```
 
 ### Import Themes
+
 ```typescript
 import { iglooTheme, cimbTheme, ammetlifeTheme, getTenantTheme } from 'igloo-d2c-components'
 ```
 
 ### Import Components
+
 ```typescript
-import { Button, Card, Banner, TenantThemeProvider } from 'igloo-d2c-components'
+import { Button, Card, Banner, TenantThemeProvider, NewHeader, CheckoutHeader } from 'igloo-d2c-components'
 ```
 
 ### Import Hooks
+
 ```typescript
-import { useTenantTheme, useTenantId, useIsTenant } from 'igloo-d2c-components'
+import { useTenantTheme, useTenantId, useIsTenant, useTenantLogo } from 'igloo-d2c-components'
 ```
 
 ### Build & Publish
+
 ```bash
 # Build
 yarn build
 
 # Publish to NPM
 ./publish-to-npm.sh
+```
 
-# Publish to GitLab
-npm publish
+### Test All Tenants (in b2c-web-demo)
+
+```bash
+yarn start-igloo        # Port 8000
+yarn start-ammetlife    # Port 8001
+yarn start-cimb         # Port 8002
 ```
 
 ---
 
-**Version:** 1.0.6
-**Last Updated:** November 12, 2025
+**Version:** 1.0.11+
+**Last Updated:** December 2025
 **Node.js:** >=16.20.0 <=18.x
 **Target:** ES2015
 **Output:** Unminified
-
-For version history, see [CHANGELOG.md](./CHANGELOG.md)