Merge pull request #18832 from mozilla/FXA-10726

fix(settings): break long email in verification code pages

Author: MagentaManifold

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

@@ -7,7 +7,7 @@
 # can stand alone as "{ -product-mozilla-account }"
 signin-token-code-heading-2 = Enter confirmation code<span> for your { -product-mozilla-account }</span>
 # { $email } represents the email that the user entered to sign in
-signin-token-code-instruction = Enter the code that was sent to { $email } within 5 minutes.
+signin-token-code-instruction-v2 = Enter the code that was sent to <email>{ $email }</email> within 5 minutes.
 signin-token-code-input-label-v2 = Enter 6-digit code
 # Form button to confirm if the confirmation code entered by the user is valid
 signin-token-code-confirm-button = Confirm

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

@@ -104,7 +104,10 @@ describe('SigninTokenCode page', () => {
       'Enter confirmation code for your Mozilla account'
     );
     screen.getByText(
-      `Enter the code that was sent to ${MOCK_EMAIL} within 5 minutes.`
+      (_, element) =>
+        element?.tagName === 'P' &&
+        element?.textContent ===
+          `Enter the code that was sent to ${MOCK_EMAIL} within 5 minutes.`
     );
     screen.getByLabelText('Enter 6-digit code');
     screen.getByRole('button', { name: 'Confirm' });

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

@@ -228,9 +228,14 @@ const SigninTokenCode = ({
 
       <EmailCodeImage />
 
-      <FtlMsg id="signin-token-code-instruction" vars={{ email }}>
+      <FtlMsg
+        id="signin-token-code-instruction-v2"
+        vars={{ email }}
+        elems={{ email: <span className="break-all" /> }}
+      >
         <p id="verification-email-message" className="my-4 text-sm">
-          Enter the code that was sent to {email} within 5 minutes.
+          Enter the code that was sent to{' '}
+          <span className="break-all">{email}</span> within 5 minutes.
         </p>
       </FtlMsg>
 

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/en.ftl

@@ -10,7 +10,7 @@ confirm-signup-code-page-title = Enter confirmation code
 # can stand alone as "{ -product-mozilla-account }"
 confirm-signup-code-heading-2 = Enter confirmation code <span>for your { -product-mozilla-account }</span>
 # { $email } represents the email that the user entered to sign in
-confirm-signup-code-instruction = Enter the code that was sent to { $email } within 5 minutes.
+confirm-signup-code-instruction-v2 = Enter the code that was sent to <email>{ $email }</email> within 5 minutes.
 confirm-signup-code-input-label = Enter 6-digit code
 # Form button to confirm if the confirmation code entered by the user is valid
 confirm-signup-code-confirm-button = Confirm

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx

@@ -299,9 +299,14 @@ const ConfirmSignupCode = ({
 
       <EmailCodeImage />
 
-      <FtlMsg id="confirm-signup-code-instruction" vars={{ email: email! }}>
+      <FtlMsg
+        id="confirm-signup-code-instruction-v2"
+        vars={{ email: email! }}
+        elems={{ email: <span className="break-all" /> }}
+      >
         <p className="mt-2 text-sm">
-          Enter the code that was sent to {email} within 5 minutes.
+          Enter the code that was sent to{' '}
+          <span className="break-all">{email}</span> within 5 minutes.
         </p>
       </FtlMsg>