@funnelsgrove/cli 0.1.14 → 0.1.18

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

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+import { StepPaywall, stepPaywall } from './step-32-paywall';
+import type { FunnelStepMeta } from '@funnelsgrove/runtime';
+
+export const stepPaywallBId = 'paywall-b';
+
+export const stepPaywallB: FunnelStepMeta = {
+  ...stepPaywall,
+  id: stepPaywallBId,
+  name: 'paywall-b',
+  type: 'paywall_offer',
+  title: 'Paywall B',
+  description: 'Duplicate ClaimBee paywall variant for A/B testing.',
+};
+
+export function StepPaywallB() {
+  useEffect(() => {
+    document.documentElement.dataset.paywallVariant = 'b';
+
+    return () => {
+      if (document.documentElement.dataset.paywallVariant === 'b') {
+        delete document.documentElement.dataset.paywallVariant;
+      }
+    };
+  }, []);
+
+  return (
+    <StepPaywall
+      analyticsStepId={stepPaywallBId}
+      analyticsStepName={stepPaywallB.name || stepPaywallB.title}
+    />
+  );
+}

package/template_scaffold/src/steps/step-33-subscription-started.test.ts

@@ -0,0 +1,26 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('template subscription-started source', () => {
+  it('uses the shared runtime handoff screen and tracks checkout returns with user_id metadata', () => {
+    const stepSource = readFileSync(
+      path.resolve(__dirname, './step-33-subscription-started.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain('SubscriptionHandoffScreen');
+    expect(stepSource).toContain("completionMode='funnel'");
+    expect(stepSource).toContain('stepContractVersion: funnelManifest.stepContractVersion');
+    expect(stepSource).toContain("type: 'purchase_completed'");
+    expect(stepSource).toContain("user_id: searchParams.get('user_id') || null");
+    expect(stepSource).toContain('publicAnalyticsSdk.trackPaymentCheckoutSucceeded(eventInput);');
+    expect(stepSource).toContain('publicAnalyticsSdk.trackPaymentCheckoutReturned(eventInput);');
+    expect(stepSource).toContain('stepType: stepSubscriptionStarted.type');
+    expect(stepSource).not.toContain("eventType: redirectStatus === 'succeeded'");
+    expect(stepSource).not.toContain('trackPurchaseCompleted');
+    expect(stepSource).not.toContain("searchParams.get('userId')");
+    expect(stepSource).not.toContain('api.qrserver.com');
+    expect(stepSource).not.toContain('NEXT_PUBLIC_IOS_APP_STORE_URL');
+  });
+});

package/template_scaffold/src/steps/step-33-subscription-started.tsx

@@ -0,0 +1,86 @@
+// PLAN_STEP_PLACEHOLDER_ID:subscription-started
+'use client';
+
+import { useEffect } from 'react';
+import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
+import {
+  SubscriptionHandoffScreen,
+  usePreviewStepLocalizedContent,
+  useFunnel,
+  type FunnelStepMeta,
+} from '@funnelsgrove/runtime';
+import { getStepContentLocale } from '@/runtime/step-content-context';
+import { subscriptionStartedContent } from '@/steps/content/subscription-started.content';
+import { funnelManifest } from '@/config/funnel.manifest';
+
+export const stepSubscriptionStartedId = 'subscription-started';
+
+export const stepSubscriptionStarted: FunnelStepMeta = {
+  id: stepSubscriptionStartedId,
+  name: 'subscription-started',
+  type: 'purchase_completed',
+  kind: 'subscription-handoff',
+  figmaNodeId: 'final-step-deep-link',
+  title: 'Subscription Started',
+  description: 'Post-checkout app handoff and deep-link step.',
+  actionBar: {
+    hidden: true,
+  },
+};
+
+export function StepSubscriptionStarted() {
+  const { user, attributes } = useFunnel();
+  const content = usePreviewStepLocalizedContent(
+    stepSubscriptionStartedId,
+    subscriptionStartedContent,
+    getStepContentLocale(attributes),
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const paymentIntent = searchParams.get('payment_intent');
+    const redirectStatus = searchParams.get('redirect_status');
+    if (!paymentIntent || !redirectStatus) {
+      return;
+    }
+
+    const dedupeKey = `app-deals:payment-intent:${paymentIntent}`;
+    if (window.sessionStorage.getItem(dedupeKey) === '1') {
+      return;
+    }
+    window.sessionStorage.setItem(dedupeKey, '1');
+
+    const eventInput = {
+      stepId: stepSubscriptionStartedId,
+      stepName: stepSubscriptionStarted.name || stepSubscriptionStarted.title,
+      stepType: stepSubscriptionStarted.type,
+      stepContractVersion: funnelManifest.stepContractVersion,
+      metadata: {
+        source: searchParams.get('source') || null,
+        paymentIntent,
+        redirectStatus,
+        user_id: searchParams.get('user_id') || null,
+        funnelUserId: user.id || null,
+      },
+    };
+
+    if (redirectStatus === 'succeeded') {
+      publicAnalyticsSdk.trackPaymentCheckoutSucceeded(eventInput);
+    } else {
+      publicAnalyticsSdk.trackPaymentCheckoutReturned(eventInput);
+    }
+  }, [user.id]);
+
+  return (
+    <SubscriptionHandoffScreen
+      stepId={stepSubscriptionStartedId}
+      completionMode='funnel'
+      content={content}
+      nodeId='final-step-deep-link'
+    />
+  );
+}

package/template_scaffold/src/steps/step-34-upsell-form.test.ts

@@ -0,0 +1,27 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('template cleanup', () => {
+  it('keeps upsell removed while preserving the duplicate paywall variant', () => {
+    const manifestSource = readFileSync(
+      path.resolve(__dirname, '../config/funnel.manifest.ts'),
+      'utf8',
+    );
+    const registrySource = readFileSync(
+      path.resolve(__dirname, '../runtime/step-registry.ts'),
+      'utf8',
+    );
+    const contentRegistrySource = readFileSync(
+      path.resolve(__dirname, './step-content.registry.ts'),
+      'utf8',
+    );
+
+    expect(manifestSource).not.toContain("id: 'upsell-form'");
+    expect(manifestSource).toContain("id: 'paywall-b'");
+    expect(registrySource).not.toContain('stepUpsellForm');
+    expect(registrySource).toContain('stepPaywallB');
+    expect(contentRegistrySource).not.toContain("'upsell-form'");
+    expect(contentRegistrySource).toContain("'paywall-b'");
+  });
+});

package/template_scaffold/src/steps/step-35-manage-subscription.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import {
+  useFunnel,
+  usePreviewStepLocalizedContent,
+  type FunnelStepMeta,
+} from '@funnelsgrove/runtime';
+import { ManageSubscriptionScreen } from '@funnelsgrove/payments';
+import { billingPlans } from '@/config/billing.plans';
+import { getStepContentLocale } from '@/runtime/step-content-context';
+import { stepOneId } from '@/steps/step-01';
+import { manageSubscriptionContent } from '@/steps/content/manage-subscription.content';
+
+export const stepManageSubscriptionId = 'manage-subscription';
+
+export const stepManageSubscription: FunnelStepMeta = {
+  id: stepManageSubscriptionId,
+  name: 'manage-subscription',
+  type: 'subscription_management',
+  kind: 'manage-subscription',
+  figmaNodeId: 'template-35-manage-subscription',
+  title: 'Manage subscription',
+  description: 'Manage subscription flow: list, reason, cancellation, and confirmation.',
+  actionBar: {
+    hidden: true,
+  },
+};
+
+export function StepManageSubscription() {
+  const { attributes } = useFunnel();
+  const content = usePreviewStepLocalizedContent(
+    stepManageSubscriptionId,
+    manageSubscriptionContent,
+    getStepContentLocale(attributes),
+  );
+
+  return (
+    <ManageSubscriptionScreen
+      stepId={stepManageSubscriptionId}
+      content={content}
+      homeStepId={stepOneId}
+      nodeId='template:35-manage-subscription'
+      plans={billingPlans}
+    />
+  );
+}

package/template_scaffold/src/steps/step-content.registry.ts

@@ -0,0 +1,45 @@
+import type { FunnelChoiceOption } from '@funnelsgrove/runtime';
+import { stepTwoOptions } from './content/step-02.content';
+
+export const stepContentRegistry = {
+  'step-1': {
+    contentPath: 'src/steps/content/step-01.content.ts',
+    editorPath: 'src/steps/editor/step-01.editor.ts',
+  },
+  'step-2': {
+    contentPath: 'src/steps/content/step-02.content.ts',
+    editorPath: 'src/steps/editor/step-02.editor.ts',
+  },
+  'step-3': {
+    contentPath: 'src/steps/content/step-03.content.ts',
+    editorPath: 'src/steps/editor/step-03.editor.ts',
+  },
+  'step-4': {
+    contentPath: 'src/steps/content/step-04.content.ts',
+    editorPath: 'src/steps/editor/step-04.editor.ts',
+  },
+  'email-capture': {
+    contentPath: 'src/steps/content/email-capture.content.ts',
+    editorPath: 'src/steps/editor/email-capture.editor.ts',
+  },
+  paywall: {
+    contentPath: 'src/steps/content/step-32-paywall.content.ts',
+    editorPath: 'src/steps/editor/step-32-paywall.editor.ts',
+  },
+  'paywall-b': {
+    contentPath: 'src/steps/content/step-32-paywall.content.ts',
+    editorPath: 'src/steps/editor/step-32-paywall.editor.ts',
+  },
+  'manage-subscription': {
+    contentPath: 'src/steps/content/manage-subscription.content.ts',
+    editorPath: 'src/steps/editor/manage-subscription.editor.ts',
+  },
+  'subscription-started': {
+    contentPath: 'src/steps/content/subscription-started.content.ts',
+    editorPath: 'src/steps/editor/subscription-started.editor.ts',
+  },
+} as const;
+
+export const contentOptionsByStepId = {
+  'step-2': stepTwoOptions,
+} as const satisfies Record<string, readonly FunnelChoiceOption[]>;

package/template_scaffold/src/steps/step-image-migration.test.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const stepFiles = [
+  'step-01.tsx',
+  'step-02.tsx',
+  'step-03.tsx',
+  'step-04.tsx',
+] as const;
+
+describe('funnel-template step image migration', () => {
+  it('does not leave raw img tags in migrated steps', () => {
+    for (const fileName of stepFiles) {
+      const filePath = path.resolve(__dirname, fileName);
+      const source = readFileSync(filePath, 'utf8');
+      expect(source).not.toContain('<img');
+    }
+  });
+});

package/template_scaffold/src/steps/styles/index.css

@@ -0,0 +1,2 @@
+@import './shared/funnel-base.css';
+@import './shared/responsive-container.css';

package/template_scaffold/src/steps/styles/shared/final-flow-shared.css

@@ -0,0 +1,55 @@
+.filing-step,
+.journey-step,
+.warning-step,
+.relationship-step,
+.family-step,
+.email-step,
+.paywall-step {
+  position: absolute;
+  inset: 0;
+  background: var(--color-bg-muted);
+  font-family: var(--font-family-base);
+}
+
+.filing-copy,
+.journey-copy,
+.relationship-copy,
+.family-copy,
+.email-copy,
+.paywall-head {
+  position: absolute;
+  top: 122px;
+  left: var(--padding);
+  right: var(--padding);
+  width: auto;
+}
+
+.filing-title,
+.journey-title,
+.warning-title,
+.relationship-title,
+.email-title,
+.paywall-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+  overflow-wrap: anywhere;
+}
+
+.filing-text,
+.journey-text,
+.warning-text,
+.relationship-text,
+.family-text,
+.email-text,
+.paywall-subtitle {
+  margin: 16px 0 0;
+  color: var(--color-text);
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}