feat : logout popup

wip : Resend button and timer

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 (
-        <Grid gutter="md" style={{padding:'5px'}}>
+        <Grid gutter="md" style={{ padding: '5px' }}>
             <Grid.Col span={4}>
                 <TextInput
                     label="IFSC Code"
@@ -398,9 +452,26 @@ export default function AddBeneficiaryOthers() {
                             value={otp}
                             onChange={(e) => setOtp(e.currentTarget.value)}
                             maxLength={6}
-                            disabled={otpVerified} //Disable after verified
+                            disabled={otpVerified}
                             withAsterisk
+                             style={{ flex: 1 }}
                         />
+
+                        {!otpVerified && (
+                            timerActive ? (
+                                <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                    Resend OTP will be enabled in{" "}
+                                    {String(Math.floor(countdown / 60)).padStart(2, "0")}:
+                                    {String(countdown % 60).padStart(2, "0")}
+                                </Text>
+                            ) : (
+                                <IconRefresh
+                                    size={22}
+                                    style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
+                                    onClick={handleGenerateOtp}
+                                />
+                            )
+                        )}
                     </Grid.Col >
                     <Grid.Col >
                         {!otpVerified ? (