fix: Add Beneficiary page implementation

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

@@ -13,6 +13,7 @@ import {
     Text,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
+import AddBeneficiaryOthers from './addBeneficiaryOthers';
 
 const bankOptions = [
     { value: 'KCCB', label: 'KCCB - The Kangra Central Co-Operative Bank' },
@@ -23,7 +24,6 @@ const AddBeneficiary: React.FC = () => {
     const [bankType, setBankType] = useState('own');
     const [accountNo, setAccountNo] = useState('');
     const [confirmAccountNo, setConfirmAccountNo] = useState('');
-    const [payeeName, setPayeeName] = useState('');
     const [nickName, setNickName] = useState('');
     const [otp, setOtp] = useState('');
     const [generatedOtp, setGeneratedOtp] = useState('');
@@ -33,7 +33,6 @@ const AddBeneficiary: React.FC = () => {
     const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
     const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
     const [showPayeeAcc, setShowPayeeAcc] = useState(true);
-
     const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
 
     const handleGenerateOtp = async () => {
@@ -42,6 +41,17 @@ const AddBeneficiary: React.FC = () => {
         return value;
     };
 
+    // const isValidBankName = (name: string) => {
+    //     const regex = /^[A-Za-z\s]{3,5}$/;
+    //     return regex.test(name.trim());
+    // };
+
+    // const isValidIfscCode = (code: string) => {
+    //     return /^[A-Z]{4}0[0-9]{6}$/.test(code);
+    // };
+
+
+
     const validateAndSendOtp = async () => {
         if (!bankName || !accountNo || !confirmAccountNo) {
             notifications.show({
@@ -54,6 +64,31 @@ const AddBeneficiary: React.FC = () => {
             return;
         }
 
+
+        // if (bankType === "outside" && !/^[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();
+
+        // if (!isValidIfscCode(trimmedIfsc)) {
+        //     notifications.show({
+        //         title: "Invalid IFSC Code",
+        //         message: "Must be 11 characters: 4 uppercase letters, 0, then 6 digits (e.g., HDFC0123456)",
+        //         color: "red",
+        //     });
+        //     return;
+        // }
+
+
+
+
+
         if (accountNo.length < 10 || accountNo.length > 17) {
             notifications.show({
                 withBorder: true,
@@ -65,6 +100,9 @@ const AddBeneficiary: React.FC = () => {
             return;
         }
 
+
+
+
         if (accountNo !== confirmAccountNo) {
             notifications.show({
                 withBorder: true,
@@ -112,6 +150,7 @@ const AddBeneficiary: React.FC = () => {
             setBeneficiaryName("Invalid beneficiary account number");
             setValidationStatus("error");
 
+
             notifications.show({
                 withBorder: true,
                 color: "red",
@@ -143,8 +182,19 @@ const AddBeneficiary: React.FC = () => {
         }
     };
 
+    const AddBen = () => {
+        notifications.show({
+            withBorder: true,
+            color: "green",
+            title: "Beneficiary Added",
+            message: "Beneficiary added successfully.",
+            autoClose: 5000,
+        });
+    };
+
+
     return (
-        <Paper shadow="sm" radius="md" p="md" withBorder>
+        <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
             <Title order={3} mb="md">Add Beneficiary</Title>
 
             <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
@@ -183,7 +233,7 @@ const AddBeneficiary: React.FC = () => {
                             onFocus={() => setShowPayeeAcc(true)}
                             readOnly={isVisibilityLocked}
                             maxLength={17}
-                           // disabled={isVisibilityLocked}
+                            // disabled={isVisibilityLocked}
                             required
                         />
                     </Grid.Col>
@@ -200,12 +250,12 @@ const AddBeneficiary: React.FC = () => {
                                 }
                             }}
                             maxLength={17}
-                           // disabled={isVisibilityLocked}
+                            // 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" && (
@@ -257,9 +307,7 @@ const AddBeneficiary: React.FC = () => {
                                 {!otpVerified ? (
                                     <Button onClick={verifyOtp}>Validate OTP</Button>
                                 ) : (
-
-
-                                    <Button color="blue" size="sm" onClick={() => { /* handle add here */ }}>
+                                    <Button color="blue" size="sm" onClick={AddBen}>
                                         Add
                                     </Button>
                                 )}
@@ -268,9 +316,9 @@ const AddBeneficiary: React.FC = () => {
                     )}
                 </Grid>
             ) : (
-                <Text size="lg" mt="md">
-                    Outside Bank feature coming soon.
-                </Text>
+                <Grid gutter="md">
+                    <AddBeneficiaryOthers />
+                </Grid>
             )}
         </Paper>
     );