Merge pull request #18452 from mozilla/FXA-11178

fix(settings): Fix back arrow navigation from step 2 of recovery phone setup

Author: vpomerleau

packages/fxa-settings/src/components/Settings/PageRecoveryPhoneSetup/en.ftl

@@ -3,3 +3,5 @@
 page-setup-recovery-phone-heading = Add recovery phone
 
 page-setup-recovery-phone-back-button-title = Back to settings
+# Back arrow to return to step 1 of recovery phone setup flow
+page-setup-recovery-phone-step2-back-button-title = Change phone number

packages/fxa-settings/src/components/Settings/PageRecoveryPhoneSetup/index.test.tsx

@@ -14,6 +14,12 @@ import {
 
 jest.mock('../../../models/AlertBarInfo');
 
+const mockNavigate = jest.fn();
+jest.mock('@reach/router', () => ({
+  ...jest.requireActual('@reach/router'),
+  useNavigate: () => mockNavigate,
+}));
+
 const phoneNumberWithoutCountryCode = MOCK_FULL_PHONE_NUMBER.slice(2);
 const otpCode = '123456';
 const mockSuccessResponse = {
@@ -118,4 +124,58 @@ describe('PageRecoveryPhoneSetup', () => {
       MOCK_FULL_PHONE_NUMBER
     );
   });
+
+  it('at step 1, handles back arrow click to return to settings', async () => {
+    const user = userEvent.setup();
+    const confirmRecoveryPhone = jest
+      .fn()
+      .mockResolvedValueOnce(mockSuccessResponse);
+    const addRecoveryPhone = jest
+      .fn()
+      .mockResolvedValueOnce(mockSuccessResponse);
+    renderWithRouter(
+      <Subject account={{ confirmRecoveryPhone, addRecoveryPhone }} />
+    );
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole('heading', { name: 'Verify your phone number' })
+      ).toBeVisible()
+    );
+
+    await waitFor(async () => {
+      user.click(screen.getByRole('button', { name: 'Back to settings' }));
+    });
+
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalledTimes(1));
+  });
+
+  it('at step 2, handles back arrow click to return to step 1', async () => {
+    const user = userEvent.setup();
+    const confirmRecoveryPhone = jest
+      .fn()
+      .mockResolvedValueOnce(mockSuccessResponse);
+    const addRecoveryPhone = jest
+      .fn()
+      .mockResolvedValueOnce(mockSuccessResponse);
+    renderWithRouter(
+      <Subject account={{ confirmRecoveryPhone, addRecoveryPhone }} />
+    );
+
+    await completeStepOne(user);
+    await waitFor(() => {
+      expect(
+        screen.getByText(/A six-digit code was sent/i)
+      ).toBeInTheDocument();
+    });
+    await waitFor(async () => {
+      user.click(screen.getByRole('button', { name: 'Change phone number' }));
+    });
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole('heading', { name: 'Verify your phone number' })
+      ).toBeVisible()
+    );
+  });
 });

packages/fxa-settings/src/components/Settings/PageRecoveryPhoneSetup/index.tsx

@@ -36,13 +36,24 @@ export const PageRecoveryPhoneSetup = (_: RouteComponentProps) => {
     'Add recovery phone'
   );
 
-  const localizedBackButtonTitle = ftlMsgResolver.getMsg(
-    'page-setup-recovery-phone-back-button-title',
-    'Back to settings'
-  );
-
-  const navigateBackward = () => {
-    navigate(SETTINGS_PATH);
+  const localizedBackButtonTitle =
+    currentStep === 1
+      ? ftlMsgResolver.getMsg(
+          'page-setup-recovery-phone-back-button-title',
+          'Back to settings'
+        )
+      : ftlMsgResolver.getMsg(
+          'page-setup-recovery-phone-step2-back-button-title',
+          'Change phone number'
+        );
+
+  const navigateBackward = (e?: React.MouseEvent<HTMLElement>) => {
+    e?.preventDefault();
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    } else {
+      navigate(SETTINGS_PATH);
+    }
   };
 
   const navigateForward = (e?: React.MouseEvent<HTMLElement>) => {