feat: add timer to resend passcode action

web-marketplace/src/components/organisms/LoginButton/LoginButton.constants.ts

@@ -22,3 +22,4 @@ export const DEFAULT_VALIDATE_ERROR =
   'Incorrect code! Double-check the code and try again.';
 export const CODE_EXPIRED_ERROR = 'This code has expired!';
 export const DEFAULT_RESEND_ERROR = 'Failed to resend passcode';
+export const RESEND_TIMER = 60;

web-marketplace/src/components/organisms/LoginButton/LoginButton.tsx

@@ -22,13 +22,13 @@ import { useLoginData } from './hooks/useLoginData';
 import {
   EMAIL_CONFIRMATION_CANCEL,
   EMAIL_CONFIRMATION_SUBMIT,
-  RESEND_BUTTON_TEXT,
-  RESEND_TEXT,
   socialProviders,
 } from './LoginButton.constants';
 import { MobileSigningModal } from './LoginButton.SigningModal';
 import { useLoginButtonStyles } from './LoginButton.styles';
 import { ButtonSize } from './LoginButton.types';
+import { getResendCodeButtonLink } from './utils/getResendCodeButtonLink';
+import { getResendCodeLabel } from './utils/getResendCodeLabel';
 
 type Props = {
   size?: ButtonSize;
@@ -41,6 +41,7 @@ const LoginButton = ({ size = 'small' }: Props) => {
     isConfirmationModalOpen,
     email,
     emailModalError,
+    resendTimeLeft,
     onConfirmationModalClose,
     onMailCodeChange,
     onResendPasscode,
@@ -115,11 +116,11 @@ const LoginButton = ({ size = 'small' }: Props) => {
         connecting={connecting}
       />
       <EmailConfirmationModal
-        resendText={RESEND_TEXT}
-        resendButtonLink={{
-          text: RESEND_BUTTON_TEXT,
-          onClick: onResendPasscode,
-        }}
+        resendText={getResendCodeLabel({ resendTimeLeft })}
+        resendButtonLink={getResendCodeButtonLink({
+          resendTimeLeft,
+          onResendPasscode,
+        })}
         cancelButton={{
           text: EMAIL_CONFIRMATION_CANCEL,
           onClick: onConfirmationModalClose,

web-marketplace/src/components/organisms/LoginButton/hooks/useEmailConfirmationData.tsx

@@ -12,9 +12,11 @@ import {
   DEFAULT_VALIDATE_ERROR,
   EMAIL_CONFIRMATION_SUCCES,
   RESEND_SUCCES,
+  RESEND_TIMER,
 } from '../LoginButton.constants';
 import { getEmailModalError } from '../utils/getEmailModalError';
 import { onPostData } from './onLoginPostData';
+import { useTimer } from './useTimer';
 
 export const useEmailConfirmationData = () => {
   const reactQueryClient = useQueryClient();
@@ -23,10 +25,14 @@ export const useEmailConfirmationData = () => {
   const [email, setEmail] = useState('');
   const setBannerText = useSetAtom(bannerTextAtom);
   const { data: token } = useQuery(getCsrfTokenQuery({}));
+  const { timeLeft: resendTimeLeft, startTimer } = useTimer({
+    duration: RESEND_TIMER,
+  });
 
   const onConfirmationModalClose = () => setIsConfirmationModalOpen(false);
   const onResendPasscode = async () => {
-    if (token) {
+    if (token && resendTimeLeft === null) {
+      startTimer();
       await onPostData({
         url: `${apiUri}/marketplace/v1/auth/passcode`,
         data: {
@@ -71,6 +77,7 @@ export const useEmailConfirmationData = () => {
     setEmail,
     emailModalError,
     isConfirmationModalOpen,
+    resendTimeLeft,
     onConfirmationModalClose,
     onMailCodeChange,
     onResendPasscode,

web-marketplace/src/components/organisms/LoginButton/hooks/useTimer.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useState } from 'react';
+
+type Props = {
+  duration: number;
+};
+
+export const useTimer = ({ duration }: Props) => {
+  const [timeLeft, setTimeLeft] = useState(duration);
+  const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);
+
+  const startTimer = () => {
+    if (timerId !== null) return;
+
+    const id = setInterval(() => {
+      setTimeLeft(time => time - 1);
+    }, 1000);
+
+    setTimerId(id);
+  };
+
+  const stopTimer = useCallback(() => {
+    if (timerId !== null) {
+      clearInterval(timerId);
+      setTimerId(null);
+    }
+  }, [timerId]);
+
+  const resetTimer = useCallback(() => {
+    stopTimer();
+    setTimeLeft(duration);
+  }, [duration, stopTimer]);
+
+  useEffect(() => {
+    return () => {
+      if (timerId !== null) {
+        clearInterval(timerId);
+      }
+    };
+  }, [timerId]);
+
+  useEffect(() => {
+    if (timeLeft <= 0) {
+      resetTimer();
+    }
+  }, [resetTimer, timeLeft]);
+
+  return {
+    timeLeft: timerId !== null ? timeLeft : null,
+    resetTimer,
+    startTimer,
+    stopTimer,
+  };
+};

web-marketplace/src/components/organisms/LoginButton/utils/getResendCodeButtonLink.tsx

@@ -0,0 +1,18 @@
+import { RESEND_BUTTON_TEXT } from '../LoginButton.constants';
+
+type Params = {
+  resendTimeLeft: number | null;
+  onResendPasscode: () => Promise<void>;
+};
+
+export const getResendCodeButtonLink = ({
+  resendTimeLeft,
+  onResendPasscode,
+}: Params) => {
+  return resendTimeLeft
+    ? undefined
+    : {
+        text: RESEND_BUTTON_TEXT,
+        onClick: onResendPasscode,
+      };
+};

web-marketplace/src/components/organisms/LoginButton/utils/getResendCodeLabel.tsx

@@ -0,0 +1,11 @@
+import { RESEND_TEXT } from '../LoginButton.constants';
+
+type Params = {
+  resendTimeLeft: number | null;
+};
+
+export const getResendCodeLabel = ({ resendTimeLeft }: Params) => {
+  return resendTimeLeft === null
+    ? RESEND_TEXT
+    : `Resend after ${resendTimeLeft} seconds`;
+};