white-label-insurance-library/README.md

A reusable white-label insurance application component library.

# 📦 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):

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

Install required dependencies:

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

Install your white-label library:

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

```tsx
// 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:

```ts
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:

```bash
npm run build
npm publish
```

---

## 4. 🎨 Overriding Styles

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

```css
/* 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.