import React, { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import OTPInput from "@/components/auth/OTPInput"; import { useSelector } from "react-redux"; import { useRouter } from "next/router"; import { RootState } from "@/Redux/store"; import Swal from "sweetalert2"; import toast from "react-hot-toast"; import axios from "axios"; import Head from "next/head"; const handleSignIn = (icon: any, title: any) => { const Toast = Swal.mixin({ toast: true, position: "bottom-end", showConfirmButton: false, timer: 5000, timerProgressBar: true, didOpen: (toast) => { toast.addEventListener("mouseenter", Swal.stopTimer); toast.addEventListener("mouseleave", Swal.resumeTimer); }, }); Toast.fire({ icon: icon, title: title, }); }; const VerifyMobileOtp = () => { const [resendDisabled, setResendDisabled] = useState(true); const [timer, setTimer] = useState(60); const router = useRouter(); const { number } = useSelector((state: RootState) => state.number); const handleSubmit = async () => { if (number.length === 11) { try { const data = { phoneCode: "+234", phone: number, }; const response = await axios.post( "https://api.jazzagain.com/public/index.php/api/auth/login/", data ); console.log("Response:", response); handleSignIn("success", "OTP Sent Successfully!"); if (response) router.push(`/auth/verify-mobile-otp`); // Start countdown and disable resend button setResendDisabled(true); setTimer(60); // Restart countdown from 60 seconds } catch (error: any) { handleSignIn("error", error.response?.data?.message || "An error occurred"); } } else { toast.error("Enter a valid number!"); } }; useEffect(() => { // Start the countdown timer on initial load and each time `timer` updates if (timer > 0) { const countdown = setInterval(() => setTimer((prev) => prev - 1), 1000); return () => clearInterval(countdown); } else if (timer === 0 && resendDisabled) { setResendDisabled(false); // Enable the resend button after countdown ends } }, [timer, resendDisabled]); return ( <>