t.indorf
fa06da324c
Mail templates (6 templates touched): - New shared `_styles.ts` exports a robust font stack starting with Arial/Helvetica so mail readers that lack -apple-system and BlinkMacSystemFont don't fall back to Monospace (observed in at least one webmail client). - `fontFamily` is now set on every text-bearing element, not only on `<Body>`, because some clients (Outlook, several webmail readers) do not inherit body CSS into nested sections. - ASCII substitutions are gone: "Ueber" → "Über", "fuer" → "für", "bestaetigen" → "bestätigen", "uebernehmen" → "übernehmen", "verlaesslich" → "verlässlich". - InviteEmail + NewsEmail buttons switch from the off-brand yellow (#f0b84b) to the brand dark green so the CTA matches the header. /invite form: - InviteState gains an `attempt` counter plus echoed checkbox `values`, mirroring the /register and /onboarding fix from earlier branches. A failed submit no longer wipes the Datenschutz / Adressbuch-Opt-In ticks. Passwords stay empty for security. - Field error <p> elements gain role="alert" + aria-live="polite" so screen readers announce validation failures on submit. Inputs use aria-describedby to link to error / helper text. Profile validation: - Telephone numbers must match a permissive pattern that still rejects obvious garbage (previously "abc-123-not-a-phone" was accepted). - Postal codes must match an alphanumeric pattern of 3–10 chars (previously "ABCDE" was accepted). - Child date-of-birth is now validated via superRefine: it must be a parseable date, not in the future, and not before 1900. Previously a kid born in 2030 was accepted. - The three Profil server actions now surface the first Zod issue message instead of generic "Ungültige Eingabedaten." toasts. Misc: - "fuer" → "für" in the Adressbuch page subtitle. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
153 lines
3.1 KiB
TypeScript
153 lines
3.1 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
|
|
import {
|
|
contactRequestTypeLabels,
|
|
type ContactRequestInput,
|
|
} from "@/lib/contact-schema";
|
|
import { fontStack } from "./_styles";
|
|
|
|
type ContactRequestEmailProps = ContactRequestInput;
|
|
|
|
export function ContactRequestEmail({
|
|
name,
|
|
kitaName,
|
|
email,
|
|
requestType,
|
|
message,
|
|
}: ContactRequestEmailProps) {
|
|
const inquiryLabel = contactRequestTypeLabels[requestType];
|
|
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>
|
|
Neue Kontaktanfrage von {name}
|
|
{kitaName ? ` (${kitaName})` : ""}
|
|
</Preview>
|
|
<Body style={body}>
|
|
<Container style={container}>
|
|
<Heading style={heading}>Neue Kontaktanfrage</Heading>
|
|
<Text style={intro}>
|
|
Über die Kita-Planer Landingpage ist eine neue Anfrage eingegangen.
|
|
</Text>
|
|
|
|
<Section style={details}>
|
|
<InfoRow label="Name" value={name} />
|
|
<InfoRow label="Kita / Initiative" value={kitaName || "Nicht angegeben"} />
|
|
<InfoRow label="E-Mail" value={email} />
|
|
<InfoRow label="Anliegen" value={inquiryLabel} />
|
|
</Section>
|
|
|
|
<Section style={messageBox}>
|
|
<Text style={label}>Nachricht</Text>
|
|
<Text style={messageText}>{message}</Text>
|
|
</Section>
|
|
|
|
<Text style={footer}>
|
|
Tipp: Direkt auf diese E-Mail antworten, um {name} unter {email} zu
|
|
erreichen.
|
|
</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: fontStack,
|
|
};
|
|
|
|
const container = {
|
|
margin: "0 auto",
|
|
padding: "32px 24px",
|
|
maxWidth: "620px",
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const heading = {
|
|
margin: "0 0 12px",
|
|
color: "#0f172a",
|
|
fontSize: "28px",
|
|
lineHeight: "34px",
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const intro = {
|
|
margin: "0 0 24px",
|
|
color: "#475569",
|
|
fontSize: "15px",
|
|
lineHeight: "24px",
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const details = {
|
|
border: "1px solid #d7e5dc",
|
|
borderRadius: "10px",
|
|
backgroundColor: "#ffffff",
|
|
padding: "18px",
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const row = {
|
|
margin: "0 0 10px",
|
|
color: "#0f172a",
|
|
fontSize: "15px",
|
|
lineHeight: "22px",
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const messageBox = {
|
|
marginTop: "18px",
|
|
border: "1px solid #d7e5dc",
|
|
borderRadius: "10px",
|
|
backgroundColor: "#ffffff",
|
|
padding: "18px",
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const label = {
|
|
margin: "0 0 8px",
|
|
color: "#64748b",
|
|
fontSize: "12px",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.04em",
|
|
textTransform: "uppercase" as const,
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const messageText = {
|
|
margin: 0,
|
|
color: "#0f172a",
|
|
fontSize: "15px",
|
|
lineHeight: "24px",
|
|
whiteSpace: "pre-wrap" as const,
|
|
fontFamily: fontStack,
|
|
};
|
|
|
|
const footer = {
|
|
margin: "22px 0 0",
|
|
color: "#64748b",
|
|
fontSize: "13px",
|
|
lineHeight: "20px",
|
|
fontFamily: fontStack,
|
|
};
|