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
This commit is contained in:
@@ -0,0 +1,383 @@
|
||||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user