diff --git a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx b/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx index a8e6aaa..4c0f46a 100644 --- a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx +++ b/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx @@ -1,8 +1,9 @@ "use client"; import React, { useEffect, useState } from 'react'; -import { TextInput, Button, Grid, Text, PasswordInput,Loader,Group, Select, Stack } from '@mantine/core'; +import { TextInput, Button, Grid, Text, PasswordInput, Loader, Group, Select, Stack } from '@mantine/core'; import { notifications } from '@mantine/notifications'; import { useRouter } from "next/navigation"; +import { IconRefresh } from '@tabler/icons-react'; export default function AddBeneficiaryOthers() { const router = useRouter(); @@ -20,10 +21,46 @@ export default function AddBeneficiaryOthers() { const [generatedOtp, setGeneratedOtp] = useState(''); const [otpSent, setOtpSent] = useState(false); const [otpVerified, setOtpVerified] = useState(false); + const [countdown, setCountdown] = useState(180); + const [timerActive, setTimerActive] = useState(false); const [validationStatus, setValidationStatus] = useState<'success' | 'error' | null>(null); 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; + }; + + + // Countdown effect + 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]); + + useEffect(() => { const token = localStorage.getItem("access_token"); @@ -76,11 +113,28 @@ export default function AddBeneficiaryOthers() { } }, [ifsccode]); - const handleGenerateOtp = async () => { - const value = "123456"; // Or generate a random OTP - setGeneratedOtp(value); - return value; - }; + + // 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) { @@ -233,7 +287,7 @@ export default function AddBeneficiaryOthers() { }); return; } - else{ + else { notifications.show({ withBorder: true, color: "Red", @@ -251,7 +305,7 @@ export default function AddBeneficiaryOthers() { color: "red", }); } - finally{ + finally { setBankName(''); setBranchName(''); setIfsccode(''); @@ -267,7 +321,7 @@ export default function AddBeneficiaryOthers() { if (!authorized) return null; return ( - + setOtp(e.currentTarget.value)} maxLength={6} - disabled={otpVerified} //Disable after verified + disabled={otpVerified} withAsterisk + style={{ flex: 1 }} /> + + {!otpVerified && ( + timerActive ? ( + + Resend OTP will be enabled in{" "} + {String(Math.floor(countdown / 60)).padStart(2, "0")}: + {String(countdown % 60).padStart(2, "0")} + + ) : ( + + ) + )} {!otpVerified ? ( diff --git a/src/app/(main)/funds_transfer/page.tsx b/src/app/(main)/funds_transfer/page.tsx index f23ff1e..7dbb20d 100644 --- a/src/app/(main)/funds_transfer/page.tsx +++ b/src/app/(main)/funds_transfer/page.tsx @@ -37,7 +37,7 @@ export default function QuickPay() { const [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null); const [beneficiaryName, setBeneficiaryName] = useState(null); const [showOtpField, setShowOtpField] = useState(false); - const [countdown, setCountdown] = useState(60); + const [countdown, setCountdown] = useState(180); const [timerActive, setTimerActive] = useState(false); const [otp, setOtp] = useState(""); const [generateOtp, setGenerateOtp] = useState(""); @@ -46,7 +46,7 @@ export default function QuickPay() { // const value = await generateOTP(6); const value = "123456"; setGenerateOtp(value); - setCountdown(60); + setCountdown(180); setTimerActive(true); return value; } @@ -457,32 +457,35 @@ export default function QuickPay() { {showOtpField && ( <> - setOtp(e.currentTarget.value)} - withAsterisk - disabled={showTxnPassword} - /> - {!showTxnPassword && ( - timerActive ? ( - - Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min - - ) : ( - - ) - )} + + setOtp(e.currentTarget.value)} + withAsterisk + disabled={showTxnPassword} + style={{ flex: 1 }} + /> + {!showTxnPassword && ( + timerActive ? ( + + Resend OTP will be enabled in{" "} + {String(Math.floor(countdown / 60)).padStart(2, "0")}: + {String(countdown % 60).padStart(2, "0")} + + ) : ( + + ) + )} + + )} {showTxnPassword && ( diff --git a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx index 64c318e..2d6ec6b 100644 --- a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx +++ b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx @@ -8,6 +8,7 @@ import { generateOTP } from '@/app/OTPGenerator'; import SendToBeneficiaryOthers from "./sendBeneficiaryOthers"; import Image from "next/image"; import img from '@/app/image/logo1.jpg'; +import { IconRefresh } from "@tabler/icons-react"; interface accountData { stAccountNo: string; @@ -37,10 +38,15 @@ export default function SendToBeneficiaryOwn() { const [otp, setOtp] = useState(""); const [generateOtp, setGenerateOtp] = useState(""); + const [countdown, setCountdown] = useState(180); + const [timerActive, setTimerActive] = useState(false); + async function handleGenerateOtp() { // const value = await generateOTP(6); const value = "123456"; setGenerateOtp(value); + setCountdown(180); + setTimerActive(true); return value; } const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo); @@ -122,6 +128,22 @@ export default function SendToBeneficiaryOwn() { } }, [authorized]); + 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 benAccountOption = beneficiaryData .filter((ben) => bankType === "own" ? ben.ifscCode?.startsWith("KACE") : true @@ -413,6 +435,7 @@ export default function SendToBeneficiaryOwn() { {showOtpField && ( + )} + {!showTxnPassword && ( + ( + timerActive ? ( + + Resend OTP will be enabled in{" "} + {String(Math.floor(countdown / 60)).padStart(2, "0")}: + {String(countdown % 60).padStart(2, "0")} + + ) : ( + + ) + ) + )} {showTxnPassword && ( (null); + + const [opened, { open, close }] = useDisclosure(false); + function doLogout() { localStorage.removeItem("access_token"); sessionStorage.removeItem("access_token"); @@ -233,9 +240,45 @@ export default function RootLayout({ children }: { children: React.ReactNode }) ); })} - + */} + + + + + + + + Are you sure you want to logout? + + + + + + + + + + + + @@ -271,7 +314,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - + ); } }