From d997c961edd79a7211531ac47fbb3456495f8f5d Mon Sep 17 00:00:00 2001
From: "nabanita.jana" <nabanita.jana@tcs.com>
Date: Mon, 21 Jul 2025 10:16:47 +0530
Subject: [PATCH] feat : implement the add_beneficiary (for own bank)screen

---
 .../funds_transfer/add_beneficiary/page.tsx   | 279 ++++++++++++++++++
 src/app/(main)/funds_transfer/layout.tsx      |   6 +-
 2 files changed, 282 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(main)/funds_transfer/add_beneficiary/page.tsx

diff --git a/src/app/(main)/funds_transfer/add_beneficiary/page.tsx b/src/app/(main)/funds_transfer/add_beneficiary/page.tsx
new file mode 100644
index 0000000..bf6eed6
--- /dev/null
+++ b/src/app/(main)/funds_transfer/add_beneficiary/page.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import React, { useState } from 'react';
+import {
+    TextInput,
+    Button,
+    Select,
+    Title,
+    Paper,
+    Grid,
+    Group,
+    Radio,
+    Text,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+
+const bankOptions = [
+    { value: 'KCCB', label: 'KCCB - The Kangra Central Co-Operative Bank' },
+];
+
+const AddBeneficiary: React.FC = () => {
+    const [bankName, setBankName] = useState('');
+    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('');
+    const [otpSent, setOtpSent] = useState(false);
+    const [otpVerified, setOtpVerified] = useState(false);
+    const [validationStatus, setValidationStatus] = useState<'success' | 'error' | null>(null);
+    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 () => {
+        const value = "123456"; // Or generate a random OTP
+        setGeneratedOtp(value);
+        return value;
+    };
+
+    const validateAndSendOtp = async () => {
+        if (!bankName || !accountNo || !confirmAccountNo) {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Missing Field",
+                message: "All fields must be completed.",
+                autoClose: 5000,
+            });
+            return;
+        }
+
+        if (accountNo.length < 10 || accountNo.length > 17) {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Invalid Account Number",
+                message: "Enter a valid account number (10–17 digits).",
+                autoClose: 5000,
+            });
+            return;
+        }
+
+        if (accountNo !== confirmAccountNo) {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Mismatch",
+                message: "Account numbers do not match.",
+                autoClose: 5000,
+            });
+            return;
+        }
+
+        try {
+            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 = () => {
+        if (otp === generatedOtp) {
+            setOtpVerified(true);
+            notifications.show({
+                withBorder: true,
+                color: "green",
+                title: "OTP Verified",
+                message: "OTP validated successfully.",
+                autoClose: 5000,
+            });
+        } else {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "OTP Error",
+                message: "OTP does not match.",
+                autoClose: 5000,
+            });
+        }
+    };
+
+    return (
+        <Paper shadow="sm" radius="md" p="md" withBorder>
+            <Title order={3} mb="md">Add Beneficiary</Title>
+
+            <Radio.Group value={bankType} onChange={setBankType} name="bankType" withAsterisk mb="md">
+                <Group justify="center">
+                    <Radio value="own" label="Own Bank" />
+                    <Radio value="outside" label="Outside Bank" />
+                </Group>
+            </Radio.Group>
+
+            {bankType === "own" ? (
+                <Grid gutter="md">
+                    <Grid.Col span={4}>
+                        <Select
+                            label="Bank Name"
+                            placeholder="Select bank"
+                            data={bankOptions}
+                            value={bankName}
+                            onChange={(value) => setBankName(value || '')}
+                            required
+                        />
+                    </Grid.Col>
+
+                    <Grid.Col span={4}>
+                        <TextInput
+                            label="Beneficiary Account Number"
+                            placeholder="Enter account number"
+                            value={showPayeeAcc ? accountNo : getFullMaskedAccount(accountNo)}
+                            onChange={(e) => {
+                                const value = e.currentTarget.value;
+                                if (/^\d*$/.test(value) && value.length <= 17) {
+                                    setAccountNo(value);
+                                    setShowPayeeAcc(true);
+                                }
+                            }}
+                            onBlur={() => setShowPayeeAcc(false)}
+                            onFocus={() => setShowPayeeAcc(true)}
+                            readOnly={isVisibilityLocked}
+                            maxLength={17}
+                           // disabled={isVisibilityLocked}
+                            required
+                        />
+                    </Grid.Col>
+
+                    <Grid.Col span={4}>
+                        <TextInput
+                            label="Confirm Beneficiary Account Number"
+                            placeholder="Re-enter account number"
+                            value={confirmAccountNo}
+                            onChange={(e) => {
+                                const value = e.currentTarget.value;
+                                if (/^\d*$/.test(value) && value.length <= 17) {
+                                    setConfirmAccountNo(value);
+                                }
+                            }}
+                            maxLength={17}
+                           // disabled={isVisibilityLocked}
+                            readOnly={isVisibilityLocked}
+                            required
+                            onCopy={(e) => e.preventDefault()}
+                            onPaste={(e) => e.preventDefault()}
+                            onCut={(e) => e.preventDefault()}
+                        />
+
+                        {validationStatus === "error" && (
+                            <Text c="red" size="sm" style={{ marginLeft: '1rem', whiteSpace: 'nowrap' }}>
+                                {beneficiaryName}
+                            </Text>
+                        )}
+                    </Grid.Col>
+
+                    <Grid.Col span={6}>
+                        <TextInput
+                            label="Nick Name (Optional)"
+                            placeholder="Enter nickname (optional)"
+                            value={nickName}
+                            onChange={(e) => setNickName(e.currentTarget.value)}
+                        />
+                    </Grid.Col>
+
+                    <Grid.Col span={6}>
+                        <TextInput
+                            label="Beneficiary Name"
+                            value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
+                            disabled
+                            maxLength={100}
+                            required
+                        />
+                    </Grid.Col>
+
+
+                    {!otpSent && (
+                        <Grid.Col>
+                            <Button onClick={validateAndSendOtp}>Validate</Button>
+                        </Grid.Col>
+                    )}
+
+                    {otpSent && (
+                        <>
+                            <Grid.Col span={3}>
+                                <TextInput
+                                    label="Enter OTP"
+                                    placeholder="Enter OTP"
+                                    value={otp}
+                                    onChange={(e) => setOtp(e.currentTarget.value)}
+                                    maxLength={6}
+                                    disabled={otpVerified} // ✅ Disable after verified
+                                />
+                            </Grid.Col >
+                            <Grid.Col >
+                                {!otpVerified ? (
+                                    <Button onClick={verifyOtp}>Validate OTP</Button>
+                                ) : (
+
+
+                                    <Button color="blue" size="sm" onClick={() => { /* handle add here */ }}>
+                                        Add
+                                    </Button>
+                                )}
+                            </Grid.Col>
+                        </>
+                    )}
+                </Grid>
+            ) : (
+                <Text size="lg" mt="md">
+                    Outside Bank feature coming soon.
+                </Text>
+            )}
+        </Paper>
+    );
+};
+
+export default AddBeneficiary;
diff --git a/src/app/(main)/funds_transfer/layout.tsx b/src/app/(main)/funds_transfer/layout.tsx
index be44799..f798df6 100644
--- a/src/app/(main)/funds_transfer/layout.tsx
+++ b/src/app/(main)/funds_transfer/layout.tsx
@@ -12,9 +12,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
     const links = [
         { label: " Quick Pay", href: "/funds_transfer" },
-        { label: "Add Beneficiary", href: "/accounts/add_beneficiary" },
-        { label: "View Beneficiary ", href: "/accounts/view_beneficiary" },
-        { label: "Send to Beneficiary", href: "/accounts/send_beneficiary" },
+        { label: "Add Beneficiary", href: "/funds_transfer/add_beneficiary" },
+        { label: "View Beneficiary ", href: "/funds_transfer/view_beneficiary" },
+        { label: "Send to Beneficiary", href: "/funds_transfer/send_beneficiary" },
     ];
     useEffect(() => {
         const token = localStorage.getItem("access_token");