feat: Implement dual email sending for contact form submissions, including a customer confirmation and internal notification, by refactoring email rendering to accept pre-rendered HTML.

app/actions/contact.ts

@@ -3,7 +3,7 @@
 import client, { ensureAuthenticated } from '@/lib/directus';
 import { createItem } from '@directus/sdk';
 import { sendEmail } from '@/lib/mail/mailer';
-import ContactEmail from '@/components/emails/ContactEmail';
+import { render, ContactFormNotification, ConfirmationMessage } from '@mintel/mail';
 import React from 'react';
 import { getServerAppServices } from '@/lib/services/create-services.server';
 
@@ -51,38 +51,73 @@ export async function sendContactFormAction(formData: FormData) {
     services.errors.captureException(error, { action: 'directus_store_submission' });
   }
 
-  // 2. Send Email
-  logger.info('Sending contact form email', { email, productName });
+  // 2. Send Emails
+  logger.info('Sending branded emails', { email, productName });
 
-  const subject = productName ? `Product Inquiry: ${productName}` : 'New Contact Form Submission';
+  const notificationSubject = productName
+    ? `Product Inquiry: ${productName}`
+    : 'New Contact Form Submission';
+  const confirmationSubject = 'Thank you for your inquiry';
 
-  const result = await sendEmail({
-    subject,
-    template: React.createElement(ContactEmail, {
-      name,
-      email,
-      message,
-      productName: productName || undefined,
-      subject,
-    }),
-  });
+  try {
+    // 2a. Send notification to Mintel/Client
+    const notificationHtml = await render(
+      React.createElement(ContactFormNotification, {
+        name,
+        email,
+        message,
+        productName: productName || undefined,
+      }),
+    );
 
-  if (result.success) {
-    logger.info('Contact form email sent successfully', { messageId: result.messageId });
+    const notificationResult = await sendEmail({
+      subject: notificationSubject,
+      html: notificationHtml,
+    });
+
+    if (notificationResult.success) {
+      logger.info('Notification email sent successfully', {
+        messageId: notificationResult.messageId,
+      });
+    }
+
+    // 2b. Send confirmation to Customer (branded as KLZ Cables)
+    const confirmationHtml = await render(
+      React.createElement(ConfirmationMessage, {
+        name,
+        clientName: 'KLZ Cables',
+        // brandColor: '#82ed20', // Optional: could be KLZ specific
+      }),
+    );
+
+    const confirmationResult = await sendEmail({
+      to: email,
+      subject: confirmationSubject,
+      html: confirmationHtml,
+    });
+
+    if (confirmationResult.success) {
+      logger.info('Confirmation email sent successfully', {
+        messageId: confirmationResult.messageId,
+      });
+    }
+
+    // Notify via Gotify (Internal)
     await services.notifications.notify({
-      title: `📩 ${subject}`,
+      title: `📩 ${notificationSubject}`,
       message: `New message from ${name} (${email}):\n\n${message}`,
       priority: 5,
     });
-  } else {
-    logger.error('Failed to send contact form email', { error: result.error });
-    services.errors.captureException(result.error, { action: 'sendContactFormAction', email });
+
+    return { success: true };
+  } catch (error) {
+    logger.error('Failed to send branded emails', { error });
+    services.errors.captureException(error, { action: 'sendContactFormAction', email });
     await services.notifications.notify({
       title: '🚨 Contact Form Error',
-      message: `Failed to send email for ${name} (${email}). Error: ${JSON.stringify(result.error)}`,
+      message: `Failed to send emails for ${name} (${email}). Error: ${JSON.stringify(error)}`,
       priority: 8,
     });
+    return { success: false, error };
   }
-
-  return result;
 }