// Floating inquiry CTA window — backend-wired. // // Datenfluss: // 1. Beim ersten Öffnen wird /api/inquiries/options gefetcht — liefert // aktive Kurse (mit Starttermine) + Behandlungen aus dem Admin-Backend. // Ergebnis wird gecacht für die Session. // 2. Drei Anfrage-Arten: 'general' / 'course' / 'behandlung'. // 3. CTAs aus Karten/Detail-Seiten öffnen das Formular mit prefill={title, kind}. // Wir matchen den Titel gegen die Backend-Optionen — bei Treffer wird der // passende Eintrag vorausgewählt, sonst Fallback auf 'general' mit Notiz. // 4. Submit POSTet an /api/inquiries → Backend mailt routet + speichert ins // Nachrichtenarchiv. const { useState, useEffect, useMemo } = React; // Backend-URL — später auf admin.dieweiberei.de umstellen. const WB_API_BASE = 'https://project-zd7wa.vercel.app'; // In-memory Cache für die Options-Antwort. Erste Öffnung lädt, weitere nutzen Cache. let _optionsCache = null; let _optionsPromise = null; const loadInquiryOptions = () => { if (_optionsCache) return Promise.resolve(_optionsCache); if (_optionsPromise) return _optionsPromise; _optionsPromise = fetch(WB_API_BASE + '/api/inquiries/options') .then((r) => r.ok ? r.json() : Promise.reject(new Error('Optionen konnten nicht geladen werden.'))) .then((data) => { _optionsCache = data; return data; }) .catch((err) => { _optionsPromise = null; throw err; }); return _optionsPromise; }; // ---------- Floating launcher button (always visible) ---------- const InquiryLauncher = ({ open, onToggle }) => { const isCoarse = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(hover: none), (pointer: coarse)').matches; return ( ); }; // ---------- Form ---------- // prefill kommt von CTA-Klicks: { title: "Baby-Yoga", kind: "course"|"behandlung" } const InquiryWindow = ({ open, onClose, prefill }) => { const [step, setStep] = useState(0); // 0=form, 1=sent const [options, setOptions] = useState({ courses: [], behandlungen: [], loading: true, error: null }); // Formular-State const [kind, setKind] = useState('general'); // 'general' | 'course' | 'behandlung' const [courseId, setCourseId] = useState(''); const [courseDate, setCourseDate] = useState(''); const [behandlungId, setBehandlungId] = useState(''); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [note, setNote] = useState(''); const [phase, setPhase] = useState(''); const [submitting, setSubmitting] = useState(false); const [submitError, setSubmitError] = useState(null); // Optionen laden, sobald das Fenster erstmals geöffnet wird useEffect(() => { if (!open) return; if (_optionsCache) { setOptions({ ...options, courses: _optionsCache.courses ?? [], behandlungen: _optionsCache.behandlungen ?? [], loading: false, error: null }); return; } setOptions((o) => ({ ...o, loading: true, error: null })); loadInquiryOptions().then( (data) => setOptions({ courses: data.courses ?? [], behandlungen: data.behandlungen ?? [], loading: false, error: null }), (err) => setOptions((o) => ({ ...o, loading: false, error: err.message })), ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); // Schließen-Animation: nach 400ms zurücksetzen useEffect(() => { if (!open) { const t = setTimeout(() => { setStep(0); setSubmitError(null); }, 400); return () => clearTimeout(t); } }, [open]); // Prefill verarbeiten: wenn beim Öffnen ein Titel mitkommt, versuchen // wir einen passenden Eintrag in den Optionen zu finden. useEffect(() => { if (!open || !prefill) return; if (options.loading) return; // warten bis Optionen da sind const wantedTitle = (prefill.title || '').trim().toLowerCase(); const wantedKind = prefill.kind; if (wantedKind === 'course' && wantedTitle) { const match = options.courses.find( (c) => c.title.toLowerCase() === wantedTitle || c.title.toLowerCase().includes(wantedTitle) || wantedTitle.includes(c.title.toLowerCase()), ); if (match) { setKind('course'); setCourseId(match.id); return; } } if (wantedKind === 'behandlung' && wantedTitle) { const match = options.behandlungen.find( (b) => b.title.toLowerCase() === wantedTitle || b.title.toLowerCase().includes(wantedTitle) || wantedTitle.includes(b.title.toLowerCase()), ); if (match) { setKind('behandlung'); setBehandlungId(match.id); return; } } // Kein Match: bleibe bei 'general' und schreibe den Titel als Hinweis ins Note-Feld if (wantedTitle && !note) { setNote(`Interesse an: ${prefill.title}`); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open, prefill, options.loading]); // Verfügbare Starttermine für den ausgewählten Kurs const selectedCourse = useMemo( () => options.courses.find((c) => c.id === courseId) || null, [options.courses, courseId], ); // Wenn Kurs gewechselt wird: Datum zurücksetzen (alter Wert evtl. ungültig) useEffect(() => { setCourseDate(''); }, [courseId]); // ---------- Submit ---------- const submit = async (e) => { e.preventDefault(); setSubmitError(null); // Pflichtfeld-Check if (!name.trim() || !email.trim()) { setSubmitError('Bitte Name und E-Mail ausfüllen.'); return; } if (kind === 'course' && !courseId) { setSubmitError('Bitte einen Kurs wählen.'); return; } if (kind === 'behandlung' && !behandlungId) { setSubmitError('Bitte eine Behandlung wählen.'); return; } setSubmitting(true); try { const body = { kind, customerName: name.trim(), customerEmail: email.trim(), customerPhone: phone.trim() || null, customerPhase: phase || null, message: note.trim() || null, }; if (kind === 'course') { body.courseId = courseId; if (courseDate) body.courseOccurrenceDate = courseDate; } else if (kind === 'behandlung') { body.behandlungId = behandlungId; } const res = await fetch(WB_API_BASE + '/api/inquiries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.ok) { throw new Error(json.error || 'Anfrage konnte nicht gesendet werden.'); } setStep(1); } catch (err) { setSubmitError(err.message || 'Unbekannter Fehler. Bitte später erneut versuchen.'); } finally { setSubmitting(false); } }; // ---------- Render ---------- return ( <> {/* backdrop */}