From a8a132644724784de36938445c64112a8ef2e9b4 Mon Sep 17 00:00:00 2001
From: Barry Chen <bchen@mozilla.com>
Date: Fri, 31 May 2024 10:13:50 -0500
Subject: [PATCH] fix(metrics): restore client id / service for reg_complete

Because:
 - after migrating to fxa-settings, the backend reg_complete pings no
   longer have an oauth client id or service value

This commit:
 - sends a metrics context on sign up so that the service value is
   cached along with the metrics context
 - stop sending a metrics context on verify sign up code so that the
   previously cached metrics context is used
---
 .../fxa-settings/src/components/App/index.tsx    |  7 +++++--
 .../src/pages/Signup/ConfirmSignupCode/index.tsx |  9 +--------
 .../src/pages/Signup/container.test.tsx          |  6 +++++-
 .../fxa-settings/src/pages/Signup/container.tsx  | 16 +++++++++++++++-
 .../fxa-settings/src/pages/Signup/interfaces.ts  |  2 ++
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/fxa-settings/src/components/App/index.tsx b/packages/fxa-settings/src/components/App/index.tsx
index 187531d0e5..7c0b571d89 100644
--- a/packages/fxa-settings/src/components/App/index.tsx
+++ b/packages/fxa-settings/src/components/App/index.tsx
@@ -399,13 +399,16 @@ const AuthAndAccountSetupRoutes = ({
       />
       <SignupContainer
         path="/oauth/signup/*"
-        {...{ integration, serviceName }}
+        {...{ integration, serviceName, flowQueryParams }}
       />
       <PrimaryEmailVerified
         path="/primary_email_verified/*"
         {...{ isSignedIn, serviceName }}
       />
-      <SignupContainer path="/signup/*" {...{ integration, serviceName }} />
+      <SignupContainer
+        path="/signup/*"
+        {...{ integration, serviceName, flowQueryParams }}
+      />
       <SignupConfirmed
         path="/signup_confirmed/*"
         {...{ isSignedIn, serviceName }}
diff --git a/packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx b/packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx
index 0efe500c0c..e226118c66 100644
--- a/packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx
+++ b/packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx
@@ -7,11 +7,7 @@ import { RouteComponentProps, useLocation } from '@reach/router';
 import { useNavigateWithQuery as useNavigate } from '../../../lib/hooks/useNavigateWithQuery';
 import { REACT_ENTRYPOINT } from '../../../constants';
 import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
-import {
-  logViewEvent,
-  queryParamsToMetricsContext,
-  usePageViewEvent,
-} from '../../../lib/metrics';
+import { logViewEvent, usePageViewEvent } from '../../../lib/metrics';
 import { FtlMsg, hardNavigate } from 'fxa-react/lib/utils';
 import {
   useAlertBar,
@@ -135,9 +131,6 @@ const ConfirmSignupCode = ({
           scopes: integration.getPermissions(),
         }),
         ...(service !== MozServices.Default && { service }),
-        metricsContext: queryParamsToMetricsContext(
-          flowQueryParams as unknown as Record<string, string>
-        ),
       };
 
       await session.verifySession(code, options);
diff --git a/packages/fxa-settings/src/pages/Signup/container.test.tsx b/packages/fxa-settings/src/pages/Signup/container.test.tsx
index 9c397eaad3..88c03d7736 100644
--- a/packages/fxa-settings/src/pages/Signup/container.test.tsx
+++ b/packages/fxa-settings/src/pages/Signup/container.test.tsx
@@ -50,7 +50,7 @@ import { ApolloClient } from '@apollo/client';
 import { ModelDataProvider } from '../../lib/model-data';
 import AuthClient from 'fxa-auth-client/browser';
 import { LocationProvider } from '@reach/router';
-import { mockLoadingSpinnerModule } from '../mocks';
+import { mockLoadingSpinnerModule, MOCK_FLOW_ID } from '../mocks';
 
 // TIP - Sometimes, we want to mock inputs. In this case they can be mocked directly and
 // often times a mocking util isn't even necessary. Note that using the Dependency Inversion
@@ -218,6 +218,7 @@ async function render(text?: string) {
           integration,
           serviceName,
         }}
+        flowQueryParams={{ flowId: MOCK_FLOW_ID }}
       />
     </LocationProvider>
   );
@@ -402,6 +403,9 @@ describe('sign-up-container', () => {
               keys: true,
               service: MozServices.FirefoxSync,
               atLeast18AtReg: true,
+              metricsContext: {
+                flowId: MOCK_FLOW_ID,
+              },
             },
           },
         },
diff --git a/packages/fxa-settings/src/pages/Signup/container.tsx b/packages/fxa-settings/src/pages/Signup/container.tsx
index 6f587e0706..7159e8b7a6 100644
--- a/packages/fxa-settings/src/pages/Signup/container.tsx
+++ b/packages/fxa-settings/src/pages/Signup/container.tsx
@@ -40,6 +40,8 @@ import { createSaltV2 } from 'fxa-auth-client/lib/salt';
 import { KeyStretchExperiment } from '../../models/experiments/key-stretch-experiment';
 import { handleGQLError } from './utils';
 import VerificationMethods from '../../constants/verification-methods';
+import { queryParamsToMetricsContext } from '../../lib/metrics';
+import { QueryParams } from '../..';
 
 /*
  * In content-server, the `email` param is optional. If it's provided, we
@@ -74,8 +76,10 @@ type LocationState = {
 
 const SignupContainer = ({
   integration,
+  flowQueryParams,
 }: {
   integration: SignupContainerIntegration;
+  flowQueryParams: QueryParams;
 } & RouteComponentProps) => {
   const authClient = useAuthClient();
   const keyStretchExp = useValidatedQueryParams(KeyStretchExperiment);
@@ -190,6 +194,9 @@ const SignupContainer = ({
         keys: wantsKeys,
         ...(service !== MozServices.Default && { service }),
         atLeast18AtReg,
+        metricsContext: queryParamsToMetricsContext(
+          flowQueryParams as unknown as Record<string, string>
+        ),
       };
       try {
         const credentialsV1 = await getCredentials(email, password);
@@ -253,7 +260,14 @@ const SignupContainer = ({
         return handleGQLError(error);
       }
     },
-    [beginSignup, integration, keyStretchExp, config, wantsKeys]
+    [
+      integration,
+      wantsKeys,
+      flowQueryParams,
+      keyStretchExp.queryParamModel,
+      config,
+      beginSignup,
+    ]
   );
 
   // TODO: probably a better way to read this?
diff --git a/packages/fxa-settings/src/pages/Signup/interfaces.ts b/packages/fxa-settings/src/pages/Signup/interfaces.ts
index 28f3bdaaec..d9163fdfc2 100644
--- a/packages/fxa-settings/src/pages/Signup/interfaces.ts
+++ b/packages/fxa-settings/src/pages/Signup/interfaces.ts
@@ -9,6 +9,7 @@ import {
   OAuthIntegration,
 } from '../../models';
 import { SignupQueryParams } from '../../models/pages/signup';
+import { MetricsContext } from 'fxa-auth-client/browser';
 
 export interface BeginSignupResponse {
   signUp: {
@@ -27,6 +28,7 @@ export interface BeginSignUpOptions {
   verificationMethod?: string;
   keys?: boolean;
   atLeast18AtReg: true | null;
+  metricsContext: MetricsContext;
 }
 
 export type BeginSignupHandler = (