From f4788575bbf40bcd2c4db9b173e17706ccfd46ed Mon Sep 17 00:00:00 2001
From: Jonathan Almeida <jalmeida@mozilla.com>
Date: Tue, 1 Oct 2024 22:27:31 -0400
Subject: [PATCH] feat(metrics): Fix '2FA QR Code Setup View' to fire on view

The metric was incorrectly added to fire on the 'Continue' button click,
but we really want this to fire when the QR code was viewed instead.

Fixes FXA-9573
---
 .../PageTwoStepAuthentication/index.test.tsx        | 13 ++++---------
 .../Settings/PageTwoStepAuthentication/index.tsx    | 12 +++++++-----
 2 files changed, 11 insertions(+), 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
index 539a6a6c8b6..16a6607a467 100644
--- a/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.test.tsx
@@ -133,6 +133,7 @@ describe('step 1', () => {
       'alt',
       expect.stringContaining('JFXE6ULUGM4U4WDHOFVFIRDPKZITATSK')
     );
+    expect(GleanMetrics.accountPref.twoStepAuthQrView).toHaveBeenCalled();
   });
 
   it('does not display the QR code for the unverified', async () => {
@@ -140,6 +141,9 @@ describe('step 1', () => {
       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
index a9b10a9833a..fdf9eb56938 100644
--- 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"
               >