From 21a7b0ade2da92f7b68a84de222a30280faaa073 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Fri, 6 Feb 2026 18:24:58 +0100
Subject: [PATCH] feat: Implement `replyTo` for contact form emails and refine
 success/error message layout.

---
 app/actions/contact.ts          |  1 +
 components/RequestQuoteForm.tsx | 63 +++++++++++++++++++--------------
 lib/mail/mailer.ts              |  4 ++-
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/app/actions/contact.ts b/app/actions/contact.ts
index 0b9956ba..b3979220 100644
--- a/app/actions/contact.ts
+++ b/app/actions/contact.ts
@@ -71,6 +71,7 @@ export async function sendContactFormAction(formData: FormData) {
     );
 
     const notificationResult = await sendEmail({
+      replyTo: email,
       subject: notificationSubject,
       html: notificationHtml,
     });
diff --git a/components/RequestQuoteForm.tsx b/components/RequestQuoteForm.tsx
index 34a9d56b..04aef247 100644
--- a/components/RequestQuoteForm.tsx
+++ b/components/RequestQuoteForm.tsx
@@ -49,21 +49,28 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
 
   if (status === 'success') {
     return (
-      <div className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center flex flex-col items-center animate-fade-in !mt-0">
-        <div className="w-10 h-10 bg-accent rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-accent/20">
-          <svg
-            className="w-5 h-5 text-primary-dark"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-          </svg>
+      <div className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0 w-full">
+        <div className="flex justify-center mb-3">
+          <div className="w-10 h-10 bg-accent rounded-full flex items-center justify-center shadow-lg shadow-accent/20">
+            <svg
+              className="w-5 h-5 text-primary-dark"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={3}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
         </div>
-        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-center">
+        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-center w-full">
           {t('successTitle')}
         </h3>
-        <p className="text-text-secondary text-xs leading-tight mb-4 !mt-0 text-center">
+        <p className="text-text-secondary text-xs leading-tight mb-4 !mt-0 text-center w-full">
           {t('successDesc', { productName })}
         </p>
         <button
@@ -80,24 +87,26 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
 
   if (status === 'error') {
     return (
-      <div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center flex flex-col items-center animate-fade-in !mt-0">
-        <div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-destructive/20">
-          <svg
-            className="w-5 h-5 text-destructive-foreground"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth="3"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <line x1="15" y1="9" x2="9" y2="15" />
-            <line x1="9" y1="9" x2="15" y2="15" />
-          </svg>
+      <div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0 w-full">
+        <div className="flex justify-center mb-3">
+          <div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center shadow-lg shadow-destructive/20">
+            <svg
+              className="w-5 h-5 text-destructive-foreground"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth="3"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="15" y1="9" x2="9" y2="15" />
+              <line x1="9" y1="9" x2="15" y2="15" />
+            </svg>
+          </div>
         </div>
-        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive text-center">
+        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive text-center w-full">
           {t('errorTitle') || 'Submission Failed'}
         </h3>
-        <p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0 text-center">
+        <p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0 text-center w-full">
           {t('errorDesc') || 'Something went wrong. Please try again.'}
         </p>
         <Button
diff --git a/lib/mail/mailer.ts b/lib/mail/mailer.ts
index 89898804..5e7f6388 100644
--- a/lib/mail/mailer.ts
+++ b/lib/mail/mailer.ts
@@ -27,16 +27,18 @@ function getTransporter() {
 
 interface SendEmailOptions {
   to?: string | string[];
+  replyTo?: string;
   subject: string;
   html: string;
 }
 
-export async function sendEmail({ to, subject, html }: SendEmailOptions) {
+export async function sendEmail({ to, replyTo, subject, html }: SendEmailOptions) {
   const recipients = to || config.mail.recipients;
 
   const mailOptions = {
     from: config.mail.from,
     to: recipients,
+    replyTo,
     subject,
     html,
   };