@funnelsgrove/cli 0.1.53 → 0.1.62

package/template_scaffold/src/steps/step-32-paywall.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/runtime/checkout-runtime-config';
 import {
   billingDiscountStorageKeys,
-  billingDiscounts,
+  billingDiscountList,
   claimbeePlansByMode,
 } from '@/config/billing.plans';
 import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
@@ -21,9 +21,12 @@ import {
   collectCurrentFunnelAttribution,
   readPaywallStateValue,
   runtimePublicConfig,
+  resolveGeneratedOfferSetRuntime,
   updatePaywallStateValue,
   useFunnel,
+  useFunnelRuntimeConfig,
   useRuntimeMode,
+  type GeneratedOfferSet,
   type FunnelStepMeta,
 } from '@funnelsgrove/runtime';
 import { getPathForStep } from '@/runtime/funnel-runtime';
@@ -34,6 +37,7 @@ import {
   SharedStripeCheckoutV2Dialog,
   activateSecondPaywallDiscount,
   advancePaywallDiscountState,
+  buildBillingDiscountCatalog,
   buildConfigPaywallPlans,
   buildDiscountedPaywallPlans,
   buildPaywallRenewalDisclaimer,
@@ -43,6 +47,8 @@ import {
   serializePaywallDiscountState,
   usePlatformWalletPaymentMethods,
   useStripeSubscriptionCheckoutSession,
+  type BillingFallbackPlanConfig,
+  type BillingPlanCatalog,
   type PaywallDiscountState,
   type PlatformWalletPaymentMethod,
 } from '@funnelsgrove/payments';
@@ -93,7 +99,6 @@ const paywallDetailImageDimensions = {
   },
 } as const;
 const defaultSelectedPlan = 'secondary';
-const CLAIMBEE_PAYWALL_SECOND_COUPON_ID = billingDiscounts.second.couponId;
 export const CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS = billingDiscountStorageKeys;
 const deferPaywallStateSync = (syncState: () => void): (() => void) => {
   const timeoutId = window.setTimeout(syncState, 0);
@@ -133,16 +138,43 @@ function StepPaywallRuntime({
     [runtimeMode],
   );
   const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();
+  const publishedRuntime = useFunnelRuntimeConfig();
   const content = useClaimbeeStepContent(stepPaywallId, stepPaywallContent);
   const supportEmail = runtimePublicConfig.supportEmail;
   const walletPaymentMethods = usePlatformWalletPaymentMethods();
+  const publishedOfferSetRuntime = useMemo(
+    () => publishedRuntime.config && publishedRuntime.config.offerSets.length > 0
+      ? resolveGeneratedOfferSetRuntime<BillingFallbackPlanConfig>({
+          offerSets: publishedRuntime.config.offerSets as readonly GeneratedOfferSet[],
+          baseCatalogsByMode: claimbeePlansByMode,
+          fallbackDiscounts: billingDiscountList,
+        })
+      : null,
+    [publishedRuntime.config],
+  );
+  const activeBillingDiscounts = useMemo(
+    () => buildBillingDiscountCatalog(
+      publishedOfferSetRuntime?.getDiscountList(checkoutMode) ?? billingDiscountList,
+    ),
+    [checkoutMode, publishedOfferSetRuntime],
+  );
+  const activePlanCatalog = useMemo<BillingPlanCatalog>(
+    () => publishedOfferSetRuntime?.getPlanCatalog(checkoutMode) as BillingPlanCatalog
+      || (checkoutMode === 'test' ? claimbeePlansByMode.test : claimbeePlansByMode.live),
+    [checkoutMode, publishedOfferSetRuntime],
+  );
+  const activePlanKeys = useMemo(
+    () => publishedOfferSetRuntime?.planKeys.length
+      ? publishedOfferSetRuntime.planKeys
+      : ['primary', 'secondary', 'tertiary'],
+    [publishedOfferSetRuntime],
+  );
   const availablePlans = useMemo(
-    () =>
-      buildConfigPaywallPlans(
-        checkoutMode === 'test' ? claimbeePlansByMode.test : claimbeePlansByMode.live,
-        ['primary', 'secondary', 'tertiary'],
-      ),
-    [checkoutMode],
+    () => buildConfigPaywallPlans(
+      activePlanCatalog,
+      activePlanKeys,
+    ),
+    [activePlanCatalog, activePlanKeys],
   );
   const initialPlanId = useMemo(
     () =>
@@ -168,7 +200,7 @@ function StepPaywallRuntime({
   const [discountStateReady, setDiscountStateReady] = useState(false);
   const [discountState, setDiscountState] = useState<PaywallDiscountState>(() =>
     resolvePaywallDiscountState({
-      discounts: billingDiscounts,
+      discounts: activeBillingDiscounts,
       nowMs: Date.now(),
       storedValue: null,
     }),
@@ -229,7 +261,7 @@ function StepPaywallRuntime({
   const activeStory = storyOptions[activeStoryIndex] ?? storyOptions[0] ?? null;
   const minutes = Math.floor(discountState.remainingSeconds / 60);
   const seconds = discountState.remainingSeconds % 60;
-  const upgradedDiscountActive = activeCouponId === CLAIMBEE_PAYWALL_SECOND_COUPON_ID;
+  const upgradedDiscountActive = activeCouponId === activeBillingDiscounts.second.couponId;
   const activeDiscountStartedAtMs =
     discountState.stage === 'second'
       ? discountState.secondStartedAtMs
@@ -371,7 +403,7 @@ function StepPaywallRuntime({
     return deferPaywallStateSync(() => {
       setDiscountState(
         resolvePaywallDiscountState({
-          discounts: billingDiscounts,
+          discounts: activeBillingDiscounts,
           nowMs: Date.now(),
           storedValue: readPaywallStateValue({
             legacyKeys: CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS,
@@ -380,7 +412,7 @@ function StepPaywallRuntime({
       );
       setDiscountStateReady(true);
     });
-  }, []);
+  }, [activeBillingDiscounts]);
 
   useEffect(() => {
     return deferPaywallStateSync(() => {
@@ -396,7 +428,7 @@ function StepPaywallRuntime({
     const timer = window.setInterval(() => {
       setDiscountState((current) => {
         const nextState = advancePaywallDiscountState({
-          discounts: billingDiscounts,
+          discounts: activeBillingDiscounts,
           state: current,
           nowMs: Date.now(),
         });
@@ -409,7 +441,7 @@ function StepPaywallRuntime({
     }, 1000);
 
     return () => window.clearInterval(timer);
-  }, [discountStateReady]);
+  }, [activeBillingDiscounts, discountStateReady]);
 
   useEffect(() => {
     if (storyOptions.length < 2) {
@@ -567,7 +599,7 @@ function StepPaywallRuntime({
     paywallStepRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
     setDiscountState((current) =>
       activateSecondPaywallDiscount({
-        discounts: billingDiscounts,
+        discounts: activeBillingDiscounts,
         state: current,
         nowMs: Date.now(),
       }),

package/template_scaffold/tests/funnel-agent-docs.test.ts

@@ -254,11 +254,12 @@ describe('funnel agent documentation supply', () => {
     expect(content).toContain('fgrove experiments create --spec experiment.json --dir . --json');
     expect(content).toContain('`experimentId`, `experimentKey`, `draftVersionId`, and `writtenPaths`');
     expect(content).toContain(
-      '`variantKey` is at most 120 characters. `id`, `name`, `stepId`, `label`, `routeToStepId`, and `offerSetKey` are each at most 200 characters after trimming.',
+      'Pricing variants additionally require `offerSetId` as a UUID.',
     );
+    expect(content).not.toContain('offerSetKey');
     expect(content).toContain('does not create or activate a PostHog flag');
-    expect(content).toContain('immediately visible in the FunnelsGrove UI');
-    expect(content).toContain('src/config/experiments.generated.ts');
+    expect(content).toContain('included in the version-bound runtime artifact');
+    expect(content).toContain('deprecated compatibility files');
     expect(content).toContain('[FG-EXPERIMENT-STALE-DRAFT]');
     expect(content).toContain('[FG-EXPERIMENT-DRAFT-CONFLICT]');
     expect(content).toContain('[FG-EXPERIMENT-SPEC]');
@@ -362,7 +363,7 @@ describe('funnel agent documentation supply', () => {
 
     expect(manifest).toMatchObject({
       schemaVersion: 1,
-      bundleVersion: '2.0.41',
+      bundleVersion: '2.0.51',
       stepContractVersion: contract.stepContractVersion,
       contractHash: contract.contractHash,
     });

package/template_scaffold/tests/src/components/FunnelFlow.test.tsx

@@ -13,6 +13,10 @@ describe('FunnelFlow lifecycle wiring', () => {
     expect(flowSource).not.toContain('publicAnalyticsSdk');
     expect(adapterSource.match(/analytics: publicAnalyticsSdk/g)).toHaveLength(1);
     expect(adapterSource.match(/stepContractVersion: funnelManifest\.stepContractVersion/g)).toHaveLength(1);
+    expect(flowSource).toContain('<FunnelRuntimeConfigBoundary');
+    expect(flowSource).toContain('disabled={isPreviewRuntime}');
+    expect(adapterSource).toContain('toManifestExperiments(publishedRuntime.config.experiments)');
+    expect(adapterSource).toContain(': funnelExperiments');
   });
 
   it('keeps A/B editor controls without wiring a manual payment mode switch', () => {

package/template_scaffold/tests/src/contract/funnel-project.validation.test.ts

@@ -6,7 +6,6 @@ import {
   type FunnelStepContractProjectSnapshot,
 } from '@funnelsgrove/runtime';
 import docsManifest from '../../../.funnelsgrove-docs.json';
-import { manifestExperiments } from '@/config/experiments';
 import { funnelManifest, rawFunnelManifest } from '@/config/funnel.manifest';
 import { stepRegistry } from '@/runtime/step-registry';
 import { contentOptionsByStepId } from '@/steps/step-content.registry';
@@ -30,7 +29,7 @@ describe('funnel project validation', () => {
       registeredComponentKeys: Object.keys(stepRegistry),
       contentOptionsByStepId,
       edgesByStepId: rawFunnelManifest.edgesByStepId,
-      experiments: manifestExperiments,
+      experiments: rawFunnelManifest.experiments,
       docs: {
         schemaVersion: docsManifest.schemaVersion,
         bundleVersion: docsManifest.bundleVersion,

package/template_scaffold/tests/src/steps/step-32-paywall.test.ts

@@ -210,9 +210,11 @@ describe('ClaimBee paywall source', () => {
     );
 
     expect(stepSource).toContain("from '@/config/billing.plans'");
-    expect(stepSource).toContain('billingDiscounts');
+    expect(stepSource).toContain('activeBillingDiscounts');
+    expect(stepSource).toContain('useFunnelRuntimeConfig');
+    expect(stepSource).toContain('resolveGeneratedOfferSetRuntime');
     expect(stepSource).not.toContain("from '@/config/claimbee-paywall.config'");
-    expect(stepSource).toContain('CLAIMBEE_PAYWALL_SECOND_COUPON_ID');
+    expect(stepSource).toContain('activeBillingDiscounts.second.couponId');
     expect(stepSource).toContain('resolvePaywallDiscountState');
     expect(stepSource).toContain('advancePaywallDiscountState');
     expect(stepSource).toContain('serializePaywallDiscountState');
@@ -504,7 +506,8 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('const availablePlans = useMemo(');
     expect(stepSource).toContain('buildConfigPaywallPlans');
     expect(stepSource).toContain("['primary', 'secondary', 'tertiary']");
-    expect(stepSource).toContain('[checkoutMode]');
+    expect(stepSource).toContain('[checkoutMode, publishedOfferSetRuntime]');
+    expect(stepSource).toContain('publishedOfferSetRuntime?.getPlanCatalog(checkoutMode)');
     expect(stepSource).toContain("const defaultSelectedPlan = 'secondary'");
     expect(stepSource).not.toContain('CLAIMBEE_PAYWALL_PLAN_ORDER');
     expect(stepSource).not.toContain('getOrderedPaywallPlans');

package/template_validation/.funnelsgrove-contract-tools.json

@@ -5,7 +5,7 @@
   "managedFiles": [
     {
       "path": "src/contract/funnel-project.validation.ts",
-      "sha256": "b0ec02eac1bd56812eef773be71628ae4e94f80fcd88837bbc5c8bf04e73a62c"
+      "sha256": "99299cfb96414dd24272439cd1c57191a0863749c920a5eb03ff786f7972ab0e"
     },
     {
       "path": "src/contract/funnel-validator.vite.config.ts",

package/template_validation/src/contract/funnel-project.validation.ts

@@ -6,7 +6,6 @@ import {
   type FunnelStepMeta,
 } from '@funnelsgrove/runtime';
 import docsManifest from '../../.funnelsgrove-docs.json';
-import { manifestExperiments } from '@/config/experiments';
 import { rawFunnelManifest } from '@/config/funnel.manifest';
 import { stepRegistry } from '@/runtime/step-registry';
 import { contentOptionsByStepId } from '@/steps/step-content.registry';
@@ -24,7 +23,7 @@ export const buildFunnelProjectSnapshot = (): FunnelStepContractProjectSnapshot
     registeredComponentKeys: Object.keys(stepRegistry),
     contentOptionsByStepId,
     edgesByStepId: rawFunnelManifest.edgesByStepId,
-    experiments: manifestExperiments,
+    experiments: rawFunnelManifest.experiments,
     docs: {
       schemaVersion: docsManifest.schemaVersion,
       bundleVersion: docsManifest.bundleVersion,

package/template_scaffold/src/config/experiments.generated.ts

@@ -1,4 +0,0 @@
-// Generated by FunnelsGrove. Do not edit by hand.
-
-export const generatedExperiments = [
-] as const;

package/template_scaffold/src/config/experiments.ts

@@ -1,9 +0,0 @@
-import {
-  defineFunnelExperiments,
-  toManifestExperiments,
-} from '@funnelsgrove/runtime';
-import { generatedExperiments } from './experiments.generated';
-
-export const experiments = defineFunnelExperiments(generatedExperiments);
-
-export const manifestExperiments = toManifestExperiments(experiments);

package/template_scaffold/tests/src/config/experiments.test.ts

@@ -1,12 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { experiments, manifestExperiments } from '../../../src/config/experiments';
-
-describe('funnel experiments config', () => {
-  it('ships the generic template without brand-specific experiments', () => {
-    expect(experiments).toEqual([]);
-  });
-
-  it('maps code-defined experiments into the runtime manifest shape', () => {
-    expect(manifestExperiments).toEqual([]);
-  });
-});