Amba Email Templates

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

Features

• 🎨 12 email templates matching the AmbaPay app design:
  • Welcome Email
  • Transaction Complete
  • Event Ticket (with QR code)
  • Payment Request
  • Referral Success (Base User)
  • Referral Stats (Creator)
  • Referral Signup
  • Waitlist
  • Promotional
  • KYC Verification
  • Account Banned
  • Transaction Review
• 🖼️ 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 (Base User)

Sent to base users when someone creates an account AND makes a transaction using their referral code. They earn points.

Props:

• userName (string): The user's name
• referredUserName (string): Name of person who used the code
• referralCode (string): The referral code used
• pointsEarned (number): Points earned from the referral
• transactionAmount (string): Transaction amount that triggered the reward

6. Referral Stats (Creator)

Sent to creators based on admin settings, showing weekly referral performance statistics.

Props:

• userName (string): The creator's name
• weekPeriod (string): Week period (e.g., "Jan 1 - Jan 7, 2024")
• newReferralsThisWeek (number): Number of new referrals this week
• newUsersSignedUp (number): Number of new users who signed up
• totalPaymentsMade (string): Total amount of payments made
• paymentCount (number): Number of transactions/payments
• referralCode (string): The creator's referral code

7. Referral Signup

Sent when someone signs up using a referral code (before they make a transaction).

Props:

• userName (string): The user's name who made the referral
• referredUserName (string): Name of person who signed up
• referralCode (string): The referral code used

8. Waitlist

Sent to users who have joined the waitlist.

Props:

• userName (string): The user's name
• position (number, optional): Position in the waitlist

9. Promotional

Sent for marketing campaigns and special offers.

Props:

• userName (string): The user's name
• title (string, optional): Email title/heading
• offerTitle (string, optional): Title of the promotional offer
• offerDescription (string, optional): Description of the offer
• ctaText (string, optional): Call-to-action button text
• ctaLink (string, optional): Call-to-action button URL

10. KYC Verification

Sent to users who need to complete KYC (Know Your Customer) verification.

Props:

• userName (string): The user's name
• deadline (string, optional): Deadline to complete verification (e.g., "7 days")

11. Account Banned

Sent when an account is suspended or banned.

Props:

• userName (string): The user's name
• reason (string, optional): Reason for account suspension
• appealLink (string, optional): URL to submit an appeal

12. Transaction Review

Sent when a transaction is under review by security.

Props:

• userName (string): The user's name
• amount (string): Transaction amount
• transactionId (string): Unique transaction ID
• recipient (string): Recipient name
• estimatedTime (string, optional): Estimated review time (e.g., "1-2 business days")

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