resend

src/features/auth/components/StepEnterNumber.tsx

@@ -15,6 +15,7 @@ import { useParams } from 'next/navigation'
 import { toast } from '@/components/Toast'
 import StepOtp from './StepOtp'
 import { extractErrorMessage } from '@/lib/func'
+import { useCountdown } from '@/hooks/useCountdown'
 
 type StepEnterNumberProps = {
   pending?: boolean
@@ -29,6 +30,10 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
   const { name } = useParams()
   const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER)
   const { mutate: mutateOtpRequest, isPending } = useOtpRequest()
+  const { timerRunning, secondsLeft, restart } = useCountdown(
+    step === AUTH_STEP.ENTER_OTP,
+    120
+  )
 
 
   const formik = useFormik<LoginOTPRequestType>({
@@ -56,6 +61,22 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
     }
   })
 
+  const handleResendOtp = () => {
+    if (timerRunning || !name) return
+
+    mutateOtpRequest(
+      { phone: formik.values.phone, slug: name as string },
+      {
+        onSuccess: () => {
+          toast(t('otp_sent'), 'success')
+          restart()
+        },
+        onError: (error) => {
+          toast(extractErrorMessage(error), 'error')
+        },
+      }
+    )
+  }
 
   return (
     <>
@@ -100,7 +121,14 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
             />
           )}
           {step === AUTH_STEP.ENTER_OTP && (
-            <StepOtp phone={formik.values.phone} slug={formik.values.slug} />
+            <StepOtp
+              phone={formik.values.phone}
+              slug={(name as string) || formik.values.slug}
+              timerRunning={timerRunning}
+              secondsLeft={secondsLeft}
+              onResend={handleResendOtp}
+              isResendPending={isPending}
+            />
           )}
         </div>
         {