feat(email): add primaryColor branding param to email templates

shop/app/api/admin/send-test-email/route.ts

@@ -43,7 +43,20 @@ export async function POST(request: Request) {
 
   const { to, subject, text, html } = await request.json();
   try {
-    const info = await sendMail({ to, subject, text, html });
+    const { data: brandData } = await supabase.from('settings').select('primary_color').eq('id', 'branding').maybeSingle();
+    const primaryColor = brandData?.primary_color || '#2563eb';
+
+    const testHtml = html || `
+      <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <h2 style="color: ${primaryColor}; margin-bottom: 16px;">Test-E-Mail</h2>
+        <p style="color: #475569; font-size: 16px; line-height: 1.5;">${text || 'Dies ist eine automatische Test-E-Mail.'}</p>
+        <div style="margin-top: 24px; padding: 12px; background-color: #f8fafc; border-left: 4px solid ${primaryColor}; font-size: 14px; color: #334155;">
+          SMTP-Konfiguration & Branding-Farbe erfolgreich verifiziert.
+        </div>
+      </div>
+    `;
+
+    const info = await sendMail({ to, subject, text, html: testHtml });
     return NextResponse.json({ message: 'Email sent', info });
   } catch (err) {
     console.error('Mail error', err);

shop/app/api/orders/checkout/route.ts

@@ -295,6 +295,9 @@ export async function POST(request: Request) {
 
           const itemsSection = buildEmailItemsSection(items);
 
+          const { data: brandData } = await supabase.from('settings').select('primary_color').eq('id', 'branding').maybeSingle();
+          const primaryColor = brandData?.primary_color || '#2563eb';
+
           const emailTemplate = getOrderEmailTemplate({
             orderNumber: order.order_number,
             formattedDate,
@@ -303,7 +306,7 @@ export async function POST(request: Request) {
             totalDetailsHtml,
             itemsDetailsText: itemsSection.text,
             itemsDetailsHtml: itemsSection.html
-          }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false);
+          }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false, primaryColor);
 
           const { data: bufferData, error: downloadError } = await supabase
             .storage

shop/lib/actions/email-templates.ts

@@ -14,7 +14,8 @@ interface EmailDetails {
 export function getOrderEmailTemplate(
   details: EmailDetails,
   siteUrl: string,
-  isUpdate: boolean = false
+  isUpdate: boolean = false,
+  primaryColor: string = '#2563eb'
 ) {
   const title = isUpdate ? 'Anfrage geändert' : 'Anfrage erhalten'
   const intro = isUpdate
@@ -65,7 +66,7 @@ export function getOrderEmailTemplate(
 
   const html = `
     <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
-      <h2 style="color: #0f172a; margin-bottom: 16px;">${title}</h2>
+      <h2 style="color: ${primaryColor}; margin-bottom: 16px;">${title}</h2>
       <p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
       <p style="color: #475569; font-size: 16px; line-height: 1.5;">${intro}</p>
       <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
@@ -90,7 +91,7 @@ export function getOrderEmailTemplate(
       </div>
       <p style="color: #475569; font-size: 16px; line-height: 1.5;">Die Bestätigung liegt als PDF im Anhang.</p>
       <p style="color: #475569; font-size: 16px; line-height: 1.5;">
-        <a href="${siteUrl}/api/orders/${details.orderNumber}/download" style="color: #3b82f6; text-decoration: underline; font-weight: 500;">Anfragebestätigung PDF herunterladen</a>
+        <a href="${siteUrl}/api/orders/${details.orderNumber}/download" style="color: ${primaryColor}; text-decoration: underline; font-weight: 500;">Anfragebestätigung PDF herunterladen</a>
       </p>
       <p style="color: #475569; font-size: 16px; line-height: 1.5; margin-top: 24px;">Viele Grüße,<br>Dein CASPOS Team</p>
     </div>
@@ -99,12 +100,12 @@ export function getOrderEmailTemplate(
   return { text, html }
 }
 
-export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string) {
+export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string, primaryColor: string = '#2563eb') {
   const text = `Hallo,\n\nder Status deiner Anfrage ${orderNumber} hat sich geändert.\n\nStatus: ${newLabel} (vorher: ${oldLabel})\n\nViele Grüße,\nDein CASPOS Team`
 
   const html = `
     <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
-      <h2 style="color: #0f172a; margin-bottom: 16px;">Statusänderung</h2>
+      <h2 style="color: ${primaryColor}; margin-bottom: 16px;">Statusänderung</h2>
       <p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
       <p style="color: #475569; font-size: 16px; line-height: 1.5;">der Status deiner Anfrage <strong>${orderNumber}</strong> wurde aktualisiert.</p>
       <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
@@ -119,7 +120,7 @@ export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, ne
           </tr>
           <tr>
             <td style="padding: 4px 0; font-weight: bold;">Aktuell:</td>
-            <td style="padding: 4px 0; font-weight: bold; color: #3b82f6;">${newLabel}</td>
+            <td style="padding: 4px 0; font-weight: bold; color: ${primaryColor};">${newLabel}</td>
           </tr>
         </table>
       </div>