Merge pull request #18311 from mozilla/FXA-11048

fix(copy): Update fallback text/FTL to handle '1 code remaining'

Author: LZoog

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

@@ -6,7 +6,10 @@ tfa-row-backup-codes-title = Backup authentication codes
 tfa-row-backup-codes-not-available = No codes available
 # $numCodesRemaining - the number of backup authentication codes that have not yet been used (generally between 1 to 5)
 # A different message is shown when no codes are available
-tfa-row-backup-codes-available = { $numCodesAvailable } codes remaining
+tfa-row-backup-codes-available-v2 = { $numCodesAvailable ->
+  [one] { $numCodesAvailable } code remaining
+  *[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
 # Shown to users who have no backup authentication codes

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

@@ -62,6 +62,16 @@ describe('BackupCodesSubRow', () => {
       expect(screen.getByText('Get new codes')).toBeInTheDocument();
     });
 
+    it('renders correctly when 1 code is available', () => {
+      renderWithLocalizationProvider(
+        <BackupCodesSubRow {...defaultProps} numCodesAvailable={1} />
+      );
+      expect(
+        screen.getByText('Backup authentication codes')
+      ).toBeInTheDocument();
+      expect(screen.getByText('1 code remaining')).toBeInTheDocument();
+    });
+
     it('renders description when showDescription is true', () => {
       renderWithLocalizationProvider(<BackupCodesSubRow {...defaultProps} />);
       expect(

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

@@ -180,8 +180,10 @@ export const BackupCodesSubRow = ({
     <BackupCodesDisabledIcon className="-ms-1 -my-2 scale-50" />
   );
   const message = hasCodesRemaining ? (
-    <FtlMsg id="tfa-row-backup-codes-available" vars={{ numCodesAvailable }}>
-      <p>{`${numCodesAvailable} codes remaining`}</p>
+    <FtlMsg id="tfa-row-backup-codes-available-v2" vars={{ numCodesAvailable }}>
+      <p>{`${numCodesAvailable} code${
+        numCodesAvailable === 1 ? '' : 's'
+      } remaining`}</p>
     </FtlMsg>
   ) : (
     <FtlMsg id="tfa-row-backup-codes-not-available">

packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/en.ftl

@@ -7,8 +7,12 @@ signin-recovery-method-subheader = Choose a recovery method
 signin-recovery-method-details = Let’s make sure it’s you using your recovery methods.
 signin-recovery-method-phone = Recovery phone
 signin-recovery-method-code-v2 = Backup authentication codes
-# Variable: $numberOfCodes (String) - The number of authentication codes the user has left, e.g. 4
-signin-recovery-method-code-info = { $numberOfCodes } codes remaining
+# Variable: $numBackupCodes (String) - The number of backup authentication codes the user has left, e.g., 4
+signin-recovery-method-code-info-v2 =
+  { $numBackupCodes ->
+      [one] { $numBackupCodes } code remaining
+      *[other] { $numBackupCodes } codes remaining
+  }
 # Shown when a backend service fails and a code cannot be sent to the user's recovery phone.
 signin-recovery-method-send-code-error-heading = There was a problem sending a code to your recovery phone
 signin-recovery-method-send-code-error-description = Please try again later or use your backup authentication codes.

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

@@ -74,6 +74,13 @@ describe('SigninRecoveryChoice', () => {
     expect(
       screen.getByLabelText(/Backup authentication codes/i)
     ).toBeInTheDocument();
+    expect(screen.getByText('4 codes remaining')).toBeInTheDocument();
+  });
+
+  it('renders as expected with one backup authentication code', () => {
+    renderSigninRecoveryChoice({ numBackupCodes: 1 });
+
+    expect(screen.getByText('1 code remaining')).toBeInTheDocument();
   });
 
   it('calls handlePhoneChoice when Recovery phone option is selected', async () => {

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

@@ -112,9 +112,9 @@ const SigninRecoveryChoice = ({
         'Backup authentication codes'
       ),
       localizedChoiceInfo: ftlMsgResolver.getMsg(
-        'signin-recovery-method-code-info',
-        `${numBackupCodes} codes remaining`,
-        { numberOfCodes: numBackupCodes }
+        'signin-recovery-method-code-info-v2',
+        `${numBackupCodes} code${numBackupCodes === 1 ? '' : 's'} remaining`,
+        { numBackupCodes }
       ),
     },
   ];