add minue and second in text useCountDown

src/features/auth/components/StepEnterOtp.tsx

@@ -7,6 +7,7 @@ import {
   AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS
 } from '@/enums'
 import clsx from 'clsx'
+import { formatCountdown } from '@/hooks/useCountdown'
 import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -22,15 +23,6 @@ type Props = {
   pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-const formatCountdown = (seconds: number) => {
-  const mins = Math.floor(seconds / 60)
-  const secs = seconds % 60
-  if (mins > 0) {
-    return `${mins}:${String(secs).padStart(2, '0')}`
-  }
-  return String(seconds)
-}
-
 function StepEnterOtp ({
   onChange,
   onClick,
@@ -96,7 +88,7 @@ function StepEnterOtp ({
           <div>
             {timerRunning ? (
               <div>
-                {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft) })}
+                {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft, t) })}
               </div>
             ) : (
               <div>

src/features/auth/components/StepOtp.tsx

@@ -14,6 +14,7 @@ import { setRefreshToken, setToken } from '@/lib/api/func'
 import { useSearchParams } from 'next/navigation'
 import { AUTH_PAGE_ELEMENT } from '@/enums'
 import clsx from 'clsx'
+import { formatCountdown } from '@/hooks/useCountdown'
 
 type Props = {
     phone: string
@@ -24,15 +25,6 @@ type Props = {
     isResendPending?: boolean
 }
 
-const formatCountdown = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (mins > 0) {
-        return `${mins}:${String(secs).padStart(2, '0')}`
-    }
-    return String(seconds)
-}
-
 const StepOtp = ({ phone, slug, timerRunning, secondsLeft, onResend, isResendPending }: Props) => {
     const searchParams = useSearchParams()
     const redirectUrl = searchParams.get('redirect')
@@ -126,7 +118,7 @@ const StepOtp = ({ phone, slug, timerRunning, secondsLeft, onResend, isResendPen
             <div className='text-center w-full pt-6 text-xs'>
                 {timerRunning ? (
                     <div>
-                        {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft) })}
+                        {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft, t) })}
                     </div>
                 ) : (
                     <div>

src/hooks/useCountdown.ts

@@ -1,5 +1,20 @@
+import { ef } from '@/lib/helpers/utfNumbers';
+import type { TFunction } from 'i18next';
 import { useEffect, useRef, useState } from 'react';
 
+export const formatCountdown = (seconds: number, t: TFunction) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+
+  if (mins > 0 && secs > 0) {
+    return t('OTP.Countdown.MinuteAndSecond', { mins: ef(mins), secs: ef(secs) });
+  }
+  if (mins > 0) {
+    return t('OTP.Countdown.Minute', { count: ef(mins) });
+  }
+  return t('OTP.Countdown.Second', { count: ef(secs) });
+};
+
 export const useCountdown = (shouldStart: boolean, duration: number = 30, delay: number = 1000) => {
   const [timerRunning, setTimerRunning] = useState(false);
   const [secondsLeft, setSecondsLeft] = useState(duration);

src/locales/en/auth.json

@@ -10,6 +10,11 @@
         "Description": "Please enter the 6-digit code sent to the number {{phoneNumber}}.",
         "Label": "",
         "TimerRunning": "Resend available in {{time}}",
+        "Countdown": {
+            "Minute": "{{count}} minute",
+            "Second": "{{count}} second",
+            "MinuteAndSecond": "{{mins}} minute and {{secs}} second"
+        },
         "TimerOut": "Didn’t receive the code?",
         "TimerReset": "Resend",
         "ButtonSubmit": "Next"

src/locales/fa/auth.json

@@ -10,6 +10,11 @@
     "Description": "کد ۵ رقمی ارسال شده به شماره {{phoneNumber}} را وارد نمایید.",
     "Label": "",
     "TimerRunning": "ارسال مجدد تا {{time}} دیگر",
+    "Countdown": {
+      "Minute": "{{count}} دقیقه",
+      "Second": "{{count}} ثانیه",
+      "MinuteAndSecond": "{{mins}} دقیقه و {{secs}} ثانیه"
+    },
     "TimerOut": "کد را دریافت نکردید؟",
     "TimerReset": "ارسال مجدد",
     "ButtonSubmit": "بعدی"