# Fortune System Email Templates

A collection of React Email templates for iGaming systems with live customization capabilities. Preview templates in Storybook and customize colors, fonts, and branding in real-time.

## Features

- 📧 **Email Templates**: 5 professional email templates for promotional and reporting purposes
  - Promotional: Raffle, Referral Bonus, Deposit Bonus
  - Reports: Weekly Activity Report, Monthly Activity Report
- 🎨 **Live Customization**: Real-time preview updates as you change colors and fonts
- 🎯 **Color Pickers**: Visual color pickers for primary, secondary, and background colors
- 🔤 **Font Selection**: Dropdown with 10 popular web-safe and Google Fonts
- ⚙️ **Configurable Branding**: Easy configuration through a centralized config file
- 📱 **Email Compatible**: Uses React Email components for maximum email client compatibility
- 🎭 **Storybook Preview**: Professional preview system for showcasing templates to clients

## Project Structure

```
fortune-sys-emails/
├── src/
│   ├── emails/
│   │   ├── promotional/          # Promotional email templates
│   │   └── reports/              # Report email templates
│   ├── components/               # Reusable email components
│   ├── config/                   # Branding configuration
│   ├── hooks/                    # React hooks
│   └── utils/                    # Helper functions
├── .storybook/                   # Storybook configuration
├── stories/                      # Storybook stories
└── package.json
```

## Installation

1. Install dependencies:

```bash
npm install
```

2. Start Storybook:

```bash
npm run dev
```

3. Open your browser to `http://localhost:6006`

## Usage

### Viewing Templates

1. Start Storybook with `npm run dev`
2. Navigate to the "Emails" section in the Storybook sidebar
3. Browse through the available templates:
   - **Promotional**: Raffle Email, Referral Bonus Email, Deposit Bonus Email
   - **Reports**: Weekly Report Email, Monthly Report Email

### Customizing Branding

#### Method 1: Live Customization Panel

1. Navigate to "Customization > Customization Panel" in Storybook
2. Use the controls to:
   - Select a font from the dropdown (10 popular fonts available)
   - Pick colors using the color pickers:
     - Primary Color
     - Secondary Color
     - Background Color
3. Changes are applied instantly to all email templates
4. Customizations are saved in browser localStorage for persistence

#### Method 2: Configuration File

Edit `src/config/branding.config.ts` to set default branding:

```typescript
export const defaultBrandingConfig: BrandingConfig = {
  companyName: "Your Company Name",
  logoUrl: "https://your-logo-url.com/logo.png",
  colors: {
    primary: "#0066CC",
    secondary: "#00CC66",
    background: "#F5F5F5",
    text: "#333333",
  },
  font: {
    family: "Arial, sans-serif",
  },
  contact: {
    email: "support@yourcompany.com",
  },
};
```

### Available Fonts

The following fonts are available in the customization panel:

- Arial
- Helvetica
- Times New Roman
- Georgia
- Verdana
- Roboto
- Open Sans
- Lato
- Montserrat
- Poppins

## Email Templates

### Promotional Templates

#### Raffle Email
- **Purpose**: Promote raffle events and contests
- **Props**: `raffleName`, `prizeAmount`, `entryDeadline`, `drawDate`, `entryLink`, `participantName`

#### Referral Bonus Email
- **Purpose**: Encourage user referrals with bonus offers
- **Props**: `referrerName`, `referralBonus`, `referredBonus`, `referralCode`, `referralLink`, `expirationDate`

#### Deposit Bonus Email
- **Purpose**: Promote deposit bonuses and special offers
- **Props**: `playerName`, `bonusPercentage`, `maxBonus`, `minimumDeposit`, `bonusCode`, `depositLink`, `expirationDate`

### Report Templates

#### Weekly Report Email
- **Purpose**: Weekly activity summary for administrators
- **Props**: `reportPeriod`, `totalDeposits`, `totalWithdrawals`, `activeUsers`, `newUsers`, `totalRevenue`, `topGames`

#### Monthly Report Email
- **Purpose**: Comprehensive monthly activity report
- **Props**: `reportMonth`, `totalDeposits`, `totalWithdrawals`, `activeUsers`, `newUsers`, `totalRevenue`, `averageDeposit`, `retentionRate`, `topGames`, `growthStats`

## Customization Workflow

1. **Open Storybook**: Run `npm run dev`
2. **Open Customization Panel**: Navigate to "Customization > Customization Panel"
3. **Customize**: Adjust colors and fonts using the controls
4. **Preview**: Navigate to any email template to see the changes
5. **Share**: Share the Storybook URL with clients for feedback
6. **Export**: Copy the customization values and update `branding.config.ts` for persistence

## Development

### Adding New Templates

1. Create a new component in `src/emails/` (appropriate subfolder)
2. Use the `EmailLayout` component as a wrapper
3. Use `useBrandingConfig` hook to access branding configuration
4. Create a story file in `stories/` directory

Example:

```typescript
import { EmailLayout } from "../../components/EmailLayout";
import { useBrandingConfig } from "../../hooks/useBrandingConfig";

export const MyNewEmail = () => {
  const config = useBrandingConfig();
  return (
    <EmailLayout title="My Email">
      {/* Your email content */}
    </EmailLayout>
  );
};
```

### Building

Build Storybook for static hosting:

```bash
npm run build
```

The built files will be in the `storybook-static` directory.

## Technologies Used

- **React Email**: For email-compatible React components
- **Storybook**: For component preview and documentation
- **TypeScript**: For type safety
- **React Color**: For color picker functionality

## Notes

- All templates are responsive and tested for email client compatibility
- Customizations made in the panel are stored in browser localStorage
- The configuration file (`branding.config.ts`) sets the default values
- Google Fonts (Roboto, Open Sans, Lato, Montserrat, Poppins) need to be loaded in your email system or use web-safe fonts for maximum compatibility

## License

Private project - All rights reserved