155 lines
3.8 KiB
Markdown
155 lines
3.8 KiB
Markdown
# Amba Email Templates
|
|
|
|
A React Email project for creating and previewing email templates for the Amba app.
|
|
|
|
## Features
|
|
|
|
- 🎨 6 email templates matching the AmbaPay app design:
|
|
- Welcome Email
|
|
- Transaction Complete
|
|
- Event Ticket (with QR code)
|
|
- Payment Request
|
|
- Referral Success
|
|
- Waitlist
|
|
- 🖼️ 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
|
|
|
|
### 6. Waitlist
|
|
Sent to users who have joined the waitlist.
|
|
|
|
**Props:**
|
|
- `userName` (string): The user's name
|
|
- `position` (number, optional): Position in the waitlist
|
|
|
|
## 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
|