@bigz-app/booking-widget 1.3.2 → 1.3.4

package/dist/booking-widget.js

@@ -15516,6 +15516,88 @@
       return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("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: [u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), u$2("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();
@@ -15708,6 +15790,21 @@
               setIsLoadingVoucherConfig(false);
           }
       };
+      // Initialise analytics once on mount
+      const analyticsInitRef = A$2(false);
+      y$1(() => {
+          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 = A$2(false);
       y$1(() => {
@@ -15804,6 +15901,7 @@
                           });
                           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);
@@ -15813,6 +15911,7 @@
                       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);
@@ -15850,6 +15949,7 @@
                   });
                   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);
@@ -15888,6 +15988,7 @@
           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]);
@@ -15897,6 +15998,7 @@
           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");
@@ -15931,6 +16033,7 @@
               }
               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);
@@ -16186,6 +16289,7 @@
       }
       // Event type selection handlers
       const handleEventTypeSelect = async (eventType) => {
+          trackEvent("event_type_selected", { eventTypeId: eventType.id, eventTypeName: eventType.name });
           setSelectedEventType(eventType);
           setCurrentStep("eventInstances");
           setShouldRenderInstanceSelection(true);
@@ -16199,6 +16303,7 @@
       };
       // 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
@@ -16211,9 +16316,8 @@
               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) => ({
@@ -16223,7 +16327,7 @@
                       setSelectedUpsells(defaultSelections);
                       setCurrentStep("upsells");
                       setIsLoadingUpsells(false);
-                      return; // Don't proceed to booking yet
+                      return;
                   }
               }
               catch (err) {
@@ -16233,7 +16337,7 @@
                   setIsLoadingUpsells(false);
               }
           }
-          // No upsells available, go directly to booking
+          trackEvent("booking_form_opened", { fromUpsells: false });
           setCurrentStep("booking");
           setShouldRenderBookingForm(true);
           setIsLoadingEventDetails(true);
@@ -16256,6 +16360,7 @@
           setEventDetails(null);
       };
       const handleBookingSuccess = (result) => {
+          trackEvent("booking_completed", { paymentIntentId: result.paymentIntent?.id });
           setIsSuccess(true);
           setSuccessPaymentId(result.paymentIntent.id);
           setSidebarOpen(false);
@@ -16271,7 +16376,7 @@
           setSelectedUpsells(selections);
       };
       const handleUpsellsContinue = async () => {
-          // Move to booking step
+          trackEvent("booking_form_opened", { fromUpsells: true });
           setCurrentStep("booking");
           setShouldRenderBookingForm(true);
           setIsLoadingEventDetails(true);
@@ -16291,8 +16396,8 @@
       };
       // 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();
           }
@@ -16311,6 +16416,7 @@
           setPreselectedVoucherEventTypeId(null);
       };
       const handleVoucherSuccess = (result) => {
+          trackEvent("voucher_purchased", { voucherType: result.voucherType });
           setVoucherPurchaseResult(result);
           setIsVoucherFormOpen(false);
           setIsSuccess(true);
@@ -16393,8 +16499,8 @@
               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) => ({
@@ -16404,7 +16510,6 @@
                       setSelectedUpsells(defaultSelections);
                       setCurrentStep("upsells");
                       setIsLoadingUpsells(false);
-                      // Load event details in background for when user continues past upsells
                       void loadEventDetails(eventInstanceId);
                       return;
                   }