Email System

ZeroDrag uses Resend for transactional emails with React-based templates.

What This System Does

The email system handles:

  • Magic link authentication emails
  • Welcome emails for new users
  • Subscription confirmation emails
  • Payment failed notifications
  • Contact form submissions
  • React-based email templates

Why It Exists

Email is essential for user communication, authentication (magic links), and transactional notifications. The React-based template system allows you to build beautiful, responsive emails using familiar component patterns.

When You Need to Care About It

You'll work with the email system when:

  • Customizing email templates or styling
  • Adding new email types (notifications, receipts, etc.)
  • Testing email delivery
  • Configuring sender addresses or domains

Key Concepts

React Email Templates

Email templates are React components using @react-email/components. They render to HTML and are sent via Resend's API.

EmailService

Centralized service object (EmailService) provides methods for sending each email type. All emails go through the same sending function.

Magic Links

Magic link emails are handled by the authentication system, not the email templates. They're automatically sent when users request passwordless login.

Important Files

/lib/email.ts

Email service and sender. Contains EmailService object with methods for each email type.

/emails/templates/WelcomeEmail.tsx

Welcome email template for new users.

/emails/templates/SubscriptionConfirmationEmail.tsx

Subscription confirmation email sent after successful payment.

/emails/templates/PaymentFailedEmail.tsx

Payment failed notification email.

/emails/templates/ContactFormEmail.tsx

Contact form submission email sent to admins.

/app/api/send-welcome-email/route.ts

API endpoint for sending welcome emails (can be triggered manually).

Email Types

Magic Link

Built into NextAuth. Automatically sent when users request passwordless login.

Welcome Email

Sent manually or after signup. Uses WelcomeEmail.tsx template.

Subscription Confirmation

Sent after successful payment. Uses SubscriptionConfirmationEmail.tsx template.

Payment Failed

Sent when payment fails. Uses PaymentFailedEmail.tsx template.

Contact Form

Sent to admins when contact form is submitted. Uses ContactFormEmail.tsx template.

Sending Emails

Use the EmailService object:

typescript
import { EmailService } from "@/lib/email";

// Welcome email
await EmailService.sendWelcomeEmail({
  to: "user@example.com",
  userName: "John",
  loginUrl: "https://yourapp.com/auth",
});

// Subscription confirmation
await EmailService.sendSubscriptionConfirmation({
  to: "user@example.com",
  userName: "John",
  planName: "Pro Plan",
  amount: "$29.00",
  nextBillingDate: "Feb 1, 2025",
});

// Payment failed
await EmailService.sendPaymentFailedEmail({
  to: "user@example.com",
  userName: "John",
  amount: "$29.00",
  failureReason: "Card declined",
  retryUrl: "https://yourapp.com/billing",
});

Creating New Email Templates

To add a new email type:

  1. Create template in /emails/templates/:
    tsx
    // /emails/templates/MyEmail.tsx
import { Html, Head, Body, Container, Text, Button } from "@react-email/components";

interface MyEmailProps {
  userName: string;
  actionUrl: string;
}

export const MyEmail = ({ userName, actionUrl }: MyEmailProps) => (
  <Html>
    <Head />
    <Body style={{ fontFamily: "sans-serif" }}>
      <Container>
        <Text>Hi {userName},</Text>
        <Button href={actionUrl}>Take Action</Button>
      </Container>
    </Body>
  </Html>
);
  2. Add method to EmailService in /lib/email.ts:
    typescript
    async sendMyEmail({ to, userName, actionUrl }: {
  to: string;
  userName: string;
  actionUrl: string;
}) {
  const { MyEmail } = await import("@/emails/templates/MyEmail");
  return sendEmail({
    to,
    subject: "Your Subject",
    template: MyEmail,
    templateProps: { userName, actionUrl },
  });
}
  3. Use it in your code

What You Can Customize

Email Templates

All templates in /emails/templates/ can be customized. Modify styling, content, or layout as needed.

Add New Email Types

Add new methods to EmailService in /lib/email.ts following the existing pattern.

Sender Address

Set EMAIL_FROM environment variable. Defaults to Resend's default if not set.

What NOT to Touch

Core sendEmail Function

The sendEmail function in /lib/email.ts handles the core sending logic. Don't modify its signature or core functionality.

Magic Link Email

Magic link emails are handled by the authentication system. Don't try to customize them through the email templates.

Related Sections