add support message button in saas

2026-02-10 20:02:26 +00:00 · 2025-10-27 21:55:34 -07:00
parent 9e5c9d9c34
commit 8b4722b1c9
7 changed files with 476 additions and 15 deletions
--- a/server/emails/templates/SupportEmail.tsx
+++ b/server/emails/templates/SupportEmail.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Body, Head, Html, Preview, Tailwind } from "@react-email/components";
+import { themeColors } from "./lib/theme";
+import {
+    EmailContainer,
+    EmailGreeting,
+    EmailLetterHead,
+    EmailText
+} from "./components/Email";
+
+interface SupportEmailProps {
+    email: string;
+    username: string;
+    subject: string;
+    body: string;
+}
+
+export const SupportEmail = ({
+    username,
+    email,
+    body,
+    subject
+}: SupportEmailProps) => {
+    const previewText = subject;
+
+    return (
+        <Html>
+            <Head />
+            <Preview>{previewText}</Preview>
+            <Tailwind config={themeColors}>
+                <Body className="font-sans bg-gray-50">
+                    <EmailContainer>
+                        <EmailLetterHead />
+
+                        <EmailGreeting>Hi support,</EmailGreeting>
+
+                        <EmailText>
+                            You have received a new support request from{" "}
+                            <strong>{username}</strong> ({email}).
+                        </EmailText>
+
+                        <EmailText>
+                            <strong>Subject:</strong> {subject}
+                        </EmailText>
+
+                        <EmailText>
+                            <strong>Message:</strong> {body}
+                        </EmailText>
+                    </EmailContainer>
+                </Body>
+            </Tailwind>
+        </Html>
+    );
+};
+
+export default SupportEmail;