fix: poll checkout intent API within billing details

src/components/StatefulButton/StatefulSubscribeButton.tsx

@@ -8,9 +8,10 @@
 import { useContext, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useCheckoutIntent } from '@/components/app/data';
+import { determineExistingSuccessfulCheckoutIntent } from '@/components/app/data/services/context';
+import { useCheckoutIntent, usePolledCheckoutIntent } from '@/components/app/data';
 import { termsAndConditions } from '@/components/app/data/constants';
 import { queryBffContext } from '@/components/app/data/queries/queries';
 import { patchCheckoutIntent } from '@/components/app/data/services/checkout-intent';
 import { CheckoutPageRoute, CheckoutSubstepKey, DataStoreKey } from '@/constants/checkout';
 import EVENT_NAMES from '@/constants/events';
@@ -59,7 +60,7 @@
   const [errorMessageKey, setErrorMessageKey] = useState('fallback');
   const { data: checkoutIntent } = useCheckoutIntent();
   const intl = useIntl();
-
+  const { data: polledCheckoutIntent } = usePolledCheckoutIntent();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { authenticatedUser }: AppContextValue = useContext(AppContext);
@@ -104,7 +105,6 @@
     }
     // Set the button to the appropriate state based on the response.
     // Stripe responses map 1:1 to button states except for 'default' which is the initial state.
-    setStatefulButtonState(response.type || 'default');
     if (response.type === 'error') {
       setErrorMessageKey(buttonMessages.error[response.error?.code] ? response.error?.code : 'fallback');
       logError(
@@ -113,18 +113,18 @@
     }
   };
 
+  // Visually alter the Subscribe button to a "successful" appearance if the polled intent state becomes successful.
+  useEffect(() => {
+    if (statefulButtonState === 'pending' && determineExistingSuccessfulCheckoutIntent(polledCheckoutIntent?.state)) {
+      setStatefulButtonState('success');
+    }
+  }, [polledCheckoutIntent?.state, navigate, statefulButtonState]);
+
   useEffect(() => {
     if (statefulButtonState === 'success') {
-      // If the payment succeeded, update the checkout session status.
+      // If the payment succeeded from the stripe API, update the checkout session status.
       if (status.type === 'complete' && status.paymentStatus === 'paid') {
         setCheckoutSessionStatus(status);
-        queryClient.invalidateQueries({
-          queryKey: queryBffContext(
-            authenticatedUser.id,
-          ).queryKey,
-        })
-          .then(data => data)
-          .catch(error => logError(error));
         sendEnterpriseCheckoutTrackingEvent({
           checkoutIntentId: checkoutIntent?.id ?? null,
           eventName: EVENT_NAMES.SUBSCRIPTION_CHECKOUT.PAYMENT_PROCESSED_SUCCESSFULLY,

src/components/StatefulButton/tests/StatefulSubscribeButton.test.tsx

@@ -47,6 +47,7 @@ jest.mock('@/components/app/data', () => ({
     data:
       { id: 'test-intent', country: 'US', state: 'created' },
   })),
+  usePolledCheckoutIntent: jest.fn(() => ({ data: { state: 'paid' } })),
 }));
 
 jest.mock('@/hooks/useCheckoutFormStore', () => ({
@@ -342,7 +343,6 @@ describe('StatefulSubscribeButton', () => {
       // Wait for the useEffect to trigger after state changes to 'success'
       await waitFor(() => {
         expect(mockSetCheckoutSessionStatus).toHaveBeenCalledWith({ type: 'complete', paymentStatus: 'paid' });
-        expect(mockInvalidateQueries).toHaveBeenCalled();
         expect(jest.mocked(sendEnterpriseCheckoutTrackingEvent)).toHaveBeenCalledWith({
           checkoutIntentId: 'test-intent',
           eventName: EVENT_NAMES.SUBSCRIPTION_CHECKOUT.PAYMENT_PROCESSED_SUCCESSFULLY,

src/components/app/data/services/context.ts

@@ -80,5 +80,6 @@ const fetchCheckoutSuccess = async (): Promise<CheckoutContextResponse> => {
 export {
   fetchCheckoutContext,
   fetchCheckoutSuccess,
+  determineExistingSuccessfulCheckoutIntent,
   paymentProcessedCheckoutIntentStates,
 };

src/components/app/routes/loaders/checkoutStepperLoader.ts

@@ -2,7 +2,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { QueryClient } from '@tanstack/react-query';
 import { redirect } from 'react-router-dom';
 
-import { queryBffContext } from '@/components/app/data/queries/queries';
+import { queryBffContext, queryBffSuccess, queryCheckoutIntent } from '@/components/app/data/queries/queries';
 import { getCheckoutSessionClientSecret, validateFormState } from '@/components/app/routes/loaders/utils';
 import { CheckoutPageRoute } from '@/constants/checkout';
 import { checkoutFormStore } from '@/hooks/useCheckoutFormStore';
@@ -144,12 +144,31 @@ async function billingDetailsSuccessLoader(queryClient: QueryClient): Promise<Re
   const contextMetadata: CheckoutContextResponse = await queryClient.ensureQueryData(
     queryBffContext(authenticatedUser?.userId || null),
   );
-
   const { checkoutIntent } = contextMetadata;
 
-  const checkoutIntentType = checkoutFormStore.getState().checkoutSessionStatus?.type;
+  if (!checkoutIntent) {
+    return redirect(CheckoutPageRoute.PlanDetails);
+  }
+
+  await queryClient.ensureQueryData(
+    queryBffSuccess(authenticatedUser?.userId || null),
+  );
+  if (checkoutIntent.id) {
+    await queryClient.ensureQueryData(
+      queryCheckoutIntent(checkoutIntent.id),
+    );
+  }
+
+  const stripeCheckoutSessionType = checkoutFormStore.getState().checkoutSessionStatus?.type;
 
-  if (checkoutIntentType !== 'complete' && !checkoutIntent?.existingSuccessfulCheckoutIntent) {
+  // Explicitly check that the intent is in a successful state
+  // If the intent is successful but the type is not 'complete',
+  // or if there is no existingSuccessfulCheckoutIntent flag,
+  // redirect to Plan Details to restart the process.
+  if (
+    !checkoutIntent.existingSuccessfulCheckoutIntent
+    || stripeCheckoutSessionType !== 'complete'
+  ) {
     return redirect(CheckoutPageRoute.PlanDetails);
   }
 

src/components/billing-details-pages/tests/BillingDetailsPage.test.tsx

@@ -49,6 +49,12 @@ describe('BillingDetailsPage', () => {
       },
     });
     (useCheckoutSessionClientSecret as jest.Mock).mockReturnValue('secret-123');
+    (usePolledCheckoutIntent as jest.Mock).mockReturnValue({
+      data: {
+        id: 1,
+        state: 'pending',
+      },
+    });
     (useCheckout as jest.Mock).mockReturnValue({
       canConfirm: true,
       confirm: jest.fn().mockResolvedValue({ type: 'success' }),