/**
* MP Verification Email Template
* Email sent to MPs for @parl.gc.ca email verification
*/
import * as React from 'react';
import {
Html,
Head,
Body,
Container,
Section,
Text,
Link,
Button,
Hr,
Preview,
} from '@react-email/components';
interface MPVerificationEmailProps {
mpName: string;
mpRiding?: string;
verificationUrl: string;
expiresIn?: string;
}
export function MPVerificationEmail({
mpName,
mpRiding,
verificationUrl,
expiresIn = '24 hours',
}: MPVerificationEmailProps) {
const previewText = `Verify your MP account on CanadaGPT`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Body style={styles.body}>
<Container style={styles.container}>
{/* Header */}
<Section style={styles.header}>
<Text style={styles.logo}>🍁 CanadaGPT</Text>
<Text style={styles.title}>MP Account Verification</Text>
</Section>
{/* Content */}
<Section style={styles.section}>
<Text style={styles.greeting}>Dear {mpName},</Text>
<Text style={styles.paragraph}>
You have requested to verify your Member of Parliament status on CanadaGPT.
Once verified, you'll receive a blue verification badge on your profile
and forum posts.
</Text>
<Text style={styles.paragraph}>
Click the button below to complete your verification:
</Text>
<Button href={verificationUrl} style={styles.button}>
Verify My Account
</Button>
<Text style={styles.expiry}>
This link will expire in {expiresIn}.
</Text>
<Hr style={styles.hr} />
<Text style={styles.paragraph}>
If you didn't request this verification, you can safely ignore this email.
</Text>
<Text style={styles.smallText}>
If the button doesn't work, copy and paste this URL into your browser:
</Text>
<Text style={styles.url}>{verificationUrl}</Text>
</Section>
{/* Footer */}
<Section style={styles.footer}>
<Text style={styles.footerText}>
CanadaGPT - Making government accountability accessible
</Text>
<Text style={styles.footerText}>
This is an automated email. Please do not reply directly.
</Text>
</Section>
</Container>
</Body>
</Html>
);
}
const styles = {
body: {
backgroundColor: '#f4f4f5',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
},
container: {
margin: '0 auto',
padding: '20px 0 48px',
maxWidth: '600px',
},
header: {
backgroundColor: '#dc2626',
padding: '32px 24px',
borderRadius: '8px 8px 0 0',
},
logo: {
color: '#ffffff',
fontSize: '24px',
fontWeight: 'bold',
margin: '0 0 8px 0',
},
title: {
color: '#ffffff',
fontSize: '18px',
margin: '0',
},
section: {
backgroundColor: '#ffffff',
padding: '32px 24px',
},
greeting: {
fontSize: '18px',
fontWeight: '600',
color: '#18181b',
margin: '0 0 16px 0',
},
paragraph: {
fontSize: '14px',
color: '#3f3f46',
lineHeight: '1.6',
margin: '0 0 16px 0',
},
button: {
backgroundColor: '#dc2626',
borderRadius: '8px',
color: '#ffffff',
fontSize: '16px',
fontWeight: '600',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'block',
padding: '14px 24px',
margin: '24px 0',
},
expiry: {
fontSize: '13px',
color: '#71717a',
textAlign: 'center' as const,
margin: '0 0 24px 0',
},
hr: {
borderColor: '#e4e4e7',
margin: '24px 0',
},
smallText: {
fontSize: '12px',
color: '#71717a',
margin: '0 0 8px 0',
},
url: {
fontSize: '12px',
color: '#3b82f6',
wordBreak: 'break-all' as const,
margin: '0',
},
footer: {
backgroundColor: '#f4f4f5',
padding: '24px',
borderRadius: '0 0 8px 8px',
textAlign: 'center' as const,
},
footerText: {
fontSize: '12px',
color: '#71717a',
margin: '0 0 8px 0',
},
};
