@funnelsgrove/cli 0.1.68 → 0.1.71

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

@@ -43,8 +43,7 @@ describe('ClaimBee paywall source', () => {
     );
 
     expect(stepSource).toContain('SharedCheckoutSpecialOfferDialog');
-    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
-    expect(stepSource).toContain('GooglePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
     expect(stepSource).toContain('SharedStripeCheckoutV2Dialog');
     expect(stepSource).not.toContain('StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
@@ -67,8 +66,8 @@ describe('ClaimBee paywall source', () => {
     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).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');
   });
 
@@ -172,7 +171,7 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
     expect(stepSource).toContain('checkoutSession.activeClientSecret');
     expect(stepSource).toContain('<SharedStripeCheckoutV2Dialog');
-    expect(stepSource).toContain('<ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
     expect(stepSource).not.toContain('<StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('createStripePaymentIntent');
     expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
@@ -183,23 +182,25 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain("aria-label='Loading checkout'");
   });
 
-  it('claims paywall completion only when payment information is submitted', () => {
+  it('claims paywall completion only after verified checkout success', () => {
     const stepSource = readFileSync(
       path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
       'utf8',
     );
-    const paymentInfoHandler = stepSource.slice(
-      stepSource.indexOf('const trackPaymentInfoSubmitted = () => {'),
+    const completionHandler = stepSource.slice(
+      stepSource.indexOf('const handleCheckoutCompleted = () => {'),
       stepSource.indexOf('const preparePaywallWalletCheckout'),
     );
     const checkoutStartHandler = stepSource.slice(
       stepSource.indexOf('const startCheckout = async () => {'),
-      stepSource.indexOf('const trackPaymentInfoSubmitted'),
+      stepSource.indexOf('const handleCheckoutCompleted'),
     );
 
     expect(stepSource).toContain('const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();');
-    expect(paymentInfoHandler).toContain('completeStep(analyticsStepId, {');
-    expect(paymentInfoHandler).toContain('planId: selectedDisplayPlan.id');
+    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(');
   });
 
@@ -315,8 +316,7 @@ describe('ClaimBee paywall source', () => {
     expect(plansIndex).toBeGreaterThan(-1);
     expect(paymentStackIndex).toBeGreaterThan(plansIndex);
     expect(featureGridIndex).toBeGreaterThan(paymentStackIndex);
-    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
-    expect(stepSource).toContain('GooglePaySubscriptionCheckoutSlot');
+    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;');
@@ -352,12 +352,13 @@ describe('ClaimBee paywall source', () => {
       '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('<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).toContain('session={checkoutSession}');
+    expect(stepSource).not.toContain('session={checkoutSession}');
     expect(stepSource).not.toContain('onClick={() => void startWalletCheckout()}');
     expect(stepSource).not.toContain('StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
@@ -372,14 +373,13 @@ describe('ClaimBee paywall source', () => {
       '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('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('onAvailabilityChange={handleApplePayAvailabilityChange}');
-    expect(stepSource).toContain('onAvailabilityChange={handleGooglePayAvailabilityChange}');
+    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', () => {
@@ -389,7 +389,7 @@ describe('ClaimBee paywall source', () => {
     );
 
     expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
     expect(stepSource).toContain('checkoutSession.prepareCardCheckout');
     expect(stepSource).toContain('checkoutSession.activeClientSecret');
     expect(stepSource).not.toContain('const autoWalletIntentKeyRef = useRef<string | null>(null);');
@@ -410,8 +410,8 @@ describe('ClaimBee paywall source', () => {
     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).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 = () => {');
@@ -424,9 +424,8 @@ describe('ClaimBee paywall source', () => {
       'utf8',
     );
 
-    expect(stepSource).toContain('const trackPaymentInfoSubmitted = () => {');
+    expect(stepSource).not.toContain('publicAnalyticsSdk');
     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'");
@@ -434,16 +433,16 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('const checkoutAnalyticsContext = useMemo(');
     expect(stepSource).toContain('checkoutAnalytics={checkoutAnalyticsContext}');
     expect(stepSource).toContain('checkoutSessionId={checkoutSession.checkoutSessionId}');
-    expect(stepSource).toContain('onPaymentInfoSubmitted={trackPaymentInfoSubmitted}');
+    expect(stepSource).not.toContain('onPaymentInfoSubmitted=');
     expect(stepSource).toContain("await checkoutSession.prepareCardCheckout({ checkoutStartSource: 'checkout_render' });");
-    expect(stepSource).not.toContain('const trackCheckoutCompleted = () => {');
+    expect(stepSource).toContain('const handleCheckoutCompleted = () => {');
     expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutCompleted({');
-    expect(stepSource).not.toContain('onSuccess={trackCheckoutCompleted}');
+    expect(stepSource).toContain('onSuccess={handleCheckoutCompleted}');
     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', () => {
+  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',
@@ -456,25 +455,12 @@ describe('ClaimBee paywall source', () => {
       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);');
+    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', () => {