add: locale and i18n

src/features/auth/components/StepEnterOtp.tsx

@@ -4,6 +4,7 @@ import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/en
 import clsx from 'clsx';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
@@ -17,6 +18,7 @@ type Props = {
 
 function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
     const [error, setError] = useState('');
+    const { t } = useTranslation();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -25,11 +27,11 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
     useEffect(() => {
         let error = '';
         if (!/^\d{6}$/.test(value)) {
-            error = 'عبارت کامل نیست';
+            error = t('Errors.OTPFormat');
         }
 
         setError(error);
-    }, [value])
+    }, [t, value])
 
     return (
         <>
@@ -43,10 +45,10 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                 priority
             />
             <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
-                <div className='pt-4' dir='rtl'>
+                <div className='pt-4'>
                     {/* // TODO: add persian digits font */}
-                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
-                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
+                    <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
+                    <p className='mt-3 text-[13px]'>{t('OTP.Description').replace('{phoneNumber}', phoneNumber)}</p>
                 </div>
                 <div className='w-full flex justify-center items-center'>
                     <OTPInputField
@@ -64,11 +66,11 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                 </div>
 
                 <div className='text-center w-full pt-6 text-xs'>
-                    <div dir='rtl'>
+                    <div>
                         {timerRunning ?
-                            <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
+                            <div>{t('OTP.TimerRunning').replace('{seconds}', String(secondsLeft))}</div> :
                             <div>
-                                کد را دریافت نکردید؟
+                                {t('OTP.TimerOut')}
                                 <button
                                     type='button'
                                     disabled={pending}
@@ -77,13 +79,13 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                                         'px-1 transition-colors duration-200',
                                         !pending ? 'text-primary cursor-pointer' : 'text-neutral-200 cursor-auto'
                                     )} onClick={onClick}>
-                                    دوباره امتحان کنید
+                                        {t('OTP.TimerReset')}
                                 </button>
                             </div>
                         }
                     </div>
                 </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('OTP.ButtonSubmit')}</Button>
             </div>
         </>
     )