Merge pull request #18900 from mozilla/FXA-11715

julianpoy · web-flow · commit 078a2dae2c56 · 2025-05-21T09:49:04.000-07:00
feat(payments-next): reduce getCart &amp; Stripe calls
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/processing/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/processing/page.tsx
@@ -10,7 +10,7 @@ import {
 } from '@fxa/payments/ui';
 import { getApp, SupportedPages } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
-import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
+import { validateCartStateAndRedirectAction } from '@fxa/payments/ui/actions';
 import type { Metadata } from 'next';
 import { config } from 'apps/payments/next/config';
 
@@ -45,7 +45,7 @@ export default async function ProcessingPage({
   const { locale } = params;
   const acceptLanguage = headers().get('accept-language');
   const l10n = getApp().getL10n(acceptLanguage, locale);
-  const cart = await getCartOrRedirectAction(
+  await validateCartStateAndRedirectAction(
     params.cartId,
     SupportedPages.PROCESSING,
     searchParams
@@ -56,7 +56,7 @@ export default async function ProcessingPage({
       data-testid="payment-processing"
     >
       <LoadingSpinner className="w-10 h-10" />
-      <PaymentStateObserver cartId={cart.id} />
+      <PaymentStateObserver cartId={params.cartId} />
       {l10n.getString(
         'next-payment-processing-message',
         `Please wait while we process your payment…`
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/processing/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/processing/page.tsx
@@ -10,7 +10,7 @@ import {
 } from '@fxa/payments/ui';
 import { getApp, SupportedPages } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
-import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
+import { validateCartStateAndRedirectAction } from '@fxa/payments/ui/actions';
 import { Metadata } from 'next';
 import { config } from 'apps/payments/next/config';
 
@@ -45,7 +45,7 @@ export default async function ProcessingPage({
   const { locale } = params;
   const acceptLanguage = headers().get('accept-language');
   const l10n = getApp().getL10n(acceptLanguage, locale);
-  const cart = await getCartOrRedirectAction(
+  await validateCartStateAndRedirectAction(
     params.cartId,
     SupportedPages.PROCESSING,
     searchParams
@@ -56,7 +56,7 @@ export default async function ProcessingPage({
       data-testid="payment-processing"
     >
       <LoadingSpinner className="w-10 h-10" />
-      <PaymentStateObserver cartId={cart.id} />
+      <PaymentStateObserver cartId={params.cartId} />
       {l10n.getString(
         'next-payment-processing-message',
         `Please wait while we process your payment…`
diff --git a/libs/payments/cart/src/lib/cart.service.spec.ts b/libs/payments/cart/src/lib/cart.service.spec.ts
@@ -1268,6 +1268,25 @@ describe('CartService', () => {
     });
   });
 
+  describe('getCartState', () => {
+    it('returns cart state', async () => {
+      const mockCart = ResultCartFactory({
+        state: CartState.START,
+        stripeSubscriptionId: null,
+        eligibilityStatus: CartEligibilityStatus.CREATE,
+      });
+
+      jest.spyOn(cartManager, 'fetchCartById').mockResolvedValue(mockCart);
+
+      const result = await cartService.getCartState(mockCart.id);
+      expect(result).toEqual({
+        state: mockCart.state
+      });
+
+      expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);
+    });
+  });
+
   describe('getCart', () => {
     const mockCustomerSession = StripeResponseFactory(
       StripeCustomerSessionFactory()
diff --git a/libs/payments/cart/src/lib/cart.service.ts b/libs/payments/cart/src/lib/cart.service.ts
@@ -632,6 +632,18 @@ export class CartService {
     );
   }
 
+  /**
+   * Fetch a cart from the database by ID
+   */
+  @SanitizeExceptions()
+  async getCartState(cartId: string): Promise<{ state: CartState }> {
+    const cart = await this.cartManager.fetchCartById(cartId);
+
+    return {
+      state: cart.state,
+    };
+  }
+
   /**
    * Fetch a cart from the database by ID
    */
diff --git a/libs/payments/ui/src/lib/actions/getCartOrRedirect.ts b/libs/payments/ui/src/lib/actions/getCartOrRedirect.ts
@@ -15,9 +15,7 @@ import {
   FailCartDTO,
   SuccessCartDTO,
   CartDTO,
-  CartInvalidStateForActionError,
 } from '@fxa/payments/cart';
-import { VError } from 'verror';
 
 /**
  * Get Cart or Redirect if cart state does not match supported page
@@ -55,34 +53,11 @@ async function getCartOrRedirectAction(
   page: SupportedPages,
   searchParams?: Record<string, string>
 ): Promise<CartDTO> {
-  let cart: CartDTO | undefined;
   const urlSearchParams = new URLSearchParams(searchParams);
   const params = searchParams ? `?${urlSearchParams.toString()}` : '';
-  switch (page) {
-    case SupportedPages.SUCCESS: {
-      try {
-        cart = await getApp().getActionsService().getSuccessCart({
-          cartId,
-        });
-      } catch (error) {
-        if (error instanceof CartInvalidStateForActionError) {
-          redirect(getRedirect(VError.info(error).state) + params);
-        } else {
-          throw error;
-        }
-      }
-      break;
-    }
-    case SupportedPages.START:
-    case SupportedPages.PROCESSING:
-    case SupportedPages.NEEDS_INPUT:
-    case SupportedPages.ERROR: {
-      cart = await getApp().getActionsService().getCart({
-        cartId,
-      });
-      break;
-    }
-  }
+  const cart = await getApp().getActionsService().getCart({
+    cartId,
+  });
 
   if (!validateCartState(cart.state, page)) {
     redirect(getRedirect(cart.state) + params);
diff --git a/libs/payments/ui/src/lib/actions/getCartState.ts b/libs/payments/ui/src/lib/actions/getCartState.ts
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use server';
+
+import { getApp } from '../nestapp/app';
+
+export const getCartStateAction = async (cartId: string) => {
+  const cart = await getApp().getActionsService().getCartState({
+    cartId,
+  });
+
+  return cart;
+};
diff --git a/libs/payments/ui/src/lib/actions/index.ts b/libs/payments/ui/src/lib/actions/index.ts
@@ -22,4 +22,5 @@ export { finalizeProcessingCartAction } from './finalizeProcessingCart';
 export { getNeedsInputAction } from './getNeedsInput';
 export { submitNeedsInputAndRedirectAction } from './submitNeedsInputAndRedirect';
 export { validateAndFormatPostalCode } from './validateAndFormatPostalCode';
+export { validateCartStateAndRedirectAction } from './validateCartStateAndRedirect';
 export { validateLocationAction } from './validateLocation';
diff --git a/libs/payments/ui/src/lib/actions/validateCartStateAndRedirect.ts b/libs/payments/ui/src/lib/actions/validateCartStateAndRedirect.ts
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use server';
+
+import { redirect } from 'next/navigation';
+import { getApp } from '../nestapp/app';
+import { getRedirect, validateCartState } from '../utils/get-cart';
+import { SupportedPages } from '../utils/types';
+
+/**
+ * Redirect if cart state does not match supported page
+ * @@param cartId - Cart ID
+ * @@param page - Page that action is being called from
+ */
+async function validateCartStateAndRedirectAction(
+  cartId: string,
+  page: SupportedPages,
+  searchParams?: Record<string, string>
+): Promise<void> {
+  const urlSearchParams = new URLSearchParams(searchParams);
+  const params = searchParams ? `?${urlSearchParams.toString()}` : '';
+  const { state } = await getApp().getActionsService().getCartState({
+    cartId,
+  });
+
+  if (!validateCartState(state, page)) {
+    redirect(getRedirect(state) + params);
+  }
+}
+
+export { validateCartStateAndRedirectAction };
diff --git a/libs/payments/ui/src/lib/client/components/PaymentInputHandler/index.tsx b/libs/payments/ui/src/lib/client/components/PaymentInputHandler/index.tsx
@@ -7,7 +7,7 @@
 import {
   getNeedsInputAction,
   submitNeedsInputAndRedirectAction,
-  getCartOrRedirectAction,
+  validateCartStateAndRedirectAction,
 } from '@fxa/payments/ui/actions';
 import { useEffect } from 'react';
 import { useStripe } from '@stripe/react-stripe-js';
@@ -34,7 +34,7 @@ export function PaymentInputHandler({ cartId }: { cartId: string }) {
           await submitNeedsInputAndRedirectAction(cartId);
           break;
         case 'notRequired':
-          await getCartOrRedirectAction(
+          await validateCartStateAndRedirectAction(
             cartId,
             SupportedPages.NEEDS_INPUT,
             searchParamsRecord
diff --git a/libs/payments/ui/src/lib/client/components/PaymentStateObserver/index.tsx b/libs/payments/ui/src/lib/client/components/PaymentStateObserver/index.tsx
@@ -5,9 +5,9 @@
 'use client';
 
 import { SupportedPages } from '@fxa/payments/ui';
-import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import { useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
+import { validateCartStateAndRedirectAction } from '../../../actions/validateCartStateAndRedirect';
 
 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
@@ -24,7 +24,7 @@ export function PaymentStateObserver({ cartId }: { cartId: string }) {
     const poll = async () => {
       if (!isPolling) return;
 
-      await getCartOrRedirectAction(
+      await validateCartStateAndRedirectAction(
         cartId,
         SupportedPages.PROCESSING,
         searchParamsRecord
diff --git a/libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts b/libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts
@@ -76,6 +76,8 @@ import { ValidateLocationActionArgs } from './validators/ValidateLocationActionA
 import { UpdateTaxAddressActionArgs } from './validators/UpdateTaxAddressActionArgs';
 import { UpdateTaxAddressActionResult } from './validators/UpdateTaxAddressActionResult';
 import { CaptureTimingWithStatsD, StatsDService, type StatsD } from '@fxa/shared/metrics/statsd';
+import { GetCartStateActionArgs } from './validators/GetCartStateActionArgs';
+import { GetCartStateActionResult } from './validators/GetCartStateActionResult';
 
 /**
  * ANY AND ALL methods exposed via this service should be considered publicly accessible and callable with any arguments.
@@ -98,6 +100,16 @@ export class NextJSActionsService {
     @Inject(StatsDService) public statsd: StatsD
   ) {}
 
+  @SanitizeExceptions()
+  @NextIOValidator(GetCartStateActionArgs, GetCartStateActionResult)
+  @WithTypeCachableAsyncLocalStorage()
+  @CaptureTimingWithStatsD()
+  async getCartState(args: { cartId: string }) {
+    const cart = await this.cartService.getCartState(args.cartId);
+
+    return cart;
+  }
+
   @SanitizeExceptions()
   @NextIOValidator(GetCartActionArgs, GetCartActionResult)
   @WithTypeCachableAsyncLocalStorage()
diff --git a/libs/payments/ui/src/lib/nestapp/validators/GetCartStateActionArgs.ts b/libs/payments/ui/src/lib/nestapp/validators/GetCartStateActionArgs.ts
@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { IsString } from 'class-validator';
+
+export class GetCartStateActionArgs {
+  @IsString()
+  cartId!: string;
+}
diff --git a/libs/payments/ui/src/lib/nestapp/validators/GetCartStateActionResult.ts b/libs/payments/ui/src/lib/nestapp/validators/GetCartStateActionResult.ts
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { CartState } from '@fxa/shared/db/mysql/account';
+import {
+  IsEnum,
+} from 'class-validator';
+
+export class GetCartStateActionResult {
+  @IsEnum(CartState)
+  state!: CartState;
+}
