diff --git a/README.md b/README.md index b5b56a5..222fa98 100644 --- a/README.md +++ b/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 ``` diff --git a/app/api/email/[template]/route.ts b/app/api/email/[template]/route.ts index c1177c9..54d985e 100644 --- a/app/api/email/[template]/route.ts +++ b/app/api/email/[template]/route.ts @@ -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> = { @@ -14,7 +20,13 @@ const templates: Record> = { '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( diff --git a/app/page.tsx b/app/page.tsx index 20468e9..4c5f79f 100644 --- a/app/page.tsx +++ b/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() { diff --git a/emails/account-banned.tsx b/emails/account-banned.tsx new file mode 100644 index 0000000..4410c53 --- /dev/null +++ b/emails/account-banned.tsx @@ -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 ( + +
+ + Account Suspended ⛔ + + + Hi {userName}, + + + We're writing to inform you that your AmbaPay account has been suspended due to a violation of our Terms of Service. + + +
+ Reason for Suspension: + {reason} +
+ + + During this suspension, you will not be able to: + +
+ • Access your account + • Make transactions + • Receive payments + • Use any AmbaPay services +
+ + 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. + +
+ + + Submit an Appeal + + +
+ + Our team will review your appeal within 5-7 business days. You will receive an email notification once a decision has been made. + + + If you have any questions, please contact our support team. + + + Best regards,
+ The AmbaPay Team + +
+ + ); +}; + +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; + diff --git a/emails/kyc-verification.tsx b/emails/kyc-verification.tsx new file mode 100644 index 0000000..a38e27c --- /dev/null +++ b/emails/kyc-verification.tsx @@ -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 ( + +
+ + Verify Your Identity ⚠️ + + + Hi {userName}, + + + 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. + + +
+ Required Documents: + • Government-issued ID (passport, driver's license, or national ID) + • Proof of address (utility bill, bank statement, etc.) + • Selfie with your ID +
+ + + Deadline: Complete verification within {deadline} + + + Please complete your KYC verification to avoid any service interruptions. The process is quick and secure, taking just a few minutes. + +
+ +
+ + If you have any questions or need assistance, please contact our support team. We're here to help! + + + Best regards,
+ The AmbaPay Team + +
+ + ); +}; + +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; + diff --git a/emails/promotional.tsx b/emails/promotional.tsx new file mode 100644 index 0000000..69265ab --- /dev/null +++ b/emails/promotional.tsx @@ -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 ( + +
+ + {title} + + + Hi {userName}, + + + We have something special for you! As a valued member of the AmbaPay community, we're excited to share an exclusive offer. + + +
+ {offerTitle} + {offerDescription} +
+ +
+ +
+ + This offer is valid for a limited time only. Don't miss out on this great opportunity! + + + Terms and conditions apply. See our website for full details. + + + Best regards,
+ The AmbaPay Team + +
+ + ); +}; + +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; + diff --git a/emails/referral-signup.tsx b/emails/referral-signup.tsx new file mode 100644 index 0000000..a71ff33 --- /dev/null +++ b/emails/referral-signup.tsx @@ -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 ( + +
+ + New Referral Signup! 👋 + + + Hi {userName}, + + + Great news! {referredUserName} has signed up for AmbaPay using your referral code {referralCode}. + + +
+ Referred User: + {referredUserName} +
+
+ Referral Code Used: + {referralCode} +
+
+ Status: + Account Created ✓ +
+ +
+ Next Steps + + You'll earn referral points once {referredUserName} completes their first transaction. Keep an eye out for your reward notification! + +
+ + Keep sharing your referral code to earn more points and help grow the AmbaPay community! + +
+ +
+ + Best regards,
+ The AmbaPay Team + +
+ + ); +}; + +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; + diff --git a/emails/referral-stats.tsx b/emails/referral-stats.tsx new file mode 100644 index 0000000..8766cd2 --- /dev/null +++ b/emails/referral-stats.tsx @@ -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 ( + +
+ + Your Weekly Referral Stats 📊 + + + Hi {userName}, + + + Here's your weekly referral performance summary for {weekPeriod}. Keep up the great work! + + + + +
+ New Referrals This Week + {newReferralsThisWeek} +
+ + +
+ New Users Signed Up + {newUsersSignedUp} +
+ + + + +
+ Total Payments Made + {totalPaymentsMade} +
+ + +
+ Number of Transactions + {paymentCount} +
+ + + +
+ Your Referral Code + {referralCode} + + Share this code with friends and family to keep growing your referrals! + +
+ + You're doing amazing! Continue sharing your referral code to reach even more people and grow the AmbaPay community. + +
+ +
+ + Thank you for being an outstanding AmbaPay creator! + + + Best regards,
+ The AmbaPay Team + +
+ + ); +}; + +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; + diff --git a/emails/referral-success.tsx b/emails/referral-success.tsx index 57c8906..eda6804 100644 --- a/emails/referral-success.tsx +++ b/emails/referral-success.tsx @@ -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 (
- Referral Reward Earned! 🎉 + You Earned Referral Points! 🎉 Hi {userName}, - Excellent news! {referredUserName} has used your referral code {referralCode} to make a payment, and you've earned a reward! + Excellent news! {referredUserName} created an account using your referral code {referralCode} and completed their first transaction. You've earned referral points!
- Your Reward - {rewardAmount} + Points Earned + {pointsEarned} points - This reward has been automatically added to your account. + These points have been automatically added to your account.
- Referred By: - {userName} -
-
- New User: + Referred User: {referredUserName}
- Referral Code Used: + Referral Code: {referralCode}
- Transaction Amount: + Transaction Completed: {transactionAmount}
- 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.
- Thank you for helping grow the Amba community! + Thank you for helping grow the AmbaPay community! Best regards,
- The Amba Team + The AmbaPay Team
@@ -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; diff --git a/emails/transaction-review.tsx b/emails/transaction-review.tsx new file mode 100644 index 0000000..cbd0cb2 --- /dev/null +++ b/emails/transaction-review.tsx @@ -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 ( + +
+ + Transaction Under Review 🔍 + + + Hi {userName}, + + + 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. + + +
+ Amount: + {amount} +
+
+ Recipient: + {recipient} +
+
+ Transaction ID: + {transactionId} +
+ + + What happens next? + + + 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. + +
+ + Note: Your funds are safe and secure during this review period. If additional information is needed, we'll contact you directly. + +
+ + If you have any questions or concerns about this review, please don't hesitate to contact our support team. We're here to help! + + + Best regards,
+ The AmbaPay Team + +
+ + ); +}; + +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; + diff --git a/emails/waitlist.tsx b/emails/waitlist.tsx index c694eb7..9d809f6 100644 --- a/emails/waitlist.tsx +++ b/emails/waitlist.tsx @@ -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 = ({ - 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: +
+ + Twitter + + {' • '} + + Instagram + + {' • '} + + LinkedIn + + {' • '} + + Facebook + +
We appreciate your patience and can't wait to welcome you to AmbaPay! @@ -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,