diff --git a/src/features/auth/components/StepEnterOtp.tsx b/src/features/auth/components/StepEnterOtp.tsx index d8ad5af..fb70682 100644 --- a/src/features/auth/components/StepEnterOtp.tsx +++ b/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, '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 ({
{timerRunning ? (
- {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft) })} + {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft, t) })}
) : (
diff --git a/src/features/auth/components/StepOtp.tsx b/src/features/auth/components/StepOtp.tsx index 7f5f592..93e2442 100644 --- a/src/features/auth/components/StepOtp.tsx +++ b/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
{timerRunning ? (
- {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft) })} + {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft, t) })}
) : (
diff --git a/src/hooks/useCountdown.ts b/src/hooks/useCountdown.ts index bb91e5d..9ac27fb 100644 --- a/src/hooks/useCountdown.ts +++ b/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); diff --git a/src/locales/en/auth.json b/src/locales/en/auth.json index bb4ee26..2b77fba 100644 --- a/src/locales/en/auth.json +++ b/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" diff --git a/src/locales/fa/auth.json b/src/locales/fa/auth.json index f3ee411..fece208 100644 --- a/src/locales/fa/auth.json +++ b/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": "بعدی"