@bigz-app/booking-widget 1.4.2 → 1.4.3

package/dist/index.esm.js

@@ -14132,7 +14132,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                             padding: "2px 8px",
                                             borderRadius: "var(--bw-border-radius)",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: eventType.category.name }) }), jsx("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), jsxs("div", { className: "event-type-content", style: {
+                                        }, children: eventType.category.name }) }), eventType.images && eventType.images.length > 0 && (jsx("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) })), jsxs("div", { className: "event-type-content", style: {
                                         padding: "12px 18px",
                                         display: "flex",
                                         flexDirection: "column",
@@ -14275,8 +14275,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                         alignItems: "center",
                                                         marginTop: "10px",
                                                         gap: "12px",
-                                                    }, children: [(eventType.description ||
-                                                            (eventType.highlights && eventType.highlights.length > 0)) && (jsx("button", { onClick: (e) => {
+                                                    }, children: [eventType.description && (jsx("button", { onClick: (e) => {
                                                                 e.stopPropagation();
                                                                 handleShowDetails(eventType);
                                                             }, style: {
@@ -14840,55 +14839,44 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                             gap: "8px",
                         }, children: [jsx("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), t("common.reload")] })] }) }));
     }
+    const today = new Date();
     return (jsxs("div", { style: {
             maxWidth: "500px",
             margin: "0 auto",
             padding: "12px 16px",
             fontFamily: "var(--bw-font-family)",
-        }, children: [jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "10px" }, children: events.map((event) => {
+        }, 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;
                     const startDate = new Date(event.startTime);
-                    const today = new Date();
                     const isPastEvent = today.toISOString() >= startDate.toISOString();
-                    const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
-                    const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
-                    const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
-                    const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
-                    const getAvailabilityColor = () => {
-                        if (isFullAvailability)
-                            return "var(--bw-success-color)";
-                        if (isHighAvailability)
-                            return "var(--bw-warning-color)";
-                        if (isMediumAvailability)
-                            return "var(--bw-availability-medium-color, #f97316)";
-                        if (isLowAvailability)
-                            return "var(--bw-availability-low-color, #8b5cf6)";
-                        return "var(--bw-highlight-color)";
-                    };
                     const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
+                    const availabilityRatio = availableSpots / event.maxParticipants;
+                    const allocationBadge = (() => {
+                        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" };
+                    })();
+                    const sameDay = formatWeekday(event.startTime, timezone, locale) === formatWeekday(event.endTime, timezone, locale);
                     return (jsxs("div", { style: {
                             position: "relative",
-                            borderRadius: "var(--bw-border-radius-small)",
-                            padding: "0 4px",
+                            border: "1px solid var(--bw-border-color)",
+                            backgroundColor: "var(--bw-surface-color)",
+                            borderRadius: "var(--bw-border-radius)",
+                            padding: "16px 10px",
                             transition: "all 0.2s ease",
-                            border: "1px solid transparent",
                             fontFamily: "var(--bw-font-family)",
                             opacity: isDisabled ? 0.3 : 1,
-                            filter: isDisabled ? "grayscale(100%)" : "none",
+                            filter: isDisabled ? "grayscale(40%)" : "none",
                             cursor: isDisabled ? "not-allowed" : "pointer",
                         }, onClick: () => {
                             if (!isDisabled) {
                                 handleEventSelect(event.id);
                             }
-                        }, onMouseEnter: (hoverEvent) => {
-                            if (!isDisabled) {
-                                hoverEvent.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
-                                hoverEvent.currentTarget.style.borderColor = getAvailabilityColor();
-                            }
-                        }, onMouseLeave: (hoverEvent) => {
-                            hoverEvent.currentTarget.style.backgroundColor = "transparent";
-                            hoverEvent.currentTarget.style.borderColor = "transparent";
                         }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsx("div", { style: {
                                     position: "absolute",
                                     inset: 0,
@@ -14897,37 +14885,71 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                                     justifyContent: "center",
                                     backgroundColor: "rgba(15, 23, 42, 0.8)",
                                     borderRadius: "var(--bw-border-radius)",
-                                }, children: jsx("div", { style: {
-                                        width: "32px",
-                                        height: "32px",
-                                        color: "var(--bw-highlight-color)",
-                                        fontSize: "32px",
-                                        animation: "spin 1s linear infinite",
-                                    }, children: "\u27F3" }) })), jsxs("div", { style: {
-                                    minHeight: "32px",
-                                    display: "grid",
-                                    gridTemplateColumns: "1fr auto 20px",
-                                    alignItems: "center",
-                                    gap: "8px",
+                                }, children: jsx("div", { style: { width: "32px", height: "32px", color: "var(--bw-highlight-color)", opacity: 0.8, fontSize: "32px" }, children: "\u27F3" }) })), jsx("div", { style: {
+                                    display: "flex",
+                                    marginLeft: "auto",
+                                    marginTop: "-20px",
+                                    marginBottom: "4px",
+                                    borderRadius: "var(--bw-border-radius-small)",
+                                    fontFamily: "var(--bw-font-family)",
+                                    zIndex: 50,
+                                    whiteSpace: "nowrap",
+                                    width: "fit-content",
+                                    fontSize: "11px",
+                                    fontWeight: 700,
+                                    padding: "2px 8px",
+                                    backgroundColor: allocationBadge?.backgroundColor || "transparent",
+                                    color: allocationBadge?.textColor || "transparent",
+                                }, children: allocationBadge?.text || " - " }), jsxs("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
                                     width: "100%",
-                                    fontSize: "13px",
-                                    color: "var(--bw-text-muted)",
-                                }, children: [jsxs("span", { style: {
-                                            whiteSpace: "nowrap",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            gap: "3px",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            textTransform: "capitalize",
-                                        }, children: [formatWeekday(event.startTime, timezone, locale), " ", formatDate(event.startTime, timezone, locale)] }), jsx("span", { style: {
-                                            display: "flex",
-                                            alignItems: "center",
-                                            gap: "4px",
-                                            whiteSpace: "nowrap",
-                                            fontWeight: 700,
-                                            color: "var(--bw-text-color)",
-                                        }, children: event.price !== null ? formatCurrency(event.price) : t("nextEvents.priceOnRequest") }), event.notes ? jsx(InfoBadge, { text: event.notes }) : jsx("span", {})] })] }, event.id));
+                                    alignItems: "flex-start",
+                                    gap: "12px",
+                                    marginBottom: "4px",
+                                }, children: [jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
+                                                    fontSize: "16px",
+                                                    transition: "all 0.2s ease",
+                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                    borderTop: "4px solid var(--bw-border-color)",
+                                                    border: "1px solid var(--bw-border-color)",
+                                                    width: "40px",
+                                                    height: "40px",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                    fontWeight: 700,
+                                                    color: "var(--bw-text-color)",
+                                                    backgroundColor: "var(--bw-background-color)",
+                                                }, children: startDate.getDate() }), jsxs("div", { style: {
+                                                    fontSize: "16px",
+                                                    color: "var(--bw-text-color)",
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    alignItems: "flex-start",
+                                                    justifyContent: "flex-start",
+                                                    lineHeight: 1.25,
+                                                }, children: [jsxs("div", { children: [jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), !sameDay && (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), jsx("div", { children: sameDay ? (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), jsxs("span", { style: {
+                                                    fontSize: "12px",
+                                                    fontWeight: 400,
+                                                    color: "var(--bw-text-muted)",
+                                                    marginLeft: "6px",
+                                                    backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                                    whiteSpace: "nowrap",
+                                                    padding: "2px 6px",
+                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), jsxs("div", { style: { textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [jsx("span", { style: {
+                                                    display: "inline-flex",
+                                                    alignItems: "center",
+                                                    fontSize: "16px",
+                                                    fontWeight: 600,
+                                                    padding: "2px 8px",
+                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                    fontFamily: "var(--bw-font-family)",
+                                                    backgroundColor: "var(--bw-background-color)",
+                                                    color: "var(--bw-text-color)",
+                                                    border: "1px solid var(--bw-border-color)",
+                                                }, children: event.price !== null ? formatCurrency(event.price) : t("nextEvents.priceOnRequest") }), event.notes && jsx(InfoBadge, { text: event.notes })] })] })] }, event.id));
                 }) }), showAllButton && (jsx("div", { style: { textAlign: "center" }, children: jsx("button", { type: "button", disabled: isLoadingShowAll, style: {
                         display: "inline-flex",
                         alignItems: "center",
@@ -15748,6 +15770,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const [isSuccess, setIsSuccess] = useState(false);
     const [successPaymentId, setSuccessPaymentId] = useState(null);
     const [systemConfig, setSystemConfig] = useState(null);
+    // When true, loadEventInstances skips the single-instance auto-select (used by handleShowAllEvents)
+    const skipInstanceAutoSelectRef = useRef(false);
     // PERFORMANCE OPTIMIZATION: Lazy component loading
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = useState(false);
     const [shouldRenderUpsells, setShouldRenderUpsells] = useState(false);
@@ -16243,7 +16267,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 }
                 setStripePromise(loadStripe(data.stripePublishableKey, stripeOptions));
             }
-            if (data.eventInstances.length === 1) {
+            if (!skipInstanceAutoSelectRef.current && data.eventInstances.length === 1) {
                 setSelectedEventInstance(data.eventInstances[0]);
                 setCurrentStep("booking");
                 await loadEventDetails(data.eventInstances[0].id);
@@ -16638,12 +16662,30 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const handleShowAllEvents = async () => {
         setIsLoadingShowAll(true);
         try {
-            if (isSingleEventTypeMode && selectedEventType) {
+            if (isSingleEventTypeMode) {
+                // Lock in the correct render branch before any async work so no
+                // intermediate state can accidentally show the cards view.
                 setShouldRenderInstanceSelection(true);
-                setIsLoadingEventInstances(true);
-                await loadEventInstances(selectedEventType.id);
                 setCurrentStep("eventInstances");
                 setShowingPreview(false);
+                setIsLoadingEventInstances(true);
+                // Suppress the single-instance auto-select inside loadEventInstances
+                // so it doesn't override currentStep to "booking" mid-flight.
+                skipInstanceAutoSelectRef.current = true;
+                try {
+                    if (selectedEventType) {
+                        await loadEventInstances(selectedEventType.id);
+                    }
+                    else {
+                        // next-events mode skips event type loading on init.
+                        // loadEventTypes sets selectedEventType (for the sidebar title)
+                        // and internally calls loadEventInstances (auto-select suppressed).
+                        await loadEventTypes();
+                    }
+                }
+                finally {
+                    skipInstanceAutoSelectRef.current = false;
+                }
                 setIsLoadingEventInstances(false);
             }
             else {
@@ -16806,12 +16848,17 @@ 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 }))] }));
     }
     if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
+        const isButtonBusy = (isDirectInstanceMode && isLoadingEventDetails) ||
+            (!isDirectInstanceMode && (isLoadingEventInstances || (shouldRenderInstanceSelection && !sidebarOpen)));
         return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, style: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",
                         minHeight: "120px",
-                    }, children: [jsx("button", { type: "button", style: {
+                    }, children: [jsxs("button", { type: "button", disabled: isButtonBusy, style: {
+                                display: "inline-flex",
+                                alignItems: "center",
+                                gap: "10px",
                                 backgroundColor: "var(--bw-highlight-color)",
                                 color: "white",
                                 padding: "16px 32px",
@@ -16821,7 +16868,9 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 fontWeight: 600,
                                 fontFamily: "var(--bw-font-family)",
                                 boxShadow: "var(--bw-shadow-md)",
-                                cursor: "pointer",
+                                cursor: isButtonBusy ? "default" : "pointer",
+                                opacity: isButtonBusy ? 0.85 : 1,
+                                transition: "opacity 0.2s ease",
                             }, onClick: () => {
                                 if (isDirectInstanceMode) {
                                     setCurrentStep("booking");
@@ -16832,8 +16881,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                     setSidebarOpen(true);
                                     setShouldRenderInstanceSelection(true);
                                 }
-                            }, children: config.buttonText ||
-                                (isDirectInstanceMode ? 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 })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            }, children: [isButtonBusy && jsx(Spinner, { size: 20, borderColor: "white" }), config.buttonText ||
+                                    (isDirectInstanceMode ? 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 })), shouldRenderUpsells && (jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setSidebarOpen(false);