@bigz-app/booking-widget 1.1.6 → 1.1.8

package/dist/booking-widget.js

@@ -261,7 +261,7 @@
       "error.loadBookingData": "Fehler beim Abrufen der Buchungsdaten",
       "error.processingError": "Ein Fehler ist bei der Verarbeitung aufgetreten.",
       "error.createBooking": "Fehler beim Erstellen der Buchung",
-      "error.createPaymentIntent": "Fehler beim Erstellen der Zahlungsabsicht",
+      "error.createPayment": "Fehler beim Erstellen der Zahlung",
       "error.paymentProcessing": "Fehler beim Verarbeiten der Zahlung",
       "error.paymentFailed": "Die Zahlung war nicht erfolgreich. Bitte versuche es erneut.",
       "error.paymentIncomplete": "Die Zahlung konnte nicht abgeschlossen werden. Bitte versuche es erneut.",
@@ -375,7 +375,7 @@
       "voucher.giftCardApplied": "−{{amount}} Gutschein",
       "voucher.remaining": "Rest: {{amount}}",
       "voucher.remove": "Entfernen",
-      "voucher.alreadyHasDiscount": "Es wurde bereits ein Rabattcode angewendet. Du kannst weitere Gutscheine hinzufügen.",
+      "voucher.alreadyHasDiscount": "Du kannst weitere Gutscheine hinzufügen.",
       // Booking success
       "success.title": "Reservierung erfolgreich!",
       "success.bookingDetails": "Buchungsdetails",
@@ -470,7 +470,7 @@
       "error.loadBookingData": "Error fetching booking data",
       "error.processingError": "An error occurred during processing.",
       "error.createBooking": "Error creating booking",
-      "error.createPaymentIntent": "Error creating payment intent",
+      "error.createPayment": "Error creating payment",
       "error.paymentProcessing": "Error processing payment",
       "error.paymentFailed": "The payment was not successful. Please try again.",
       "error.paymentIncomplete": "The payment could not be completed. Please try again.",
@@ -679,7 +679,7 @@
       "error.loadBookingData": "Error al obtener datos de la reserva",
       "error.processingError": "Ocurrió un error durante el procesamiento.",
       "error.createBooking": "Error al crear la reserva",
-      "error.createPaymentIntent": "Error al crear la intención de pago",
+      "error.createPayment": "Error al crear el pago",
       "error.paymentProcessing": "Error al procesar el pago",
       "error.paymentFailed": "El pago no fue exitoso. Por favor, inténtalo de nuevo.",
       "error.paymentIncomplete": "El pago no pudo completarse. Por favor, inténtalo de nuevo.",
@@ -888,7 +888,7 @@
       "error.loadBookingData": "Erro ao obter dados da reserva",
       "error.processingError": "Ocorreu um erro durante o processamento.",
       "error.createBooking": "Erro ao criar reserva",
-      "error.createPaymentIntent": "Erro ao criar intenção de pagamento",
+      "error.createPayment": "Erro ao criar pagamento",
       "error.paymentProcessing": "Erro ao processar pagamento",
       "error.paymentFailed": "O pagamento não foi bem-sucedido. Por favor, tente novamente.",
       "error.paymentIncomplete": "O pagamento não pôde ser concluído. Por favor, tente novamente.",
@@ -1097,7 +1097,7 @@
       "error.loadBookingData": "Fel vid hämtning av bokningsdata",
       "error.processingError": "Ett fel uppstod vid bearbetningen.",
       "error.createBooking": "Fel vid skapande av bokning",
-      "error.createPaymentIntent": "Fel vid skapande av betalningsavsikt",
+      "error.createPayment": "Fel vid skapande av betalning",
       "error.paymentProcessing": "Fel vid bearbetning av betalning",
       "error.paymentFailed": "Betalningen lyckades inte. Försök igen.",
       "error.paymentIncomplete": "Betalningen kunde inte slutföras. Försök igen.",
@@ -4497,6 +4497,108 @@
   // Chevron Right icon - used for carousel navigation
   const IconChevronRight = ({ size = 20, color = "white", className, }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: u$2("polyline", { points: "9 18 15 12 9 6" }) }));
 
+  function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, upsellSelections = [], }) {
+      const t = useTranslations();
+      const [isLoading, setIsLoading] = d$1(false);
+      const [error, setError] = d$1(null);
+      const handleBooking = async () => {
+          setIsLoading(true);
+          setError(null);
+          try {
+              const requestData = {
+                  eventInstanceId: config.eventInstanceId || eventDetails.id,
+                  organizationId: config.organizationId,
+                  participants: formData.participants.filter((p) => p.name?.trim()),
+                  discountCode: discountCode?.code,
+                  giftCardCodes: giftCards.map((gc) => gc.code),
+                  customerName: formData.customerName?.trim(),
+                  customerEmail: formData.customerEmail?.trim(),
+                  customerPhone: formData.customerPhone?.trim(),
+                  comment: formData.comment?.trim(),
+                  paymentMethod: "gift_card",
+                  ...(upsellSelections.length > 0 && { upsellSelections }),
+              };
+              const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-gift-card-booking"), {
+                  method: "POST",
+                  headers: createApiHeaders(config),
+                  body: JSON.stringify(createRequestBody(config, requestData)),
+              });
+              const data = await response.json();
+              if (response.ok) {
+                  onSuccess({
+                      booking: data.booking,
+                      order: data.order,
+                      giftCardRedemptions: data.giftCardRedemptions,
+                  });
+              }
+              else {
+                  setError(data.error || t("error.createBooking"));
+                  onError(data.error || t("error.createBooking"));
+              }
+          }
+          catch (err) {
+              setError(err.message || t("error.createBooking"));
+              onError(err.message || t("error.createBooking"));
+          }
+          finally {
+              setIsLoading(false);
+          }
+      };
+      const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
+      return (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
+                      backgroundColor: "rgba(var(--bw-success-color), 0.15)",
+                      border: "1px solid rgba(var(--bw-success-color), 0.4)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "16px",
+                  }, children: [u$2("div", { style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                              marginBottom: "8px",
+                              color: "var(--bw-success-color)",
+                              fontFamily: "var(--bw-font-family)",
+                              fontWeight: 600,
+                          }, children: ["\uD83C\uDF81 ", t("payment.giftCardCovered")] }), u$2("div", { style: {
+                              fontSize: "16px",
+                              color: "var(--bw-text-muted)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: t("payment.giftCardBalance", { amount: formatCurrency(totalGiftCardAmount) }) })] }), error && (u$2("div", { style: {
+                      backgroundColor: "rgba(var(--bw-error-color), 0.15)",
+                      border: "1px solid rgba(var(--bw-error-color), 0.4)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "16px",
+                      color: "var(--bw-error-color)",
+                      fontSize: "16px",
+                      fontFamily: "var(--bw-font-family)",
+                  }, children: ["\u26A0\uFE0F ", error] })), u$2("button", { type: "button", onClick: handleBooking, disabled: isLoading, style: {
+                      width: "100%",
+                      padding: "12px 24px",
+                      backgroundColor: "var(--bw-highlight-color)",
+                      color: "#ffffff",
+                      border: "none",
+                      borderRadius: "var(--bw-border-radius)",
+                      fontSize: "16px",
+                      fontWeight: 600,
+                      fontFamily: "var(--bw-font-family)",
+                      transition: "all 0.2s ease",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "8px",
+                      cursor: isLoading ? "not-allowed" : "pointer",
+                      opacity: isLoading ? 0.6 : 1,
+                  }, children: isLoading ? (u$2(k$3, { children: [spinner("#ffffff"), t("button.creatingBooking")] })) : (t("button.bookWithGiftCard")) })] }));
+  }
+  /**
+   * Calculate whether gift cards fully cover the order after discounts.
+   */
+  function isGiftCardFullyCovered(giftCards, eventPrice, participantCount, discountAmount) {
+      const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
+      const baseTotal = eventPrice * participantCount;
+      const amountAfterDiscount = Math.max(0, baseTotal - discountAmount);
+      return totalGiftCardAmount >= amountAfterDiscount && amountAfterDiscount > 0;
+  }
+
   const mollieLocaleMap = {
       de: "de_DE",
       en: "en_US",
@@ -4557,13 +4659,8 @@
       const mollieRef = A$2(null);
       const cardFormRef = A$2(null);
       const cardContainerRef = A$2(null);
-      const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
-      const baseTotal = eventDetails?.price
-          ? eventDetails.price * (formData.participants?.filter((p) => p.name?.trim()).length || 0)
-          : 0;
-      const discountAmount = discountCode?.discountAmount || 0;
-      const amountAfterDiscount = Math.max(0, baseTotal - discountAmount);
-      const isFullyCoveredByGiftCards = totalGiftCardAmount >= amountAfterDiscount && amountAfterDiscount > 0;
+      const participantCount = formData.participants?.filter((p) => p.name?.trim()).length || 0;
+      const isFullyCoveredByGiftCards = isGiftCardFullyCovered(giftCards, eventDetails?.price || 0, participantCount, discountCode?.discountAmount || 0);
       const isCreditCard = selectedMethod === "creditcard";
       y$1(() => {
           if (isFullyCoveredByGiftCards)
@@ -4670,7 +4767,7 @@
           };
       }, [isCreditCard, mollieProfileId, mollieTestmode, isFullyCoveredByGiftCards]);
       if (isFullyCoveredByGiftCards && totalAmount <= 0) {
-          return null;
+          return (u$2(GiftCardOnlyBooking, { config: config, eventDetails: eventDetails, formData: formData, discountCode: discountCode, giftCards: giftCards, onSuccess: _onSuccess, onError: onError, upsellSelections: upsellSelections }));
       }
       const validateBeforePayment = () => {
           const participantCount = formData.participants.filter((p) => p.name?.trim()).length;
@@ -4712,7 +4809,7 @@
               }
               const { token, error: tokenError } = await mollieRef.current.createToken();
               if (tokenError || !token) {
-                  setPaymentError(tokenError?.message || t("error.createPaymentIntent"));
+                  setPaymentError(tokenError?.message || t("error.createPayment"));
                   return;
               }
               const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-mollie-payment"), {
@@ -4728,8 +4825,8 @@
                   _onSuccess({ paymentIntent: { id: data.molliePaymentId } });
               }
               else {
-                  setPaymentError(data.error || t("error.createPaymentIntent"));
-                  onError(data.error || t("error.createPaymentIntent"));
+                  setPaymentError(data.error || t("error.createPayment"));
+                  onError(data.error || t("error.createPayment"));
               }
           }
           catch (err) {
@@ -4761,8 +4858,8 @@
                   window.location.href = data.checkoutUrl;
               }
               else {
-                  setPaymentError(data.error || t("error.createPaymentIntent"));
-                  onError(data.error || t("error.createPaymentIntent"));
+                  setPaymentError(data.error || t("error.createPayment"));
+                  onError(data.error || t("error.createPayment"));
               }
           }
           catch (err) {
@@ -6259,106 +6356,6 @@
 
   var reactStripe_umdExports = reactStripe_umd.exports;
 
-  // Component for bookings fully covered by gift cards (no Stripe payment needed)
-  function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, upsellSelections = [], }) {
-      const t = useTranslations();
-      const [isLoading, setIsLoading] = d$1(false);
-      const [error, setError] = d$1(null);
-      const handleBooking = async () => {
-          setIsLoading(true);
-          setError(null);
-          try {
-              const requestData = {
-                  eventInstanceId: config.eventInstanceId || eventDetails.id,
-                  organizationId: config.organizationId,
-                  participants: formData.participants.filter((p) => p.name?.trim()),
-                  discountCode: discountCode?.code,
-                  giftCardCodes: giftCards.map((gc) => gc.code),
-                  customerName: formData.customerName?.trim(),
-                  customerEmail: formData.customerEmail?.trim(),
-                  customerPhone: formData.customerPhone?.trim(),
-                  comment: formData.comment?.trim(),
-                  paymentMethod: "gift_card",
-                  ...(upsellSelections.length > 0 && { upsellSelections }),
-              };
-              const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-gift-card-booking"), {
-                  method: "POST",
-                  headers: createApiHeaders(config),
-                  body: JSON.stringify(createRequestBody(config, requestData)),
-              });
-              const data = await response.json();
-              if (response.ok) {
-                  onSuccess({
-                      booking: data.booking,
-                      order: data.order,
-                      giftCardRedemptions: data.giftCardRedemptions,
-                  });
-              }
-              else {
-                  setError(data.error || t("error.createBooking"));
-                  onError(data.error || t("error.createBooking"));
-              }
-          }
-          catch (err) {
-              setError(err.message || t("error.createBooking"));
-              onError(err.message || t("error.createBooking"));
-          }
-          finally {
-              setIsLoading(false);
-          }
-      };
-      const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
-      return (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
-                      backgroundColor: "rgba(var(--bw-success-color), 0.15)",
-                      border: "1px solid rgba(var(--bw-success-color), 0.4)",
-                      borderRadius: "var(--bw-border-radius)",
-                      padding: "16px",
-                  }, children: [u$2("div", { style: {
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "8px",
-                              marginBottom: "8px",
-                              color: "var(--bw-success-color)",
-                              fontFamily: "var(--bw-font-family)",
-                              fontWeight: 600,
-                          }, children: ["\uD83C\uDF81 ", t("payment.giftCardCovered")] }), u$2("div", { style: {
-                              fontSize: "16px",
-                              color: "var(--bw-text-muted)",
-                              fontFamily: "var(--bw-font-family)",
-                          }, children: t("payment.giftCardBalance", { amount: formatCurrency(totalGiftCardAmount) }) })] }), error && (u$2("div", { style: {
-                      backgroundColor: "rgba(var(--bw-error-color), 0.15)",
-                      border: "1px solid rgba(var(--bw-error-color), 0.4)",
-                      borderRadius: "var(--bw-border-radius)",
-                      padding: "16px",
-                      color: "var(--bw-error-color)",
-                      fontSize: "16px",
-                      fontFamily: "var(--bw-font-family)",
-                  }, children: ["\u26A0\uFE0F ", error] })), u$2("button", { type: "button", onClick: handleBooking, disabled: isLoading, style: {
-                      width: "100%",
-                      padding: "12px 24px",
-                      backgroundColor: "var(--bw-highlight-color)",
-                      color: "#ffffff",
-                      border: "none",
-                      borderRadius: "var(--bw-border-radius)",
-                      fontSize: "16px",
-                      fontWeight: 600,
-                      fontFamily: "var(--bw-font-family)",
-                      transition: "all 0.2s ease",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      gap: "8px",
-                      cursor: isLoading ? "not-allowed" : "pointer",
-                      opacity: isLoading ? 0.6 : 1,
-                  }, children: isLoading ? (u$2(k$3, { children: [u$2("div", { style: {
-                                  width: "16px",
-                                  height: "16px",
-                                  border: "2px solid #ffffff",
-                                  borderTopColor: "transparent",
-                                  borderRadius: "50%",
-                                  animation: "spin 1s linear infinite",
-                              } }), t("button.creatingBooking")] })) : (t("button.bookWithGiftCard")) })] }));
-  }
   // Inner component that uses the Stripe hooks
   function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSuccess, onError, }) {
       const t = useTranslations();
@@ -6395,7 +6392,7 @@
                   redirect: "if_required",
               });
               if (error) {
-                  console.error("[PAYMENT_FORM] Payment confirmation error:", {
+                  console.error("[STRIPE_PAYMENT] Payment confirmation error:", {
                       type: error.type,
                       code: error.code,
                       message: error.message,
@@ -6471,8 +6468,7 @@
                           ? t("button.depositAndBook")
                           : t("button.bookNow") })) })] }));
   }
-  // Main PaymentForm component that handles payment intent creation and Elements wrapper
-  function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, upsellSelections = [], }) {
+  function StripePaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, upsellSelections = [], }) {
       const t = useTranslations();
       const [clientSecret, setClientSecret] = d$1(null);
       const [paymentIntentId, setPaymentIntentId] = d$1(null);
@@ -6533,7 +6529,7 @@
           }
       }, [paymentIntentId]);
       y$1(() => {
-          const createPaymentIntent = async () => {
+          const createStripePayment = async () => {
               if (!systemConfig || !eventDetails || !formData.participants?.length) {
                   return;
               }
@@ -6574,35 +6570,38 @@
                   if (!requestData.customerEmail) {
                       throw new Error("Customer email is required");
                   }
-                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-payment-intent"), {
+                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-stripe-payment"), {
                       method: "POST",
                       headers: createApiHeaders(config),
                       body: JSON.stringify(createRequestBody(config, requestData)),
                   });
                   const data = await response.json();
                   if (response.ok) {
+                      if (data.stalePaymentIntent) {
+                          clearPersistedPaymentIntent();
+                      }
                       setClientSecret(data.clientSecret);
                       setPaymentIntentId(data.paymentIntentId);
                   }
                   else {
-                      console.error("[PAYMENT_FORM] Payment intent creation failed:", {
+                      console.error("[STRIPE_PAYMENT] Payment creation failed:", {
                           status: response.status,
                           error: data.error,
                           details: data.details,
                           requestData: { ...requestData, customerEmail: "[redacted]" },
                       });
-                      setPaymentError(data.error || t("error.createPaymentIntent"));
+                      setPaymentError(data.error || t("error.createPayment"));
                   }
               }
               catch (err) {
-                  console.error("[PAYMENT_FORM] Payment intent creation error:", err);
-                  setPaymentError(err.message || t("error.createPaymentIntent"));
+                  console.error("[STRIPE_PAYMENT] Payment creation error:", err);
+                  setPaymentError(err.message || t("error.createPayment"));
               }
               finally {
                   setIsCreatingPaymentIntent(false);
               }
           };
-          const timer = setTimeout(createPaymentIntent, 500);
+          const timer = setTimeout(createStripePayment, 500);
           return () => clearTimeout(timer);
       }, [
           systemConfig,
@@ -6610,19 +6609,15 @@
           formData.participants,
           formData.customerEmail,
           formData.customerName,
+          formData.comment,
           totalAmount,
           discountCode,
           giftCards,
           config,
           upsellSelections,
       ]);
-      const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
-      const baseTotal = eventDetails?.price
-          ? eventDetails.price * (formData.participants?.filter((p) => p.name?.trim()).length || 0)
-          : 0;
-      const discountAmount = discountCode?.discountAmount || 0;
-      const amountAfterDiscount = Math.max(0, baseTotal - discountAmount);
-      const isFullyCoveredByGiftCards = totalGiftCardAmount >= amountAfterDiscount && amountAfterDiscount > 0;
+      const participantCount = formData.participants?.filter((p) => p.name?.trim()).length || 0;
+      const isFullyCoveredByGiftCards = isGiftCardFullyCovered(giftCards, eventDetails?.price || 0, participantCount, discountCode?.discountAmount || 0);
       if (isFullyCoveredByGiftCards && totalAmount <= 0) {
           return (u$2(GiftCardOnlyBooking, { config: config, eventDetails: eventDetails, formData: formData, discountCode: discountCode, giftCards: giftCards, onSuccess: onSuccess, onError: onError, upsellSelections: upsellSelections }));
       }
@@ -11132,13 +11127,6 @@
       return Object.assign({}, ...styles.filter(Boolean));
   }
 
-  function getEffectivePrice(upsell, round) {
-      const dp = upsell.discountPercent ?? 0;
-      if (dp <= 0)
-          return upsell.price;
-      const raw = Math.round(upsell.price * (100 - dp) / 100);
-      return round ? Math.floor(raw / 100) * 100 : raw;
-  }
   // Local style aliases from shared styles
   const cardStyles = cardStyles$1.base;
   const sectionHeaderStyles = sectionStyles.header;
@@ -11150,6 +11138,11 @@
       const { locale } = useLocale();
       const timezone = useTimezone();
       const roundEnabled = systemConfig?.roundPricesEnabled !== false;
+      const roundDiscountUp = (minorUnits) => Math.ceil(minorUnits / 100) * 100;
+      const calcPercentDiscountAmount = (baseAmount, basisPoints, round) => {
+          const raw = Math.round((baseAmount * basisPoints) / 10000);
+          return round ? roundDiscountUp(raw) : raw;
+      };
       const [appliedVouchers, setAppliedVouchers] = d$1([]);
       const paymentSectionRef = A$2(null);
       // Payment option: "deposit" or "full" - only relevant when deposit is available
@@ -11171,6 +11164,8 @@
       const watchedParticipants = form.watch("participants");
       const watchedCustomerName = form.watch("customerName");
       const watchedCustomerEmail = form.watch("customerEmail");
+      const watchedComment = form.watch("comment");
+      const watchedCustomerPhone = form.watch("customerPhone");
       const customerNameError = form.formState.errors.customerName;
       const customerEmailError = form.formState.errors.customerEmail;
       const watchedAcceptTerms = form.watch("acceptTerms");
@@ -11220,7 +11215,7 @@
                   participantUpsellIds.forEach(upsellId => {
                       const upsell = upsells.find(u => u.id === upsellId);
                       if (upsell) {
-                          total += getEffectivePrice(upsell, roundEnabled);
+                          total += upsell.price;
                       }
                   });
               }
@@ -11282,6 +11277,13 @@
               participantIndices,
           }));
       }, [participantUpsells, watchedParticipants]);
+      const paymentFormData = T$2(() => ({
+          customerName: watchedCustomerName,
+          customerEmail: watchedCustomerEmail,
+          customerPhone: watchedCustomerPhone,
+          participants: watchedParticipants,
+          comment: watchedComment,
+      }), [watchedCustomerName, watchedCustomerEmail, watchedCustomerPhone, watchedParticipants, watchedComment]);
       const appliedDiscountCode = appliedVouchers.find((v) => v.type === "discount");
       const appliedGiftCards = appliedVouchers.filter((v) => v.type === "giftCard");
       const handleVoucherValidated = q$2((voucher, _error) => {
@@ -11318,7 +11320,10 @@
                       // TODO: discounts currently apply to base total only; extend when discount-applies-to-upsells flag is added
                       let newDiscountAmount = 0;
                       if (voucher.discountType === "percentage") {
-                          newDiscountAmount = Math.round((newBaseTotal * (voucher.discountValue || 0)) / 10000);
+                          newDiscountAmount = calcPercentDiscountAmount(newBaseTotal, voucher.discountValue || 0, roundEnabled);
+                          if (voucher.restrictions?.maxDiscount) {
+                              newDiscountAmount = Math.min(newDiscountAmount, voucher.restrictions.maxDiscount);
+                          }
                       }
                       else {
                           newDiscountAmount = voucher.discountValue || 0;
@@ -11496,7 +11501,7 @@
                                                                           padding: 0,
                                                                       }, children: "\u00D7" })] }))] }), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
                                                           const isSelected = (participantUpsells[index] || []).includes(upsell.id);
-                                                          return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(getEffectivePrice(upsell, roundEnabled)), ")"] })] }, upsell.id));
+                                                          return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
                                                       }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
                                                   display: "flex",
                                                   flexDirection: "column",
@@ -11528,7 +11533,7 @@
                                                               const countWithUpsell = watchedParticipants.filter((p, idx) => p.name.trim() && (participantUpsells[idx] || []).includes(upsell.id)).length;
                                                               if (countWithUpsell === 0)
                                                                   return null;
-                                                              const upsellLineTotal = getEffectivePrice(upsell, roundEnabled) * countWithUpsell;
+                                                              const upsellLineTotal = upsell.price * countWithUpsell;
                                                               return (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px" }, children: [u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }, upsell.id));
                                                           })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), u$2("span", { style: {
                                                                           fontFamily: "var(--bw-font-family)",
@@ -11671,9 +11676,9 @@
                                                   }
                                                   : null;
                                               if (systemConfig?.paymentProvider === "mollie") {
-                                                  return (u$2("div", { style: cardStyles, children: [u$2("h2", { style: { ...sectionHeaderStyles }, children: t$1("summary.payment") }), u$2(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] }));
+                                                  return (u$2("div", { style: cardStyles, children: [u$2("h2", { style: { ...sectionHeaderStyles }, 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 })] }));
                                               }
-                                              return (u$2("div", { style: cardStyles, children: [u$2("h2", { style: { ...sectionHeaderStyles }, children: t$1("summary.payment") }), u$2(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] }));
+                                              return (u$2("div", { style: cardStyles, children: [u$2("h2", { style: { ...sectionHeaderStyles }, 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() })] }));
                                           })() })] })] })] }) }));
   }
 
@@ -11807,7 +11812,7 @@
           if (targetPaymentIntentId) {
               setIsLoading(true);
               try {
-                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/get-booking-by-payment-intent"), {
+                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/get-booking-by-payment"), {
                       method: "POST",
                       headers: createApiHeaders(config),
                       body: JSON.stringify(createRequestBody(config, {
@@ -11823,7 +11828,7 @@
                           orderItems: data.orderItems,
                           purchases: data.purchases || [],
                           discount: data.discount || null,
-                          stripePaymentIntent: data.stripePaymentIntent,
+                          providerPaymentDetails: data.stripePaymentIntent,
                       });
                       setEventDetails({
                           id: data.booking.eventInstance.id,
@@ -11831,7 +11836,7 @@
                           description: data.booking.eventInstance.eventType.description,
                           startTime: data.booking.eventInstance.startTime,
                           endTime: data.booking.eventInstance.endTime,
-                          price: data.booking.eventInstance.price || 0, // Use actual event instance price
+                          price: data.booking.eventInstance.price || 0,
                       });
                       setFormData({
                           customerEmail: data.booking.customerEmail,
@@ -11839,9 +11844,7 @@
                           customerPhone: data.booking.customerPhone,
                           participants: data.booking.participants || [],
                       });
-                      // Set payment status from Stripe data or order status
                       setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
-                      // Trigger Google Ads conversion tracking if payment is successful
                       const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
                       if (finalPaymentStatus === "succeeded" &&
                           config.googleAds?.tagId &&
@@ -13791,11 +13794,10 @@
               return t("upsells.reason.notEnoughSpots", { eventTypeName: reason.eventTypeName });
       }
   }
-  function UpsellCard({ upsell, isSelected, participantCount, onSelect, roundPricesEnabled = true, }) {
+  function UpsellCard({ upsell, isSelected, participantCount, onSelect, }) {
       const t = useTranslations();
       const { locale } = useLocale();
-      const effectivePrice = getEffectiveUpsellPrice(upsell, roundPricesEnabled);
-      const totalPrice = effectivePrice * participantCount;
+      const totalPrice = upsell.price * participantCount;
       const isDisabled = !upsell.available;
       const getCardStyles = () => {
           if (isDisabled)
@@ -13813,19 +13815,12 @@
                                           weekday: "short",
                                           day: "numeric",
                                           month: "short",
-                                      })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] }))] }), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(effectivePrice), "/", t("common.perPerson")] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason
+                                      })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] }))] }), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason
                           ? formatUnavailableReason(upsell.unavailableReason, t)
                           : t("upsells.notAvailable") }) }))] }));
   }
 
-  function getEffectiveUpsellPrice(upsell, round = true) {
-      const dp = upsell.discountPercent ?? 0;
-      if (dp <= 0)
-          return upsell.price;
-      const raw = Math.round(upsell.price * (100 - dp) / 100);
-      return round ? Math.floor(raw / 100) * 100 : raw;
-  }
-  function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, isOpen, onClose, onSelect, onContinue, onBack, roundPricesEnabled = true, }) {
+  function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, isOpen, onClose, onSelect, onContinue, onBack, }) {
       const t = useTranslations();
       const selectUpsell = (upsellId) => {
           const exists = selectedUpsells.find((s) => s.upsellPackageId === upsellId);
@@ -13844,7 +13839,7 @@
           return selectedUpsells.reduce((total, selection) => {
               const upsell = upsells.find((u) => u.id === selection.upsellPackageId);
               if (upsell) {
-                  return total + getEffectiveUpsellPrice(upsell, roundPricesEnabled) * selection.quantity;
+                  return total + upsell.price * selection.quantity;
               }
               return total;
           }, 0);
@@ -13852,7 +13847,7 @@
       const selectedTotal = calculateTotal();
       const selectedCount = selectedUpsells.length;
       const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t("common.back") }), u$2("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), 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), roundPricesEnabled: roundPricesEnabled }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), u$2("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
+      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", justifyContent: "space-between", 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 }) }), u$2("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
   }
 
   // Main widget component
@@ -13898,7 +13893,7 @@
       const [isLoadingShowAll, setIsLoadingShowAll] = d$1(false);
       const [error, setError] = d$1(null);
       const [isSuccess, setIsSuccess] = d$1(false);
-      const [successPaymentIntentId, setSuccessPaymentIntentId] = d$1(null);
+      const [successPaymentId, setSuccessPaymentId] = d$1(null);
       const [systemConfig, setSystemConfig] = d$1(null);
       // PERFORMANCE OPTIMIZATION: Lazy component loading
       const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
@@ -13964,7 +13959,7 @@
               const stripeReturn = detectStripeReturn();
               if (stripeReturn) {
                   if (stripeReturn.redirectStatus === "succeeded") {
-                      setSuccessPaymentIntentId(stripeReturn.paymentIntent);
+                      setSuccessPaymentId(stripeReturn.paymentIntent);
                       setIsSuccess(true);
                   }
                   else if (stripeReturn.redirectStatus === "failed") {
@@ -14319,7 +14314,7 @@
       };
       const handleBookingSuccess = (result) => {
           setIsSuccess(true);
-          setSuccessPaymentIntentId(result.paymentIntent.id);
+          setSuccessPaymentId(result.paymentIntent.id);
           setSidebarOpen(false);
           setShouldRenderBookingForm(false);
           config.onSuccess?.(result);
@@ -14517,7 +14512,7 @@
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setShowingPreview(true);
-                                  setSuccessPaymentIntentId(null);
+                                  setSuccessPaymentId(null);
                                   setShouldRenderInstanceSelection(false);
                                   setShouldRenderUpsells(false);
                                   setShouldRenderBookingForm(false);
@@ -14528,7 +14523,7 @@
                                   url.searchParams.delete("payment_intent_client_secret");
                                   url.searchParams.delete("redirect_status");
                                   window.history.replaceState({}, "", url.toString());
-                              }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
@@ -14541,7 +14536,7 @@
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setShowingPreview(true);
-                                  setSuccessPaymentIntentId(null);
+                                  setSuccessPaymentId(null);
                                   setShouldRenderInstanceSelection(false);
                                   setShouldRenderBookingForm(false);
                                   const url = new URL(window.location.href);
@@ -14549,7 +14544,7 @@
                                   url.searchParams.delete("payment_intent_client_secret");
                                   url.searchParams.delete("redirect_status");
                                   window.history.replaceState({}, "", url.toString());
-                              }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, style: {
@@ -14578,11 +14573,11 @@
                                       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, roundPricesEnabled: systemConfig?.roundPricesEnabled !== false })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), 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 })), 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, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setSidebarOpen(false);
-                                  setSuccessPaymentIntentId(null);
+                                  setSuccessPaymentId(null);
                                   setShouldRenderInstanceSelection(false);
                                   setShouldRenderUpsells(false);
                                   setShouldRenderBookingForm(false);
@@ -14593,7 +14588,7 @@
                                   url.searchParams.delete("payment_intent_client_secret");
                                   url.searchParams.delete("redirect_status");
                                   window.history.replaceState({}, "", url.toString());
-                              }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       // Cards mode (default) - show event type selection
       const cardsView = (u$2(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
@@ -14625,10 +14620,10 @@
           };
       };
       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, roundPricesEnabled: systemConfig?.roundPricesEnabled !== false })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, 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 })), 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, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                               setIsSuccess(false);
                               setCurrentStep("eventTypes");
-                              setSuccessPaymentIntentId(null);
+                              setSuccessPaymentId(null);
                               setShouldRenderInstanceSelection(false);
                               setShouldRenderUpsells(false);
                               setShouldRenderBookingForm(false);
@@ -14639,7 +14634,7 @@
                               url.searchParams.delete("payment_intent_client_secret");
                               url.searchParams.delete("redirect_status");
                               window.history.replaceState({}, "", url.toString());
-                          }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                          }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
   }
   function UniversalBookingWidget(props) {
       const [languagePolicy, setLanguagePolicy] = d$1(null);