addbeneficiary page implementation

src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx

@@ -15,29 +15,6 @@ import {
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
-type IfscDataType = {
-    [key: string]: {
-        bank: string;
-        branch: string;
-    };
-};
-
-const mockIfscData: IfscDataType = {
-
-    'SBIN0004567': {
-        'bank': 'State Bank of India',
-        'branch': 'Connaught Place',
-    },
-    'ICIC0007347': {
-        'bank': 'ICICI',
-        'branch': 'Ghatal',
-    },
-    'ICIC0001608': {
-        'bank': 'ICICI',
-        'branch': 'ICICI Bank Ltd.,Serampore'
-    },
-};
-
 const MockOthersAccountValidation =
     [
         {
@@ -77,16 +54,48 @@ const AddBeneficiaryOthers: React.FC = () => {
 
     const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
 
+
     useEffect(() => {
         const ifscTrimmed = ifsccode.trim();
-        const match = mockIfscData[ifscTrimmed];
 
-        if (match && match.bank.toLowerCase() === bankName.trim().toLowerCase()) {
-            setBranchName(match.branch);
-        } else {
-            setBranchName("No result found");
+        if (ifscTrimmed.length === 11) {  // Only call API when IFSC is valid length
+            const fetchIfscDetails = async () => {
+                try {
+                    const token = localStorage.getItem("access_token");
+                    const response = await fetch(
+                        `http://localhost:8080/api/beneficiary/ifsc-details?ifscCode=${ifscTrimmed}`,
+                        {
+                            method: "GET",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: `Bearer ${token}`,
+                            },
+                        }
+                    );
+
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch IFSC details");
+                    }
+
+                    const data = await response.json();
+
+                    if (data && data.bank_name && data.branch_name) {
+                        setBankName(data.bank_name);
+                        setBranchName(data.branch_name);
+                    } else {
+                        setBranchName("No result found");
+                        setBankName("");
+                    }
+                } catch (error) {
+                    console.error("Error fetching IFSC details:", error);
+                    setBranchName("No result found");
+                    setBankName("");
+                }
+            };
+
+            fetchIfscDetails();
         }
-    }, [bankName, ifsccode]);
+    }, [ifsccode]);
 
     const handleGenerateOtp = async () => {
         const value = "123456"; // Or generate a random OTP
@@ -264,18 +273,6 @@ const AddBeneficiaryOthers: React.FC = () => {
 
     return (
         <Grid gutter="md">
-            <Grid.Col span={4}>
-                <TextInput
-                    label="Bank Name"
-                    placeholder="Enter bank"
-                    value={bankName}
-                    onChange={(e) => {
-                        let val = e.currentTarget.value.replace(/[^A-Za-z ]/g, "");
-                        setBankName(val.slice(0, 100));
-                    }}
-                    required
-                />
-            </Grid.Col>
 
             <Grid.Col span={4}>
                 <TextInput
@@ -294,6 +291,22 @@ const AddBeneficiaryOthers: React.FC = () => {
                 />
             </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
+                />
+            </Grid.Col>
+
+
+
             <Grid.Col span={4}>
                 <TextInput
                     label="Branch Name"
@@ -340,9 +353,9 @@ const AddBeneficiaryOthers: React.FC = () => {
                     // disabled={isVisibilityLocked}
                     readOnly={isVisibilityLocked}
                     required
-                onCopy={(e) => e.preventDefault()}
-                onPaste={(e) => e.preventDefault()}
-                onCut={(e) => e.preventDefault()}
+                    onCopy={(e) => e.preventDefault()}
+                    onPaste={(e) => e.preventDefault()}
+                    onCut={(e) => e.preventDefault()}
                 />
 
                 {validationStatus === "error" && (