diff --git a/apps/web/components/public/payments/login-form.tsx b/apps/web/components/public/payments/login-form.tsx index ff800b2c4..c7c491ad3 100644 --- a/apps/web/components/public/payments/login-form.tsx +++ b/apps/web/components/public/payments/login-form.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useContext, useEffect, useState } from "react"; +import { useCallback, useContext, useEffect, useRef, useState } from "react"; import { useForm, FormProvider } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; @@ -22,6 +22,8 @@ import { useToast } from "@courselit/components-library"; import { LOGIN_CODE_INTIMATION_MESSAGE, LOGIN_FORM_DISCLAIMER, + LOGIN_NO_CODE, + BTN_LOGIN_NO_CODE, TOAST_TITLE_ERROR, } from "@ui-config/strings"; import { getUserProfile } from "@/app/(with-contexts)/helpers"; @@ -57,6 +59,10 @@ export function LoginForm({ const { profile, setProfile } = useContext(ProfileContext); const [loginStep, setLoginStep] = useState("email"); const [loading, setLoading] = useState(false); + const [resendCooldown, setResendCooldown] = useState(0); + const cooldownTimerRef = useRef | null>( + null, + ); const { toast } = useToast(); const { theme } = useContext(ThemeContext); const siteinfo = useContext(SiteInfoContext); @@ -134,6 +140,28 @@ export function LoginForm({ } }, [profile]); + useEffect(() => { + return () => { + if (cooldownTimerRef.current) { + clearInterval(cooldownTimerRef.current); + } + }; + }, []); + + const startResendCooldown = useCallback(() => { + setResendCooldown(30); + cooldownTimerRef.current = setInterval(() => { + setResendCooldown((prev) => { + if (prev <= 1) { + clearInterval(cooldownTimerRef.current!); + cooldownTimerRef.current = null; + return 0; + } + return prev - 1; + }); + }, 1000); + }, []); + const form = useForm>({ resolver: zodResolver(loginFormSchema as any), defaultValues: { @@ -175,12 +203,18 @@ export function LoginForm({ }); } else { setLoginStep("otp"); + startResendCooldown(); } } finally { setLoading(false); } }; + const handleResendOTP = async () => { + const emailValue = form.getValues("email"); + await requestCode(emailValue); + }; + const handleVerifyOTP = async () => { const email = form.getValues("email"); const code = form.getValues("otp"); @@ -310,6 +344,26 @@ export function LoginForm({ > Verify OTP +
+ + {LOGIN_NO_CODE} + + +
)}