feat: add FlyerDownloadForm component
This commit is contained in:
parent
7c04450b57
commit
0cc396e090
|
|
@ -0,0 +1,113 @@
|
||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue