📦 How to Use the White-Label Insurance Application Library

This document provides instructions on how to consume and customize the white-label-insurance-library npm package within your own React applications, including how to listen to events.

1. 📥 Consuming the Library

Installation in Consumer App

Create a new React project (if you don't have one):

npm create vite@latest my-consumer-app -- --template react-ts
cd my-consumer-app
npm install

Install required dependencies:

npm install react-router-dom
npm install --save-dev @types/react-router-dom

Install your white-label library:

npm install white-label-insurance-library # Replace with your actual package name

Integration

In your consumer application's entry point (e.g., src/main.tsx), import and render the WhiteLabelApp component. You can pass callback functions as props to WhiteLabelApp to listen for events.

// my-consumer-app/src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { WhiteLabelApp, WhiteLabelAppProps } from 'white-label-insurance-library';

const handleBrandChange: WhiteLabelAppProps['onBrandChange'] = (newBrandKey) => {
  console.log(`Consumer App: Brand changed to: ${newBrandKey}`);
};

const handleFormSubmit: WhiteLabelAppProps['onFormSubmit'] = (formData) => {
  console.log('Form submitted successfully!', formData);
};

const handleQuestionsLoadStart: WhiteLabelAppProps['onQuestionsLoadStart'] = () => {
  console.log('Questions API fetch started...');
};

const handleQuestionsLoadSuccess: WhiteLabelAppProps['onQuestionsLoadSuccess'] = () => {
  console.log('Questions API fetch successful!');
};

const handleQuestionsLoadError: WhiteLabelAppProps['onQuestionsLoadError'] = (error) => {
  console.error('Questions API fetch failed:', error);
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <WhiteLabelApp
        onBrandChange={handleBrandChange}
        onFormSubmit={handleFormSubmit}
        onQuestionsLoadStart={handleQuestionsLoadStart}
        onQuestionsLoadSuccess={handleQuestionsLoadSuccess}
        onQuestionsLoadError={handleQuestionsLoadError}
      />
    </BrowserRouter>
  </React.StrictMode>,
);

You may remove the default App.tsx and App.css if using WhiteLabelApp for all routing.

2. 🎨 Brand Switching

You can switch brands in two ways:

URL Parameter (Initial Load)

Append ?brand=<brandKey> to your application’s URL:

http://localhost:5173/?brand=zurich
http://localhost:5173/?brand=axa
http://localhost:5173/?brand=metlife

Dropdown Selection

Use the "Select Your Brand" dropdown on the Welcome or Questions page. This uses internal context and does not modify the URL.

The onBrandChange callback will be triggered when switching.

3. 🛠 Customization

Defining New Brands

Edit src/branding/brands.ts in the library:

export type BrandKey = 'zurich' | 'axa' | 'metlife' | 'newbrand';

export const brands: Record<BrandKey, Brand> = {
  newbrand: {
    name: 'New Brand Name',
    primaryColor: '#1a1a1a',
    secondaryColor: '#333333',
    fontFamily: '"Arial", sans-serif',
    fontWeight: 400,
    backgroundColor: '#f0f0f0',
    logoUrl: 'https://via.placeholder.com/150/1a1a1a/FFFFFF?text=New+Brand+Logo',
    buttonColor: '#1a1a1a',
    buttonTextColor: '#FFFFFF',
    headingFontSize: '2.0em',
    inputBorderColor: '#555555',
  },
};

Rebuild and publish:

npm run build
npm publish

4. 🎨 Overriding Styles

The library uses CSS variables. You can override them globally in your consumer app:

/* src/index.css */
body {
  --brand-primary: #ff5733;
  --brand-background-color: #f0f8ff;
}

.questions-container {
  box-shadow: 0 0 20px rgba(255, 87, 51, 0.5);
}

✅ Features

• Multi-brand white-label support
• Custom theming via CSS variables
• Callback-based communication for brand and form events
• Easy React Router integration

📜 License

MIT — free to use and customize.