114 lines
4.1 KiB
TypeScript
114 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
type Status = "idle" | "loading" | "success" | "error";
|
||
|
||
export default function FlyerDownloadForm() {
|
||
const [email, setEmail] = useState("");
|
||
const [dsgvo, setDsgvo] = useState(false);
|
||
const [status, setStatus] = useState<Status>("idle");
|
||
const [errorMsg, setErrorMsg] = useState("");
|
||
const [downloadUrl, setDownloadUrl] = useState("");
|
||
|
||
async function handleSubmit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setStatus("loading");
|
||
setErrorMsg("");
|
||
|
||
try {
|
||
const res = await fetch("/api/familyguard-flyer", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ email, dsgvoEinwilligung: dsgvo }),
|
||
});
|
||
const data = await res.json();
|
||
|
||
if (!res.ok || !data.ok) {
|
||
setErrorMsg(data.error ?? "Unbekannter Fehler");
|
||
setStatus("error");
|
||
} else {
|
||
setDownloadUrl(data.downloadUrl);
|
||
setStatus("success");
|
||
}
|
||
} catch {
|
||
setErrorMsg("Netzwerkfehler – bitte versuchen Sie es erneut.");
|
||
setStatus("error");
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div
|
||
id="flyer-download"
|
||
className="mb-16 p-6 sm:p-8 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 scroll-mt-24"
|
||
>
|
||
<div className="text-center mb-6">
|
||
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
||
Flyer
|
||
</span>
|
||
<h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1 mb-2">
|
||
FamilyGuard-Flyer herunterladen
|
||
</h3>
|
||
<p className="text-slate-600 dark:text-slate-400 text-sm max-w-xl mx-auto">
|
||
Alle Infos zu MBO FamilyGuard kompakt als PDF – tragen Sie Ihre E-Mail-Adresse
|
||
ein und laden Sie den Flyer direkt herunter.
|
||
</p>
|
||
</div>
|
||
|
||
{status === "success" ? (
|
||
<div className="flex flex-col items-center text-center">
|
||
<p className="text-slate-700 dark:text-slate-300 text-sm mb-4">
|
||
Fertig! Der Flyer wurde Ihnen außerdem per E-Mail zugeschickt.
|
||
</p>
|
||
<a href={downloadUrl} download className="btn-primary inline-flex px-6 py-3 text-sm">
|
||
Flyer jetzt herunterladen
|
||
</a>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="max-w-md mx-auto space-y-4">
|
||
<input
|
||
type="email"
|
||
required
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
placeholder="max@beispiel.de"
|
||
className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
|
||
/>
|
||
|
||
<label className="flex items-start gap-2 text-xs text-slate-600 dark:text-slate-400">
|
||
<input
|
||
type="checkbox"
|
||
required
|
||
checked={dsgvo}
|
||
onChange={(e) => setDsgvo(e.target.checked)}
|
||
className="mt-0.5"
|
||
/>
|
||
<span>
|
||
Ich bin damit einverstanden, dass meine E-Mail-Adresse zum Zweck des
|
||
Flyer-Versands gespeichert wird. Details in der{" "}
|
||
<a href="/datenschutz" className="text-orange-400 hover:underline">
|
||
Datenschutzerklärung
|
||
</a>
|
||
.
|
||
</span>
|
||
</label>
|
||
|
||
{status === "error" && (
|
||
<div className="flex items-start gap-3 px-4 py-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
|
||
<span>{errorMsg || "Anfrage fehlgeschlagen. Bitte versuchen Sie es erneut."}</span>
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={status === "loading"}
|
||
className="btn-primary w-full py-3 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
|
||
>
|
||
{status === "loading" ? "Wird gesendet..." : "Flyer herunterladen"}
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|