@bigz-app/booking-widget 0.3.2 → 0.3.3

package/dist/index.esm.js

@@ -237,7 +237,7 @@ const resolveSemanticColor = (colorValue, fallbackValue) => {
 const themes = {
     // --- Light Themes ---
     "light-fresh": {
-        highlight: "#00a8a1", // accent-strong
+        highlight: "#00b1aa", // accent-strong
         background: "#f8fdfe", // neutral-strong (background)
         surface: "#ffffff", // card (pure white)
         text: "#0e7490", // Turquoise 800
@@ -10275,312 +10275,140 @@ 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.
+ * Simplified utility that waits 1500ms, checks/initializes gtag, and sends conversion.
  */
 /**
- * Check if Google Consent Mode has granted the necessary permissions for ads tracking
- * This checks multiple sources of consent state in order of preference
+ * Check if gtag is available in current or parent window
  */
-function checkGoogleConsent() {
-    console.log("[Google Ads Tracking] 🔍 Checking Google consent...");
+function isGtagAvailable() {
     if (typeof window === "undefined") {
-        console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+        console.warn("[Google Ads] window is undefined (SSR context)");
         return false;
     }
-    console.log("[Google Ads Tracking] ✅ Window object available");
-    // Method 1: Check dataLayer for consent_update events (most reliable)
-    if (window.dataLayer && Array.isArray(window.dataLayer)) {
-        console.log("[Google Ads Tracking] 🔍 Checking dataLayer for consent events...");
-        const dataLayer = window.dataLayer;
-        // Debug: Show the entire dataLayer contents
-        console.log("[Google Ads Tracking] 🗂️ Complete dataLayer contents:", JSON.stringify(dataLayer, null, 2));
-        console.log("[Google Ads Tracking] 📊 dataLayer length:", dataLayer.length);
-        // Look for the most recent consent update in dataLayer
-        let latestConsentState = null;
-        const foundEvents = [];
-        // Search backwards through dataLayer for most recent consent state
-        for (let i = dataLayer.length - 1; i >= 0; i--) {
-            const event = dataLayer[i];
-            console.log(`[Google Ads Tracking] 🔍 Checking dataLayer[${i}]:`, event);
-            if (event && typeof event === "object") {
-                // Check for various consent event patterns
-                if (event.event === "consent_update" || event.event === "default_consent") {
-                    console.log("[Google Ads Tracking] 📋 Found consent event:", event);
-                    foundEvents.push(event);
-                    if (event.consent_mode) {
-                        latestConsentState = event.consent_mode;
-                        break;
-                    }
-                }
-                // Also check for direct consent_mode properties
-                if (event.consent_mode) {
-                    console.log("[Google Ads Tracking] 📋 Found consent_mode property:", event);
-                    foundEvents.push(event);
-                    latestConsentState = event.consent_mode;
-                    break;
-                }
+    // Check current window
+    if (typeof window.gtag === "function") {
+        console.log("[Google Ads] gtag found in current window");
+        return true;
+    }
+    // Check parent window (for iframe/widget scenarios)
+    if (window !== window.parent) {
+        try {
+            if (typeof window.parent?.gtag === "function") {
+                console.log("[Google Ads] gtag found in parent window");
+                return true;
             }
         }
-        console.log("[Google Ads Tracking] 📋 All found consent events:", foundEvents);
-        if (latestConsentState) {
-            const adStorageGranted = latestConsentState.ad_storage === "granted";
-            console.log("[Google Ads Tracking] 🔐 ad_storage from dataLayer:", latestConsentState.ad_storage);
-            console.log("[Google Ads Tracking] 🎯 Consent result from dataLayer:", adStorageGranted);
-            return adStorageGranted;
+        catch (e) {
+            console.warn("[Google Ads] Could not access parent window for gtag (cross-origin)");
         }
-        console.log("[Google Ads Tracking] ❌ No consent events found in dataLayer");
-    }
-    console.log("[Google Ads Tracking] ❌ dataLayer not found or not an array");
-    // Method 2: Check for cookie-based consent (fallback for host implementation)
-    console.log("[Google Ads Tracking] 🔍 Checking cookie-based consent...");
-    try {
-        // Debug: Show all cookies
-        console.log("[Google Ads Tracking] 🍪 All cookies:", document.cookie);
-        const allCookies = document.cookie.split(";").map((cookie) => cookie.trim());
-        console.log("[Google Ads Tracking] 🍪 Parsed cookies:", allCookies);
-        // Check for the host page's conversion tracking consent cookie
-        const conversionTrackingCookie = document.cookie
-            .split(";")
-            .find((cookie) => cookie.trim().startsWith("conversionTrackingConsent="));
-        if (conversionTrackingCookie) {
-            const cookieValue = conversionTrackingCookie.split("=")[1];
-            const isGranted = cookieValue === "true";
-            console.log("[Google Ads Tracking] 🍪 Found conversionTrackingConsent cookie:", cookieValue);
-            console.log("[Google Ads Tracking] 🎯 Consent result from cookie:", isGranted);
-            return isGranted;
-        }
-        console.log("[Google Ads Tracking] ❌ conversionTrackingConsent cookie not found");
-        // Also check for other potential cookie names
-        const alternativeCookieNames = ["analyticsConsent", "ads_consent", "ad_storage"];
-        for (const cookieName of alternativeCookieNames) {
-            const alternativeCookie = allCookies.find((cookie) => cookie.startsWith(`${cookieName}=`));
-            if (alternativeCookie) {
-                console.log(`[Google Ads Tracking] 🍪 Found alternative cookie ${cookieName}:`, alternativeCookie);
-            }
-        }
-    }
-    catch (error) {
-        console.warn("[Google Ads Tracking] ⚠️ Error checking cookies:", error);
-    }
-    // Method 3: Check if gtag exists but no consent state found
-    if (typeof window.gtag === "function") {
-        console.log("[Google Ads Tracking] ⚠️ gtag function exists but no consent state found");
-        console.log("[Google Ads Tracking] 💡 This might indicate consent hasn't been set yet");
-    }
-    else {
-        console.log("[Google Ads Tracking] ❌ gtag function not found");
     }
-    // If no consent mechanism is found, assume consent is not granted
-    console.log("[Google Ads Tracking] 🚫 No valid consent state found, returning false");
+    console.log("[Google Ads] gtag not found");
     return false;
 }
 /**
- * Check if gtag is already initialized on the host page
+ * Initialize gtag if not already available
  */
-function isGtagInitialized() {
-    console.log("[Google Ads Tracking] 🔍 Checking if gtag is initialized...");
+function initializeGtag(tagId) {
     if (typeof window === "undefined") {
-        console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
-        return false;
+        console.warn("[Google Ads] window is undefined, cannot initialize gtag");
+        return;
     }
-    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;
+    // Skip if gtag already exists
+    if (isGtagAvailable()) {
+        console.log("[Google Ads] gtag already initialized, skipping init");
+        return;
     }
-    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);
-        }
+    // Initialize dataLayer and gtag function
+    console.log("[Google Ads] Initializing dataLayer and gtag function");
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = (...args) => {
+        window.dataLayer.push(args);
+    };
+    // Set current timestamp
+    console.log("[Google Ads] Setting gtag timestamp");
+    window.gtag("js", new Date());
+    // Load gtag script
+    console.log("[Google Ads] Loading gtag script from:", `https://www.googletagmanager.com/gtag/js?id=${tagId}`);
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
+    document.head.appendChild(script);
+    // Configure the tag
+    console.log("[Google Ads] Configuring gtag with tagId:", tagId);
+    window.gtag("config", tagId, {
+        anonymize_ip: true,
+        allow_google_signals: false,
+        allow_ad_personalization_signals: false,
     });
 }
 /**
- * Track a Google Ads conversion
+ * Send conversion event using available gtag
  */
-function trackConversion(config) {
-    console.log("[Google Ads Tracking] 🎯 Starting conversion tracking with config:", config);
+function sendConversion(config) {
     if (typeof window === "undefined") {
-        console.warn("[Google Ads Tracking] ❌ Window object not available");
+        console.warn("[Google Ads] window is undefined, cannot send conversion");
         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;
+    let gtag = window.gtag;
+    // Try parent window gtag if current window doesn't have it
+    if (typeof gtag !== "function" && window !== window.parent) {
+        try {
+            gtag = window.parent?.gtag;
+            if (typeof gtag === "function") {
+                console.log("[Google Ads] Using parent window gtag");
+            }
+        }
+        catch {
+            console.warn("[Google Ads] Could not access parent window for gtag (cross-origin)");
+        }
     }
-    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");
+    if (typeof gtag !== "function") {
+        console.warn("[Google Ads] gtag not available, cannot send conversion");
         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);
+    // Build conversion data
+    const conversionData = {
+        send_to: `${config.tagId}/${config.conversionId}`,
+    };
+    // Add optional parameters
+    if (config.conversionValue !== undefined) {
+        conversionData.value = config.conversionValue;
     }
-    catch (error) {
-        console.error("[Google Ads Tracking] ❌ Error tracking conversion:", error);
+    if (config.conversionCurrency) {
+        conversionData.currency = config.conversionCurrency;
     }
+    if (config.transactionId) {
+        conversionData.transaction_id = config.transactionId;
+    }
+    console.log("[Google Ads] Dispatching conversion event:", conversionData);
+    // Send conversion event
+    gtag("event", "conversion", conversionData);
 }
 /**
  * Main function to handle Google Ads conversion tracking
- * This function checks consent, initializes gtag if needed, and tracks the conversion
+ * Waits 1500ms, checks/initializes gtag, then sends conversion
  */
-async function handleGoogleAdsConversion(config) {
-    console.log("[Google Ads Tracking] 🎬 Starting handleGoogleAdsConversion with config:", config);
-    // Validate config
+function handleGoogleAdsConversion(config) {
+    // Validate required 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 });
+        console.warn("[Google Ads] Missing tagId or conversionId", config);
         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");
+    console.log("[Google Ads] Waiting 1500ms before tracking conversion...");
+    // Wait 1500ms before proceeding
+    setTimeout(() => {
+        console.log("[Google Ads] Checking if gtag is available...");
+        // Check if gtag is available, initialize if not
+        if (!isGtagAvailable()) {
+            console.log("[Google Ads] gtag not found, initializing...");
+            initializeGtag(config.tagId);
         }
         else {
-            console.log("[Google Ads Tracking] ⚡ gtag already initialized, proceeding...");
+            console.log("[Google Ads] gtag already available.");
         }
-        // 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;
+        console.log("[Google Ads] Sending conversion event...", config);
+        sendConversion(config);
+    }, 1500);
 }
 
 const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
@@ -10631,11 +10459,10 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                     const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
                     if (finalPaymentStatus === "succeeded" &&
                         config.googleAds?.tagId &&
-                        config.googleAds?.conversionId) {
+                        config.googleAds?.conversionId &&
+                        config.googleAds?.consent !== false) {
                         // Prepare conversion tracking data
-                        const conversionValue = config.googleAds.includeValue !== false
-                            ? getConversionValueFromBooking(data)
-                            : undefined;
+                        const conversionValue = data.order.total;
                         const transactionId = data.order.id;
                         // Track the conversion
                         handleGoogleAdsConversion({
@@ -10644,8 +10471,6 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                             conversionValue,
                             conversionCurrency: config.googleAds.conversionCurrency || "EUR",
                             transactionId,
-                        }).catch((error) => {
-                            console.warn("[BookingSuccessModal] Google Ads conversion tracking failed:", error);
                         });
                     }
                 }
@@ -10727,7 +10552,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                         fontWeight: "600",
                                         color: "var(--bw-highlight-color)",
                                         margin: "0px 10px",
-                                    }, children: "Buchung erfolgreich erstellt!" })] }), jsx("button", { onClick: handlePrint, style: {
+                                    }, children: "Reservierung erfolgreich!" })] }), jsx("button", { onClick: handlePrint, style: {
                                 backgroundColor: "transparent",
                                 border: `1px solid var(--bw-border-color)`,
                                 color: "var(--bw-text-color)",