feat(next): dedup glean success and fail events

Because:

- Success and fail events were reported multiple times on page load of
  the success and error pages.

This commit:

- Removes glean event reporting from success and error pages.
- Adds glean event reporting to processing and needs_input page
  redirects to the success or error page.

Closes #PAY-3181

Author: StaberindeZA

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

@@ -17,7 +17,6 @@ import {
 } from '@fxa/payments/ui/server';
 import {
   getCartOrRedirectAction,
-  recordEmitterEventAction,
 } from '@fxa/payments/ui/actions';
 import { config } from 'apps/payments/next/config';
 import type { Metadata } from 'next';
@@ -62,13 +61,6 @@ export default async function CheckoutError({
   const l10n = getApp().getL10n(acceptLanguage, locale);
   const [cart] = await Promise.all([cartPromise]);
 
-  recordEmitterEventAction(
-    'checkoutFail',
-    { ...params },
-    searchParams,
-    cart.paymentInfo?.type
-  );
-
   const errorReason = getErrorFtlInfo(cart.errorReasonId, params, config, searchParams);
 
   return (
@@ -80,7 +72,7 @@ export default async function CheckoutError({
         {
           // Once more conditionals are added, move this to a separate component
           cart.errorReasonId ===
-          CartErrorReasonId.CART_ELIGIBILITY_STATUS_SAME ? (
+            CartErrorReasonId.CART_ELIGIBILITY_STATUS_SAME ? (
             <Image
               src={checkIcon}
               alt=""

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

@@ -10,7 +10,6 @@ import { getCardIcon } from '@fxa/payments/ui';
 import {
   fetchCMSData,
   getCartOrRedirectAction,
-  recordEmitterEventAction,
 } from '@fxa/payments/ui/actions';
 import {
   getApp,
@@ -67,13 +66,6 @@ export default async function CheckoutSuccess({
     sessionPromise,
   ]);
 
-  recordEmitterEventAction(
-    'checkoutSuccess',
-    { ...params },
-    searchParams,
-    cart.paymentInfo.type
-  );
-
   const { successActionButtonUrl, successActionButtonLabel } =
     cms.commonContent.localizations.at(0) || cms.commonContent;
 

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/error/page.tsx

@@ -16,7 +16,6 @@ import {
 } from '@fxa/payments/ui/server';
 import {
   getCartOrRedirectAction,
-  recordEmitterEventAction,
 } from '@fxa/payments/ui/actions';
 import { config } from 'apps/payments/next/config';
 import { Metadata } from 'next';
@@ -60,13 +59,6 @@ export default async function UpgradeError({
   const l10n = getApp().getL10n(acceptLanguage, locale);
   const [cart] = await Promise.all([cartPromise]);
 
-  recordEmitterEventAction(
-    'checkoutFail',
-    { ...params },
-    searchParams,
-    cart.paymentInfo?.type
-  );
-
   const errorReason = getErrorFtlInfo(cart.errorReasonId, params, config, searchParams);
 
   return (

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx

@@ -13,7 +13,6 @@ import {
 import {
   fetchCMSData,
   getCartOrRedirectAction,
-  recordEmitterEventAction,
 } from '@fxa/payments/ui/actions';
 import { CheckoutParams } from '@fxa/payments/ui/server';
 import Image from 'next/image';
@@ -67,13 +66,6 @@ export default async function UpgradeSuccess({
     sessionPromise,
   ]);
 
-  recordEmitterEventAction(
-    'checkoutSuccess',
-    { ...params },
-    searchParams,
-    cart.paymentInfo.type
-  );
-
   const { successActionButtonUrl, successActionButtonLabel } =
     cms.commonContent.localizations.at(0) || cms.commonContent;
 
@@ -211,7 +203,7 @@ export default async function UpgradeSuccess({
                 width={70}
                 height={24}
               />
-            ) :(
+            ) : (
               <span className="flex items-center gap-2">
                 {cart.paymentInfo.brand && (
                   <Image

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

@@ -823,7 +823,9 @@ export class CartService {
         ? this.subscriptionManager.listForCustomer(cart.stripeCustomerId)
         : undefined,
       cart.stripeCustomerId
-        ? this.customerSessionManager.createCheckoutSession(cart.stripeCustomerId)
+        ? this.customerSessionManager.createCheckoutSession(
+            cart.stripeCustomerId
+          )
         : undefined,
     ]);
     const cartEligibilityStatus =

libs/payments/customer/src/index.ts

@@ -14,6 +14,7 @@ export * from './lib/promotionCode.manager';
 export * from './lib/setupIntent.manager';
 export * from './lib/subscription.manager';
 export * from './lib/types';
+export * from './lib/factories/paymentMethod.factory';
 export * from './lib/factories/pricing-for-currency.factory';
 export * from './lib/factories/tax-address.factory';
 export * from './lib/customer.error';

libs/payments/customer/src/lib/factories/paymentMethod.factory.ts

@@ -0,0 +1,20 @@
+/* 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 { faker } from '@faker-js/faker';
+import { SubPlatPaymentMethodType, type StripePaymentMethod } from '../types';
+
+export const StripePaymentMethodTypeResponseFactory = (
+  override?: Partial<StripePaymentMethod>
+): StripePaymentMethod => ({
+  type: faker.helpers.arrayElement([
+    SubPlatPaymentMethodType.Card,
+    SubPlatPaymentMethodType.ApplePay,
+    SubPlatPaymentMethodType.GooglePay,
+    SubPlatPaymentMethodType.Link,
+    SubPlatPaymentMethodType.Stripe,
+  ]),
+  paymentMethodId: `pm_${faker.string.alphanumeric({ length: 14 })}`,
+  ...override,
+});

libs/payments/customer/src/lib/paymentMethod.manager.ts

@@ -13,15 +13,9 @@ import {
 import {
   DefaultPaymentMethod,
   SubPlatPaymentMethodType,
-  StripePaymentMethod,
-  PayPalPaymentMethod,
+  type PaymentMethodTypeResponse,
 } from './types';
 
-type PaymentMethodTypeResponse =
-  | StripePaymentMethod
-  | PayPalPaymentMethod
-  | null;
-
 @Injectable()
 export class PaymentMethodManager {
   constructor(
@@ -46,10 +40,7 @@ export class PaymentMethodManager {
     uid: string
   ) {
     let defaultPaymentMethod: DefaultPaymentMethod | undefined;
-    const paymentMethodType = await this.determineType(
-      customer,
-      subscriptions
-    );
+    const paymentMethodType = await this.determineType(customer, subscriptions);
     switch (paymentMethodType?.type) {
       case SubPlatPaymentMethodType.Link:
       case SubPlatPaymentMethodType.Card:
@@ -82,10 +73,10 @@ export class PaymentMethodManager {
     return defaultPaymentMethod;
   }
 
-  async determineType (
+  async determineType(
     customer?: StripeCustomer,
     subscriptions?: StripeSubscription[]
-  ): Promise <PaymentMethodTypeResponse> {
+  ): Promise<PaymentMethodTypeResponse> {
     // First check if payment method is PayPal
     // Note, this needs to happen first since a customer could also have a
     // default payment method. However if PayPal is set as the payment method,
@@ -107,22 +98,22 @@ export class PaymentMethodManager {
         return {
           type: SubPlatPaymentMethodType.ApplePay,
           paymentMethodId: customer.invoice_settings.default_payment_method,
-        }
+        };
       } else if (paymentMethod.card?.wallet?.type === 'google_pay') {
         return {
           type: SubPlatPaymentMethodType.GooglePay,
           paymentMethodId: customer.invoice_settings.default_payment_method,
-        }
+        };
       } else if (paymentMethod.type === 'link') {
         return {
           type: SubPlatPaymentMethodType.Link,
           paymentMethodId: customer.invoice_settings.default_payment_method,
-        }
+        };
       } else if (paymentMethod.type === 'card') {
         return {
           type: SubPlatPaymentMethodType.Card,
           paymentMethodId: customer.invoice_settings.default_payment_method,
-        }
+        };
       } else {
         return {
           type: SubPlatPaymentMethodType.Stripe,
@@ -132,6 +123,5 @@ export class PaymentMethodManager {
     }
 
     return null;
-  };
-
+  }
 }

libs/payments/customer/src/lib/types.ts

@@ -52,6 +52,11 @@ export interface PayPalPaymentMethod {
   type: SubPlatPaymentMethodType.PayPal;
 }
 
+export type PaymentMethodTypeResponse =
+  | StripePaymentMethod
+  | PayPalPaymentMethod
+  | null;
+
 export interface Interval {
   interval: NonNullable<StripePrice['recurring']>['interval'];
   intervalCount: number;