119 lines
3.1 KiB
TypeScript
119 lines
3.1 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 TransactionCompleteEmailProps {
|
|
userName?: string;
|
|
amount?: string;
|
|
transactionId?: string;
|
|
recipient?: string;
|
|
date?: string;
|
|
}
|
|
|
|
export const TransactionCompleteEmail = ({
|
|
userName = 'Kirubel',
|
|
amount = '$150.00',
|
|
transactionId = 'TXN-123456789',
|
|
recipient = 'John Doe',
|
|
date = new Date().toLocaleDateString(),
|
|
}: TransactionCompleteEmailProps) => {
|
|
return (
|
|
<EmailLayout
|
|
preview={`Your payment of ${amount} to ${recipient} was successful.`}
|
|
>
|
|
<Section>
|
|
<Heading style={heading}>
|
|
Transaction Complete! ✅
|
|
</Heading>
|
|
<Text style={text}>
|
|
Hi {userName},
|
|
</Text>
|
|
<Text style={text}>
|
|
Your payment has been successfully processed. Here are the details:
|
|
</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>
|
|
<Section style={detailRow}>
|
|
<Text style={detailLabel}>Date:</Text>
|
|
<Text style={detailValue}>{date}</Text>
|
|
</Section>
|
|
</Card>
|
|
<Text style={text}>
|
|
The funds have been transferred and the recipient has been notified. You can view this transaction in your transaction history at any time.
|
|
</Text>
|
|
<Text style={text}>
|
|
If you have any questions or concerns about this transaction, please contact our support team.
|
|
</Text>
|
|
<Text style={text}>
|
|
Best regards,<br />
|
|
The Amba 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',
|
|
};
|
|
|
|
TransactionCompleteEmail.PreviewProps = {
|
|
userName: 'Kirubel',
|
|
amount: '$150.00',
|
|
transactionId: 'TXN-123456789',
|
|
recipient: 'John Doe',
|
|
date: new Date().toLocaleDateString(),
|
|
} as TransactionCompleteEmailProps;
|
|
|
|
export default TransactionCompleteEmail;
|