# 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

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