Amba Email Templates

A React Email project for creating and previewing email templates for the Amba app.

Features

• 🎨 5 email templates matching the Amba app design:
  • Welcome Email
  • Transaction Complete
  • Event Ticket (with QR code)
  • Payment Request
  • Referral Success
• 🖼️ Interactive preview page with template switcher
• 🎨 Consistent theming based on Amba app design (green color scheme)
• 📱 Responsive email designs

Getting Started

Install Dependencies

npm install

Preview Templates

Start the preview server to view all email templates:

npm run preview

Then open http://localhost:3000 in your browser.

Use React Email CLI

You can also use the React Email CLI to preview and export templates:

npm run email

Export HTML

Build all templates to HTML:

npm run build

Email Templates

1. Welcome Email

Welcomes new users to the Amba app.

Props:

• userName (string): The user's name

2. Transaction Complete

Sent after a successful transaction.

Props:

• userName (string): The user's name
• amount (string): Transaction amount
• transactionId (string): Unique transaction ID
• recipient (string): Recipient name
• date (string): Transaction date

3. Event Ticket

Sent after purchasing an event ticket, includes QR code.

Props:

• userName (string): The user's name
• eventName (string): Event name
• eventDate (string): Event date
• eventTime (string): Event time
• venue (string): Venue name
• ticketType (string): Type of ticket
• amount (string): Amount paid
• qrCodeUrl (string): URL to QR code image
• ticketNumber (string): Ticket number

4. Payment Request

Sent when someone sends a payment request.

Props:

• userName (string): The user's name
• requesterName (string): Name of person requesting payment
• amount (string): Requested amount
• description (string): Payment description
• requestId (string): Unique request ID
• dueDate (string, optional): Due date

5. Referral Success

Sent when someone uses the user's referral code.

Props:

• userName (string): The user's name
• referredUserName (string): Name of person who used the code
• referralCode (string): The referral code used
• rewardAmount (string): Reward amount earned
• transactionAmount (string): Transaction amount

Project Structure

├── app/                    # Next.js app directory
│   ├── page.tsx           # Preview page with template switcher
│   └── layout.tsx         # Root layout
├── emails/                # Email templates
│   ├── components/        # Reusable email components
│   │   ├── EmailLayout.tsx
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   ├── utils/            # Utilities
│   │   └── logoDataUri.ts
│   ├── theme.ts          # Theme configuration
│   ├── welcome.tsx
│   ├── transaction-complete.tsx
│   ├── event-ticket.tsx
│   ├── payment-request.tsx
│   └── referral-success.tsx
└── public/               # Static assets
    └── logo.svg

Theming

The email templates use a consistent theme defined in emails/theme.ts:

• Primary Color: Dark green (#2d5016)
• Accent Color: Light green (#7cb342)
• Text Color: Light brown/orange (#8d6e63)
• Background: White (#ffffff)

Logo

The logo is embedded as a data URI for email compatibility. For production, you should:

1. Host the logo on your CDN/server
2. Update emails/utils/logoDataUri.ts with the hosted URL
3. Or update the logoUrl prop in EmailLayout

License

MIT