feat: Resend button and timer

src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Center, Divider, Group, List, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
+import { Button, Center, Divider, Group, List, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import { generateOTP } from '@/app/OTPGenerator';
-import { IconAlertTriangle } from "@tabler/icons-react";
+import { IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
 import Image from "next/image";
 import img from '@/app/image/logo1.jpg'
 
@@ -36,12 +36,16 @@ export default function SendToBeneficiaryOthers() {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [showOtpField, setShowOtpField] = useState(false);
     const [otp, setOtp] = useState("");
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
     const [generateOtp, setGenerateOtp] = useState("");
 
     async function handleGenerateOtp() {
         // const value = await generateOTP(6);
         const value = "123456";
         setGenerateOtp(value);
+        setCountdown(180);
+        setTimerActive(true);
         return value;
     }
     const getAmountError = () => {
@@ -164,6 +168,22 @@ export default function SendToBeneficiaryOthers() {
         }
     }, [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]);
+
     async function handleProceed() {
         if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryIFSC || !paymentMode || !amount || !remarks) {
             notifications.show({
@@ -581,15 +601,37 @@ export default function SendToBeneficiaryOthers() {
                         </Group>
                         <Group grow>
                             {showOtpField && (
-                                <TextInput
-                                    label="OTP"
-                                    placeholder="Enter OTP"
-                                    type="otp"
-                                    value={otp}
-                                    onChange={(e) => setOtp(e.currentTarget.value)}
-                                    withAsterisk
-                                    disabled={showTxnPassword}
-                                />
+                                <>
+                                    <Group gap="xs" align="flex-end">
+                                        <PasswordInput
+                                            label="OTP"
+                                            placeholder="Enter OTP"
+                                            type="otp"
+                                            value={otp}
+                                            maxLength={6}
+                                            onChange={(e) => setOtp(e.currentTarget.value)}
+                                            withAsterisk
+                                            disabled={showTxnPassword}
+                                            style={{ flex: 1 }}
+                                        />
+                                        {!showTxnPassword && (
+                                            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}
+                                                />
+                                            )
+                                        )}
+
+                                    </Group>
+                                </>
                             )}
                             {showTxnPassword && (
                                 <TextInput