@funnelsgrove/cli 0.1.14 → 0.1.18

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

@@ -0,0 +1,770 @@
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('ClaimBee paywall source', () => {
+  it('uses the local checkout runtime config when creating subscription-backed custom checkout intents', () => {
+    const stepSource = readFileSync(
+      path.resolve(__dirname, './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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './content/step-32-paywall.content.ts'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain('SharedCheckoutSpecialOfferDialog');
+    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('GooglePaySubscriptionCheckoutSlot');
+    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("className='paywall-v2-apple-pay-button'");
+    expect(stepSource).toContain("className='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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './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()');
+    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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
+    expect(stepSource).toContain('checkoutSession.activeClientSecret');
+    expect(stepSource).toContain('<SharedStripeCheckoutV2Dialog');
+    expect(stepSource).toContain('<ApplePaySubscriptionCheckoutSlot');
+    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 when payment information is submitted', () => {
+    const stepSource = readFileSync(
+      path.resolve(__dirname, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const paymentInfoHandler = stepSource.slice(
+      stepSource.indexOf('const trackPaymentInfoSubmitted = () => {'),
+      stepSource.indexOf('const preparePaywallWalletCheckout'),
+    );
+    const checkoutStartHandler = stepSource.slice(
+      stepSource.indexOf('const startCheckout = async () => {'),
+      stepSource.indexOf('const trackPaymentInfoSubmitted'),
+    );
+
+    expect(stepSource).toContain('const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();');
+    expect(paymentInfoHandler).toContain('completeStep(analyticsStepId, {');
+    expect(paymentInfoHandler).toContain('planId: selectedDisplayPlan.id');
+    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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain("from '@/config/billing.plans'");
+    expect(stepSource).toContain('billingDiscounts');
+    expect(stepSource).not.toContain("from '@/config/claimbee-paywall.config'");
+    expect(stepSource).toContain('CLAIMBEE_PAYWALL_SECOND_COUPON_ID');
+    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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './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, './content/step-32-paywall.content.ts'),
+      'utf8',
+    );
+    const editorSource = readFileSync(
+      path.resolve(__dirname, './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, './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, './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('ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('GooglePaySubscriptionCheckoutSlot');
+    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, './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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain("<div className='paywall-v2-apple-pay-shell'>");
+    expect(stepSource).toContain("<div className='paywall-v2-google-pay-shell'>");
+    expect(stepSource).toContain('<ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('<GooglePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('onUnavailableClick={openCardCheckoutFromUnavailableWallet}');
+    expect(stepSource).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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain('type PaywallWalletAvailabilityState = {');
+    expect(stepSource).toContain('const [paywallWalletAvailability, setPaywallWalletAvailability] = useState<PaywallWalletAvailabilityState>');
+    expect(stepSource).toContain("updatePaywallWalletAvailability('applePay', available)");
+    expect(stepSource).toContain("updatePaywallWalletAvailability('googlePay', available)");
+    expect(stepSource).toContain('const checkoutInitialWalletAvailable = walletPaymentMethods.some(');
+    expect(stepSource).toContain('initialWalletAvailable={checkoutInitialWalletAvailable}');
+    expect(stepSource).toContain('onAvailabilityChange={handleApplePayAvailabilityChange}');
+    expect(stepSource).toContain('onAvailabilityChange={handleGooglePayAvailabilityChange}');
+  });
+
+  it('prepares the real Apple Pay element on load instead of waiting for the placeholder tap', () => {
+    const stepSource = readFileSync(
+      path.resolve(__dirname, './step-32-paywall.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
+    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
+    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, './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('<ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('<GooglePaySubscriptionCheckoutSlot');
+    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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+
+    expect(stepSource).toContain('const trackPaymentInfoSubmitted = () => {');
+    expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutStarted({');
+    expect(stepSource).toContain('publicAnalyticsSdk.trackPaymentInfoSubmitted({');
+    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).toContain('onPaymentInfoSubmitted={trackPaymentInfoSubmitted}');
+    expect(stepSource).toContain('await checkoutSession.prepareCardCheckout();');
+    expect(stepSource).not.toContain('const trackCheckoutCompleted = () => {');
+    expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutCompleted({');
+    expect(stepSource).not.toContain('onSuccess={trackCheckoutCompleted}');
+    expect(stepSource).not.toContain("eventType: 'checkout_started'");
+    expect(stepSource).not.toContain("eventType: 'checkout_completed'");
+  });
+
+  it('emits payment-info analytics only after a stable Checkout Session exists', () => {
+    const stepSource = readFileSync(
+      path.resolve(__dirname, './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(() => {'),
+    );
+    const paymentInfoHandler = stepSource.slice(
+      stepSource.indexOf('const trackPaymentInfoSubmitted = () => {'),
+      stepSource.indexOf('const preparePaywallWalletCheckout'),
+    );
+
+    expect(analyticsMetadata).toContain("currency: 'USD'");
+    expect(checkoutAnalyticsContext).toContain('metadata: checkoutAnalyticsMetadata');
+    expect(paymentInfoHandler).toContain(
+      'const checkoutSessionId = checkoutSession.checkoutSessionId?.trim();',
+    );
+    expect(paymentInfoHandler).toContain('if (!checkoutSessionId) {');
+    expect(paymentInfoHandler.indexOf('if (!checkoutSessionId) {')).toBeLessThan(
+      paymentInfoHandler.indexOf('completeStep(analyticsStepId, {'),
+    );
+    expect(paymentInfoHandler).toContain(
+      'eventId: `add_payment_info:${checkoutSessionId}`',
+    );
+    expect(paymentInfoHandler).toContain('metadata: checkoutAnalyticsMetadata');
+    expect(paymentInfoHandler).toContain('void publicAnalyticsSdk.flush().catch(() => 0);');
+  });
+
+  it('uses a local three-plan catalog so the paywall shows weekly, monthly, and yearly offers', () => {
+    const billingConfigPath = path.resolve(__dirname, '../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, '../config/billing.test.plans.ts');
+    const stepSource = readFileSync(
+      path.resolve(__dirname, './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]');
+    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, './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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './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, './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, './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, './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, './step-32-paywall.tsx'),
+      'utf8',
+    );
+    const contentSource = readFileSync(
+      path.resolve(__dirname, './content/step-32-paywall.content.ts'),
+      'utf8',
+    );
+    const editorSource = readFileSync(
+      path.resolve(__dirname, './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, './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, './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, './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, './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;');
+  });
+});