139 lines
3.7 KiB
TypeScript
139 lines
3.7 KiB
TypeScript
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;
|
|
|