"use client"; import { useState, useMemo, useEffect } from "react"; import { Box, Flex, Stack, VStack, Text, Heading, Button, Input, Textarea, SimpleGrid, NativeSelect, Dialog, Popover, Portal, Spinner, Alert, } from "@chakra-ui/react"; import { Icon } from "@obelisk/blocks"; const WINE = "#6d0202"; const WINE_HOVER = "#520101"; const GOLD = "#c9a961"; const DARK = "#2A1A1C"; const MUTED = "#7A6A66"; const GREEN = "#4f9d69"; const GREEN_HOVER = "#41855a"; const RED = "#d65745"; // --------------------------------------------------------------------------- // Vertalingen — elke zichtbare UI-tekst per taal. 'nl' is byte-voor-byte // gelijk aan de oorspronkelijke Nederlandse teksten (gedeeld met de // Nederlandse site obelisk.kasteelhoeve.nl). 'de' is formeel ("Sie"), // 'fr' is formeel ("vous"). // --------------------------------------------------------------------------- const translations = { nl: { locale: "nl-NL", selectLabel: "Provincie van de proeverij", vasteLocatieSuffix: "Vaste locatie", kiesLocatiePlaceholder: "→ Kies hier je provincie", kiesLocatieEerst: "Kies eerst een provincie om de beschikbare dagen te zien.", lastminuteLabel: "Last minute — Wereldreis Proeverij", dagen: [ "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag", "zondag", ], dagKort: ["ma", "di", "wo", "do", "vr", "za", "zo"], dagAfk: ["zo", "ma", "di", "wo", "do", "vr", "za"], maanden: [ "januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december", ], stappen: ["Naam", "Adresgegevens", "Reservering", "Afronden"], persoonEnkel: "1 persoon", personenMeerv: (n) => n + " personen", kiesPersonen: "Kies aantal personen", aantalPersonen: "Aantal personen", beschikbareTijdenOp: "Beschikbare tijden op ", tijdenLaden: "Tijden laden…", tijdenLadenError: "Kon de tijden niet laden.", geenTijden: "Geen beschikbare tijden.", vorigeMaand: "Vorige maand", volgendeMaand: "Volgende maand", beschikbaar: "Beschikbaar", nietBeschikbaar: "Niet beschikbaar", lastminuteLegenda: "Last minute (Wereldreis Proeverij)", beschikbaarheidError: "Kon de beschikbaarheid niet laden. Is de OnlineAfspraken-app geïnstalleerd en geconfigureerd?", veldVerplicht: "Dit veld is verplicht.", optiesLaden: "Opties laden…", optiesError: "Kon de opties niet laden.", sluiten: "Sluiten", bedankt: "Bedankt voor je reservering!", bevestigingPre: "We hebben je aanvraag voor ", bevestigingMid: " op ", bevestigingPost: " ontvangen. Je krijgt zo een bevestiging per e-mail.", omTeGaan: "Vul de gemarkeerde velden in om verder te gaan.", vulVerplichte: "Vul de gemarkeerde verplichte velden in.", boekError: "Er ging iets mis bij het reserveren. Probeer het opnieuw.", controleerVelden: "Controleer de volgende velden", letOp: "Let op", vorige: "Vorige", volgende: "Volgende", bezig: "Bezig…", afspraakBevestigen: "Afspraak bevestigen", stap0Titel: "Jouw gegevens", veldenMet: "Velden met een ", zijnVerplicht: " zijn verplicht", voornaam: "Voornaam", achternaam: "Achternaam", email: "E-mailadres", emailPlaceholder: "naam@domein.nl", emailHelper: "Via dit e-mailadres houden we je op de hoogte over de afspraak.", stap1Titel: "Adresgegevens", stap1Sub: "Vul hier het adres in waar de thuisproeverij mag plaatsvinden.", adres: "Adres", postcode: "Postcode", postcodePlaceholder: "1234 AA", plaats: "Plaats", telefoon: "Telefoonnummer", telefoonPlaceholder: "010-1234567", mobiel: "Mobiel nummer", stap2Titel: "Je reservering", waardebon: "Waardebon nummer", bubbel: "Heeft u een waardebon voor een bubbelproeverij? Zet dan hier een vinkje.", stap3Titel: "Voeg een opmerking toe", opmerking: "Opmerking", opmerkingHelper: "Indien je een opmerking wil toevoegen kun je dit in bovenstaand veld doen.", nieuwsbriefTitel: "Nieuwsbrief", nieuwsbrief: "Ik schrijf mij in voor de nieuwsbrief.", omUur: " om ", uur: " uur", }, de: { locale: "de-DE", selectLabel: "Region der Weinprobe", vasteLocatieSuffix: "Fester Standort", kiesLocatiePlaceholder: "→ Wählen Sie hier Ihre Region", kiesLocatieEerst: "Wählen Sie zuerst eine Region, um die verfügbaren Tage zu sehen.", lastminuteLabel: "Last Minute — Weltreise-Weinprobe", dagen: [ "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", ], dagKort: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"], dagAfk: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"], maanden: [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ], stappen: ["Name", "Adressdaten", "Reservierung", "Abschließen"], persoonEnkel: "1 Person", personenMeerv: (n) => n + " Personen", kiesPersonen: "Anzahl der Personen wählen", aantalPersonen: "Anzahl der Personen", beschikbareTijdenOp: "Verfügbare Zeiten am ", tijdenLaden: "Zeiten werden geladen…", tijdenLadenError: "Die Zeiten konnten nicht geladen werden.", geenTijden: "Keine verfügbaren Zeiten.", vorigeMaand: "Vorheriger Monat", volgendeMaand: "Nächster Monat", beschikbaar: "Verfügbar", nietBeschikbaar: "Nicht verfügbar", lastminuteLegenda: "Last Minute (Weltreise-Weinprobe)", beschikbaarheidError: "Die Verfügbarkeit konnte nicht geladen werden. Ist die OnlineAfspraken-App installiert und konfiguriert?", veldVerplicht: "Dieses Feld ist erforderlich.", optiesLaden: "Optionen werden geladen…", optiesError: "Die Optionen konnten nicht geladen werden.", sluiten: "Schließen", bedankt: "Vielen Dank für Ihre Reservierung!", bevestigingPre: "Wir haben Ihre Anfrage für ", bevestigingMid: " am ", bevestigingPost: " erhalten. Sie erhalten in Kürze eine Bestätigung per E-Mail.", omTeGaan: "Bitte füllen Sie die markierten Felder aus, um fortzufahren.", vulVerplichte: "Bitte füllen Sie die markierten Pflichtfelder aus.", boekError: "Bei der Reservierung ist etwas schiefgelaufen. Bitte versuchen Sie es erneut.", controleerVelden: "Bitte überprüfen Sie die folgenden Felder", letOp: "Achtung", vorige: "Zurück", volgende: "Weiter", bezig: "Wird verarbeitet…", afspraakBevestigen: "Termin bestätigen", stap0Titel: "Ihre Daten", veldenMet: "Felder mit einem ", zijnVerplicht: " sind Pflichtfelder", voornaam: "Vorname", achternaam: "Nachname", email: "E-Mail-Adresse", emailPlaceholder: "name@domain.de", emailHelper: "Über diese E-Mail-Adresse halten wir Sie über den Termin auf dem Laufenden.", stap1Titel: "Adressdaten", stap1Sub: "Bitte geben Sie hier die Adresse an, an der die Weinprobe zu Hause stattfinden darf.", adres: "Adresse", postcode: "Postleitzahl", postcodePlaceholder: "12345", plaats: "Ort", telefoon: "Telefonnummer", telefoonPlaceholder: "030-1234567", mobiel: "Mobilnummer", stap2Titel: "Ihre Reservierung", waardebon: "Gutscheinnummer", bubbel: "Haben Sie einen Gutschein für eine Schaumwein-Probe? Setzen Sie dann hier ein Häkchen.", stap3Titel: "Eine Anmerkung hinzufügen", opmerking: "Anmerkung", opmerkingHelper: "Wenn Sie eine Anmerkung hinzufügen möchten, können Sie dies im obigen Feld tun.", nieuwsbriefTitel: "Newsletter", nieuwsbrief: "Ich melde mich für den Newsletter an.", omUur: " um ", uur: " Uhr", }, fr: { locale: "fr-FR", selectLabel: "Région de la dégustation", vasteLocatieSuffix: "Lieu fixe", kiesLocatiePlaceholder: "→ Choisissez votre région ici", kiesLocatieEerst: "Choisissez d'abord une région pour voir les jours disponibles.", lastminuteLabel: "Dernière minute — Dégustation Tour du Monde", dagen: [ "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche", ], dagKort: ["lun", "mar", "mer", "jeu", "ven", "sam", "dim"], dagAfk: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"], maanden: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre", ], stappen: ["Nom", "Adresse", "Réservation", "Finaliser"], persoonEnkel: "1 personne", personenMeerv: (n) => n + " personnes", kiesPersonen: "Choisissez le nombre de personnes", aantalPersonen: "Nombre de personnes", beschikbareTijdenOp: "Horaires disponibles le ", tijdenLaden: "Chargement des horaires…", tijdenLadenError: "Impossible de charger les horaires.", geenTijden: "Aucun horaire disponible.", vorigeMaand: "Mois précédent", volgendeMaand: "Mois suivant", beschikbaar: "Disponible", nietBeschikbaar: "Non disponible", lastminuteLegenda: "Dernière minute (Dégustation Tour du Monde)", beschikbaarheidError: "Impossible de charger les disponibilités. L'application OnlineAfspraken est-elle installée et configurée ?", veldVerplicht: "Ce champ est obligatoire.", optiesLaden: "Chargement des options…", optiesError: "Impossible de charger les options.", sluiten: "Fermer", bedankt: "Merci pour votre réservation !", bevestigingPre: "Nous avons bien reçu votre demande pour ", bevestigingMid: " le ", bevestigingPost: ". Vous recevrez sous peu une confirmation par e-mail.", omTeGaan: "Veuillez remplir les champs indiqués pour continuer.", vulVerplichte: "Veuillez remplir les champs obligatoires indiqués.", boekError: "Une erreur s'est produite lors de la réservation. Veuillez réessayer.", controleerVelden: "Veuillez vérifier les champs suivants", letOp: "Attention", vorige: "Précédent", volgende: "Suivant", bezig: "En cours…", afspraakBevestigen: "Confirmer le rendez-vous", stap0Titel: "Vos coordonnées", veldenMet: "Les champs marqués d'un ", zijnVerplicht: " sont obligatoires", voornaam: "Prénom", achternaam: "Nom", email: "Adresse e-mail", emailPlaceholder: "nom@domaine.fr", emailHelper: "Nous vous tiendrons informé(e) du rendez-vous via cette adresse e-mail.", stap1Titel: "Adresse", stap1Sub: "Indiquez ici l'adresse où la dégustation à domicile peut avoir lieu.", adres: "Adresse", postcode: "Code postal", postcodePlaceholder: "75001", plaats: "Ville", telefoon: "Numéro de téléphone", telefoonPlaceholder: "01 23 45 67 89", mobiel: "Numéro de portable", stap2Titel: "Votre réservation", waardebon: "Numéro de bon cadeau", bubbel: "Vous avez un bon pour une dégustation de bulles ? Cochez alors cette case.", stap3Titel: "Ajoutez une remarque", opmerking: "Remarque", opmerkingHelper: "Si vous souhaitez ajouter une remarque, vous pouvez le faire dans le champ ci-dessus.", nieuwsbriefTitel: "Newsletter", nieuwsbrief: "Je m'inscris à la newsletter.", omUur: " à ", uur: "", }, }; // Vast voor deze site: de provincie-records leveren de locaties. const RECORD_TYPE = "provincie"; const OA_ID_FIELD = "oa_appointment_type_id"; const SORT_FIELD = "sort_order"; const LASTMINUTE_DAYS = 5; // Deze OA-types zijn een vaste locatie i.p.v. een thuisproeverij; dat tonen we // als suffix achter de naam in de keuzelijst. const VASTE_LOCATIE_IDS = ["117170", "406446"]; // Aantal personen: vaste keuzelijst 1 t/m 12. const PERSONEN_MAX = 12; const PERSONEN_OPTIES = Array.from({ length: PERSONEN_MAX }, (_, i) => i + 1); function personenLabel(n, t) { return n === 1 ? t.persoonEnkel : t.personenMeerv(n); } function personenFromUrl() { if (typeof window === "undefined") return ""; const raw = new URLSearchParams(window.location.search).get("personen"); const n = Number(raw); return Number.isInteger(n) && n >= 1 && n <= PERSONEN_MAX ? String(n) : ""; } // Verplichte velden per stap + bijbehorende OA-label-trefwoorden (voor het // koppelen van een server-fout aan het juiste invoerveld). const STEP_FIELDS = [ ["voornaam", "achternaam", "email"], ["adres", "postcode", "plaats", "mobiel"], ["personen", "waardebon"], [], ]; const ERROR_KEYWORDS = { voornaam: "voornaam", achternaam: "achternaam", email: "mail", adres: "adres", postcode: "postcode", plaats: "plaats", tel: "telefoon", mobiel: "mobiel", personen: "personen", waardebon: "waardebon", }; function stepOfField(field) { return STEP_FIELDS.findIndex((arr) => arr.includes(field)); } function mondayIndex(jsDay) { return (jsDay + 6) % 7; } const pad = (n) => String(n).padStart(2, "0"); function iso(date) { // Lokale YYYY-MM-DD (geen UTC-shift). return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`; } function parseDate(value) { const m = value && String(value).match(/(\d{4})-(\d{2})-(\d{2})/); return m ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])) : new Date(); } function dateKeyFromObj(obj) { for (const v of Object.values(obj || {})) { const m = String(v).match(/(\d{4}-\d{2}-\d{2})/); if (m) return m[1]; } return null; } function timeFromSlot(slot) { for (const k of ["StartTime", "Time", "Start", "Datetime", "DateTime"]) { if (slot[k]) { const m = String(slot[k]).match(/(\d{1,2}:\d{2})/); if (m) return m[1]; } } for (const v of Object.values(slot || {})) { const m = String(v).match(/(\d{1,2}:\d{2})/); if (m) return m[1]; } return ""; } function formatLong(date, t) { return ( t.dagen[mondayIndex(date.getDay())] + " " + date.getDate() + " " + t.maanden[date.getMonth()] ); } function formatShort(date, t) { return ( t.dagAfk[date.getDay()] + " " + date.getDate() + " " + t.maanden[date.getMonth()] ); } // --------------------------------------------------------------------------- // Kalender-onderdelen // --------------------------------------------------------------------------- function DagCel({ date, status, lastMinute, onPick, typeId, t }) { const [open, setOpen] = useState(false); const [times, setTimes] = useState({ loading: false, error: null, items: [], }); useEffect(() => { if (!open) return; let cancelled = false; setTimes({ loading: true, error: null, items: [] }); const qs = new URLSearchParams({ date: iso(date), appointment_type_id: String(typeId), }); fetch(`/api/app/onlineafspraken/availability/?${qs}`) .then((r) => { if (!r.ok) throw new Error(`status ${r.status}`); return r.json(); }) .then((d) => { if (cancelled) return; const items = d.times || [ ...new Set((d.slots || []).map(timeFromSlot).filter(Boolean)), ].sort(); setTimes({ loading: false, error: null, items }); }) .catch((err) => { if (cancelled) return; setTimes({ loading: false, error: err.message, items: [] }); }); return () => { cancelled = true; }; }, [open, date, typeId]); if (status !== "avail") { return ( {date.getDate()} ); } return ( setOpen(e.open)} positioning={{ placement: "bottom" }} > {date.getDate()} {lastMinute ? ( ) : null} {t.beschikbareTijdenOp} {formatLong(date, t)} {lastMinute ? ( {t.lastminuteLabel} ) : null} {times.loading ? ( {" "} {t.tijdenLaden} ) : times.error ? ( {t.tijdenLadenError} ) : times.items.length === 0 ? ( {t.geenTijden} ) : ( {times.items.map((time) => ( ))} )} ); } function Kalender({ typeId, startDate, onPick, t }) { const today = new Date(); const todayMid = new Date( today.getFullYear(), today.getMonth(), today.getDate(), ); const lmEnd = new Date(todayMid); lmEnd.setDate(lmEnd.getDate() + LASTMINUTE_DAYS); const [view, setView] = useState({ y: startDate.getFullYear(), m: startDate.getMonth(), }); const [days, setDays] = useState({ loading: true, error: null, set: new Set(), }); const atCurrentMonth = view.y === today.getFullYear() && view.m === today.getMonth(); useEffect(() => { if (!typeId) return; let cancelled = false; const first = new Date(view.y, view.m, 1); const last = new Date(view.y, view.m + 1, 0); const start = first.getTime() < todayMid.getTime() ? todayMid : first; setDays((d) => ({ ...d, loading: true, error: null })); const qs = new URLSearchParams({ start_date: iso(start), end_date: iso(last), appointment_type_id: String(typeId), }); fetch(`/api/app/onlineafspraken/days/?${qs}`) .then((r) => { if (!r.ok) throw new Error(`status ${r.status}`); return r.json(); }) .then((data) => { if (cancelled) return; const set = new Set( (data.days || []).map(dateKeyFromObj).filter(Boolean), ); setDays({ loading: false, error: null, set }); }) .catch((err) => { if (cancelled) return; setDays({ loading: false, error: err.message, set: new Set() }); }); return () => { cancelled = true; }; }, [view, typeId]); const dayStatus = (date) => { if (date.getTime() < todayMid.getTime()) return "past"; return days.set.has(iso(date)) ? "avail" : "unavail"; }; // Beschikbaar én binnen het last-minute-venster (vandaag t/m +N dagen). const isLastMinute = (date, status) => status === "avail" && date.getTime() >= todayMid.getTime() && date.getTime() <= lmEnd.getTime(); const cells = useMemo(() => { const first = new Date(view.y, view.m, 1); const lead = mondayIndex(first.getDay()); const daysInMonth = new Date(view.y, view.m + 1, 0).getDate(); const list = []; for (let i = 0; i < lead; i++) list.push(null); for (let d = 1; d <= daysInMonth; d++) list.push(new Date(view.y, view.m, d)); return list; }, [view]); // Toon de last-minute-legenda alleen als er ook echt zo'n dag in beeld is. const hasLastMinute = cells.some((d) => d && isLastMinute(d, dayStatus(d))); const prevMonth = () => { if (atCurrentMonth) return; setView((v) => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 }, ); }; const nextMonth = () => { setView((v) => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 }, ); }; return ( {!typeId ? ( {t.kiesLocatieEerst} ) : days.loading ? ( ) : null} {t.maanden[view.m]} {view.y} {t.dagKort.map((d) => ( {d} ))} {cells.map((date, i) => { if (!date) return ; const status = dayStatus(date); return ( ); })} {days.error ? ( {t.beschikbaarheidError} ) : null} {t.beschikbaar} {" "} {t.nietBeschikbaar} {hasLastMinute ? ( {t.lastminuteLegenda} ) : null} ); } // --------------------------------------------------------------------------- // Reserveer-formulier (dialog) — los van de kalender // --------------------------------------------------------------------------- function Veld({ label, required, type = "text", placeholder, value, onChange, invalid, t, }) { return ( {label}{" "} {required ? ( * ) : null} {invalid ? ( {t.veldVerplicht} ) : null} ); } function PersonenVeld({ value, onChange, invalid, t }) { return ( {t.aantalPersonen}{" "} * {PERSONEN_OPTIES.map((n) => ( ))} {invalid ? ( {t.veldVerplicht} ) : null} ); } function Vinkje({ checked, onChange, children }) { return ( {children} ); } function Voortgang({ step, t }) { return ( {t.stappen.map((s, i) => ( {i + 1}. {s} ))} ); } function ReserveerFormulier({ booking, typeId, locationName, onClose, t }) { const [step, setStep] = useState(0); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const [errors, setErrors] = useState([]); const [invalid, setInvalid] = useState({}); // veld → true const [form, setForm] = useState({ voornaam: "", achternaam: "", email: "", adres: "", postcode: "", plaats: "", tel: "", mobiel: "", personen: "", waardebon: "", bubbel: false, opmerking: "", nieuwsbrief: false, }); const upd = (k) => (e) => { const value = e.target.value; setForm((f) => ({ ...f, [k]: value })); if (value && value.trim()) setInvalid((o) => ({ ...o, [k]: false })); }; const updCheck = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.checked })); // Preselecteer het aantal personen vanuit de URL, bv. ?personen=6. useEffect(() => { const preset = personenFromUrl(); if (preset) setForm((f) => ({ ...f, personen: preset })); }, []); useEffect(() => { if (booking) { setStep(0); setSubmitted(false); setSubmitting(false); setErrors([]); setInvalid({}); } }, [booking]); const lastStep = t.stappen.length - 1; const tijdstip = booking ? formatShort(booking.date, t) + t.omUur + booking.time + t.uur : ""; const missingIn = (fields) => fields.filter((k) => !String(form[k] ?? "").trim()); const next = () => { const miss = missingIn(STEP_FIELDS[step]); if (miss.length) { setInvalid((o) => ({ ...o, ...Object.fromEntries(miss.map((k) => [k, true])), })); setErrors([t.omTeGaan]); return; } setErrors([]); setStep((s) => Math.min(lastStep, s + 1)); }; const markServerErrors = (list) => { const inv = {}; let firstStep = null; for (const msg of list) { const low = String(msg).toLowerCase(); for (const [field, kw] of Object.entries(ERROR_KEYWORDS)) { if (low.includes(kw)) { inv[field] = true; const st = stepOfField(field); if (st >= 0 && (firstStep === null || st < firstStep)) firstStep = st; } } } if (Object.keys(inv).length) setInvalid((o) => ({ ...o, ...inv })); if (firstStep !== null) setStep(firstStep); }; const boek = async () => { if (submitting || !booking || step !== lastStep) return; const allMiss = STEP_FIELDS.flat().filter( (k) => !String(form[k] ?? "").trim(), ); if (allMiss.length) { setInvalid((o) => ({ ...o, ...Object.fromEntries(allMiss.map((k) => [k, true])), })); setStep(stepOfField(allMiss[0])); setErrors([t.vulVerplichte]); return; } setSubmitting(true); setErrors([]); try { const res = await fetch("/api/app/onlineafspraken/book/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ appointment_type_id: typeId, date: iso(booking.date), start_time: booking.time, voornaam: form.voornaam, achternaam: form.achternaam, email: form.email, adres: form.adres, postcode: form.postcode, plaats: form.plaats, tel: form.tel, mobiel: form.mobiel, personen: form.personen, waardebon: form.waardebon, bubbel: form.bubbel, opmerking: form.opmerking, }), }); const data = await res.json().catch(() => ({})); if (res.ok && data.ok) { setSubmitted(true); } else { const list = Array.isArray(data.errors) && data.errors.length ? data.errors : [data.error || t.boekError]; setErrors(list); markServerErrors(list); } } catch { setErrors([t.boekError]); } finally { setSubmitting(false); } }; return ( (e.open ? null : onClose())} size="lg" scrollBehavior="inside" > {booking ? booking.date.getDate() : ""} {locationName} {tijdstip} {submitted ? ( {t.bedankt} {t.bevestigingPre} {locationName} {t.bevestigingMid} {tijdstip} {t.bevestigingPost} ) : ( {step === 0 ? ( {t.stap0Titel} {t.veldenMet} * {t.zijnVerplicht} {t.emailHelper} ) : null} {step === 1 ? ( {t.stap1Titel} {t.stap1Sub} ) : null} {step === 2 ? ( {t.stap2Titel} {t.bubbel} ) : null} {step === 3 ? ( {t.stap3Titel} {t.opmerking}

<Text fontSize="xs" color={MUTED} mt="1.5">
                          {t.opmerkingHelper}
                        </Text>
                        <Heading
                          as="h3"
                          size="sm"
                          color={DARK}
                          fontWeight="medium"
                          mt="6"
                          mb="3"
                        >
                          {t.nieuwsbriefTitel}
                        </Heading>
                        <Vinkje
                          checked={form.nieuwsbrief}
                          onChange={updCheck("nieuwsbrief")}
                        >
                          {t.nieuwsbrief}
                        </Vinkje>
                      </Box>
                    ) : null}
                  </Box>

{errors.length > 0 ? (
                    <Alert.Root
                      status="error"
                      borderRadius="md"
                      mt="5"
                      alignItems="flex-start"
                    >
                      <Alert.Indicator />
                      <Alert.Content gap="1">
                        <Alert.Title>
                          {errors.length > 1 ? t.controleerVelden : t.letOp}
                        </Alert.Title>
                        <Alert.Description>
                          {errors.length > 1 ? (
                            <Stack
                              as="ul"
                              gap="0.5"
                              pl="4"
                              css={{ listStyleType: "disc" }}
                            >
                              {errors.map((m, i) => (
                                <Text as="li" key={i} fontSize="sm">
                                  {m}
                                </Text>
                              ))}
                            </Stack>
                          ) : (
                            <Text fontSize="sm">{errors[0]}</Text>
                          )}
                        </Alert.Description>
                      </Alert.Content>
                    </Alert.Root>
                  ) : null}

<Flex gap="3" mt="6" justify="space-between" flexShrink="0">
                    <Button
                      type="button"
                      variant="outline"
                      borderColor="blackAlpha.300"
                      color={DARK}
                      borderRadius="sm"
                      visibility={step === 0 ? "hidden" : "visible"}
                      disabled={submitting}
                      onClick={() => setStep((s) => Math.max(0, s - 1))}
                    >
                      <Icon icon="chevron-left" /> {t.vorige}
                    </Button>
                    {step < lastStep ? (
                      <Button
                        type="button"
                        onClick={next}
                        bg={WINE}
                        color="white"
                        borderRadius="sm"
                        px="7"
                        _hover={{ bg: WINE_HOVER }}
                      >
                        {t.volgende} <Icon icon="chevron-right" />
                      </Button>
                    ) : (
                      <Button
                        type="button"
                        onClick={boek}
                        loading={submitting}
                        loadingText={t.bezig}
                        bg={WINE}
                        color="white"
                        borderRadius="sm"
                        px="8"
                        letterSpacing="0.1em"
                        _hover={{ bg: WINE_HOVER }}
                      >
                        {t.afspraakBevestigen}
                      </Button>
                    )}
                  </Flex>
                </Flex>
              )}
            </Dialog.Body>

<Dialog.CloseTrigger asChild>
              <CloseButton />
            </Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  );
}

// ---------------------------------------------------------------------------
// Hoofdcomponent: locatie-keuze (alleen indien nodig) + kalender + formulier
// Luistert naar het globale event 'obelisk:open-booking' (bv. van LastMinuteDeals).
// ---------------------------------------------------------------------------

export default function ReserveerKalender({
  typeId,
  locationName,
  date,
  language = "nl",
}) {
  const t = translations[language?.substring(0,2)] || translations.nl;
  const startDate = parseDate(date);
  const fixed = !!typeId; // type bekend via prop → geen records, geen select

const [locs, setLocs] = useState({ loading: !fixed, error: null, items: [] });
  const [selectedType, setSelectedType] = useState(fixed ? String(typeId) : "");
  const [booking, setBooking] = useState(null);

const effType = fixed ? String(typeId) : selectedType;
  const selectedName = (() => {
    const l = locs.items.find((x) => String(x.id) === String(effType));
    return l ? l.name : locationName || "";
  })();

// Locaties uit de records halen, gefilterd op de paginataal (?language=<code>)
  // zodat een tweetalige site niet beide taalsets in de select toont. Vindt-ie
  // geen records in die taal, dan valt-ie terug op alle talen (single-language
  // sites waar records soms ongetagd/nl zijn).
  useEffect(() => {
    if (fixed) return;
    let cancelled = false;
    const url = `/api/cms/records/list/?type=${RECORD_TYPE}&limit=200`;

const fetchJson = (u) =>
      fetch(u).then((r) => {
        if (!r.ok) throw new Error(`status ${r.status}`);
        return r.json();
      });

fetchJson(`${url}&language=${encodeURIComponent(language)}`)
      .then((d) => ((d.results || []).length ? d : fetchJson(url)))
      .then((d) => {
        if (cancelled) return;
        const items = toItems(d);
        setLocs({ loading: false, error: null, items });
        // if (items.length) setSelectedType((cur) => cur || items[0].id);
      })
      .catch((err) => {
        if (cancelled) return;
        setLocs({ loading: false, error: err.message, items: [] });
      });
    return () => {
      cancelled = true;
    };
  }, [fixed, language]);

// Open de boekingsdialog voor een gekozen datum + tijd.
  const openBooking = (d, time) => setBooking({ date: d, time });

// Luister naar losse componenten (bv. LastMinuteDeals) die een moment willen boeken.
  useEffect(() => {
    const handler = (e) => {
      const detail = e.detail || {};
      if (detail.date && detail.time) {
        if (!fixed && detail.typeId) setSelectedType(String(detail.typeId));
        setBooking({ date: parseDate(detail.date), time: detail.time });
      }
    };
    window.addEventListener("obelisk:open-booking", handler);
    return () => window.removeEventListener("obelisk:open-booking", handler);
  }, [fixed]);

return (
    <Box>
      {!fixed && (
        <Stack gap="2" mb="6" maxW="md">
          <Text fontSize="sm" fontWeight="medium" color={DARK}>
            {t.selectLabel}
          </Text>
          {locs.loading ? (
            <Flex align="center" gap="2" color={MUTED} h="12">
              <Spinner size="sm" /> <Text fontSize="sm">{t.optiesLaden}</Text>
            </Flex>
          ) : locs.error ? (
            <Text fontSize="sm" color={RED}>
              {t.optiesError}
            </Text>
          ) : (
            <NativeSelect.Root size="lg">
              <NativeSelect.Field
                value={selectedType}
                onChange={(e) => setSelectedType(e.target.value)}
                bg="white"
                borderColor="blackAlpha.300"
                color={DARK}
              >
                <option value="" disabled>
                  {t.kiesLocatiePlaceholder}
                </option>
                {locs.items.map((l) => (
                  <option key={l.id} value={l.id}>
                    {l.name}
                  </option>
                ))}
              </NativeSelect.Field>
              <NativeSelect.Indicator />
            </NativeSelect.Root>
          )}
        </Stack>
      )}

<ReserveerFormulier
        booking={booking}
        typeId={effType}
        locationName={selectedName}
        onClose={() => setBooking(null)}
        t={t}
      />
    </Box>
  );
}</article></body></html>

Histoires & conseils en vins

Une degustation de vin a domicile : comment ca marche et a quoi s'attendre ?