@bigz-app/booking-widget 1.5.1 → 1.5.2

package/dist/booking-widget.js

@@ -779,6 +779,21 @@
         "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",
@@ -1076,6 +1091,21 @@
         "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",
@@ -1373,6 +1403,21 @@
         "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",
@@ -14518,7 +14563,7 @@
                         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();
@@ -14597,6 +14642,18 @@
                             gridAutoRows: "1fr",
                         }, children: eventTypes.map((eventType) => {
                             const isAvailable = eventType.hasAvailableInstances;
+                            const hasImage = showImages && eventType.images && eventType.images.length > 0;
+                            const availabilityBadge = (u$2("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 (u$2("div", { className: "event-type-card", style: {
                                     position: "relative",
                                     backgroundColor: "var(--bw-surface-color)",
@@ -14608,17 +14665,7 @@
                                     fontFamily: "var(--bw-font-family)",
                                     cursor: isAvailable ? "pointer" : "not-allowed",
                                     opacity: isAvailable ? 1 : 0.6,
-                                }, onClick: () => isAvailable && onEventTypeSelect(eventType), children: [u$2("div", { style: { position: "absolute", top: "16px", right: "16px", zIndex: 10 }, children: u$2("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 && (u$2(k$3, { children: [u$2("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$2("div", { style: {
+                                }, onClick: () => isAvailable && onEventTypeSelect(eventType), children: [hasImage && (u$2("div", { style: { position: "absolute", top: "16px", right: "16px", zIndex: 10 }, children: availabilityBadge })), hasImage && (u$2(k$3, { children: [u$2("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$2("div", { style: {
                                                         fontSize: "13px",
                                                         color: "var(--bw-surface-color)",
                                                         fontWeight: 600,
@@ -14632,7 +14679,7 @@
                                             flexDirection: "column",
                                             justifyContent: "space-between",
                                             height: "540px",
-                                        }, children: [u$2("div", { children: [u$2("h2", { className: "event-type-title", style: {
+                                        }, children: [u$2("div", { children: [!hasImage && (u$2("div", { style: { display: "flex", justifyContent: "flex-end", margin: "0 0 8px 0" }, children: availabilityBadge })), u$2("h2", { className: "event-type-title", style: {
                                                             fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                             fontWeight: 700,
                                                             color: "var(--bw-text-color)",
@@ -14904,16 +14951,16 @@
     }
 
     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"),
@@ -15027,7 +15074,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, 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();
@@ -15212,12 +15259,13 @@
                                                         ? "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 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;
@@ -15254,7 +15302,7 @@
                                                                         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: {
+                                                                    }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.effectiveMaxParticipants ?? event.maxParticipants, t: t }), u$2("div", { style: {
                                                                     display: "flex",
                                                                     justifyContent: "space-between",
                                                                     width: "100%",
@@ -15431,18 +15479,19 @@
                 margin: "0 auto",
                 padding: "12px 16px",
                 fontFamily: "var(--bw-font-family)",
-            }, children: [u$2("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: [u$2("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" };
@@ -15456,13 +15505,9 @@
                                 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 && (u$2("div", { style: {
                                         position: "absolute",
                                         inset: 0,
@@ -15717,7 +15762,7 @@
                                         alignItems: "center",
                                         backgroundColor: "var(--bw-background-color)",
                                     }, children: [u$2("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)) }), u$2("span", { style: {
                                                 fontSize: "13px",
                                                 fontWeight: 600,
@@ -16666,6 +16711,7 @@
         const [isSuccess, setIsSuccess] = d$1(false);
         const [successPaymentId, setSuccessPaymentId] = d$1(null);
         const [systemConfig, setSystemConfig] = d$1(null);
+        const [waitlistEnabled, setWaitlistEnabled] = d$1(false);
         // When true, loadEventInstances skips the single-instance auto-select (used by handleShowAllEvents)
         const skipInstanceAutoSelectRef = A$2(false);
         // PERFORMANCE OPTIMIZATION: Lazy component loading
@@ -17159,6 +17205,7 @@
                 }
                 extractGoogleAdsConfig(data);
                 setEventInstances(data.eventInstances);
+                setWaitlistEnabled(data.waitlistEnabled ?? false);
                 if (data.paymentProvider) {
                     setSystemConfig({
                         paymentProvider: data.paymentProvider,
@@ -17727,7 +17774,7 @@
                                 }, isOpen: currentStep === "eventInstances", onClose: () => {
                                     setShowingPreview(true);
                                     setCurrentStep("eventTypes");
-                                }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId, waitlistEnabled: waitlistEnabled })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                     setIsSuccess(false);
                                     setCurrentStep("eventTypes");
                                     setShowingPreview(true);
@@ -17790,7 +17837,7 @@
                                 }, children: [isButtonBusy && u$2(Spinner, { size: 20, borderColor: "var(--bw-button-text-color, #ffffff)" }), config.buttonText ||
                                         (isDirectInstanceMode || selectedEventType?.bookingMode === "freeform"
                                             ? t("button.bookNow")
-                                            : t("button.viewDates"))] }), 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, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId })), 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, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), shouldRenderFreeformSelection && selectedEventType?.bookingMode === "freeform" && (u$2(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
+                                            : t("button.viewDates"))] }), 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, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId, waitlistEnabled: waitlistEnabled })), 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, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), shouldRenderFreeformSelection && selectedEventType?.bookingMode === "freeform" && (u$2(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
                                     setCurrentStep("eventTypes");
                                     setSidebarOpen(false);
                                     setShouldRenderFreeformSelection(false);
@@ -17815,7 +17862,7 @@
                                 }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
         }
         // Cards mode (default) - show event type selection with optional voucher card
-        const cardsView = (u$2(k$3, { children: [hasEventSelection && (u$2(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 && (u$2(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 && (u$2("div", { style: { padding: "24px", textAlign: "center" }, children: u$2("div", { style: {
+        const cardsView = (u$2(k$3, { children: [hasEventSelection && (u$2(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 && (u$2(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 && (u$2("div", { style: { padding: "24px", textAlign: "center" }, children: u$2("div", { style: {
                             display: "inline-block",
                             width: "32px",
                             height: "32px",
@@ -17856,7 +17903,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, hasUpsellsStep: hasUpsellsFlowStep, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId })), 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, 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" && (u$2(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", 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, apiBaseUrl: config.apiBaseUrl, organizationId: config.organizationId, waitlistEnabled: waitlistEnabled })), 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, 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" && (u$2(FreeformSelection, { config: config, eventType: selectedEventType, isOpen: currentStep === "freeform", onClose: () => {
                                 setCurrentStep("eventTypes");
                                 setShouldRenderFreeformSelection(false);
                             }, onSuccess: handleBookingSuccess, onError: handleBookingError, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {