feat(emails): Add a countdown for email resending on signup and signin

Author: vbudhram

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

@@ -14,6 +14,13 @@ signin-token-code-confirm-button = Confirm
 signin-token-code-code-expired = Code expired?
 # Link to resend a new code to the user's email.
 signin-token-code-resend-code-link = Email new code.
+# Countdown message shown when user must wait before resending code
+# { $seconds } represents the number of seconds remaining
+signin-token-code-resend-code-countdown =
+    { $seconds ->
+        [one] Email new code in { $seconds } second
+        *[other] Email new code in { $seconds } seconds
+    }
 # Error displayed in a tooltip when the form is submitted without a code
 signin-token-code-required-error = Confirmation code required
 signin-token-code-resend-error = Something went wrong. A new code could not be sent.

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

@@ -33,7 +33,6 @@ jest.mock('../../../lib/metrics', () => ({
   usePageViewEvent: jest.fn(),
   logViewEvent: jest.fn(),
 }));
-
 jest.mock('../../../lib/glean', () => ({
   __esModule: true,
   default: {
@@ -172,6 +171,33 @@ describe('SigninTokenCode page', () => {
       await renderAndResend();
       screen.getByText('Something went wrong. A new code could not be sent.');
     });
+
+    it('shows countdown timer after successful resend', async () => {
+      jest.useFakeTimers();
+      session = mockSession();
+      render();
+      await waitFor(() => {
+        screen.getByText('Code expired?');
+      });
+
+      const resendButton = screen.getByRole('button', { name: 'Email new code.' });
+      fireEvent.click(resendButton);
+
+      await waitFor(() => {
+        expect(session.sendVerificationCode).toHaveBeenCalled();
+      });
+
+      // Countdown button should appear and be disabled
+      const resendButtonAfter = await waitFor(() => {
+        const button = screen.getByRole('button', { name: /Email new code in/ });
+        expect(button).toBeDisabled();
+        return button;
+      });
+
+      expect(resendButtonAfter.textContent).toMatch(/\d+/);
+
+      jest.useRealTimers();
+    });
   });
 
   describe('onSubmit code submission', () => {

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

@@ -29,6 +29,7 @@ import Banner, { ResendCodeSuccessBanner } from '../../../components/Banner';
 export const viewName = 'signin-token-code';
 
 const SIX_DIGIT_NUMBER_REGEX = /^\d{6}$/;
+const RESEND_CODE_COUNTDOWN = 30;
 
 const SigninTokenCode = ({
   finishOAuthFlowHandler,
@@ -56,6 +57,7 @@ const SigninTokenCode = ({
   const [animateBanner, setAnimateBanner] = useState(false);
   const [codeErrorMessage, setCodeErrorMessage] = useState<string>('');
   const [resendCodeLoading, setResendCodeLoading] = useState<boolean>(false);
+  const [resendCountdown, setResendCountdown] = useState<number>(0);
 
   const webRedirectCheck = useWebRedirect(integration.data.redirectTo);
   const redirectTo =
@@ -86,6 +88,17 @@ const SigninTokenCode = ({
     GleanMetrics.loginConfirmation.view();
   }, []);
 
+  // Countdown timer for resend code
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setTimeout(() => {
+        setResendCountdown(resendCountdown - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [resendCountdown]);
+
   const handleAnimationEnd = () => {
     // We add the "shake" animation to bring attention to the success banner
     // when the success banner was already displayed. We have to remove the
@@ -97,6 +110,7 @@ const SigninTokenCode = ({
     setResendCodeLoading(true);
     try {
       await session.sendVerificationCode();
+
       if (showResendSuccessBanner) {
         // shake the banner if it is already displayed
         setAnimateBanner(true);
@@ -116,6 +130,8 @@ const SigninTokenCode = ({
       );
     } finally {
       setResendCodeLoading(false);
+      // Start countdown
+      setResendCountdown(RESEND_CODE_COUNTDOWN);
     }
   };
 
@@ -277,15 +293,29 @@ const SigninTokenCode = ({
         <FtlMsg id="signin-token-code-code-expired">
           <p>Code expired?</p>
         </FtlMsg>
-        <FtlMsg id="signin-token-code-resend-code-link">
-          <button
-            className="link-blue"
-            onClick={handleResendCode}
-            disabled={resendCodeLoading}
+        {resendCountdown > 0 ? (
+          <FtlMsg
+            id="signin-token-code-resend-code-countdown"
+            vars={{ seconds: resendCountdown }}
           >
-            Email new code.
-          </button>
-        </FtlMsg>
+            <button
+              className="link-blue cursor-not-allowed opacity-50"
+              disabled
+            >
+              Email new code in {resendCountdown} seconds
+            </button>
+          </FtlMsg>
+        ) : (
+          <FtlMsg id="signin-token-code-resend-code-link">
+            <button
+              className="link-blue"
+              onClick={handleResendCode}
+              disabled={resendCodeLoading}
+            >
+              Email new code.
+            </button>
+          </FtlMsg>
+        )}
       </div>
     </AppLayout>
   );

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

@@ -18,6 +18,13 @@ confirm-signup-code-sync-button = Start syncing
 confirm-signup-code-code-expired = Code expired?
 # Link to resend a new code to the user's email.
 confirm-signup-code-resend-code-link = Email new code.
+# Countdown message shown when user must wait before resending code
+# { $seconds } represents the number of seconds remaining
+confirm-signup-code-resend-code-countdown =
+    { $seconds ->
+        [one] Email new code in { $seconds } second
+        *[other] Email new code in { $seconds } seconds
+    }
 confirm-signup-code-success-alert = Account confirmed successfully
 # Error displayed in tooltip.
 confirm-signup-code-is-required-error = Confirmation code is required

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

@@ -580,4 +580,32 @@ describe('Resending a new code from ConfirmSignupCode page', () => {
       expect(screen.getByText('Unexpected error')).toBeInTheDocument();
     });
   });
+
+  it('shows countdown timer after successful resend', async () => {
+    jest.useFakeTimers();
+    session = mockSession(true, false);
+
+    renderWithSession({
+      session,
+      integration: mockWebIntegration,
+    });
+
+    const resendButton = screen.getByRole('button', { name: 'Email new code.' });
+    fireEvent.click(resendButton);
+
+    await waitFor(() => {
+      expect(session.sendVerificationCode).toHaveBeenCalled();
+    });
+
+    // Countdown button should appear and be disabled
+    const resendButtonAfter = await waitFor(() => {
+      const button = screen.getByRole('button', { name: /Email new code in/ });
+      expect(button).toBeDisabled();
+      return button;
+    });
+
+    expect(resendButtonAfter.textContent).toMatch(/\d+/);
+
+    jest.useRealTimers();
+  });
 });

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

@@ -42,6 +42,8 @@ import { getSyncNavigate } from '../../Signin/utils';
 
 export const viewName = 'confirm-signup-code';
 
+const RESEND_CODE_COUNTDOWN = 30;
+
 const ConfirmSignupCode = ({
   email,
   sessionToken,
@@ -67,6 +69,8 @@ const ConfirmSignupCode = ({
   const [resendStatus, setResendStatus] = useState<ResendStatus>(
     ResendStatus.none
   );
+  const [resendCodeLoading, setResendCodeLoading] = useState<boolean>(false);
+  const [resendCountdown, setResendCountdown] = useState<number>(0);
 
   const navigateWithQuery = useNavigateWithQuery();
   const webRedirectCheck = useWebRedirect(integration.data.redirectTo);
@@ -87,6 +91,17 @@ const ConfirmSignupCode = ({
     }
   }, [reason]);
 
+  // Countdown timer for resend code
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setTimeout(() => {
+        setResendCountdown(resendCountdown - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [resendCountdown]);
+
   const [localizedErrorBannerHeading, setLocalizedErrorBannerHeading] =
     useState('');
 
@@ -117,8 +132,10 @@ const ConfirmSignupCode = ({
   }
 
   async function handleResendCode() {
+    setResendCodeLoading(true);
     try {
       await session.sendVerificationCode();
+
       // if resending a code is successful, clear any banner already present on screen
       setLocalizedErrorBannerHeading('');
       setResendStatus(ResendStatus.sent);
@@ -127,6 +144,9 @@ const ConfirmSignupCode = ({
       setLocalizedErrorBannerHeading(
         getLocalizedErrorMessage(ftlMsgResolver, error)
       );
+    } finally {
+      setResendCodeLoading(false);
+      setResendCountdown(RESEND_CODE_COUNTDOWN);
     }
   }
 
@@ -391,20 +411,34 @@ const ConfirmSignupCode = ({
       />
 
       <div className="animate-delayed-fade-in opacity-0 text-grey-500 text-sm inline-flex gap-1">
-        <>
-          <FtlMsg id="confirm-signup-code-code-expired">
-            <p>Code expired?</p>
+        <FtlMsg id="confirm-signup-code-code-expired">
+          <p>Code expired?</p>
+        </FtlMsg>
+        {resendCountdown > 0 ? (
+          <FtlMsg
+            id="confirm-signup-code-resend-code-countdown"
+            vars={{ seconds: resendCountdown }}
+          >
+            <button
+              id="resend"
+              className="link-blue cursor-not-allowed opacity-50"
+              disabled
+            >
+              Email new code in {resendCountdown} seconds
+            </button>
           </FtlMsg>
+        ) : (
           <FtlMsg id="confirm-signup-code-resend-code-link">
             <button
               id="resend"
               className="link-blue"
               onClick={handleResendCode}
+              disabled={resendCodeLoading}
             >
               Email new code.
             </button>
           </FtlMsg>
-        </>
+        )}
       </div>
     </AppLayout>
   );