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
427 lines
10 KiB
TypeScript
427 lines
10 KiB
TypeScript
import * as React from 'react';
|
|
import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer';
|
|
|
|
// Register fonts (using system fonts for now, can be customized)
|
|
Font.register({
|
|
family: 'Helvetica',
|
|
fonts: [
|
|
{ src: '/fonts/Helvetica.ttf', fontWeight: 400 },
|
|
{ src: '/fonts/Helvetica-Bold.ttf', fontWeight: 700 },
|
|
],
|
|
});
|
|
|
|
// ─── Brand Tokens (matching brochure) ────────────────────────────────────────
|
|
const C = {
|
|
navy: '#001a4d',
|
|
navyDeep: '#000d26',
|
|
green: '#4da612',
|
|
greenLight: '#e8f5d8',
|
|
white: '#FFFFFF',
|
|
offWhite: '#f8f9fa',
|
|
gray100: '#f3f4f6',
|
|
gray200: '#e5e7eb',
|
|
gray300: '#d1d5db',
|
|
gray400: '#9ca3af',
|
|
gray600: '#4b5563',
|
|
gray900: '#111827',
|
|
};
|
|
|
|
const MARGIN = 56;
|
|
|
|
const styles = StyleSheet.create({
|
|
page: {
|
|
color: C.gray900,
|
|
lineHeight: 1.5,
|
|
backgroundColor: C.white,
|
|
paddingTop: 0,
|
|
paddingBottom: 80,
|
|
fontFamily: 'Helvetica',
|
|
},
|
|
|
|
// Hero-style header
|
|
hero: {
|
|
backgroundColor: C.white,
|
|
paddingTop: 24,
|
|
paddingBottom: 0,
|
|
paddingHorizontal: MARGIN,
|
|
marginBottom: 20,
|
|
position: 'relative',
|
|
borderBottomWidth: 0,
|
|
},
|
|
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
|
|
logoText: {
|
|
fontSize: 22,
|
|
fontWeight: 700,
|
|
color: C.navyDeep,
|
|
letterSpacing: 2,
|
|
textTransform: 'uppercase',
|
|
},
|
|
|
|
docTitle: {
|
|
fontSize: 8,
|
|
fontWeight: 700,
|
|
color: C.green,
|
|
letterSpacing: 2,
|
|
textTransform: 'uppercase',
|
|
},
|
|
|
|
productRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 20,
|
|
},
|
|
productInfoCol: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
productImageCol: {
|
|
flex: 1,
|
|
height: 120,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 4,
|
|
borderWidth: 1,
|
|
borderColor: C.gray200,
|
|
backgroundColor: C.white,
|
|
overflow: 'hidden',
|
|
},
|
|
|
|
// Product Hero Info
|
|
productHero: {
|
|
marginTop: 0,
|
|
},
|
|
|
|
productName: {
|
|
fontSize: 24,
|
|
fontWeight: 700,
|
|
color: C.navyDeep,
|
|
marginBottom: 0,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: -0.5,
|
|
},
|
|
|
|
productMeta: {
|
|
fontSize: 10,
|
|
color: C.gray600,
|
|
fontWeight: 700,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1,
|
|
},
|
|
|
|
heroImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'contain',
|
|
},
|
|
|
|
noImage: {
|
|
fontSize: 8,
|
|
color: C.gray400,
|
|
textAlign: 'center',
|
|
},
|
|
|
|
// Content Area
|
|
content: {
|
|
paddingHorizontal: MARGIN,
|
|
},
|
|
|
|
// Content sections
|
|
section: {
|
|
marginBottom: 20,
|
|
},
|
|
|
|
sectionTitle: {
|
|
fontSize: 8,
|
|
fontWeight: 700,
|
|
color: C.green,
|
|
marginBottom: 6,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1.5,
|
|
},
|
|
|
|
sectionAccent: {
|
|
width: 30,
|
|
height: 2,
|
|
backgroundColor: C.green,
|
|
marginBottom: 8,
|
|
borderRadius: 1,
|
|
},
|
|
|
|
description: {
|
|
fontSize: 10,
|
|
lineHeight: 1.7,
|
|
color: C.gray600,
|
|
},
|
|
|
|
// Technical data table
|
|
specsTable: {
|
|
marginTop: 4,
|
|
borderWidth: 0,
|
|
borderRadius: 0,
|
|
overflow: 'hidden',
|
|
},
|
|
|
|
specsTableRow: {
|
|
flexDirection: 'row',
|
|
borderBottomWidth: 0.5,
|
|
borderBottomColor: C.gray200,
|
|
},
|
|
|
|
specsTableRowLast: {
|
|
borderBottomWidth: 0,
|
|
},
|
|
|
|
specsTableLabelCell: {
|
|
flex: 1,
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 12,
|
|
backgroundColor: C.offWhite,
|
|
borderRightWidth: 0.5,
|
|
borderRightColor: C.gray200,
|
|
},
|
|
|
|
specsTableValueCell: {
|
|
flex: 1,
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 12,
|
|
},
|
|
|
|
specsTableLabelText: {
|
|
fontSize: 8,
|
|
fontWeight: 700,
|
|
color: C.navyDeep,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
},
|
|
|
|
specsTableValueText: {
|
|
fontSize: 9,
|
|
color: C.gray900,
|
|
fontWeight: 400,
|
|
},
|
|
|
|
// Categories
|
|
categories: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 6,
|
|
},
|
|
|
|
categoryTag: {
|
|
backgroundColor: C.offWhite,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderWidth: 0.5,
|
|
borderColor: C.gray200,
|
|
borderRadius: 3,
|
|
},
|
|
|
|
categoryText: {
|
|
fontSize: 7,
|
|
color: C.gray600,
|
|
fontWeight: 700,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
},
|
|
|
|
// Footer — matches brochure style
|
|
footer: {
|
|
position: 'absolute',
|
|
bottom: 28,
|
|
left: MARGIN,
|
|
right: MARGIN,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingTop: 12,
|
|
borderTopWidth: 2,
|
|
borderTopColor: C.green,
|
|
},
|
|
|
|
footerText: {
|
|
fontSize: 7,
|
|
color: C.gray400,
|
|
fontWeight: 400,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.8,
|
|
},
|
|
|
|
footerBrand: {
|
|
fontSize: 9,
|
|
fontWeight: 700,
|
|
color: C.navyDeep,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1.5,
|
|
},
|
|
});
|
|
|
|
interface ProductData {
|
|
id: number;
|
|
name: string;
|
|
shortDescriptionHtml: string;
|
|
descriptionHtml: string;
|
|
applicationHtml?: string;
|
|
images: string[];
|
|
featuredImage: string | null;
|
|
sku: string;
|
|
categories: Array<{ name: string }>;
|
|
attributes: Array<{
|
|
name: string;
|
|
options: string[];
|
|
}>;
|
|
}
|
|
|
|
interface PDFDatasheetProps {
|
|
product: ProductData;
|
|
locale: 'en' | 'de';
|
|
logoUrl?: string;
|
|
}
|
|
|
|
// Helper to strip HTML tags
|
|
const stripHtml = (html: string): string => {
|
|
return html.replace(/<[^>]*>/g, '');
|
|
};
|
|
|
|
// Helper to get translated labels
|
|
const getLabels = (locale: 'en' | 'de') => {
|
|
const labels = {
|
|
en: {
|
|
productDatasheet: 'Technical Datasheet',
|
|
description: 'APPLICATION',
|
|
specifications: 'TECHNICAL DATA',
|
|
categories: 'CATEGORIES',
|
|
sku: 'SKU',
|
|
noImage: 'No image available',
|
|
},
|
|
de: {
|
|
productDatasheet: 'Technisches Datenblatt',
|
|
description: 'ANWENDUNG',
|
|
specifications: 'TECHNISCHE DATEN',
|
|
categories: 'KATEGORIEN',
|
|
sku: 'ARTIKELNUMMER',
|
|
noImage: 'Kein Bild verfügbar',
|
|
},
|
|
};
|
|
return labels[locale];
|
|
};
|
|
|
|
export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({ product, locale }) => {
|
|
const labels = getLabels(locale);
|
|
|
|
return (
|
|
<Document>
|
|
<Page size="A4" style={styles.page}>
|
|
{/* Hero Header */}
|
|
<View style={styles.hero}>
|
|
<View style={styles.header}>
|
|
<View>
|
|
<Text style={styles.logoText}>KLZ</Text>
|
|
</View>
|
|
<Text style={styles.docTitle}>{labels.productDatasheet}</Text>
|
|
</View>
|
|
|
|
<View style={styles.productRow}>
|
|
<View style={styles.productInfoCol}>
|
|
<View style={styles.productHero}>
|
|
<View style={styles.categories}>
|
|
{product.categories.map((cat, index) => (
|
|
<Text key={index} style={styles.productMeta}>
|
|
{cat.name}
|
|
{index < product.categories.length - 1 ? ' • ' : ''}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
<Text style={styles.productName}>{product.name}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.productImageCol}>
|
|
{product.featuredImage ? (
|
|
<Image src={product.featuredImage} style={styles.heroImage} />
|
|
) : (
|
|
<Text style={styles.noImage}>{labels.noImage}</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.content}>
|
|
{/* Description section */}
|
|
{(product.applicationHtml || product.shortDescriptionHtml || product.descriptionHtml) && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>{labels.description}</Text>
|
|
<View style={styles.sectionAccent} />
|
|
<Text style={styles.description}>
|
|
{stripHtml(
|
|
product.applicationHtml ||
|
|
product.shortDescriptionHtml ||
|
|
product.descriptionHtml,
|
|
)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Technical specifications */}
|
|
{product.attributes && product.attributes.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>{labels.specifications}</Text>
|
|
<View style={styles.sectionAccent} />
|
|
<View style={styles.specsTable}>
|
|
{product.attributes.map((attr, index) => (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.specsTableRow,
|
|
index === product.attributes.length - 1 && styles.specsTableRowLast,
|
|
]}
|
|
>
|
|
<View style={styles.specsTableLabelCell}>
|
|
<Text style={styles.specsTableLabelText}>{attr.name}</Text>
|
|
</View>
|
|
<View style={styles.specsTableValueCell}>
|
|
<Text style={styles.specsTableValueText}>{attr.options.join(', ')}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Categories as clean tags */}
|
|
{product.categories && product.categories.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>{labels.categories}</Text>
|
|
<View style={styles.sectionAccent} />
|
|
<View style={styles.categories}>
|
|
{product.categories.map((cat, index) => (
|
|
<View key={index} style={styles.categoryTag}>
|
|
<Text style={styles.categoryText}>{cat.name}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Minimal footer */}
|
|
<View style={styles.footer} fixed>
|
|
<Text style={styles.footerBrand}>KLZ CABLES</Text>
|
|
<Text style={styles.footerText}>
|
|
{new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</Page>
|
|
</Document>
|
|
);
|
|
};
|