@funnelsgrove/cli 0.1.87 → 0.1.89

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

@@ -1,773 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs';
-import path from 'node:path';
-import { describe, expect, it } from 'vitest';
-
-describe('ClaimBee paywall source', () => {
-  it('mounts environment-dependent payment hooks only inside the runtime boundary', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('PaymentRuntimeBoundary');
-    expect(stepSource).toContain('<PaymentRuntimeBoundary');
-    expect(stepSource).toContain('<StepPaywallRuntime');
-    expect(stepSource.indexOf('function StepPaywallRuntime')).toBeLessThan(
-      stepSource.indexOf('useRuntimeMode()'),
-    );
-  });
-
-  it('uses the local checkout runtime config when creating subscription-backed custom checkout intents', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain("from '@/runtime/checkout-runtime-config'");
-    expect(stepSource).toContain('runtimeConfig: checkoutRuntimeConfig');
-    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).not.toContain('Boolean(checkoutRuntimeConfig.funnelSdkPublishableKey)');
-    expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
-    expect(stepSource).not.toContain('createStripePaymentIntent');
-    expect(stepSource).not.toContain('redirectToStripeCheckout');
-  });
-
-  it('renders the custom checkout trigger and separate claim CTA', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('SharedCheckoutSpecialOfferDialog');
-    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
-    expect(stepSource).toContain('SharedStripeCheckoutV2Dialog');
-    expect(stepSource).not.toContain('StripeExpressCheckoutElement');
-    expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
-    expect(stepSource).not.toContain('redirectToStripeCheckout');
-    expect(stepSource).not.toContain('createStripePaymentIntent');
-    expect(stepSource).toContain("from '@/steps/content/step-32-paywall.content'");
-    expect(stepSource).toContain('useClaimbeeStepContent(stepPaywallId, stepPaywallContent)');
-    expect(contentSource).toContain("topBarDiscountLabel: '⏰ Discount Expires in'");
-    expect(contentSource).toContain("topBarCtaLabel: 'GET MY PLAN'");
-    expect(contentSource).toContain("cardButtonLabel: 'GET MY PLAN'");
-    expect(contentSource).toContain("title: 'Checkout'");
-    expect(contentSource).toContain("walletButtonLabel: 'Apple Pay'");
-    expect(contentSource).toContain("googlePayPlaceholderLabel: 'Subscribe with Google Pay'");
-    expect(contentSource).toContain("paypalButtonLabel: 'PayPal Buy Now'");
-    expect(contentSource).toContain("originalPriceLabel: 'Regular Price'");
-    expect(contentSource).toContain("discountLabelTemplate: '{percent}% OFF'");
-    expect(contentSource).toContain("promoCodeLabel: 'Applied promo code:'");
-    expect(contentSource).toContain("specialOffer:");
-    expect(contentSource).toContain("src: '/paywall/special-offer-gift.png'");
-    expect(stepSource).toContain('imageSrc={content.checkout.specialOffer.image.src}');
-    expect(stepSource).toContain("className='paywall-v2-scroll-cta paywall-v2-vibe-cta'");
-    expect(stepSource).toContain("className='paywall-v2-card-button paywall-v2-vibe-cta'");
-    expect(stepSource).toContain("applePay: 'paywall-v2-apple-pay-button'");
-    expect(stepSource).toContain("googlePay: 'paywall-v2-google-pay-button'");
-    expect(stepSource).not.toContain('Continue with other payment options');
-  });
-
-  it('keeps the timer and top CTA in a sticky bar with minute and second labels under blue digits', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-
-    const topBarStylesStart = stepSource.indexOf('.paywall-v2-top-row {');
-    const topBarStylesEnd = stepSource.indexOf('.paywall-v2-head {');
-    const topBarStyles = stepSource.slice(topBarStylesStart, topBarStylesEnd);
-    const compactTopBarStylesStart = stepSource.indexOf('@container (max-width: 429px) {');
-    const compactTopBarStylesEnd = stepSource.indexOf('  .paywall-v2-plan-row {', compactTopBarStylesStart);
-    const compactTopBarStyles = stepSource.slice(compactTopBarStylesStart, compactTopBarStylesEnd);
-
-    expect(topBarStylesStart).toBeGreaterThan(-1);
-    expect(topBarStyles).toContain('position: sticky;');
-    expect(topBarStyles).toContain('top: 0;');
-    expect(topBarStyles).toContain('z-index: 20;');
-    expect(topBarStyles).toContain('min-height: 92px;');
-    expect(topBarStyles).toContain('margin: 0 -24px 0;');
-    expect(topBarStyles).toContain('padding: 8px 24px 10px;');
-    expect(topBarStyles).toContain('background: #ecf7ff;');
-    expect(topBarStyles).toContain('border-bottom: 1px solid rgb(63 81 181 / 10%);');
-    expect(topBarStyles).toContain('.paywall-v2-top-label {');
-    expect(topBarStyles).toContain('font-size: 13px;');
-    expect(topBarStyles).toContain('.paywall-v2-top-controls {');
-    expect(topBarStyles).toContain('font-size: 40px;');
-    expect(topBarStyles).toContain('grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);');
-    expect(topBarStyles).toContain('color: var(--color-secondary-text);');
-    expect(topBarStyles).toContain('max-width: 188px;');
-    expect(topBarStyles).toContain('min-height: 46px;');
-    expect(topBarStyles).toContain('padding: 0 14px;');
-    expect(topBarStyles).toContain('font-size: 16px;');
-    expect(topBarStyles).toContain('background: var(--color-secondary-text);');
-    expect(topBarStyles).toContain('border-radius: 16px;');
-    expect(stepSource).toContain('.paywall-v2-vibe-cta:not(:disabled) {');
-    expect(stepSource).toContain('animation: paywall-v2-cta-beat 2400ms ease-in-out infinite;');
-    expect(stepSource).toContain('animation: paywall-v2-cta-wave 2400ms ease-out infinite;');
-    expect(stepSource).toContain('@keyframes paywall-v2-cta-beat {');
-    expect(stepSource).toContain('@keyframes paywall-v2-cta-wave {');
-    expect(stepSource).toContain('@media (prefers-reduced-motion: reduce) {');
-    expect(stepSource).toContain("className='paywall-v2-countdown-units'");
-    expect(stepSource).toContain("className='paywall-v2-top-label'");
-    expect(stepSource).toContain("className='paywall-v2-top-controls'");
-    expect(contentSource).toContain("countdownUnits: ['minutes', 'seconds']");
-    expect(stepSource).not.toContain('Discount expired');
-    expect(stepSource).not.toContain("className='paywall-v2-countdown-label'");
-    expect(topBarStyles).not.toContain('background: rgb(148 165 255 / 20%);');
-    expect(topBarStyles).not.toContain('backdrop-filter: blur(12px);');
-    expect(stepSource).toContain('padding: 0 24px 64px;');
-    expect(stepSource).toContain('.paywall-v2-head {');
-    expect(stepSource).toContain('margin-top: 16px;');
-    expect(compactTopBarStylesStart).toBeGreaterThan(-1);
-    expect(compactTopBarStylesEnd).toBeGreaterThan(compactTopBarStylesStart);
-    expect(compactTopBarStyles).toContain('min-height: 92px;');
-    expect(compactTopBarStyles).toContain('padding: 8px 16px 10px;');
-    expect(compactTopBarStyles).toContain('font-size: 40px;');
-    expect(compactTopBarStyles).toContain('min-height: 46px;');
-    expect(compactTopBarStyles).not.toContain('min-height: 108px;');
-  });
-
-  it('scrolls the header CTA to the selected plan card and opens the custom subscription checkout', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).toContain('plan: selectedPlan');
-    expect(stepSource).toContain('couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null');
-    expect(stepSource).toContain("checkoutSession.prepareCardCheckout({ checkoutStartSource: 'checkout_render' })");
-    expect(stepSource).toContain("successUrl.searchParams.set('source', 'stripe-elements');");
-    expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutStarted({');
-    expect(stepSource).toContain('stepContractVersion: funnelManifest.stepContractVersion');
-    expect(stepSource).toContain("successUrl.searchParams.set('user_id', user.id);");
-    expect(stepSource).toContain("onClick={() => void startCheckout()}");
-    expect(stepSource).toContain("document.getElementById(`paywall-v2-plan-${currentPlanId}`)");
-    expect(stepSource).toContain("scrollIntoView({ behavior: 'smooth', block: 'center' })");
-    expect(stepSource).toContain("id={`paywall-v2-plan-${plan.id}`}");
-    expect(contentSource).toContain("walletPlaceholderLabel: 'Subscribe with Apple Pay'");
-    expect(stepSource).not.toContain('window.open(');
-    expect(stepSource).not.toContain("className='paywall-v2-checkout-overlay'");
-  });
-
-  it('uses subscription-backed Payment Element checkout instead of a one-time PaymentIntent checkout path', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).toContain('checkoutSession.activeClientSecret');
-    expect(stepSource).toContain('<SharedStripeCheckoutV2Dialog');
-    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
-    expect(stepSource).not.toContain('<StripeExpressCheckoutElement');
-    expect(stepSource).not.toContain('createStripePaymentIntent');
-    expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
-    expect(stepSource).not.toContain('redirectToStripeCheckout');
-    expect(stepSource).not.toContain('/sdk/public/payments/intents');
-    expect(stepSource).toContain('if (checkoutSession.loading.card) {');
-    expect(stepSource).toContain("className='paywall-v2-loading-screen'");
-    expect(stepSource).toContain("aria-label='Loading checkout'");
-  });
-
-  it('claims paywall completion only after verified checkout success', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const completionHandler = stepSource.slice(
-      stepSource.indexOf('const handleCheckoutCompleted = () => {'),
-      stepSource.indexOf('const preparePaywallWalletCheckout'),
-    );
-    const checkoutStartHandler = stepSource.slice(
-      stepSource.indexOf('const startCheckout = async () => {'),
-      stepSource.indexOf('const handleCheckoutCompleted'),
-    );
-
-    expect(stepSource).toContain('const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();');
-    expect(completionHandler).toContain('completeStep(analyticsStepId, {');
-    expect(completionHandler).toContain('planId: selectedDisplayPlan.id');
-    expect(stepSource).toContain('onSuccess={handleCheckoutCompleted}');
-    expect(stepSource).not.toContain('onPaymentInfoSubmitted=');
-    expect(checkoutStartHandler).not.toContain('completeStep(');
-  });
-
-  it('tracks the staged discount timer, returns first checkout closes to the special offer, and forwards the active coupon into subscription checkout', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain("from '@/config/billing.plans'");
-    expect(stepSource).toContain('activeBillingDiscounts');
-    expect(stepSource).toContain('useFunnelRuntimeConfig');
-    expect(stepSource).toContain('resolveGeneratedOfferSetRuntime');
-    expect(stepSource).not.toContain("from '@/config/claimbee-paywall.config'");
-    expect(stepSource).toContain('activeBillingDiscounts.second.couponId');
-    expect(stepSource).toContain('resolvePaywallDiscountState');
-    expect(stepSource).toContain('advancePaywallDiscountState');
-    expect(stepSource).toContain('serializePaywallDiscountState');
-    expect(stepSource).toContain('readPaywallStateValue');
-    expect(stepSource).toContain('updatePaywallStateValue');
-    expect(stepSource).toContain('CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS');
-    expect(stepSource).toContain('const [specialOfferDialogOpen, setSpecialOfferDialogOpen] = useState(() => {');
-    expect(stepSource).toContain('activateSecondPaywallDiscount');
-    expect(stepSource).toContain("searchParams.get('checkout_offer') === 'first'");
-    expect(stepSource).toContain('closeCheckoutDialog');
-    expect(stepSource).toContain('handleSpecialOfferAccept');
-    expect(stepSource).toContain('SharedCheckoutSpecialOfferDialog');
-    expect(stepSource).toContain('const paywallStepRef = useRef<HTMLDivElement | null>(null);');
-    expect(stepSource).toContain("paywallStepRef.current?.scrollTo({ top: 0, behavior: 'smooth' });");
-    expect(stepSource).toContain("ref={paywallStepRef}");
-    expect(stepSource).toContain('discountState.firstStartedAtMs');
-    expect(stepSource).toContain('discountState.secondStartedAtMs');
-    expect(stepSource).not.toContain('readWindowStorageValue');
-    expect(stepSource).not.toContain('writeWindowStorageValue');
-    expect(stepSource).toContain('couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null');
-    expect(stepSource).not.toContain('couponId: selectedDisplayPlan.hasActiveDiscount');
-    expect(stepSource).toContain('setSpecialOfferDialogOpen(false);');
-    expect(stepSource).not.toContain("claimbeeCheckout");
-    expect(stepSource).not.toContain('window.history.replaceState');
-    expect(stepSource).not.toContain('discountState.remainingSeconds % 15 === 0');
-  });
-
-  it('waits for the stored discount state before rendering the paywall and shows a white loading screen first', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('const [discountStateReady, setDiscountStateReady] = useState(false);');
-    expect(stepSource).toContain('setDiscountStateReady(true);');
-    expect(stepSource).toContain('if (!discountStateReady) {');
-    expect(stepSource).toContain("className='paywall-v2-loading-screen'");
-    expect(stepSource).toContain("className='paywall-v2-loading-spinner'");
-    expect(stepSource).toContain('background: #fff;');
-    expect(contentSource).toContain("loadingLabel: 'Loading...'");
-  });
-
-  it('keeps checkout dialog copy in the step content contract and editor', () => {
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-    const editorSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/editor/step-32-paywall.editor.ts'),
-      'utf8',
-    );
-
-    expect(contentSource).toContain("title: 'Checkout'");
-    expect(contentSource).toContain("cardSubmitLabel: 'Confirm payment'");
-    expect(contentSource).toContain("specialOffer:");
-    expect(editorSource).toContain("id: 'checkout'");
-    expect(editorSource).toContain("path: 'topBarDiscountLabel'");
-    expect(editorSource).toContain("path: 'checkout.title'");
-    expect(editorSource).toContain("path: 'checkout.originalPriceLabel'");
-    expect(editorSource).toContain("path: 'checkout.promoCodeLabel'");
-    expect(editorSource).toContain("path: 'checkout.specialOffer.image'");
-    expect(editorSource).toContain("path: 'checkout.specialOffer.buttonLabel'");
-  });
-
-  it('passes customer email and active discount state into subscription checkout', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('customerEmail: checkoutEmail || user.email');
-    expect(stepSource).toContain('customerEmailLabel={content.checkout.customerEmailLabel}');
-    expect(stepSource).toContain('customerEmailPlaceholder={content.checkout.customerEmailPlaceholder}');
-    expect(stepSource).toContain('apiService.updateUser');
-    expect(stepSource).toContain('collectCurrentFunnelAttribution');
-    expect(stepSource).toContain(
-      'const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();',
-    );
-    expect(stepSource).toContain('const checkoutPromoActive =');
-    expect(stepSource).toContain("discountState.status === 'active'");
-    expect(stepSource).toContain('summaryLabel: checkoutSummaryLabel');
-  });
-
-  it('renders the checkout CTAs immediately after the plans and before the feature grid', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    const plansIndex = stepSource.indexOf("id='paywall-v2-plans'");
-    const paymentStackIndex = stepSource.indexOf("className='paywall-v2-payment-stack'");
-    const featureGridIndex = stepSource.indexOf("className='paywall-v2-feature-grid'");
-
-    expect(plansIndex).toBeGreaterThan(-1);
-    expect(paymentStackIndex).toBeGreaterThan(plansIndex);
-    expect(featureGridIndex).toBeGreaterThan(paymentStackIndex);
-    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
-    expect(stepSource).toContain('.paywall-v2-apple-pay-button,');
-    expect(stepSource).toContain('.paywall-v2-google-pay-button {');
-    expect(stepSource).toContain('min-height: 64px;');
-    expect(stepSource).toContain('border-radius: 16px;');
-    expect(stepSource).not.toContain('paywallApplePayAvailable');
-    expect(stepSource).not.toContain('APPLE_PAY_QR_CODE_URL');
-    expect(stepSource).toContain('beforeConfirm={preparePaywallWalletCheckout}');
-    expect(stepSource).not.toContain("className='paywall-v2-apple-pay-express'");
-    expect(stepSource).not.toContain("className='paywall-v2-plan-image-card'");
-    expect(stepSource).not.toContain("src='/paywall/paywall-image.png'");
-  });
-
-  it('keeps the mobile paywall geometry inside the viewport without horizontal scroll', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('overflow-x: hidden;');
-    expect(stepSource).toContain('grid-template-columns: minmax(128px, 164px) minmax(132px, 1fr);');
-    expect(stepSource).toContain('width: min(100%, 390px);');
-    expect(stepSource).toContain('margin: -12px auto 0;');
-    expect(stepSource).toContain('min-width: 0;');
-    expect(stepSource).toContain('width: min(34%, 118px);');
-    expect(stepSource).toContain('@container (max-width: 429px) {');
-    expect(stepSource).toContain('padding: 0 16px 48px;');
-    expect(stepSource).toContain('margin: 0 -16px 0;');
-  });
-
-  it('routes Apple Pay and Google Pay controls through subscription-backed Express Checkout', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
-    expect(stepSource).toContain("surfaceId={PAYWALL_WALLET_SURFACE_ID}");
-    expect(stepSource).toContain('checkout={walletCheckoutInput}');
-    expect(stepSource).toContain('resolveMethodClassName={resolvePaywallWalletMethodClassName}');
-    expect(stepSource).toContain('resolveMethodWrapperClassName={resolvePaywallWalletMethodWrapperClassName}');
-    expect(stepSource).toContain('onUnavailableClick={openCardCheckoutFromUnavailableWallet}');
-    expect(stepSource).not.toContain('session={checkoutSession}');
-    expect(stepSource).not.toContain('onClick={() => void startWalletCheckout()}');
-    expect(stepSource).not.toContain('StripeExpressCheckoutElement');
-    expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
-    expect(stepSource).not.toContain('redirectToStripeCheckout');
-    expect(stepSource).not.toContain('applepaycode/index.html');
-    expect(stepSource).not.toContain('href={paywallApplePayQrFallbackAllowed');
-  });
-
-  it('carries paywall wallet availability into checkout so reopened checkout keeps known wallets visible', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('type PaywallWalletAvailabilityState = Partial<Record<string, boolean>>;');
-    expect(stepSource).toContain('useState<PaywallWalletAvailabilityState>({});');
-    expect(stepSource).toContain('const handleWalletSurfaceAvailabilityChange = (');
-    expect(stepSource).toContain('availability: StripeSubscriptionWalletSurfaceAvailability');
-    expect(stepSource).toContain('paywallWalletAvailability[PAYWALL_WALLET_SURFACE_ID] ?? null');
-    expect(stepSource).toContain('initialWalletAvailable={checkoutInitialWalletAvailable}');
-    expect(stepSource).toContain('handleWalletSurfaceAvailabilityChange(PAYWALL_WALLET_SURFACE_ID, availability)');
-  });
-
-  it('prepares the real Apple Pay element on load instead of waiting for the placeholder tap', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
-    expect(stepSource).toContain('checkoutSession.prepareCardCheckout');
-    expect(stepSource).toContain('checkoutSession.activeClientSecret');
-    expect(stepSource).not.toContain('const autoWalletIntentKeyRef = useRef<string | null>(null);');
-    expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
-    expect(stepSource).not.toContain('StripeExpressCheckoutElement');
-    expect(stepSource).not.toContain('if (!available && clientSecret) {');
-  });
-
-  it('keeps the paywall Apple Pay control visible and confirms the subscription client secret', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).toContain('plan: selectedPlan');
-    expect(stepSource).toContain('customerEmail: checkoutEmail || user.email');
-    expect(stepSource).toContain('couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null');
-    expect(stepSource).toContain('summaryLabel: checkoutSummaryLabel');
-    expect(stepSource).toContain('checkoutSession.activeClientSecret');
-    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
-    expect(stepSource).toContain('const walletCheckoutInput = useMemo<StripeSubscriptionWalletSurfaceCheckoutInput>');
-    expect(stepSource).not.toContain('StripeExpressCheckoutElement');
-    expect(stepSource).not.toContain('preparePaywallWalletSubscription');
-    expect(stepSource).not.toContain('const handlePaywallApplePayPlaceholderClick = () => {');
-    expect(stepSource).not.toContain('onClick={handlePaywallApplePayPlaceholderClick}');
-  });
-
-  it('leaves checkout-start ownership to the shared session-aware payment helpers', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).not.toContain('publicAnalyticsSdk');
-    expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutStarted({');
-    expect(stepSource).toContain('stepType: stepPaywall.type');
-    expect(stepSource).toContain('value: selectedDisplayPlan.analyticsPurchaseValue');
-    expect(stepSource).toContain("currency: 'USD'");
-    expect(stepSource).toContain('analyticsMetadata: checkoutAnalyticsMetadata');
-    expect(stepSource).toContain('const checkoutAnalyticsContext = useMemo(');
-    expect(stepSource).toContain('checkoutAnalytics={checkoutAnalyticsContext}');
-    expect(stepSource).toContain('checkoutSessionId={checkoutSession.checkoutSessionId}');
-    expect(stepSource).not.toContain('onPaymentInfoSubmitted=');
-    expect(stepSource).toContain("await checkoutSession.prepareCardCheckout({ checkoutStartSource: 'checkout_render' });");
-    expect(stepSource).toContain('const handleCheckoutCompleted = () => {');
-    expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutCompleted({');
-    expect(stepSource).toContain('onSuccess={handleCheckoutCompleted}');
-    expect(stepSource).not.toContain("eventType: 'checkout_started'");
-    expect(stepSource).not.toContain("eventType: 'checkout_completed'");
-  });
-
-  it('delegates payment-info analytics to shared checkout components with session context', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const analyticsMetadata = stepSource.slice(
-      stepSource.indexOf('const checkoutAnalyticsMetadata = useMemo(() => {'),
-      stepSource.indexOf('const checkoutAnalyticsContext = useMemo(() => {'),
-    );
-    const checkoutAnalyticsContext = stepSource.slice(
-      stepSource.indexOf('const checkoutAnalyticsContext = useMemo(() => {'),
-      stepSource.indexOf('const successReturnUrl = useMemo(() => {'),
-    );
-    expect(analyticsMetadata).toContain("currency: 'USD'");
-    expect(checkoutAnalyticsContext).toContain('metadata: checkoutAnalyticsMetadata');
-    expect(stepSource.match(/checkoutAnalytics=\{checkoutAnalyticsContext\}/g)).toHaveLength(2);
-    expect(stepSource).toContain('checkoutSessionId={checkoutSession.checkoutSessionId}');
-    expect(stepSource).not.toContain('trackPaymentInfoSubmitted');
-    expect(stepSource).not.toContain('add_payment_info:');
-  });
-
-  it('uses a local three-plan catalog so the paywall shows weekly, monthly, and yearly offers', () => {
-    const billingConfigPath = path.resolve(__dirname, '../../../src/config/billing.plans.ts');
-    const paywallPlansHookPath = path.resolve(__dirname, './use-claimbee-paywall-plans.ts');
-    const stepPaywallPlansPath = path.resolve(__dirname, './step-32-paywall.plans.ts');
-    const stepPaywallOfferPath = path.resolve(__dirname, './step-32-paywall.offer.ts');
-    const paywallConfigPath = path.resolve(__dirname, '../config/claimbee-paywall.config.ts');
-    const billingTestConfigPath = path.resolve(__dirname, '../../../src/config/billing.test.plans.ts');
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(existsSync(billingConfigPath)).toBe(true);
-    expect(existsSync(paywallPlansHookPath)).toBe(false);
-    expect(existsSync(stepPaywallPlansPath)).toBe(false);
-    expect(existsSync(stepPaywallOfferPath)).toBe(false);
-    expect(existsSync(paywallConfigPath)).toBe(false);
-    expect(existsSync(billingTestConfigPath)).toBe(true);
-
-    const billingSource = existsSync(billingConfigPath)
-      ? readFileSync(billingConfigPath, 'utf8')
-      : '';
-
-    expect(stepSource).toContain("from '@/config/billing.plans'");
-    expect(stepSource).not.toContain("from '@/config/claimbee-paywall.config'");
-    expect(stepSource).toContain('resolveClaimbeeCheckoutMode(runtimeMode)');
-    expect(stepSource).toContain('const availablePlans = useMemo(');
-    expect(stepSource).toContain('buildConfigPaywallPlans');
-    expect(stepSource).toContain("['primary', 'secondary', 'tertiary']");
-    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');
-    expect(stepSource).toContain("from '@funnelsgrove/payments'");
-    expect(stepSource).not.toContain('useClaimbeePaywallPlans');
-    expect(stepSource).not.toContain("from './step-32-paywall.offer'");
-    expect(stepSource).not.toContain('/sdk/public/payments/plans');
-    expect(stepSource).not.toContain('claimbeeBillingPlans');
-    expect(billingSource).toContain('createRuntimeModeBillingPlanCatalog');
-    expect(billingSource).toContain('claimbeePlansByMode');
-    expect(billingSource).not.toContain('runtimeEnvConfig.stripeActiveMode');
-    expect(billingSource).toContain("title: '1-Week Plan'");
-    expect(billingSource).toContain("title: '1-Month Plan'");
-    expect(billingSource).toContain("title: '1-Year Plan'");
-    expect(billingSource).toContain("featuredTag: '🔥 Most Popular Choice'");
-    expect(billingSource).toContain("stage: 'first'");
-    expect(billingSource).toContain("couponId: 'fg_30_off_one'");
-    expect(billingSource).toContain('discountPercent: 30');
-    expect(billingSource).toContain("stage: 'second'");
-    expect(billingSource).toContain("couponId: 'fg_46_off_once'");
-    expect(billingSource).toContain('discountPercent: 46');
-    expect(billingSource).not.toContain('claimbeePaywallDiscounts');
-    expect(billingSource).not.toContain('oldPriceLabel');
-    expect(billingSource).not.toContain('perDayLabel');
-    expect(billingSource).not.toContain('billingInterval');
-    expect(billingSource).not.toContain('isDefault');
-  });
-
-  it('selects the monthly paywall plan by default', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain("const defaultSelectedPlan = 'secondary'");
-    expect(stepSource).toContain('availablePlans.find((plan) => plan.id === defaultSelectedPlan)?.id');
-    expect(stepSource).not.toContain('availablePlans.find((plan) => Boolean(plan.featuredTag))?.id');
-  });
-
-  it('renders the FAQ items as a collapsed accordion by default', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('const [openFaqIds, setOpenFaqIds] = useState<string[]>([])');
-    expect(stepSource).toContain('paywall-v2-faq');
-    expect(stepSource).toContain('paywall-v2-faq-toggle');
-    expect(stepSource).toContain('aria-expanded={isOpen}');
-    expect(contentSource).toContain(
-      'Do you only cover the big, famous lawsuits, or do you track smaller ones too?',
-    );
-    expect(stepSource).not.toContain("index === 0 ? 'paywall-v2-plan--featured' : ''");
-    expect(stepSource).toContain("plan.featuredTag ? 'paywall-v2-plan--featured' : ''");
-  });
-
-  it('renders the gold promo-applied strip below the hero image', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-
-    const heroIndex = stepSource.indexOf("className='paywall-v2-hero'");
-    const promoIndex = stepSource.indexOf("'paywall-v2-promo-banner'");
-    const highlightIndex = stepSource.indexOf("className='paywall-v2-highlight'");
-
-    expect(heroIndex).toBeGreaterThan(-1);
-    expect(promoIndex).toBeGreaterThan(heroIndex);
-    expect(highlightIndex).toBeGreaterThan(promoIndex);
-    expect(contentSource).toContain("initialLabel: '% Your promo code applied!'");
-    expect(contentSource).toContain("upgradedLabel: 'New promo code applied!'");
-    expect(stepSource).toContain('getPaywallPromoDisplayName');
-    expect(stepSource).toContain('promoDisplayName');
-    expect(stepSource).toContain('discountState.previousDiscountPercent');
-  });
-
-  it('matches the Figma promo strip treatment with a notched split card', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    const promoStylesStart = stepSource.indexOf('.paywall-v2-promo-banner {');
-    const promoStylesEnd = stepSource.indexOf('.paywall-v2-highlight {');
-    const promoStyles = stepSource.slice(promoStylesStart, promoStylesEnd);
-
-    expect(promoStylesStart).toBeGreaterThan(-1);
-    expect(promoStyles).toContain('max-width: 382px;');
-    expect(promoStyles).toContain('min-height: 86px;');
-    expect(promoStyles).toContain('position: relative;');
-    expect(promoStyles).toContain('display: flex;');
-    expect(promoStyles).toContain('flex-direction: column;');
-    expect(promoStyles).toContain('overflow: hidden;');
-    expect(promoStyles).toContain('margin: -20px auto 0;');
-    expect(promoStyles).toContain('.paywall-v2-promo-banner::before,');
-    expect(promoStyles).toContain('.paywall-v2-promo-banner::after {');
-    expect(promoStyles).toContain('background: #ecf7ff;');
-    expect(promoStyles).toContain('repeating-linear-gradient(');
-    expect(promoStyles).toContain('.paywall-v2-promo-label {');
-    expect(promoStyles).toContain(
-      "font-family: var(--font-family-base, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);",
-    );
-    expect(promoStyles).toContain('font-size: 16px;');
-    expect(promoStyles).toContain('font-weight: 600;');
-    expect(promoStyles).toContain('line-height: 1.35;');
-    expect(promoStyles).toContain('text-align: center;');
-    expect(promoStyles).toContain('justify-content: center;');
-    expect(promoStyles).toContain('.paywall-v2-promo-code {');
-    expect(promoStyles).toContain('font-size: 14px;');
-    expect(promoStyles).toContain('font-weight: 700;');
-    expect(promoStyles).toContain('--paywall-v2-promo-code-height: 41px;');
-    expect(promoStyles).toContain('width: 100%;');
-    expect(promoStyles).toContain('.paywall-v2-promo-banner.is-upgraded {');
-    expect(promoStyles).toContain('.paywall-v2-promo-upgrade-row {');
-    expect(promoStyles).toContain('.paywall-v2-promo-upgrade-badge {');
-    expect(promoStyles).toContain('.paywall-v2-promo-upgrade-label {');
-    expect(promoStyles).not.toContain('.paywall-v2-promo-glyph {');
-    expect(readFileSync(path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'), 'utf8')).toContain(
-      "initialLabel: '% Your promo code applied!'",
-    );
-    expect(stepSource).not.toContain("className='paywall-v2-promo-glyph'");
-  });
-
-  it('renders the discounted per-day row and the auto-renew disclaimer below the buttons', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain("'paywall-v2-plan-indicator'");
-    expect(stepSource).toContain("className='paywall-v2-plan-divider'");
-    expect(stepSource).toContain("className='paywall-v2-plan-per-day-price'");
-    expect(stepSource).toContain("className='paywall-v2-plan-per-day-old'");
-    expect(stepSource).toContain("className='paywall-v2-disclaimer'");
-    expect(stepSource).toContain('buildPaywallRenewalDisclaimer');
-    expect(stepSource).toContain("className='paywall-v2-disclaimer'");
-  });
-
-  it('renders paywall support from the runtime project support email', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-    const contentSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/content/step-32-paywall.content.ts'),
-      'utf8',
-    );
-    const editorSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/editor/step-32-paywall.editor.ts'),
-      'utf8',
-    );
-
-    expect(stepSource).toContain('runtimePublicConfig.supportEmail');
-    expect(stepSource).toContain('const supportEmail = runtimePublicConfig.supportEmail;');
-    expect(stepSource).toContain('content.checkout.supportText');
-    expect(stepSource).toContain("className='paywall-v2-support'");
-    expect(stepSource).toContain('href={`mailto:${supportEmail}`}');
-    expect(stepSource).not.toContain('mailto:hello@claimbee.app');
-    expect(contentSource).not.toContain('supportEmail:');
-    expect(editorSource).not.toContain("path: 'checkout.supportEmail'");
-  });
-
-  it('matches the Figma plan-card spacing so the per-day label stays aligned', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    const planStylesStart = stepSource.indexOf('.paywall-v2-plan {');
-    const planStylesEnd = stepSource.indexOf('.paywall-v2-payment-stack {');
-    const planStyles = stepSource.slice(planStylesStart, planStylesEnd);
-
-    expect(planStylesStart).toBeGreaterThan(-1);
-    expect(planStyles).toContain('padding: 16px 14px;');
-    expect(planStyles).toContain('justify-content: flex-start;');
-    expect(planStyles).toContain('align-items: center;');
-    expect(planStyles).toContain('width: 22px;');
-    expect(planStyles).toContain('height: 22px;');
-    expect(planStyles).toContain('width: 7px;');
-    expect(planStyles).toContain('height: 14px;');
-    expect(planStyles).toContain('.paywall-v2-plan-indicator.is-selected {');
-    expect(planStyles).toContain('background: var(--color-primary);');
-    expect(planStyles).toContain('border-left: 1px solid rgb(31 16 0 / 8%);');
-    expect(planStyles).toContain('text-align: center;');
-    expect(planStyles).toContain('width: min(34%, 118px);');
-    expect(planStyles).toContain('width: 100%;');
-    expect(planStyles).toContain('gap: 6px;');
-    expect(planStyles).toContain('gap: 2px;');
-    expect(planStyles).toContain('min-height: 32px;');
-    expect(planStyles).toContain('min-height: 92px;');
-    expect(planStyles).toContain('font-size: 22px;');
-    expect(planStyles).toContain('font-size: 16px;');
-    expect(planStyles).toContain('font-size: 15px;');
-    expect(planStyles).toContain('font-size: 30px;');
-    expect(planStyles).toContain('color: rgba(31, 16, 0, 0.72);');
-    expect(planStyles).toContain('color: rgba(31, 16, 0, 0.44);');
-    expect(planStyles).toContain('font-weight: 500;');
-    expect(planStyles).toContain('.paywall-v2-plan.is-selected .paywall-v2-plan-title,');
-    expect(planStyles).toContain('.paywall-v2-plan.is-selected .paywall-v2-plan-per-day-amount {');
-    expect(planStyles).toContain('color: var(--color-secondary-text);');
-    expect(planStyles).not.toContain('align-items: flex-start;');
-    expect(planStyles).not.toContain('.paywall-v2-plan--featured .paywall-v2-plan-row {');
-  });
-
-  it('keeps the featured plan taller so the badge sits above a full-height body', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    const planStylesStart = stepSource.indexOf('.paywall-v2-plan {');
-    const planStylesEnd = stepSource.indexOf('.paywall-v2-payment-stack {');
-    const planStyles = stepSource.slice(planStylesStart, planStylesEnd);
-
-    expect(planStyles).toContain('.paywall-v2-plan-tag {');
-    expect(planStyles).toContain('min-height: 32px;');
-    expect(planStyles).toContain('.paywall-v2-plan-row {');
-    expect(planStyles).toContain('min-height: 92px;');
-    expect(planStyles).not.toContain('min-height: 70px;');
-  });
-
-  it('keeps the feature grid below checkout and ends the paywall with the guarantee', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    const paymentStackIndex = stepSource.indexOf("className='paywall-v2-payment-stack'");
-    const featureGridIndex = stepSource.indexOf("className='paywall-v2-feature-grid'");
-    const feedbackIndex = stepSource.indexOf("className='paywall-v2-feedback'");
-    const faqIndex = stepSource.indexOf("className='paywall-v2-faq'");
-    const guaranteeIndex = stepSource.indexOf("className='paywall-v2-guarantee-card'");
-    const styleIndex = stepSource.lastIndexOf('<style>{stepPaywallStyles}</style>');
-
-    expect(paymentStackIndex).toBeGreaterThan(-1);
-    expect(featureGridIndex).toBeGreaterThan(paymentStackIndex);
-    expect(feedbackIndex).toBeGreaterThan(featureGridIndex);
-    expect(faqIndex).toBeGreaterThan(feedbackIndex);
-    expect(guaranteeIndex).toBeGreaterThan(faqIndex);
-    expect(styleIndex).toBeGreaterThan(guaranteeIndex);
-    expect(stepSource.slice(guaranteeIndex, styleIndex)).not.toContain("className='paywall-v2-feature-grid'");
-    expect(stepSource.slice(guaranteeIndex, styleIndex)).toContain('width={184}');
-    expect(stepSource).toContain('width: 184px;');
-    expect(stepSource).toContain('height: 184px;');
-    expect(stepSource).toContain('object-fit: cover;');
-    expect(stepSource).toContain('object-position: center 54%;');
-    expect(stepSource).toContain('font-size: 22px;');
-    expect(stepSource).toContain('white-space: nowrap;');
-  });
-
-  it('keeps the rotating reviews card at a fixed height so the paywall does not jump between stories', () => {
-    const stepSource = readFileSync(
-      path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
-      'utf8',
-    );
-
-    const feedbackCardStylesStart = stepSource.indexOf('.paywall-v2-feedback-card {');
-    const feedbackCardStylesEnd = stepSource.indexOf('.paywall-v2-feedback-quote {');
-    const feedbackCardStyles = stepSource.slice(
-      feedbackCardStylesStart,
-      feedbackCardStylesEnd,
-    );
-
-    expect(feedbackCardStylesStart).toBeGreaterThan(-1);
-    expect(feedbackCardStyles).toContain('box-sizing: border-box;');
-    expect(feedbackCardStyles).toContain('height: 372px;');
-    expect(feedbackCardStyles).not.toContain('min-height: 228px;');
-  });
-});