Merge pull request #18454 from mozilla/FXA-11177

fix(settings): Bug fixes for the recovery phone sub row

Author: vpomerleau

packages/functional-tests/pages/settings/components/unitRow.ts

@@ -94,7 +94,7 @@ export class TotpRow extends UnitRow {
   }
 
   get changeButton() {
-    return this.page.getByRole('button', { name: 'Get new codes' });
+    return this.page.getByRole('button', { name: 'Create new codes' });
   }
 
   get addRecoveryPhoneButton() {

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

@@ -11,7 +11,7 @@ tfa-row-backup-codes-available-v2 = { $numCodesAvailable ->
   *[other] { $numCodesAvailable } codes remaining
 }
 # Shown to users who have backup authentication codes - this will allow them to generate new codes to replace the previous ones
-tfa-row-backup-codes-get-new-cta = Get new codes
+tfa-row-backup-codes-get-new-cta-v2 = Create new codes
 # Shown to users who have no backup authentication codes
 # Button to add backup authentication codes when none are configured
 tfa-row-backup-codes-add-cta = Add
@@ -22,7 +22,7 @@ tfa-row-backup-codes-description-2 = This is the safest recovery method if you c
 # A recovery code can be sent to the user's phone
 tfa-row-backup-phone-title-v2 = Recovery phone
 # Shown with an alert icon to indicate that no recovery phone is configured
-tfa-row-backup-phone-not-available = No recovery phone number available
+tfa-row-backup-phone-not-available-v2 = No phone number added
 # button to change the configured recovery phone
 tfa-row-backup-phone-change-cta = Change
 # button to add/configure a recovery phone

packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx

@@ -59,7 +59,7 @@ export const GenericSubRowWithDescription: StoryFn = () => (
 export const BackupCodesAvailable: StoryFn = () => (
   <BackupCodesSubRow
     numCodesAvailable={5}
-    onCtaClick={action('Get new codes clicked')}
+    onCtaClick={action('Create new codes clicked')}
   />
 );
 

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

@@ -14,7 +14,7 @@ import {
 describe('SubRow', () => {
   const defaultProps = {
     ctaGleanId: 'glean-test',
-    ctaMessage: 'Get new codes',
+    ctaMessage: 'Create new codes',
     icon: <div>Icon</div>,
     idPrefix: 'test',
     localizedDescription: 'More info message',
@@ -27,21 +27,21 @@ describe('SubRow', () => {
     renderWithLocalizationProvider(<SubRow {...defaultProps} isEnabled />);
     expect(screen.getByText('Backup authentication codes')).toBeInTheDocument();
     expect(screen.getByText('Message')).toBeInTheDocument();
-    expect(screen.getByText('Get new codes')).toBeInTheDocument();
+    expect(screen.getByText('Create new codes')).toBeInTheDocument();
     expect(screen.getByText('More info message')).toBeInTheDocument();
   });
 
   it('renders correctly when unavailable', () => {
     render(<SubRow {...defaultProps} isEnabled={false} />);
     expect(screen.getByText('Backup authentication codes')).toBeInTheDocument();
     expect(screen.getByText('Message')).toBeInTheDocument();
-    const cta = screen.getByRole('button', { name: 'Get new codes' });
+    const cta = screen.getByRole('button', { name: 'Create new codes' });
     expect(cta).toBeInTheDocument();
   });
 
   it('calls onCtaClick when CTA button is clicked', () => {
     renderWithLocalizationProvider(<SubRow {...defaultProps} isEnabled />);
-    fireEvent.click(screen.getByText('Get new codes'));
+    fireEvent.click(screen.getByText('Create new codes'));
     expect(defaultProps.onCtaClick).toHaveBeenCalled();
   });
 });
@@ -59,7 +59,7 @@ describe('BackupCodesSubRow', () => {
         screen.getByText('Backup authentication codes')
       ).toBeInTheDocument();
       expect(screen.getByText('5 codes remaining')).toBeInTheDocument();
-      expect(screen.getByText('Get new codes')).toBeInTheDocument();
+      expect(screen.getByText('Create new codes')).toBeInTheDocument();
     });
 
     it('renders correctly when 1 code is available', () => {
@@ -78,7 +78,7 @@ describe('BackupCodesSubRow', () => {
         screen.getByText('Backup authentication codes')
       ).toBeInTheDocument();
       expect(screen.getByText('5 codes remaining')).toBeInTheDocument();
-      expect(screen.getByText('Get new codes')).toBeInTheDocument();
+      expect(screen.getByText('Create new codes')).toBeInTheDocument();
       expect(
         screen.getByText(
           'This is the safest recovery method if you canʼt use your mobile device or authenticator app.'
@@ -88,7 +88,7 @@ describe('BackupCodesSubRow', () => {
 
     it('calls onCtaClick when CTA button is clicked', () => {
       renderWithLocalizationProvider(<BackupCodesSubRow {...defaultProps} />);
-      fireEvent.click(screen.getByText('Get new codes'));
+      fireEvent.click(screen.getByText('Create new codes'));
       expect(defaultProps.onCtaClick).toHaveBeenCalled();
     });
   });
@@ -126,9 +126,7 @@ describe('BackupPhoneSubRow', () => {
       <BackupPhoneSubRow onCtaClick={jest.fn()} />
     );
     expect(screen.getByText('Recovery phone')).toBeInTheDocument();
-    expect(
-      screen.getByText('No recovery phone number available')
-    ).toBeInTheDocument();
+    expect(screen.getByText('No phone number added')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
     expect(
       screen.getByText(

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

@@ -195,7 +195,10 @@ export const BackupCodesSubRow = ({
     </FtlMsg>
   );
   const ctaMessage = hasCodesRemaining
-    ? ftlMsgResolver.getMsg('tfa-row-backup-codes-get-new-cta', 'Get new codes')
+    ? ftlMsgResolver.getMsg(
+        'tfa-row-backup-codes-get-new-cta-v2',
+        'Create new codes'
+      )
     : ftlMsgResolver.getMsg('tfa-row-backup-codes-add-cta', 'Add');
 
   const ctaGleanId = hasCodesRemaining
@@ -241,8 +244,8 @@ export const BackupPhoneSubRow = ({
     // Phone numbers should always be displayed left-to-right, *including* in rtl languages
     <p dir="ltr">{phoneNumber}</p>
   ) : (
-    <FtlMsg id="tfa-row-backup-phone-not-available">
-      <p>No recovery phone number available</p>
+    <FtlMsg id="tfa-row-backup-phone-not-available-v2">
+      <p>No phone number added</p>
     </FtlMsg>
   );
   const ctaMessage = hasPhoneNumber
@@ -290,15 +293,10 @@ export const BackupPhoneSubRow = ({
             ),
           }
         : null)}
-      {...((!hasPhoneNumber || (hasPhoneNumber && onDeleteClick)) && {
-        // description should not be shown when the user can't delete the phone number (only one message displayed at a time)
-        // description should only be shown when both backup authentication codes and recovery phone
-        // are available recovery methods (description is intended to allow for comparison of the two methods)
-        localizedDescription: ftlMsgResolver.getMsg(
-          'tfa-row-backup-phone-description',
-          'This is the easier recovery method if you canʼt use your authenticator app.'
-        ),
-      })}
+      localizedDescription={ftlMsgResolver.getMsg(
+        'tfa-row-backup-phone-description',
+        'This is the easier recovery method if you canʼt use your authenticator app.'
+      )}
       {...{
         ctaGleanId,
         ctaMessage,