refactor: Update source code with the NPCI and CBS API
This commit is contained in:
@@ -1,34 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { TextInput, Button, Grid, Text, PasswordInput } from '@mantine/core';
|
||||
import { TextInput, Button, Grid, Text, PasswordInput,Loader,Group, Select, Stack } from '@mantine/core';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const MockOthersAccountValidation =
|
||||
[
|
||||
{
|
||||
'stBenAccountNo': '50077736834',
|
||||
'stBenName': 'Ram Patnayak',
|
||||
},
|
||||
{
|
||||
'stBenAccountNo': '50088836834',
|
||||
'stBenName': 'Sumit Ghosh',
|
||||
},
|
||||
{
|
||||
'stBenAccountNo': '21112076570',
|
||||
'stBenName': 'Mr Sumit Ghosh',
|
||||
},
|
||||
]
|
||||
|
||||
export default function AddBeneficiaryOthers() {
|
||||
const router = useRouter();
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [bankName, setBankName] = useState('');
|
||||
const [ifsccode, setIfsccode] = useState('');
|
||||
const [branchName, setBranchName] = useState('');
|
||||
const [accountNo, setAccountNo] = useState('');
|
||||
const [confirmAccountNo, setConfirmAccountNo] = useState('');
|
||||
const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
|
||||
const [nickName, setNickName] = useState('');
|
||||
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
|
||||
const [otp, setOtp] = useState('');
|
||||
@@ -38,7 +23,6 @@ export default function AddBeneficiaryOthers() {
|
||||
const [validationStatus, setValidationStatus] = useState<'success' | 'error' | null>(null);
|
||||
const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
|
||||
const [showPayeeAcc, setShowPayeeAcc] = useState(true);
|
||||
|
||||
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
|
||||
|
||||
useEffect(() => {
|
||||
@@ -99,7 +83,7 @@ export default function AddBeneficiaryOthers() {
|
||||
};
|
||||
|
||||
const validateAndSendOtp = async () => {
|
||||
if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo) {
|
||||
if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo || !beneficiaryType) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
@@ -147,13 +131,9 @@ export default function AddBeneficiaryOthers() {
|
||||
}
|
||||
// Validation for now
|
||||
try {
|
||||
// const matched = MockOthersAccountValidation.find(
|
||||
// (entry) => entry.stBenAccountNo === accountNo
|
||||
// );
|
||||
|
||||
setLoading(true);
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch(
|
||||
`http://localhost:8080/api/beneficiary/validate/outside-bank?accountNo=${accountNo}&ifscCode=${ifsccode}&remitterName=""`,
|
||||
const response = await fetch(`/api/beneficiary/validate/outside-bank?accountNo=${accountNo}&ifscCode=${ifsccode}&remitterName=""`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
@@ -163,7 +143,6 @@ export default function AddBeneficiaryOthers() {
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data?.name) {
|
||||
setBeneficiaryName(data.name);
|
||||
setValidationStatus("success");
|
||||
@@ -189,9 +168,23 @@ export default function AddBeneficiaryOthers() {
|
||||
setBeneficiaryName("Something went wrong");
|
||||
setValidationStatus("error");
|
||||
}
|
||||
finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const verifyOtp = () => {
|
||||
if (!otp) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "Red",
|
||||
title: "Null Field",
|
||||
message: "Please Enter Valid OTP",
|
||||
autoClose: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (otp === generatedOtp) {
|
||||
setOtpVerified(true);
|
||||
notifications.show({
|
||||
@@ -211,20 +204,70 @@ export default function AddBeneficiaryOthers() {
|
||||
});
|
||||
}
|
||||
};
|
||||
const AddBen = () => {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "green",
|
||||
title: "Beneficiary Added",
|
||||
message: "Beneficiary added successfully.",
|
||||
autoClose: 5000,
|
||||
});
|
||||
const AddBen = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch(`/api/beneficiary`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
accountNo: accountNo,
|
||||
ifscCode: ifsccode,
|
||||
accountType: beneficiaryType,
|
||||
name: beneficiaryName
|
||||
|
||||
}),
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "green",
|
||||
title: "Added",
|
||||
message: "Beneficiary Added successfully",
|
||||
autoClose: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
else{
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "Red",
|
||||
title: "Error",
|
||||
message: data?.error,
|
||||
autoClose: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
catch {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
message: "Something went wrong",
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
finally{
|
||||
setBankName('');
|
||||
setBranchName('');
|
||||
setIfsccode('');
|
||||
setAccountNo('');
|
||||
setConfirmAccountNo('');
|
||||
setBeneficiaryName('');
|
||||
setNickName('');
|
||||
setBeneficiaryType(null);
|
||||
setIsVisibilityLocked(false);
|
||||
setOtpSent(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!authorized) return null;
|
||||
return (
|
||||
<Grid gutter="md">
|
||||
|
||||
<Grid gutter="md" style={{padding:'5px'}}>
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="IFSC Code"
|
||||
@@ -236,34 +279,30 @@ export default function AddBeneficiaryOthers() {
|
||||
setIfsccode(val);
|
||||
}}
|
||||
maxLength={11}
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Bank Name"
|
||||
placeholder="Enter bank"
|
||||
value={bankName}
|
||||
disabled
|
||||
onChange={(e) => {
|
||||
let val = e.currentTarget.value.replace(/[^A-Za-z ]/g, "");
|
||||
setBankName(val.slice(0, 100));
|
||||
}}
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Branch Name"
|
||||
value={branchName}
|
||||
disabled
|
||||
maxLength={100}
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Beneficiary Account Number"
|
||||
@@ -280,11 +319,9 @@ export default function AddBeneficiaryOthers() {
|
||||
onFocus={() => setShowPayeeAcc(true)}
|
||||
readOnly={isVisibilityLocked}
|
||||
maxLength={17}
|
||||
// disabled={isVisibilityLocked}
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Confirm Beneficiary Account Number"
|
||||
@@ -297,12 +334,11 @@ export default function AddBeneficiaryOthers() {
|
||||
}
|
||||
}}
|
||||
maxLength={17}
|
||||
// disabled={isVisibilityLocked}
|
||||
readOnly={isVisibilityLocked}
|
||||
required
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
withAsterisk
|
||||
// onCopy={(e) => e.preventDefault()}
|
||||
// onPaste={(e) => e.preventDefault()}
|
||||
// onCut={(e) => e.preventDefault()}
|
||||
/>
|
||||
|
||||
{validationStatus === "error" && (
|
||||
@@ -311,16 +347,17 @@ export default function AddBeneficiaryOthers() {
|
||||
</Text>
|
||||
)}
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Nick Name (Optional)"
|
||||
placeholder="Enter nickname (optional)"
|
||||
value={nickName}
|
||||
onChange={(e) => setNickName(e.currentTarget.value)}
|
||||
<Select
|
||||
label="Beneficiary Account Type"
|
||||
placeholder="Select type"
|
||||
data={["Savings", "Current"]}
|
||||
value={beneficiaryType}
|
||||
onChange={setBeneficiaryType}
|
||||
readOnly={isVisibilityLocked}
|
||||
withAsterisk
|
||||
/>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Beneficiary Name"
|
||||
@@ -330,14 +367,28 @@ export default function AddBeneficiaryOthers() {
|
||||
required
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<TextInput
|
||||
label="Nick Name (Optional)"
|
||||
placeholder="Enter nickname (optional)"
|
||||
value={nickName}
|
||||
onChange={(e) => setNickName(e.currentTarget.value)}
|
||||
|
||||
|
||||
/>
|
||||
</Grid.Col>
|
||||
{!otpSent && (
|
||||
<Grid.Col>
|
||||
<Button onClick={validateAndSendOtp}>Validate</Button>
|
||||
<Grid.Col >
|
||||
<Group gap="sm">
|
||||
<Button onClick={validateAndSendOtp} disabled={loading}>Validate</Button>
|
||||
{loading && (
|
||||
<>
|
||||
<Loader size='sm' type="bars"></Loader>
|
||||
<Text>Looking for Beneficiary Name</Text>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
)}
|
||||
|
||||
{otpSent && (
|
||||
<>
|
||||
<Grid.Col span={3}>
|
||||
@@ -347,15 +398,13 @@ export default function AddBeneficiaryOthers() {
|
||||
value={otp}
|
||||
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||
maxLength={6}
|
||||
disabled={otpVerified} // ✅ Disable after verified
|
||||
disabled={otpVerified} //Disable after verified
|
||||
/>
|
||||
</Grid.Col >
|
||||
<Grid.Col >
|
||||
{!otpVerified ? (
|
||||
<Button onClick={verifyOtp}>Validate OTP</Button>
|
||||
) : (
|
||||
|
||||
|
||||
<Button color="blue" size="sm" onClick={AddBen}>
|
||||
Add
|
||||
</Button>
|
||||
@@ -364,8 +413,6 @@ export default function AddBeneficiaryOthers() {
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user