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

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 }}

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);

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,
+              },
             },
           },
         },

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?

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 = (