@bigz-app/booking-widget 1.3.3 → 1.4.0

package/dist/index.esm.js

@@ -225,6 +225,8 @@ const de$1 = {
     "button.depositAndBook": "Anzahlen & buchen",
     "button.continueWithout": "Weiter ohne Extras",
     "button.continue": "Weiter",
+    "button.continueToPayment": "Weiter zur Zahlung",
+    "button.backToDetails": "Zurück zu den Angaben",
     "button.addExtras": "Extras hinzufügen",
     // Event types
     "events.noEventsAvailable": "Keine Veranstaltungen verfügbar",
@@ -417,6 +419,8 @@ const de$1 = {
     "upsells.noExtras": "Keine Extras für diese Buchung verfügbar.",
     "upsells.selected": "{{count}} Extra ausgewählt",
     "upsells.selectedPlural": "{{count}} Extras ausgewählt",
+    "upsells.savePercent": "{{percent}}% sparen",
+    "booking.paymentUnavailable": "Online-Zahlung ist für diese Buchung nicht verfügbar. Bitte kontaktiere uns, um die Reservierung abzuschließen.",
     "upsells.spotsFree": "{{count}} Plätze frei",
     "upsells.notAvailable": "Nicht verfügbar",
     "upsells.reason.outOfStock": "{{productName}} ist nicht auf Lager",
@@ -501,6 +505,8 @@ const en = {
     "button.depositAndBook": "Pay deposit & book",
     "button.continueWithout": "Continue without extras",
     "button.continue": "Continue",
+    "button.continueToPayment": "Continue to payment",
+    "button.backToDetails": "Back to details",
     "button.addExtras": "Add extras",
     // Event types
     "events.noEventsAvailable": "No events available",
@@ -693,6 +699,8 @@ const en = {
     "upsells.noExtras": "No extras available for this booking.",
     "upsells.selected": "{{count}} extra selected",
     "upsells.selectedPlural": "{{count}} extras selected",
+    "upsells.savePercent": "Save {{percent}}%",
+    "booking.paymentUnavailable": "Online payment is not available for this booking. Please contact us to complete your reservation.",
     "upsells.spotsFree": "{{count}} spots available",
     "upsells.notAvailable": "Not available",
     "upsells.reason.outOfStock": "{{productName}} is out of stock",
@@ -777,6 +785,8 @@ const es = {
     "button.depositAndBook": "Pagar depósito y reservar",
     "button.continueWithout": "Continuar sin extras",
     "button.continue": "Continuar",
+    "button.continueToPayment": "Continuar al pago",
+    "button.backToDetails": "Volver a los datos",
     "button.addExtras": "Añadir extras",
     // Event types
     "events.noEventsAvailable": "No hay eventos disponibles",
@@ -969,6 +979,8 @@ const es = {
     "upsells.noExtras": "No hay extras disponibles para esta reserva.",
     "upsells.selected": "{{count}} extra seleccionado",
     "upsells.selectedPlural": "{{count}} extras seleccionados",
+    "upsells.savePercent": "Ahorra {{percent}}%",
+    "booking.paymentUnavailable": "El pago en línea no está disponible para esta reserva. Contáctanos para completarla.",
     "upsells.spotsFree": "{{count}} plazas disponibles",
     "upsells.notAvailable": "No disponible",
     "upsells.reason.outOfStock": "{{productName}} está agotado",
@@ -1053,6 +1065,8 @@ const pt = {
     "button.depositAndBook": "Pagar sinal e reservar",
     "button.continueWithout": "Continuar sem extras",
     "button.continue": "Continuar",
+    "button.continueToPayment": "Continuar para pagamento",
+    "button.backToDetails": "Voltar aos dados",
     "button.addExtras": "Adicionar extras",
     // Event types
     "events.noEventsAvailable": "Sem eventos disponíveis",
@@ -1245,6 +1259,8 @@ const pt = {
     "upsells.noExtras": "Sem extras disponíveis para esta reserva.",
     "upsells.selected": "{{count}} extra selecionado",
     "upsells.selectedPlural": "{{count}} extras selecionados",
+    "upsells.savePercent": "Poupa {{percent}}%",
+    "booking.paymentUnavailable": "O pagamento online não está disponível para esta reserva. Contacta-nos para concluir a reserva.",
     "upsells.spotsFree": "{{count}} lugares disponíveis",
     "upsells.notAvailable": "Não disponível",
     "upsells.reason.outOfStock": "{{productName}} está esgotado",
@@ -1329,6 +1345,8 @@ const sv = {
     "button.depositAndBook": "Betala handpenning & boka",
     "button.continueWithout": "Fortsätt utan tillägg",
     "button.continue": "Fortsätt",
+    "button.continueToPayment": "Fortsätt till betalning",
+    "button.backToDetails": "Tillbaka till uppgifter",
     "button.addExtras": "Lägg till tillägg",
     // Event types
     "events.noEventsAvailable": "Inga evenemang tillgängliga",
@@ -1521,6 +1539,8 @@ const sv = {
     "upsells.noExtras": "Inga tillägg tillgängliga för denna bokning.",
     "upsells.selected": "{{count}} tillägg valt",
     "upsells.selectedPlural": "{{count}} tillägg valda",
+    "upsells.savePercent": "Spara {{percent}}%",
+    "booking.paymentUnavailable": "Onlinebetalning är inte tillgänglig för denna bokning. Kontakta oss för att slutföra bokningen.",
     "upsells.spotsFree": "{{count}} platser lediga",
     "upsells.notAvailable": "Inte tillgängligt",
     "upsells.reason.outOfStock": "{{productName}} är slut i lager",
@@ -11453,7 +11473,7 @@ const sectionHeaderStyles$1 = sectionStyles.header;
 const labelStyles$1 = formStyles.label;
 const inputStyles$1 = formStyles.input;
 const errorTextStyles$1 = formStyles.error;
-function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], }) {
+function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], persistedState = null, onPersistedStateChange, }) {
     const t$1 = useTranslations();
     const { locale } = useLocale();
     const timezone = useTimezone();
@@ -11465,15 +11485,16 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         const raw = Math.round((baseAmount * basisPoints) / 10000);
         return round ? roundDiscountUp(raw) : raw;
     };
-    const [appliedVouchers, setAppliedVouchers] = useState([]);
-    const paymentSectionRef = useRef(null);
+    const [appliedVouchers, setAppliedVouchers] = useState(() => persistedState?.appliedVouchers ?? []);
+    const [checkoutStep, setCheckoutStep] = useState(() => persistedState?.checkoutStep ?? "details");
     // Payment option: "deposit" or "full" - only relevant when deposit is available
-    const [paymentOption, setPaymentOption] = useState("deposit");
+    const [paymentOption, setPaymentOption] = useState(() => persistedState?.paymentOption ?? "deposit");
     // Per-participant upsell selections: participantIndex -> array of upsell package IDs
-    const [participantUpsells, setParticipantUpsells] = useState({});
+    const [participantUpsells, setParticipantUpsells] = useState(() => persistedState?.participantUpsells ?? {});
+    const wasOpenRef = useRef(false);
     const form = useForm({
         resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
-        defaultValues: {
+        defaultValues: persistedState?.formData ?? {
             customerName: "",
             customerEmail: "",
             customerPhone: "",
@@ -11483,6 +11504,28 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
             acceptTerms: false,
         },
     });
+    const persistState = useCallback(() => {
+        onPersistedStateChange?.({
+            formData: form.getValues(),
+            checkoutStep,
+            paymentOption,
+            appliedVouchers,
+            participantUpsells,
+        });
+    }, [onPersistedStateChange, form, checkoutStep, paymentOption, appliedVouchers, participantUpsells]);
+    useEffect(() => {
+        if (isOpen && !wasOpenRef.current && persistedState) {
+            form.reset(persistedState.formData);
+            setCheckoutStep(persistedState.checkoutStep);
+            setPaymentOption(persistedState.paymentOption);
+            setAppliedVouchers(persistedState.appliedVouchers);
+            setParticipantUpsells(persistedState.participantUpsells);
+        }
+        if (!isOpen && wasOpenRef.current) {
+            persistState();
+        }
+        wasOpenRef.current = isOpen;
+    }, [isOpen, persistedState, form, persistState]);
     const watchedParticipants = form.watch("participants");
     const participantCount = watchedParticipants.length;
     const watchedCustomerName = form.watch("customerName");
@@ -11607,6 +11650,18 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     }), [watchedCustomerName, watchedCustomerEmail, watchedCustomerPhone, watchedParticipants, watchedComment]);
     const appliedDiscountCode = appliedVouchers.find((v) => v.type === "discount");
     const appliedGiftCards = appliedVouchers.filter((v) => v.type === "giftCard");
+    const discountCodeProp = appliedDiscountCode
+        ? {
+            id: appliedDiscountCode.id,
+            code: appliedDiscountCode.code,
+            description: appliedDiscountCode.description || undefined,
+            type: appliedDiscountCode.discountType || "percentage",
+            value: appliedDiscountCode.discountValue || 0,
+            discountAmount: appliedDiscountCode.discountAmount,
+            newTotal: appliedDiscountCode.newTotal,
+        }
+        : null;
+    const hasPaymentProvider = Boolean(stripePromise || systemConfig?.paymentProvider === "mollie");
     const handleVoucherValidated = useCallback((voucher, _error) => {
         if (voucher) {
             setAppliedVouchers((prev) => [...prev, voucher]);
@@ -11718,19 +11773,12 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         });
     }, [config]);
     const handleClose = () => {
+        persistState();
+        setCheckoutStep("details");
         onClose();
-        if (selectedEventInstance && selectedEventType) {
-            onBackToEventInstances?.();
-        }
-        else if (selectedEventType) {
-            onBackToEventTypes?.();
-        }
-    };
-    const scrollToPayment = () => {
-        paymentSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
     };
     // Footer navigation
-    const footerContent = (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t$1("common.back") }), jsx("button", { type: "button", onClick: scrollToPayment, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: t$1("button.toPayment") })] }));
+    const footerContent = (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: checkoutStep === "payment" ? () => setCheckoutStep("details") : handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: checkoutStep === "payment" ? t$1("button.backToDetails") : t$1("common.back") }), checkoutStep === "details" && (jsx("button", { type: "button", onClick: () => setCheckoutStep("payment"), disabled: !isReadyForPayment() || !hasPaymentProvider, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: t$1("button.continueToPayment") }))] }));
     if (!eventDetails.bookingOpen) {
         return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.notPossible"), children: jsx("div", { style: {
                     display: "flex",
@@ -11747,264 +11795,211 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                 fontFamily: "var(--bw-font-family)",
                             }, children: t$1("booking.notPossible") }), jsx("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.notPossibleMessage") })] }) }) }));
     }
-    return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: jsxs("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), jsxs("div", { style: {
-                                display: "grid",
-                                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-                                gap: "12px",
-                                fontSize: "14px",
-                            }, children: [jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxs("span", { style: {
-                                                color: "var(--bw-text-muted)",
-                                                fontFamily: "var(--bw-font-family)",
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "4px",
-                                            }, children: [jsx(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.date")] }), jsxs("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: 500,
-                                                fontFamily: "var(--bw-font-family)",
-                                            }, children: [formatEventDate(eventDetails.startTime, timezone, locale), " \u2022 ", formatTime(eventDetails.startTime, timezone, locale)] })] }), jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxs("span", { style: {
-                                                color: "var(--bw-text-muted)",
-                                                fontFamily: "var(--bw-font-family)",
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "4px",
-                                            }, children: [jsx(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.duration")] }), jsxs("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: 500,
-                                                fontFamily: "var(--bw-font-family)",
-                                            }, children: [eventDetails.durationDays, " ", eventDetails.durationDays > 1 ? t$1("common.days") : t$1("common.day")] })] }), jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxs("span", { style: {
-                                                color: "var(--bw-text-muted)",
-                                                fontFamily: "var(--bw-font-family)",
+    return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: jsxs("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [checkoutStep === "details" && (jsxs(Fragment, { children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), jsxs("div", { style: {
+                                        display: "grid",
+                                        gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                        gap: "12px",
+                                        fontSize: "14px",
+                                    }, children: [jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxs("span", { style: {
+                                                        color: "var(--bw-text-muted)",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "4px",
+                                                    }, children: [jsx(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.date")] }), jsxs("span", { style: {
+                                                        color: "var(--bw-text-color)",
+                                                        fontWeight: 500,
+                                                        fontFamily: "var(--bw-font-family)",
+                                                    }, children: [formatEventDate(eventDetails.startTime, timezone, locale), " \u2022 ", formatTime(eventDetails.startTime, timezone, locale)] })] }), jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxs("span", { style: {
+                                                        color: "var(--bw-text-muted)",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "4px",
+                                                    }, children: [jsx(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.duration")] }), jsxs("span", { style: {
+                                                        color: "var(--bw-text-color)",
+                                                        fontWeight: 500,
+                                                        fontFamily: "var(--bw-font-family)",
+                                                    }, children: [eventDetails.durationDays, " ", eventDetails.durationDays > 1 ? t$1("common.days") : t$1("common.day")] })] }), jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxs("span", { style: {
+                                                        color: "var(--bw-text-muted)",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "4px",
+                                                    }, children: [jsx(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.price")] }), jsxs("span", { style: {
+                                                        color: "var(--bw-text-color)",
+                                                        fontWeight: 500,
+                                                        fontFamily: "var(--bw-font-family)",
+                                                    }, children: [formatCurrency(eventDetails.price), " ", t$1("common.perPerson")] })] })] })] }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.contactInfo") }), jsxs("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [jsxs("div", { style: {
+                                                        display: "grid",
+                                                        gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                                        gap: "16px",
+                                                    }, children: [jsxs("div", { children: [jsx("label", { htmlFor: "customerName", style: labelStyles$1, children: t$1("booking.name") }), jsx("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles$1, placeholder: t$1("booking.namePlaceholder") }), customerNameError && (jsx("p", { style: errorTextStyles$1, children: customerNameError.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "customerEmail", style: labelStyles$1, children: t$1("booking.email") }), jsx("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles$1, placeholder: t$1("booking.emailPlaceholder") }), customerEmailError && (jsx("p", { style: errorTextStyles$1, children: customerEmailError.message }))] })] }), jsxs("div", { children: [jsx("label", { htmlFor: "customerPhone", style: labelStyles$1, children: t$1("booking.phone") }), jsx("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles$1, placeholder: t$1("booking.phonePlaceholder") })] }), jsxs("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), jsxs("label", { htmlFor: "acceptTerms", style: {
+                                                                        fontSize: "14px",
+                                                                        color: "var(--bw-text-muted)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        maxWidth: "calc(100% - 32px)",
+                                                                        overflowWrap: "break-word",
+                                                                        cursor: "pointer",
+                                                                    }, children: [t$1("booking.acceptTerms"), " ", jsx("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: t$1("booking.terms") }), "*"] })] }), form.formState.errors.acceptTerms && (jsx("p", { style: { ...errorTextStyles$1, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), jsxs("div", { style: cardStyles$1, children: [jsx("div", { style: {
                                                 display: "flex",
+                                                justifyContent: "space-between",
                                                 alignItems: "center",
-                                                gap: "4px",
-                                            }, children: [jsx(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.price")] }), jsxs("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: 500,
-                                                fontFamily: "var(--bw-font-family)",
-                                            }, children: [formatCurrency(eventDetails.price), " ", t$1("common.perPerson")] })] })] })] }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.contactInfo") }), jsxs("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [jsxs("div", { style: {
-                                                display: "grid",
-                                                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-                                                gap: "16px",
-                                            }, children: [jsxs("div", { children: [jsx("label", { htmlFor: "customerName", style: labelStyles$1, children: t$1("booking.name") }), jsx("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles$1, placeholder: t$1("booking.namePlaceholder") }), customerNameError && (jsx("p", { style: errorTextStyles$1, children: customerNameError.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "customerEmail", style: labelStyles$1, children: t$1("booking.email") }), jsx("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles$1, placeholder: t$1("booking.emailPlaceholder") }), customerEmailError && (jsx("p", { style: errorTextStyles$1, children: customerEmailError.message }))] })] }), jsxs("div", { children: [jsx("label", { htmlFor: "customerPhone", style: labelStyles$1, children: t$1("booking.phone") }), jsx("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles$1, placeholder: t$1("booking.phonePlaceholder") })] }), jsxs("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), jsxs("label", { htmlFor: "acceptTerms", style: {
+                                                marginBottom: "16px",
+                                            }, children: jsx("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (jsxs("div", { style: { flex: 1 }, children: [jsx("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), jsx("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles$1, placeholder: t$1("booking.participantNamePlaceholder") }), form.formState.errors.participants?.[index]?.name && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (jsxs("div", { style: { width: "80px" }, children: [jsx("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), jsx("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
+                                                                                setValueAs: (value) => {
+                                                                                    if (value === "" || value === null || value === undefined) {
+                                                                                        return undefined;
+                                                                                    }
+                                                                                    const num = Number(value);
+                                                                                    return Number.isNaN(num) ? undefined : num;
+                                                                                },
+                                                                            }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (jsxs("div", { children: [jsx("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), jsx("button", { type: "button", onClick: () => removeParticipant(index), style: {
+                                                                                color: "var(--bw-error-color)",
+                                                                                backgroundColor: "var(--bw-surface-color)",
+                                                                                border: "1px solid var(--bw-border-color)",
+                                                                                borderRadius: "50%",
+                                                                                width: "36px",
+                                                                                height: "36px",
+                                                                                display: "flex",
+                                                                                alignItems: "center",
+                                                                                justifyContent: "center",
+                                                                                cursor: "pointer",
+                                                                                transition: "all 0.2s ease",
+                                                                                fontSize: "24px",
+                                                                                fontWeight: 700,
+                                                                                fontFamily: "var(--bw-font-family)",
+                                                                                padding: 0,
+                                                                            }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (jsxs("div", { style: { minWidth: "140px" }, children: [jsx("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), jsxs("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [jsx("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (jsx("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (jsx("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
+                                                                const isSelected = (participantUpsells[index] || []).includes(upsell.id);
+                                                                return (jsxs("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [jsx("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), jsx("span", { style: { fontWeight: 500 }, children: upsell.name }), jsxs("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
+                                                            }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (jsx("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        alignItems: "center",
+                                                        marginTop: "12px",
+                                                    }, children: jsx("button", { type: "button", onClick: addParticipant, style: {
+                                                            color: "#ffffff",
+                                                            fontSize: "14px",
+                                                            fontWeight: 600,
+                                                            padding: "8px 16px",
+                                                            borderRadius: "var(--bw-border-radius)",
+                                                            backgroundColor: "var(--bw-highlight-color)",
+                                                            border: "1px solid var(--bw-highlight-color)",
+                                                            cursor: "pointer",
+                                                            transition: "all 0.2s ease",
+                                                            marginBottom: "4px",
+                                                            fontFamily: "var(--bw-font-family)",
+                                                            boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
+                                                        }, children: t$1("booking.addParticipant", { number: watchedParticipants.length + 1 }) }) })) : (jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.maxSpotsReached", { count: eventDetails.availableSpots }) }))] })] }), jsx(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), jsxs("div", { style: cardStyles$1, children: [jsx("label", { htmlFor: "booking-comment", style: labelStyles$1, children: t$1("booking.comment") }), jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: t$1("booking.commentPlaceholder"), rows: 3, style: {
+                                                ...inputStyles$1,
+                                                resize: "vertical",
+                                                minHeight: "80px",
+                                            } })] })] })] })), checkoutStep === "payment" && (jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: { ...sectionHeaderStyles$1, marginBottom: "16px" }, children: t$1("summary.title") }), jsxs("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.price") }), jsxs("div", { style: {
+                                                        color: "var(--bw-text-color)",
+                                                        fontWeight: 500,
+                                                        fontFamily: "var(--bw-font-family)",
+                                                    }, children: [jsxs("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (jsxs("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [jsxs("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: [t$1("common.extras"), ":"] }), upsells.map((upsell) => {
+                                                    // Count how many participants have this upsell selected
+                                                    const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
+                                                    if (countWithUpsell === 0)
+                                                        return null;
+                                                    const upsellLineTotal = upsell.price * countWithUpsell;
+                                                    return (jsx("div", { style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "13px" }, children: jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxs("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), jsx("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }) }, upsell.id));
+                                                })] })), appliedVouchers.length > 0 && (jsxs(Fragment, { children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), jsx("span", { style: {
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
+                                                                textDecoration: totalDiscount > 0 ? "line-through" : "none",
+                                                            }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: {
+                                                                color: "var(--bw-success-color)",
+                                                                fontFamily: "var(--bw-font-family)",
                                                                 fontSize: "14px",
+                                                            }, children: t$1("summary.discount", { code: appliedDiscountCode.code }) }), jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: {
+                                                                color: "var(--bw-success-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                fontSize: "14px",
+                                                            }, children: t$1("summary.giftCard", { code: giftCard.code }) }), jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), jsxs("div", { style: {
+                                                borderTop: "1px solid var(--bw-border-color)",
+                                                paddingTop: "12px",
+                                            }, children: [hasDepositOption && (jsxs("div", { style: {
+                                                        display: "flex",
+                                                        justifyContent: "space-between",
+                                                        alignItems: "center",
+                                                        fontSize: "14px",
+                                                        marginBottom: "12px",
+                                                    }, children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.totalAmount") }), jsx("span", { style: {
                                                                 color: "var(--bw-text-muted)",
                                                                 fontFamily: "var(--bw-font-family)",
-                                                                maxWidth: "calc(100% - 32px)",
-                                                                overflowWrap: "break-word",
+                                                                fontWeight: 500,
+                                                            }, children: formatCurrency(totalAmount) })] })), hasDepositOption && (jsxs("div", { style: {
+                                                        display: "flex",
+                                                        gap: "8px",
+                                                        marginBottom: "16px",
+                                                    }, children: [jsxs("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
+                                                                flex: 1,
+                                                                padding: "12px",
+                                                                borderRadius: "var(--bw-border-radius)",
+                                                                border: paymentOption === "deposit"
+                                                                    ? "2px solid var(--bw-highlight-color)"
+                                                                    : "1px solid var(--bw-border-color)",
+                                                                backgroundColor: paymentOption === "deposit"
+                                                                    ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
+                                                                    : "var(--bw-surface-color)",
                                                                 cursor: "pointer",
-                                                            }, children: [t$1("booking.acceptTerms"), " ", jsx("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: t$1("booking.terms") }), "*"] })] }), form.formState.errors.acceptTerms && (jsx("p", { style: { ...errorTextStyles$1, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), jsxs("div", { style: cardStyles$1, children: [jsx("div", { style: {
-                                        display: "flex",
-                                        justifyContent: "space-between",
-                                        alignItems: "center",
-                                        marginBottom: "16px",
-                                    }, children: jsx("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (jsxs("div", { style: { flex: 1 }, children: [jsx("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), jsx("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles$1, placeholder: t$1("booking.participantNamePlaceholder") }), form.formState.errors.participants?.[index]?.name && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (jsxs("div", { style: { width: "80px" }, children: [jsx("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), jsx("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
-                                                                        setValueAs: (value) => {
-                                                                            if (value === "" || value === null || value === undefined) {
-                                                                                return undefined;
-                                                                            }
-                                                                            const num = Number(value);
-                                                                            return Number.isNaN(num) ? undefined : num;
-                                                                        },
-                                                                    }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (jsxs("div", { children: [jsx("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), jsx("button", { type: "button", onClick: () => removeParticipant(index), style: {
-                                                                        color: "var(--bw-error-color)",
-                                                                        backgroundColor: "var(--bw-surface-color)",
-                                                                        border: "1px solid var(--bw-border-color)",
-                                                                        borderRadius: "50%",
-                                                                        width: "36px",
-                                                                        height: "36px",
-                                                                        display: "flex",
-                                                                        alignItems: "center",
-                                                                        justifyContent: "center",
-                                                                        cursor: "pointer",
-                                                                        transition: "all 0.2s ease",
-                                                                        fontSize: "24px",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                transition: "all 0.2s ease",
+                                                            }, children: [jsx("div", { style: {
+                                                                        fontSize: "13px",
+                                                                        color: "var(--bw-text-muted)",
+                                                                        marginBottom: "4px",
+                                                                    }, children: t$1("summary.deposit") }), jsx("div", { style: {
+                                                                        fontSize: "18px",
                                                                         fontWeight: 700,
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        padding: 0,
-                                                                    }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (jsxs("div", { style: { minWidth: "140px" }, children: [jsx("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), jsxs("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [jsx("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (jsx("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (jsx("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
-                                                        const isSelected = (participantUpsells[index] || []).includes(upsell.id);
-                                                        return (jsxs("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [jsx("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), jsx("span", { style: { fontWeight: 500 }, children: upsell.name }), jsxs("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
-                                                    }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (jsx("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
-                                                alignItems: "center",
-                                                marginTop: "12px",
-                                            }, children: jsx("button", { type: "button", onClick: addParticipant, style: {
-                                                    color: "#ffffff",
-                                                    fontSize: "14px",
-                                                    fontWeight: 600,
-                                                    padding: "8px 16px",
-                                                    borderRadius: "var(--bw-border-radius)",
-                                                    backgroundColor: "var(--bw-highlight-color)",
-                                                    border: "1px solid var(--bw-highlight-color)",
-                                                    cursor: "pointer",
-                                                    transition: "all 0.2s ease",
-                                                    marginBottom: "4px",
-                                                    fontFamily: "var(--bw-font-family)",
-                                                    boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
-                                                }, children: t$1("booking.addParticipant", { number: watchedParticipants.length + 1 }) }) })) : (jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.maxSpotsReached", { count: eventDetails.availableSpots }) }))] })] }), jsx(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), jsxs("div", { style: cardStyles$1, children: [jsx("label", { htmlFor: "booking-comment", style: labelStyles$1, children: t$1("booking.comment") }), jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: t$1("booking.commentPlaceholder"), rows: 3, style: {
-                                        ...inputStyles$1,
-                                        resize: "vertical",
-                                        minHeight: "80px",
-                                    } })] }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: { ...sectionHeaderStyles$1, marginBottom: "16px" }, children: t$1("summary.title") }), jsxs("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.price") }), jsxs("div", { style: {
-                                                                color: "var(--bw-text-color)",
-                                                                fontWeight: 500,
+                                                                        color: paymentOption === "deposit"
+                                                                            ? "var(--bw-highlight-color)"
+                                                                            : "var(--bw-text-color)",
+                                                                    }, children: formatCurrency(depositAmount) })] }), jsxs("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
+                                                                flex: 1,
+                                                                padding: "12px",
+                                                                borderRadius: "var(--bw-border-radius)",
+                                                                border: paymentOption === "full"
+                                                                    ? "2px solid var(--bw-highlight-color)"
+                                                                    : "1px solid var(--bw-border-color)",
+                                                                backgroundColor: paymentOption === "full"
+                                                                    ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
+                                                                    : "var(--bw-surface-color)",
+                                                                cursor: "pointer",
                                                                 fontFamily: "var(--bw-font-family)",
-                                                            }, children: [jsxs("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (jsxs("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [jsxs("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: [t$1("common.extras"), ":"] }), upsells.map((upsell) => {
-                                                            // Count how many participants have this upsell selected
-                                                            const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
-                                                            if (countWithUpsell === 0)
-                                                                return null;
-                                                            const upsellLineTotal = upsell.price * countWithUpsell;
-                                                            return (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px" }, children: [jsxs("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), jsx("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }, upsell.id));
-                                                        })] })), appliedVouchers.length > 0 && (jsxs(Fragment, { children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), jsx("span", { style: {
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
-                                                                        textDecoration: totalDiscount > 0 ? "line-through" : "none",
-                                                                    }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: {
-                                                                        color: "var(--bw-success-color)",
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        fontSize: "14px",
-                                                                    }, children: t$1("summary.discount", { code: appliedDiscountCode.code }) }), jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { style: {
-                                                                        color: "var(--bw-success-color)",
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        fontSize: "14px",
-                                                                    }, children: t$1("summary.giftCard", { code: giftCard.code }) }), jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), jsxs("div", { style: {
-                                                        borderTop: "1px solid var(--bw-border-color)",
-                                                        paddingTop: "12px",
-                                                    }, children: [hasDepositOption && (jsxs("div", { style: {
-                                                                display: "flex",
-                                                                gap: "8px",
-                                                                marginBottom: "16px",
-                                                            }, children: [jsxs("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
-                                                                        flex: 1,
-                                                                        padding: "12px",
-                                                                        borderRadius: "var(--bw-border-radius)",
-                                                                        border: paymentOption === "deposit"
-                                                                            ? "2px solid var(--bw-highlight-color)"
-                                                                            : "1px solid var(--bw-border-color)",
-                                                                        backgroundColor: paymentOption === "deposit"
-                                                                            ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
-                                                                            : "var(--bw-surface-color)",
-                                                                        cursor: "pointer",
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        transition: "all 0.2s ease",
-                                                                    }, children: [jsx("div", { style: {
-                                                                                fontSize: "13px",
-                                                                                color: "var(--bw-text-muted)",
-                                                                                marginBottom: "4px",
-                                                                            }, children: t$1("summary.deposit") }), jsx("div", { style: {
-                                                                                fontSize: "18px",
-                                                                                fontWeight: 700,
-                                                                                color: paymentOption === "deposit"
-                                                                                    ? "var(--bw-highlight-color)"
-                                                                                    : "var(--bw-text-color)",
-                                                                            }, children: formatCurrency(depositAmount) })] }), jsxs("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
-                                                                        flex: 1,
-                                                                        padding: "12px",
-                                                                        borderRadius: "var(--bw-border-radius)",
-                                                                        border: paymentOption === "full"
-                                                                            ? "2px solid var(--bw-highlight-color)"
-                                                                            : "1px solid var(--bw-border-color)",
-                                                                        backgroundColor: paymentOption === "full"
-                                                                            ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
-                                                                            : "var(--bw-surface-color)",
-                                                                        cursor: "pointer",
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        transition: "all 0.2s ease",
-                                                                    }, children: [jsx("div", { style: {
-                                                                                fontSize: "13px",
-                                                                                color: "var(--bw-text-muted)",
-                                                                                marginBottom: "4px",
-                                                                            }, children: t$1("summary.payFull") }), jsx("div", { style: {
-                                                                                fontSize: "18px",
-                                                                                fontWeight: 700,
-                                                                                color: paymentOption === "full"
-                                                                                    ? "var(--bw-highlight-color)"
-                                                                                    : "var(--bw-text-color)",
-                                                                            }, children: formatCurrency(totalAmount) })] })] })), hasDepositOption && paymentOption === "deposit" && (jsxs("div", { style: {
-                                                                display: "flex",
-                                                                justifyContent: "space-between",
-                                                                alignItems: "center",
-                                                                fontSize: "14px",
-                                                                marginBottom: "8px",
-                                                            }, children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.totalAmount") }), jsx("span", { style: {
+                                                                transition: "all 0.2s ease",
+                                                            }, children: [jsx("div", { style: {
+                                                                        fontSize: "13px",
                                                                         color: "var(--bw-text-muted)",
-                                                                        fontFamily: "var(--bw-font-family)",
-                                                                        fontWeight: 500,
-                                                                    }, children: formatCurrency(totalAmount) })] })), jsxs("div", { style: {
-                                                                display: "flex",
-                                                                justifyContent: "space-between",
-                                                                alignItems: "center",
-                                                                fontSize: "18px",
-                                                                fontWeight: 600,
-                                                            }, children: [jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
-                                                                        ? t$1("summary.payToday")
-                                                                        : t$1("summary.totalAmount") }), jsx("span", { style: {
-                                                                        color: "var(--bw-highlight-color)",
-                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        marginBottom: "4px",
+                                                                    }, children: t$1("summary.payFull") }), jsx("div", { style: {
+                                                                        fontSize: "18px",
                                                                         fontWeight: 700,
-                                                                    }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (jsx("div", { style: {
-                                                                fontSize: "12px",
-                                                                color: "var(--bw-text-muted)",
+                                                                        color: paymentOption === "full"
+                                                                            ? "var(--bw-highlight-color)"
+                                                                            : "var(--bw-text-color)",
+                                                                    }, children: formatCurrency(totalAmount) })] })] })), jsxs("div", { style: {
+                                                        display: "flex",
+                                                        justifyContent: "space-between",
+                                                        alignItems: "center",
+                                                        fontSize: "18px",
+                                                        fontWeight: 600,
+                                                    }, children: [jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                                ? t$1("summary.payToday")
+                                                                : t$1("summary.totalAmount") }), jsx("span", { style: {
+                                                                color: "var(--bw-highlight-color)",
                                                                 fontFamily: "var(--bw-font-family)",
-                                                                marginTop: "8px",
-                                                                textAlign: "right",
-                                                            }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), jsx("div", { ref: paymentSectionRef, children: (stripePromise || systemConfig?.paymentProvider === "mollie") &&
-                                        (() => {
-                                            if (!isReadyForPayment()) {
-                                                const participantsWithNames = watchedParticipants.filter((p) => p.name?.trim()).length;
-                                                const totalParticipantRows = watchedParticipants.length;
-                                                const participantsWithoutNames = totalParticipantRows - participantsWithNames;
-                                                const missing = [];
-                                                if (participantFieldsConfig.name.required) {
-                                                    if (participantsWithNames === 0) {
-                                                        missing.push(t$1("payment.needParticipant"));
-                                                    }
-                                                    else if (participantsWithoutNames > 0) {
-                                                        missing.push(t$1("payment.needAllNames", { count: totalParticipantRows }));
-                                                    }
-                                                }
-                                                if (participantsWithNames > (eventDetails?.availableSpots || 0)) {
-                                                    missing.push(t$1("payment.reduceParticipants", { count: eventDetails?.availableSpots || 0 }));
-                                                }
-                                                if (!watchedCustomerName || watchedCustomerName.trim().length < 2 || customerNameError) {
-                                                    missing.push(t$1("payment.needValidName"));
-                                                }
-                                                if (!watchedCustomerEmail || watchedCustomerEmail.trim().length === 0 || customerEmailError) {
-                                                    missing.push(t$1("payment.needValidEmail"));
-                                                }
-                                                if (!watchedAcceptTerms) {
-                                                    missing.push(t$1("payment.needAcceptTerms"));
-                                                }
-                                                const message = missing.length > 0
-                                                    ? t$1("payment.missingFields", { fields: missing.join(", ") })
-                                                    : t$1("payment.fillRequired");
-                                                return (jsx("div", { style: {
-                                                        ...cardStyles$1,
-                                                        border: "1px solid var(--bw-warning-color)",
-                                                        color: "var(--bw-warning-color)",
+                                                                fontWeight: 700,
+                                                            }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (jsx("div", { style: {
+                                                        fontSize: "12px",
+                                                        color: "var(--bw-text-muted)",
                                                         fontFamily: "var(--bw-font-family)",
-                                                        textAlign: "center",
-                                                    }, children: message }));
-                                            }
-                                            const discountCodeProp = appliedDiscountCode
-                                                ? {
-                                                    id: appliedDiscountCode.id,
-                                                    code: appliedDiscountCode.code,
-                                                    description: appliedDiscountCode.description || undefined,
-                                                    type: appliedDiscountCode.discountType || "percentage",
-                                                    value: appliedDiscountCode.discountValue || 0,
-                                                    discountAmount: appliedDiscountCode.discountAmount,
-                                                    newTotal: appliedDiscountCode.newTotal,
-                                                }
-                                                : null;
-                                            if (systemConfig?.paymentProvider === "mollie") {
-                                                return (jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsx(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] }));
-                                            }
-                                            return (jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsx(StripePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] }));
-                                        })() })] })] })] }) }));
+                                                        marginTop: "8px",
+                                                        textAlign: "right",
+                                                    }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), !hasPaymentProvider && (jsx("div", { style: cardStyles$1, children: jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && (systemConfig?.paymentProvider === "mollie" ? (jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsx(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] })) : (jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsx(StripePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] })))] }))] }) }));
 }
 
 /**
@@ -15171,12 +15166,11 @@ function PromoDialog({ config, onClose, onCtaClick }) {
     return createPortal(dialogContent, portalContainer);
 }
 
-// Upsell card styles
 const cardBaseStyles = {
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    padding: "16px",
+    padding: "12px",
     backgroundColor: "var(--bw-surface-color)",
     borderWidth: "2px",
     borderStyle: "solid",
@@ -15196,19 +15190,13 @@ const cardDisabledStyles = {
     opacity: 0.6,
     cursor: "not-allowed",
 };
-const checkboxContainerStyles = {
-    position: "absolute",
-    bottom: "12px",
-    left: "12px",
-    zIndex: 1,
-};
 const checkboxInnerStyles = {
-    width: "24px",
-    height: "24px",
+    width: "48px",
+    height: "48px",
     borderWidth: "2px",
     borderStyle: "solid",
     borderColor: "var(--bw-border-color)",
-    borderRadius: "6px",
+    borderRadius: "12px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -15220,13 +15208,13 @@ const checkboxSelectedStyles = {
     borderColor: "var(--bw-highlight-color)",
     backgroundColor: "var(--bw-highlight-color)",
 };
-const imageContainerStyles = {
-    width: "100%",
-    height: "120px",
-    marginBottom: "12px",
+const previewImageContainerStyles = {
+    width: "56px",
+    height: "56px",
     borderRadius: "calc(var(--bw-border-radius) - 4px)",
     overflow: "hidden",
     backgroundColor: "var(--bw-background-color)",
+    flexShrink: 0,
 };
 const imageStyles = {
     width: "100%",
@@ -15241,23 +15229,53 @@ const imagePlaceholderStyles = {
     justifyContent: "center",
     color: "var(--bw-text-muted)",
 };
-const nameStyles = {
+const previewNameStyles = {
     fontSize: "16px",
     fontWeight: 600,
     color: "var(--bw-text-color)",
-    margin: "0 0 6px 0",
-    paddingRight: "36px",
+    margin: 0,
+    fontFamily: "var(--bw-font-family)",
+};
+const previewHeaderStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+};
+const previewPriceStyles = {
+    fontSize: "13px",
+    color: "var(--bw-text-muted)",
+    marginTop: "2px",
     fontFamily: "var(--bw-font-family)",
 };
+const headerRightStyles = {
+    marginLeft: "auto",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+};
+const chevronStyles = {
+    fontSize: "12px",
+    color: "var(--bw-text-muted)",
+    transition: "transform 0.2s ease",
+};
+const expandedContentStyles = {
+    marginTop: "12px",
+    paddingTop: "12px",
+    borderTop: "1px solid var(--bw-border-color)",
+};
+const expandedImageContainerStyles = {
+    width: "100%",
+    height: "180px",
+    marginBottom: "12px",
+    borderRadius: "calc(var(--bw-border-radius) - 4px)",
+    overflow: "hidden",
+    backgroundColor: "var(--bw-background-color)",
+};
 const descriptionStyles = {
     fontSize: "13px",
     color: "var(--bw-text-muted)",
     margin: "0 0 10px 0",
     lineHeight: 1.4,
-    display: "-webkit-box",
-    WebkitLineClamp: 5,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
     fontFamily: "var(--bw-font-family)",
 };
 const itemsContainerStyles = {
@@ -15339,6 +15357,8 @@ function UpsellCard({ upsell, isSelected, participantCount, onSelect, }) {
     const { locale } = useLocale();
     const totalPrice = upsell.price * participantCount;
     const isDisabled = !upsell.available;
+    const [isExpanded, setIsExpanded] = useState(false);
+    const hasSavings = (upsell.savingsPercent ?? 0) > 0;
     const getCardStyles = () => {
         if (isDisabled)
             return cardDisabledStyles;
@@ -15346,16 +15366,22 @@ function UpsellCard({ upsell, isSelected, participantCount, onSelect, }) {
             return cardSelectedStyles;
         return cardBaseStyles;
     };
-    return (jsxs("div", { style: getCardStyles(), onClick: !isDisabled ? onSelect : undefined, role: "checkbox", "aria-checked": isSelected, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
+    const toggleExpanded = () => {
+        setIsExpanded((current) => !current);
+    };
+    return (jsxs("div", { style: getCardStyles(), onClick: !isDisabled ? toggleExpanded : undefined, role: "button", "aria-expanded": isExpanded, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
             if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
                 e.preventDefault();
-                onSelect();
+                toggleExpanded();
             }
-        }, children: [jsx("div", { style: checkboxContainerStyles, children: jsx("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "16px", height: "16px" }, children: jsx("polyline", { points: "20 6 9 17 4 12" }) })) }) }), jsx("div", { style: imageContainerStyles, children: upsell.image ? (jsx("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (jsx("div", { style: imagePlaceholderStyles, children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: jsx("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), jsxs("div", { style: { flex: 1 }, children: [jsx("h4", { style: nameStyles, children: upsell.name }), upsell.description && (jsx("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (jsx("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (jsxs("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (jsxs("div", { style: eventInfoStyles, children: [jsxs("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString(locale === "de" ? "de-DE" : locale === "en" ? "en-US" : locale === "es" ? "es-ES" : locale === "sv" ? "sv-SE" : "pt-PT", {
+        }, children: [jsxs("div", { style: previewHeaderStyles, children: [jsx("div", { style: previewImageContainerStyles, children: upsell.image ? (jsx("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (jsx("div", { style: imagePlaceholderStyles, children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "32px", height: "32px", opacity: 0.4 }, children: jsx("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), jsxs("div", { style: { minWidth: 0 }, children: [jsx("h4", { style: previewNameStyles, children: upsell.name }), jsxs("div", { style: previewPriceStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), hasSavings && (jsx("div", { style: { ...previewPriceStyles, color: "var(--bw-highlight-color)" }, children: t("upsells.savePercent", { percent: upsell.savingsPercent ?? 0 }) }))] }), jsxs("div", { style: headerRightStyles, children: [jsx("button", { type: "button", onClick: (event) => {
+                                    event.stopPropagation();
+                                    onSelect();
+                                }, "aria-label": t("common.extras"), style: { background: "transparent", border: "none", cursor: "pointer", padding: 0 }, disabled: isDisabled, children: jsx("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "32px", height: "32px" }, children: jsx("polyline", { points: "20 6 9 17 4 12" }) })) }) }), jsx("span", { style: { ...chevronStyles, transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)" }, children: "\u25BC" })] })] }), isExpanded && (jsxs("div", { style: expandedContentStyles, children: [jsx("div", { style: expandedImageContainerStyles, children: upsell.image ? (jsx("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (jsx("div", { style: imagePlaceholderStyles, children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: jsx("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), upsell.description && (jsx("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (jsx("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (jsxs("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (jsxs("div", { style: eventInfoStyles, children: [jsxs("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString(locale === "de" ? "de-DE" : locale === "en" ? "en-US" : locale === "es" ? "es-ES" : locale === "sv" ? "sv-SE" : "pt-PT", {
                                         weekday: "short",
                                         day: "numeric",
                                         month: "short",
-                                    })] }), jsx("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] }))] }), jsxs("div", { style: priceContainerStyles, children: [jsxs("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (jsxs("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (jsx("div", { style: unavailableOverlayStyles, children: jsx("span", { children: upsell.unavailableReason
+                                    })] }), jsx("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] })), jsxs("div", { style: priceContainerStyles, children: [jsxs("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (jsxs("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] })), hasSavings && (jsx("span", { style: priceTotalStyles, children: t("upsells.savePercent", { percent: upsell.savingsPercent ?? 0 }) }))] })] })), isDisabled && (jsx("div", { style: unavailableOverlayStyles, children: jsx("span", { children: upsell.unavailableReason
                         ? formatUnavailableReason(upsell.unavailableReason, t)
                         : t("upsells.notAvailable") }) }))] }));
 }
@@ -15374,20 +15400,9 @@ function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, is
         }
     };
     const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
-    // Calculate total for selected upsells
-    const calculateTotal = () => {
-        return selectedUpsells.reduce((total, selection) => {
-            const upsell = upsells.find((u) => u.id === selection.upsellPackageId);
-            if (upsell) {
-                return total + upsell.price * selection.quantity;
-            }
-            return total;
-        }, 0);
-    };
-    const selectedTotal = calculateTotal();
     const selectedCount = selectedUpsells.length;
     const footerContent = (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), className: buttonClassName, children: t("common.back") }), jsx("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), className: buttonClassName, children: selectedCount === 0 ? t("button.continueWithout") : t("button.continue") })] }));
-    return (jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsx("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsx("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [jsx("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), jsxs("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
+    return (jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsx("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsx("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsx("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: jsx("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
 }
 
 /**
@@ -15525,6 +15540,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     // Upsells state
     const [upsells, setUpsells] = useState([]);
     const [selectedUpsells, setSelectedUpsells] = useState([]);
+    const [bookingPersistedState, setBookingPersistedState] = useState(null);
     const [isLoadingUpsells, setIsLoadingUpsells] = useState(false);
     const [tempParticipantCount, setTempParticipantCount] = useState(1); // Used during upsell step
     // State for upcoming events (next-events view mode)
@@ -16179,6 +16195,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const handleEventInstanceSelect = async (eventInstance) => {
         trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
         setSelectedEventInstance(eventInstance);
+        setBookingPersistedState(null);
         bookingReturnStep.current = "eventInstances";
         // Set default participant count for upsell calculations
         const defaultParticipantCount = 1;
@@ -16232,6 +16249,21 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setCurrentStep(bookingReturnStep.current);
         setSelectedEventInstance(null);
         setEventDetails(null);
+        setBookingPersistedState(null);
+    };
+    const handleBackFromBooking = () => {
+        if (upsells.length > 0) {
+            setCurrentStep("upsells");
+            return;
+        }
+        if (isDirectInstanceMode) {
+            setCurrentStep("eventTypes");
+            setSidebarOpen(false);
+            setEventDetails(null);
+            setBookingPersistedState(null);
+            return;
+        }
+        handleBackToEventInstances();
     };
     const handleBookingSuccess = (result) => {
         trackEvent("booking_completed", { paymentIntentId: result.paymentIntent?.id });
@@ -16239,6 +16271,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setSuccessPaymentId(result.paymentIntent.id);
         setSidebarOpen(false);
         setShouldRenderBookingForm(false);
+        setBookingPersistedState(null);
         config.onSuccess?.(result);
     };
     const handleBookingError = (errorMessage) => {
@@ -16307,6 +16340,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             ? (eventTypes.find((et) => et.id === eventTypeId) ?? selectedEventType)
             : selectedEventType;
         if (resolvedEventType && resolvedEventType !== selectedEventType) {
+            trackEvent("event_type_selected", { eventTypeId: resolvedEventType.id, eventTypeName: resolvedEventType.name });
             setSelectedEventType(resolvedEventType);
         }
         // Check if this is coming from a card preview (eventTypeId was provided)
@@ -16360,7 +16394,9 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 }
                 : null;
         if (eventInstance) {
+            trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
             setSelectedEventInstance(eventInstance);
+            setBookingPersistedState(null);
         }
         setError(null);
         // Check for upsells before going to booking (same as handleEventInstanceSelect)
@@ -16524,19 +16560,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     }
     // Main view based on view mode
     if (viewMode === "next-events" && showingPreview) {
-        return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
-                                setCurrentStep("eventTypes");
-                                setShowingPreview(true);
-                                setEventDetails(null);
-                            }, onBackToEventTypes: () => {
-                                setCurrentStep("eventTypes");
-                                setShowingPreview(true);
-                                setEventDetails(null);
-                            }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
-                                setCurrentStep("eventTypes");
-                                setShowingPreview(true);
-                                setEventDetails(null);
-                            }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+        return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
@@ -16546,6 +16570,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 setShouldRenderBookingForm(false);
                                 setSelectedUpsells([]);
                                 setUpsells([]);
+                                setBookingPersistedState(null);
                                 const url = new URL(window.location.href);
                                 url.searchParams.delete("payment_intent");
                                 url.searchParams.delete("payment_intent_client_secret");
@@ -16556,19 +16581,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "specials" && showingPreview) {
-        return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [jsx(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
-                                setCurrentStep("eventTypes");
-                                setShowingPreview(true);
-                                setEventDetails(null);
-                            }, onBackToEventTypes: () => {
-                                setCurrentStep("eventTypes");
-                                setShowingPreview(true);
-                                setEventDetails(null);
-                            }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
-                                setCurrentStep("eventTypes");
-                                setShowingPreview(true);
-                                setEventDetails(null);
-                            }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+        return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [jsx(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
@@ -16578,6 +16591,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 setShouldRenderBookingForm(false);
                                 setSelectedUpsells([]);
                                 setUpsells([]);
+                                setBookingPersistedState(null);
                             }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
@@ -16630,7 +16644,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                     setShouldRenderInstanceSelection(true);
                                 }
                             }, children: config.buttonText ||
-                                (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setSidebarOpen(false);
@@ -16662,32 +16676,36 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     // Determine the correct back handlers based on view mode
     const getBackHandlers = () => {
         if (viewMode === "next-events") {
-            return {
-                onBackToEventInstances: () => {
-                    setCurrentStep("eventInstances");
+            const backFromBooking = () => {
+                if (upsells.length > 0) {
+                    setCurrentStep("upsells");
                     setShowingPreview(false);
-                    setEventDetails(null);
-                },
+                    return;
+                }
+                setCurrentStep("eventInstances");
+                setShowingPreview(false);
+                setEventDetails(null);
+                setBookingPersistedState(null);
+            };
+            return {
+                onBackToEventInstances: backFromBooking,
                 onBackToEventTypes: () => {
                     setShowingPreview(true);
                     setCurrentStep("eventTypes");
                     setEventDetails(null);
+                    setBookingPersistedState(null);
                 },
-                onClose: () => {
-                    setCurrentStep("eventInstances");
-                    setShowingPreview(false);
-                    setEventDetails(null);
-                },
+                onClose: backFromBooking,
             };
         }
         return {
-            onBackToEventInstances: handleBackToEventInstances,
+            onBackToEventInstances: handleBackFromBooking,
             onBackToEventTypes: handleBackToEventTypes,
-            onClose: handleBackToEventInstances,
+            onClose: handleBackFromBooking,
         };
     };
     const backHandlers = getBackHandlers();
-    return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), jsx(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
+    return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsx(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
                             setIsSuccess(false);
                             setCurrentStep("eventTypes");
                             setSuccessPaymentId(null);