done
This commit is contained in:
parent
838f4f6389
commit
58ab9c2141
76
README.md
76
README.md
|
|
@ -4,13 +4,19 @@ A React Email project for creating and previewing email templates for the Amba a
|
|||
|
||||
## Features
|
||||
|
||||
- 🎨 6 email templates matching the AmbaPay app design:
|
||||
- 🎨 12 email templates matching the AmbaPay app design:
|
||||
- Welcome Email
|
||||
- Transaction Complete
|
||||
- Event Ticket (with QR code)
|
||||
- Payment Request
|
||||
- Referral Success
|
||||
- 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
|
||||
|
|
@ -92,23 +98,79 @@ Sent when someone sends a payment request.
|
|||
- `requestId` (string): Unique request ID
|
||||
- `dueDate` (string, optional): Due date
|
||||
|
||||
### 5. Referral Success
|
||||
Sent when someone uses the user's referral code.
|
||||
### 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
|
||||
- `rewardAmount` (string): Reward amount earned
|
||||
- `transactionAmount` (string): Transaction amount
|
||||
- `pointsEarned` (number): Points earned from the referral
|
||||
- `transactionAmount` (string): Transaction amount that triggered the reward
|
||||
|
||||
### 6. Waitlist
|
||||
### 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
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,7 +5,13 @@ import { TransactionCompleteEmail } from '../../../../emails/transaction-complet
|
|||
import { EventTicketEmail } from '../../../../emails/event-ticket';
|
||||
import { PaymentRequestEmail } from '../../../../emails/payment-request';
|
||||
import { ReferralSuccessEmail } from '../../../../emails/referral-success';
|
||||
import { ReferralStatsEmail } from '../../../../emails/referral-stats';
|
||||
import { ReferralSignupEmail } from '../../../../emails/referral-signup';
|
||||
import { WaitlistEmail } from '../../../../emails/waitlist';
|
||||
import { PromotionalEmail } from '../../../../emails/promotional';
|
||||
import { KycVerificationEmail } from '../../../../emails/kyc-verification';
|
||||
import { AccountBannedEmail } from '../../../../emails/account-banned';
|
||||
import { TransactionReviewEmail } from '../../../../emails/transaction-review';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
const templates: Record<string, React.ComponentType<any>> = {
|
||||
|
|
@ -14,7 +20,13 @@ const templates: Record<string, React.ComponentType<any>> = {
|
|||
'event-ticket': EventTicketEmail,
|
||||
'payment-request': PaymentRequestEmail,
|
||||
'referral-success': ReferralSuccessEmail,
|
||||
'referral-stats': ReferralStatsEmail,
|
||||
'referral-signup': ReferralSignupEmail,
|
||||
waitlist: WaitlistEmail,
|
||||
promotional: PromotionalEmail,
|
||||
'kyc-verification': KycVerificationEmail,
|
||||
'account-banned': AccountBannedEmail,
|
||||
'transaction-review': TransactionReviewEmail,
|
||||
};
|
||||
|
||||
export async function GET(
|
||||
|
|
|
|||
26
app/page.tsx
26
app/page.tsx
|
|
@ -22,12 +22,36 @@ const templates = [
|
|||
},
|
||||
{
|
||||
id: 'referral-success',
|
||||
name: 'Referral Success',
|
||||
name: 'Referral Success (Base User)',
|
||||
},
|
||||
{
|
||||
id: 'referral-stats',
|
||||
name: 'Referral Stats (Creator)',
|
||||
},
|
||||
{
|
||||
id: 'referral-signup',
|
||||
name: 'Referral Signup',
|
||||
},
|
||||
{
|
||||
id: 'waitlist',
|
||||
name: 'Waitlist',
|
||||
},
|
||||
{
|
||||
id: 'promotional',
|
||||
name: 'Promotional',
|
||||
},
|
||||
{
|
||||
id: 'kyc-verification',
|
||||
name: 'KYC Verification',
|
||||
},
|
||||
{
|
||||
id: 'account-banned',
|
||||
name: 'Account Banned',
|
||||
},
|
||||
{
|
||||
id: 'transaction-review',
|
||||
name: 'Transaction Review',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
|
|
|
|||
143
emails/account-banned.tsx
Normal file
143
emails/account-banned.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import {
|
||||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Card } from './components/Card';
|
||||
import { theme } from './theme';
|
||||
|
||||
interface AccountBannedEmailProps {
|
||||
userName?: string;
|
||||
reason?: string;
|
||||
appealLink?: string;
|
||||
}
|
||||
|
||||
export const AccountBannedEmail = ({
|
||||
userName = 'Kirubel',
|
||||
reason = 'Violation of our Terms of Service',
|
||||
appealLink = 'https://amba.app/appeal',
|
||||
}: AccountBannedEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview="Important: Your AmbaPay account has been suspended"
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
Account Suspended ⛔
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
We're writing to inform you that your AmbaPay account has been suspended due to a violation of our Terms of Service.
|
||||
</Text>
|
||||
<Card>
|
||||
<Section style={reasonSection}>
|
||||
<Text style={reasonTitle}>Reason for Suspension:</Text>
|
||||
<Text style={reasonText}>{reason}</Text>
|
||||
</Section>
|
||||
</Card>
|
||||
<Text style={text}>
|
||||
During this suspension, you will not be able to:
|
||||
</Text>
|
||||
<Section style={restrictionsList}>
|
||||
<Text style={restrictionItem}>• Access your account</Text>
|
||||
<Text style={restrictionItem}>• Make transactions</Text>
|
||||
<Text style={restrictionItem}>• Receive payments</Text>
|
||||
<Text style={restrictionItem}>• Use any AmbaPay services</Text>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
If you believe this suspension is a mistake, you have the right to appeal this decision. Please submit an appeal with any relevant information or documentation.
|
||||
</Text>
|
||||
<Section style={buttonSection}>
|
||||
<Text style={appealLink}>
|
||||
<a href={appealLink} style={linkStyle}>
|
||||
Submit an Appeal
|
||||
</a>
|
||||
</Text>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
Our team will review your appeal within 5-7 business days. You will receive an email notification once a decision has been made.
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
If you have any questions, please contact our support team.
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const heading = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 24px',
|
||||
};
|
||||
|
||||
const text = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 16px',
|
||||
};
|
||||
|
||||
const reasonSection = {
|
||||
padding: '0',
|
||||
};
|
||||
|
||||
const reasonTitle = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 8px',
|
||||
};
|
||||
|
||||
const reasonText = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
const restrictionsList = {
|
||||
margin: '16px 0',
|
||||
paddingLeft: '20px',
|
||||
};
|
||||
|
||||
const restrictionItem = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 8px',
|
||||
};
|
||||
|
||||
const buttonSection = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '32px 0',
|
||||
};
|
||||
|
||||
const appealLink = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
const linkStyle = {
|
||||
color: theme.colors.primary,
|
||||
textDecoration: 'underline',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
};
|
||||
|
||||
AccountBannedEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
reason: 'Violation of our Terms of Service',
|
||||
appealLink: 'https://amba.app/appeal',
|
||||
} as AccountBannedEmailProps;
|
||||
|
||||
export default AccountBannedEmail;
|
||||
|
||||
109
emails/kyc-verification.tsx
Normal file
109
emails/kyc-verification.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import {
|
||||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Button } from './components/Button';
|
||||
import { Card } from './components/Card';
|
||||
import { theme } from './theme';
|
||||
|
||||
interface KycVerificationEmailProps {
|
||||
userName?: string;
|
||||
deadline?: string;
|
||||
}
|
||||
|
||||
export const KycVerificationEmail = ({
|
||||
userName = 'Kirubel',
|
||||
deadline = '7 days',
|
||||
}: KycVerificationEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview="Action Required: Complete your KYC verification to continue using AmbaPay"
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
Verify Your Identity ⚠️
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
To continue using AmbaPay and access all our services, we need to verify your identity as part of our Know Your Customer (KYC) process. This is a standard security requirement to protect your account and comply with regulations.
|
||||
</Text>
|
||||
<Card>
|
||||
<Section style={infoSection}>
|
||||
<Text style={infoTitle}>Required Documents:</Text>
|
||||
<Text style={infoItem}>• Government-issued ID (passport, driver's license, or national ID)</Text>
|
||||
<Text style={infoItem}>• Proof of address (utility bill, bank statement, etc.)</Text>
|
||||
<Text style={infoItem}>• Selfie with your ID</Text>
|
||||
</Section>
|
||||
</Card>
|
||||
<Text style={text}>
|
||||
<strong>Deadline: Complete verification within {deadline}</strong>
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Please complete your KYC verification to avoid any service interruptions. The process is quick and secure, taking just a few minutes.
|
||||
</Text>
|
||||
<Section style={buttonSection}>
|
||||
<Button href="https://amba.app/kyc">
|
||||
Complete KYC Verification
|
||||
</Button>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
If you have any questions or need assistance, please contact our support team. We're here to help!
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const heading = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 24px',
|
||||
};
|
||||
|
||||
const text = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 16px',
|
||||
};
|
||||
|
||||
const infoSection = {
|
||||
padding: '0',
|
||||
};
|
||||
|
||||
const infoTitle = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 12px',
|
||||
};
|
||||
|
||||
const infoItem = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '14px',
|
||||
lineHeight: '22px',
|
||||
margin: '0 0 8px',
|
||||
paddingLeft: '4px',
|
||||
};
|
||||
|
||||
const buttonSection = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '32px 0',
|
||||
};
|
||||
|
||||
KycVerificationEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
deadline: '7 days',
|
||||
} as KycVerificationEmailProps;
|
||||
|
||||
export default KycVerificationEmail;
|
||||
|
||||
116
emails/promotional.tsx
Normal file
116
emails/promotional.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import {
|
||||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Button } from './components/Button';
|
||||
import { Card } from './components/Card';
|
||||
import { theme } from './theme';
|
||||
|
||||
interface PromotionalEmailProps {
|
||||
userName?: string;
|
||||
title?: string;
|
||||
offerTitle?: string;
|
||||
offerDescription?: string;
|
||||
ctaText?: string;
|
||||
ctaLink?: string;
|
||||
}
|
||||
|
||||
export const PromotionalEmail = ({
|
||||
userName = 'Kirubel',
|
||||
title = 'Special Offer Just for You! 🎁',
|
||||
offerTitle = 'Get 20% Cashback',
|
||||
offerDescription = 'Use AmbaPay for your next transaction and receive 20% cashback. Limited time offer!',
|
||||
ctaText = 'Claim Offer',
|
||||
ctaLink = 'https://amba.app/promo',
|
||||
}: PromotionalEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview="Exclusive offer from AmbaPay - Don't miss out!"
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
{title}
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
We have something special for you! As a valued member of the AmbaPay community, we're excited to share an exclusive offer.
|
||||
</Text>
|
||||
<Card>
|
||||
<Section style={offerSection}>
|
||||
<Text style={offerTitleStyle}>{offerTitle}</Text>
|
||||
<Text style={offerDescriptionStyle}>{offerDescription}</Text>
|
||||
</Section>
|
||||
</Card>
|
||||
<Section style={buttonSection}>
|
||||
<Button href={ctaLink}>
|
||||
{ctaText}
|
||||
</Button>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
This offer is valid for a limited time only. Don't miss out on this great opportunity!
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Terms and conditions apply. See our website for full details.
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const heading = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 24px',
|
||||
};
|
||||
|
||||
const text = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 16px',
|
||||
};
|
||||
|
||||
const offerSection = {
|
||||
textAlign: 'center' as const,
|
||||
padding: '0',
|
||||
};
|
||||
|
||||
const offerTitleStyle = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 12px',
|
||||
};
|
||||
|
||||
const offerDescriptionStyle = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
const buttonSection = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '32px 0',
|
||||
};
|
||||
|
||||
PromotionalEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
title: 'Special Offer Just for You! 🎁',
|
||||
offerTitle: 'Get 20% Cashback',
|
||||
offerDescription: 'Use AmbaPay for your next transaction and receive 20% cashback. Limited time offer!',
|
||||
ctaText: 'Claim Offer',
|
||||
ctaLink: 'https://amba.app/promo',
|
||||
} as PromotionalEmailProps;
|
||||
|
||||
export default PromotionalEmail;
|
||||
|
||||
170
emails/referral-signup.tsx
Normal file
170
emails/referral-signup.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
import {
|
||||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Card } from './components/Card';
|
||||
import { Button } from './components/Button';
|
||||
import { theme } from './theme';
|
||||
|
||||
interface ReferralSignupEmailProps {
|
||||
userName?: string;
|
||||
referredUserName?: string;
|
||||
referralCode?: string;
|
||||
}
|
||||
|
||||
export const ReferralSignupEmail = ({
|
||||
userName = 'Kirubel',
|
||||
referredUserName = 'Alex Martinez',
|
||||
referralCode = 'AMB-KIRU-2024',
|
||||
}: ReferralSignupEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview={`Someone signed up using your referral code!`}
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
New Referral Signup! 👋
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Great news! <strong>{referredUserName}</strong> has signed up for AmbaPay using your referral code <strong>{referralCode}</strong>.
|
||||
</Text>
|
||||
<Card>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Referred User:</Text>
|
||||
<Text style={detailValue}>{referredUserName}</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Referral Code Used:</Text>
|
||||
<Text style={detailValue}>{referralCode}</Text>
|
||||
</Section>
|
||||
<Section style={statusRow}>
|
||||
<Text style={statusLabel}>Status:</Text>
|
||||
<Text style={statusValue}>Account Created ✓</Text>
|
||||
</Section>
|
||||
</Card>
|
||||
<Section style={infoBox}>
|
||||
<Text style={infoTitle}>Next Steps</Text>
|
||||
<Text style={infoText}>
|
||||
You'll earn referral points once <strong>{referredUserName}</strong> completes their first transaction. Keep an eye out for your reward notification!
|
||||
</Text>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
Keep sharing your referral code to earn more points and help grow the AmbaPay community!
|
||||
</Text>
|
||||
<Section style={buttonSection}>
|
||||
<Button href="https://amba.app/referrals">
|
||||
View Referral Dashboard
|
||||
</Button>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const heading = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 24px',
|
||||
};
|
||||
|
||||
const text = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 16px',
|
||||
};
|
||||
|
||||
const detailRow = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '12px',
|
||||
paddingBottom: '12px',
|
||||
borderBottom: `1px solid ${theme.colors.border}`,
|
||||
};
|
||||
|
||||
const detailLabel = {
|
||||
color: theme.colors.text,
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
margin: '0',
|
||||
flex: '1',
|
||||
};
|
||||
|
||||
const detailValue = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '14px',
|
||||
margin: '0',
|
||||
textAlign: 'right' as const,
|
||||
flex: '1',
|
||||
};
|
||||
|
||||
const statusRow = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: '12px',
|
||||
paddingTop: '12px',
|
||||
borderTop: `2px solid ${theme.colors.accent}`,
|
||||
};
|
||||
|
||||
const statusLabel = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
margin: '0',
|
||||
flex: '1',
|
||||
};
|
||||
|
||||
const statusValue = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
margin: '0',
|
||||
textAlign: 'right' as const,
|
||||
flex: '1',
|
||||
};
|
||||
|
||||
const infoBox = {
|
||||
backgroundColor: theme.colors.accentLightest,
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
margin: '24px 0',
|
||||
borderLeft: `4px solid ${theme.colors.accent}`,
|
||||
};
|
||||
|
||||
const infoTitle = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 8px',
|
||||
};
|
||||
|
||||
const infoText = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '14px',
|
||||
lineHeight: '22px',
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
const buttonSection = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '32px 0',
|
||||
};
|
||||
|
||||
ReferralSignupEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
referredUserName: 'Alex Martinez',
|
||||
referralCode: 'AMB-KIRU-2024',
|
||||
} as ReferralSignupEmailProps;
|
||||
|
||||
export default ReferralSignupEmail;
|
||||
|
||||
194
emails/referral-stats.tsx
Normal file
194
emails/referral-stats.tsx
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
import {
|
||||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
Row,
|
||||
Column,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Card } from './components/Card';
|
||||
import { Button } from './components/Button';
|
||||
import { theme } from './theme';
|
||||
|
||||
interface ReferralStatsEmailProps {
|
||||
userName?: string;
|
||||
weekPeriod?: string;
|
||||
newReferralsThisWeek?: number;
|
||||
newUsersSignedUp?: number;
|
||||
totalPaymentsMade?: string;
|
||||
paymentCount?: number;
|
||||
referralCode?: string;
|
||||
}
|
||||
|
||||
export const ReferralStatsEmail = ({
|
||||
userName = 'Kirubel',
|
||||
weekPeriod = 'Jan 1 - Jan 7, 2024',
|
||||
newReferralsThisWeek = 12,
|
||||
newUsersSignedUp = 8,
|
||||
totalPaymentsMade = '$2,450.00',
|
||||
paymentCount = 15,
|
||||
referralCode = 'AMB-KIRU-2024',
|
||||
}: ReferralStatsEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview={`Your weekly referral stats: ${newReferralsThisWeek} new referrals this week!`}
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
Your Weekly Referral Stats 📊
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Here's your weekly referral performance summary for <strong>{weekPeriod}</strong>. Keep up the great work!
|
||||
</Text>
|
||||
<Card>
|
||||
<Row>
|
||||
<Column style={statColumn}>
|
||||
<Section style={statItem}>
|
||||
<Text style={statLabel}>New Referrals This Week</Text>
|
||||
<Text style={statValue}>{newReferralsThisWeek}</Text>
|
||||
</Section>
|
||||
</Column>
|
||||
<Column style={statColumn}>
|
||||
<Section style={statItem}>
|
||||
<Text style={statLabel}>New Users Signed Up</Text>
|
||||
<Text style={statValue}>{newUsersSignedUp}</Text>
|
||||
</Section>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column style={statColumn}>
|
||||
<Section style={statItem}>
|
||||
<Text style={statLabel}>Total Payments Made</Text>
|
||||
<Text style={statValue}>{totalPaymentsMade}</Text>
|
||||
</Section>
|
||||
</Column>
|
||||
<Column style={statColumn}>
|
||||
<Section style={statItem}>
|
||||
<Text style={statLabel}>Number of Transactions</Text>
|
||||
<Text style={statValue}>{paymentCount}</Text>
|
||||
</Section>
|
||||
</Column>
|
||||
</Row>
|
||||
</Card>
|
||||
<Section style={infoCard}>
|
||||
<Text style={infoTitle}>Your Referral Code</Text>
|
||||
<Text style={codeDisplay}>{referralCode}</Text>
|
||||
<Text style={infoText}>
|
||||
Share this code with friends and family to keep growing your referrals!
|
||||
</Text>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
You're doing amazing! Continue sharing your referral code to reach even more people and grow the AmbaPay community.
|
||||
</Text>
|
||||
<Section style={buttonSection}>
|
||||
<Button href="https://amba.app/creator/referrals">
|
||||
View Detailed Analytics
|
||||
</Button>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
Thank you for being an outstanding AmbaPay creator!
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const heading = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 24px',
|
||||
};
|
||||
|
||||
const text = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 16px',
|
||||
};
|
||||
|
||||
const statColumn = {
|
||||
width: '50%',
|
||||
padding: '8px',
|
||||
};
|
||||
|
||||
const statItem = {
|
||||
textAlign: 'center' as const,
|
||||
padding: '16px',
|
||||
backgroundColor: theme.colors.background,
|
||||
borderRadius: '8px',
|
||||
border: `1px solid ${theme.colors.border}`,
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
const statLabel = {
|
||||
color: theme.colors.text,
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 8px',
|
||||
textTransform: 'uppercase' as const,
|
||||
letterSpacing: '0.5px',
|
||||
};
|
||||
|
||||
const statValue = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
const infoCard = {
|
||||
backgroundColor: theme.colors.primaryLightest,
|
||||
borderRadius: '8px',
|
||||
padding: '20px',
|
||||
margin: '24px 0',
|
||||
textAlign: 'center' as const,
|
||||
border: `2px solid ${theme.colors.primary}`,
|
||||
};
|
||||
|
||||
const infoTitle = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 12px',
|
||||
};
|
||||
|
||||
const codeDisplay = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 8px',
|
||||
letterSpacing: '2px',
|
||||
fontFamily: 'monospace',
|
||||
};
|
||||
|
||||
const infoText = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '14px',
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
const buttonSection = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '32px 0',
|
||||
};
|
||||
|
||||
ReferralStatsEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
weekPeriod: 'Jan 1 - Jan 7, 2024',
|
||||
newReferralsThisWeek: 12,
|
||||
newUsersSignedUp: 8,
|
||||
totalPaymentsMade: '$2,450.00',
|
||||
paymentCount: 15,
|
||||
referralCode: 'AMB-KIRU-2024',
|
||||
} as ReferralStatsEmailProps;
|
||||
|
||||
export default ReferralStatsEmail;
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ interface ReferralSuccessEmailProps {
|
|||
userName?: string;
|
||||
referredUserName?: string;
|
||||
referralCode?: string;
|
||||
rewardAmount?: string;
|
||||
pointsEarned?: number;
|
||||
transactionAmount?: string;
|
||||
}
|
||||
|
||||
|
|
@ -20,62 +20,58 @@ export const ReferralSuccessEmail = ({
|
|||
userName = 'Kirubel',
|
||||
referredUserName = 'Alex Martinez',
|
||||
referralCode = 'AMB-KIRU-2024',
|
||||
rewardAmount = '$10.00',
|
||||
pointsEarned = 100,
|
||||
transactionAmount = '$100.00',
|
||||
}: ReferralSuccessEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview={`Great news! Someone used your referral code and you earned ${rewardAmount}!`}
|
||||
preview={`Great news! You earned ${pointsEarned} points from a successful referral!`}
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
Referral Reward Earned! 🎉
|
||||
You Earned Referral Points! 🎉
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Excellent news! <strong>{referredUserName}</strong> has used your referral code <strong>{referralCode}</strong> to make a payment, and you've earned a reward!
|
||||
Excellent news! <strong>{referredUserName}</strong> created an account using your referral code <strong>{referralCode}</strong> and completed their first transaction. You've earned referral points!
|
||||
</Text>
|
||||
<Card>
|
||||
<Section style={rewardSection}>
|
||||
<Text style={rewardLabel}>Your Reward</Text>
|
||||
<Text style={rewardAmount}>{rewardAmount}</Text>
|
||||
<Text style={rewardLabel}>Points Earned</Text>
|
||||
<Text style={rewardAmount}>{pointsEarned} points</Text>
|
||||
<Text style={rewardNote}>
|
||||
This reward has been automatically added to your account.
|
||||
These points have been automatically added to your account.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Referred By:</Text>
|
||||
<Text style={detailValue}>{userName}</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>New User:</Text>
|
||||
<Text style={detailLabel}>Referred User:</Text>
|
||||
<Text style={detailValue}>{referredUserName}</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Referral Code Used:</Text>
|
||||
<Text style={detailLabel}>Referral Code:</Text>
|
||||
<Text style={detailValue}>{referralCode}</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Transaction Amount:</Text>
|
||||
<Text style={detailLabel}>Transaction Completed:</Text>
|
||||
<Text style={detailValue}>{transactionAmount}</Text>
|
||||
</Section>
|
||||
</Card>
|
||||
<Text style={text}>
|
||||
Keep sharing your referral code with friends and family to earn more rewards! Every successful referral earns you {rewardAmount}.
|
||||
Keep sharing your referral code with friends and family to earn more points! Every successful referral that creates an account and makes a transaction earns you points.
|
||||
</Text>
|
||||
<Section style={buttonSection}>
|
||||
<Button href="https://amba.app/referrals">
|
||||
View Referral Dashboard
|
||||
View My Points & Referral Dashboard
|
||||
</Button>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
Thank you for helping grow the Amba community!
|
||||
Thank you for helping grow the AmbaPay community!
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The Amba Team
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
|
|
@ -117,6 +113,7 @@ const rewardAmount = {
|
|||
fontSize: '36px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 8px',
|
||||
display: 'inline-block',
|
||||
};
|
||||
|
||||
const rewardNote = {
|
||||
|
|
@ -159,7 +156,7 @@ ReferralSuccessEmail.PreviewProps = {
|
|||
userName: 'Kirubel',
|
||||
referredUserName: 'Alex Martinez',
|
||||
referralCode: 'AMB-KIRU-2024',
|
||||
rewardAmount: '$10.00',
|
||||
pointsEarned: 100,
|
||||
transactionAmount: '$100.00',
|
||||
} as ReferralSuccessEmailProps;
|
||||
|
||||
|
|
|
|||
138
emails/transaction-review.tsx
Normal file
138
emails/transaction-review.tsx
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import {
|
||||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Card } from './components/Card';
|
||||
import { theme } from './theme';
|
||||
|
||||
interface TransactionReviewEmailProps {
|
||||
userName?: string;
|
||||
amount?: string;
|
||||
transactionId?: string;
|
||||
recipient?: string;
|
||||
estimatedTime?: string;
|
||||
}
|
||||
|
||||
export const TransactionReviewEmail = ({
|
||||
userName = 'Kirubel',
|
||||
amount = '$500.00',
|
||||
transactionId = 'TXN-987654321',
|
||||
recipient = 'John Doe',
|
||||
estimatedTime = '1-2 business days',
|
||||
}: TransactionReviewEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
preview={`Your transaction of ${amount} is under review`}
|
||||
>
|
||||
<Section>
|
||||
<Heading style={heading}>
|
||||
Transaction Under Review 🔍
|
||||
</Heading>
|
||||
<Text style={text}>
|
||||
Hi {userName},
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
We wanted to let you know that your recent transaction is currently under review by our security team. This is a standard procedure to ensure the safety and security of all transactions on our platform.
|
||||
</Text>
|
||||
<Card>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Amount:</Text>
|
||||
<Text style={detailValue}>{amount}</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Recipient:</Text>
|
||||
<Text style={detailValue}>{recipient}</Text>
|
||||
</Section>
|
||||
<Section style={detailRow}>
|
||||
<Text style={detailLabel}>Transaction ID:</Text>
|
||||
<Text style={detailValue}>{transactionId}</Text>
|
||||
</Section>
|
||||
</Card>
|
||||
<Text style={text}>
|
||||
<strong>What happens next?</strong>
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Our team is reviewing your transaction to verify its legitimacy. This process typically takes {estimatedTime}. We'll notify you immediately once the review is complete.
|
||||
</Text>
|
||||
<Section style={infoBox}>
|
||||
<Text style={infoText}>
|
||||
<strong>Note:</strong> Your funds are safe and secure during this review period. If additional information is needed, we'll contact you directly.
|
||||
</Text>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
If you have any questions or concerns about this review, please don't hesitate to contact our support team. We're here to help!
|
||||
</Text>
|
||||
<Text style={text}>
|
||||
Best regards,<br />
|
||||
The AmbaPay Team
|
||||
</Text>
|
||||
</Section>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const heading = {
|
||||
color: theme.colors.primary,
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
margin: '0 0 24px',
|
||||
};
|
||||
|
||||
const text = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '16px',
|
||||
lineHeight: '24px',
|
||||
margin: '0 0 16px',
|
||||
};
|
||||
|
||||
const detailRow = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '12px',
|
||||
paddingBottom: '12px',
|
||||
borderBottom: `1px solid ${theme.colors.border}`,
|
||||
};
|
||||
|
||||
const detailLabel = {
|
||||
color: theme.colors.text,
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
margin: '0',
|
||||
flex: '1',
|
||||
};
|
||||
|
||||
const detailValue = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '14px',
|
||||
margin: '0',
|
||||
textAlign: 'right' as const,
|
||||
flex: '1',
|
||||
};
|
||||
|
||||
const infoBox = {
|
||||
backgroundColor: theme.colors.primaryLightest,
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
margin: '24px 0',
|
||||
borderLeft: `4px solid ${theme.colors.primary}`,
|
||||
};
|
||||
|
||||
const infoText = {
|
||||
color: theme.colors.textDark,
|
||||
fontSize: '14px',
|
||||
lineHeight: '22px',
|
||||
margin: '0',
|
||||
};
|
||||
|
||||
TransactionReviewEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
amount: '$500.00',
|
||||
transactionId: 'TXN-987654321',
|
||||
recipient: 'John Doe',
|
||||
estimatedTime: '1-2 business days',
|
||||
} as TransactionReviewEmailProps;
|
||||
|
||||
export default TransactionReviewEmail;
|
||||
|
||||
|
|
@ -2,6 +2,7 @@ import {
|
|||
Heading,
|
||||
Section,
|
||||
Text,
|
||||
Link,
|
||||
} from '@react-email/components';
|
||||
import { EmailLayout } from './components/EmailLayout';
|
||||
import { Button } from './components/Button';
|
||||
|
|
@ -42,8 +43,25 @@ export const WaitlistEmail = ({
|
|||
</Button>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
In the meantime, feel free to follow us on social media for updates, tips, and behind-the-scenes content.
|
||||
In the meantime, feel free to follow us on social media for updates, tips, and behind-the-scenes content:
|
||||
</Text>
|
||||
<Section style={socialSection}>
|
||||
<Link href="https://twitter.com/ambapay" style={socialLink}>
|
||||
Twitter
|
||||
</Link>
|
||||
{' • '}
|
||||
<Link href="https://instagram.com/ambapay" style={socialLink}>
|
||||
Instagram
|
||||
</Link>
|
||||
{' • '}
|
||||
<Link href="https://linkedin.com/company/ambapay" style={socialLink}>
|
||||
LinkedIn
|
||||
</Link>
|
||||
{' • '}
|
||||
<Link href="https://facebook.com/ambapay" style={socialLink}>
|
||||
Facebook
|
||||
</Link>
|
||||
</Section>
|
||||
<Text style={text}>
|
||||
We appreciate your patience and can't wait to welcome you to AmbaPay!
|
||||
</Text>
|
||||
|
|
@ -75,6 +93,19 @@ const buttonSection = {
|
|||
margin: '32px 0',
|
||||
};
|
||||
|
||||
const socialSection = {
|
||||
textAlign: 'center' as const,
|
||||
margin: '24px 0',
|
||||
padding: '16px 0',
|
||||
};
|
||||
|
||||
const socialLink = {
|
||||
color: theme.colors.primary,
|
||||
textDecoration: 'underline',
|
||||
fontSize: '16px',
|
||||
fontWeight: '500',
|
||||
};
|
||||
|
||||
WaitlistEmail.PreviewProps = {
|
||||
userName: 'Kirubel',
|
||||
position: 42,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user