@bigz-app/booking-widget 0.3.9 → 0.3.11

package/dist/index.esm.js

@@ -12228,8 +12228,21 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
 function PromoDialog({ onClose, onCtaClick }) {
     const [copied, setCopied] = useState(false);
     const [isVisible, setIsVisible] = useState(false);
+    const [portalContainer, setPortalContainer] = useState(null);
     // Hardcoded Xmas surf school content
     const discountCode = "X-MAS";
+    // Create portal container on mount to escape stacking context issues
+    useEffect(() => {
+        const container = document.createElement("div");
+        container.id = "bigz-promo-dialog-portal";
+        container.style.position = "relative";
+        container.style.zIndex = "2147483647"; // Maximum z-index value
+        document.body.appendChild(container);
+        setPortalContainer(container);
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, []);
     // Animate in on mount
     useEffect(() => {
         const timer = setTimeout(() => setIsVisible(true), 50);
@@ -12261,7 +12274,11 @@ function PromoDialog({ onClose, onCtaClick }) {
         setIsVisible(false);
         setTimeout(onCtaClick, 200);
     };
-    return (jsxs(Fragment, { children: [jsx("style", { children: `
+    // Don't render until portal container is ready
+    if (!portalContainer) {
+        return null;
+    }
+    const dialogContent = (jsxs(Fragment, { children: [jsx("style", { children: `
 					@keyframes promo-wave {
 						0%, 100% { transform: translateX(0) translateY(0); }
 						25% { transform: translateX(5px) translateY(-3px); }
@@ -12291,7 +12308,7 @@ function PromoDialog({ onClose, onCtaClick }) {
                     inset: 0,
                     backgroundColor: "rgba(0, 20, 40, 0.85)",
                     backdropFilter: "blur(8px)",
-                    zIndex: 9998,
+                    zIndex: 60,
                     opacity: isVisible ? 1 : 0,
                     transition: "opacity 300ms ease-out",
                 } }), jsx("div", { style: {
@@ -12299,7 +12316,7 @@ function PromoDialog({ onClose, onCtaClick }) {
                     top: "50%",
                     left: "50%",
                     transform: `translate(-50%, -50%) scale(${isVisible ? 1 : 0.9})`,
-                    zIndex: 9999,
+                    zIndex: 61,
                     width: "92%",
                     maxWidth: "440px",
                     opacity: isVisible ? 1 : 0,
@@ -12480,6 +12497,8 @@ function PromoDialog({ onClose, onCtaClick }) {
                                         fontSize: "12px",
                                         color: "rgba(255,255,255,0.6)",
                                     }, children: "G\u00FCltig f\u00FCr alle Buchungen bis 31. Dezember 2025" })] })] }) })] }));
+    // Use portal to render at document body level, escaping any stacking context
+    return createPortal(dialogContent, portalContainer);
 }
 
 // Predefined themes & Style Provider have been moved to ../styles/StyleProvider.tsx
@@ -12603,10 +12622,12 @@ function UniversalBookingWidget({ config: baseConfig }) {
     }, [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)
+        // Only show during holiday season (December and early January - New Years week)
         const now = new Date();
         const month = now.getMonth(); // 0 = January, 11 = December
-        const isHolidaySeason = month === 11 || month === 0; // December (11) or January (0)
+        const day = now.getDate();
+        // Show in December (entire month) or January 1-2 (New Years holiday)
+        const isHolidaySeason = month === 11 || (month === 0 && day <= 2);
         if (!isHolidaySeason) {
             return;
         }