# 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

```bash
npm install
```

### Preview Templates

Start the preview server to view all email templates:

```bash
npm run preview
```

Then open [http://localhost:3000](http://localhost:3000) in your browser.

### Use React Email CLI

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

```bash
npm run email
```

### Export HTML

Build all templates to HTML:

```bash
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