@founderhq/journeys 0.3.67 → 0.4.0

package/dist/index.cjs

@@ -676,6 +676,8 @@ function JourneyProvider({
   const { trigger } = react$1.useWebHaptics();
   const onEventRef = React.useRef(onEvent);
   const rawAnswersRef = React.useRef({});
+  const sessionStartEmittedRef = React.useRef(false);
+  const lastViewedStepIdRef = React.useRef(null);
   const [discountCodeDialog, setDiscountCodeDialog] = React.useState(null);
   React.useEffect(() => {
     onEventRef.current = onEvent;
@@ -735,6 +737,39 @@ function JourneyProvider({
     () => normalizedConfig.steps.flatMap(getStepVariables),
     [normalizedConfig.steps]
   );
+  React.useEffect(() => {
+    var _a, _b;
+    const currentStep = config.steps[currentStepIndex];
+    if (!currentStep) return;
+    const eventAnswers = getEventAnswers(
+      config.computedVariables,
+      rawAnswersRef.current
+    );
+    const strippedStep = stripOptionsFromEventStep(currentStep);
+    if (!sessionStartEmittedRef.current) {
+      sessionStartEmittedRef.current = true;
+      (_a = onEventRef.current) == null ? void 0 : _a.call(onEventRef, __spreadProps(__spreadValues({
+        type: "session_start",
+        step: strippedStep
+      }, eventAnswers), {
+        variables: allVariables
+      }));
+    }
+    if (lastViewedStepIdRef.current !== currentStep.id) {
+      lastViewedStepIdRef.current = currentStep.id;
+      (_b = onEventRef.current) == null ? void 0 : _b.call(onEventRef, __spreadProps(__spreadValues({
+        type: "step_view",
+        step: strippedStep
+      }, eventAnswers), {
+        variables: allVariables
+      }));
+    }
+  }, [
+    allVariables,
+    config.computedVariables,
+    config.steps,
+    currentStepIndex
+  ]);
   const setAnswer = React.useCallback((stepId, answer) => {
     if (computedVariableIds.has(stepId)) return;
     setRawAnswers((prev) => {
@@ -9635,19 +9670,454 @@ function JourneyShell({ className, theme } = {}) {
     ) })
   ] });
 }
+var JOURNEY_LIBRARY_NAME = "@founderhq/journeys";
+var JOURNEY_LIBRARY_VERSION = "0.4.0";
+function randomId(prefix) {
+  const cryptoRef = globalThis.crypto;
+  if (cryptoRef == null ? void 0 : cryptoRef.randomUUID) return `${prefix}_${cryptoRef.randomUUID()}`;
+  return `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
+}
+function readJson(storage, key, fallback) {
+  try {
+    const raw = storage.getItem(key);
+    return raw ? JSON.parse(raw) : fallback;
+  } catch (e) {
+    return fallback;
+  }
+}
+function getStoredId(storage, key, prefix) {
+  try {
+    const existing = storage.getItem(key);
+    if (existing) return existing;
+    const next = randomId(prefix);
+    storage.setItem(key, next);
+    return next;
+  } catch (e) {
+    return randomId(prefix);
+  }
+}
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function cleanObject(value) {
+  if (!value || typeof value !== "object") return {};
+  return __spreadValues({}, value);
+}
+var DEFAULT_REDACTED_URL_PARAMS = [
+  "access_token",
+  "api_key",
+  "auth",
+  "code",
+  "email",
+  "key",
+  "otp",
+  "password",
+  "phone",
+  "secret",
+  "signature",
+  "token"
+];
+function safeContextFactory(factory) {
+  if (typeof factory !== "function") return void 0;
+  try {
+    const value = factory();
+    return isRecord(value) ? value : void 0;
+  } catch (e) {
+    return void 0;
+  }
+}
+function safeTimezone() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch (e) {
+    return void 0;
+  }
+}
+function campaignContext(params) {
+  var _a, _b, _c, _d, _e;
+  return cleanObject({
+    source: (_a = params.get("utm_source")) != null ? _a : void 0,
+    medium: (_b = params.get("utm_medium")) != null ? _b : void 0,
+    name: (_c = params.get("utm_campaign")) != null ? _c : void 0,
+    term: (_d = params.get("utm_term")) != null ? _d : void 0,
+    content: (_e = params.get("utm_content")) != null ? _e : void 0
+  });
+}
+function redactedSearch(params, redactUrlParams) {
+  if ([...params.keys()].length === 0) return "";
+  const next = new URLSearchParams(params);
+  const redactAll = redactUrlParams === true;
+  const names = Array.isArray(redactUrlParams) && redactUrlParams.length > 0 ? redactUrlParams : DEFAULT_REDACTED_URL_PARAMS;
+  const redactedNames = new Set(names.map((name) => name.toLowerCase()));
+  for (const key of [...next.keys()]) {
+    if (redactAll || redactedNames.has(key.toLowerCase())) {
+      next.set(key, "[redacted]");
+    }
+  }
+  const value = next.toString();
+  return value ? `?${value}` : "";
+}
+function pageContext(redactUrlParams) {
+  if (typeof window === "undefined") return void 0;
+  const params = new URLSearchParams(window.location.search);
+  const campaign = campaignContext(params);
+  const search = redactedSearch(params, redactUrlParams);
+  return cleanObject({
+    url: `${window.location.origin}${window.location.pathname}${search}${window.location.hash}`,
+    path: window.location.pathname,
+    search: search || void 0,
+    title: document.title,
+    referrer: document.referrer,
+    campaign
+  });
+}
+function captureContext(capture, runtime) {
+  var _a, _b;
+  const customContext = cleanObject(__spreadValues(__spreadValues({}, (_a = capture.context) != null ? _a : {}), (_b = safeContextFactory(capture.contextFactory)) != null ? _b : {}));
+  if (capture.captureContext === false) {
+    return customContext;
+  }
+  const page = pageContext(capture.redactUrlParams);
+  const navigatorRef = typeof window !== "undefined" ? window.navigator : void 0;
+  const screenRef = typeof window !== "undefined" ? window.screen : void 0;
+  return cleanObject(__spreadValues({
+    source: { type: "embed", product: "journeys" },
+    library: {
+      name: JOURNEY_LIBRARY_NAME,
+      version: JOURNEY_LIBRARY_VERSION
+    },
+    anonymousId: runtime.visitorId,
+    sessionId: runtime.clientSessionId,
+    locale: navigatorRef == null ? void 0 : navigatorRef.language,
+    timezone: safeTimezone(),
+    userAgent: navigatorRef == null ? void 0 : navigatorRef.userAgent,
+    page,
+    campaign: isRecord(page) ? page.campaign : void 0,
+    screen: screenRef ? { width: screenRef.width, height: screenRef.height } : void 0
+  }, customContext));
+}
+function toJsonRecord(value) {
+  return isRecord(value) ? value : {};
+}
+function answerValue(answers, variable) {
+  return Object.prototype.hasOwnProperty.call(answers, variable) ? answers[variable] : void 0;
+}
+function stepAnswerVariables(step) {
+  var _a, _b, _c, _d, _e;
+  if (step.type === "swipe_cards") {
+    return ((_a = step.swipeCards) != null ? _a : []).map((card) => ({
+      stepId: step.id,
+      variable: card.variable,
+      label: card.text
+    }));
+  }
+  if (step.type === "input") {
+    return ((_b = step.fields) != null ? _b : []).map((field) => {
+      var _a2;
+      return {
+        stepId: step.id,
+        variable: (_a2 = field.variable) != null ? _a2 : field.id,
+        label: field.label,
+        fieldType: field.type
+      };
+    });
+  }
+  return [
+    {
+      stepId: step.id,
+      variable: (_c = step.variable) != null ? _c : step.id,
+      label: (_e = (_d = step.question) != null ? _d : step.preface) != null ? _e : step.id
+    }
+  ];
+}
+function buildAnswerSnapshot(config, answers) {
+  const items = [];
+  for (const step of config.steps) {
+    for (const item of stepAnswerVariables(step)) {
+      const value = answerValue(answers, item.variable);
+      if (value === void 0) continue;
+      items.push({
+        stepId: item.stepId,
+        variable: item.variable,
+        label: item.label,
+        value
+      });
+    }
+  }
+  return { items };
+}
+function buildRespondentSnapshot(config, answers) {
+  var _a, _b;
+  const snapshot = {};
+  for (const step of config.steps) {
+    if (step.type !== "input") continue;
+    for (const field of (_a = step.fields) != null ? _a : []) {
+      const variable = (_b = field.variable) != null ? _b : field.id;
+      const value = answerValue(answers, variable);
+      if (value !== void 0) snapshot[variable] = value;
+    }
+  }
+  return snapshot;
+}
+function buildContactRef(config, answers) {
+  var _a, _b;
+  const contact = {};
+  for (const step of config.steps) {
+    if (step.type !== "input") continue;
+    for (const field of (_a = step.fields) != null ? _a : []) {
+      const variable = (_b = field.variable) != null ? _b : field.id;
+      const value = answerValue(answers, variable);
+      if (typeof value !== "string" || !value.trim()) continue;
+      const normalizedVariable = variable.toLowerCase().replace(/[-_\s]/g, "");
+      if (field.type === "email" || normalizedVariable.includes("email")) {
+        contact.email = value;
+      } else if (field.type === "tel" || normalizedVariable.includes("phone")) {
+        contact.phone = value;
+      } else if (normalizedVariable === "externalid") {
+        contact.externalId = value;
+      }
+    }
+  }
+  return Object.keys(contact).length > 0 ? contact : void 0;
+}
+function eventStepId(event) {
+  if ("step" in event) return event.step.id;
+  if (event.type === "navigate") return event.to.id;
+  if (event.type === "purchase_intent") return event.stepId;
+  return void 0;
+}
+function eventProperties(event) {
+  if (event.type === "step_submit") {
+    return { submitted: event.submitted };
+  }
+  if (event.type === "navigate") {
+    return {
+      fromStepId: event.from.id,
+      toStepId: event.to.id,
+      direction: event.direction
+    };
+  }
+  if (event.type === "purchase_intent") {
+    return __spreadValues({
+      variable: event.variable,
+      plan: event.plan
+    }, event.discount ? { discount: event.discount } : {});
+  }
+  return {};
+}
+function toCaptureEvent(config, event, sequence, runtime) {
+  const answers = "answers" in event ? event.answers : {};
+  const payload = {
+    id: createCaptureEventId(runtime, event, sequence),
+    type: event.type,
+    occurredAt: (/* @__PURE__ */ new Date()).toISOString(),
+    stepId: eventStepId(event),
+    properties: eventProperties(event),
+    answers: toJsonRecord(answers),
+    computedVariables: "computedVariables" in event ? toJsonRecord(event.computedVariables) : void 0
+  };
+  if (event.type === "complete") {
+    payload.respondentSnapshot = buildRespondentSnapshot(config, answers);
+    payload.answerSnapshot = buildAnswerSnapshot(config, answers);
+    payload.contact = buildContactRef(config, answers);
+  }
+  return payload;
+}
+function createCaptureEventId(runtime, event, sequence) {
+  return `${runtime.clientSessionId}:${event.type}:${sequence.toString(
+    36
+  )}:${randomId("fhqe")}`;
+}
+function useJourneyCapture(params) {
+  const onEventRef = React.useRef(params.onEvent);
+  const configRef = React.useRef(params.config);
+  const captureRef = React.useRef(params.capture);
+  const runtimeRef = React.useRef(null);
+  const queueRef = React.useRef([]);
+  const sequenceRef = React.useRef(0);
+  const flushingRef = React.useRef(false);
+  onEventRef.current = params.onEvent;
+  configRef.current = params.config;
+  captureRef.current = params.capture;
+  const persistQueue = React.useCallback(() => {
+    const runtime = runtimeRef.current;
+    if (!runtime || typeof window === "undefined") return;
+    try {
+      sessionStorage.setItem(
+        runtime.queueKey,
+        JSON.stringify(queueRef.current)
+      );
+    } catch (e) {
+    }
+  }, []);
+  const ensureRuntime = React.useCallback((capture) => {
+    if (typeof window === "undefined") return null;
+    const existing = runtimeRef.current;
+    if ((existing == null ? void 0 : existing.journeyId) === capture.journeyId) return existing;
+    const visitorId = getStoredId(
+      localStorage,
+      "fhq_journey_visitor_id",
+      "fhqv"
+    );
+    const clientSessionId = getStoredId(
+      sessionStorage,
+      `fhq_journey_session:${capture.journeyId}`,
+      "fhqs"
+    );
+    const queueKey = `fhq_journey_queue:${capture.journeyId}:${clientSessionId}`;
+    const runtime = {
+      journeyId: capture.journeyId,
+      visitorId,
+      clientSessionId,
+      queueKey
+    };
+    runtimeRef.current = runtime;
+    queueRef.current = readJson(
+      sessionStorage,
+      queueKey,
+      []
+    );
+    return runtime;
+  }, []);
+  const flush = React.useCallback(async () => {
+    var _a, _b, _c;
+    const capture = captureRef.current;
+    if (!capture || !configRef.current || flushingRef.current) return;
+    const runtime = ensureRuntime(capture);
+    if (!runtime || queueRef.current.length === 0) return;
+    flushingRef.current = true;
+    const batchSize = Math.max(1, (_a = capture.batchSize) != null ? _a : 10);
+    const maxRetries = Math.max(1, (_b = capture.maxRetries) != null ? _b : 3);
+    const batch = queueRef.current.slice(0, batchSize);
+    const baseUrl = (_c = capture.baseUrl) != null ? _c : "https://getfounderhq.com";
+    try {
+      const response = await fetch(
+        `${baseUrl}/api/v1/journeys/${encodeURIComponent(
+          capture.journeyId
+        )}/capture`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${capture.apiKey}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            clientSessionId: runtime.clientSessionId,
+            visitorId: runtime.visitorId,
+            context: captureContext(capture, runtime),
+            events: batch.map((item) => item.event)
+          }),
+          keepalive: batch.length <= 5
+        }
+      );
+      if (!response.ok) throw new Error(`Capture failed: ${response.status}`);
+      queueRef.current = queueRef.current.slice(batch.length);
+    } catch (e) {
+      const failedIds = new Set(batch.map((item) => item.event.id));
+      queueRef.current = queueRef.current.map(
+        (item) => failedIds.has(item.event.id) ? __spreadProps(__spreadValues({}, item), { attempts: item.attempts + 1 }) : item
+      ).filter((item) => item.attempts < maxRetries);
+    } finally {
+      persistQueue();
+      flushingRef.current = false;
+    }
+  }, [ensureRuntime, persistQueue]);
+  React.useEffect(() => {
+    var _a;
+    const capture = captureRef.current;
+    if (!capture || typeof window === "undefined") return;
+    ensureRuntime(capture);
+    const interval = window.setInterval(
+      () => void flush(),
+      Math.max(1e3, (_a = capture.flushIntervalMs) != null ? _a : 3e3)
+    );
+    const handleVisibility = () => {
+      if (document.visibilityState === "hidden") void flush();
+    };
+    window.addEventListener("beforeunload", persistQueue);
+    document.addEventListener("visibilitychange", handleVisibility);
+    void flush();
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("beforeunload", persistQueue);
+      document.removeEventListener("visibilitychange", handleVisibility);
+      persistQueue();
+    };
+  }, [ensureRuntime, flush, persistQueue, params.capture]);
+  return React.useCallback(
+    (event) => {
+      var _a, _b;
+      (_a = onEventRef.current) == null ? void 0 : _a.call(onEventRef, event);
+      const capture = captureRef.current;
+      const config = configRef.current;
+      if (!capture || !config) return;
+      const runtime = ensureRuntime(capture);
+      if (!runtime) return;
+      sequenceRef.current += 1;
+      queueRef.current.push({
+        event: toCaptureEvent(config, event, sequenceRef.current, runtime),
+        attempts: 0
+      });
+      persistQueue();
+      const batchSize = Math.max(1, (_b = capture.batchSize) != null ? _b : 10);
+      if (queueRef.current.length >= batchSize) void flush();
+    },
+    [ensureRuntime, flush, persistQueue]
+  );
+}
+var FOUNDERHQ_BASE_URL = "https://getfounderhq.com";
+function resolveJourneyBaseUrl(baseUrl) {
+  if (!baseUrl) return FOUNDERHQ_BASE_URL;
+  try {
+    const parsed = new URL(baseUrl);
+    const hostname = parsed.hostname.toLowerCase();
+    const isLocal = hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1" || hostname === "[::1]";
+    return isLocal ? parsed.origin : FOUNDERHQ_BASE_URL;
+  } catch (e) {
+    return FOUNDERHQ_BASE_URL;
+  }
+}
 function useJourneyConfig({
   apiKey,
   journeyId,
-  baseUrl = "http://localhost:3002"
+  baseUrl,
+  config,
+  capture = true
 }) {
   const [state, setState] = React.useState({ status: "loading" });
   React.useEffect(() => {
     let cancelled = false;
-    async function fetchConfig() {
-      var _a;
+    const resolvedBaseUrl = resolveJourneyBaseUrl(baseUrl);
+    async function loadConfig() {
+      var _a, _b;
       setState({ status: "loading" });
       try {
-        const url = `${baseUrl}/api/v1/journeys/${encodeURIComponent(journeyId)}`;
+        const validateUrl = `${resolvedBaseUrl}/api/v1/journeys/${encodeURIComponent(
+          journeyId
+        )}/validate`;
+        const validateRes = await fetch(validateUrl, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${apiKey}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ capture })
+        });
+        if (!validateRes.ok) {
+          const body = await validateRes.json().catch(() => ({}));
+          throw new Error(
+            (_a = body.error) != null ? _a : `Journey is unavailable (HTTP ${validateRes.status})`
+          );
+        }
+        if (config) {
+          if (!cancelled) {
+            setState({ status: "ready", config });
+          }
+          return;
+        }
+        const url = `${resolvedBaseUrl}/api/v1/journeys/${encodeURIComponent(
+          journeyId
+        )}`;
         const res = await fetch(url, {
           headers: {
             Authorization: `Bearer ${apiKey}`,
@@ -9657,7 +10127,7 @@ function useJourneyConfig({
         if (!res.ok) {
           const body = await res.json().catch(() => ({}));
           throw new Error(
-            (_a = body.error) != null ? _a : `Failed to fetch journey config (HTTP ${res.status})`
+            (_b = body.error) != null ? _b : `Failed to fetch journey config (HTTP ${res.status})`
           );
         }
         const data = await res.json();
@@ -9673,11 +10143,11 @@ function useJourneyConfig({
         }
       }
     }
-    fetchConfig();
+    loadConfig();
     return () => {
       cancelled = true;
     };
-  }, [apiKey, journeyId, baseUrl]);
+  }, [apiKey, journeyId, baseUrl, config, capture]);
   return state;
 }
 function DefaultLoading() {
@@ -9726,15 +10196,16 @@ function DefaultError({ error }) {
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.125rem", fontWeight: 600 }, children: "Failed to load journey" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.125rem", fontWeight: 600 }, children: "This Journey is unavailable" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", marginTop: "0.5rem", opacity: 0.7 }, children: error.message })
       ]
     }
   );
 }
-function JourneyRemote({
+function Journey({
   apiKey,
   journeyId,
+  config,
   baseUrl,
   storageKey,
   onEvent,
@@ -9744,9 +10215,28 @@ function JourneyRemote({
   initialOptions,
   onDiscountCodeApply,
   loadingComponent,
-  errorComponent
+  errorComponent,
+  capture
 }) {
-  const state = useJourneyConfig({ apiKey, journeyId, baseUrl });
+  const resolvedBaseUrl = resolveJourneyBaseUrl(baseUrl);
+  const captureEnabled = capture !== false;
+  const state = useJourneyConfig({
+    apiKey,
+    journeyId,
+    baseUrl: resolvedBaseUrl,
+    config,
+    capture: captureEnabled
+  });
+  const captureOption = capture === false ? false : __spreadValues({
+    apiKey,
+    journeyId,
+    baseUrl: resolvedBaseUrl
+  }, capture != null ? capture : {});
+  const capturedOnEvent = useJourneyCapture({
+    config: state.status === "ready" ? state.config : null,
+    capture: captureOption,
+    onEvent
+  });
   if (state.status === "loading") {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent != null ? loadingComponent : /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {}) });
   }
@@ -9759,35 +10249,7 @@ function JourneyRemote({
       config: state.config,
       storageKey,
       theme,
-      onEvent,
-      initialAnswers,
-      initialOptions,
-      onDiscountCodeApply,
-      children: /* @__PURE__ */ jsxRuntime.jsx(JourneyShell, { className, theme })
-    }
-  );
-}
-function Journey(props) {
-  if ("apiKey" in props && props.apiKey) {
-    return /* @__PURE__ */ jsxRuntime.jsx(JourneyRemote, __spreadValues({}, props));
-  }
-  const {
-    config,
-    storageKey,
-    onEvent,
-    className,
-    theme,
-    initialAnswers,
-    initialOptions,
-    onDiscountCodeApply
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    JourneyProvider,
-    {
-      config,
-      storageKey,
-      theme,
-      onEvent,
+      onEvent: capturedOnEvent,
       initialAnswers,
       initialOptions,
       onDiscountCodeApply,