117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
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;
|
|
|