@bigz-app/booking-widget 0.3.0 → 0.3.2

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
@@ -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 () => {
@@ -9393,7 +9451,13 @@ 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 = "450px" }) {
@@ -10208,6 +10272,317 @@ 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 checks multiple sources of consent state in order of preference
+ */
+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");
+    // 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;
+                }
+            }
+        }
+        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;
+        }
+        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");
+    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 +10627,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");
@@ -11848,7 +12244,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