@bigz-app/booking-widget 0.2.3 → 0.3.1

package/dist/index.esm.js

@@ -237,9 +237,9 @@ const resolveSemanticColor = (colorValue, fallbackValue) => {
 const themes = {
     // --- Light Themes ---
     "light-fresh": {
-        highlight: "oklch(0.65 0.2 190)", // accent-strong
-        background: "oklch(0.99 0.005 220)", // neutral-strong (background)
-        surface: "oklch(1 0 0)", // card (pure white)
+        highlight: "#00a8a1", // accent-strong
+        background: "#f8fdfe", // neutral-strong (background)
+        surface: "#ffffff", // card (pure white)
         text: "#0e7490", // Turquoise 800
         border: "#bae6fd", // Blue 200
         success: "#38bdf8", // Blue 400
@@ -9112,7 +9112,7 @@ var reactStripe_umd = {exports: {}};
 
 var reactStripe_umdExports = reactStripe_umd.exports;
 
-const spinner = (borderColor) => (jsx("div", { style: {
+const spinner$1 = (borderColor) => (jsx("div", { style: {
         width: "auto",
         height: "auto",
         fontSize: "16px",
@@ -9248,7 +9248,7 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
                     if (!isLoading) {
                         e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
                     }
-                }, children: isLoading ? (jsxs(Fragment, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (jsxs(Fragment, { children: [" ", totalAmount <
+                }, children: isLoading ? (jsxs(Fragment, { children: [spinner$1("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (jsxs(Fragment, { children: [" ", totalAmount <
                             eventDetails.price * formData.participants.filter((p) => p.name.trim()).length
                             ? "Anzahlen & buchen"
                             : "Jetzt buchen"] })) }), jsx("style", { children: `
@@ -9264,6 +9264,64 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
     const [paymentIntentId, setPaymentIntentId] = useState(null);
     const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = useState(false);
     const [paymentError, setPaymentError] = useState(null);
+    // LocalStorage persistence (scoped by organization + event) for paymentIntentId only
+    const storageKey = typeof window !== "undefined"
+        ? `bw_pi_${config?.organizationId}_${config?.eventInstanceId || eventDetails?.id}`
+        : "";
+    const PAYMENT_INTENT_TTL = 24 * 60 * 60 * 1000; // 24 hours
+    function loadPersistedPaymentIntent() {
+        if (typeof window === "undefined" || !storageKey)
+            return null;
+        try {
+            const raw = window.localStorage.getItem(storageKey);
+            if (!raw)
+                return null;
+            const parsed = JSON.parse(raw);
+            if (!parsed?.id || !parsed?.ts)
+                return null;
+            if (Date.now() - parsed.ts > PAYMENT_INTENT_TTL) {
+                window.localStorage.removeItem(storageKey);
+                return null;
+            }
+            return parsed.id;
+        }
+        catch {
+            return null;
+        }
+    }
+    function persistPaymentIntent(id) {
+        if (typeof window === "undefined" || !storageKey || !id)
+            return;
+        try {
+            const payload = { id, ts: Date.now() };
+            window.localStorage.setItem(storageKey, JSON.stringify(payload));
+        }
+        catch { }
+    }
+    function clearPersistedPaymentIntent() {
+        if (typeof window === "undefined" || !storageKey)
+            return;
+        try {
+            window.localStorage.removeItem(storageKey);
+        }
+        catch { }
+    }
+    // On mount (and when scope changes), restore persisted paymentIntentId
+    useEffect(() => {
+        if (!paymentIntentId) {
+            const restored = loadPersistedPaymentIntent();
+            if (restored) {
+                setPaymentIntentId(restored);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [storageKey]);
+    // Persist whenever paymentIntentId changes
+    useEffect(() => {
+        if (paymentIntentId) {
+            persistPaymentIntent(paymentIntentId);
+        }
+    }, [paymentIntentId]);
     // Create payment intent when component mounts or when relevant data changes
     useEffect(() => {
         const createPaymentIntent = async () => {
@@ -9368,7 +9426,7 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                 justifyContent: "center",
                 padding: "var(--bw-spacing)",
                 gap: "8px",
-            }, children: [spinner(), jsx("span", { style: {
+            }, children: [spinner$1(), jsx("span", { style: {
                         color: "var(--bw-text-muted)",
                         fontFamily: "var(--bw-font-family)",
                         fontSize: "var(--bw-font-size)",
@@ -9393,10 +9451,16 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
             clientSecret,
             appearance: stripeAppearance || { theme: "stripe" },
             locale: config.locale || "de",
-        }, children: jsx(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
+        }, children: jsx(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: (result) => {
+                // Clear persisted PI data on successful payment
+                clearPersistedPaymentIntent();
+                setPaymentIntentId(null);
+                setClientSecret(null);
+                onSuccess(result);
+            }, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
 }
 
-function Sidebar({ isOpen, onClose, title, children, width = "400px" }) {
+function Sidebar({ isOpen, onClose, title, children, width = "450px" }) {
     const [isVisible, setIsVisible] = useState(false);
     const [isAnimating, setIsAnimating] = useState(false);
     const themedStyles = useStyles();
@@ -9795,7 +9859,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         marginBottom: "8px",
         fontFamily: "var(--bw-font-family)",
     };
-    return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", children: jsxs("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [jsxs("div", { style: {
+    return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, children: jsxs("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [jsxs("div", { style: {
                         backgroundColor: "var(--bw-surface-color)",
                         border: `1px solid var(--bw-border-color)`,
                         backdropFilter: "blur(4px)",
@@ -10013,7 +10077,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                 fontFamily: "var(--bw-font-family)",
                                                 display: "block",
                                                 marginBottom: "8px",
-                                            }, children: "Kommentar (optional)" }), jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zu Ihrer Buchung...", rows: 3, style: {
+                                            }, children: "Kommentar (optional)" }), jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zur Buchung...", rows: 3, style: {
                                                 width: "100%",
                                                 padding: "12px",
                                                 border: `1px solid var(--bw-border-color)`,
@@ -10208,6 +10272,258 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                 ` })] }) }));
 }
 
+/**
+ * Google Ads Conversion Tracking Utility
+ *
+ * This utility handles Google Ads conversion tracking for the booking widget.
+ * It includes consent checking, gtag initialization, and conversion tracking.
+ */
+/**
+ * Check if Google Consent Mode has granted the necessary permissions for ads tracking
+ * This only checks Google's official consent mode - the proper way to handle Google Ads consent
+ */
+function checkGoogleConsent() {
+    console.log("[Google Ads Tracking] 🔍 Checking Google consent...");
+    if (typeof window === "undefined") {
+        console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+        return false;
+    }
+    console.log("[Google Ads Tracking] ✅ Window object available");
+    // Check for gtag consent mode
+    if (typeof window.gtag === "function") {
+        console.log("[Google Ads Tracking] ✅ gtag function found");
+        try {
+            // Try to get consent state from Google's consent mode
+            let consentGranted = false;
+            window.gtag("get", (consentState) => {
+                console.log("[Google Ads Tracking] 📋 Consent state received:", consentState);
+                // For Google Ads conversion tracking, we need ad_storage consent
+                consentGranted = consentState.ad_storage === "granted";
+                console.log("[Google Ads Tracking] 🔐 ad_storage consent:", consentState.ad_storage);
+            });
+            console.log("[Google Ads Tracking] 🎯 Final consent result:", consentGranted);
+            return consentGranted;
+        }
+        catch (error) {
+            console.warn("[Google Ads Tracking] ⚠️ Error checking gtag consent:", error);
+        }
+    }
+    else {
+        console.log("[Google Ads Tracking] ❌ gtag function not found");
+    }
+    // If gtag is not available, we assume consent has not been properly configured
+    // The host page should implement Google Consent Mode if they want tracking
+    console.log("[Google Ads Tracking] 🚫 No consent mechanism found, returning false");
+    return false;
+}
+/**
+ * Check if gtag is already initialized on the host page
+ */
+function isGtagInitialized() {
+    console.log("[Google Ads Tracking] 🔍 Checking if gtag is initialized...");
+    if (typeof window === "undefined") {
+        console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+        return false;
+    }
+    console.log("[Google Ads Tracking] ✅ Window object available");
+    // Check if gtag function exists
+    if (typeof window.gtag === "function") {
+        console.log("[Google Ads Tracking] ✅ gtag function exists");
+        return true;
+    }
+    console.log("[Google Ads Tracking] ❌ gtag function not found, checking for scripts...");
+    // Check if Google Analytics or Google Ads scripts are already loaded
+    const scripts = document.querySelectorAll('script[src*="googletagmanager.com"]');
+    console.log("[Google Ads Tracking] 📜 Found", scripts.length, "Google Tag Manager scripts");
+    const isInitialized = scripts.length > 0;
+    console.log("[Google Ads Tracking] 🎯 gtag initialization status:", isInitialized);
+    return isInitialized;
+}
+/**
+ * Initialize Google Tag (gtag) if not already present
+ */
+function initializeGtag(tagId) {
+    console.log("[Google Ads Tracking] 🚀 Starting gtag initialization with tagId:", tagId);
+    return new Promise((resolve, reject) => {
+        if (typeof window === "undefined") {
+            console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+            reject(new Error("Window object not available"));
+            return;
+        }
+        console.log("[Google Ads Tracking] ✅ Window object available");
+        // If gtag is already initialized, just resolve
+        if (isGtagInitialized()) {
+            console.log("[Google Ads Tracking] ⚡ gtag already initialized, skipping setup");
+            resolve();
+            return;
+        }
+        console.log("[Google Ads Tracking] 📦 gtag not found, creating new script element...");
+        try {
+            // Create the gtag script
+            const script = document.createElement("script");
+            script.async = true;
+            script.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
+            console.log("[Google Ads Tracking] 🌐 Script src set to:", script.src);
+            script.onload = () => {
+                console.log("[Google Ads Tracking] 📥 Script loaded successfully, initializing gtag...");
+                // Initialize gtag
+                window.dataLayer = window.dataLayer || [];
+                console.log("[Google Ads Tracking] 📊 dataLayer initialized");
+                window.gtag = (...args) => {
+                    window.dataLayer.push(args);
+                };
+                console.log("[Google Ads Tracking] 🔧 gtag function created");
+                // Configure gtag
+                console.log("[Google Ads Tracking] ⚙️ Configuring gtag with privacy settings...");
+                window.gtag("js", new Date());
+                window.gtag("config", tagId, {
+                    // Respect consent settings
+                    anonymize_ip: true,
+                    allow_google_signals: false,
+                    allow_ad_personalization_signals: false,
+                });
+                console.log("[Google Ads Tracking] ✅ gtag initialized successfully with tagId:", tagId);
+                resolve();
+            };
+            script.onerror = (error) => {
+                console.error("[Google Ads Tracking] ❌ Failed to load Google Tag script:", error);
+                reject(new Error("Failed to load Google Tag script"));
+            };
+            console.log("[Google Ads Tracking] 📑 Adding script to document head...");
+            // Add script to head
+            document.head.appendChild(script);
+            console.log("[Google Ads Tracking] ✅ Script element appended to head");
+        }
+        catch (error) {
+            console.error("[Google Ads Tracking] ❌ Error during gtag initialization:", error);
+            reject(error);
+        }
+    });
+}
+/**
+ * Track a Google Ads conversion
+ */
+function trackConversion(config) {
+    console.log("[Google Ads Tracking] 🎯 Starting conversion tracking with config:", config);
+    if (typeof window === "undefined") {
+        console.warn("[Google Ads Tracking] ❌ Window object not available");
+        return;
+    }
+    console.log("[Google Ads Tracking] ✅ Window object available");
+    if (!config.tagId || !config.conversionId) {
+        console.warn("[Google Ads Tracking] ❌ Missing tagId or conversionId", {
+            tagId: config.tagId,
+            conversionId: config.conversionId,
+        });
+        return;
+    }
+    console.log("[Google Ads Tracking] ✅ Required config fields present:", {
+        tagId: config.tagId,
+        conversionId: config.conversionId,
+    });
+    if (typeof window.gtag !== "function") {
+        console.warn("[Google Ads Tracking] ❌ gtag function not available");
+        return;
+    }
+    console.log("[Google Ads Tracking] ✅ gtag function is available");
+    try {
+        console.log("[Google Ads Tracking] 🔧 Building conversion data...");
+        const conversionData = {
+            send_to: `${config.tagId}/${config.conversionId}`,
+        };
+        console.log("[Google Ads Tracking] 📋 Base conversion data:", conversionData);
+        // Add optional parameters
+        if (config.conversionValue !== undefined) {
+            conversionData.value = config.conversionValue;
+            console.log("[Google Ads Tracking] 💰 Added conversion value:", config.conversionValue);
+        }
+        if (config.conversionCurrency) {
+            conversionData.currency = config.conversionCurrency;
+            console.log("[Google Ads Tracking] 💱 Added currency:", config.conversionCurrency);
+        }
+        if (config.transactionId) {
+            conversionData.transaction_id = config.transactionId;
+            console.log("[Google Ads Tracking] 🔖 Added transaction ID:", config.transactionId);
+        }
+        console.log("[Google Ads Tracking] 📦 Final conversion data:", conversionData);
+        // Track the conversion
+        console.log("[Google Ads Tracking] 🚀 Sending conversion event to gtag...");
+        window.gtag("event", "conversion", conversionData);
+        console.log("[Google Ads Tracking] ✅ Conversion tracked successfully:", conversionData);
+    }
+    catch (error) {
+        console.error("[Google Ads Tracking] ❌ Error tracking conversion:", error);
+    }
+}
+/**
+ * Main function to handle Google Ads conversion tracking
+ * This function checks consent, initializes gtag if needed, and tracks the conversion
+ */
+async function handleGoogleAdsConversion(config) {
+    console.log("[Google Ads Tracking] 🎬 Starting handleGoogleAdsConversion with config:", config);
+    // Validate config
+    if (!config.tagId || !config.conversionId) {
+        console.log("[Google Ads Tracking] ❌ No tagId or conversionId provided, skipping conversion tracking", { tagId: config.tagId, conversionId: config.conversionId });
+        return;
+    }
+    console.log("[Google Ads Tracking] ✅ Config validation passed");
+    // Check consent first
+    console.log("[Google Ads Tracking] 🔐 Checking consent...");
+    if (!checkGoogleConsent()) {
+        console.log("[Google Ads Tracking] 🚫 Google consent not granted, skipping conversion tracking");
+        return;
+    }
+    console.log("[Google Ads Tracking] ✅ Consent check passed");
+    try {
+        // Initialize gtag if not already present
+        console.log("[Google Ads Tracking] 🔍 Checking if gtag needs initialization...");
+        if (!isGtagInitialized()) {
+            console.log("[Google Ads Tracking] 🚀 Initializing gtag...");
+            await initializeGtag(config.tagId);
+            console.log("[Google Ads Tracking] ✅ gtag initialization completed");
+        }
+        else {
+            console.log("[Google Ads Tracking] ⚡ gtag already initialized, proceeding...");
+        }
+        // Small delay to ensure gtag is ready
+        console.log("[Google Ads Tracking] ⏱️ Adding 100ms delay to ensure gtag is ready...");
+        setTimeout(() => {
+            console.log("[Google Ads Tracking] 🎯 Delay completed, tracking conversion...");
+            trackConversion(config);
+        }, 100);
+    }
+    catch (error) {
+        console.error("[Google Ads Tracking] ❌ Error handling conversion:", error);
+    }
+}
+/**
+ * Utility function to get conversion value from booking data
+ */
+function getConversionValueFromBooking(bookingData) {
+    console.log("[Google Ads Tracking] 💰 Extracting conversion value from booking data:", bookingData);
+    // Try to get the total amount from various possible structures
+    const possiblePaths = [
+        { path: "order.total", value: bookingData?.order?.total },
+        { path: "booking.total", value: bookingData?.booking?.total },
+        { path: "total", value: bookingData?.total },
+        { path: "amount", value: bookingData?.amount },
+        { path: "payment.amount", value: bookingData?.payment?.amount },
+        { path: "stripePaymentIntent.amount", value: bookingData?.stripePaymentIntent?.amount },
+    ];
+    console.log("[Google Ads Tracking] 🔍 Checking possible value paths:", possiblePaths);
+    for (const { path, value } of possiblePaths) {
+        console.log(`[Google Ads Tracking] 📋 Checking path '${path}':`, value);
+        if (typeof value === "number" && value > 0) {
+            // Convert from cents to euros
+            const convertedValue = value / 100;
+            console.log(`[Google Ads Tracking] ✅ Found valid value at '${path}': ${value} cents = ${convertedValue} euros`);
+            return convertedValue;
+        }
+    }
+    console.log("[Google Ads Tracking] ❌ No valid conversion value found in booking data");
+    return undefined;
+}
+
 const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
     const [bookingData, setBookingData] = useState(null);
     const [eventDetails, setEventDetails] = useState(null);
@@ -10252,6 +10568,27 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                     });
                     // Set payment status from Stripe data or order status
                     setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
+                    // Trigger Google Ads conversion tracking if payment is successful
+                    const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
+                    if (finalPaymentStatus === "succeeded" &&
+                        config.googleAds?.tagId &&
+                        config.googleAds?.conversionId) {
+                        // Prepare conversion tracking data
+                        const conversionValue = config.googleAds.includeValue !== false
+                            ? getConversionValueFromBooking(data)
+                            : undefined;
+                        const transactionId = data.order.id;
+                        // Track the conversion
+                        handleGoogleAdsConversion({
+                            tagId: config.googleAds.tagId,
+                            conversionId: config.googleAds.conversionId,
+                            conversionValue,
+                            conversionCurrency: config.googleAds.conversionCurrency || "EUR",
+                            transactionId,
+                        }).catch((error) => {
+                            console.warn("[BookingSuccessModal] Google Ads conversion tracking failed:", error);
+                        });
+                    }
                 }
                 else {
                     onError?.(data.error || "Fehler beim Abrufen der Buchungsdaten");
@@ -10641,44 +10978,42 @@ const getPriceDisplayInfo = (price, yearPrices) => {
 // Allocation Badge Component
 const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
     const badgeInfo = getAllocationBadgeInfo(availableSpots, maxParticipants);
-    if (!badgeInfo)
-        return null;
     return (jsx("div", { style: {
-            position: "absolute",
-            bottom: "4px",
-            right: "20px",
-            backgroundColor: badgeInfo.backgroundColor,
-            color: badgeInfo.textColor,
+            backgroundColor: badgeInfo?.backgroundColor || "transparent",
+            color: badgeInfo?.textColor || "transparent",
             fontSize: "11px",
             fontWeight: "bold",
-            padding: "3px 8px",
+            padding: "1px 8px",
+            display: "flex",
+            marginRight: "auto",
+            marginTop: "-24px",
+            marginBottom: "5px",
             borderRadius: "var(--bw-border-radius-small)",
             fontFamily: "var(--bw-font-family)",
-            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
             zIndex: 50,
             whiteSpace: "nowrap",
-        }, children: badgeInfo.text }));
+            width: "fit-content",
+        }, children: badgeInfo?.text || " - " }));
 };
 // Price Badge Component (for special prices)
 const SpecialPriceBadge = ({ price, yearPrices }) => {
     const badgeInfo = getPriceBadgeInfo(price, yearPrices);
-    if (!badgeInfo)
-        return null;
     return (jsx("div", { style: {
-            position: "absolute",
-            bottom: "28px",
-            right: "20px",
-            backgroundColor: badgeInfo.backgroundColor,
-            color: badgeInfo.textColor,
+            backgroundColor: badgeInfo?.backgroundColor || "transparent",
+            color: badgeInfo?.textColor || "transparent",
             fontSize: "11px",
             fontWeight: "bold",
-            padding: "3px 8px",
+            padding: "1px 8px",
+            display: "flex",
+            marginLeft: "auto",
+            marginTop: "-20px",
+            marginBottom: "5px",
             borderRadius: "var(--bw-border-radius-small)",
             fontFamily: "var(--bw-font-family)",
-            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
             zIndex: 50,
             whiteSpace: "nowrap",
-        }, children: badgeInfo.text }));
+            width: "fit-content",
+        }, children: badgeInfo?.text || " - " }));
 };
 // Price Display Component (with special price styling)
 const PriceDisplay = ({ price, yearPrices }) => {
@@ -10691,13 +11026,27 @@ const PriceDisplay = ({ price, yearPrices }) => {
             fontSize: "var(--bw-font-size-medium)",
             fontWeight: "600",
             padding: "3px 8px",
-            marginTop: "-3px",
             borderRadius: "var(--bw-border-radius-small)",
             fontFamily: "var(--bw-font-family)",
             border: displayInfo ? "none" : "1px solid var(--bw-border-color)",
             boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
         }, children: formatCurrency(price) }));
 };
+const spinner = (borderColor) => (jsx("div", { style: {
+        width: "auto",
+        height: "auto",
+        fontSize: "16px",
+        color: "var(--bw-text-color)",
+        animation: "spin 1s linear infinite",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+    }, children: jsx("div", { style: {
+            width: "16px",
+            height: "16px",
+            border: `3px dotted ${"var(--bw-highlight-color)"}`,
+            borderRadius: "50%",
+        } }) }));
 function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
     const [selectedEventInstanceId, setSelectedEventInstanceId] = useState(null);
     const [openMonths, setOpenMonths] = useState(new Set());
@@ -10774,7 +11123,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 			.bw-accordion-trigger,
 			.bw-event-instance-card {
 				position: relative;
-				overflow: hidden;
 			}
 
 			.bw-accordion-trigger::before,
@@ -10823,14 +11171,11 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 					height: 32px !important;
 					font-size: 1rem !important;
 				}
-				.bw-event-instance-title {
-					font-size: 1rem !important;
-				}
 				.bw-event-instance-price {
 					font-size: 1.1rem !important;
 				}
 			}
-		` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, width: "500px", children: jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsx("div", { style: {
+		` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, children: jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsx("div", { style: {
                                 display: "flex",
                                 flexDirection: "column",
                                 gap: "20px",
@@ -10932,13 +11277,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                                                 height: "20px",
                                                                 backgroundColor: "var(--bw-border-color)",
                                                                 borderRadius: "8px",
-                                                            } })] }), eventIdx === 0 && (jsx("div", { style: {
-                                                        width: "90%",
-                                                        height: "12px",
-                                                        backgroundColor: "var(--bw-border-color)",
-                                                        borderRadius: "4px",
-                                                        marginTop: "8px",
-                                                    } }))] }, eventIdx))) })] }, idx))) }) }) })] }));
+                                                            } })] })] }, eventIdx))) })] }, idx))) }) }) })] }));
     }
     // Show empty state only if not loading and no event instances
     if (eventInstances.length === 0) {
@@ -10947,7 +11286,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 					.bw-accordion-trigger,
 					.bw-event-instance-card {
 						position: relative;
-						overflow: hidden;
 					}
 
 					.bw-accordion-trigger::before,
@@ -10996,9 +11334,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 							height: 32px !important;
 							font-size: 1rem !important;
 						}
-						.bw-event-instance-title {
-							font-size: 1rem !important;
-						}
 						.bw-event-instance-price {
 							font-size: 1.1rem !important;
 						}
@@ -11029,7 +11364,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 				.bw-accordion-trigger,
 				.bw-event-instance-card {
 					position: relative;
-					overflow: hidden;
 				}
 
 				.bw-accordion-trigger::before,
@@ -11078,14 +11412,11 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
 						height: 32px !important;
 						font-size: 1rem !important;
 					}
-					.bw-event-instance-title {
-						font-size: 1rem !important;
-					}
 					.bw-event-instance-price {
 						font-size: 1.1rem !important;
 					}
 				}
-			` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", children: jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsx("div", { style: {
+			` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, children: jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsx("div", { style: {
                             display: "flex",
                             flexDirection: "column",
                             gap: "20px",
@@ -11160,7 +11491,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                                             color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
                                                             animation: "spin 1s linear infinite",
                                                             fontSize: "32px",
-                                                        }, children: "\u27F3" }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxs("div", { style: {
+                                                        }, children: spinner() }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxs("div", { style: {
                                                         display: "flex",
                                                         justifyContent: "space-between",
                                                         width: "100%",
@@ -11189,12 +11520,21 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                                                         alignItems: "start",
                                                                         justifyContent: "start",
                                                                         lineHeight: "1.2",
-                                                                    }, children: [jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) })] })] }), jsx("div", { className: "bw-event-instance-price", style: {
+                                                                    }, children: [jsxs("div", { children: [jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
+                                                                                    formatWeekday(event.endTime) && (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsx("div", { children: formatWeekday(event.startTime) ===
+                                                                                formatWeekday(event.endTime) ? (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), 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) })] })) : (jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxs("span", { style: {
+                                                                        fontSize: "12px",
+                                                                        fontWeight: 400,
+                                                                        color: "var(--bw-text-muted)",
+                                                                        marginLeft: "6px",
+                                                                        background: "var(--bw-background-muted)",
+                                                                        whiteSpace: "nowrap",
+                                                                    }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), jsx("div", { className: "bw-event-instance-price", style: {
                                                                 textAlign: "right",
                                                                 display: "flex",
                                                                 flexDirection: "column",
                                                                 alignItems: "end",
-                                                            }, children: jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), jsxs("h4", { className: "bw-event-instance-title", style: {
+                                                            }, children: jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsx("h4", { className: "bw-event-instance-title", style: {
                                                         fontSize: "var(--bw-font-size)",
                                                         fontWeight: "600",
                                                         color: "var(--bw-text-color)",
@@ -11203,26 +11543,8 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                                         display: "flex",
                                                         alignItems: "center",
                                                         gap: "8px",
-                                                    }, children: [event.name, jsxs("span", { style: {
-                                                                fontSize: "12px",
-                                                                fontWeight: 400,
-                                                                color: "var(--bw-text-muted)",
-                                                                marginLeft: "6px",
-                                                                background: "var(--bw-background-muted)",
-                                                                borderRadius: "8px",
-                                                                padding: "2px 8px",
-                                                                whiteSpace: "nowrap",
-                                                            }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (jsx("p", { style: {
-                                                        fontSize: "12px",
-                                                        color: "var(--bw-text-muted)",
-                                                        marginTop: "8px",
-                                                        display: "-webkit-box",
-                                                        WebkitBoxOrient: "vertical",
-                                                        WebkitLineClamp: 2,
-                                                        overflow: "hidden",
-                                                        margin: "0",
-                                                        lineHeight: "1.3",
-                                                    }, children: event.notes }))] }, event.id));
+                                                        maxWidth: "230px",
+                                                    }, children: event.name }))] }, event.id));
                                     }) }) }, month));
                         }) }) }) })] }));
 }
@@ -11863,7 +12185,6 @@ function UniversalBookingWidget({ config: baseConfig }) {
                 body: JSON.stringify(requestBody),
             });
             const data = await response.json();
-            console.log("Event details response:", { status: response.status, data }); // Debug log
             if (response.ok) {
                 setEventDetails(data.eventDetails);
                 // Store system configuration for PaymentForm