@bigz-app/booking-widget 1.5.1 → 1.5.2

package/dist/index.esm.js

@@ -721,6 +721,21 @@ const es = {
     "instances.bestPrice": "¡¡¡mejor precio!!!",
     "instances.goodPrice": "buen precio",
     "instances.oclock": "",
+    // Lista de espera
+    "waitlist.joinCta": "Lista de espera",
+    "waitlist.title": "Apuntarse a la lista de espera",
+    "waitlist.subtitle": "{{name}} está agotado. Deja tus datos y te contactaremos si se libera un lugar.",
+    "waitlist.name": "Nombre",
+    "waitlist.email": "Correo electrónico",
+    "waitlist.phone": "Teléfono (opcional)",
+    "waitlist.requiredFields": "Por favor, introduce tu nombre y correo electrónico.",
+    "waitlist.join": "Apuntarse",
+    "waitlist.submitting": "Apuntando...",
+    "waitlist.cancel": "Cancelar",
+    "waitlist.submitError": "Algo salió mal. Por favor, inténtalo de nuevo.",
+    "waitlist.successTitle": "¡Estás en la lista!",
+    "waitlist.successMessage": "Eres el número {{position}} en la lista de espera. Te contactaremos si se libera un lugar.",
+    "waitlist.done": "Listo",
     // Next events preview
     "nextEvents.title": "Próximas fechas disponibles",
     "nextEvents.subtitle": "Selecciona una fecha o consulta todas las fechas disponibles",
@@ -1018,6 +1033,21 @@ const pt = {
     "instances.bestPrice": "melhor preço !!!",
     "instances.goodPrice": "bom preço",
     "instances.oclock": "",
+    // Lista de espera
+    "waitlist.joinCta": "Lista de espera",
+    "waitlist.title": "Entrar na lista de espera",
+    "waitlist.subtitle": "{{name}} está esgotado. Deixe os seus dados e entraremos em contacto se surgir uma vaga.",
+    "waitlist.name": "Nome",
+    "waitlist.email": "E-mail",
+    "waitlist.phone": "Telefone (opcional)",
+    "waitlist.requiredFields": "Por favor, introduza o seu nome e e-mail.",
+    "waitlist.join": "Inscrever-se",
+    "waitlist.submitting": "A inscrever...",
+    "waitlist.cancel": "Cancelar",
+    "waitlist.submitError": "Algo correu mal. Por favor, tente novamente.",
+    "waitlist.successTitle": "Está na lista!",
+    "waitlist.successMessage": "É o número {{position}} na lista de espera. Entraremos em contacto se surgir uma vaga.",
+    "waitlist.done": "Concluído",
     // Next events preview
     "nextEvents.title": "Próximas datas disponíveis",
     "nextEvents.subtitle": "Selecione uma data ou veja todas as datas disponíveis",
@@ -1315,6 +1345,21 @@ const sv = {
     "instances.bestPrice": "bästa pris !!!",
     "instances.goodPrice": "bra pris",
     "instances.oclock": "",
+    // Väntelista
+    "waitlist.joinCta": "Ställ dig i kö",
+    "waitlist.title": "Ställ dig i kö",
+    "waitlist.subtitle": "{{name}} är fullbokat. Lämna dina uppgifter så kontaktar vi dig om en plats blir ledig.",
+    "waitlist.name": "Namn",
+    "waitlist.email": "E-post",
+    "waitlist.phone": "Telefon (valfritt)",
+    "waitlist.requiredFields": "Ange ditt namn och din e-postadress.",
+    "waitlist.join": "Ställ dig i kö",
+    "waitlist.submitting": "Anmäler...",
+    "waitlist.cancel": "Avbryt",
+    "waitlist.submitError": "Något gick fel. Försök igen.",
+    "waitlist.successTitle": "Du står i kön!",
+    "waitlist.successMessage": "Du är nummer {{position}} på väntelistan. Vi hör av oss om en plats blir ledig.",
+    "waitlist.done": "Klar",
     // Next events preview
     "nextEvents.title": "Nästa tillgängliga datum",
     "nextEvents.subtitle": "Välj ett datum eller visa alla tillgängliga datum",
@@ -14392,7 +14437,7 @@ function InfoBadge({ text }) {
                     pointerEvents: "none",
                 }, children: text }))] }));
 }
-function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview, isLoading = false, skeletonCount = 4, showVoucherAttachment = false, onVoucherClick, }) {
+function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview, isLoading = false, skeletonCount = 4, showVoucherAttachment = false, onVoucherClick, showImages = true, }) {
     const t = useTranslations();
     const { locale } = useLocale();
     const timezone = useTimezone();
@@ -14471,6 +14516,18 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                         gridAutoRows: "1fr",
                     }, children: eventTypes.map((eventType) => {
                         const isAvailable = eventType.hasAvailableInstances;
+                        const hasImage = showImages && eventType.images && eventType.images.length > 0;
+                        const availabilityBadge = (jsx("div", { style: {
+                                padding: "4px 8px",
+                                borderRadius: "var(--bw-border-radius-small)",
+                                fontSize: "12px",
+                                fontWeight: 600,
+                                color: "#ffffff",
+                                fontFamily: "var(--bw-font-family)",
+                                backgroundColor: isAvailable
+                                    ? "var(--bw-success-color)"
+                                    : "var(--bw-error-color)",
+                            }, children: isAvailable ? t("events.spotsAvailable") : t("events.soldOut") }));
                         return (jsxs("div", { className: "event-type-card", style: {
                                 position: "relative",
                                 backgroundColor: "var(--bw-surface-color)",
@@ -14482,17 +14539,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                 fontFamily: "var(--bw-font-family)",
                                 cursor: isAvailable ? "pointer" : "not-allowed",
                                 opacity: isAvailable ? 1 : 0.6,
-                            }, onClick: () => isAvailable && onEventTypeSelect(eventType), children: [jsx("div", { style: { position: "absolute", top: "16px", right: "16px", zIndex: 10 }, children: jsx("div", { style: {
-                                            padding: "4px 8px",
-                                            borderRadius: "var(--bw-border-radius-small)",
-                                            fontSize: "12px",
-                                            fontWeight: 600,
-                                            color: "#ffffff",
-                                            fontFamily: "var(--bw-font-family)",
-                                            backgroundColor: isAvailable
-                                                ? "var(--bw-success-color)"
-                                                : "var(--bw-error-color)",
-                                        }, children: isAvailable ? t("events.spotsAvailable") : t("events.soldOut") }) }), eventType.images && eventType.images.length > 0 && (jsxs(Fragment, { children: [jsx("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: jsx("div", { style: {
+                            }, onClick: () => isAvailable && onEventTypeSelect(eventType), children: [hasImage && (jsx("div", { style: { position: "absolute", top: "16px", right: "16px", zIndex: 10 }, children: availabilityBadge })), hasImage && (jsxs(Fragment, { children: [jsx("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: jsx("div", { style: {
                                                     fontSize: "13px",
                                                     color: "var(--bw-surface-color)",
                                                     fontWeight: 600,
@@ -14506,7 +14553,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                         flexDirection: "column",
                                         justifyContent: "space-between",
                                         height: "540px",
-                                    }, children: [jsxs("div", { children: [jsx("h2", { className: "event-type-title", style: {
+                                    }, children: [jsxs("div", { children: [!hasImage && (jsx("div", { style: { display: "flex", justifyContent: "flex-end", margin: "0 0 8px 0" }, children: availabilityBadge })), jsx("h2", { className: "event-type-title", style: {
                                                         fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                         fontWeight: 700,
                                                         color: "var(--bw-text-color)",
@@ -14778,16 +14825,16 @@ function WaitlistDialog({ apiBaseUrl, organizationId, eventInstanceId, eventName
 }
 
 const getAllocationBadgeInfo = (availableSpots, maxParticipants, t) => {
-    const availabilityRatio = availableSpots / maxParticipants;
-    if (availabilityRatio >= 0.6)
-        return null;
-    if (availabilityRatio === 0) {
+    if (maxParticipants <= 0 || availableSpots <= 0) {
         return {
             text: t("events.soldOut"),
             backgroundColor: "#7f1d1d",
             textColor: "#fca5a5",
         };
     }
+    const availabilityRatio = availableSpots / maxParticipants;
+    if (availabilityRatio >= 0.6)
+        return null;
     if (availabilityRatio <= 0.3) {
         return {
             text: t("instances.almostSoldOut"),
@@ -14901,7 +14948,7 @@ const PriceDisplay = ({ price, yearPrices, t }) => {
             boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
         }, children: formatCurrency(price) }));
 };
-function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, hasUpsellsStep = false, apiBaseUrl, organizationId, }) {
+function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, hasUpsellsStep = false, apiBaseUrl, organizationId, waitlistEnabled = false, }) {
     const t = useTranslations();
     const { locale } = useLocale();
     const timezone = useTimezone();
@@ -15086,12 +15133,13 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                                     ? "0 2px 4px rgba(0, 0, 0, 0.2)"
                                                     : undefined,
                                             }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
-                                                const availableSpots = event.maxParticipants - event.participantCount;
-                                                const isFullyBooked = availableSpots === 0;
+                                                const availableSpots = event.availableSpots;
                                                 const startDate = new Date(event.startTime);
                                                 const isPastEvent = today.toISOString() >= startDate.toISOString();
-                                                const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                                                const canWaitlist = isFullyBooked &&
+                                                const isUnavailable = availableSpots <= 0 || !event.bookingOpen;
+                                                const isDisabled = isUnavailable || isPastEvent;
+                                                const canWaitlist = waitlistEnabled &&
+                                                    isUnavailable &&
                                                     !isPastEvent &&
                                                     !!apiBaseUrl &&
                                                     !!organizationId;
@@ -15128,7 +15176,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                                                     color: "var(--bw-highlight-color)",
                                                                     opacity: 0.8,
                                                                     fontSize: "32px",
-                                                                }, children: spinner() }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), jsxs("div", { style: {
+                                                                }, children: spinner() }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.effectiveMaxParticipants ?? event.maxParticipants, t: t }), jsxs("div", { style: {
                                                                 display: "flex",
                                                                 justifyContent: "space-between",
                                                                 width: "100%",
@@ -15305,18 +15353,19 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
             margin: "0 auto",
             padding: "12px 16px",
             fontFamily: "var(--bw-font-family)",
-        }, children: [jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", marginBottom: "10px" }, children: events.map((event) => {
-                    const availableSpots = event.maxParticipants - event.participantCount;
-                    const isFullyBooked = availableSpots === 0;
+        }, children: [jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", marginBottom: "10px" }, children: events
+                    .filter((event) => {
                     const startDate = new Date(event.startTime);
                     const isPastEvent = today.toISOString() >= startDate.toISOString();
-                    const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                    const availabilityRatio = availableSpots / event.maxParticipants;
+                    return !isPastEvent && event.availableSpots > 0 && event.bookingOpen;
+                })
+                    .map((event) => {
+                    const availableSpots = event.availableSpots;
+                    const startDate = new Date(event.startTime);
                     const allocationBadge = (() => {
+                        const availabilityRatio = availableSpots / event.maxParticipants;
                         if (availabilityRatio >= 0.6)
                             return null;
-                        if (availabilityRatio === 0)
-                            return { text: t("events.soldOut"), backgroundColor: "#7f1d1d", textColor: "#fca5a5" };
                         if (availabilityRatio <= 0.3)
                             return { text: t("instances.almostSoldOut"), backgroundColor: "#7f1d1d", textColor: "#fca5a5" };
                         return { text: t("instances.popularDate"), backgroundColor: "#b45309", textColor: "#fbbf24" };
@@ -15330,13 +15379,9 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                             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",
+                            cursor: "pointer",
                         }, onClick: () => {
-                            if (!isDisabled) {
-                                handleEventSelect(event.id);
-                            }
+                            handleEventSelect(event.id);
                         }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsx("div", { style: {
                                     position: "absolute",
                                     inset: 0,
@@ -15591,7 +15636,7 @@ function SpecialsView({ specials, onEventSelect, isLoading = false, showSavingsA
                                     alignItems: "center",
                                     backgroundColor: "var(--bw-background-color)",
                                 }, children: [jsx("span", { style: { fontSize: "12px", color: "var(--bw-text-muted)" }, children: isFullyBooked
-                                            ? t("common.fullyBooked")
+                                            ? t("events.soldOut")
                                             : t("specials.spotsLeft").replace("{{count}}", String(special.availableSpots)) }), jsxs("span", { style: {
                                             fontSize: "13px",
                                             fontWeight: 600,
@@ -16540,6 +16585,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const [isSuccess, setIsSuccess] = useState(false);
     const [successPaymentId, setSuccessPaymentId] = useState(null);
     const [systemConfig, setSystemConfig] = useState(null);
+    const [waitlistEnabled, setWaitlistEnabled] = useState(false);
     // When true, loadEventInstances skips the single-instance auto-select (used by handleShowAllEvents)
     const skipInstanceAutoSelectRef = useRef(false);
     // PERFORMANCE OPTIMIZATION: Lazy component loading
@@ -17033,6 +17079,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             }
             extractGoogleAdsConfig(data);
             setEventInstances(data.eventInstances);
+            setWaitlistEnabled(data.waitlistEnabled ?? false);
             if (data.paymentProvider) {
                 setSystemConfig({
                     paymentProvider: data.paymentProvider,
@@ -17601,7 +17648,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, isOpen: currentStep === "eventInstances", onClose: () => {
                                 setShowingPreview(true);
                                 setCurrentStep("eventTypes");
-                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId, waitlistEnabled: waitlistEnabled })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
@@ -17664,7 +17711,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, children: [isButtonBusy && jsx(Spinner, { size: 20, borderColor: "var(--bw-button-text-color, #ffffff)" }), config.buttonText ||
                                     (isDirectInstanceMode || selectedEventType?.bookingMode === "freeform"
                                         ? t("button.bookNow")
-                                        : t("button.viewDates"))] }), shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), shouldRenderFreeformSelection && selectedEventType?.bookingMode === "freeform" && (jsx(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
+                                        : t("button.viewDates"))] }), shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId, waitlistEnabled: waitlistEnabled })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), shouldRenderFreeformSelection && selectedEventType?.bookingMode === "freeform" && (jsx(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
                                 setCurrentStep("eventTypes");
                                 setSidebarOpen(false);
                                 setShouldRenderFreeformSelection(false);
@@ -17689,7 +17736,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     // Cards mode (default) - show event type selection with optional voucher card
-    const cardsView = (jsxs(Fragment, { children: [hasEventSelection && (jsx(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, onInstancePreview: (instanceId, eventTypeId) => void handleUpcomingEventSelect(instanceId, eventTypeId), isLoading: isLoading, skeletonCount: getSkeletonCount(), showVoucherAttachment: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled && !isStandaloneVoucherMode), onVoucherClick: handleVoucherAttachmentClick })), isStandaloneVoucherMode && (jsx(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, categories: voucherCategories, systemConfig: systemConfig, isFormOpen: false, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: null, voucherPurchaseResult: null, isSuccess: false, showStandaloneCard: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled), onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => { } })), isStandaloneVoucherMode && isLoading && !voucherConfig && (jsx("div", { style: { padding: "24px", textAlign: "center" }, children: jsx("div", { style: {
+    const cardsView = (jsxs(Fragment, { children: [hasEventSelection && (jsx(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, onInstancePreview: (instanceId, eventTypeId) => void handleUpcomingEventSelect(instanceId, eventTypeId), isLoading: isLoading, skeletonCount: getSkeletonCount(), showVoucherAttachment: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled && !isStandaloneVoucherMode), onVoucherClick: handleVoucherAttachmentClick, showImages: config.showEventImages !== false })), isStandaloneVoucherMode && (jsx(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, categories: voucherCategories, systemConfig: systemConfig, isFormOpen: false, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: null, voucherPurchaseResult: null, isSuccess: false, showStandaloneCard: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled), onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => { } })), isStandaloneVoucherMode && isLoading && !voucherConfig && (jsx("div", { style: { padding: "24px", textAlign: "center" }, children: jsx("div", { style: {
                         display: "inline-block",
                         width: "32px",
                         height: "32px",
@@ -17730,7 +17777,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         };
     };
     const backHandlers = getBackHandlers();
-    return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), shouldRenderFreeformSelection && selectedEventType?.bookingMode === "freeform" && (jsx(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
+    return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId, waitlistEnabled: waitlistEnabled })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), shouldRenderFreeformSelection && selectedEventType?.bookingMode === "freeform" && (jsx(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
                             setCurrentStep("eventTypes");
                             setShouldRenderFreeformSelection(false);
                         }, onSuccess: handleBookingSuccess, onError: handleBookingError, systemConfig: systemConfig })), jsx(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {