Marc Mintel
02be8e59b2
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Build & Deploy / 🧪 QA (push) Failing after 1m53s
Build & Deploy / 🏗️ Build (push) Has been skipped
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
- implemented BrochureDeliveryEmail template - created AutoBrochureModal wrapper with 5s delay - updated layout.tsx and BrochureCTA to use new success state - added tests/brochure-modal.test.ts e2e test
146 lines
3.2 KiB
TypeScript
146 lines
3.2 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Hr,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
Button,
|
|
} from '@react-email/components';
|
|
import * as React from 'react';
|
|
|
|
interface BrochureDeliveryEmailProps {
|
|
_email: string;
|
|
brochureUrl: string;
|
|
locale: 'en' | 'de';
|
|
}
|
|
|
|
export const BrochureDeliveryEmail = ({
|
|
_email,
|
|
brochureUrl,
|
|
locale = 'en',
|
|
}: BrochureDeliveryEmailProps) => {
|
|
const t =
|
|
locale === 'de'
|
|
? {
|
|
subject: 'Ihr KLZ Kabelkatalog',
|
|
greeting: 'Vielen Dank für Ihr Interesse an KLZ Cables.',
|
|
body: 'Anbei erhalten Sie den Link zu unserem aktuellen Produktkatalog. Dieser enthält alle wichtigen technischen Spezifikationen und detaillierten Produktdaten.',
|
|
button: 'Katalog herunterladen',
|
|
footer: 'Diese E-Mail wurde von klz-cables.com gesendet.',
|
|
}
|
|
: {
|
|
subject: 'Your KLZ Cable Catalog',
|
|
greeting: 'Thank you for your interest in KLZ Cables.',
|
|
body: 'Below you will find the link to our current product catalog. It contains all key technical specifications and detailed product data.',
|
|
button: 'Download Catalog',
|
|
footer: 'This email was sent from klz-cables.com.',
|
|
};
|
|
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{t.subject}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Section style={headerSection}>
|
|
<Heading style={h1}>{t.subject}</Heading>
|
|
</Section>
|
|
|
|
<Section style={section}>
|
|
<Text style={text}>
|
|
<strong>{t.greeting}</strong>
|
|
</Text>
|
|
<Text style={text}>{t.body}</Text>
|
|
|
|
<Section style={buttonContainer}>
|
|
<Button style={button} href={brochureUrl}>
|
|
{t.button}
|
|
</Button>
|
|
</Section>
|
|
|
|
<Hr style={hr} />
|
|
</Section>
|
|
<Text style={footer}>{t.footer}</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
export default BrochureDeliveryEmail;
|
|
|
|
const main = {
|
|
backgroundColor: '#f6f9fc',
|
|
fontFamily:
|
|
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
|
|
};
|
|
|
|
const container = {
|
|
backgroundColor: '#ffffff',
|
|
margin: '0 auto',
|
|
padding: '0 0 48px',
|
|
marginBottom: '64px',
|
|
borderRadius: '8px',
|
|
overflow: 'hidden',
|
|
border: '1px solid #e6ebf1',
|
|
};
|
|
|
|
const headerSection = {
|
|
backgroundColor: '#000d26',
|
|
padding: '32px 48px',
|
|
borderBottom: '4px solid #4da612',
|
|
};
|
|
|
|
const h1 = {
|
|
color: '#ffffff',
|
|
fontSize: '24px',
|
|
fontWeight: 'bold',
|
|
margin: '0',
|
|
};
|
|
|
|
const section = {
|
|
padding: '32px 48px 0',
|
|
};
|
|
|
|
const text = {
|
|
color: '#333',
|
|
fontSize: '16px',
|
|
lineHeight: '24px',
|
|
textAlign: 'left' as const,
|
|
};
|
|
|
|
const buttonContainer = {
|
|
textAlign: 'center' as const,
|
|
marginTop: '32px',
|
|
marginBottom: '32px',
|
|
};
|
|
|
|
const button = {
|
|
backgroundColor: '#4da612',
|
|
borderRadius: '4px',
|
|
color: '#ffffff',
|
|
fontSize: '16px',
|
|
fontWeight: 'bold',
|
|
textDecoration: 'none',
|
|
textAlign: 'center' as const,
|
|
display: 'inline-block',
|
|
padding: '16px 32px',
|
|
};
|
|
|
|
const hr = {
|
|
borderColor: '#e6ebf1',
|
|
margin: '20px 0',
|
|
};
|
|
|
|
const footer = {
|
|
color: '#8898aa',
|
|
fontSize: '12px',
|
|
lineHeight: '16px',
|
|
textAlign: 'center' as const,
|
|
marginTop: '20px',
|
|
};
|