@bigz-app/booking-widget 1.4.0 → 1.4.1

package/dist/booking-widget.js

@@ -294,6 +294,7 @@
       "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",
@@ -347,6 +348,10 @@
       "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:",
@@ -479,6 +484,7 @@
       "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",
@@ -504,6 +510,9 @@
       "promo.giftCode": "Dein Geschenk-Code",
       "promo.copied": "Kopiert!",
       "promo.copy": "Kopieren",
+      "trust.securePayment": "Sichere Zahlung",
+      "trust.paypal": "PayPal",
+      "trust.stripe": "Stripe",
   };
 
   const en = {
@@ -574,6 +583,7 @@
       "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",
@@ -627,6 +637,10 @@
       "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:",
@@ -759,6 +773,7 @@
       "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",
@@ -784,6 +799,9 @@
       "promo.giftCode": "Your gift code",
       "promo.copied": "Copied!",
       "promo.copy": "Copy",
+      "trust.securePayment": "Secure payment",
+      "trust.paypal": "PayPal",
+      "trust.stripe": "Stripe",
   };
 
   const es = {
@@ -854,6 +872,7 @@
       "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",
@@ -907,6 +926,10 @@
       "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:",
@@ -1039,6 +1062,7 @@
       "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",
@@ -1064,6 +1088,9 @@
       "promo.giftCode": "Tu codigo de regalo",
       "promo.copied": "Copiado!",
       "promo.copy": "Copiar",
+      "trust.securePayment": "Pago seguro",
+      "trust.paypal": "PayPal",
+      "trust.stripe": "Stripe",
   };
 
   const pt = {
@@ -1134,6 +1161,7 @@
       "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",
@@ -1187,6 +1215,10 @@
       "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:",
@@ -1319,6 +1351,7 @@
       "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",
@@ -1344,6 +1377,9 @@
       "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 = {
@@ -1414,6 +1450,7 @@
       "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",
@@ -1467,6 +1504,10 @@
       "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:",
@@ -1599,6 +1640,7 @@
       "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",
@@ -1624,6 +1666,9 @@
       "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"];
@@ -7390,6 +7435,55 @@
                   }, 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 (u$2("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: [u$2("div", { style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      marginBottom: "10px",
+                      fontFamily: "var(--bw-font-family)",
+                      gap: "8px",
+                  }, children: steps.map((step, index) => (u$2("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))) }), u$2("div", { style: {
+                      width: "100%",
+                      height: "8px",
+                      borderRadius: "999px",
+                      backgroundColor: "var(--bw-background-color)",
+                      border: "1px solid var(--bw-border-color)",
+                      overflow: "hidden",
+                  }, children: u$2("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" }) => (u$2("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: u$2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
   function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVoucherValidated, appliedVouchers, onRemoveVoucher, disabled = false, }) {
@@ -11604,6 +11698,7 @@
       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;
@@ -11617,6 +11712,7 @@
       const [paymentOption, setPaymentOption] = d$1(() => persistedState?.paymentOption ?? "deposit");
       // Per-participant upsell selections: participantIndex -> array of upsell package IDs
       const [participantUpsells, setParticipantUpsells] = d$1(() => persistedState?.participantUpsells ?? {});
+      const [showPaymentValidationHint, setShowPaymentValidationHint] = d$1(false);
       const wasOpenRef = A$2(false);
       const form = useForm({
           resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
@@ -11740,12 +11836,22 @@
       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;
+      y$1(() => {
+          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 = q$2(() => {
@@ -11904,7 +12010,39 @@
           onClose();
       };
       // Footer navigation
-      const footerContent = (u$2(k$3, { children: [u$2("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" && (u$2("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);
+          }
+      };
+      y$1(() => {
+          if (showPaymentValidationHint && canContinueToPayment) {
+              setShowPaymentValidationHint(false);
+          }
+      }, [showPaymentValidationHint, canContinueToPayment]);
+      const footerContent = (u$2("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "6px" }, children: [checkoutStep === "details" && (u$2("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") })), u$2("div", { style: { display: "flex", gap: "12px", width: "100%" }, children: [u$2("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" && (u$2("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 (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.notPossible"), children: u$2("div", { style: {
                       display: "flex",
@@ -11921,7 +12059,7 @@
                                   fontFamily: "var(--bw-font-family)",
                               }, children: t$1("booking.notPossible") }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.notPossibleMessage") })] }) }) }));
       }
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [checkoutStep === "details" && (u$2(k$3, { children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), u$2("div", { style: {
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [u$2(FlowProgress, { currentStep: checkoutStep === "details" ? "details" : "payment", hasUpsellsStep: upsells.length > 0 }), checkoutStep === "details" && (u$2(k$3, { children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), u$2("div", { style: {
                                           display: "grid",
                                           gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
                                           gap: "12px",
@@ -12047,7 +12185,7 @@
                                                               }, children: t$1("summary.giftCard", { code: giftCard.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { style: {
                                                   borderTop: "1px solid var(--bw-border-color)",
                                                   paddingTop: "12px",
-                                              }, children: [hasDepositOption && (u$2("div", { style: {
+                                              }, children: [hasDepositChoice && (u$2("div", { style: {
                                                           display: "flex",
                                                           justifyContent: "space-between",
                                                           alignItems: "center",
@@ -12057,7 +12195,7 @@
                                                                   color: "var(--bw-text-muted)",
                                                                   fontFamily: "var(--bw-font-family)",
                                                                   fontWeight: 500,
-                                                              }, children: formatCurrency(totalAmount) })] })), hasDepositOption && (u$2("div", { style: {
+                                                              }, children: formatCurrency(totalAmount) })] })), hasDepositChoice && widgetPaymentMode === "all" && (u$2("div", { style: {
                                                           display: "flex",
                                                           gap: "8px",
                                                           marginBottom: "16px",
@@ -12113,19 +12251,19 @@
                                                           alignItems: "center",
                                                           fontSize: "18px",
                                                           fontWeight: 600,
-                                                      }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                      }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositChoice && paymentOption === "deposit"
                                                                   ? t$1("summary.payToday")
                                                                   : t$1("summary.totalAmount") }), u$2("span", { style: {
                                                                   color: "var(--bw-highlight-color)",
                                                                   fontFamily: "var(--bw-font-family)",
                                                                   fontWeight: 700,
-                                                              }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
+                                                              }, children: formatCurrency(paymentAmount) })] }), hasDepositChoice && paymentOption === "deposit" && (u$2("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 && (u$2("div", { style: cardStyles$1, children: u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && (systemConfig?.paymentProvider === "mollie" ? (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(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 })] })) : (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(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 && (u$2("div", { style: cardStyles$1, children: u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.depositNotConfigured") }) })), !hasPaymentProvider && !depositsOnlyBlocked && (u$2("div", { style: cardStyles$1, children: u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && !depositsOnlyBlocked && (systemConfig?.paymentProvider === "mollie" ? (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(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 })] })) : (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(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() })] })))] }))] }) }));
   }
 
   /**
@@ -12973,6 +13111,40 @@
                   } }))] }));
   };
 
+  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 (u$2("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: [u$2("span", { style: logoCellStyle, children: [u$2("span", { style: { color: "#003087", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Pay" }), u$2("span", { style: { color: "#009cde", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Pal" })] }), u$2("span", { style: logoCellStyle, children: u$2("svg", { width: "34", height: logoHeight, viewBox: "0 0 34 20", "aria-label": "Maestro", children: [u$2("circle", { cx: "13", cy: "10", r: "8", fill: "#eb001b" }), u$2("circle", { cx: "21", cy: "10", r: "8", fill: "#00a2e5", fillOpacity: "0.92" })] }) }), u$2("span", { style: logoCellStyle, children: u$2("span", { style: { color: "#1434CB", fontSize: "14px", fontStyle: "italic", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "VISA" }) }), u$2("span", { style: logoCellStyle, children: u$2("span", { style: { color: "purple", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Klarna" }) }), u$2("span", { style: logoCellStyle, children: u$2("svg", { width: "74", height: logoHeight, viewBox: "0 0 74 20", "aria-label": "Amazon Pay", children: [u$2("text", { x: "0", y: "14", fontSize: "12", fill: "#111827", fontFamily: "Arial, sans-serif", children: "amazon" }), u$2("text", { x: "45", y: "14", fontSize: "12", fill: "#111827", fontFamily: "Arial, sans-serif", children: "pay" }), u$2("path", { d: "M5 15 C17 20, 35 20, 48 15", stroke: "#f59e0b", strokeWidth: "1.6", fill: "none", strokeLinecap: "round" })] }) }), u$2("span", { style: logoCellStyle, children: [u$2("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" }), u$2("span", { style: { color: "#5f6368", fontSize: "14px", fontWeight: 600, fontFamily: "Arial, sans-serif", marginLeft: "3px", lineHeight: 1 }, children: "Pay" })] }), u$2("span", { style: logoCellStyle, children: u$2("svg", { width: "60", height: logoHeight, viewBox: "0 0 60 20", "aria-label": "Apple Pay", children: [u$2("text", { x: "0", y: "14.5", fontSize: "14.5", fill: "#111827", fontFamily: "-apple-system, BlinkMacSystemFont, Arial, sans-serif", children: "\uF8FF" }), u$2("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] = d$1(0);
@@ -14092,7 +14264,7 @@
                                           display: "flex",
                                           flexDirection: "column",
                                           justifyContent: "space-between",
-                                          height: "490px",
+                                          height: "540px",
                                       }, children: [u$2("div", { children: [u$2("h2", { className: "event-type-title", style: {
                                                           fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                           fontWeight: 700,
@@ -14162,19 +14334,9 @@
                                                               }) }) })) : (u$2("div", { className: "event-type-desc", style: {
                                                               margin: "10px 0",
                                                               height: "7.5em", // Same height as highlights
-                                                          }, children: "\u00A0" })) })] }), u$2("div", { children: [u$2("div", { children: [u$2("div", { className: "event-type-price", style: {
-                                                                  fontWeight: 700,
-                                                                  color: "var(--bw-text-color)",
-                                                                  fontFamily: "var(--bw-font-family)",
-                                                                  textAlign: "right",
-                                                              }, children: u$2("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), u$2("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: u$2("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), (() => {
+                                                          }, children: "\u00A0" })) })] }), u$2("div", { children: [(() => {
                                                       const preview = eventType.cardPreview ?? [];
+                                                      const hasMoreDates = eventType.availableInstancesCount > preview.length;
                                                       return (u$2("div", { style: {
                                                               marginTop: "12px",
                                                               borderTop: "1px solid var(--bw-border-color)",
@@ -14208,8 +14370,33 @@
                                                                               transition: "background 0.15s",
                                                                               boxSizing: "border-box",
                                                                           }, children: [u$2("span", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: "3px" }, children: [item.isSpecial && (u$2("span", { style: { color: "var(--bw-highlight-color)", fontSize: "11px", lineHeight: 1 }, children: "\u2605" })), formatWeekday(item.startTime, timezone, locale), " ", formatDate(item.startTime, timezone, locale)] }), u$2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }, children: item.name }), u$2("span", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [hasDiscount && (u$2("span", { style: { textDecoration: "line-through", opacity: 0.55, fontSize: "11px" }, children: formatCurrency(item.basePrice) })), u$2("span", { style: { fontWeight: 700, color: item.isSpecial ? "var(--bw-highlight-color)" : "var(--bw-text-color)" }, children: formatCurrency(item.price) })] }), item.specialDescription ? (u$2(InfoBadge, { text: item.specialDescription })) : (u$2("span", {}))] }, item.id));
-                                                                  }) })] }));
-                                                  })(), u$2("div", { style: {
+                                                                  }) }), hasMoreDates && (u$2("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") }))] }));
+                                                  })(), u$2("div", { style: { marginBottom: "16px" }, children: [u$2("div", { className: "event-type-price", style: {
+                                                                  fontWeight: 700,
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  textAlign: "right",
+                                                              }, children: u$2("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), u$2("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: u$2("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), u$2("div", { style: {
                                                           display: "flex",
                                                           justifyContent: "flex-end",
                                                           alignItems: "center",
@@ -14267,7 +14454,7 @@
                                               fontFamily: "var(--bw-font-family)",
                                               boxShadow: "var(--bw-shadow-md)",
                                           }, children: t("events.soldOut") }) }))] }, eventType.id));
-                      }) }) })), u$2(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
+                      }) }) })), u$2(PaymentLogosStrip, {}), u$2(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
   }
 
   const getAllocationBadgeInfo = (availableSpots, maxParticipants, t) => {
@@ -14394,7 +14581,7 @@
               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();
@@ -14460,88 +14647,88 @@
       const footerNav = (u$2("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 (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "24px" }, children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (u$2("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: [u$2("div", { style: {
-                                      display: "flex",
-                                      justifyContent: "space-between",
-                                      alignItems: "center",
-                                      padding: "16px 20px",
-                                      cursor: "pointer",
-                                      borderBottom: "1px solid var(--bw-border-color)",
-                                  }, children: [u$2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$2("div", { style: {
-                                                      width: "80px",
-                                                      height: "20px",
-                                                      backgroundColor: "var(--bw-border-color)",
-                                                      borderRadius: "var(--bw-border-radius-small)",
-                                                  } }), u$2("div", { style: {
-                                                      width: "16px",
-                                                      height: "16px",
-                                                      backgroundColor: "var(--bw-border-color)",
-                                                      borderRadius: "var(--bw-border-radius-small)",
-                                                  } })] }), u$2("div", { style: {
-                                              width: "70px",
-                                              height: "16px",
-                                              backgroundColor: "var(--bw-highlight-color)",
-                                              opacity: 0.3,
-                                              borderRadius: "var(--bw-border-radius-small)",
-                                          } })] }), u$2("div", { style: {
-                                      display: "flex",
-                                      flexDirection: "column",
-                                      gap: "12px",
-                                      paddingTop: "12px",
-                                      padding: "12px 20px 20px 20px",
-                                  }, children: Array.from({ length: 2 }).map((_, eventIdx) => (u$2("div", { style: {
-                                          position: "relative",
-                                          border: "1px solid var(--bw-border-color)",
-                                          backgroundColor: "var(--bw-surface-color)",
-                                          borderRadius: "var(--bw-border-radius)",
+          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "24px" }, children: [u$2(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (u$2("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: [u$2("div", { style: {
+                                          display: "flex",
+                                          justifyContent: "space-between",
+                                          alignItems: "center",
                                           padding: "16px 20px",
-                                          fontFamily: "var(--bw-font-family)",
-                                      }, children: [u$2("div", { style: {
-                                                  display: "flex",
-                                                  justifyContent: "space-between",
-                                                  width: "100%",
-                                                  alignItems: "flex-start",
-                                                  gap: "12px",
-                                                  marginBottom: "4px",
-                                              }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("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)",
-                                                              } }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [u$2("div", { style: {
-                                                                          width: "80px",
-                                                                          height: "16px",
-                                                                          backgroundColor: "var(--bw-border-color)",
-                                                                          borderRadius: "var(--bw-border-radius)",
-                                                                      } }), u$2("div", { style: {
-                                                                          width: "60px",
-                                                                          height: "14px",
-                                                                          backgroundColor: "var(--bw-border-color)",
-                                                                          borderRadius: "var(--bw-border-radius)",
-                                                                      } })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: u$2("div", { style: {
-                                                              width: "70px",
-                                                              height: "20px",
-                                                              backgroundColor: "var(--bw-highlight-color)",
-                                                              opacity: 0.3,
-                                                              borderRadius: "var(--bw-border-radius)",
-                                                          } }) })] }), u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [u$2("div", { style: {
-                                                          width: "120px",
-                                                          height: "16px",
+                                          cursor: "pointer",
+                                          borderBottom: "1px solid var(--bw-border-color)",
+                                      }, children: [u$2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$2("div", { style: {
+                                                          width: "80px",
+                                                          height: "20px",
                                                           backgroundColor: "var(--bw-border-color)",
-                                                          borderRadius: "var(--bw-border-radius)",
+                                                          borderRadius: "var(--bw-border-radius-small)",
                                                       } }), u$2("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)",
+                                                      } })] }), u$2("div", { style: {
+                                                  width: "70px",
+                                                  height: "16px",
+                                                  backgroundColor: "var(--bw-highlight-color)",
+                                                  opacity: 0.3,
+                                                  borderRadius: "var(--bw-border-radius-small)",
+                                              } })] }), u$2("div", { style: {
+                                          display: "flex",
+                                          flexDirection: "column",
+                                          gap: "12px",
+                                          paddingTop: "12px",
+                                          padding: "12px 20px 20px 20px",
+                                      }, children: Array.from({ length: 2 }).map((_, eventIdx) => (u$2("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: [u$2("div", { style: {
+                                                      display: "flex",
+                                                      justifyContent: "space-between",
+                                                      width: "100%",
+                                                      alignItems: "flex-start",
+                                                      gap: "12px",
+                                                      marginBottom: "4px",
+                                                  }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("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)",
+                                                                  } }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [u$2("div", { style: {
+                                                                              width: "80px",
+                                                                              height: "16px",
+                                                                              backgroundColor: "var(--bw-border-color)",
+                                                                              borderRadius: "var(--bw-border-radius)",
+                                                                          } }), u$2("div", { style: {
+                                                                              width: "60px",
+                                                                              height: "14px",
+                                                                              backgroundColor: "var(--bw-border-color)",
+                                                                              borderRadius: "var(--bw-border-radius)",
+                                                                          } })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: u$2("div", { style: {
+                                                                  width: "70px",
+                                                                  height: "20px",
+                                                                  backgroundColor: "var(--bw-highlight-color)",
+                                                                  opacity: 0.3,
+                                                                  borderRadius: "var(--bw-border-radius)",
+                                                              } }) })] }), u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [u$2("div", { style: {
+                                                              width: "120px",
+                                                              height: "16px",
+                                                              backgroundColor: "var(--bw-border-color)",
+                                                              borderRadius: "var(--bw-border-radius)",
+                                                          } }), u$2("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) {
@@ -14560,116 +14747,116 @@
                                   fontFamily: "var(--bw-font-family)",
                               }, children: t("instances.noAvailable") }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t("instances.noAvailableMessage") })] }) }) }));
       }
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "20px 10px" }, children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
-                      const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
-                      return (u$2(k$3, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (u$2("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), u$2(Accordion, { title: label, priceInfo: u$2("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: u$2("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 (u$2("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 && (u$2("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: u$2("div", { style: {
-                                                              width: "32px",
-                                                              height: "32px",
-                                                              color: "var(--bw-highlight-color)",
-                                                              opacity: 0.8,
-                                                              fontSize: "32px",
-                                                          }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), u$2("div", { style: {
-                                                          display: "flex",
-                                                          justifyContent: "space-between",
-                                                          width: "100%",
-                                                          alignItems: "flex-start",
-                                                          gap: "12px",
-                                                          marginBottom: "4px",
-                                                      }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("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() }), u$2("div", { style: {
-                                                                          fontSize: "16px",
-                                                                          color: "var(--bw-text-color)",
-                                                                          display: "flex",
-                                                                          flexDirection: "column",
-                                                                          alignItems: "flex-start",
-                                                                          justifyContent: "flex-start",
-                                                                          lineHeight: 1.25,
-                                                                      }, children: [u$2("div", { children: [u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
-                                                                                      formatWeekday(event.endTime, timezone, locale) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), u$2("div", { children: formatWeekday(event.startTime, timezone, locale) ===
-                                                                                  formatWeekday(event.endTime, timezone, locale) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), u$2("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")] })] }), u$2("div", { style: {
-                                                                  textAlign: "right",
-                                                                  display: "flex",
-                                                                  flexDirection: "column",
-                                                                  alignItems: "flex-end",
-                                                              }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (u$2("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 (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "20px 10px" }, children: [u$2(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+                          const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
+                          return (u$2(k$3, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (u$2("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), u$2(Accordion, { title: label, priceInfo: u$2("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: u$2("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 (u$2("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 && (u$2("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: u$2("div", { style: {
+                                                                  width: "32px",
+                                                                  height: "32px",
+                                                                  color: "var(--bw-highlight-color)",
+                                                                  opacity: 0.8,
+                                                                  fontSize: "32px",
+                                                              }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), u$2("div", { style: {
+                                                              display: "flex",
+                                                              justifyContent: "space-between",
+                                                              width: "100%",
+                                                              alignItems: "flex-start",
+                                                              gap: "12px",
+                                                              marginBottom: "4px",
+                                                          }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("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() }), u$2("div", { style: {
+                                                                              fontSize: "16px",
+                                                                              color: "var(--bw-text-color)",
+                                                                              display: "flex",
+                                                                              flexDirection: "column",
+                                                                              alignItems: "flex-start",
+                                                                              justifyContent: "flex-start",
+                                                                              lineHeight: 1.25,
+                                                                          }, children: [u$2("div", { children: [u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
+                                                                                          formatWeekday(event.endTime, timezone, locale) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), u$2("div", { children: formatWeekday(event.startTime, timezone, locale) ===
+                                                                                      formatWeekday(event.endTime, timezone, locale) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), u$2("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")] })] }), u$2("div", { style: {
+                                                                      textAlign: "right",
+                                                                      display: "flex",
+                                                                      flexDirection: "column",
+                                                                      alignItems: "flex-end",
+                                                                  }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (u$2("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, }) {
@@ -15528,7 +15715,7 @@
       const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
       const selectedCount = selectedUpsells.length;
       const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), className: buttonClassName, children: t("common.back") }), u$2("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), className: buttonClassName, children: selectedCount === 0 ? t("button.continueWithout") : t("button.continue") })] }));
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [u$2(FlowProgress, { currentStep: "upsells", hasUpsellsStep: true }), isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
   }
 
   /**
@@ -15669,6 +15856,7 @@
       const [bookingPersistedState, setBookingPersistedState] = d$1(null);
       const [isLoadingUpsells, setIsLoadingUpsells] = d$1(false);
       const [tempParticipantCount, setTempParticipantCount] = d$1(1); // Used during upsell step
+      const hasUpsellsFlowStep = upsells.length > 0 || currentStep === "upsells";
       // State for upcoming events (next-events view mode)
       const [upcomingEvents, setUpcomingEvents] = d$1([]);
       const [showingPreview, setShowingPreview] = d$1(true);
@@ -15795,6 +15983,7 @@
                           ...(data.mollieProfileId ? { mollieProfileId: data.mollieProfileId } : {}),
                           ...(data.mollieTestmode !== undefined ? { mollieTestmode: data.mollieTestmode } : {}),
                           roundPricesEnabled: data.roundPricesEnabled ?? true,
+                          widgetPaymentMode: data.widgetPaymentMode ?? "all",
                       });
                   }
               }
@@ -16159,6 +16348,7 @@
                       mollieProfileId: data.mollieProfileId,
                       mollieTestmode: data.mollieTestmode,
                       roundPricesEnabled: data.roundPricesEnabled ?? true,
+                      widgetPaymentMode: data.widgetPaymentMode ?? "all",
                   });
               }
               if (data.stripePublishableKey) {
@@ -16219,6 +16409,7 @@
                       mollieProfileId: data.mollieProfileId,
                       mollieTestmode: data.mollieTestmode,
                       roundPricesEnabled: data.roundPricesEnabled ?? true,
+                      widgetPaymentMode: data.widgetPaymentMode ?? "all",
                   });
                   if (!stripePromise && data.stripePublishableKey) {
                       const stripeOptions = {
@@ -16727,7 +16918,7 @@
                               }, isOpen: currentStep === "eventInstances", onClose: () => {
                                   setShowingPreview(true);
                                   setCurrentStep("eventTypes");
-                              }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                              }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setShowingPreview(true);
@@ -16770,7 +16961,7 @@
                                       setShouldRenderInstanceSelection(true);
                                   }
                               }, children: config.buttonText ||
-                                  (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(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 })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                  (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(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 })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setSidebarOpen(false);
@@ -16831,7 +17022,7 @@
           };
       };
       const backHandlers = getBackHandlers();
-      return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(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 })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
+      return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(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 })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
                               setIsSuccess(false);
                               setCurrentStep("eventTypes");
                               setSuccessPaymentId(null);