From 7755b20f917107da7b73fbdbe531dfe574cee94b Mon Sep 17 00:00:00 2001
From: Lauren Zugai <lauren@zugai.com>
Date: Thu, 30 Jan 2025 11:37:07 -0600
Subject: [PATCH] fix(copy): Update fallback text/FTL to handle '1 code
 remaining'

Because:
* We are displaying '1 codes remaining' which is improper

This commit:
* Uses a selector in Fluent to handle one + other number of codes remaining, updates fallback text and tests

closes FXA-11048"
---
 .../fxa-settings/src/components/Settings/SubRow/en.ftl |  5 ++++-
 .../src/components/Settings/SubRow/index.test.tsx      | 10 ++++++++++
 .../src/components/Settings/SubRow/index.tsx           |  6 ++++--
 .../src/pages/Signin/SigninRecoveryChoice/en.ftl       |  8 ++++++--
 .../pages/Signin/SigninRecoveryChoice/index.test.tsx   |  7 +++++++
 .../src/pages/Signin/SigninRecoveryChoice/index.tsx    |  6 +++---
 6 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/fxa-settings/src/components/Settings/SubRow/en.ftl b/packages/fxa-settings/src/components/Settings/SubRow/en.ftl
index 890ea90a816..22d9efc869c 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/en.ftl
+++ b/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
diff --git a/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx b/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx
index 487a0a4449e..a6592c298b3 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx
+++ b/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(
diff --git a/packages/fxa-settings/src/components/Settings/SubRow/index.tsx b/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
index d46aca4857b..fdacb1bd74e 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
+++ b/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">
diff --git a/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/en.ftl b/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/en.ftl
index 5a2f746a320..8a13a2f5259 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/en.ftl
+++ b/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.
diff --git a/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.test.tsx b/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.test.tsx
index 893fe8e6ad3..b85d0507511 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.test.tsx
+++ b/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 () => {
diff --git a/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.tsx b/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.tsx
index f2f9eab1488..33e3b1136e2 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.tsx
+++ b/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 }
       ),
     },
   ];