fix(settings): fix OTP engage timing and add change email glean metric

Because:
- The Engage event on the passwordless OTP screen fired immediately on
  page load due to autoFocus triggering the onFocus handler, before the
  View event and without any user interaction
- There was no tracking for when users click "Use a different account"
  on the OTP code page
- The statsd passwordless.sendCode.success metric did not distinguish
  signup from signin

This commit:
- Adds onChangeCb prop to FormVerifyCode so callers can hook into input
  changes without hijacking setClearMessages
- Uses onChangeCb for the Glean OTP engage metric, fixing the autoFocus
  timing issue
- Emits change email event when user clicks "Use a different account"
  on the OTP page
- Adds isNewAccount tag to passwordless.sendCode.success statsd metric

Closes: FXA-13393

Author: vbudhram

packages/functional-tests/pages/signinPasswordlessCode.ts

@@ -42,4 +42,9 @@ export class SigninPasswordlessCodePage extends BaseTokenCodePage {
   get resendSuccessBanner() {
     return this.page.getByText(/A new code was sent/);
   }
+
+  get useDifferentAccountLink() {
+    this.checkPath();
+    return this.page.getByRole('link', { name: 'Use a different account' });
+  }
 }

packages/functional-tests/tests/passwordless/signinPasswordless.spec.ts

@@ -30,7 +30,15 @@ test.describe('severity-1 #smoke', () => {
         await page.waitForURL(/signin_passwordless_code/);
         await expect(signinPasswordlessCode.heading).toBeVisible();
 
-        // Get OTP code from email
+        // Click "Use a different account" to verify change email glean event,
+        // then re-enter same email to complete the flow
+        await signinPasswordlessCode.useDifferentAccountLink.click();
+        await expect(page).not.toHaveURL(/signin_passwordless_code/);
+        await target.emailClient.clear(email);
+        await signin.fillOutEmailFirstForm(email);
+        await page.waitForURL(/signin_passwordless_code/);
+
+        // Get the fresh OTP code (previous codes were cleared)
         const code = await target.emailClient.getPasswordlessSignupCode(email);
         await signinPasswordlessCode.fillOutCodeForm(code);
 
@@ -41,6 +49,7 @@ test.describe('severity-1 #smoke', () => {
         gleanEventsHelper.assertEventOrder([
           'email_first_view',
           'reg_otp_view',
+          'reg_otp_change_email',
           'reg_otp_submit',
           'reg_otp_submit_success',
         ]);

packages/fxa-auth-server/lib/routes/passwordless.ts

@@ -453,6 +453,7 @@ class PasswordlessHandler {
     this.statsd.increment('passwordless.sendCode.success', {
       ...getClientServiceTags(request),
       isResend: String(isResend),
+      isNewAccount: String(isNewAccount),
     });
 
     // Record security event

packages/fxa-settings/src/components/FormVerifyCode/index.tsx

@@ -48,6 +48,7 @@ export type FormVerifyCodeProps = {
   submitFormOnPaste?: boolean;
   cmsButton?: CmsButtonType;
   onEngageCb?: () => void;
+  onChangeCb?: () => void;
 };
 
 type FormData = {
@@ -66,6 +67,7 @@ const FormVerifyCode = ({
   submitFormOnPaste,
   cmsButton,
   onEngageCb,
+  onChangeCb,
 }: FormVerifyCodeProps) => {
   const [isFocused, setIsFocused] = useState<boolean>(false);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -160,6 +162,7 @@ const FormVerifyCode = ({
           } else {
             setCodeErrorMessage('');
           }
+          onChangeCb?.();
         }}
         onFocusCb={viewName ? onFocus : undefined}
         onPaste={submitFormOnPaste ? onPaste : undefined}

packages/fxa-settings/src/lib/glean/index.ts

@@ -643,6 +643,9 @@ const recordEventMetric = (
     case 'reg_otp_email_confirmation_resend_code':
       reg.otpEmailConfirmationResendCode.record();
       break;
+    case 'reg_otp_change_email':
+      reg.otpChangeEmail.record();
+      break;
     case 'login_otp_view':
       login.otpView.record();
       break;
@@ -663,6 +666,9 @@ const recordEventMetric = (
     case 'login_otp_email_confirmation_resend_code':
       login.otpEmailConfirmationResendCode.record();
       break;
+    case 'login_otp_change_email':
+      login.otpChangeEmail.record();
+      break;
     case 'error_view':
       error.view.record({
         reason: gleanPingMetrics?.event?.['reason'] || '',

packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.test.tsx

@@ -47,6 +47,7 @@ jest.mock('../../../lib/glean', () => ({
       submitSuccess: jest.fn(),
       error: jest.fn(),
       resendCode: jest.fn(),
+      changeEmail: jest.fn(),
     },
     passwordlessReg: {
       view: jest.fn(),
@@ -55,6 +56,7 @@ jest.mock('../../../lib/glean', () => ({
       submitSuccess: jest.fn(),
       error: jest.fn(),
       resendCode: jest.fn(),
+      changeEmail: jest.fn(),
     },
     isDone: jest.fn().mockResolvedValue(undefined),
   },
@@ -736,14 +738,20 @@ describe('SigninPasswordlessCode page', () => {
       expect(mockGleanPasswordlessLogin.view).not.toHaveBeenCalled();
     });
 
-    it('emits engage event on first focus of code input', async () => {
+    it('does not emit engage on mount', () => {
       render({ isSignup: false });
+      expect(mockGleanPasswordlessLogin.engage).not.toHaveBeenCalled();
+    });
+
+    it('emits engage event on first keystroke', async () => {
+      render({ isSignup: false });
+      const user = userEvent.setup();
       const input = screen.getByLabelText('Enter 8-digit code');
-      fireEvent.focus(input);
+      await user.type(input, '1');
       expect(mockGleanPasswordlessLogin.engage).toHaveBeenCalledTimes(1);
 
-      // Subsequent focuses should not re-emit
-      fireEvent.focus(input);
+      // Subsequent keystrokes should not re-emit
+      await user.type(input, '2');
       expect(mockGleanPasswordlessLogin.engage).toHaveBeenCalledTimes(1);
     });
 
@@ -816,6 +824,22 @@ describe('SigninPasswordlessCode page', () => {
       });
     });
 
+    it('emits changeEmail event on "Use a different account" click for signin', () => {
+      render({ isSignup: false });
+      const link = screen.getByText('Use a different account');
+      fireEvent.click(link);
+      expect(mockGleanPasswordlessLogin.changeEmail).toHaveBeenCalledTimes(1);
+      expect(mockGleanPasswordlessReg.changeEmail).not.toHaveBeenCalled();
+    });
+
+    it('emits changeEmail event on "Use a different account" click for signup', () => {
+      render({ isSignup: true });
+      const link = screen.getByText('Use a different account');
+      fireEvent.click(link);
+      expect(mockGleanPasswordlessReg.changeEmail).toHaveBeenCalledTimes(1);
+      expect(mockGleanPasswordlessLogin.changeEmail).not.toHaveBeenCalled();
+    });
+
     it('uses reg metrics for signup flow on submit', async () => {
       render({ isSignup: true });
       await submitCode();

packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.tsx

@@ -76,6 +76,7 @@ const SigninPasswordlessCode = ({
     ? GleanMetrics.passwordlessReg
     : GleanMetrics.passwordlessLogin;
 
+  const [hasEngaged, setHasEngaged] = useState(false);
   const gleanViewTracked = useRef(false);
 
   useEffect(() => {
@@ -426,6 +427,7 @@ const SigninPasswordlessCode = ({
     e: React.MouseEvent<HTMLAnchorElement>
   ) => {
     e.preventDefault();
+    gleanOtp.changeEmail();
 
     // Remove email from query params if present
     const searchParams = new URLSearchParams(window.location.search);
@@ -511,7 +513,12 @@ const SigninPasswordlessCode = ({
             color: cmsInfo?.shared?.buttonColor,
             text: cmsButtonText,
           },
-          onEngageCb: () => gleanOtp.engage(),
+          onChangeCb: () => {
+            if (hasEngaged === false) {
+              setHasEngaged(true);
+              gleanOtp.engage();
+            }
+          },
         }}
       />
 

packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml

@@ -1126,6 +1126,24 @@ login:
     expires: never
     data_sensitivity:
       - interaction
+  otp_change_email:
+    type: event
+    description: |
+      Passwordless OTP Change Email (Login)
+      Event that indicates the user clicked "Use a different account" on the passwordless OTP code page during login.
+    send_in_pings:
+      - events
+    notification_emails:
+      - [email protected]
+      - [email protected]
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-13393
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121
+    expires: never
+    data_sensitivity:
+      - interaction
 password_reset:
   create_new_recovery_key_message_click:
     type: event
@@ -1825,6 +1843,24 @@ reg:
     expires: never
     data_sensitivity:
       - interaction
+  otp_change_email:
+    type: event
+    description: |
+      Passwordless OTP Change Email (Registration)
+      Event that indicates the user clicked "Use a different account" on the passwordless OTP code page during registration.
+    send_in_pings:
+      - events
+    notification_emails:
+      - [email protected]
+      - [email protected]
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-13393
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121
+    expires: never
+    data_sensitivity:
+      - interaction
 
 cad_firefox:
   view:

packages/fxa-shared/metrics/glean/web/event.ts

@@ -4,8 +4,8 @@
 
 // AUTOGENERATED BY glean_parser v14.5.2. DO NOT EDIT. DO NOT COMMIT.
 
-import StringMetricType from '@mozilla/glean/private/metrics/string';
 import BooleanMetricType from '@mozilla/glean/private/metrics/boolean';
+import StringMetricType from '@mozilla/glean/private/metrics/string';
 
 /**
  * The name of the framework used by the app (ie React or Backbone).

packages/fxa-shared/metrics/glean/web/index.ts

@@ -248,6 +248,7 @@ export const eventsMap = {
     submitSuccess: 'reg_otp_submit_success',
     error: 'reg_otp_submit_frontend_error',
     resendCode: 'reg_otp_email_confirmation_resend_code',
+    changeEmail: 'reg_otp_change_email',
   },
 
   passwordlessLogin: {
@@ -257,6 +258,7 @@ export const eventsMap = {
     submitSuccess: 'login_otp_submit_success',
     error: 'login_otp_submit_frontend_error',
     resendCode: 'login_otp_email_confirmation_resend_code',
+    changeEmail: 'login_otp_change_email',
   },
 
   error: {