Merge pull request #17459 from mozilla/FXA-9575-2fa-submit-glean

feat(metrics): add click event for 2fa setup totp code submit
mozilla · Aug 23, 2024 · d8b1d4f · d8b1d4f
2 parents 039f3c0 + 0c46f39
commit d8b1d4f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/packages/fxa-settings/src/components/FormVerifyCode/index.tsx b/packages/fxa-settings/src/components/FormVerifyCode/index.tsx
@@ -9,6 +9,7 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 import { logViewEvent } from '../../lib/metrics';
 import { REACT_ENTRYPOINT } from '../../constants';
 import { useFtlMsgResolver } from '../../models';
+import { GleanClickEventDataAttrs } from '../../lib/types';
 
 export enum InputModeEnum {
   text = 'text',
@@ -36,6 +37,7 @@ export type FormVerifyCodeProps = {
   setCodeErrorMessage: React.Dispatch<React.SetStateAction<string>>;
   setClearMessages?: React.Dispatch<React.SetStateAction<boolean>>;
   isLoading?: boolean;
+  gleanDataAttrs?: GleanClickEventDataAttrs;
 };
 
 type FormData = {
@@ -50,6 +52,7 @@ const FormVerifyCode = ({
   codeErrorMessage,
   setCodeErrorMessage,
   setClearMessages,
+  gleanDataAttrs,
 }: FormVerifyCodeProps) => {
   const [isFocused, setIsFocused] = useState<boolean>(false);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -137,6 +140,9 @@ const FormVerifyCode = ({
           type="submit"
           className="cta-primary cta-xl"
           disabled={isSubmitting}
+          data-glean-id={gleanDataAttrs?.id}
+          data-glean-label={gleanDataAttrs?.label}
+          data-glean-type={gleanDataAttrs?.type}
         >
           {formAttributes.submitButtonText}
         </button>

diff --git a/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.tsx b/packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.tsx
@@ -308,6 +308,8 @@ export const PageTwoStepAuthentication = (_: RouteComponentProps) => {
                     GleanMetrics.accountPref.twoStepAuthQrView();
                   }
                 }}
+                data-glean-id="two_step_auth_qr_submit"
+                data-glean-type="setup"
               >
                 Continue
               </button>

diff --git a/packages/fxa-settings/src/lib/types.ts b/packages/fxa-settings/src/lib/types.ts
@@ -2,6 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+export type GleanClickEventDataAttrs = {
+  id: string;
+  label?: string;
+  type?: string;
+};
+
 export enum LinkType {
   'reset-password',
   'signin',

diff --git a/packages/fxa-settings/src/pages/InlineTotpSetup/index.tsx b/packages/fxa-settings/src/pages/InlineTotpSetup/index.tsx
@@ -246,6 +246,10 @@ export const InlineTotpSetup = ({
                 codeErrorMessage={totpErrorMessage}
                 setCodeErrorMessage={setTotpErrorMessage}
                 {...{ localizedCustomCodeRequiredMessage }}
+                gleanDataAttrs={{
+                  id: 'two_step_auth_qr_submit',
+                  type: 'inline setup',
+                }}
               />
               <button className="link-blue text-sm mt-4" onClick={onCancel}>
                 <FtlMsg id="inline-totp-setup-cancel-setup-button">