Merge pull request #17790 from mozilla/FXA-7830-Page-Processing-actions

feat(next): Set up cart status polling

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/error/page.tsx

@@ -9,7 +9,11 @@ import Link from 'next/link';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 
 import errorIcon from '@fxa/shared/assets/images/error.svg';
-import { SupportedPages, getApp } from '@fxa/payments/ui/server';
+import {
+  getApp,
+  CheckoutParams,
+  SupportedPages,
+} from '@fxa/payments/ui/server';
 import {
   getCartOrRedirectAction,
   recordEmitterEventAction,
@@ -40,13 +44,6 @@ const getErrorReason = (reason: CartErrorReasonId | null) => {
   }
 };
 
-interface CheckoutParams {
-  cartId: string;
-  locale: string;
-  interval: string;
-  offeringId: string;
-}
-
 export default async function CheckoutError({
   params,
   searchParams,

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/layout.tsx

@@ -10,6 +10,7 @@ import {
   PriceInterval,
   SubscriptionTitle,
   TermsAndPrivacy,
+  CheckoutParams,
 } from '@fxa/payments/ui/server';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 import { config } from 'apps/payments/next/config';
@@ -22,13 +23,6 @@ export const metadata = {
   description: 'Mozilla accounts',
 };
 
-export interface CheckoutParams {
-  cartId: string;
-  locale: string;
-  interval: string;
-  offeringId: string;
-}
-
 export interface CheckoutSearchParams {
   experiment?: string;
   promotion_code?: string;

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/processing/page.tsx

@@ -2,24 +2,28 @@
  * 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 { headers } from 'next/headers';
-import { LoadingSpinner } from '@fxa/payments/ui';
+import {
+  CheckoutParams,
+  LoadingSpinner,
+  PollingSection,
+} from '@fxa/payments/ui';
 import { getApp } from '@fxa/payments/ui/server';
+import { headers } from 'next/headers';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 
-export default async function ProcessingPage() {
+export default function ProcessingPage({ params }: { params: CheckoutParams }) {
   const locale = headers().get('accept-language') || DEFAULT_LOCALE;
   const l10n = getApp().getL10n(locale);
-
   return (
     <section
       className="flex flex-col text-center text-sm"
       data-testid="payment-processing"
     >
       <LoadingSpinner className="w-10 h-10" />
+      <PollingSection cartId={params.cartId} />
       {l10n.getString(
-        'payment-processing-message',
-        'Please wait while we process your payment…'
+        'next-payment-processing-message',
+        `Please wait while we process your payment…`
       )}
     </section>
   );

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx

@@ -5,15 +5,14 @@
 import { revalidatePath } from 'next/cache';
 import { headers } from 'next/headers';
 import { BaseButton, ButtonVariant, PaymentSection } from '@fxa/payments/ui';
-import { getApp, SupportedPages } from '@fxa/payments/ui/server';
+import { getApp, SupportedPages,   CheckoutParams, } from '@fxa/payments/ui/server';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 import {
   getFakeCartData,
   getCMSContent,
 } from 'apps/payments/next/app/_lib/apiClient';
 import { auth, signIn } from 'apps/payments/next/auth';
-import { CheckoutParams } from '../layout';
 
 export const dynamic = 'force-dynamic';
 

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/success/page.tsx

@@ -16,6 +16,7 @@ import {
   getCartOrRedirectAction,
   recordEmitterEventAction,
 } from '@fxa/payments/ui/actions';
+import { CheckoutParams } from '@fxa/payments/ui/server';
 
 export const dynamic = 'force-dynamic';
 
@@ -41,13 +42,6 @@ const ConfirmationDetail = ({
   );
 };
 
-interface CheckoutParams {
-  cartId: string;
-  locale: string;
-  interval: string;
-  offeringId: string;
-}
-
 export default async function CheckoutSuccess({
   params,
   searchParams,

apps/payments/next/app/[locale]/error.tsx

@@ -7,10 +7,9 @@
 import { useEffect, useState } from 'react';
 import * as Sentry from '@sentry/nextjs';
 import { useRouter, useParams } from 'next/navigation';
-import { CheckoutParams } from './[offeringId]/checkout/[interval]/[cartId]/layout';
 import Image from 'next/image';
 import errorIcon from '@fxa/shared/assets/images/error.svg';
-import { LoadingSpinner } from '@fxa/payments/ui';
+import { CheckoutParams, LoadingSpinner } from '@fxa/payments/ui';
 import Link from 'next/link';
 import { Localized } from '@fluent/react';
 import { restartCartAction, getCartAction } from '@fxa/payments/ui/actions';

libs/payments/cart/src/lib/cart.error.ts

@@ -133,3 +133,11 @@ export class CartInvalidCurrencyError extends CartError {
     });
   }
 }
+
+export class CartSubscriptionNotFoundError extends CartError {
+  constructor(cartId: string) {
+    super('Cart subscription not found', {
+      cartId,
+    });
+  }
+}

libs/payments/cart/src/lib/cart.manager.ts

@@ -33,11 +33,12 @@ import type { AccountDatabase } from '@fxa/shared/db/mysql/account';
 // For an action to be executed, the cart state needs to be in one of
 // valid states listed in the array of CartStates below
 const ACTIONS_VALID_STATE = {
-  updateFreshCart: [CartState.START],
+  updateFreshCart: [CartState.START, CartState.PROCESSING],
   finishCart: [CartState.PROCESSING],
   finishErrorCart: [CartState.START, CartState.PROCESSING],
   deleteCart: [CartState.START, CartState.PROCESSING],
   restartCart: [CartState.START, CartState.PROCESSING, CartState.FAIL],
+  setProcessingCart: [CartState.START],
 };
 
 // Type guard to check if action is valid key in ACTIONS_VALID_STATE
@@ -180,6 +181,21 @@ export class CartManager {
     }
   }
 
+  public async setProcessingCart(cartId: string) {
+    const cart = await this.fetchCartById(cartId);
+
+    this.checkActionForValidCartState(cart, 'setProcessingCart');
+
+    try {
+      await updateCart(this.db, Buffer.from(cartId, 'hex'), cart.version, {
+        state: CartState.PROCESSING,
+      });
+    } catch (error) {
+      const cause = error instanceof CartNotUpdatedError ? undefined : error;
+      throw new CartNotUpdatedError(cartId, cause);
+    }
+  }
+
   public async deleteCart(cart: ResultCart) {
     this.checkActionForValidCartState(cart, 'deleteCart');
 

libs/payments/cart/src/lib/cart.service.spec.ts

@@ -37,6 +37,7 @@ import {
   StripeResponseFactory,
   MockStripeConfigProvider,
   AccountCustomerManager,
+  StripePaymentIntentFactory,
 } from '@fxa/payments/stripe';
 import {
   MockProfileClientConfigProvider,
@@ -214,6 +215,7 @@ describe('CartService', () => {
         .spyOn(currencyManager, 'getCurrencyForCountry')
         .mockReturnValue(mockResolvedCurrency);
       jest.spyOn(cartManager, 'createCart').mockResolvedValue(mockResultCart);
+      jest.spyOn(accountManager, 'getAccounts').mockResolvedValue([]);
 
       const result = await cartService.setupCart(args);
 
@@ -330,9 +332,15 @@ describe('CartService', () => {
     it('accepts payment with stripe', async () => {
       const mockCart = ResultCartFactory();
       const mockPaymentMethodId = faker.string.uuid();
+      const mockPaymentIntent = StripePaymentIntentFactory({
+        payment_method: mockPaymentMethodId,
+        status: 'succeeded',
+      });
 
       jest.spyOn(cartManager, 'fetchCartById').mockResolvedValue(mockCart);
-      jest.spyOn(checkoutService, 'payWithStripe').mockResolvedValue();
+      jest
+        .spyOn(checkoutService, 'payWithStripe')
+        .mockResolvedValue(mockPaymentIntent);
       jest.spyOn(cartManager, 'finishCart').mockResolvedValue();
       jest.spyOn(cartManager, 'finishErrorCart').mockResolvedValue();
 
@@ -359,9 +367,15 @@ describe('CartService', () => {
     it('calls cartManager.finishErrorCart when error occurs during checkout', async () => {
       const mockCart = ResultCartFactory();
       const mockPaymentMethodId = faker.string.uuid();
+      const mockPaymentIntent = StripePaymentIntentFactory({
+        payment_method: mockPaymentMethodId,
+        status: 'succeeded',
+      });
 
       jest.spyOn(cartManager, 'fetchCartById').mockResolvedValue(mockCart);
-      jest.spyOn(checkoutService, 'payWithStripe').mockResolvedValue();
+      jest
+        .spyOn(checkoutService, 'payWithStripe')
+        .mockResolvedValue(mockPaymentIntent);
       jest.spyOn(cartManager, 'finishCart').mockRejectedValue(undefined);
       jest.spyOn(cartManager, 'finishErrorCart').mockResolvedValue();