Files
IB/src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
tomosa.sarkar e621f10824 feat: Implemented page for quick pay and send to beneficiary feature for own and outside bank
ci: Modify the design of login page
ci : modify the logic of home page, If no account is present then statement button change to apply now
2025-07-21 17:57:16 +05:30

384 lines
15 KiB
TypeScript

"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<boolean | null>(null);
const [accountData, setAccountData] = useState<accountData[]>([]);
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
const [beneficiaryIFSC, setBeneficiaryIFSC] = useState<string | null>(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 (
<>
<Modal
opened={showConfirmModel}
onClose={() => setConfirmModel(false)}
// title="Confirm Transaction"
centered
>
<Stack>
<Title order={4}>Confirm Transaction</Title>
<Text><strong>Debit Account:</strong> {selectedAccNo}</Text>
<Text><strong>Beneficiary Account:</strong> {beneficiaryAcc}</Text>
<Text><strong>Beneficiary Name:</strong> {beneficiaryName}</Text>
<Text><strong>Payment Type:</strong> {paymentMode}</Text>
<Text><strong>Amount:</strong> {amount}</Text>
<Text><strong>Remarks:</strong> {remarks}</Text>
</Stack>
<Group justify="flex-end" mt="md">
<Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
<Button
color="blue"
onClick={async () => {
setConfirmModel(false);
const otp = await handleGenerateOtp();
setShowOtpField(true);
notifications.show({
title: "OTP Sent",
message: `Check your registered device for OTP`,
color: "green",
autoClose: 5000,
});
}}
>
Confirm
</Button>
</Group>
</Modal>
{/* main content */}
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
<Stack gap="xs">
<Group grow>
<Select
label="Select Debit Account Number"
placeholder="Choose account number"
data={accountOptions}
value={selectedAccNo}
onChange={setSelectedAccNo}
withAsterisk
readOnly={isVisibilityLocked}
/>
<Select
label="Beneficiary Account No"
placeholder="Choose beneficiary account number"
data={benAccountOption}
value={beneficiaryAcc}
onChange={handleBeneficiary}
withAsterisk
readOnly={isVisibilityLocked}
nothingFoundMessage='No account found'
/>
<TextInput
label="Beneficiary Name"
value={beneficiaryName ? beneficiaryName : ""}
disabled
readOnly
withAsterisk
/>
</Group>
<Group justify="space-between" >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
</Text>
</Group>
<Group grow>
<TextInput
label="Beneficiary IFSC Code"
value={beneficiaryIFSC ? beneficiaryIFSC : ""}
disabled
readOnly
withAsterisk
/>
<Radio.Group
name="payment-mode"
label="Select Payment Method"
value={paymentMode}
onChange={setPaymentMode}
withAsterisk
readOnly={isVisibilityLocked}
>
<Group>
<Radio value="IMPS" label="IMPS" />
<Radio value="RTGS" label="RTGS" />
<Radio value="NEFT" label="NEFT" />
</Group>
</Radio.Group>
<TextInput
label="Amount"
type="number"
value={amount}
onChange={(e) => setAmount(e.currentTarget.value)}
error={
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false}
withAsterisk
readOnly={showOtpField}
/>
<TextInput
label="Remarks"
placeholder="Enter remarks"
value={remarks}
onChange={(e) => setRemarks(e.currentTarget.value)}
withAsterisk
readOnly={showOtpField}
/>
</Group>
<Group grow>
{showOtpField && (
<TextInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={showTxnPassword}
/>
)}
{showTxnPassword && (
<TextInput
label="Transaction Password"
placeholder="Enter transaction password"
type="password"
value={txnPassword}
onChange={(e) => setTxnPassword(e.currentTarget.value)}
withAsterisk
/>
)}
</Group>
<Group justify="flex-start">
<Button
variant="filled"
color="blue"
onClick={handleProceed}
loading={isSubmitting}
>
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
</Button>
</Group>
</Stack>
</div>
</>
);
}