feat: auto-opening brochure modal with mintel/mail delivery

- 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

app/[locale]/layout.tsx

@@ -7,10 +7,8 @@ import AnalyticsShell from '@/components/analytics/AnalyticsShell';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
-import { Suspense } from 'react';
 import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
-import { config } from '@/lib/config';
 import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
 import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
@@ -61,6 +59,7 @@ export const viewport: Viewport = {
   themeColor: '#001a4d',
 };
 
+import AutoBrochureModal from '@/components/AutoBrochureModal';
 export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
@@ -77,7 +76,7 @@ export default async function Layout(props: {
   let messages: Record<string, any> = {};
   try {
     messages = await getMessages();
-  } catch (error) {
+  } catch {
     messages = {};
   }
 
@@ -161,6 +160,8 @@ export default async function Layout(props: {
 
           <AnalyticsShell />
           <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />
+
+          <AutoBrochureModal />
         </NextIntlClientProvider>
       </body>
     </html>

app/actions/brochure.ts

@@ -3,76 +3,112 @@
 import { getServerAppServices } from '@/lib/services/create-services.server';
 
 export async function requestBrochureAction(formData: FormData) {
-    const services = getServerAppServices();
-    const logger = services.logger.child({ action: 'requestBrochureAction' });
+  const services = getServerAppServices();
+  const logger = services.logger.child({ action: 'requestBrochureAction' });
 
-    const { headers } = await import('next/headers');
-    const requestHeaders = await headers();
+  const { headers } = await import('next/headers');
+  const requestHeaders = await headers();
 
-    if ('setServerContext' in services.analytics) {
-        (services.analytics as any).setServerContext({
-            userAgent: requestHeaders.get('user-agent') || undefined,
-            language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
-            referrer: requestHeaders.get('referer') || undefined,
-            ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
-        });
-    }
+  if ('setServerContext' in services.analytics) {
+    (services.analytics as any).setServerContext({
+      userAgent: requestHeaders.get('user-agent') || undefined,
+      language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
+      referrer: requestHeaders.get('referer') || undefined,
+      ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
+    });
+  }
 
-    services.analytics.track('brochure-request-attempt');
+  services.analytics.track('brochure-request-attempt');
 
-    const email = formData.get('email') as string;
-    const locale = (formData.get('locale') as string) || 'en';
+  const email = formData.get('email') as string;
+  const locale = (formData.get('locale') as string) || 'en';
 
-    if (!email) {
-        logger.warn('Missing email in brochure request');
-        return { success: false, error: 'Missing email address' };
-    }
+  if (!email) {
+    logger.warn('Missing email in brochure request');
+    return { success: false, error: 'Missing email address' };
+  }
 
-    // Basic email validation
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-        return { success: false, error: 'Invalid email address' };
-    }
+  // Basic email validation
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return { success: false, error: 'Invalid email address' };
+  }
 
-    // 1. Save to CMS
-    try {
-        const { getPayload } = await import('payload');
-        const configPromise = (await import('@payload-config')).default;
-        const payload = await getPayload({ config: configPromise });
+  // 1. Save to CMS
+  try {
+    const { getPayload } = await import('payload');
+    const configPromise = (await import('@payload-config')).default;
+    const payload = await getPayload({ config: configPromise });
 
-        await payload.create({
-            collection: 'form-submissions',
-            data: {
-                name: email.split('@')[0],
-                email,
-                message: `Brochure download request (${locale})`,
-                type: 'brochure_download' as any,
-            },
-        });
-
-        logger.info('Successfully saved brochure request to Payload CMS', { email });
-    } catch (error) {
-        logger.error('Failed to store brochure request in Payload CMS', { error });
-        services.errors.captureException(error, { action: 'payload_store_brochure_request' });
-    }
-
-    // 2. Notify via Gotify
-    try {
-        await services.notifications.notify({
-            title: '📑 Brochure Download Request',
-            message: `New brochure download request from ${email} (${locale})`,
-            priority: 3,
-        });
-    } catch (error) {
-        logger.error('Failed to send notification', { error });
-    }
-
-    // 3. Track success
-    services.analytics.track('brochure-request-success', {
-        locale,
+    await payload.create({
+      collection: 'form-submissions',
+      data: {
+        name: email.split('@')[0],
+        email,
+        message: `Brochure download request (${locale})`,
+        type: 'brochure_download' as any,
+      },
     });
 
-    // Return the brochure URL
-    const brochureUrl = `/brochure/klz-product-catalog-${locale}.pdf`;
+    logger.info('Successfully saved brochure request to Payload CMS', { email });
+  } catch (error) {
+    logger.error('Failed to store brochure request in Payload CMS', { error });
+    services.errors.captureException(error, { action: 'payload_store_brochure_request' });
+  }
 
-    return { success: true, brochureUrl };
+  // 2. Notify via Gotify
+  try {
+    await services.notifications.notify({
+      title: '📑 Brochure Download Request',
+      message: `New brochure download request from ${email} (${locale})`,
+      priority: 3,
+    });
+  } catch (error) {
+    logger.error('Failed to send notification', { error });
+  }
+
+  // 3. Send Brochure via Email
+  const brochureUrl = `https://klz-cables.com/brochure/klz-product-catalog-${locale}.pdf`;
+
+  try {
+    const { sendEmail } = await import('@/lib/mail/mailer');
+    const { render } = await import('@mintel/mail');
+    const React = await import('react');
+    const { BrochureDeliveryEmail } = await import('@/components/emails/BrochureDeliveryEmail');
+
+    const html = await render(
+      React.createElement(BrochureDeliveryEmail, {
+        email,
+        brochureUrl,
+        locale: locale as 'en' | 'de',
+      }),
+    );
+
+    const emailResult = await sendEmail({
+      to: email,
+      subject: locale === 'de' ? 'Ihr KLZ Kabelkatalog' : 'Your KLZ Cable Catalog',
+      html,
+    });
+
+    if (emailResult.success) {
+      logger.info('Brochure email sent successfully', { email });
+    } else {
+      logger.error('Failed to send brochure email', { error: emailResult.error, email });
+      services.errors.captureException(new Error(`Brochure email failed: ${emailResult.error}`), {
+        action: 'requestBrochureAction_email',
+        email,
+      });
+      return { success: false, error: 'Failed to send email. Please try again later.' };
+    }
+  } catch (error) {
+    logger.error('Exception while sending brochure email', { error });
+    return { success: false, error: 'Failed to send email. Please try again later.' };
+  }
+
+  // 4. Track success
+  services.analytics.track('brochure-request-success', {
+    locale,
+    delivery_method: 'email',
+  });
+
+  return { success: true };
 }