@bigz-app/booking-widget 0.2.3 → 0.3.1

package/dist/booking-widget.js

@@ -295,9 +295,9 @@
   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
@@ -9197,7 +9197,7 @@
 
   var reactStripe_umdExports = reactStripe_umd.exports;
 
-  const spinner = (borderColor) => (u$2("div", { style: {
+  const spinner$1 = (borderColor) => (u$2("div", { style: {
           width: "auto",
           height: "auto",
           fontSize: "16px",
@@ -9333,7 +9333,7 @@
                       if (!isLoading) {
                           e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
                       }
-                  }, children: isLoading ? (u$2(k$3, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (u$2(k$3, { children: [" ", totalAmount <
+                  }, children: isLoading ? (u$2(k$3, { children: [spinner$1("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (u$2(k$3, { children: [" ", totalAmount <
                               eventDetails.price * formData.participants.filter((p) => p.name.trim()).length
                               ? "Anzahlen & buchen"
                               : "Jetzt buchen"] })) }), u$2("style", { children: `
@@ -9349,6 +9349,64 @@
       const [paymentIntentId, setPaymentIntentId] = d$1(null);
       const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = d$1(false);
       const [paymentError, setPaymentError] = d$1(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
+      y$1(() => {
+          if (!paymentIntentId) {
+              const restored = loadPersistedPaymentIntent();
+              if (restored) {
+                  setPaymentIntentId(restored);
+              }
+          }
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [storageKey]);
+      // Persist whenever paymentIntentId changes
+      y$1(() => {
+          if (paymentIntentId) {
+              persistPaymentIntent(paymentIntentId);
+          }
+      }, [paymentIntentId]);
       // Create payment intent when component mounts or when relevant data changes
       y$1(() => {
           const createPaymentIntent = async () => {
@@ -9453,7 +9511,7 @@
                   justifyContent: "center",
                   padding: "var(--bw-spacing)",
                   gap: "8px",
-              }, children: [spinner(), u$2("span", { style: {
+              }, children: [spinner$1(), u$2("span", { style: {
                           color: "var(--bw-text-muted)",
                           fontFamily: "var(--bw-font-family)",
                           fontSize: "var(--bw-font-size)",
@@ -9478,10 +9536,16 @@
               clientSecret,
               appearance: stripeAppearance || { theme: "stripe" },
               locale: config.locale || "de",
-          }, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
+          }, children: u$2(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] = d$1(false);
       const [isAnimating, setIsAnimating] = d$1(false);
       const themedStyles = useStyles();
@@ -9880,7 +9944,7 @@
           marginBottom: "8px",
           fontFamily: "var(--bw-font-family)",
       };
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", children: u$2("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$2("div", { style: {
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, children: u$2("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$2("div", { style: {
                           backgroundColor: "var(--bw-surface-color)",
                           border: `1px solid var(--bw-border-color)`,
                           backdropFilter: "blur(4px)",
@@ -10098,7 +10162,7 @@
                                                   fontFamily: "var(--bw-font-family)",
                                                   display: "block",
                                                   marginBottom: "8px",
-                                              }, children: "Kommentar (optional)" }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zu Ihrer Buchung...", rows: 3, style: {
+                                              }, children: "Kommentar (optional)" }), u$2("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)`,
@@ -10293,6 +10357,258 @@
                 ` })] }) }));
   }
 
+  /**
+   * 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] = d$1(null);
       const [eventDetails, setEventDetails] = d$1(null);
@@ -10337,6 +10653,27 @@
                       });
                       // 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");
@@ -10726,44 +11063,42 @@
   // Allocation Badge Component
   const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
       const badgeInfo = getAllocationBadgeInfo(availableSpots, maxParticipants);
-      if (!badgeInfo)
-          return null;
       return (u$2("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 (u$2("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 }) => {
@@ -10776,13 +11111,27 @@
               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) => (u$2("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: u$2("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] = d$1(null);
       const [openMonths, setOpenMonths] = d$1(new Set());
@@ -10859,7 +11208,6 @@
 			.bw-accordion-trigger,
 			.bw-event-instance-card {
 				position: relative;
-				overflow: hidden;
 			}
 
 			.bw-accordion-trigger::before,
@@ -10908,14 +11256,11 @@
 					height: 32px !important;
 					font-size: 1rem !important;
 				}
-				.bw-event-instance-title {
-					font-size: 1rem !important;
-				}
 				.bw-event-instance-price {
 					font-size: 1.1rem !important;
 				}
 			}
-		` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, width: "500px", children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
+		` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
                                   display: "flex",
                                   flexDirection: "column",
                                   gap: "20px",
@@ -11017,13 +11362,7 @@
                                                                   height: "20px",
                                                                   backgroundColor: "var(--bw-border-color)",
                                                                   borderRadius: "8px",
-                                                              } })] }), eventIdx === 0 && (u$2("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) {
@@ -11032,7 +11371,6 @@
 					.bw-accordion-trigger,
 					.bw-event-instance-card {
 						position: relative;
-						overflow: hidden;
 					}
 
 					.bw-accordion-trigger::before,
@@ -11081,9 +11419,6 @@
 							height: 32px !important;
 							font-size: 1rem !important;
 						}
-						.bw-event-instance-title {
-							font-size: 1rem !important;
-						}
 						.bw-event-instance-price {
 							font-size: 1.1rem !important;
 						}
@@ -11114,7 +11449,6 @@
 				.bw-accordion-trigger,
 				.bw-event-instance-card {
 					position: relative;
-					overflow: hidden;
 				}
 
 				.bw-accordion-trigger::before,
@@ -11163,14 +11497,11 @@
 						height: 32px !important;
 						font-size: 1rem !important;
 					}
-					.bw-event-instance-title {
-						font-size: 1rem !important;
-					}
 					.bw-event-instance-price {
 						font-size: 1.1rem !important;
 					}
 				}
-			` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
+			` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
                               display: "flex",
                               flexDirection: "column",
                               gap: "20px",
@@ -11245,7 +11576,7 @@
                                                               color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
                                                               animation: "spin 1s linear infinite",
                                                               fontSize: "32px",
-                                                          }, children: "\u27F3" }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
+                                                          }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
                                                           display: "flex",
                                                           justifyContent: "space-between",
                                                           width: "100%",
@@ -11274,12 +11605,21 @@
                                                                           alignItems: "start",
                                                                           justifyContent: "start",
                                                                           lineHeight: "1.2",
-                                                                      }, children: [u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) })] })] }), u$2("div", { className: "bw-event-instance-price", style: {
+                                                                      }, children: [u$2("div", { children: [u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
+                                                                                      formatWeekday(event.endTime) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), u$2("div", { children: formatWeekday(event.startTime) ===
+                                                                                  formatWeekday(event.endTime) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), u$2("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" : ""] })] }), u$2("div", { className: "bw-event-instance-price", style: {
                                                                   textAlign: "right",
                                                                   display: "flex",
                                                                   flexDirection: "column",
                                                                   alignItems: "end",
-                                                              }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), u$2("h4", { className: "bw-event-instance-title", style: {
+                                                              }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "bw-event-instance-title", style: {
                                                           fontSize: "var(--bw-font-size)",
                                                           fontWeight: "600",
                                                           color: "var(--bw-text-color)",
@@ -11288,26 +11628,8 @@
                                                           display: "flex",
                                                           alignItems: "center",
                                                           gap: "8px",
-                                                      }, children: [event.name, u$2("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 && (u$2("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));
                           }) }) }) })] }));
   }
@@ -11948,7 +12270,6 @@
                   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