feat(payments-next): Implement Glean frontend metrics for Churn intervention

This pull request
- Implements the following:
  - Page_view for Subscription Management
  - Retention_flow for Cancel and Stay (and Error)
  - Interstitial_offer for Offer (and Error)

Closes PAY-3471

Author: xlisachan

.circleci/config.yml

@@ -80,7 +80,7 @@ executors:
   # step, and the saving the initial a workspace state.
   build-executor:
     docker:
-      - image: mozilla/fxa-circleci:ci-builder-v6
+      - image: mozilla/fxa-circleci:ci-builder-v7
     environment:
       NODE_ENV: development
       FIRESTORE_EMULATOR_HOST: localhost:9090
@@ -96,7 +96,7 @@ executors:
         default: medium
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-test-runner-v6
+      - image: mozilla/fxa-circleci:ci-test-runner-v7
     environment:
       NODE_ENV: development
       FIRESTORE_EMULATOR_HOST: localhost:9090
@@ -112,7 +112,7 @@ executors:
         default: large
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-test-runner-v6
+      - image: mozilla/fxa-circleci:ci-test-runner-v7
       - image: cimg/mysql:8.0
         command: --default-authentication-plugin=mysql_native_password
       - image: jdlk7/firestore-emulator
@@ -135,7 +135,7 @@ executors:
         default: xlarge
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-functional-test-runner-v6
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v7
       - image: redis
       - image: pafortin/goaws
       - image: cimg/mysql:8.0
@@ -189,7 +189,7 @@ executors:
         default: xlarge
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-functional-test-runner-v6
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v7
     environment:
       NODE_ENV: development
       CUSTOMS_SERVER_URL: none
@@ -306,19 +306,11 @@ commands:
           command: |
             set -euxo pipefail
 
-            unset PYTHONDONTWRITEBYTECODE
-            export PIP_NO_COMPILE=1
-
-            python3 --version
             rm -rf .venv
-            python3 -m venv .venv --without-pip
+            python3 -m venv .venv
             . .venv/bin/activate
 
-            curl -sSL https://bootstrap.pypa.io/get-pip.py -o /tmp/get-pip.py
-            python /tmp/get-pip.py --no-compile
-
-            python -m pip install --no-compile --upgrade 'glean_parser~=14.5'
-            python -m pip --version
+            pip install --upgrade 'glean_parser~=14.5'
 
   lint:
     parameters:
@@ -541,7 +533,7 @@ commands:
             docker build . \
                 -f ./project/_dev/docker/ci/Dockerfile \
                 --target << parameters.target >> \
-                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v6
+                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v7
 
   create-fxa-ci-images:
     # Build CI images. Images are built on top of each other. Each is optimized for a specific task.
@@ -570,10 +562,10 @@ commands:
           name: Push CI Images and Extract Yarn Cache
           command: |
             docker login -u $DOCKER_USER_fxa_circleci -p $DOCKER_PASS_fxa_circleci
-            .circleci/docker-copy-cache.sh mozilla/fxa-circleci:ci-builder-v6
-            docker push mozilla/fxa-circleci:ci-test-runner-v6
-            docker push mozilla/fxa-circleci:ci-functional-test-runner-v6
-            docker push mozilla/fxa-circleci:ci-builder-v6
+            .circleci/docker-copy-cache.sh mozilla/fxa-circleci:ci-builder-v7
+            docker push mozilla/fxa-circleci:ci-test-runner-v7
+            docker push mozilla/fxa-circleci:ci-functional-test-runner-v7
+            docker push mozilla/fxa-circleci:ci-builder-v7
             wait
 
   upload_to_gcs:

_dev/docker/ci/Dockerfile

@@ -6,7 +6,8 @@
 # workspace will be restored into the project folder.
 FROM cimg/node:22.15.1 AS test-runner
 RUN sudo apt-get update && sudo apt-get install -y \
-    python3-venv
+    python3-venv \
+    python3-pip
 WORKDIR /home/circleci
 COPY --chown=circleci:circleci project project
 WORKDIR /home/circleci/project
@@ -24,7 +25,10 @@ WORKDIR /home/circleci/project
 ENV YARN_CHECKSUM_BEHAVIOR=throw
 ENV FXA_AUTO_INSTALL=0
 RUN _scripts/l10n/clone.sh
-RUN yarn install --immutable;
+RUN yarn install --immutable \
+    && rm -rf .venv \
+    && python3 -m venv .venv \
+    && .venv/bin/pip install 'glean_parser~=14.5'
 
 # Acts as an intermediate stage for adding the firefox install. Note,
 # that a yarn install must happen first to ensure the correct version
@@ -39,7 +43,8 @@ RUN npx playwright install --with-deps firefox chromium webkit;
 # workspace will be restored into the project folder.
 FROM cimg/node:22.15.1-browsers AS functional-test-runner
 RUN sudo apt-get update && sudo apt-get install -y \
-    python3-venv
+    python3-venv \
+    python3-pip
 WORKDIR /home/circleci
 COPY --chown=circleci:circleci --from=playwright-install /home/circleci/.cache/ms-playwright .cache/ms-playwright/
 COPY --chown=circleci:circleci project project

apps/payments/api/.env

@@ -57,9 +57,3 @@ GLEAN_CONFIG__APPLICATION_ID=
 GLEAN_CONFIG__VERSION=0.0.0
 GLEAN_CONFIG__CHANNEL='development'
 GLEAN_CONFIG__LOGGER_APP_NAME='fxa-payments-next'
-
-# Glean Client Config
-GLEAN_CLIENT_CONFIG__ENABLED=true
-GLEAN_CLIENT_CONFIG__APPLICATION_ID=
-GLEAN_CLIENT_CONFIG__VERSION=0.0.0
-GLEAN_CLIENT_CONFIG__CHANNEL='development'

apps/payments/next/.env

@@ -116,8 +116,12 @@ GLEAN_CONFIG__LOGGER_APP_NAME='fxa-payments-next'
 # Glean Client Config
 GLEAN_CLIENT_CONFIG__ENABLED=true
 GLEAN_CLIENT_CONFIG__APPLICATION_ID=
+GLEAN_CLIENT_CONFIG__UPLOAD_ENABLED=true
 # GLEAN_CLIENT_CONFIG__VERSION= # Set in next.config.js
 GLEAN_CLIENT_CONFIG__CHANNEL='development'
+# GLEAN_CLIENT_CONFIG__SERVER_ENDPOINT=
+# GLEAN_CLIENT_CONFIG__LOG_PINGS=false
+# GLEAN_CLIENT_CONFIG__DEBUG_VIEW_TAG=
 
 # CSP Config
 CSP__ACCOUNTS_STATIC_CDN=https://cdn.accounts.firefox.com

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

@@ -17,7 +17,7 @@ import {
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import { config } from 'apps/payments/next/config';
 import { Metadata } from 'next';
-import { buildRedirectUrl } from '@fxa/payments/ui';
+import { buildRedirectUrl, GleanRetentionResult } from '@fxa/payments/ui';
 import { redirect } from 'next/navigation';
 
 // forces dynamic rendering
@@ -86,8 +86,24 @@ export default async function UpgradeError({
     redirect(redirectTo);
   }
 
+  const isCancelInterstitialOffer =
+    searchParams?.['entrypoint'] === 'subscription-management';
+
   return (
     <>
+      {isCancelInterstitialOffer && (
+        <GleanRetentionResult
+          metricsEnabled={session?.user?.metricsEnabled ?? true}
+          eventType="interstitial_offer"
+          flowType="cancel"
+          eligibilityStatus="offer"
+          outcome="error"
+          action="upgrade"
+          errorReason={cart.errorReasonId ?? 'general_error'}
+          offeringId={params.offeringId}
+          interval={params.interval}
+        />
+      )}
       <section
         className="flex flex-col items-center text-center pb-8 mt-5 desktop:mt-2 h-[640px]"
         aria-labelledby="page-information-heading"

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

@@ -8,7 +8,11 @@ import { Metadata } from 'next';
 import { auth } from 'apps/payments/next/auth';
 
 import { SubPlatPaymentMethodType } from '@fxa/payments/customer';
-import { buildRedirectUrl, getCardIcon } from '@fxa/payments/ui';
+import {
+  buildRedirectUrl,
+  getCardIcon,
+  GleanRetentionResult,
+} from '@fxa/payments/ui';
 import {
   fetchCMSData,
   getCartOrRedirectAction,
@@ -91,8 +95,23 @@ export default async function UpgradeSuccess({
   const { successActionButtonUrl, successActionButtonLabel } =
     cms.commonContent.localizations.at(0) || cms.commonContent;
 
+  const isCancelInterstitialOffer =
+    searchParams?.['entrypoint'] === 'subscription-management';
+
   return (
     <>
+      {isCancelInterstitialOffer && (
+        <GleanRetentionResult
+          metricsEnabled={session?.user?.metricsEnabled ?? true}
+          eventType="interstitial_offer"
+          flowType="cancel"
+          eligibilityStatus="offer"
+          outcome="upgrade_success"
+          action="upgrade"
+          offeringId={params.offeringId}
+          interval={params.interval}
+        />
+      )}
       <section
         className="h-[640px]"
         aria-labelledby="subscription-confirmation-heading"

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

@@ -66,6 +66,9 @@ export default async function Upgrade({
   );
   const [cart, cms] = await Promise.all([cartDataPromise, cmsDataPromise]);
 
+  const isCancelInterstitialOffer =
+    searchParams?.['entrypoint'] === 'subscription-management';
+
   return (
     <>
       {session?.user?.email && (
@@ -185,6 +188,8 @@ export default async function Upgrade({
               paypalClientId={config.paypal.clientId}
               sessionUid={session?.user?.id}
               sessionEmail={session?.user?.email ?? undefined}
+              metricsEnabled={session?.user?.metricsEnabled ?? true}
+              isCancelInterstitialOffer={isCancelInterstitialOffer}
             />
           )}
       </section>

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

@@ -29,8 +29,12 @@ export default async function RootProviderLayout({
         glean: {
           enabled: config.gleanClientConfig.enabled,
           applicationId: config.gleanClientConfig.applicationId,
+          uploadEnabled: config.gleanClientConfig.uploadEnabled,
           version: config.gleanClientConfig.version,
           channel: config.gleanClientConfig.channel,
+          serverEndpoint: config.gleanClientConfig.serverEndpoint,
+          logPings: config.gleanClientConfig.logPings,
+          debugViewTag: config.gleanClientConfig.debugViewTag,
         },
         sentry: {
           ...config.sentry, //spread to make sure its a POJO