Merge pull request #19946 from mozilla/pay-3436-glean-server-churn

feat(next): add churn intervention glean events

Author: StaberindeZA

.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-v5
+      - image: mozilla/fxa-circleci:ci-builder-v6
     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-v5
+      - image: mozilla/fxa-circleci:ci-test-runner-v6
     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-v5
+      - image: mozilla/fxa-circleci:ci-test-runner-v6
       - 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-v5
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v6
       - image: redis
       - image: pafortin/goaws
       - image: cimg/mysql:8.0
@@ -186,7 +186,7 @@ executors:
         default: xlarge
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-functional-test-runner-v5
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v6
     environment:
       NODE_ENV: development
       CUSTOMS_SERVER_URL: none
@@ -514,7 +514,7 @@ commands:
             docker build . \
                 -f ./project/_dev/docker/ci/Dockerfile \
                 --target << parameters.target >> \
-                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v5
+                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v6
 
   create-fxa-ci-images:
     # Build CI images. Images are built on top of each other. Each is optimized for a specific task.
@@ -543,10 +543,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-v5
-            docker push mozilla/fxa-circleci:ci-test-runner-v5
-            docker push mozilla/fxa-circleci:ci-functional-test-runner-v5
-            docker push mozilla/fxa-circleci:ci-builder-v5
+            .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
             wait
 
   upload_to_gcs:

_dev/docker/ci/Dockerfile

@@ -38,6 +38,8 @@ RUN npx playwright install --with-deps firefox chromium webkit;
 # Runs functional tests in our CI. Needs minimal install. Assumes
 # 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
 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/next/.env

@@ -94,7 +94,7 @@ CURRENCY_CONFIG__CURRENCIES_TO_COUNTRIES={"USD":["AS","CA","GB","GU","MP","MY","
 
 # Churn Intervention Config
 CHURN_INTERVENTION_CONFIG__COLLECTION_NAME=churnInterventions
-CHURN_INTERVENTION_CONFIG__ENABLED=false
+CHURN_INTERVENTION_CONFIG__ENABLED=
 
 # StatsD Config
 STATS_D_CONFIG__SAMPLE_RATE=

apps/payments/next/app/[locale]/subscriptions/[subscriptionId]/offer/error/page.tsx

@@ -40,16 +40,16 @@ export default async function InterstitialOfferErrorPage({
   const uid = session.user.id;
 
   let interstitialOfferContent;
-   try {
+  try {
     interstitialOfferContent = await getInterstitialOfferContentAction(
-        uid,
-        subscriptionId,
-        acceptLanguage,
-        locale
+      uid,
+      subscriptionId,
+      acceptLanguage,
+      locale
     );
-   } catch (error) {
+  } catch (error) {
     notFound();
-   }
+  }
 
   if (!interstitialOfferContent) {
     notFound();
@@ -59,7 +59,7 @@ export default async function InterstitialOfferErrorPage({
     redirect(`/${locale}/subscriptions/${subscriptionId}/offer`);
   }
 
-  const { webIcon, productName} = interstitialOfferContent;
+  const { webIcon, productName } = interstitialOfferContent;
   const reason = interstitialOfferContent.reason ?? 'general_error';
 
   if (webIcon && !productName) {

apps/payments/next/app/[locale]/subscriptions/[subscriptionId]/offer/page.tsx

@@ -94,56 +94,58 @@ export default async function InterstitialOfferPage({
 
   const { ftlId, fallbackText } = getKeepCurrentSubscriptionFtlIds(currentInterval);
   const keepCurrentSubscriptionButtonText = l10n.getString(ftlId, fallbackText);
+  const searchParamsObj = new URLSearchParams(searchParams);
+  searchParamsObj.append('entrypoint', 'subscription-management');
 
   return (
     <section
       className="flex justify-center min-h-[calc(100vh_-_4rem)] tablet:items-center tablet:min-h-[calc(100vh_-_5rem)]"
     >
-        <div className="w-full max-w-[480px] flex flex-col justify-center items-center p-10 tablet:bg-white tablet:rounded-xl tablet:border tablet:border-grey-200 tablet:shadow-[0_0_16px_0_rgba(0,0,0,0.08)]">
-          <div className="w-full flex flex-col items-center gap-6 text-center">
-            <Image
-              src={webIcon}
-              alt={productName}
-              height={64}
-              width={64}
-            />
-            <h1 className="font-bold self-stretch text-center font-header text-xl leading-8 ">
-              {modalHeading1}
-            </h1>
-          </div>
-            <p className="w-full self-stretch leading-7 text-lg text-grey-900">
-              {modalMessage &&
-                modalMessage.map((line, i) => (
-                  <p className="my-2" key={i}>
-                    {line}
-                  </p>
-                ))}
-            </p>
+      <div className="w-full max-w-[480px] flex flex-col justify-center items-center p-10 tablet:bg-white tablet:rounded-xl tablet:border tablet:border-grey-200 tablet:shadow-[0_0_16px_0_rgba(0,0,0,0.08)]">
+        <div className="w-full flex flex-col items-center gap-6 text-center">
+          <Image
+            src={webIcon}
+            alt={productName}
+            height={64}
+            width={64}
+          />
+          <h1 className="font-bold self-stretch text-center font-header text-xl leading-8 ">
+            {modalHeading1}
+          </h1>
+        </div>
+        <p className="w-full self-stretch leading-7 text-lg text-grey-900">
+          {modalMessage &&
+            modalMessage.map((line, i) => (
+              <p className="my-2" key={i}>
+                {line}
+              </p>
+            ))}
+        </p>
 
-          <div className="w-full flex flex-col gap-3 mt-12">
-            <Link
-              className="border box-border font-header h-14 items-center justify-center rounded-md text-white text-center font-bold py-4 px-6 bg-blue-500 hover:bg-blue-700 flex w-full"
-              href={upgradeButtonUrl}
-            >
-              {upgradeButtonLabel}
-            </Link>
-            <Link
-              className="border box-border font-header h-14 items-center justify-center rounded-md text-center font-bold py-4 px-6 bg-grey-10 border-grey-200 hover:bg-grey-50 flex w-full"
-              href={`/${locale}/subscriptions/landing`}
-            >
-              <span>{keepCurrentSubscriptionButtonText}</span>
-            </Link>
-            <Link
-              className="border box-border font-header h-14 items-center justify-center rounded-md text-center font-bold py-4 px-6 bg-grey-10 border-grey-200 hover:bg-grey-50 flex w-full"
-              href={`/${locale}/subscriptions/${subscriptionId}/cancel`}
-            >
-              <span>{l10n.getString(
-                'interstitial-offer-button-cancel-subscription',
-                'Continue to cancel'
-              )}</span>
-            </Link>
-          </div>
+        <div className="w-full flex flex-col gap-3 mt-12">
+          <Link
+            className="border box-border font-header h-14 items-center justify-center rounded-md text-white text-center font-bold py-4 px-6 bg-blue-500 hover:bg-blue-700 flex w-full"
+            href={`${upgradeButtonUrl}?${searchParamsObj.toString()}`}
+          >
+            {upgradeButtonLabel}
+          </Link>
+          <Link
+            className="border box-border font-header h-14 items-center justify-center rounded-md text-center font-bold py-4 px-6 bg-grey-10 border-grey-200 hover:bg-grey-50 flex w-full"
+            href={`/${locale}/subscriptions/landing`}
+          >
+            <span>{keepCurrentSubscriptionButtonText}</span>
+          </Link>
+          <Link
+            className="border box-border font-header h-14 items-center justify-center rounded-md text-center font-bold py-4 px-6 bg-grey-10 border-grey-200 hover:bg-grey-50 flex w-full"
+            href={`/${locale}/subscriptions/${subscriptionId}/cancel`}
+          >
+            <span>{l10n.getString(
+              'interstitial-offer-button-cancel-subscription',
+              'Continue to cancel'
+            )}</span>
+          </Link>
         </div>
+      </div>
     </section>
   );
 }