Allowing local lemonsqueezy payment skip and emulate success response

resources/js/pages/marketing/checkout/__tests__/PaymentStep.render.test.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render, screen } from '@testing-library/react';
-import { CheckoutWizardProvider } from '../WizardContext';
+import { CheckoutWizardProvider, useCheckoutWizard } from '../WizardContext';
 import { PaymentStep } from '../steps/PaymentStep';
+import { fireEvent, waitFor } from '@testing-library/react';
 
 vi.mock('@/hooks/useAnalytics', () => ({
   useAnalytics: () => ({ trackEvent: vi.fn() }),
@@ -14,6 +15,21 @@ const basePackage = {
   lemonsqueezy_variant_id: 'pri_test_123',
 };
 
+const StepIndicator = () => {
+  const { currentStep } = useCheckoutWizard();
+  return <div data-testid="current-step">{currentStep}</div>;
+};
+
+const AuthSeeder = () => {
+  const { setAuthUser } = useCheckoutWizard();
+
+  useEffect(() => {
+    setAuthUser({ id: 1, email: 'demo@example.com' });
+  }, [setAuthUser]);
+
+  return null;
+};
+
 describe('PaymentStep', () => {
   beforeEach(() => {
     localStorage.clear();
@@ -21,11 +37,13 @@ describe('PaymentStep', () => {
       Setup: vi.fn(),
       Url: { Open: vi.fn() },
     };
+    vi.stubGlobal('fetch', vi.fn());
   });
 
   afterEach(() => {
     cleanup();
     delete window.LemonSqueezy;
+    vi.unstubAllGlobals();
   });
 
   it('renders the payment experience without crashing', async () => {
@@ -38,4 +56,64 @@ describe('PaymentStep', () => {
     expect(await screen.findByText('checkout.payment_step.guided_title')).toBeInTheDocument();
     expect(screen.queryByText('checkout.legal.checkbox_digital_content_label')).not.toBeInTheDocument();
   });
+
+  it('skips Lemon Squeezy payment when backend simulates checkout', async () => {
+    const fetchMock = vi.mocked(fetch);
+    fetchMock.mockImplementation(async (input) => {
+      if (typeof input === 'string' && input.includes('/sanctum/csrf-cookie')) {
+        return {
+          ok: true,
+          status: 204,
+          redirected: false,
+          url: '',
+          text: async () => '',
+        } as Response;
+      }
+
+      if (typeof input === 'string' && input.includes('/lemonsqueezy/create-checkout')) {
+        return {
+          ok: true,
+          status: 200,
+          redirected: false,
+          url: '',
+          text: async () => JSON.stringify({
+            simulated: true,
+            checkout_session_id: 'session_123',
+            order_id: 'order_123',
+            id: 'chk_123',
+          }),
+        } as Response;
+      }
+
+      return {
+        ok: true,
+        status: 200,
+        redirected: false,
+        url: '',
+        text: async () => '',
+      } as Response;
+    });
+
+    render(
+      <CheckoutWizardProvider
+        initialPackage={basePackage}
+        packageOptions={[basePackage]}
+        initialStep="payment"
+      >
+        <AuthSeeder />
+        <StepIndicator />
+        <PaymentStep />
+      </CheckoutWizardProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole('checkbox'));
+    const ctas = await screen.findAllByText('checkout.payment_step.pay_with_lemonsqueezy');
+    fireEvent.click(ctas[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('current-step')).toHaveTextContent('confirmation');
+    });
+
+    expect(window.LemonSqueezy?.Url.Open).not.toHaveBeenCalled();
+  });
 });

resources/js/pages/marketing/checkout/steps/PaymentStep.tsx

@@ -465,7 +465,7 @@ export const PaymentStep: React.FC = () => {
         console.info('[Checkout] Lemon Squeezy checkout response', { status: response.status, rawBody });
       }
 
-      let data: { checkout_url?: string; message?: string } | null = null;
+      let data: { checkout_url?: string; message?: string; simulated?: boolean; order_id?: string; checkout_id?: string; id?: string; checkout_session_id?: string } | null = null;
       try {
         data = rawBody && rawBody.trim().startsWith('{') ? JSON.parse(rawBody) : null;
       } catch (parseError) {
@@ -473,8 +473,24 @@ export const PaymentStep: React.FC = () => {
         data = null;
       }
 
-      if (data && typeof (data as { checkout_session_id?: string }).checkout_session_id === 'string') {
-        setCheckoutSessionId((data as { checkout_session_id?: string }).checkout_session_id ?? null);
+      const checkoutSession = data?.checkout_session_id ?? null;
+      if (checkoutSession && typeof checkoutSession === 'string') {
+        setCheckoutSessionId(checkoutSession);
+      }
+
+      if (data?.simulated) {
+        const orderId = typeof data.order_id === 'string' ? data.order_id : null;
+        const checkoutId = typeof data.checkout_id === 'string'
+          ? data.checkout_id
+          : (typeof data.id === 'string' ? data.id : null);
+
+        setStatus('processing');
+        setMessage(t('checkout.payment_step.processing_confirmation'));
+        setInlineActive(false);
+        setPendingConfirmation({ orderId, checkoutId });
+        setPaymentCompleted(true);
+        nextStep();
+        return;
       }
 
       let checkoutUrl: string | null = typeof data?.checkout_url === 'string' ? data.checkout_url : null;