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 = ({ /> - + - ), }; 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 }} /> ); @@ -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 + ), }; 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 = (