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