79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type FormEvent } from "react";
|
|
import { track } from "@/lib/analytics/client";
|
|
import { TextField, TextAreaField } from "@/components/FormField";
|
|
import { TurnstileWidget } from "@/components/TurnstileWidget";
|
|
|
|
type ContactFormProps = {
|
|
toEmail?: string;
|
|
subjectPrefix?: string;
|
|
type?: "contact" | "appointment";
|
|
submitLabel?: string;
|
|
};
|
|
|
|
export function ContactForm({
|
|
siteKey,
|
|
subjectPrefix = "Allgemeine Anfrage",
|
|
type = "contact",
|
|
submitLabel = "Nachricht senden",
|
|
}: ContactFormProps & { siteKey: string }) {
|
|
const [state, setState] = useState<{ sent: boolean; error?: string }>({ sent: false });
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
const [resetKey, setResetKey] = useState(0);
|
|
|
|
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
const data = new FormData(e.currentTarget);
|
|
const name = String(data.get("name") ?? "");
|
|
const email = String(data.get("email") ?? "");
|
|
const message = String(data.get("message") ?? "");
|
|
setSubmitting(true);
|
|
setState({ sent: false });
|
|
try {
|
|
const response = await fetch("/api/contact/inquiry", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name, email, message, subject: `${subjectPrefix} von ${name}`, type, token }),
|
|
});
|
|
const result = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
setState({ sent: false, error: result.error || "Die Nachricht konnte nicht gesendet werden." });
|
|
setSubmitting(false);
|
|
return;
|
|
}
|
|
track("contact_clicked");
|
|
setState({ sent: true });
|
|
e.currentTarget.reset();
|
|
} catch {
|
|
setState({ sent: false, error: "Verbindung fehlgeschlagen. Bitte versuche es erneut." });
|
|
} finally {
|
|
setSubmitting(false);
|
|
setResetKey((key) => key + 1);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<TextField label="Name" id="name" name="name" type="text" required autoComplete="name" />
|
|
<TextField label="E-Mail" id="email" name="email" type="email" required autoComplete="email" />
|
|
<TextAreaField label="Deine Nachricht" id="message" name="message" required rows={5} />
|
|
<TurnstileWidget siteKey={siteKey} action="contact" resetKey={resetKey} onTokenChange={setToken} />
|
|
<button
|
|
type="submit"
|
|
disabled={submitting || !token}
|
|
className="inline-flex items-center justify-center rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium tracking-wide text-white transition-colors duration-300 hover:bg-anouma-plum"
|
|
>
|
|
{submitting ? "Wird gesendet …" : submitLabel}
|
|
</button>
|
|
{state.sent && (
|
|
<p className="text-sm text-anouma-olive" role="status">
|
|
Danke, deine Nachricht ist angekommen. Anna antwortet dir per E-Mail; du kannst direkt auf ihre Antwort reagieren.
|
|
</p>
|
|
)}
|
|
{state.error && <p className="text-sm text-red-700" role="alert">{state.error}</p>}
|
|
</form>
|
|
);
|
|
}
|