@outlit/browser 0.4.0 → 1.0.0

package/dist/react/index.d.mts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { j as OutlitOptions, U as UserIdentity, O as Outlit } from '../tracker-DK-2gYCi.mjs';
+import { f as OutlitOptions, U as UserIdentity, O as Outlit, B as BillingOptions } from '../tracker-BY_JTlOP.mjs';
 import { BrowserTrackOptions, BrowserIdentifyOptions } from '@outlit/core';
-export { BrowserIdentifyOptions, BrowserTrackOptions, ExplicitJourneyStage, TrackerConfig } from '@outlit/core';
+export { BrowserIdentifyOptions, BrowserTrackOptions, CustomerIdentifier, ExplicitJourneyStage, TrackerConfig } from '@outlit/core';
 
 interface OutlitContextValue {
     outlit: Outlit | null;
@@ -117,25 +117,22 @@ interface UseOutlitReturn {
      */
     clearUser: () => void;
     /**
-     * Mark the current user as activated.
-     * Call after a user completes onboarding or activation milestone.
+     * User namespace methods for contact journey stages.
      */
-    activate: (properties?: Record<string, string | number | boolean | null>) => void;
+    user: {
+        identify: (options: BrowserIdentifyOptions) => void;
+        activate: (properties?: Record<string, string | number | boolean | null>) => void;
+        engaged: (properties?: Record<string, string | number | boolean | null>) => void;
+        inactive: (properties?: Record<string, string | number | boolean | null>) => void;
+    };
     /**
-     * Mark the current user as engaged.
-     * Call when user reaches a usage milestone.
+     * Customer namespace methods for billing status.
      */
-    engaged: (properties?: Record<string, string | number | boolean | null>) => void;
-    /**
-     * Mark the current user as paid.
-     * Call after successful payment/subscription.
-     */
-    paid: (properties?: Record<string, string | number | boolean | null>) => void;
-    /**
-     * Mark the current user as churned.
-     * Call when subscription is cancelled.
-     */
-    churned: (properties?: Record<string, string | number | boolean | null>) => void;
+    customer: {
+        trialing: (options: BillingOptions) => void;
+        paid: (options: BillingOptions) => void;
+        churned: (options: BillingOptions) => void;
+    };
     /**
      * Whether Outlit is initialized.
      */
@@ -159,10 +156,10 @@ interface UseOutlitReturn {
  * import { useOutlit } from '@outlit/browser/react'
  *
  * function MyComponent() {
- *   const { track, identify } = useOutlit()
+ *   const { track, user } = useOutlit()
  *
  *   return (
- *     <button onClick={() => track('button_clicked', { id: 'cta' })}>
+ *     <button onClick={() => user.activate({ milestone: 'onboarding_complete' })}>
  *       Click me
  *     </button>
  *   )
@@ -219,4 +216,4 @@ declare function useTrack(): (eventName: string, properties?: BrowserTrackOption
  */
 declare function useIdentify(): (options: BrowserIdentifyOptions) => void;
 
-export { OutlitContext, type OutlitContextValue, OutlitProvider, type OutlitProviderProps, type UseOutlitReturn, UserIdentity, useIdentify, useOutlit, useTrack };
+export { BillingOptions, OutlitContext, type OutlitContextValue, OutlitProvider, type OutlitProviderProps, type UseOutlitReturn, UserIdentity, useIdentify, useOutlit, useTrack };

package/dist/react/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { j as OutlitOptions, U as UserIdentity, O as Outlit } from '../tracker-DK-2gYCi.js';
+import { f as OutlitOptions, U as UserIdentity, O as Outlit, B as BillingOptions } from '../tracker-BY_JTlOP.js';
 import { BrowserTrackOptions, BrowserIdentifyOptions } from '@outlit/core';
-export { BrowserIdentifyOptions, BrowserTrackOptions, ExplicitJourneyStage, TrackerConfig } from '@outlit/core';
+export { BrowserIdentifyOptions, BrowserTrackOptions, CustomerIdentifier, ExplicitJourneyStage, TrackerConfig } from '@outlit/core';
 
 interface OutlitContextValue {
     outlit: Outlit | null;
@@ -117,25 +117,22 @@ interface UseOutlitReturn {
      */
     clearUser: () => void;
     /**
-     * Mark the current user as activated.
-     * Call after a user completes onboarding or activation milestone.
+     * User namespace methods for contact journey stages.
      */
-    activate: (properties?: Record<string, string | number | boolean | null>) => void;
+    user: {
+        identify: (options: BrowserIdentifyOptions) => void;
+        activate: (properties?: Record<string, string | number | boolean | null>) => void;
+        engaged: (properties?: Record<string, string | number | boolean | null>) => void;
+        inactive: (properties?: Record<string, string | number | boolean | null>) => void;
+    };
     /**
-     * Mark the current user as engaged.
-     * Call when user reaches a usage milestone.
+     * Customer namespace methods for billing status.
      */
-    engaged: (properties?: Record<string, string | number | boolean | null>) => void;
-    /**
-     * Mark the current user as paid.
-     * Call after successful payment/subscription.
-     */
-    paid: (properties?: Record<string, string | number | boolean | null>) => void;
-    /**
-     * Mark the current user as churned.
-     * Call when subscription is cancelled.
-     */
-    churned: (properties?: Record<string, string | number | boolean | null>) => void;
+    customer: {
+        trialing: (options: BillingOptions) => void;
+        paid: (options: BillingOptions) => void;
+        churned: (options: BillingOptions) => void;
+    };
     /**
      * Whether Outlit is initialized.
      */
@@ -159,10 +156,10 @@ interface UseOutlitReturn {
  * import { useOutlit } from '@outlit/browser/react'
  *
  * function MyComponent() {
- *   const { track, identify } = useOutlit()
+ *   const { track, user } = useOutlit()
  *
  *   return (
- *     <button onClick={() => track('button_clicked', { id: 'cta' })}>
+ *     <button onClick={() => user.activate({ milestone: 'onboarding_complete' })}>
  *       Click me
  *     </button>
  *   )
@@ -219,4 +216,4 @@ declare function useTrack(): (eventName: string, properties?: BrowserTrackOption
  */
 declare function useIdentify(): (options: BrowserIdentifyOptions) => void;
 
-export { OutlitContext, type OutlitContextValue, OutlitProvider, type OutlitProviderProps, type UseOutlitReturn, UserIdentity, useIdentify, useOutlit, useTrack };
+export { BillingOptions, OutlitContext, type OutlitContextValue, OutlitProvider, type OutlitProviderProps, type UseOutlitReturn, UserIdentity, useIdentify, useOutlit, useTrack };

package/dist/react/index.js

@@ -730,7 +730,7 @@ var Outlit = class {
    * Links the anonymous visitor to a known user.
    *
    * When email or userId is provided, also sets the current user identity
-   * for stage events (activate, engaged, paid).
+   * for stage events (activate, engaged, inactive).
    */
   identify(options) {
     if (!this.isTrackingEnabled) {
@@ -791,37 +791,22 @@ var Outlit = class {
     this.identify({ email: identity.email, userId: identity.userId, traits: identity.traits });
   }
   /**
-   * Mark the current user as activated.
-   * This is typically called after a user completes onboarding or a key activation milestone.
-   * Requires the user to be identified (via setUser or identify with userId).
+   * User namespace methods for contact journey stages.
    */
-  activate(properties) {
-    this.sendStageEvent("activated", properties);
-  }
-  /**
-   * Mark the current user as engaged.
-   * This is typically called when a user reaches a usage milestone.
-   * Can also be computed automatically by the engagement cron.
-   */
-  engaged(properties) {
-    this.sendStageEvent("engaged", properties);
-  }
-  /**
-   * Mark the current user as paid.
-   * This is typically called after a successful payment/subscription.
-   * Can also be triggered by Stripe integration.
-   */
-  paid(properties) {
-    this.sendStageEvent("paid", properties);
-  }
+  user = {
+    identify: (options) => this.identify(options),
+    activate: (properties) => this.sendStageEvent("activated", properties),
+    engaged: (properties) => this.sendStageEvent("engaged", properties),
+    inactive: (properties) => this.sendStageEvent("inactive", properties)
+  };
   /**
-   * Mark the current user as churned.
-   * This is typically called when a subscription is cancelled.
-   * Can also be triggered by Stripe integration.
+   * Customer namespace methods for billing status.
    */
-  churned(properties) {
-    this.sendStageEvent("churned", properties);
-  }
+  customer = {
+    trialing: (options) => this.sendBillingEvent("trialing", options),
+    paid: (options) => this.sendBillingEvent("paid", options),
+    churned: (options) => this.sendBillingEvent("churned", options)
+  };
   /**
    * Internal method to send a stage event.
    */
@@ -844,6 +829,26 @@ var Outlit = class {
     });
     this.enqueue(event);
   }
+  sendBillingEvent(status, options) {
+    if (!this.isTrackingEnabled) {
+      console.warn("[Outlit] Tracking not enabled. Call enableTracking() first.");
+      return;
+    }
+    if (!options.customerId && !options.stripeCustomerId && !options.domain) {
+      console.warn("[Outlit] customer.* requires customerId, stripeCustomerId, or domain");
+      return;
+    }
+    const event = (0, import_core3.buildBillingEvent)({
+      url: window.location.href,
+      referrer: document.referrer,
+      status,
+      customerId: options.customerId,
+      stripeCustomerId: options.stripeCustomerId,
+      domain: options.domain,
+      properties: options.properties
+    });
+    this.enqueue(event);
+  }
   /**
    * Get the current visitor ID.
    * Returns null if tracking is not enabled.
@@ -960,8 +965,11 @@ var Outlit = class {
         const blob = new Blob([JSON.stringify(payload)], { type: "application/json" });
         const sent = navigator.sendBeacon(url, blob);
         if (sent) return;
+        console.warn(
+          `[Outlit] sendBeacon failed for ${events.length} events, falling back to fetch`
+        );
       }
-      await fetch(url, {
+      const response = await fetch(url, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -969,8 +977,13 @@ var Outlit = class {
         body: JSON.stringify(payload),
         keepalive: true
       });
+      if (!response.ok) {
+        console.warn(
+          `[Outlit] Server returned ${response.status} when sending ${events.length} events`
+        );
+      }
     } catch (error) {
-      console.warn("[Outlit] Failed to send events:", error);
+      console.warn(`[Outlit] Failed to send ${events.length} events:`, error);
     }
   }
 };
@@ -1078,6 +1091,16 @@ function useOutlit() {
     },
     [outlit]
   );
+  const userIdentify = (0, import_react2.useCallback)(
+    (options) => {
+      if (!outlit) {
+        console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
+        return;
+      }
+      outlit.user.identify(options);
+    },
+    [outlit]
+  );
   const getVisitorId = (0, import_react2.useCallback)(() => {
     if (!outlit) return null;
     return outlit.getVisitorId();
@@ -1105,7 +1128,7 @@ function useOutlit() {
         console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
         return;
       }
-      outlit.activate(properties);
+      outlit.user.activate(properties);
     },
     [outlit]
   );
@@ -1115,27 +1138,47 @@ function useOutlit() {
         console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
         return;
       }
-      outlit.engaged(properties);
+      outlit.user.engaged(properties);
     },
     [outlit]
   );
-  const paid = (0, import_react2.useCallback)(
+  const inactive = (0, import_react2.useCallback)(
     (properties) => {
       if (!outlit) {
         console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
         return;
       }
-      outlit.paid(properties);
+      outlit.user.inactive(properties);
+    },
+    [outlit]
+  );
+  const trialing = (0, import_react2.useCallback)(
+    (options) => {
+      if (!outlit) {
+        console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
+        return;
+      }
+      outlit.customer.trialing(options);
+    },
+    [outlit]
+  );
+  const paid = (0, import_react2.useCallback)(
+    (options) => {
+      if (!outlit) {
+        console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
+        return;
+      }
+      outlit.customer.paid(options);
     },
     [outlit]
   );
   const churned = (0, import_react2.useCallback)(
-    (properties) => {
+    (options) => {
       if (!outlit) {
         console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
         return;
       }
-      outlit.churned(properties);
+      outlit.customer.churned(options);
     },
     [outlit]
   );
@@ -1145,10 +1188,17 @@ function useOutlit() {
     getVisitorId,
     setUser,
     clearUser,
-    activate,
-    engaged,
-    paid,
-    churned,
+    user: {
+      identify: userIdentify,
+      activate,
+      engaged,
+      inactive
+    },
+    customer: {
+      trialing,
+      paid,
+      churned
+    },
     isInitialized,
     isTrackingEnabled,
     enableTracking