done

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
+### 5. Referral Success (Base User)
-Sent when someone uses the user's referral code.
+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
+- `pointsEarned` (number): Points earned from the referral
-- `transactionAmount` (string): Transaction amount
+- `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
 
 ```

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

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() {

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 (
+    <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;
+

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 (
+    <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;
+

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 (
+    <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;
+

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 (
+    <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;
+

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 (
+    <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;
+

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 (
     <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={rewardLabel}>Points Earned</Text>
-            <Text style={rewardAmount}>{rewardAmount}</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={detailLabel}>Referred User:</Text>
-            <Text style={detailValue}>{userName}</Text>
-          </Section>
-          <Section style={detailRow}>
-            <Text style={detailLabel}>New 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;
 

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 (
+    <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;
+

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 = ({
           </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,