OnlyAutomator uses React Email to create and send beautiful, responsive emails. This document explains how to work with email templates in the project.

​
Overview

React Email allows us to:
  • Create email templates using React components
  • Preview emails during development
  • Ensure consistent styling across different email clients
  • Send emails programmatically using services like Resend
The email templates are stored in the lib/react-email/templates directory and can be previewed using the included preview server.

​
Directory Structure

lib/react-email/
  ├── components/       # Shared email components (like Footer)
  ├── styles/           # Shared email styles
  ├── templates/        # Email templates
  │   ├── AccountSetupEmail.tsx
  │   ├── WelcomeEmail.tsx
  │   ├── FeedbackRequestEmail.tsx
  │   └── LoginAssistanceEmail.tsx
  └── utils/            # Utility functions and constants
      └── email-utils.tsx

​
Creating a New Email Template

To create a new email template:
  1. Create a new file in the lib/react-email/templates directory
  2. Use the React Email components and our shared styles
  3. Export the component as the default export
Here’s a basic template example: 
import * as React from 'react';
import {
  Body,
  Button,
  Container,
  Head,
  Html,
  Preview,
  Section,
  Text,
  Hr
} from '@react-email/components';
import { Footer } from '../components/Footer';
import * as styles from '../styles/shared';
import { LogoSVG, URLs, TemplateVariables } from '../utils/email-utils';

interface MyEmailProps extends TemplateVariables {
  customProp?: string;
}

const MyEmail: React.FC<MyEmailProps> = ({
  first_name = 'there',
  customProp = 'default value'
}) => {
  return (
    <Html>
      <Head />
      <Preview>Your email subject/preview text</Preview>
      <Body style={styles.main}>
        <Container style={styles.container}>
          <Section style={styles.box}>
            <LogoSVG />
            <Text style={styles.heading}>Email Heading</Text>
            <Text style={styles.paragraph}>Hi {first_name},</Text>
            <Text style={styles.paragraph}>
              Your main content goes here. {customProp}
            </Text>
            
            <Section style={styles.buttonContainer}>
              <Button style={styles.button} href={URLs.DASHBOARD_URL}>
                Call to Action
              </Button>
            </Section>
            
            <Hr style={styles.hr} />
            <Footer />
          </Section>
        </Container>
      </Body>
    </Html>
  );
};

export default MyEmail;

​
Available Components and Styles

​
Core Components

React Email provides these core components:
  • <Html>, <Head>, <Body> - Structure components
  • <Container>, <Section> - Layout components
  • <Text>, <Heading>, <Hr> - Content components
  • <Link>, <Button> - Interactive components
  • <Img> - Image component

​
Custom Components

We’ve created these shared components:
  • <Footer /> - Consistent footer with social links and copyright
  • <LogoSVG /> - OnlyAutomator logo

​
Styles

Use the shared styles from styles/shared.ts:
  • styles.main - Email body style
  • styles.container - Container style
  • styles.box - Main content box
  • styles.heading - Heading text style
  • styles.paragraph - Paragraph text style
  • styles.buttonContainer - Button container style
  • styles.button - Primary button style
  • styles.secondaryButton - Secondary button style
  • styles.hr - Horizontal rule style

​
Previewing Email Templates

To preview the email templates during development:
  1. Run the email preview server:
npm run email:preview
  1. Open your browser at http://localhost:3001
  2. You’ll see a list of all available email templates
  3. Click on any template to preview it, with options to view in different email clients
The preview server is set up in scripts/email-preview.ts.

​
Sending Emails

To send emails using the templates, we use Resend through our lib/resend.ts utility: 
import { sendEmail } from '@/lib/resend';
import AccountSetupEmail from '@/lib/react-email/templates/AccountSetupEmail';

// In your API route or server component:
await sendEmail({
  to: user.email,
  subject: 'Complete Your OnlyAutomator Setup',
  react: AccountSetupEmail({ 
    first_name: user.firstName,
    setup_link: `${process.env.NEXT_PUBLIC_WEB_SITE_URL_DASHBOARD}/onlyfans`
  })
});

​
Environment Variables

The email templates use these environment variables (defined in email-utils.tsx):
  • NEXT_PUBLIC_WEB_SITE_URL - Main website URL
  • NEXT_PUBLIC_WEB_SITE_URL_DASHBOARD - Dashboard URL
  • NEXT_PUBLIC_WEB_SITE_URL_CHROME_EXTENSION - Chrome extension URL
  • NEXT_PUBLIC_WEB_SITE_URL_DOC - Documentation URL
  • NEXT_PUBLIC_SUPPORT_URL - Support email/contact URL
  • NEXT_PUBLIC_FEEDBACK_FORM_URL - Feedback form URL

​
Using Dynamic Content

Templates can include dynamic content like:
  1. Conditional rendering:
{isPremium ? (
  <Text>Thank you for being a premium member!</Text>
) : (
  <Text>Upgrade to premium for more features.</Text>
)}
  1. Looping over items:
{items.map((item, index) => (
  <Text key={index}>{item.name}: {item.value}</Text>
))}
  1. Dynamic styles based on props:
<Text style={{
  ...styles.paragraph,
  color: isImportant ? '#ff0000' : '#000000'
}}>
  Important information!
</Text>

​
Best Practices

  1. Keep templates modular: Extract common elements into shared components
  2. Test on multiple clients: Use the preview tool to test on different email clients
  3. Use responsive design: Make sure emails look good on both desktop and mobile
  4. Use alt text: Always include descriptive alt text for images
  5. Avoid complex CSS: Email clients have limited CSS support
  6. Use semantic HTML: Use proper heading tags, paragraphs, etc.
  7. Provide text alternatives: Include plain text alternatives when possible

​
Troubleshooting

  • Images not showing: Make sure image URLs are absolute and publicly accessible
  • Styling issues: Some email clients may not support certain CSS properties; stick to basic styling
  • Preview server not starting: Check that you have all necessary dependencies installed
  • Send failures: Verify your Resend API key and email sending limits