144 lines
3.6 KiB
TypeScript
144 lines
3.6 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 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;
|
|
|