@bigz-app/booking-widget 1.3.2 → 1.3.3

package/dist/index.esm.js

@@ -15390,6 +15390,88 @@ function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, is
     return (jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsx("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsx("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [jsx("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), jsxs("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
 }
 
+/**
+ * Widget analytics — server-side PostHog tracking via batched sendBeacon.
+ *
+ * Events are buffered locally and flushed every few seconds (or on page
+ * unload) as a single POST to `/api/booking/track`.  This avoids extra
+ * network requests on every click while still capturing a complete funnel.
+ */
+let buffer = [];
+let flushTimer = null;
+let currentApiBaseUrl = "";
+let currentOrganizationId = "";
+const FLUSH_INTERVAL_MS = 3000;
+function flush() {
+    if (buffer.length === 0)
+        return;
+    const payload = JSON.stringify({
+        organizationId: currentOrganizationId,
+        events: buffer,
+    });
+    buffer = [];
+    const url = getApiUrl(currentApiBaseUrl, "/booking/track");
+    // Use fetch with keepalive as primary — works cross-origin with CORS.
+    // sendBeacon silently fails cross-origin with application/json because
+    // it can't do CORS preflight, so we only use it as a text/plain fallback
+    // on page unload when fetch may be aborted.
+    try {
+        void fetch(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: payload,
+            keepalive: true,
+        });
+    }
+    catch {
+        // fetch failed (e.g. during page unload) — try sendBeacon with text/plain
+        if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+            const blob = new Blob([payload], { type: "text/plain" });
+            navigator.sendBeacon(url, blob);
+        }
+    }
+}
+function scheduleFlush() {
+    if (flushTimer)
+        return;
+    flushTimer = setTimeout(() => {
+        flushTimer = null;
+        flush();
+    }, FLUSH_INTERVAL_MS);
+}
+/**
+ * Initialise the analytics module. Must be called once before `trackEvent`.
+ */
+function initAnalytics(apiBaseUrl, organizationId) {
+    currentApiBaseUrl = apiBaseUrl;
+    currentOrganizationId = organizationId;
+    if (typeof window !== "undefined") {
+        window.addEventListener("pagehide", flush);
+        window.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "hidden")
+                flush();
+        });
+    }
+}
+/**
+ * Queue a widget event. Non-blocking, fire-and-forget.
+ */
+function trackEvent(event, properties = {}) {
+    if (typeof window === "undefined")
+        return;
+    if (!currentOrganizationId)
+        return;
+    buffer.push({
+        event,
+        properties,
+        domain: window.location.hostname,
+        url: window.location.href,
+        referrer: document.referrer,
+        timestamp: new Date().toISOString(),
+    });
+    scheduleFlush();
+}
+
 // Main widget component
 function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onTimezone, }) {
     const t = useTranslations();
@@ -15582,6 +15664,21 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             setIsLoadingVoucherConfig(false);
         }
     };
+    // Initialise analytics once on mount
+    const analyticsInitRef = useRef(false);
+    useEffect(() => {
+        if (!analyticsInitRef.current && config.organizationId) {
+            analyticsInitRef.current = true;
+            initAnalytics(config.apiBaseUrl, config.organizationId);
+            trackEvent("widget_loaded", {
+                viewMode,
+                eventTypeId: config.eventTypeId,
+                categoryId: config.categoryId,
+                eventInstanceId: config.eventInstanceId,
+                isStandaloneVoucherMode,
+            });
+        }
+    }, [config.organizationId, config.apiBaseUrl]);
     // Fire widget pageview once when Google Ads config is received from API
     const pageviewFiredRef = useRef(false);
     useEffect(() => {
@@ -15678,6 +15775,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                         });
                         const voucherData = await voucherResponse.json();
                         if (voucherResponse.ok && voucherData.voucherResult) {
+                            trackEvent("voucher_purchased", { voucherType: voucherData.voucherResult.voucherType, source: "stripe_redirect" });
                             setVoucherPurchaseResult(voucherData.voucherResult);
                             setIsSuccess(true);
                             setSuccessPaymentId(null);
@@ -15687,6 +15785,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     catch {
                         // Fall back to booking success flow if voucher lookup fails.
                     }
+                    trackEvent("booking_completed", { paymentIntentId: stripeReturn.paymentIntent, source: "stripe_redirect" });
                     setVoucherPurchaseResult(null);
                     setSuccessPaymentId(stripeReturn.paymentIntent);
                     setIsSuccess(true);
@@ -15724,6 +15823,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 });
                 const voucherData = await voucherResponse.json();
                 if (voucherResponse.ok && voucherData.voucherResult) {
+                    trackEvent("voucher_purchased", { voucherType: voucherData.voucherResult.voucherType, source: "mollie_redirect" });
                     setVoucherPurchaseResult(voucherData.voucherResult);
                     setIsSuccess(true);
                     setSuccessPaymentId(null);
@@ -15762,6 +15862,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         window[globalFlagKey] = true;
         const timer = setTimeout(() => {
             setShowPromoDialog(true);
+            trackEvent("promo_dialog_shown", { discountCode: config.promo?.discountCode });
         }, 1000);
         return () => clearTimeout(timer);
     }, [config.promo?.enabled, config.promo?.discountCode]);
@@ -15771,6 +15872,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         localStorage.setItem(`bigz-promo-${promoId}-shown`, "true");
     };
     const handlePromoCtaClick = () => {
+        trackEvent("promo_cta_clicked", { discountCode: config.promo?.discountCode });
         setShowPromoDialog(false);
         const promoId = config.promo?.discountCode || "default";
         localStorage.setItem(`bigz-promo-${promoId}-shown`, "true");
@@ -15805,6 +15907,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             }
             extractGoogleAdsConfig(data);
             setEventTypes(data.eventTypes);
+            trackEvent("event_types_loaded", { count: data.eventTypes.length });
             if (isSingleEventTypeMode && data.eventTypes.length === 1) {
                 setSelectedEventType(data.eventTypes[0]);
                 await loadEventInstances(data.eventTypes[0].id);
@@ -16060,6 +16163,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     }
     // Event type selection handlers
     const handleEventTypeSelect = async (eventType) => {
+        trackEvent("event_type_selected", { eventTypeId: eventType.id, eventTypeName: eventType.name });
         setSelectedEventType(eventType);
         setCurrentStep("eventInstances");
         setShouldRenderInstanceSelection(true);
@@ -16073,6 +16177,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     };
     // Event instance selection handlers
     const handleEventInstanceSelect = async (eventInstance) => {
+        trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
         setSelectedEventInstance(eventInstance);
         bookingReturnStep.current = "eventInstances";
         // Set default participant count for upsell calculations
@@ -16085,9 +16190,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             try {
                 const availableUpsells = await loadUpsells(selectedEventType.id, eventInstance.id, defaultParticipantCount);
                 if (availableUpsells.length > 0) {
-                    // Show upsells step
+                    trackEvent("upsell_step_viewed", { count: availableUpsells.length });
                     setUpsells(availableUpsells);
-                    // Pre-select default-checked upsells
                     const defaultSelections = availableUpsells
                         .filter((upsell) => upsell.defaultChecked && upsell.available)
                         .map((upsell) => ({
@@ -16097,7 +16201,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     setSelectedUpsells(defaultSelections);
                     setCurrentStep("upsells");
                     setIsLoadingUpsells(false);
-                    return; // Don't proceed to booking yet
+                    return;
                 }
             }
             catch (err) {
@@ -16107,7 +16211,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 setIsLoadingUpsells(false);
             }
         }
-        // No upsells available, go directly to booking
+        trackEvent("booking_form_opened", { fromUpsells: false });
         setCurrentStep("booking");
         setShouldRenderBookingForm(true);
         setIsLoadingEventDetails(true);
@@ -16130,6 +16234,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setEventDetails(null);
     };
     const handleBookingSuccess = (result) => {
+        trackEvent("booking_completed", { paymentIntentId: result.paymentIntent?.id });
         setIsSuccess(true);
         setSuccessPaymentId(result.paymentIntent.id);
         setSidebarOpen(false);
@@ -16145,7 +16250,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setSelectedUpsells(selections);
     };
     const handleUpsellsContinue = async () => {
-        // Move to booking step
+        trackEvent("booking_form_opened", { fromUpsells: true });
         setCurrentStep("booking");
         setShouldRenderBookingForm(true);
         setIsLoadingEventDetails(true);
@@ -16165,8 +16270,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     };
     // Voucher purchase handlers
     const handleVoucherCardClick = async () => {
+        trackEvent("voucher_card_clicked");
         setPreselectedVoucherEventTypeId(null);
-        // Ensure voucher config and event types are loaded before opening the form
         if (!voucherConfig || voucherEventTypes.length === 0) {
             await loadVoucherConfig();
         }
@@ -16185,6 +16290,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setPreselectedVoucherEventTypeId(null);
     };
     const handleVoucherSuccess = (result) => {
+        trackEvent("voucher_purchased", { voucherType: result.voucherType });
         setVoucherPurchaseResult(result);
         setIsVoucherFormOpen(false);
         setIsSuccess(true);
@@ -16267,8 +16373,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             try {
                 const availableUpsells = await loadUpsells(eventTypeForUpsells.id, eventInstanceId, defaultParticipantCount);
                 if (availableUpsells.length > 0) {
+                    trackEvent("upsell_step_viewed", { count: availableUpsells.length });
                     setUpsells(availableUpsells);
-                    // Pre-select default-checked upsells
                     const defaultSelections = availableUpsells
                         .filter((upsell) => upsell.defaultChecked && upsell.available)
                         .map((upsell) => ({
@@ -16278,7 +16384,6 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     setSelectedUpsells(defaultSelections);
                     setCurrentStep("upsells");
                     setIsLoadingUpsells(false);
-                    // Load event details in background for when user continues past upsells
                     void loadEventDetails(eventInstanceId);
                     return;
                 }