diff --git a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx b/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx index e4eef5e..0463ee3 100644 --- a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx +++ b/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx @@ -4,6 +4,7 @@ import { TextInput, Button, Grid, Text, PasswordInput, Loader, Group, Select, St import { notifications } from '@mantine/notifications'; import { useRouter } from "next/navigation"; import { IconRefresh } from '@tabler/icons-react'; +import { sendOtp, verifyOtp } from '@/app/_util/otp'; export default function AddBeneficiaryOthers() { const router = useRouter(); @@ -18,7 +19,6 @@ export default function AddBeneficiaryOthers() { const [nickName, setNickName] = useState(''); const [beneficiaryName, setBeneficiaryName] = useState(null); const [otp, setOtp] = useState(''); - const [generatedOtp, setGeneratedOtp] = useState(''); const [otpSent, setOtpSent] = useState(false); const [otpVerified, setOtpVerified] = useState(false); const [countdown, setCountdown] = useState(180); @@ -27,19 +27,39 @@ export default function AddBeneficiaryOthers() { const [isVisibilityLocked, setIsVisibilityLocked] = useState(false); const [showPayeeAcc, setShowPayeeAcc] = useState(true); const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); }; - const [generateOtp, setGenerateOtp] = useState(""); - const handleGenerateOtp = async () => { - const value = "123456"; // Or call your API to generate OTP - setGeneratedOtp(value); - - // start countdown at 180 seconds (3 minutes) - setCountdown(180); - setTimerActive(true); - - return value; - }; + async function handleSendOtp() { + const mobileNumber = localStorage.getItem('remitter_mobile_no'); + if (!mobileNumber) { + notifications.show({ + title: 'Error', + message: 'Mobile number not found.Contact to administrator', + color: 'red', + }); + return; + } + try { + await sendOtp({ type: 'BENEFICIARY_ADD', beneficiary: beneficiaryName || undefined, ifsc: ifsccode }); + setCountdown(180); + setTimerActive(true); + } catch (err: any) { + console.error('Send OTP failed', err); + notifications.show({ + title: 'Error', + message: err.message || 'Send OTP failed.Please try again later.', + color: 'red', + }); + } + } + async function handleVerifyOtp() { + try { + await verifyOtp(otp); + return true; + } catch { + return false; + } + } // Countdown effect useEffect(() => { @@ -113,29 +133,6 @@ export default function AddBeneficiaryOthers() { } }, [ifsccode]); - - // useEffect(() => { - // let interval: number | undefined; - // if (timerActive && countdown > 0) { - // interval = window.setInterval(() => { - // setCountdown((prev) => prev - 1); - // }, 1000); - // } - // if (countdown === 0) { - // if (interval) clearInterval(interval); - // setTimerActive(false); - // } - // return () => { - // if (interval) clearInterval(interval); - // }; - // }, [timerActive, countdown]); - - // const handleGenerateOtp = async () => { - // const value = "123456"; // Or generate a random OTP - // setGeneratedOtp(value); - // return value; - // }; - const validateAndSendOtp = async () => { if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo || !beneficiaryType) { notifications.show({ @@ -202,8 +199,7 @@ export default function AddBeneficiaryOthers() { setValidationStatus("success"); setIsVisibilityLocked(true); setOtpSent(true); - await handleGenerateOtp(); - + const otp = await handleSendOtp(); notifications.show({ withBorder: true, color: "green", @@ -227,7 +223,7 @@ export default function AddBeneficiaryOthers() { } }; - const verifyOtp = () => { + const verify_otp = async () => { if (!otp) { notifications.show({ withBorder: true, @@ -239,24 +235,21 @@ export default function AddBeneficiaryOthers() { return; } - if (otp === generatedOtp) { - setOtpVerified(true); + const verified = await handleVerifyOtp(); + if (!verified) { notifications.show({ - withBorder: true, - color: "green", - title: "OTP Verified", - message: "OTP validated successfully.", - autoClose: 5000, - }); - } else { - notifications.show({ - withBorder: true, + title: "Invalid OTP", + message: "The OTP entered does not match", color: "red", - title: "OTP Error", - message: "OTP does not match.", - autoClose: 5000, }); + return; } + setOtpVerified(true); + notifications.show({ + title: "OTP Verified", + message: "OTP successfully verified.", + color: "green", + }); }; const AddBen = async () => { try { @@ -468,14 +461,14 @@ export default function AddBeneficiaryOthers() { ) )} {!otpVerified ? ( - + ) : (