const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
// Plausibility check for German (+49 / 0) and Austrian (+43 / 0) phone numbers.
const isValidDEATPhone = (raw) => {
const s = (raw || "").replace(/[\s/().\-]/g, "");
const de = /^(\+49|0049|0)[1-9]\d{6,11}$/;
const at = /^(\+43|0043|0)[1-9]\d{3,12}$/;
return de.test(s) || at.test(s);
};
// Pickup time as one-hour windows (06:00–07:00 … 20:00–21:00) instead of a
// free minute-precision input — easier to dispatch and to choose on mobile.
const pad2 = (n) => String(n).padStart(2, "0");
const TIME_SLOTS = Array.from({ length: 15 }, (_, i) => `${pad2(6 + i)}:00 – ${pad2(7 + i)}:00`);
const initialData = {
vorname: "", nachname: "", telefon: "", email: "",
abhol: "", ziel: "", datum: "", uhrzeit: "",
type: "", rolliEigen: null, rolliBenoetigt: null, rollator: null,
begleitung: null, schein: null, pflegegrad: "", kasse: "",
wiederkehrend: null, notes: "",
};
const RequestForm = ({ open, onClose }) => {
const STEPS = t("form.steps");
const [step, setStep] = React.useState(0);
const [data, setData] = React.useState(initialData);
const [submitted, setSubmitted] = React.useState(false);
const [sending, setSending] = React.useState(false);
const [sendError, setSendError] = React.useState(false);
const [touched, setTouched] = React.useState({});
// Async deliverability check of the e-mail domain (MX/A lookup via DNS-over-HTTPS).
const [emailCheck, setEmailCheck] = React.useState({ status: "idle", email: "" });
// Per-open lead session id, used to track form progress on the backend.
const sessionIdRef = React.useRef(null);
React.useEffect(() => {
if (open) {
document.body.style.overflow = "hidden";
// New session per open; record that the form was started (step 0).
sessionIdRef.current = (window.crypto && crypto.randomUUID)
? crypto.randomUUID()
: "sid-" + Date.now() + "-" + Math.random().toString(36).slice(2);
track(0, false, initialData);
} else {
document.body.style.overflow = "";
}
}, [open]);
React.useEffect(() => {
const email = data.email.trim();
if (!email || !EMAIL_RE.test(email)) {
setEmailCheck({ status: "idle", email });
return;
}
const domain = email.split("@")[1];
let cancelled = false;
setEmailCheck({ status: "checking", email });
const dns = (type) => fetch("https://dns.google/resolve?name=" + encodeURIComponent(domain) + "&type=" + type)
.then(r => r.json())
.then(j => Array.isArray(j.Answer) && j.Answer.some(a => a.type === (type === "MX" ? 15 : 1)));
const tid = setTimeout(() => {
dns("MX")
.then(hasMX => hasMX ? true : dns("A"))
.then(deliverable => { if (!cancelled) setEmailCheck({ status: deliverable ? "valid" : "invalid", email }); })
.catch(() => { if (!cancelled) setEmailCheck({ status: "unknown", email }); });
}, 500);
return () => { cancelled = true; clearTimeout(tid); };
}, [data.email]);
if (!open) return null;
const set = (k, v) => setData(d => ({ ...d, [k]: v }));
const emailVal = data.email.trim();
const emailFormatOk = !emailVal || EMAIL_RE.test(emailVal);
const emailDeliverable = !emailVal || (emailFormatOk && emailCheck.status !== "invalid");
const errs = {};
if (step === 0) {
if (touched.vorname && !data.vorname.trim()) errs.vorname = t("form.err.vorname");
if (touched.nachname && !data.nachname.trim()) errs.nachname = t("form.err.nachname");
if (touched.telefon) {
if (!data.telefon.trim()) errs.telefon = t("form.err.telefon");
else if (!isValidDEATPhone(data.telefon)) errs.telefon = t("form.err.telefonInvalid");
}
if (touched.email && emailVal) {
if (!emailFormatOk) errs.email = t("form.err.emailInvalid");
else if (emailCheck.status === "invalid") errs.email = t("form.err.emailUnknown");
}
}
if (step === 1) {
if (touched.abhol && !data.abhol.trim()) errs.abhol = t("form.err.abhol");
if (touched.ziel && !data.ziel.trim()) errs.ziel = t("form.err.ziel");
if (touched.datum && !data.datum) errs.datum = t("form.err.datum");
}
const canNext = (() => {
if (step === 0) return data.vorname && data.nachname && data.telefon && isValidDEATPhone(data.telefon) && emailFormatOk && emailDeliverable;
if (step === 1) return data.abhol && data.ziel && data.datum;
if (step === 2) return !!data.type;
return true;
})();
// Fire-and-forget progress ping to the Django tracker. Stores how far each
// visitor got (funnel) under a per-open session id. Never blocks the UI.
const track = (step, completed, dataArg) => {
if (!sessionIdRef.current) return;
try {
fetch("/api/lead/", {
method: "POST",
headers: { "Content-Type": "application/json" },
keepalive: true,
body: JSON.stringify({
session_id: sessionIdRef.current,
step,
completed: !!completed,
lang: window.LANG || "de",
data: dataArg || data,
}),
}).catch(() => {});
} catch (e) { /* ignore */ }
};
const next = () => {
if (step === 0) setTouched(t => ({ ...t, vorname: true, nachname: true, telefon: true }));
if (step === 1) setTouched(t => ({ ...t, abhol: true, ziel: true, datum: true }));
if (!canNext) return;
if (step < STEPS.length - 1) {
const ns = step + 1;
setStep(ns);
track(ns, false); // record advance to the next step
} else {
submit();
}
};
const back = () => step > 0 && setStep(step - 1);
// Final submit: mark the lead completed (this is what triggers the brief
// Telegram notification on the server) and show the success view.
const submit = async () => {
if (sending) return;
setSending(true);
setSendError(false);
try {
const res = await fetch("/api/lead/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
session_id: sessionIdRef.current,
step: STEPS.length - 1,
completed: true,
lang: window.LANG || "de",
data,
}),
});
if (!res.ok) throw new Error("bad status " + res.status);
setSubmitted(true);
} catch (e) {
setSendError(true);
} finally {
setSending(false);
}
};
const close = () => {
onClose();
setTimeout(() => {
setStep(0); setData(initialData); setSubmitted(false); setTouched({});
setSending(false); setSendError(false);
}, 200);
};
return (
{ if (e.target === e.currentTarget) close(); }}
>
{/* Sidebar */}
{/* Main */}
{/* Mobile progress dots */}
{STEPS.map((s, i) => (
))}
) : (
<>
{window.tf("form.stepCounter", { n: step + 1, total: STEPS.length })}
{t("form.stepTitles")[step]}
{step === 0 && }
{step === 1 && }
{step === 2 && }
{step === 3 && }
{step === 4 && }
{sendError && (
{(window.LANG === "ru")
? "Не удалось отправить заявку. Попробуйте ещё раз или позвоните нам."
: "Anfrage konnte nicht gesendet werden. Bitte erneut versuchen oder rufen Sie uns an."}
)}
{t("form.back")}
{sending
? ((window.LANG === "ru") ? "Отправка…" : "Senden…")
: (step === STEPS.length - 1 ? t("form.submit") : t("form.next"))}
)}
{label}
{children}
{error ? (
{error}
) : hint ? (
{hint}
) : null}
);
const StepPersonal = ({ data, set, errs, setTouched, emailCheck }) => (
);
const StepTrip = ({ data, set, errs, setTouched }) => {
const abholRef = React.useRef(null);
const zielRef = React.useRef(null);
React.useEffect(() => {
if (typeof window.loadGoogleMaps !== "function") return;
let autos = [];
let cancelled = false;
window.loadGoogleMaps().then((maps) => {
if (cancelled) return;
const opts = { componentRestrictions: { country: ["de", "at"] }, fields: ["formatted_address"], types: ["address"] };
[[abholRef, "abhol"], [zielRef, "ziel"]].forEach(([ref, key]) => {
if (!ref.current) return;
const ac = new maps.places.Autocomplete(ref.current, opts);
ac.addListener("place_changed", () => {
const place = ac.getPlace();
if (place && place.formatted_address) {
set(key, place.formatted_address);
setTouched(t => ({ ...t, [key]: true }));
}
});
autos.push(ac);
});
}).catch(() => { /* no/invalid API key — fields stay plain text inputs */ });
return () => {
cancelled = true;
if (window.google && window.google.maps) {
autos.forEach(ac => window.google.maps.event.clearInstanceListeners(ac));
}
};
}, []);
return (
);
};
const StepType = ({ data, set }) => {
const types = t("form.transportTypes");
return (
{t("form.type.intro")}
{types.map(tt => {
const C = Icon[tt.icon];
const active = data.type === tt.id;
return (
set("type", tt.id)} type="button">
{tt.d}
);
})}
);
};
const YesNo = ({ label, sub, value, onChange }) => {
const opts = [t("form.yes"), t("form.no")];
return (
{opts.map(v => (
onChange(v)}>{v}
))}
);
};
const StepExtras = ({ data, set }) => (
{data.type === "rolli" && (
set("rolliEigen", v)} />
)}
set("rollator", v)} />
set("begleitung", v)} />
set("schein", v)} />
set("pflegegrad", e.target.value)}>
{t("form.extras.pflegegradPlaceholder")}
{t("form.pflegegrade").map(p => {p} )}
set("kasse", e.target.value)}>
{t("form.extras.kassePlaceholder")}
{t("form.krankenkassen").map(k => {k} )}
set("wiederkehrend", v)} />
{t("form.extras.uploadTitle")}
{t("form.extras.uploadSub")}
{t("form.extras.uploadBtn")}
{rows.map(([k, v], i) => (
{k}
{v}
))}