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:

npm install

2. Start Storybook:

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:

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:

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:

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