@bigz-app/booking-widget 1.4.0 → 1.4.1

package/dist/index.esm.js

@@ -236,6 +236,7 @@ const de$1 = {
     "events.availableFrom": "Freie Plätze ab {{date}}",
     "events.noAvailableDates": "Keine Termine frei",
     "events.previewSectionTitle": "Specials & nächste Termine",
+    "events.seeMoreDates": "Weitere Termine ansehen...",
     // Event instances
     "instances.title": "Terminauswahl",
     "instances.noAvailable": "Keine verfügbaren Termine",
@@ -289,6 +290,10 @@ const de$1 = {
     "booking.maxSpotsReached": "Maximal {{count}} Plätze verfügbar.",
     "booking.comment": "Kommentar (optional)",
     "booking.commentPlaceholder": "Zusätzliche Anmerkungen zur Buchung...",
+    "booking.stepDate": "Termin",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Angaben",
+    "booking.stepPayment": "Zahlung",
     // Booking summary
     "summary.title": "Buchungszusammenfassung",
     "summary.subtotal": "Zwischensumme:",
@@ -421,6 +426,7 @@ const de$1 = {
     "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.",
+    "booking.depositNotConfigured": "Online-Anzahlung ist für dieses Event 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",
@@ -446,6 +452,9 @@ const de$1 = {
     "promo.giftCode": "Dein Geschenk-Code",
     "promo.copied": "Kopiert!",
     "promo.copy": "Kopieren",
+    "trust.securePayment": "Sichere Zahlung",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const en = {
@@ -516,6 +525,7 @@ const en = {
     "events.availableFrom": "Available from {{date}}",
     "events.noAvailableDates": "No dates available",
     "events.previewSectionTitle": "Specials & upcoming dates",
+    "events.seeMoreDates": "See more dates...",
     // Event instances
     "instances.title": "Select a date",
     "instances.noAvailable": "No available dates",
@@ -569,6 +579,10 @@ const en = {
     "booking.maxSpotsReached": "Maximum {{count}} spots available.",
     "booking.comment": "Comment (optional)",
     "booking.commentPlaceholder": "Additional notes for the booking...",
+    "booking.stepDate": "Date",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Details",
+    "booking.stepPayment": "Payment",
     // Booking summary
     "summary.title": "Booking Summary",
     "summary.subtotal": "Subtotal:",
@@ -701,6 +715,7 @@ const en = {
     "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.",
+    "booking.depositNotConfigured": "Online deposit payment is not available for this event. Please contact us to complete your reservation.",
     "upsells.spotsFree": "{{count}} spots available",
     "upsells.notAvailable": "Not available",
     "upsells.reason.outOfStock": "{{productName}} is out of stock",
@@ -726,6 +741,9 @@ const en = {
     "promo.giftCode": "Your gift code",
     "promo.copied": "Copied!",
     "promo.copy": "Copy",
+    "trust.securePayment": "Secure payment",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const es = {
@@ -796,6 +814,7 @@ const es = {
     "events.availableFrom": "Disponible desde {{date}}",
     "events.noAvailableDates": "Sin fechas disponibles",
     "events.previewSectionTitle": "Especiales & próximas fechas",
+    "events.seeMoreDates": "Ver más fechas...",
     // Event instances
     "instances.title": "Seleccionar fecha",
     "instances.noAvailable": "Sin fechas disponibles",
@@ -849,6 +868,10 @@ const es = {
     "booking.maxSpotsReached": "Máximo {{count}} plazas disponibles.",
     "booking.comment": "Comentario (opcional)",
     "booking.commentPlaceholder": "Notas adicionales para la reserva...",
+    "booking.stepDate": "Fecha",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Datos",
+    "booking.stepPayment": "Pago",
     // Booking summary
     "summary.title": "Resumen de la reserva",
     "summary.subtotal": "Subtotal:",
@@ -981,6 +1004,7 @@ const es = {
     "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.",
+    "booking.depositNotConfigured": "El pago de depósito en línea no está disponible para este evento. Contáctanos para completar la reserva.",
     "upsells.spotsFree": "{{count}} plazas disponibles",
     "upsells.notAvailable": "No disponible",
     "upsells.reason.outOfStock": "{{productName}} está agotado",
@@ -1006,6 +1030,9 @@ const es = {
     "promo.giftCode": "Tu codigo de regalo",
     "promo.copied": "Copiado!",
     "promo.copy": "Copiar",
+    "trust.securePayment": "Pago seguro",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const pt = {
@@ -1076,6 +1103,7 @@ const pt = {
     "events.availableFrom": "Disponível a partir de {{date}}",
     "events.noAvailableDates": "Sem datas disponíveis",
     "events.previewSectionTitle": "Especiais & próximas datas",
+    "events.seeMoreDates": "Ver mais datas...",
     // Event instances
     "instances.title": "Selecionar data",
     "instances.noAvailable": "Sem datas disponíveis",
@@ -1129,6 +1157,10 @@ const pt = {
     "booking.maxSpotsReached": "Máximo {{count}} lugares disponíveis.",
     "booking.comment": "Comentário (opcional)",
     "booking.commentPlaceholder": "Notas adicionais para a reserva...",
+    "booking.stepDate": "Data",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Dados",
+    "booking.stepPayment": "Pagamento",
     // Booking summary
     "summary.title": "Resumo da reserva",
     "summary.subtotal": "Subtotal:",
@@ -1261,6 +1293,7 @@ const pt = {
     "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.",
+    "booking.depositNotConfigured": "O pagamento de depósito online não está disponível para este evento. Contacta-nos para concluir a reserva.",
     "upsells.spotsFree": "{{count}} lugares disponíveis",
     "upsells.notAvailable": "Não disponível",
     "upsells.reason.outOfStock": "{{productName}} está esgotado",
@@ -1286,6 +1319,9 @@ const pt = {
     "promo.giftCode": "O teu codigo de oferta",
     "promo.copied": "Copiado!",
     "promo.copy": "Copiar",
+    "trust.securePayment": "Pagamento seguro",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const sv = {
@@ -1356,6 +1392,7 @@ const sv = {
     "events.availableFrom": "Lediga platser från {{date}}",
     "events.noAvailableDates": "Inga datum lediga",
     "events.previewSectionTitle": "Specials & kommande datum",
+    "events.seeMoreDates": "Se fler datum...",
     // Event instances
     "instances.title": "Välj datum",
     "instances.noAvailable": "Inga tillgängliga datum",
@@ -1409,6 +1446,10 @@ const sv = {
     "booking.maxSpotsReached": "Maximalt {{count}} platser tillgängliga.",
     "booking.comment": "Kommentar (valfritt)",
     "booking.commentPlaceholder": "Ytterligare anteckningar för bokningen...",
+    "booking.stepDate": "Datum",
+    "booking.stepUpsells": "Tillägg",
+    "booking.stepDetails": "Uppgifter",
+    "booking.stepPayment": "Betalning",
     // Booking summary
     "summary.title": "Bokningssammanfattning",
     "summary.subtotal": "Delsumma:",
@@ -1541,6 +1582,7 @@ const sv = {
     "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.",
+    "booking.depositNotConfigured": "Online deposition är inte tillgänglig för detta evenemang. 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",
@@ -1566,6 +1608,9 @@ const sv = {
     "promo.giftCode": "Din presentkod",
     "promo.copied": "Kopierad!",
     "promo.copy": "Kopiera",
+    "trust.securePayment": "Säker betalning",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const SUPPORTED_LOCALES = ["de", "en", "es", "sv", "pt"];
@@ -7264,6 +7309,55 @@ function Accordion({ title, priceInfo, children, isOpen, onToggle, }) {
                 }, children: children }))] }));
 }
 
+function FlowProgress({ currentStep, hasUpsellsStep }) {
+    const t = useTranslations();
+    const steps = hasUpsellsStep
+        ? [
+            { key: "date", label: t("booking.stepDate") },
+            { key: "upsells", label: t("booking.stepUpsells") },
+            { key: "details", label: t("booking.stepDetails") },
+            { key: "payment", label: t("booking.stepPayment") },
+        ]
+        : [
+            { key: "date", label: t("booking.stepDate") },
+            { key: "details", label: t("booking.stepDetails") },
+            { key: "payment", label: t("booking.stepPayment") },
+        ];
+    const activeIndex = Math.max(steps.findIndex((step) => step.key === currentStep), 0);
+    const progressPercent = steps.length > 1 ? (activeIndex / (steps.length - 1)) * 100 : 100;
+    return (jsxs("div", { style: {
+            backgroundColor: "var(--bw-surface-color)",
+            border: "1px solid var(--bw-border-color)",
+            borderRadius: "var(--bw-border-radius)",
+            padding: "12px 14px",
+            marginBottom: "16px",
+        }, children: [jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "10px",
+                    fontFamily: "var(--bw-font-family)",
+                    gap: "8px",
+                }, children: steps.map((step, index) => (jsxs("span", { style: {
+                        fontSize: "12px",
+                        fontWeight: 700,
+                        color: index <= activeIndex ? "var(--bw-highlight-color)" : "var(--bw-text-muted)",
+                        whiteSpace: "nowrap",
+                    }, children: [index + 1, ". ", step.label] }, step.key))) }), jsx("div", { style: {
+                    width: "100%",
+                    height: "8px",
+                    borderRadius: "999px",
+                    backgroundColor: "var(--bw-background-color)",
+                    border: "1px solid var(--bw-border-color)",
+                    overflow: "hidden",
+                }, children: jsx("div", { style: {
+                        width: `${progressPercent}%`,
+                        height: "100%",
+                        backgroundColor: "var(--bw-highlight-color)",
+                        transition: "width 0.25s ease",
+                    } }) })] }));
+}
+
 // Spinner icon (kept local as it has animation style)
 const IconSpinner = ({ size = 16, color = "currentColor" }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
 function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVoucherValidated, appliedVouchers, onRemoveVoucher, disabled = false, }) {
@@ -11478,6 +11572,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const { locale } = useLocale();
     const timezone = useTimezone();
     const roundEnabled = systemConfig?.roundPricesEnabled !== false;
+    const widgetPaymentMode = systemConfig?.widgetPaymentMode ?? "all";
     const participantFieldsConfig = eventDetails.participantFieldsConfig ?? DEFAULT_PARTICIPANT_FIELDS_CONFIG;
     const participantLevelOptions = eventDetails.participantLevelOptions ?? ["beginner", "advanced"];
     const roundDiscountUp = (minorUnits) => Math.ceil(minorUnits / 100) * 100;
@@ -11491,6 +11586,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const [paymentOption, setPaymentOption] = useState(() => persistedState?.paymentOption ?? "deposit");
     // Per-participant upsell selections: participantIndex -> array of upsell package IDs
     const [participantUpsells, setParticipantUpsells] = useState(() => persistedState?.participantUpsells ?? {});
+    const [showPaymentValidationHint, setShowPaymentValidationHint] = useState(false);
     const wasOpenRef = useRef(false);
     const form = useForm({
         resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
@@ -11614,12 +11710,22 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const totalDiscount = calculateTotalDiscount();
     const totalAmount = calculateTotal();
     const depositAmount = calculateDeposit();
-    // Deposit stays fixed unless the discounted total is lower than the deposit
-    // (discount applies to total price, not to the deposit itself)
-    const hasDepositOption = depositAmount > 0 && depositAmount < totalAmount;
-    const paymentAmount = hasDepositOption && paymentOption === "deposit"
-        ? Math.min(depositAmount, totalAmount)
-        : totalAmount;
+    const allowsDepositInWidget = widgetPaymentMode === "all" || widgetPaymentMode === "deposits_only";
+    const allowsFullInWidget = widgetPaymentMode === "all" || widgetPaymentMode === "full_only";
+    const hasConfiguredDeposit = depositAmount > 0;
+    const hasDepositChoice = allowsDepositInWidget && hasConfiguredDeposit && depositAmount < totalAmount;
+    const depositsOnlyBlocked = widgetPaymentMode === "deposits_only" && !hasConfiguredDeposit;
+    useEffect(() => {
+        if (widgetPaymentMode === "deposits_only") {
+            setPaymentOption("deposit");
+        }
+        else if (widgetPaymentMode === "full_only") {
+            setPaymentOption("full");
+        }
+    }, [widgetPaymentMode]);
+    const paymentAmount = allowsFullInWidget && (!hasDepositChoice || paymentOption === "full" || !allowsDepositInWidget)
+        ? totalAmount
+        : Math.min(depositAmount, totalAmount);
     // Convert per-participant upsells to UpsellSelection[] format for API
     // Includes participantIndices to track which participants selected each upsell
     const aggregatedUpsellSelections = useCallback(() => {
@@ -11778,7 +11884,39 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         onClose();
     };
     // Footer navigation
-    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") }))] }));
+    const canContinueToPayment = isReadyForPayment();
+    const handleContinueToPayment = async () => {
+        if (canContinueToPayment && hasPaymentProvider) {
+            setShowPaymentValidationHint(false);
+            setCheckoutStep("payment");
+            return;
+        }
+        const participantErrors = await form.trigger("participants");
+        const customerErrors = await form.trigger(["customerName", "customerEmail", "acceptTerms"]);
+        if (!participantErrors || !customerErrors) {
+            setShowPaymentValidationHint(true);
+        }
+    };
+    useEffect(() => {
+        if (showPaymentValidationHint && canContinueToPayment) {
+            setShowPaymentValidationHint(false);
+        }
+    }, [showPaymentValidationHint, canContinueToPayment]);
+    const footerContent = (jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "6px" }, children: [checkoutStep === "details" && (jsx("div", { style: {
+                    minHeight: "14px",
+                    fontSize: "11px",
+                    color: "var(--bw-error-color)",
+                    textAlign: "center",
+                    fontFamily: "var(--bw-font-family)",
+                    opacity: showPaymentValidationHint ? 1 : 0,
+                    transition: "opacity 0.15s ease",
+                    pointerEvents: "none",
+                }, children: t$1("payment.fillRequired") })), jsxs("div", { style: { display: "flex", gap: "12px", width: "100%" }, 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: handleContinueToPayment, disabled: !hasPaymentProvider, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth, !canContinueToPayment
+                            ? {
+                                opacity: 0.55,
+                                cursor: "pointer",
+                            }
+                            : undefined), 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",
@@ -11795,7 +11933,7 @@ 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: [checkoutStep === "details" && (jsxs(Fragment, { children: [jsxs("div", { style: cardStyles$1, children: [jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), jsxs("div", { style: {
+    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: [jsx(FlowProgress, { currentStep: checkoutStep === "details" ? "details" : "payment", hasUpsellsStep: upsells.length > 0 }), 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",
@@ -11921,7 +12059,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                             }, 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: {
+                                            }, children: [hasDepositChoice && (jsxs("div", { style: {
                                                         display: "flex",
                                                         justifyContent: "space-between",
                                                         alignItems: "center",
@@ -11931,7 +12069,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                 color: "var(--bw-text-muted)",
                                                                 fontFamily: "var(--bw-font-family)",
                                                                 fontWeight: 500,
-                                                            }, children: formatCurrency(totalAmount) })] })), hasDepositOption && (jsxs("div", { style: {
+                                                            }, children: formatCurrency(totalAmount) })] })), hasDepositChoice && widgetPaymentMode === "all" && (jsxs("div", { style: {
                                                         display: "flex",
                                                         gap: "8px",
                                                         marginBottom: "16px",
@@ -11987,19 +12125,19 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                         alignItems: "center",
                                                         fontSize: "18px",
                                                         fontWeight: 600,
-                                                    }, children: [jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                    }, children: [jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositChoice && paymentOption === "deposit"
                                                                 ? t$1("summary.payToday")
                                                                 : t$1("summary.totalAmount") }), jsx("span", { style: {
                                                                 color: "var(--bw-highlight-color)",
                                                                 fontFamily: "var(--bw-font-family)",
                                                                 fontWeight: 700,
-                                                            }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (jsx("div", { style: {
+                                                            }, children: formatCurrency(paymentAmount) })] }), hasDepositChoice && paymentOption === "deposit" && (jsx("div", { style: {
                                                         fontSize: "12px",
                                                         color: "var(--bw-text-muted)",
                                                         fontFamily: "var(--bw-font-family)",
                                                         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() })] })))] }))] }) }));
+                                                    }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), depositsOnlyBlocked && (jsx("div", { style: cardStyles$1, children: jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.depositNotConfigured") }) })), !hasPaymentProvider && !depositsOnlyBlocked && (jsx("div", { style: cardStyles$1, children: jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && !depositsOnlyBlocked && (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() })] })))] }))] }) }));
 }
 
 /**
@@ -12847,6 +12985,40 @@ const ImageCarousel = ({ images, eventName }) => {
                 } }))] }));
 };
 
+function PaymentLogosStrip() {
+    const logoHeight = 20;
+    const logoCellStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0px 6px",
+        minHeight: "29px", // +7px from previous 22px
+        borderRadius: "6px",
+    };
+    return (jsxs("div", { style: {
+            padding: "6px 14px 10px 14px",
+            backgroundColor: "color-mix(in srgb, var(--bw-text-color) 100%, var(--bw-surface-color) 18%)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "var(--bw-border-radius)",
+            gap: "4px",
+            flexWrap: "wrap",
+            width: "fit-content",
+            margin: "20px auto",
+        }, children: [jsxs("span", { style: logoCellStyle, children: [jsx("span", { style: { color: "#003087", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Pay" }), jsx("span", { style: { color: "#009cde", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Pal" })] }), jsx("span", { style: logoCellStyle, children: jsxs("svg", { width: "34", height: logoHeight, viewBox: "0 0 34 20", "aria-label": "Maestro", children: [jsx("circle", { cx: "13", cy: "10", r: "8", fill: "#eb001b" }), jsx("circle", { cx: "21", cy: "10", r: "8", fill: "#00a2e5", fillOpacity: "0.92" })] }) }), jsx("span", { style: logoCellStyle, children: jsx("span", { style: { color: "#1434CB", fontSize: "14px", fontStyle: "italic", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "VISA" }) }), jsx("span", { style: logoCellStyle, children: jsx("span", { style: { color: "purple", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Klarna" }) }), jsx("span", { style: logoCellStyle, children: jsxs("svg", { width: "74", height: logoHeight, viewBox: "0 0 74 20", "aria-label": "Amazon Pay", children: [jsx("text", { x: "0", y: "14", fontSize: "12", fill: "#111827", fontFamily: "Arial, sans-serif", children: "amazon" }), jsx("text", { x: "45", y: "14", fontSize: "12", fill: "#111827", fontFamily: "Arial, sans-serif", children: "pay" }), jsx("path", { d: "M5 15 C17 20, 35 20, 48 15", stroke: "#f59e0b", strokeWidth: "1.6", fill: "none", strokeLinecap: "round" })] }) }), jsxs("span", { style: logoCellStyle, children: [jsx("span", { style: {
+                            fontSize: "16px",
+                            fontWeight: 800,
+                            fontFamily: "Arial, sans-serif",
+                            lineHeight: 1,
+                            background: "conic-gradient(from 25deg, #4285F4 0 24%, #DB4437 24% 48%, #F4B400 48% 73%, #0F9D58 73% 100%)",
+                            WebkitBackgroundClip: "text",
+                            backgroundClip: "text",
+                            color: "transparent",
+                            WebkitTextFillColor: "transparent",
+                        }, children: "G" }), jsx("span", { style: { color: "#5f6368", fontSize: "14px", fontWeight: 600, fontFamily: "Arial, sans-serif", marginLeft: "3px", lineHeight: 1 }, children: "Pay" })] }), jsx("span", { style: logoCellStyle, children: jsxs("svg", { width: "60", height: logoHeight, viewBox: "0 0 60 20", "aria-label": "Apple Pay", children: [jsx("text", { x: "0", y: "14.5", fontSize: "14.5", fill: "#111827", fontFamily: "-apple-system, BlinkMacSystemFont, Arial, sans-serif", children: "\uF8FF" }), jsx("text", { x: "14", y: "14.5", fontSize: "14.5", fill: "#111827", fontFamily: "-apple-system, BlinkMacSystemFont, Arial, sans-serif", children: "Pay" })] }) })] }));
+}
+
 function VoucherPurchaseCard({ config, minEventPrice, fallbackImages = [], onClick, standalone = false, }) {
     const t = useTranslations();
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
@@ -13966,7 +14138,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                         display: "flex",
                                         flexDirection: "column",
                                         justifyContent: "space-between",
-                                        height: "490px",
+                                        height: "540px",
                                     }, children: [jsxs("div", { children: [jsx("h2", { className: "event-type-title", style: {
                                                         fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                         fontWeight: 700,
@@ -14036,19 +14208,9 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                             }) }) })) : (jsx("div", { className: "event-type-desc", style: {
                                                             margin: "10px 0",
                                                             height: "7.5em", // Same height as highlights
-                                                        }, children: "\u00A0" })) })] }), jsxs("div", { children: [jsxs("div", { children: [jsx("div", { className: "event-type-price", style: {
-                                                                fontWeight: 700,
-                                                                color: "var(--bw-text-color)",
-                                                                fontFamily: "var(--bw-font-family)",
-                                                                textAlign: "right",
-                                                            }, children: jsx("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), jsx("div", { className: "event-type-price", style: {
-                                                                fontSize: "clamp(1.72rem, 4vw, 32px)",
-                                                                fontWeight: 700,
-                                                                color: "var(--bw-text-color)",
-                                                                fontFamily: "var(--bw-font-family)",
-                                                                textAlign: "right",
-                                                            }, children: jsxs("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), (() => {
+                                                        }, children: "\u00A0" })) })] }), jsxs("div", { children: [(() => {
                                                     const preview = eventType.cardPreview ?? [];
+                                                    const hasMoreDates = eventType.availableInstancesCount > preview.length;
                                                     return (jsxs("div", { style: {
                                                             marginTop: "12px",
                                                             borderTop: "1px solid var(--bw-border-color)",
@@ -14082,8 +14244,33 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                                             transition: "background 0.15s",
                                                                             boxSizing: "border-box",
                                                                         }, children: [jsxs("span", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: "3px" }, children: [item.isSpecial && (jsx("span", { style: { color: "var(--bw-highlight-color)", fontSize: "11px", lineHeight: 1 }, children: "\u2605" })), formatWeekday(item.startTime, timezone, locale), " ", formatDate(item.startTime, timezone, locale)] }), jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }, children: item.name }), jsxs("span", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [hasDiscount && (jsx("span", { style: { textDecoration: "line-through", opacity: 0.55, fontSize: "11px" }, children: formatCurrency(item.basePrice) })), jsx("span", { style: { fontWeight: 700, color: item.isSpecial ? "var(--bw-highlight-color)" : "var(--bw-text-color)" }, children: formatCurrency(item.price) })] }), item.specialDescription ? (jsx(InfoBadge, { text: item.specialDescription })) : (jsx("span", {}))] }, item.id));
-                                                                }) })] }));
-                                                })(), jsxs("div", { style: {
+                                                                }) }), hasMoreDates && (jsx("button", { type: "button", onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    onEventTypeSelect(eventType);
+                                                                }, style: {
+                                                                    marginTop: "6px",
+                                                                    padding: 0,
+                                                                    border: "none",
+                                                                    background: "none",
+                                                                    color: "var(--bw-highlight-color)",
+                                                                    fontFamily: "var(--bw-font-family)",
+                                                                    fontSize: "13px",
+                                                                    fontWeight: 600,
+                                                                    cursor: "pointer",
+                                                                    textDecoration: "underline",
+                                                                }, children: t("events.seeMoreDates") }))] }));
+                                                })(), jsxs("div", { style: { marginBottom: "16px" }, children: [jsx("div", { className: "event-type-price", style: {
+                                                                fontWeight: 700,
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                textAlign: "right",
+                                                            }, children: jsx("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), jsx("div", { className: "event-type-price", style: {
+                                                                fontSize: "clamp(1.72rem, 4vw, 32px)",
+                                                                fontWeight: 700,
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                textAlign: "right",
+                                                            }, children: jsxs("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), jsxs("div", { style: {
                                                         display: "flex",
                                                         justifyContent: "flex-end",
                                                         alignItems: "center",
@@ -14141,7 +14328,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                             fontFamily: "var(--bw-font-family)",
                                             boxShadow: "var(--bw-shadow-md)",
                                         }, children: t("events.soldOut") }) }))] }, eventType.id));
-                    }) }) })), jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
+                    }) }) })), jsx(PaymentLogosStrip, {}), jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
 }
 
 const getAllocationBadgeInfo = (availableSpots, maxParticipants, t) => {
@@ -14268,7 +14455,7 @@ const PriceDisplay = ({ price, yearPrices, t }) => {
             boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
         }, children: formatCurrency(price) }));
 };
-function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
+function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, hasUpsellsStep = false, }) {
     const t = useTranslations();
     const { locale } = useLocale();
     const timezone = useTimezone();
@@ -14334,88 +14521,88 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
     const footerNav = (jsx("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t("common.back") }));
     // Show loading state first if we're loading event instances
     if (isLoadingEventInstances) {
-        return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsx("div", { style: { padding: "24px" }, children: jsx("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (jsxs("div", { className: "skeleton-shimmer", style: {
-                            backgroundColor: "var(--bw-surface-color)",
-                            border: "1px solid var(--bw-border-color)",
-                            borderRadius: "var(--bw-border-radius)",
-                            overflow: "hidden",
-                        }, children: [jsxs("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
-                                    padding: "16px 20px",
-                                    cursor: "pointer",
-                                    borderBottom: "1px solid var(--bw-border-color)",
-                                }, children: [jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [jsx("div", { style: {
-                                                    width: "80px",
-                                                    height: "20px",
-                                                    backgroundColor: "var(--bw-border-color)",
-                                                    borderRadius: "var(--bw-border-radius-small)",
-                                                } }), jsx("div", { style: {
-                                                    width: "16px",
-                                                    height: "16px",
-                                                    backgroundColor: "var(--bw-border-color)",
-                                                    borderRadius: "var(--bw-border-radius-small)",
-                                                } })] }), jsx("div", { style: {
-                                            width: "70px",
-                                            height: "16px",
-                                            backgroundColor: "var(--bw-highlight-color)",
-                                            opacity: 0.3,
-                                            borderRadius: "var(--bw-border-radius-small)",
-                                        } })] }), jsx("div", { style: {
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    gap: "12px",
-                                    paddingTop: "12px",
-                                    padding: "12px 20px 20px 20px",
-                                }, children: Array.from({ length: 2 }).map((_, eventIdx) => (jsxs("div", { style: {
-                                        position: "relative",
-                                        border: "1px solid var(--bw-border-color)",
-                                        backgroundColor: "var(--bw-surface-color)",
-                                        borderRadius: "var(--bw-border-radius)",
+        return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxs("div", { style: { padding: "24px" }, children: [jsx(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), jsx("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (jsxs("div", { className: "skeleton-shimmer", style: {
+                                backgroundColor: "var(--bw-surface-color)",
+                                border: "1px solid var(--bw-border-color)",
+                                borderRadius: "var(--bw-border-radius)",
+                                overflow: "hidden",
+                            }, children: [jsxs("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "center",
                                         padding: "16px 20px",
-                                        fontFamily: "var(--bw-font-family)",
-                                    }, children: [jsxs("div", { style: {
-                                                display: "flex",
-                                                justifyContent: "space-between",
-                                                width: "100%",
-                                                alignItems: "flex-start",
-                                                gap: "12px",
-                                                marginBottom: "4px",
-                                            }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
-                                                                width: "40px",
-                                                                height: "40px",
-                                                                backgroundColor: "var(--bw-background-color)",
-                                                                border: "1px solid var(--bw-border-color)",
-                                                                borderTopWidth: "4px",
-                                                                borderRadius: "var(--bw-border-radius-small)",
-                                                            } }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [jsx("div", { style: {
-                                                                        width: "80px",
-                                                                        height: "16px",
-                                                                        backgroundColor: "var(--bw-border-color)",
-                                                                        borderRadius: "var(--bw-border-radius)",
-                                                                    } }), jsx("div", { style: {
-                                                                        width: "60px",
-                                                                        height: "14px",
-                                                                        backgroundColor: "var(--bw-border-color)",
-                                                                        borderRadius: "var(--bw-border-radius)",
-                                                                    } })] })] }), jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: jsx("div", { style: {
-                                                            width: "70px",
-                                                            height: "20px",
-                                                            backgroundColor: "var(--bw-highlight-color)",
-                                                            opacity: 0.3,
-                                                            borderRadius: "var(--bw-border-radius)",
-                                                        } }) })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [jsx("div", { style: {
-                                                        width: "120px",
-                                                        height: "16px",
+                                        cursor: "pointer",
+                                        borderBottom: "1px solid var(--bw-border-color)",
+                                    }, children: [jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [jsx("div", { style: {
+                                                        width: "80px",
+                                                        height: "20px",
                                                         backgroundColor: "var(--bw-border-color)",
-                                                        borderRadius: "var(--bw-border-radius)",
+                                                        borderRadius: "var(--bw-border-radius-small)",
                                                     } }), jsx("div", { style: {
-                                                        width: "50px",
-                                                        height: "20px",
+                                                        width: "16px",
+                                                        height: "16px",
                                                         backgroundColor: "var(--bw-border-color)",
-                                                        borderRadius: "16px",
-                                                    } })] })] }, eventIdx))) })] }, idx))) }) }) }));
+                                                        borderRadius: "var(--bw-border-radius-small)",
+                                                    } })] }), jsx("div", { style: {
+                                                width: "70px",
+                                                height: "16px",
+                                                backgroundColor: "var(--bw-highlight-color)",
+                                                opacity: 0.3,
+                                                borderRadius: "var(--bw-border-radius-small)",
+                                            } })] }), jsx("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "12px",
+                                        paddingTop: "12px",
+                                        padding: "12px 20px 20px 20px",
+                                    }, children: Array.from({ length: 2 }).map((_, eventIdx) => (jsxs("div", { style: {
+                                            position: "relative",
+                                            border: "1px solid var(--bw-border-color)",
+                                            backgroundColor: "var(--bw-surface-color)",
+                                            borderRadius: "var(--bw-border-radius)",
+                                            padding: "16px 20px",
+                                            fontFamily: "var(--bw-font-family)",
+                                        }, children: [jsxs("div", { style: {
+                                                    display: "flex",
+                                                    justifyContent: "space-between",
+                                                    width: "100%",
+                                                    alignItems: "flex-start",
+                                                    gap: "12px",
+                                                    marginBottom: "4px",
+                                                }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
+                                                                    width: "40px",
+                                                                    height: "40px",
+                                                                    backgroundColor: "var(--bw-background-color)",
+                                                                    border: "1px solid var(--bw-border-color)",
+                                                                    borderTopWidth: "4px",
+                                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                                } }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [jsx("div", { style: {
+                                                                            width: "80px",
+                                                                            height: "16px",
+                                                                            backgroundColor: "var(--bw-border-color)",
+                                                                            borderRadius: "var(--bw-border-radius)",
+                                                                        } }), jsx("div", { style: {
+                                                                            width: "60px",
+                                                                            height: "14px",
+                                                                            backgroundColor: "var(--bw-border-color)",
+                                                                            borderRadius: "var(--bw-border-radius)",
+                                                                        } })] })] }), jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: jsx("div", { style: {
+                                                                width: "70px",
+                                                                height: "20px",
+                                                                backgroundColor: "var(--bw-highlight-color)",
+                                                                opacity: 0.3,
+                                                                borderRadius: "var(--bw-border-radius)",
+                                                            } }) })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [jsx("div", { style: {
+                                                            width: "120px",
+                                                            height: "16px",
+                                                            backgroundColor: "var(--bw-border-color)",
+                                                            borderRadius: "var(--bw-border-radius)",
+                                                        } }), jsx("div", { style: {
+                                                            width: "50px",
+                                                            height: "20px",
+                                                            backgroundColor: "var(--bw-border-color)",
+                                                            borderRadius: "16px",
+                                                        } })] })] }, eventIdx))) })] }, idx))) })] }) }));
     }
     // Show empty state only if not loading and no event instances
     if (eventInstances.length === 0) {
@@ -14434,116 +14621,116 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                 fontFamily: "var(--bw-font-family)",
                             }, children: t("instances.noAvailable") }), jsx("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t("instances.noAvailableMessage") })] }) }) }));
     }
-    return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsx("div", { style: { padding: "20px 10px" }, children: jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
-                    const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
-                    return (jsxs(Fragment$1, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsx("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), jsx(Accordion, { title: label, priceInfo: jsx("div", { style: {
-                                        fontSize: "16px",
-                                        fontWeight: 500,
-                                        marginLeft: "auto",
-                                        padding: "4px 8px",
-                                        borderRadius: "var(--bw-border-radius-small)",
-                                        backgroundColor: monthPriceDisplayInfo
-                                            ? monthPriceDisplayInfo.backgroundColor
-                                            : "#14532d",
-                                        color: monthPriceDisplayInfo
-                                            ? monthPriceDisplayInfo.textColor
-                                            : "#4ade80",
-                                        boxShadow: monthPriceDisplayInfo
-                                            ? "0 2px 4px rgba(0, 0, 0, 0.2)"
-                                            : undefined,
-                                    }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
-                                        const availableSpots = event.maxParticipants - event.participantCount;
-                                        const isFullyBooked = availableSpots === 0;
-                                        const startDate = new Date(event.startTime);
-                                        const isPastEvent = today.toISOString() >= startDate.toISOString();
-                                        const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                                        return (jsxs("div", { style: {
-                                                position: "relative",
-                                                border: "1px solid var(--bw-border-color)",
-                                                backgroundColor: "var(--bw-surface-color)",
-                                                borderRadius: "var(--bw-border-radius)",
-                                                padding: "16px 10px",
-                                                transition: "all 0.2s ease",
-                                                fontFamily: "var(--bw-font-family)",
-                                                opacity: isDisabled ? 0.3 : 1,
-                                                filter: isDisabled ? "grayscale(40%)" : "none",
-                                                cursor: isDisabled ? "not-allowed" : "pointer",
-                                            }, onClick: () => {
-                                                if (!isDisabled) {
-                                                    handleEventInstanceSelect(event);
-                                                }
-                                            }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsx("div", { style: {
-                                                        position: "absolute",
-                                                        inset: 0,
-                                                        backgroundColor: "rgba(15, 23, 42, 0.8)",
-                                                        borderRadius: "var(--bw-border-radius)",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                    }, children: jsx("div", { style: {
-                                                            width: "32px",
-                                                            height: "32px",
-                                                            color: "var(--bw-highlight-color)",
-                                                            opacity: 0.8,
-                                                            fontSize: "32px",
-                                                        }, children: spinner() }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), jsxs("div", { style: {
-                                                        display: "flex",
-                                                        justifyContent: "space-between",
-                                                        width: "100%",
-                                                        alignItems: "flex-start",
-                                                        gap: "12px",
-                                                        marginBottom: "4px",
-                                                    }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
-                                                                        fontSize: "16px",
-                                                                        transition: "all 0.2s ease",
-                                                                        borderRadius: "var(--bw-border-radius-small)",
-                                                                        borderTop: "4px solid var(--bw-border-color)",
-                                                                        border: "1px solid var(--bw-border-color)",
-                                                                        width: "40px",
-                                                                        height: "40px",
-                                                                        display: "flex",
-                                                                        alignItems: "center",
-                                                                        justifyContent: "center",
-                                                                        fontWeight: 700,
-                                                                        color: "var(--bw-text-color)",
-                                                                        backgroundColor: "var(--bw-background-color)",
-                                                                    }, children: startDate.getDate() }), jsxs("div", { style: {
-                                                                        fontSize: "16px",
-                                                                        color: "var(--bw-text-color)",
-                                                                        display: "flex",
-                                                                        flexDirection: "column",
-                                                                        alignItems: "flex-start",
-                                                                        justifyContent: "flex-start",
-                                                                        lineHeight: 1.25,
-                                                                    }, children: [jsxs("div", { children: [jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
-                                                                                    formatWeekday(event.endTime, timezone, locale) && (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), jsx("div", { children: formatWeekday(event.startTime, timezone, locale) ===
-                                                                                formatWeekday(event.endTime, timezone, locale) ? (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), jsxs("span", { style: {
-                                                                        fontSize: "12px",
-                                                                        fontWeight: 400,
-                                                                        color: "var(--bw-text-muted)",
-                                                                        marginLeft: "6px",
-                                                                        backgroundColor: "rgba(0, 0, 0, 0.05)",
-                                                                        whiteSpace: "nowrap",
-                                                                        padding: "2px 6px",
-                                                                        borderRadius: "var(--bw-border-radius-small)",
-                                                                    }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), jsx("div", { style: {
-                                                                textAlign: "right",
-                                                                display: "flex",
-                                                                flexDirection: "column",
-                                                                alignItems: "flex-end",
-                                                            }, children: jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (jsx("h4", { style: {
-                                                        fontSize: "16px",
-                                                        fontWeight: 600,
-                                                        color: "var(--bw-text-color)",
-                                                        lineHeight: 1.25,
-                                                        margin: "0 0 2px 0",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        gap: "8px",
-                                                        maxWidth: "230px",
-                                                    }, children: event.name }))] }, event.id));
-                                    }) }) })] }, key));
-                }) }) }) }));
+    return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxs("div", { style: { padding: "20px 10px" }, children: [jsx(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+                        const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
+                        return (jsxs(Fragment$1, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsx("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), jsx(Accordion, { title: label, priceInfo: jsx("div", { style: {
+                                            fontSize: "16px",
+                                            fontWeight: 500,
+                                            marginLeft: "auto",
+                                            padding: "4px 8px",
+                                            borderRadius: "var(--bw-border-radius-small)",
+                                            backgroundColor: monthPriceDisplayInfo
+                                                ? monthPriceDisplayInfo.backgroundColor
+                                                : "#14532d",
+                                            color: monthPriceDisplayInfo
+                                                ? monthPriceDisplayInfo.textColor
+                                                : "#4ade80",
+                                            boxShadow: monthPriceDisplayInfo
+                                                ? "0 2px 4px rgba(0, 0, 0, 0.2)"
+                                                : undefined,
+                                        }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
+                                            const availableSpots = event.maxParticipants - event.participantCount;
+                                            const isFullyBooked = availableSpots === 0;
+                                            const startDate = new Date(event.startTime);
+                                            const isPastEvent = today.toISOString() >= startDate.toISOString();
+                                            const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
+                                            return (jsxs("div", { style: {
+                                                    position: "relative",
+                                                    border: "1px solid var(--bw-border-color)",
+                                                    backgroundColor: "var(--bw-surface-color)",
+                                                    borderRadius: "var(--bw-border-radius)",
+                                                    padding: "16px 10px",
+                                                    transition: "all 0.2s ease",
+                                                    fontFamily: "var(--bw-font-family)",
+                                                    opacity: isDisabled ? 0.3 : 1,
+                                                    filter: isDisabled ? "grayscale(40%)" : "none",
+                                                    cursor: isDisabled ? "not-allowed" : "pointer",
+                                                }, onClick: () => {
+                                                    if (!isDisabled) {
+                                                        handleEventInstanceSelect(event);
+                                                    }
+                                                }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsx("div", { style: {
+                                                            position: "absolute",
+                                                            inset: 0,
+                                                            backgroundColor: "rgba(15, 23, 42, 0.8)",
+                                                            borderRadius: "var(--bw-border-radius)",
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            justifyContent: "center",
+                                                        }, children: jsx("div", { style: {
+                                                                width: "32px",
+                                                                height: "32px",
+                                                                color: "var(--bw-highlight-color)",
+                                                                opacity: 0.8,
+                                                                fontSize: "32px",
+                                                            }, children: spinner() }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), jsxs("div", { style: {
+                                                            display: "flex",
+                                                            justifyContent: "space-between",
+                                                            width: "100%",
+                                                            alignItems: "flex-start",
+                                                            gap: "12px",
+                                                            marginBottom: "4px",
+                                                        }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
+                                                                            fontSize: "16px",
+                                                                            transition: "all 0.2s ease",
+                                                                            borderRadius: "var(--bw-border-radius-small)",
+                                                                            borderTop: "4px solid var(--bw-border-color)",
+                                                                            border: "1px solid var(--bw-border-color)",
+                                                                            width: "40px",
+                                                                            height: "40px",
+                                                                            display: "flex",
+                                                                            alignItems: "center",
+                                                                            justifyContent: "center",
+                                                                            fontWeight: 700,
+                                                                            color: "var(--bw-text-color)",
+                                                                            backgroundColor: "var(--bw-background-color)",
+                                                                        }, children: startDate.getDate() }), jsxs("div", { style: {
+                                                                            fontSize: "16px",
+                                                                            color: "var(--bw-text-color)",
+                                                                            display: "flex",
+                                                                            flexDirection: "column",
+                                                                            alignItems: "flex-start",
+                                                                            justifyContent: "flex-start",
+                                                                            lineHeight: 1.25,
+                                                                        }, children: [jsxs("div", { children: [jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
+                                                                                        formatWeekday(event.endTime, timezone, locale) && (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), jsx("div", { children: formatWeekday(event.startTime, timezone, locale) ===
+                                                                                    formatWeekday(event.endTime, timezone, locale) ? (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), jsxs("span", { style: {
+                                                                            fontSize: "12px",
+                                                                            fontWeight: 400,
+                                                                            color: "var(--bw-text-muted)",
+                                                                            marginLeft: "6px",
+                                                                            backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                                                            whiteSpace: "nowrap",
+                                                                            padding: "2px 6px",
+                                                                            borderRadius: "var(--bw-border-radius-small)",
+                                                                        }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), jsx("div", { style: {
+                                                                    textAlign: "right",
+                                                                    display: "flex",
+                                                                    flexDirection: "column",
+                                                                    alignItems: "flex-end",
+                                                                }, children: jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (jsx("h4", { style: {
+                                                            fontSize: "16px",
+                                                            fontWeight: 600,
+                                                            color: "var(--bw-text-color)",
+                                                            lineHeight: 1.25,
+                                                            margin: "0 0 2px 0",
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: "8px",
+                                                            maxWidth: "230px",
+                                                        }, children: event.name }))] }, event.id));
+                                        }) }) })] }, key));
+                    }) })] }) }));
 }
 
 function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, isLoadingEventDetails = false, isLoadingShowAll = false, isLoading = false, }) {
@@ -15402,7 +15589,7 @@ function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, is
     const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
     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 && (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 }) }) }))] }) }));
+    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: [jsx(FlowProgress, { currentStep: "upsells", hasUpsellsStep: true }), 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 }) }) }))] }) }));
 }
 
 /**
@@ -15543,6 +15730,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const [bookingPersistedState, setBookingPersistedState] = useState(null);
     const [isLoadingUpsells, setIsLoadingUpsells] = useState(false);
     const [tempParticipantCount, setTempParticipantCount] = useState(1); // Used during upsell step
+    const hasUpsellsFlowStep = upsells.length > 0 || currentStep === "upsells";
     // State for upcoming events (next-events view mode)
     const [upcomingEvents, setUpcomingEvents] = useState([]);
     const [showingPreview, setShowingPreview] = useState(true);
@@ -15669,6 +15857,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                         ...(data.mollieProfileId ? { mollieProfileId: data.mollieProfileId } : {}),
                         ...(data.mollieTestmode !== undefined ? { mollieTestmode: data.mollieTestmode } : {}),
                         roundPricesEnabled: data.roundPricesEnabled ?? true,
+                        widgetPaymentMode: data.widgetPaymentMode ?? "all",
                     });
                 }
             }
@@ -16033,6 +16222,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     mollieProfileId: data.mollieProfileId,
                     mollieTestmode: data.mollieTestmode,
                     roundPricesEnabled: data.roundPricesEnabled ?? true,
+                    widgetPaymentMode: data.widgetPaymentMode ?? "all",
                 });
             }
             if (data.stripePublishableKey) {
@@ -16093,6 +16283,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     mollieProfileId: data.mollieProfileId,
                     mollieTestmode: data.mollieTestmode,
                     roundPricesEnabled: data.roundPricesEnabled ?? true,
+                    widgetPaymentMode: data.widgetPaymentMode ?? "all",
                 });
                 if (!stripePromise && data.stripePublishableKey) {
                     const stripeOptions = {
@@ -16601,7 +16792,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, isOpen: currentStep === "eventInstances", onClose: () => {
                                 setShowingPreview(true);
                                 setCurrentStep("eventTypes");
-                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
@@ -16644,7 +16835,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, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), 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, hasUpsellsStep: hasUpsellsFlowStep })), 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);
@@ -16705,7 +16896,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         };
     };
     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, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), 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, hasUpsellsStep: hasUpsellsFlowStep })), 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);