tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wip: update the login page,

Browse Source 
feat: update Otp in set login and transaction page.
Feat: Add validation for external account in add beneficiary.
This commit is contained in:
Tomosa Sarkar
2025-08-14 17:05:21 +05:30
parent c9181881e0
commit 78426747e5
20 changed files with 687 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx
View File

@@ -1,19 +1,9 @@
"use client";
import React, { useEffect, useState } from 'react';
import {
TextInput,
Button,
Select,
Title,
Paper,
Grid,
Group,
Radio,
Text,
PasswordInput,
} from '@mantine/core';
import { TextInput, Button, Grid, Text, PasswordInput } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { useRouter } from "next/navigation";
const MockOthersAccountValidation =
[
@@ -31,8 +21,9 @@ const MockOthersAccountValidation =
},
]
const AddBeneficiaryOthers: React.FC = () => {
export default function AddBeneficiaryOthers() {
const router = useRouter();
const [authorized, setAuthorized] = useState<boolean | null>(null);
const [bankName, setBankName] = useState('');
const [ifsccode, setIfsccode] = useState('');
const [branchName, setBranchName] = useState('');
@@ -40,24 +31,28 @@ const AddBeneficiaryOthers: React.FC = () => {
const [confirmAccountNo, setConfirmAccountNo] = useState('');
const [nickName, setNickName] = useState('');
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
const [otp, setOtp] = useState('');
const [generatedOtp, setGeneratedOtp] = useState('');
const [otpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false);
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(() => {
const token = localStorage.getItem("access_token");
if (!token) {
setAuthorized(false);
router.push("/login");
} else {
setAuthorized(true);
}
}, []);
useEffect(() => {
const ifscTrimmed = ifsccode.trim();
if (ifscTrimmed.length === 11) { // Only call API when IFSC is valid length
const fetchIfscDetails = async () => {
try {
@@ -115,15 +110,6 @@ const AddBeneficiaryOthers: React.FC = () => {
return;
}
// if ( !/^[A-Za-z ]{1,5}$/.test(bankName)) {
// notifications.show({
// color: "red",
// title: "Invalid Bank Name",
// message: "Use only alphabets/spaces, max 100 characters.",
// });
// return;
// }
const trimmedIfsc = ifsccode.trim().toUpperCase();
const isValidIfscCode = (code: string) => {
return /^[A-Z]{4}0[0-9]{6}$/.test(code);
@@ -161,12 +147,25 @@ const AddBeneficiaryOthers: React.FC = () => {
}
// Validation for now
try {
const matched = MockOthersAccountValidation.find(
(entry) => entry.stBenAccountNo === accountNo
);
// const matched = MockOthersAccountValidation.find(
// (entry) => entry.stBenAccountNo === accountNo
// );
if (matched) {
setBeneficiaryName(matched.stBenName);
const token = localStorage.getItem("access_token");
const response = await fetch(
`http://localhost:8080/api/beneficiary/validate/outside-bank?accountNo=${accountNo}&ifscCode=${ifsccode}&remitterName=""`,
{
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);
setOtpSent(true);
@@ -190,55 +189,6 @@ const AddBeneficiaryOthers: React.FC = () => {
setBeneficiaryName("Something went wrong");
setValidationStatus("error");
}
// Later need to add api
// try {
// // API will be changed
// const token = localStorage.getItem("access_token");
// const response = await fetch(`/api/beneficiary/validate/within-bank?accountNumber=${accountNo}`, {
// 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);
// setOtpSent(true);
// await handleGenerateOtp();
// notifications.show({
// withBorder: true,
// color: "green",
// title: "OTP Sent",
// message: "OTP has been sent to your registered mobile number.",
// autoClose: 5000,
// });
// } else {
// setBeneficiaryName("Invalid beneficiary account number");
// setValidationStatus("error");
// setAccountNo("");
// setConfirmAccountNo("");
// }
// }
// catch (error) {
// setBeneficiaryName("Invalid beneficiary account number");
// setValidationStatus("error");
// notifications.show({
// withBorder: true,
// color: "red",
// title: "Error",
// message: "Could not validate account number.",
// autoClose: 5000,
// });
// }
};
const verifyOtp = () => {
@@ -271,6 +221,7 @@ const AddBeneficiaryOthers: React.FC = () => {
});
};
if (!authorized) return null;
return (
<Grid gutter="md">
@@ -278,9 +229,7 @@ const AddBeneficiaryOthers: React.FC = () => {
<TextInput
label="IFSC Code"
placeholder="e.g.,ABCD0123456"
//data={bankOptions}
value={ifsccode}
// onChange={(e) => setIfsccode(e.currentTarget.value)}
onChange={(e) => {
let val = e.currentTarget.value.toUpperCase();
val = val.replace(/[^A-Z0-9]/g, ""); // block special chars
@@ -305,8 +254,6 @@ const AddBeneficiaryOthers: React.FC = () => {
/>
</Grid.Col>
<Grid.Col span={4}>
<TextInput
label="Branch Name"
@@ -422,4 +369,4 @@ const AddBeneficiaryOthers: React.FC = () => {
);
};
export default AddBeneficiaryOthers;