Merge pull request #17778 from mozilla/FXA-9573

feat(metrics): Fix '2FA QR Code Setup View' to fire on view
mozilla · Oct 7, 2024 · de48522 · de48522
2 parents 5053727 + f478857
commit de48522
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.test.tsx b/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.test.tsx
@@ -133,13 +133,17 @@ describe('step 1', () => {
       'alt',
       expect.stringContaining('JFXE6ULUGM4U4WDHOFVFIRDPKZITATSK')
     );
+    expect(GleanMetrics.accountPref.twoStepAuthQrView).toHaveBeenCalled();
   });
 
   it('does not display the QR code for the unverified', async () => {
     await act(async () => {
       render(account, false);
     });
     expect(screen.queryByTestId('2fa-qr-code')).toBeNull();
+    expect(
+      GleanMetrics.accountPref.twoStepAuthScanCodeLink
+    ).toHaveBeenCalledTimes(0);
   });
 
   it('displays the totp secret', async () => {
@@ -153,15 +157,6 @@ describe('step 1', () => {
     expect(screen.getByTestId('manual-code')).toBeInTheDocument();
     expect(GleanMetrics.accountPref.twoStepAuthScanCodeLink).toHaveBeenCalled();
   });
-
-  it('sends metrics when step 1 is submitted without viewing manual code', async () => {
-    await act(async () => {
-      render();
-    });
-    await submitTotp('867530');
-
-    expect(GleanMetrics.accountPref.twoStepAuthQrView).toHaveBeenCalled();
-  });
 });
 
 describe('step 2', () => {

diff --git a/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.tsx b/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.tsx
@@ -184,6 +184,13 @@ export const PageTwoStepAuthentication = (_: RouteComponentProps) => {
       GleanMetrics.accountPref.twoStepAuthEnterCodeView();
   }, [recoveryCodesAcknowledged, totpVerified]);
 
+  useEffect(() => {
+    !totpVerified &&
+      showQrCode &&
+      totpInfo.result &&
+      GleanMetrics.accountPref.twoStepAuthQrView();
+  }, [showQrCode, totpInfo.result, totpVerified]);
+
   const moveBack = () => {
     if (!totpVerified) {
       return goHome();
@@ -326,11 +333,6 @@ export const PageTwoStepAuthentication = (_: RouteComponentProps) => {
                 disabled={
                   !totpForm.formState.isDirty || !totpForm.formState.isValid
                 }
-                onClick={() => {
-                  if (showQrCode) {
-                    GleanMetrics.accountPref.twoStepAuthQrView();
-                  }
-                }}
                 data-glean-id="two_step_auth_qr_submit"
                 data-glean-type="setup"
               >