@funnelsgrove/runtime 0.1.17 → 0.1.19

package/dist/config/builder-preview.protocol.d.ts

@@ -5,6 +5,7 @@ export declare const BUILDER_PREVIEW_RUNTIME_MODE_CHANGED = "builder.preview.run
 export declare const BUILDER_PREVIEW_DEFINITION_PATCH = "builder.preview.definitionPatch";
 export declare const BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED = "builder.preview.variableValuesChanged";
 export declare const BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED = "builder.preview.paywallPlansChanged";
+export declare const BUILDER_PREVIEW_THEME_CHANGED = "builder.preview.themeChanged";
 export type BuilderPreviewReadyMessage = {
     type: typeof BUILDER_PREVIEW_READY;
     stepId: string;
@@ -75,3 +76,7 @@ export type BuilderPreviewPaywallPlansChangedMessage = {
     stepId: string;
     plans: BuilderPreviewPaywallPlan[];
 };
+export type BuilderPreviewThemeChangedMessage = {
+    type: typeof BUILDER_PREVIEW_THEME_CHANGED;
+    cssVariables: Record<string, string>;
+};

package/dist/config/builder-preview.protocol.js

@@ -5,3 +5,4 @@ export const BUILDER_PREVIEW_RUNTIME_MODE_CHANGED = 'builder.preview.runtimeMode
 export const BUILDER_PREVIEW_DEFINITION_PATCH = 'builder.preview.definitionPatch';
 export const BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED = 'builder.preview.variableValuesChanged';
 export const BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED = 'builder.preview.paywallPlansChanged';
+export const BUILDER_PREVIEW_THEME_CHANGED = 'builder.preview.themeChanged';

package/dist/runtime/preview-bridge.d.ts

@@ -41,12 +41,16 @@ type PreviewBridgeMessage = {
     kind: 'paywallPlansChanged';
     stepId: string;
     plans: BuilderPreviewPaywallPlan[];
+} | {
+    kind: 'themeChanged';
+    cssVariables: Record<string, string>;
 } | {
     kind: 'goToStep';
     stepId: string;
 };
 export declare const parsePreviewQuickEditPatch: (value: unknown) => PreviewQuickEditPatch | null;
 export declare const parsePreviewBridgeMessage: (value: unknown) => PreviewBridgeMessage | null;
+export declare const applyPreviewThemeVariables: (cssVariables: Record<string, string>) => void;
 export declare const applyPreviewQuickEditPatch: (patch: PreviewQuickEditPatch) => void;
 export declare function emitPreviewVariableValues(stepId: FunnelStepId, values: Record<string, string>): void;
 export declare function usePreviewVariableValues(stepId: FunnelStepId, values: Record<string, string>): void;

package/dist/runtime/preview-bridge.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useRef } from 'react';
-import { BUILDER_PREVIEW_ACTIVE_STEP_CHANGED, BUILDER_PREVIEW_DEFINITION_PATCH, BUILDER_PREVIEW_GO_TO_STEP, BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED, BUILDER_PREVIEW_READY, BUILDER_PREVIEW_RUNTIME_MODE_CHANGED, BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED, } from '../config/builder-preview.protocol.js';
+import { BUILDER_PREVIEW_ACTIVE_STEP_CHANGED, BUILDER_PREVIEW_DEFINITION_PATCH, BUILDER_PREVIEW_GO_TO_STEP, BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED, BUILDER_PREVIEW_READY, BUILDER_PREVIEW_RUNTIME_MODE_CHANGED, BUILDER_PREVIEW_THEME_CHANGED, BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED, } from '../config/builder-preview.protocol.js';
 import { isPreviewFrameRuntime } from '../services/preview-frame.service.js';
 import { logger } from '../services/logger.js';
 import { applyPreviewDefinitionPatch, applyPreviewPaywallPlansPatch } from './preview-definition-overrides.js';
@@ -107,6 +107,13 @@ export const parsePreviewQuickEditPatch = (value) => {
     }
     return null;
 };
+const parseThemeCssVariables = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const cssVariables = Object.fromEntries(Object.entries(value).filter((entry) => entry[0].startsWith('--') && typeof entry[1] === 'string'));
+    return Object.keys(cssVariables).length > 0 ? cssVariables : null;
+};
 export const parsePreviewBridgeMessage = (value) => {
     if (!isRecord(value)) {
         return null;
@@ -149,12 +156,33 @@ export const parsePreviewBridgeMessage = (value) => {
             }
             : null;
     }
+    if (messageType === BUILDER_PREVIEW_THEME_CHANGED) {
+        const cssVariables = parseThemeCssVariables(value.cssVariables);
+        return cssVariables ? { kind: 'themeChanged', cssVariables } : null;
+    }
     if (messageType === BUILDER_PREVIEW_GO_TO_STEP) {
         const stepId = typeof value.stepId === 'string' ? value.stepId.trim() : '';
         return stepId ? { kind: 'goToStep', stepId } : null;
     }
     return null;
 };
+export const applyPreviewThemeVariables = (cssVariables) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const targets = [
+        document.documentElement,
+        document.body,
+        ...Array.from(document.querySelectorAll('.page-root')),
+    ].filter((target) => Boolean(target));
+    for (const target of targets) {
+        for (const [key, value] of Object.entries(cssVariables)) {
+            if (key.startsWith('--')) {
+                target.style.setProperty(key, value);
+            }
+        }
+    }
+};
 export const applyPreviewQuickEditPatch = (patch) => {
     if (typeof document === 'undefined') {
         return;
@@ -271,9 +299,6 @@ export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableSt
         emitPreviewReady(activeStepId);
     }, [activeStepId]);
     useEffect(() => {
-        if (shouldLockToInitialStep) {
-            return;
-        }
         const handlePreviewMessage = (event) => {
             const action = parsePreviewBridgeMessage(event.data);
             if (!action) {
@@ -294,10 +319,17 @@ export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableSt
                 applyPreviewPaywallPlansPatch(action.stepId, action.plans);
                 return;
             }
+            if (action.kind === 'themeChanged') {
+                applyPreviewThemeVariables(action.cssVariables);
+                return;
+            }
             if (action.kind === 'runtimeModeChanged') {
                 setRuntimeMode(action.mode);
                 return;
             }
+            if (shouldLockToInitialStep) {
+                return;
+            }
             const targetStepId = resolveRenderableStepId(action.stepId);
             if (!targetStepId) {
                 logger.warn({

package/dist/runtime/use-funnel-flow-controller.d.ts

@@ -9,7 +9,16 @@ export type FunnelFlowControllerExperiment<StepId extends string> = FunnelManife
     })[];
 };
 type StepComponentRegistry = Record<string, unknown>;
+type FunnelFlowAnalyticsAdapter = {
+    trackFirstStepViewed?: (input: {
+        stepId: string;
+        stepName: string;
+        occurredAt: string;
+        featureFlags?: Record<string, string>;
+    }) => string | null;
+};
 type UseFunnelFlowControllerInput<StepId extends string> = {
+    analytics?: FunnelFlowAnalyticsAdapter;
     initialStepId?: StepId;
     lockToInitialStep?: boolean;
     defaultStepId: StepId;
@@ -63,5 +72,5 @@ export declare function computeRenderSuspended(input: {
     }>;
     isPreviewRuntime?: boolean;
 }): boolean;
-export declare function useFunnelFlowController<StepId extends string>({ initialStepId, lockToInitialStep, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }: UseFunnelFlowControllerInput<StepId>): UseFunnelFlowControllerResult<StepId>;
+export declare function useFunnelFlowController<StepId extends string>({ analytics, initialStepId, lockToInitialStep, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }: UseFunnelFlowControllerInput<StepId>): UseFunnelFlowControllerResult<StepId>;
 export {};

package/dist/runtime/use-funnel-flow-controller.js

@@ -54,7 +54,7 @@ export function computeRenderSuspended(input) {
     }
     return input.experiments.some((experiment) => experiment.stepId === input.activeStepId);
 }
-export function useFunnelFlowController({ initialStepId, lockToInitialStep = false, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }) {
+export function useFunnelFlowController({ analytics, initialStepId, lockToInitialStep = false, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }) {
     var _a, _b;
     const [runtimeMode, setRuntimeMode] = useRuntimeMode();
     const [editorModeEnabled, setEditorModeEnabled] = useState(false);
@@ -106,6 +106,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
     const attributesRef = useRef(attributes);
     const postHogFeatureFlagsRef = useRef({});
     const prevStepIdRef = useRef(null);
+    const firstStepViewedTrackedRef = useRef(false);
     const stepStartedAtByIdRef = useRef({});
     const engagedStepIdsRef = useRef(new Set());
     const currentUserIdRef = useRef(user.id);
@@ -340,7 +341,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
                 endedAt: record.completedAt,
                 selected: record.choices,
             });
-            capturePostHogStepEvent('step_completed', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, step_id: record.stepId, step_name: record.stepName, started_at: startedAt, ended_at: record.completedAt, duration_ms: Number.isFinite(durationMs) ? durationMs : undefined, selected: record.choices }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_completed', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: record.stepId, step_name: record.stepName, started_at: startedAt, ended_at: record.completedAt, duration_ms: Number.isFinite(durationMs) ? durationMs : undefined, selected: record.choices }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
         }
         setUser((prev) => {
             var _a, _b;
@@ -368,6 +369,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
         recordStepCompletion(stepId, choices);
     }, [recordStepCompletion]);
     useEffect(() => {
+        var _a;
         if (safeActiveStepId !== activeStepId) {
             logger.warn(`[FunnelFlow] Unknown or non-renderable step "${activeStepId}", falling back to "${safeActiveStepId}".`);
             setActiveStepId(safeActiveStepId);
@@ -390,7 +392,16 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
                 stepName,
                 startedAt,
             });
-            capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, step_id: renderedStepId, step_name: stepName, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: renderedStepId, step_name: stepName, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            if (!firstStepViewedTrackedRef.current && safeActiveStepId === defaultStepId) {
+                firstStepViewedTrackedRef.current = true;
+                (_a = analytics === null || analytics === void 0 ? void 0 : analytics.trackFirstStepViewed) === null || _a === void 0 ? void 0 : _a.call(analytics, {
+                    stepId: renderedStepId,
+                    stepName,
+                    occurredAt: startedAt,
+                    featureFlags: postHogFeatureFlagsRef.current,
+                });
+            }
         }
         attributesAtStepStart.current = Object.assign({}, attributesRef.current);
         prevStepIdRef.current = renderedStepId;
@@ -420,11 +431,12 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
                     engagementThresholdMs: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS,
                 },
             });
-            capturePostHogStepEvent('step_engaged', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, step_id: engagedStepId, step_name: engagedStepName, started_at: engagedStartedAt, ended_at: engagedAt, duration_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS, engagement_threshold_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_engaged', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: engagedStepId, step_name: engagedStepName, started_at: engagedStartedAt, ended_at: engagedAt, duration_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS, engagement_threshold_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
         }, FIRST_STEP_ENGAGEMENT_THRESHOLD_MS);
         return () => window.clearTimeout(timer);
     }, [
         activeStepId,
+        analytics,
         defaultStepId,
         isPreviewRuntime,
         recordStepCompletion,

package/dist/services/api.service.d.ts

@@ -51,6 +51,13 @@ export type ManageSubscriptionsResponse = {
         billingInterval?: string | null;
         billingIntervalCount?: number | null;
         discountCouponIds?: string[];
+        retentionDiscount?: {
+            couponId: string;
+            discountPercent: number;
+            amountCents: number;
+            discountedAmountCents: number;
+            originalAmountCents: number;
+        };
         environment: 'test' | 'live';
     }>;
     eventsCount: number;

package/dist/services/api.service.js

@@ -2,9 +2,58 @@ import { buildMainApiUrl, buildSdkHeaders, FUNNEL_ID, FUNNEL_VERSION_ID, getFunn
 import { mergeFunnelUserAttribution, } from '../runtime/funnel-attribution.js';
 import { applyUrlUserAttributesToUser, hasUrlUserProfileAttributes, resolveUrlUserAttributes, } from '../runtime/url-user-attributes.js';
 const DEFAULT_USER_ID_STORAGE_KEY = 'funnel:user-id';
+const DEFAULT_FUNNEL_DOMAIN_SIGNAL = 'funnelsgrove';
 const canUseDom = () => {
     return typeof window !== 'undefined';
 };
+const normalizeRuntimeEnvironment = (value) => {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'test') {
+        return 'test';
+    }
+    if (normalized === 'live' || normalized === 'prod' || normalized === 'production') {
+        return 'live';
+    }
+    return null;
+};
+const readCookieValue = (name) => {
+    var _a, _b;
+    if (!canUseDom() || typeof document === 'undefined') {
+        return null;
+    }
+    return (((_b = (_a = document.cookie) === null || _a === void 0 ? void 0 : _a.split(';').map((part) => part.trim()).find((part) => part.startsWith(`${name}=`))) === null || _b === void 0 ? void 0 : _b.slice(name.length + 1)) || null);
+};
+const resolveRuntimeAnalyticsEnvironment = () => {
+    var _a, _b, _c, _d;
+    if (!canUseDom()) {
+        return 'live';
+    }
+    try {
+        const queryMode = normalizeRuntimeEnvironment(new URLSearchParams(((_a = window.location) === null || _a === void 0 ? void 0 : _a.search) || '').get('mode'));
+        if (queryMode) {
+            return queryMode;
+        }
+        const cookieMode = normalizeRuntimeEnvironment(readCookieValue('funnel-mode'));
+        if (cookieMode) {
+            return cookieMode;
+        }
+        const hostname = ((_c = (_b = window.location) === null || _b === void 0 ? void 0 : _b.hostname) === null || _c === void 0 ? void 0 : _c.trim().toLowerCase()) || '';
+        if (hostname.includes(DEFAULT_FUNNEL_DOMAIN_SIGNAL)) {
+            return 'test';
+        }
+        const storageMode = normalizeRuntimeEnvironment((_d = window.localStorage) === null || _d === void 0 ? void 0 : _d.getItem('funnel-mode'));
+        if (storageMode) {
+            return storageMode;
+        }
+    }
+    catch (_e) {
+        return 'live';
+    }
+    return 'live';
+};
 const isRecord = (value) => {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 };
@@ -80,7 +129,7 @@ const buildSdkEvent = (event) => {
         startedAt: event.startedAt || null,
         endedAt: event.endedAt || null,
         selected: event.selected || {},
-        metadata: event.metadata || {},
+        metadata: Object.assign({ environment: resolveRuntimeAnalyticsEnvironment() }, (event.metadata || {})),
     };
 };
 const withMergedAttributionDocument = (document, attribution) => {
@@ -236,6 +285,7 @@ class ApiService {
                 fullName: inputName,
                 metadata: {
                     source: 'funnel-session',
+                    environment: resolveRuntimeAnalyticsEnvironment(),
                 },
                 attribution: input === null || input === void 0 ? void 0 : input.attribution,
             }),
@@ -285,6 +335,7 @@ class ApiService {
                 },
                 metadata: {
                     source: 'funnel',
+                    environment: resolveRuntimeAnalyticsEnvironment(),
                 },
                 attribution: options === null || options === void 0 ? void 0 : options.attribution,
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/runtime",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",