@bigz-app/booking-widget 0.3.8 → 0.3.9

package/dist/index.esm.js

@@ -12225,6 +12225,263 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
 			` })] }));
 }
 
+function PromoDialog({ onClose, onCtaClick }) {
+    const [copied, setCopied] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+    // Hardcoded Xmas surf school content
+    const discountCode = "X-MAS";
+    // Animate in on mount
+    useEffect(() => {
+        const timer = setTimeout(() => setIsVisible(true), 50);
+        return () => clearTimeout(timer);
+    }, []);
+    const handleCopyCode = async () => {
+        try {
+            await navigator.clipboard.writeText(discountCode);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            // Fallback for older browsers
+            const textArea = document.createElement("textarea");
+            textArea.value = discountCode;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textArea);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+    const handleClose = () => {
+        setIsVisible(false);
+        setTimeout(onClose, 200);
+    };
+    const handleCtaClick = () => {
+        setIsVisible(false);
+        setTimeout(onCtaClick, 200);
+    };
+    return (jsxs(Fragment, { children: [jsx("style", { children: `
+					@keyframes promo-wave {
+						0%, 100% { transform: translateX(0) translateY(0); }
+						25% { transform: translateX(5px) translateY(-3px); }
+						50% { transform: translateX(0) translateY(-5px); }
+						75% { transform: translateX(-5px) translateY(-3px); }
+					}
+					@keyframes promo-float {
+						0%, 100% { transform: translateY(0); }
+						50% { transform: translateY(-8px); }
+					}
+					@keyframes promo-shimmer {
+						0% { background-position: -200% center; }
+						100% { background-position: 200% center; }
+					}
+					@keyframes promo-sparkle {
+						0%, 100% { opacity: 0.3; transform: scale(1); }
+						50% { opacity: 1; transform: scale(1.2); }
+					}
+					@keyframes promo-snow {
+						0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
+						10% { opacity: 1; }
+						90% { opacity: 1; }
+						100% { transform: translateY(350px) rotate(360deg); opacity: 0; }
+					}
+				` }), jsx("div", { onClick: handleClose, style: {
+                    position: "fixed",
+                    inset: 0,
+                    backgroundColor: "rgba(0, 20, 40, 0.85)",
+                    backdropFilter: "blur(8px)",
+                    zIndex: 9998,
+                    opacity: isVisible ? 1 : 0,
+                    transition: "opacity 300ms ease-out",
+                } }), jsx("div", { style: {
+                    position: "fixed",
+                    top: "50%",
+                    left: "50%",
+                    transform: `translate(-50%, -50%) scale(${isVisible ? 1 : 0.9})`,
+                    zIndex: 9999,
+                    width: "92%",
+                    maxWidth: "440px",
+                    opacity: isVisible ? 1 : 0,
+                    transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                }, children: jsxs("div", { style: {
+                        position: "relative",
+                        background: "linear-gradient(165deg, #0c4a6e 0%, #0e7490 40%, #0891b2 100%)",
+                        borderRadius: "28px",
+                        overflow: "hidden",
+                        boxShadow: "0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)",
+                    }, children: [Array.from({ length: 15 }).map((_, i) => (jsx("div", { style: {
+                                position: "absolute",
+                                left: `${5 + Math.random() * 90}%`,
+                                top: "-10px",
+                                fontSize: `${10 + Math.random() * 14}px`,
+                                color: "white",
+                                opacity: 0,
+                                animation: `promo-snow ${4 + Math.random() * 3}s linear infinite`,
+                                animationDelay: `${Math.random() * 4}s`,
+                                pointerEvents: "none",
+                                zIndex: 1,
+                            }, children: "\u2744" }, i))), jsxs("div", { style: {
+                                position: "relative",
+                                height: "180px",
+                                background: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(12,74,110,0.8) 100%)",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                overflow: "hidden",
+                            }, children: [jsx("img", { src: "https://images.unsplash.com/photo-1502680390469-be75c86b636f?w=600&q=80", alt: "Surfer at sunset", style: {
+                                        position: "absolute",
+                                        inset: 0,
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                        opacity: 0.6,
+                                    } }), jsx("div", { style: {
+                                        position: "absolute",
+                                        inset: 0,
+                                        background: "linear-gradient(180deg, rgba(12,74,110,0.3) 0%, rgba(12,74,110,0.95) 100%)",
+                                    } }), jsx("div", { style: {
+                                        position: "relative",
+                                        zIndex: 2,
+                                        fontSize: "64px",
+                                        animation: "promo-float 3s ease-in-out infinite",
+                                        filter: "drop-shadow(0 8px 16px rgba(0,0,0,0.4))",
+                                    }, children: "\uD83C\uDFC4\u200D\u2642\uFE0F" }), jsx("div", { style: {
+                                        position: "absolute",
+                                        top: "16px",
+                                        left: "20px",
+                                        fontSize: "28px",
+                                        animation: "promo-sparkle 2s ease-in-out infinite",
+                                    }, children: "\uD83C\uDF84" }), jsx("div", { style: {
+                                        position: "absolute",
+                                        top: "20px",
+                                        right: "20px",
+                                        fontSize: "24px",
+                                        animation: "promo-sparkle 2s ease-in-out infinite 0.5s",
+                                    }, children: "\u2B50" })] }), jsx("button", { onClick: handleClose, style: {
+                                position: "absolute",
+                                top: "16px",
+                                right: "16px",
+                                width: "36px",
+                                height: "36px",
+                                borderRadius: "50%",
+                                border: "none",
+                                background: "rgba(0, 0, 0, 0.3)",
+                                backdropFilter: "blur(4px)",
+                                color: "white",
+                                fontSize: "22px",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                transition: "all 150ms ease",
+                                zIndex: 10,
+                                lineHeight: 1,
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.background = "rgba(0, 0, 0, 0.5)";
+                                e.currentTarget.style.transform = "scale(1.1)";
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.background = "rgba(0, 0, 0, 0.3)";
+                                e.currentTarget.style.transform = "scale(1)";
+                            }, children: "\u00D7" }), jsxs("div", { style: { padding: "28px 28px 32px", textAlign: "center", position: "relative", zIndex: 2 }, children: [jsx("h2", { style: {
+                                        fontSize: "26px",
+                                        fontWeight: "800",
+                                        color: "white",
+                                        marginBottom: "6px",
+                                        textShadow: "0 2px 8px rgba(0,0,0,0.3)",
+                                        letterSpacing: "-0.5px",
+                                    }, children: "Frohe Weihnachten! \uD83C\uDF85" }), jsxs("p", { style: {
+                                        fontSize: "17px",
+                                        color: "rgba(255, 255, 255, 0.9)",
+                                        marginBottom: "20px",
+                                        lineHeight: 1.5,
+                                    }, children: ["Schenk dir oder deinen Liebsten", jsx("br", {}), jsx("strong", { style: { color: "#fbbf24" }, children: "10% Rabatt" }), " auf alle Kurse!"] }), jsxs("div", { style: {
+                                        background: "white",
+                                        borderRadius: "16px",
+                                        padding: "18px 20px",
+                                        marginBottom: "20px",
+                                        boxShadow: "0 8px 24px rgba(0,0,0,0.15), inset 0 -2px 0 rgba(0,0,0,0.05)",
+                                    }, children: [jsx("p", { style: {
+                                                fontSize: "11px",
+                                                textTransform: "uppercase",
+                                                letterSpacing: "1.5px",
+                                                color: "#64748b",
+                                                marginBottom: "10px",
+                                                fontWeight: "600",
+                                            }, children: "Dein Geschenk-Code" }), jsxs("div", { style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                gap: "14px",
+                                            }, children: [jsx("div", { style: {
+                                                        background: "linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)",
+                                                        padding: "10px 20px",
+                                                        borderRadius: "10px",
+                                                        boxShadow: "0 4px 12px rgba(220, 38, 38, 0.3)",
+                                                    }, children: jsx("span", { style: {
+                                                            fontSize: "28px",
+                                                            fontWeight: "900",
+                                                            color: "white",
+                                                            letterSpacing: "6px",
+                                                            textShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                                                        }, children: discountCode }) }), jsx("button", { onClick: handleCopyCode, style: {
+                                                        padding: "12px 16px",
+                                                        borderRadius: "10px",
+                                                        border: "2px solid",
+                                                        borderColor: copied ? "#22c55e" : "#e2e8f0",
+                                                        background: copied ? "#dcfce7" : "#f8fafc",
+                                                        color: copied ? "#15803d" : "#475569",
+                                                        fontSize: "13px",
+                                                        fontWeight: "600",
+                                                        cursor: "pointer",
+                                                        transition: "all 150ms ease",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: copied ? (jsx(Fragment, { children: "\u2713 Kopiert!" })) : (jsxs(Fragment, { children: [jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Kopieren"] })) })] })] }), jsx("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        marginBottom: "20px",
+                                        flexWrap: "wrap",
+                                    }, children: ["🏄 Surfen", "🪁 Wingen", "🏄‍♀️ SUP", "💨 Windsurfen"].map((activity) => (jsx("span", { style: {
+                                            background: "rgba(255,255,255,0.15)",
+                                            backdropFilter: "blur(4px)",
+                                            padding: "6px 12px",
+                                            borderRadius: "20px",
+                                            fontSize: "13px",
+                                            color: "white",
+                                            fontWeight: "500",
+                                        }, children: activity }, activity))) }), jsxs("button", { onClick: handleCtaClick, style: {
+                                        width: "100%",
+                                        padding: "18px 24px",
+                                        borderRadius: "14px",
+                                        border: "none",
+                                        background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+                                        color: "white",
+                                        fontSize: "18px",
+                                        fontWeight: "700",
+                                        cursor: "pointer",
+                                        transition: "all 150ms ease",
+                                        boxShadow: "0 8px 24px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "10px",
+                                    }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.transform = "translateY(-2px)";
+                                        e.currentTarget.style.boxShadow = "0 12px 28px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255,255,255,0.2)";
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.transform = "translateY(0)";
+                                        e.currentTarget.style.boxShadow = "0 8px 24px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)";
+                                    }, children: [jsx("span", { style: { animation: "promo-wave 2s ease-in-out infinite" }, children: "\uD83C\uDF81" }), "Jetzt Kurs buchen", jsx("span", { children: "\u2192" })] }), jsx("p", { style: {
+                                        marginTop: "16px",
+                                        fontSize: "12px",
+                                        color: "rgba(255,255,255,0.6)",
+                                    }, children: "G\u00FCltig f\u00FCr alle Buchungen bis 31. Dezember 2025" })] })] }) })] }));
+}
+
 // Predefined themes & Style Provider have been moved to ../styles/StyleProvider.tsx
 // Main widget component
 function UniversalBookingWidget({ config: baseConfig }) {
@@ -12267,6 +12524,9 @@ function UniversalBookingWidget({ config: baseConfig }) {
     // PERFORMANCE OPTIMIZATION: Lazy component loading
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = useState(false);
     const [shouldRenderBookingForm, setShouldRenderBookingForm] = useState(false);
+    // Promo dialog state
+    const [showPromoDialog, setShowPromoDialog] = useState(false);
+    const [widgetContainerRef, setWidgetContainerRef] = useState(null);
     // Determine initial step and load data
     useEffect(() => {
         const initializeWidget = async () => {
@@ -12341,6 +12601,46 @@ function UniversalBookingWidget({ config: baseConfig }) {
             setShouldRenderBookingForm(true);
         }
     }, [currentStep, shouldRenderInstanceSelection, shouldRenderBookingForm]);
+    // Promo dialog: show Xmas promo once per user during holiday season, prevent double-opening across multiple widgets
+    useEffect(() => {
+        // Only show during holiday season (December and January)
+        const now = new Date();
+        const month = now.getMonth(); // 0 = January, 11 = December
+        const isHolidaySeason = month === 11 || month === 0; // December (11) or January (0)
+        if (!isHolidaySeason) {
+            return;
+        }
+        const promoId = "xmas-2024";
+        const storageKey = `bigz-promo-${promoId}-shown`;
+        const globalFlagKey = `__bigzPromoShown_${promoId}`;
+        // Check if already shown in this session (localStorage) or claimed by another widget (global flag)
+        const alreadyShown = localStorage.getItem(storageKey) === "true";
+        const claimedByOtherWidget = window[globalFlagKey] === true;
+        if (alreadyShown || claimedByOtherWidget) {
+            return;
+        }
+        // Claim this promo for this widget instance (prevents other widgets from showing it)
+        window[globalFlagKey] = true;
+        // Show the dialog after a short delay for better UX
+        const timer = setTimeout(() => {
+            setShowPromoDialog(true);
+        }, 1000);
+        return () => clearTimeout(timer);
+    }, []);
+    // Handle promo dialog close
+    const handlePromoDialogClose = () => {
+        setShowPromoDialog(false);
+        localStorage.setItem("bigz-promo-xmas-2024-shown", "true");
+    };
+    // Handle promo dialog CTA click - scroll to widget
+    const handlePromoCtaClick = () => {
+        setShowPromoDialog(false);
+        localStorage.setItem("bigz-promo-xmas-2024-shown", "true");
+        // Scroll to the widget container
+        if (widgetContainerRef) {
+            widgetContainerRef.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+    };
     const loadEventTypes = async () => {
         const requestBody = {
             organizationId: config.organizationId,
@@ -12740,104 +13040,104 @@ function UniversalBookingWidget({ config: baseConfig }) {
     // Main view based on view mode
     if (viewMode === "next-events" && showingPreview) {
         // Next events preview mode
-        return (jsxs(StyleProvider, { config: config, children: [jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        setEventDetails(null);
-                    }, onBackToEventTypes: () => {
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        setEventDetails(null);
-                    }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        setEventDetails(null);
-                    }, systemConfig: systemConfig })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                        setIsSuccess(false);
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        // Reset state
-                        setSuccessPaymentIntentId(null);
-                        // Reset lazy loading flags
-                        setShouldRenderInstanceSelection(false);
-                        setShouldRenderBookingForm(false);
-                        // Clean up URL to remove Stripe parameters
-                        const url = new URL(window.location.href);
-                        url.searchParams.delete("payment_intent");
-                        url.searchParams.delete("payment_intent_client_secret");
-                        url.searchParams.delete("redirect_status");
-                        window.history.replaceState({}, "", url.toString());
-                    }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
+        return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                setEventDetails(null);
+                            }, onBackToEventTypes: () => {
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                setEventDetails(null);
+                            }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                setEventDetails(null);
+                            }, systemConfig: systemConfig })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                setIsSuccess(false);
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                // Reset state
+                                setSuccessPaymentIntentId(null);
+                                // Reset lazy loading flags
+                                setShouldRenderInstanceSelection(false);
+                                setShouldRenderBookingForm(false);
+                                // Clean up URL to remove Stripe parameters
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete("payment_intent");
+                                url.searchParams.delete("payment_intent_client_secret");
+                                url.searchParams.delete("redirect_status");
+                                window.history.replaceState({}, "", url.toString());
+                            }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
         // Show all events for the single event type
-        return (jsxs(StyleProvider, { config: config, children: [shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
-                        setShowingPreview(true);
-                        setCurrentStep("eventTypes");
-                    }, isOpen: currentStep === "eventInstances", onClose: () => {
-                        setShowingPreview(true);
-                        setCurrentStep("eventTypes");
-                    }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                        setIsSuccess(false);
-                        setCurrentStep("eventTypes");
-                        setShowingPreview(true);
-                        // Reset state
-                        setSuccessPaymentIntentId(null);
-                        // Reset lazy loading flags
-                        setShouldRenderInstanceSelection(false);
-                        setShouldRenderBookingForm(false);
-                        // Clean up URL to remove Stripe parameters
-                        const url = new URL(window.location.href);
-                        url.searchParams.delete("payment_intent");
-                        url.searchParams.delete("payment_intent_client_secret");
-                        url.searchParams.delete("redirect_status");
-                        window.history.replaceState({}, "", url.toString());
-                    }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
+        return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
+                                setShowingPreview(true);
+                                setCurrentStep("eventTypes");
+                            }, isOpen: currentStep === "eventInstances", onClose: () => {
+                                setShowingPreview(true);
+                                setCurrentStep("eventTypes");
+                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                setIsSuccess(false);
+                                setCurrentStep("eventTypes");
+                                setShowingPreview(true);
+                                // Reset state
+                                setSuccessPaymentIntentId(null);
+                                // Reset lazy loading flags
+                                setShouldRenderInstanceSelection(false);
+                                setShouldRenderBookingForm(false);
+                                // Clean up URL to remove Stripe parameters
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete("payment_intent");
+                                url.searchParams.delete("payment_intent_client_secret");
+                                url.searchParams.delete("redirect_status");
+                                window.history.replaceState({}, "", url.toString());
+                            }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
         // Button mode - show button that opens sidebar/booking directly
-        return (jsx(StyleProvider, { config: config, children: jsxs("div", { style: {
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    minHeight: "120px",
-                }, children: [jsx("button", { type: "button", style: {
-                            backgroundColor: "var(--bw-highlight-color)",
-                            color: "white",
-                            padding: "16px 32px",
-                            border: "none",
-                            borderRadius: "var(--bw-border-radius)",
-                            fontSize: "18px",
-                            fontWeight: 600,
-                            fontFamily: "var(--bw-font-family)",
-                            boxShadow: "var(--bw-shadow-md)",
-                            cursor: "pointer",
-                        }, onClick: () => {
-                            if (isDirectInstanceMode) {
-                                setCurrentStep("booking");
-                                setShouldRenderBookingForm(true);
-                            }
-                            else {
-                                setSidebarOpen(true);
-                                setShouldRenderInstanceSelection(true);
-                            }
-                        }, children: config.buttonText ||
-                            (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsx(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 })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                            setIsSuccess(false);
-                            setCurrentStep("eventTypes");
-                            setSidebarOpen(false);
-                            // Reset state
-                            setSuccessPaymentIntentId(null);
-                            // Reset lazy loading flags
-                            setShouldRenderInstanceSelection(false);
-                            setShouldRenderBookingForm(false);
-                            // Clean up URL to remove Stripe parameters
-                            const url = new URL(window.location.href);
-                            url.searchParams.delete("payment_intent");
-                            url.searchParams.delete("payment_intent_client_secret");
-                            url.searchParams.delete("redirect_status");
-                            window.history.replaceState({}, "", url.toString());
-                        }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }) }));
+        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: {
+                                backgroundColor: "var(--bw-highlight-color)",
+                                color: "white",
+                                padding: "16px 32px",
+                                border: "none",
+                                borderRadius: "var(--bw-border-radius)",
+                                fontSize: "18px",
+                                fontWeight: 600,
+                                fontFamily: "var(--bw-font-family)",
+                                boxShadow: "var(--bw-shadow-md)",
+                                cursor: "pointer",
+                            }, onClick: () => {
+                                if (isDirectInstanceMode) {
+                                    setCurrentStep("booking");
+                                    setShouldRenderBookingForm(true);
+                                }
+                                else {
+                                    setSidebarOpen(true);
+                                    setShouldRenderInstanceSelection(true);
+                                }
+                            }, children: config.buttonText ||
+                                (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsx(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 })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                setIsSuccess(false);
+                                setCurrentStep("eventTypes");
+                                setSidebarOpen(false);
+                                // Reset state
+                                setSuccessPaymentIntentId(null);
+                                // Reset lazy loading flags
+                                setShouldRenderInstanceSelection(false);
+                                setShouldRenderBookingForm(false);
+                                // Clean up URL to remove Stripe parameters
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete("payment_intent");
+                                url.searchParams.delete("payment_intent_client_secret");
+                                url.searchParams.delete("redirect_status");
+                                window.history.replaceState({}, "", url.toString());
+                            }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     // Cards mode (default) - show event type selection
     const cardsView = (jsx(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
@@ -12870,21 +13170,21 @@ function UniversalBookingWidget({ config: baseConfig }) {
         };
     };
     const backHandlers = getBackHandlers();
-    return (jsxs(StyleProvider, { config: config, children: [cardsView, shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsx(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 })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
-                    setIsSuccess(false);
-                    setCurrentStep("eventTypes");
-                    // Reset state
-                    setSuccessPaymentIntentId(null);
-                    // Reset lazy loading flags
-                    setShouldRenderInstanceSelection(false);
-                    setShouldRenderBookingForm(false);
-                    // Clean up URL to remove Stripe parameters
-                    const url = new URL(window.location.href);
-                    url.searchParams.delete("payment_intent");
-                    url.searchParams.delete("payment_intent_client_secret");
-                    url.searchParams.delete("redirect_status");
-                    window.history.replaceState({}, "", url.toString());
-                }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
+    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 })), shouldRenderBookingForm && eventDetails && (jsx(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 })), jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            setIsSuccess(false);
+                            setCurrentStep("eventTypes");
+                            // Reset state
+                            setSuccessPaymentIntentId(null);
+                            // Reset lazy loading flags
+                            setShouldRenderInstanceSelection(false);
+                            setShouldRenderBookingForm(false);
+                            // Clean up URL to remove Stripe parameters
+                            const url = new URL(window.location.href);
+                            url.searchParams.delete("payment_intent");
+                            url.searchParams.delete("payment_intent_client_secret");
+                            url.searchParams.delete("redirect_status");
+                            window.history.replaceState({}, "", url.toString());
+                        }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (jsx(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
 }
 
 // Export init function for vanilla JS usage