468 lines
15 KiB
TypeScript
468 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { Button, Group, Modal, Paper, PasswordInput, 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 OutsideQuickPay from "./outside_quick_pay";
|
|
|
|
interface accountData {
|
|
stAccountNo: string;
|
|
stAccountType: string;
|
|
stAvailableBalance: string;
|
|
custname: string;
|
|
}
|
|
|
|
export default function QuickPay() {
|
|
const router = useRouter();
|
|
const [bankType, setBankType] = useState("own");
|
|
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
|
const [accountData, setAccountData] = useState<accountData[]>([]);
|
|
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
|
const [beneficiaryAcc, setBeneficiaryAcc] = useState("");
|
|
const [showPayeeAcc, setShowPayeeAcc] = useState(true);
|
|
const [confirmBeneficiaryAcc, setConfirmBeneficiaryAcc] = useState("");
|
|
const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
|
|
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 [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null);
|
|
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
|
|
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 getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
|
|
|
|
const accountOptions = accountData.map((acc) => ({
|
|
value: acc.stAccountNo,
|
|
label: `${acc.stAccountNo} (${acc.stAccountType})`,
|
|
}));
|
|
|
|
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 handleValidate() {
|
|
if (!selectedAccNo || !beneficiaryAcc ||
|
|
!confirmBeneficiaryAcc
|
|
) {
|
|
notifications.show({
|
|
title: "Validation Error",
|
|
message: "Please fill debit account, beneficiary account number and confirm beneficiary account number",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
if (beneficiaryAcc.length < 10 || beneficiaryAcc.length > 17) {
|
|
notifications.show({
|
|
title: "Invalid Account Number",
|
|
message: "Please Enter valid account Number",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
if (beneficiaryAcc !== confirmBeneficiaryAcc) {
|
|
notifications.show({
|
|
title: "Mismatch",
|
|
message: "Beneficiary account numbers do not match",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const token = localStorage.getItem("access_token");
|
|
const response = await fetch(`/api/beneficiary/validate/within-bank?accountNumber=${beneficiaryAcc}`, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data?.name) {
|
|
setBeneficiaryName(data.name);
|
|
setValidationStatus("success");
|
|
setIsVisibilityLocked(true);
|
|
} else {
|
|
setBeneficiaryName("Invalid account number");
|
|
setValidationStatus("error");
|
|
setBeneficiaryAcc("");
|
|
setConfirmBeneficiaryAcc("");
|
|
}
|
|
} catch {
|
|
setBeneficiaryName("Invalid account number");
|
|
setValidationStatus("error");
|
|
}
|
|
};
|
|
|
|
async function handleProceed() {
|
|
if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !beneficiaryType || !amount ) {
|
|
notifications.show({
|
|
title: "Validation Error",
|
|
message: "Please fill all required fields",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (validationStatus !== "success") {
|
|
notifications.show({
|
|
title: "Validation Required",
|
|
message: "Please validate beneficiary before proceeding",
|
|
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);
|
|
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");
|
|
|
|
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("");
|
|
setValidationStatus(null);
|
|
setBeneficiaryName(null);
|
|
} 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('');
|
|
setBeneficiaryName('');
|
|
setConfirmBeneficiaryAcc('');
|
|
setBeneficiaryType(null);
|
|
setAmount('');
|
|
setRemarks('');
|
|
setIsVisibilityLocked(false);
|
|
setIsSubmitting(false);
|
|
setShowTxnPassword(false);
|
|
setShowOtpField(false);
|
|
setIsSubmitting(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>Payee Account:</strong> {beneficiaryAcc}</Text>
|
|
<Text><strong>Payee Name:</strong> {beneficiaryName}</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 */}
|
|
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
|
<Title order={3} mb="md">
|
|
Quick Pay
|
|
</Title>
|
|
<Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
|
|
<Group justify="center">
|
|
<Radio value="own" label="Own Bank" />
|
|
<Radio value="outside" label="Outside Bank" />
|
|
</Group>
|
|
</Radio.Group>
|
|
|
|
{bankType === "own" ? (
|
|
<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}
|
|
/>
|
|
<TextInput
|
|
label="Payee Account No"
|
|
value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
|
|
onChange={(e) => {
|
|
const value = e.currentTarget.value;
|
|
if (/^\d*$/.test(value)) {
|
|
setBeneficiaryAcc(value);
|
|
setShowPayeeAcc(true);
|
|
}
|
|
}}
|
|
onBlur={() => setShowPayeeAcc(false)}
|
|
onFocus={() => setShowPayeeAcc(true)}
|
|
withAsterisk
|
|
readOnly={isVisibilityLocked}
|
|
/>
|
|
|
|
<TextInput
|
|
label="Confirm Payee Account No"
|
|
value={confirmBeneficiaryAcc}
|
|
onChange={(e) => {
|
|
const value = e.currentTarget.value;
|
|
if (/^\d*$/.test(value)) {
|
|
setConfirmBeneficiaryAcc(value);
|
|
}
|
|
}}
|
|
onCopy={(e) => e.preventDefault()}
|
|
onPaste={(e) => e.preventDefault()}
|
|
onCut={(e) => e.preventDefault()}
|
|
withAsterisk
|
|
readOnly={isVisibilityLocked}
|
|
/>
|
|
</Group>
|
|
<Group justify="space-between" >
|
|
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
|
|
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
|
|
</Text>
|
|
<Group justify="center">
|
|
{validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
|
|
</Group>
|
|
</Group>
|
|
<Group grow>
|
|
<TextInput
|
|
label="Payee Name"
|
|
value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
|
|
disabled
|
|
readOnly
|
|
withAsterisk
|
|
/>
|
|
|
|
<Select
|
|
label="Payee Account Type"
|
|
placeholder="Select type"
|
|
data={["Savings", "Current"]}
|
|
value={beneficiaryType}
|
|
onChange={setBeneficiaryType}
|
|
withAsterisk
|
|
readOnly={showOtpField}
|
|
/>
|
|
|
|
<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 && (
|
|
<PasswordInput
|
|
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={handleValidate} disabled={validationStatus === "success"}>
|
|
Validate
|
|
</Button>
|
|
<Button
|
|
variant="filled"
|
|
color="blue"
|
|
onClick={handleProceed}
|
|
loading={isSubmitting}
|
|
disabled={validationStatus !== "success"}
|
|
>
|
|
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<OutsideQuickPay />
|
|
</div>
|
|
)}
|
|
</Paper>
|
|
</>
|
|
);
|
|
}
|