Add contact email confirmation and abuse protection

2026-05-16 11:38:30 +02:00
parent 9542def530
commit 0b80c62beb
12 changed files with 376 additions and 17 deletions
@@ -0,0 +1,141 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import {
+  contactRequestTypeLabels,
+  type ContactRequestInput,
+} from "@/lib/contact-schema";
+
+type ContactConfirmationEmailProps = ContactRequestInput;
+
+export function ContactConfirmationEmail({
+  name,
+  kitaName,
+  requestType,
+  message,
+}: ContactConfirmationEmailProps) {
+  const inquiryLabel = contactRequestTypeLabels[requestType];
+  const firstName = name.split(" ")[0] || name;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>
+        Wir haben deine Anfrage bei Kita-Planer erhalten.
+      </Preview>
+      <Body style={body}>
+        <Container style={container}>
+          <Heading style={heading}>Danke, {firstName}!</Heading>
+          <Text style={intro}>
+            Wir haben deine Anfrage erhalten und melden uns in der Regel
+            innerhalb von ein bis zwei Werktagen mit einem konkreten Vorschlag
+            bei dir.
+          </Text>
+
+          <Section style={summaryBox}>
+            <Text style={label}>Zusammenfassung deiner Anfrage</Text>
+            <InfoRow label="Anliegen" value={inquiryLabel} />
+            {kitaName ? <InfoRow label="Kita / Initiative" value={kitaName} /> : null}
+            <Text style={messageLabel}>Deine Nachricht</Text>
+            <Text style={messageText}>{message}</Text>
+          </Section>
+
+          <Text style={footer}>
+            Falls du etwas ergänzen möchtest, antworte einfach auf diese
+            E-Mail. Bis bald — das Kita-Planer Team.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <Text style={row}>
+      <strong>{label}:</strong> {value}
+    </Text>
+  );
+}
+
+const body = {
+  margin: 0,
+  backgroundColor: "#f8faf8",
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+};
+
+const container = {
+  margin: "0 auto",
+  padding: "32px 24px",
+  maxWidth: "620px",
+};
+
+const heading = {
+  margin: "0 0 12px",
+  color: "#0f172a",
+  fontSize: "28px",
+  lineHeight: "34px",
+};
+
+const intro = {
+  margin: "0 0 24px",
+  color: "#475569",
+  fontSize: "15px",
+  lineHeight: "24px",
+};
+
+const summaryBox = {
+  border: "1px solid #d7e5dc",
+  borderRadius: "10px",
+  backgroundColor: "#ffffff",
+  padding: "18px",
+};
+
+const label = {
+  margin: "0 0 12px",
+  color: "#64748b",
+  fontSize: "12px",
+  fontWeight: 700,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase" as const,
+};
+
+const row = {
+  margin: "0 0 10px",
+  color: "#0f172a",
+  fontSize: "15px",
+  lineHeight: "22px",
+};
+
+const messageLabel = {
+  margin: "14px 0 8px",
+  color: "#64748b",
+  fontSize: "12px",
+  fontWeight: 700,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase" as const,
+};
+
+const messageText = {
+  margin: 0,
+  color: "#0f172a",
+  fontSize: "15px",
+  lineHeight: "24px",
+  whiteSpace: "pre-wrap" as const,
+};
+
+const footer = {
+  margin: "22px 0 0",
+  color: "#64748b",
+  fontSize: "13px",
+  lineHeight: "20px",
+};