kirukib 9d889e6209 additional-email-templates

2025-12-21 19:09:45 +03:00

6.0 KiB

Raw Permalink Blame History

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

Install dependencies:

npm install

Start Storybook:

npm run dev

Open your browser to http://localhost:6006

Usage

Viewing Templates

Start Storybook with npm run dev
Navigate to the "Emails" section in the Storybook sidebar
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

Navigate to "Customization > Customization Panel" in Storybook
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
Changes are applied instantly to all email templates
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

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

Development

Adding New Templates

Create a new component in src/emails/ (appropriate subfolder)
Use the EmailLayout component as a wrapper
Use useBrandingConfig hook to access branding configuration
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

6.0 KiB Raw Permalink Blame History