"use client"; import React, { useEffect, useRef, useState } from "react"; import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useRouter } from "next/navigation"; import { generateOTP } from '@/app/OTPGenerator'; import { MockBeneficiaryData } from './page'; interface accountData { stAccountNo: string; stAccountType: string; stAvailableBalance: string; custname: string; } export default function SendToBeneficiaryOthers() { const router = useRouter(); const [authorized, setAuthorized] = useState(null); const [accountData, setAccountData] = useState([]); const [selectedAccNo, setSelectedAccNo] = useState(null); const [beneficiaryAcc, setBeneficiaryAcc] = useState(null); const [beneficiaryName, setBeneficiaryName] = useState(null); const [beneficiaryIFSC, setBeneficiaryIFSC] = useState(null); const [paymentMode, setPaymentMode] = useState('IMPS'); const [isVisibilityLocked, setIsVisibilityLocked] = useState(false); const [amount, setAmount] = useState(""); const [remarks, setRemarks] = useState(""); const [showConfirmModel, setConfirmModel] = useState(false); const [showTxnPassword, setShowTxnPassword] = useState(false); const [txnPassword, setTxnPassword] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const [showOtpField, setShowOtpField] = useState(false); const [otp, setOtp] = useState(""); const [generateOtp, setGenerateOtp] = useState(""); async function handleGenerateOtp() { // const value = await generateOTP(6); const value = "123456"; setGenerateOtp(value); return value; } const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo); const accountOptions = accountData.map((acc) => ({ value: acc.stAccountNo, label: `${acc.stAccountNo} (${acc.stAccountType})`, })); const benAccountOption = MockBeneficiaryData.filter((ben_acc) => ben_acc.stBankName !== 'Kangra Central Co-operative Bank') .map((ben_acc) => ({ value: ben_acc.stBenAccountNo, label: ben_acc.stBenAccountNo, })); const handleBeneficiary = (benAcc: string | null) => { if (benAcc) { setBeneficiaryAcc(benAcc); const selected = MockBeneficiaryData.find((item) => item.stBenAccountNo === benAcc); if (selected) setBeneficiaryName(selected.stBenName); setBeneficiaryIFSC(selected?.stIFSC ?? ''); } else { setBeneficiaryAcc(''); setBeneficiaryName(''); setBeneficiaryIFSC(''); } } const FetchAccountDetails = async () => { try { const token = localStorage.getItem("access_token"); const response = await fetch("/api/customer", { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, }); const data = await response.json(); if (response.ok && Array.isArray(data)) { const filterSAaccount = data.filter((acc) => acc.stAccountType === 'SA'); setAccountData(filterSAaccount); } } catch { notifications.show({ withBorder: true, color: "red", title: "Please try again later", message: "Unable to Fetch, Please try again later", autoClose: 5000, }); } }; useEffect(() => { const token = localStorage.getItem("access_token"); if (!token) { setAuthorized(false); router.push("/login"); } else { setAuthorized(true); } }, []); useEffect(() => { if (authorized) { FetchAccountDetails(); } }, [authorized]); async function handleProceed() { if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryIFSC || !paymentMode || !amount || !remarks) { notifications.show({ title: "Validation Error", message: `Please fill all required fields`, color: "red", }); return; } if (parseInt(amount) <= 0) { notifications.show({ title: "Invalid amount", message: "Amount Can not be less than Zero", color: "red", }); return; } if (!showOtpField && !showTxnPassword && !showConfirmModel) { setConfirmModel(true); setIsVisibilityLocked(true); return; } if (!otp) { notifications.show({ title: "Enter OTP", message: "Please enter the OTP", color: "red", }); return; } if (otp !== generateOtp) { notifications.show({ title: "Invalid OTP", message: "The OTP entered does not match", color: "red", }); return; } if (!showTxnPassword) { setShowTxnPassword(true); return; } if (!txnPassword) { notifications.show({ title: "Missing field", message: "Please Enter Transaction Password Before Proceed", color: "red", }); return; } try { setIsSubmitting(true); const token = localStorage.getItem("access_token"); // Need to change the API const res = await fetch("/api/payment/transfer", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify({ fromAccount: selectedAccNo, toAccount: beneficiaryAcc, // toAccountType: beneficiaryType, amount: amount, narration: remarks, tpassword: txnPassword, }), }); const result = await res.json(); if (res.ok) { notifications.show({ title: "Success", message: "Transaction successful", color: "green", }); setShowTxnPassword(false); setTxnPassword(""); setShowOtpField(false); setOtp(""); setBeneficiaryName(''); } else { notifications.show({ title: "Error", message: result?.error || "Transaction failed", color: "red", }); } } catch { notifications.show({ title: "Error", message: "Something went wrong", color: "red", }); } finally { setSelectedAccNo(null); setBeneficiaryAcc(null); setBeneficiaryName(''); setPaymentMode(''); setAmount(''); setRemarks(''); setIsVisibilityLocked(false); setIsSubmitting(false); setShowTxnPassword(false); setShowOtpField(false); } }; if (!authorized) return null; return ( <> setConfirmModel(false)} // title="Confirm Transaction" centered > Confirm Transaction Debit Account: {selectedAccNo} Beneficiary Account: {beneficiaryAcc} Beneficiary Name: {beneficiaryName} Payment Type: {paymentMode} Amount: ₹ {amount} Remarks: {remarks} {/* main content */}
Available Balance : {selectedAccount ? selectedAccount.stAvailableBalance : 0} setAmount(e.currentTarget.value)} error={ selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ? "Amount exceeds available balance" : false} withAsterisk readOnly={showOtpField} /> setRemarks(e.currentTarget.value)} withAsterisk readOnly={showOtpField} /> {showOtpField && ( setOtp(e.currentTarget.value)} withAsterisk disabled={showTxnPassword} /> )} {showTxnPassword && ( setTxnPassword(e.currentTarget.value)} withAsterisk /> )}
); }