diff --git a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx b/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx index c349233..408f42a 100644 --- a/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx +++ b/src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx @@ -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(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(null); const [nickName, setNickName] = useState(''); const [beneficiaryName, setBeneficiaryName] = useState(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 ( - - + - { let val = e.currentTarget.value.replace(/[^A-Za-z ]/g, ""); setBankName(val.slice(0, 100)); }} - required + withAsterisk /> - - setShowPayeeAcc(true)} readOnly={isVisibilityLocked} maxLength={17} - // disabled={isVisibilityLocked} - required + withAsterisk /> - 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() { )} - - setNickName(e.currentTarget.value)} + { )} - ) : ( + ) : ( */} - )} + {/* )} */} ); }; diff --git a/src/app/(main)/funds_transfer/page.tsx b/src/app/(main)/funds_transfer/page.tsx index 2244c02..8305ecb 100644 --- a/src/app/(main)/funds_transfer/page.tsx +++ b/src/app/(main)/funds_transfer/page.tsx @@ -473,7 +473,6 @@ export default function QuickPay() { /> )} -