356 lines
14 KiB
TypeScript
356 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { Center, Group, Loader, Paper, ScrollArea, Table, Text, Title, TextInput, Button, Modal } from "@mantine/core";
|
|
import { notifications } from "@mantine/notifications";
|
|
import { useRouter } from "next/navigation";
|
|
import Image from "next/image";
|
|
import { getBankLogo } from "@/app/_util/getBankLogo";
|
|
import { IconRefresh, IconTrash } from "@tabler/icons-react";
|
|
import { sendOtp, verifyOtp } from "@/app/_util/otp";
|
|
|
|
|
|
interface Beneficiary {
|
|
accountNo: string;
|
|
name: string;
|
|
accountType: string;
|
|
ifscCode: string;
|
|
bankName: string;
|
|
branchName: string;
|
|
}
|
|
|
|
export default function ViewBeneficiary() {
|
|
const router = useRouter();
|
|
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
|
const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [opened, setOpened] = useState(false);
|
|
const [otpStep, setOtpStep] = useState(false);
|
|
const [otp, setOtp] = useState("");
|
|
const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
|
|
const [countdown, setCountdown] = useState(180);
|
|
const [timerActive, setTimerActive] = useState(false);
|
|
|
|
const maskAccount = (account: string) => {
|
|
if (!account) return undefined;
|
|
const length = account.length;
|
|
if (length <= 4) return account;
|
|
const masked = "X".repeat(length - 4) + account.slice(length - 4);
|
|
return masked;
|
|
};
|
|
|
|
async function handleSendOtp() {
|
|
const mobileNumber = localStorage.getItem('remitter_mobile_no');
|
|
if (!mobileNumber) {
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: 'Mobile number not found.Contact to administrator',
|
|
color: 'red',
|
|
});
|
|
return;
|
|
}
|
|
try {
|
|
await sendOtp({ type: 'BENEFICIARY_DELETE', beneficiary: selectedAccount ? maskAccount(selectedAccount) : undefined });
|
|
setCountdown(180);
|
|
setTimerActive(true);
|
|
} catch (err: any) {
|
|
console.error('Send OTP failed', err);
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: err.message || 'Send OTP failed.Please try again later.',
|
|
color: 'red',
|
|
});
|
|
}
|
|
}
|
|
|
|
async function handleVerifyOtp() {
|
|
try {
|
|
await verifyOtp(otp);
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
const openDeleteModal = (accountNo: string) => {
|
|
setSelectedAccount(accountNo);
|
|
setOpened(true);
|
|
setOtpStep(false); // Reset modal to confirmation step
|
|
setOtp("");
|
|
};
|
|
|
|
|
|
const handleModalConfirm = async () => {
|
|
if (!selectedAccount) return;
|
|
|
|
try {
|
|
await handleSendOtp(); // send OTP to user's mobile
|
|
setOtpStep(true); // move modal to OTP input step
|
|
} catch (err) {
|
|
notifications.show({
|
|
title: "Error",
|
|
message: "Failed to send OTP. Please try again.",
|
|
color: "red",
|
|
});
|
|
}
|
|
};
|
|
|
|
// Step 3: Handle OTP verification & delete
|
|
const handleVerifyOtpAndDelete = async () => {
|
|
if (!otp || !selectedAccount) return;
|
|
|
|
try {
|
|
const isOtpValid = await handleVerifyOtp(); // verify OTP
|
|
if (!isOtpValid) {
|
|
notifications.show({
|
|
title: "Invalid OTP",
|
|
message: "Please enter the correct OTP.",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// OTP is valid → delete beneficiary
|
|
const token = localStorage.getItem("access_token");
|
|
const res = await fetch(`/api/beneficiary/${selectedAccount}`, {
|
|
method: "DELETE",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Login-Type": "IB",
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
});
|
|
|
|
if (res.ok) {
|
|
setBeneficiaries((prev) => prev.filter((b) => b.accountNo !== selectedAccount));
|
|
notifications.show({
|
|
title: "Deleted",
|
|
message: "Beneficiary deleted successfully.",
|
|
color: "green",
|
|
});
|
|
setOpened(false);
|
|
setOtpStep(false);
|
|
setOtp("");
|
|
} else {
|
|
notifications.show({
|
|
title: "Error",
|
|
message: "Failed to delete beneficiary.",
|
|
color: "red",
|
|
});
|
|
}
|
|
} catch (err) {
|
|
notifications.show({
|
|
title: "Error",
|
|
message: "Something went wrong.",
|
|
color: "red",
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) {
|
|
setAuthorized(false);
|
|
router.push("/login");
|
|
} else {
|
|
setAuthorized(true);
|
|
}
|
|
}, []);
|
|
useEffect(() => {
|
|
const fetchBeneficiaries = async () => {
|
|
try {
|
|
const token = localStorage.getItem("access_token");
|
|
const response = await fetch(`/api/beneficiary`, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Login-Type": "IB",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
if (!response.ok) throw new Error("Failed to fetch beneficiaries");
|
|
const data = await response.json();
|
|
setBeneficiaries(data);
|
|
} catch (error) {
|
|
notifications.show({
|
|
title: "Error",
|
|
message: "Unable to fetch beneficiaries. Please try again later.",
|
|
color: "red",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchBeneficiaries();
|
|
}, []);
|
|
|
|
//new use effect
|
|
useEffect(() => {
|
|
let interval: NodeJS.Timeout | null = null;
|
|
if (timerActive && countdown > 0) {
|
|
interval = setInterval(() => {
|
|
setCountdown((prev) => prev - 1);
|
|
}, 1000);
|
|
} else if (countdown === 0) {
|
|
setTimerActive(false);
|
|
}
|
|
return () => {
|
|
if (interval) clearInterval(interval);
|
|
};
|
|
}, [timerActive, countdown]);
|
|
|
|
|
|
|
|
if (loading) {
|
|
return (
|
|
<Center h="60vh">
|
|
<Loader size="lg" color="green" />
|
|
</Center>
|
|
);
|
|
}
|
|
|
|
if (!authorized) return null;
|
|
|
|
|
|
|
|
return (
|
|
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
|
<Group justify="space-between" align="center" mb="md" wrap="wrap">
|
|
<Title order={3}>My Beneficiaries</Title>
|
|
|
|
<Button
|
|
color="green"
|
|
variant="filled"
|
|
size="sm"
|
|
component="a"
|
|
href="/beneficiary"
|
|
style={{ minWidth: "150px" }}
|
|
>
|
|
+ Add Beneficiary
|
|
</Button>
|
|
</Group>
|
|
|
|
{beneficiaries.length === 0 ? (
|
|
<Text>No beneficiaries found.</Text>
|
|
) : (
|
|
<>
|
|
<ScrollArea h={300} type="always">
|
|
<Table highlightOnHover withTableBorder stickyHeader style={{ borderCollapse: "collapse", width: "100%" }}>
|
|
<thead style={{
|
|
background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
|
position: "sticky",
|
|
top: 0,
|
|
zIndex: 5,
|
|
}}>
|
|
<tr>
|
|
<Table.Th >Bank</Table.Th>
|
|
<Table.Th style={{ textAlign: "right" }}>Account No</Table.Th>
|
|
<Table.Th >Name</Table.Th>
|
|
<Table.Th >Type</Table.Th>
|
|
<Table.Th style={{ textAlign: "center" }}>IFSC</Table.Th>
|
|
<Table.Th style={{ textAlign: "center" }}>Action Icon</Table.Th>
|
|
</tr>
|
|
</thead>
|
|
<Table.Tbody>
|
|
{beneficiaries.map((b, i) => (
|
|
<Table.Tr key={i}>
|
|
<Table.Td>
|
|
<Group gap='sm'>
|
|
<Image
|
|
// src={getBankLogo(b.bankName) ??logo}
|
|
src={getBankLogo(b.bankName)}
|
|
alt={b.bankName}
|
|
width={20}
|
|
height={15}
|
|
/>
|
|
{b.bankName}
|
|
</Group>
|
|
</Table.Td>
|
|
<Table.Td style={{ textAlign: "right" }}>{b.accountNo}</Table.Td>
|
|
<Table.Td>{b.name}</Table.Td>
|
|
<Table.Td>{b.accountType}</Table.Td>
|
|
<Table.Td style={{ textAlign: "center" }}>{b.ifscCode}</Table.Td>
|
|
{/* <Table.Td style={{ textAlign: "center" }}><IconTrash color="red" /></Table.Td> */}
|
|
|
|
<Table.Td style={{ textAlign: "center" }}>
|
|
<IconTrash
|
|
color="red"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => openDeleteModal(b.accountNo)}
|
|
/>
|
|
</Table.Td>
|
|
|
|
</Table.Tr>
|
|
))}
|
|
</Table.Tbody>
|
|
</Table>
|
|
</ScrollArea>
|
|
|
|
<Modal
|
|
opened={opened}
|
|
onClose={() => {
|
|
setOpened(false);
|
|
setOtpStep(false);
|
|
setOtp("");
|
|
}}
|
|
title="Delete Beneficiary"
|
|
centered
|
|
>
|
|
{!otpStep ? (
|
|
<>
|
|
<Text mb="md">
|
|
Are you sure you want to delete this beneficiary?
|
|
</Text>
|
|
<Group p="right">
|
|
<Button variant="default" onClick={() => setOpened(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button color="red" onClick={handleModalConfirm}>
|
|
Confirm
|
|
</Button>
|
|
</Group>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text mb="sm">Enter OTP sent to your registered number:</Text>
|
|
<TextInput
|
|
value={otp}
|
|
onChange={(e) => setOtp(e.currentTarget.value)}
|
|
placeholder="Enter OTP"
|
|
maxLength={6}
|
|
/>
|
|
<Group justify="space-between" mt="xs">
|
|
{/* Resend OTP Timer or Icon */}
|
|
{timerActive ? (
|
|
<Text size="xs" c="dimmed" style={{ minWidth: "180px" }}>
|
|
Resend OTP will be enabled in{" "}
|
|
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
|
|
{String(countdown % 60).padStart(2, "0")}
|
|
</Text>
|
|
) : (
|
|
<IconRefresh
|
|
size={22}
|
|
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
|
|
onClick={handleSendOtp}
|
|
/>
|
|
)}
|
|
</Group>
|
|
<Group p="right" mt="md">
|
|
<Button variant="default" onClick={() => setOpened(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button color="green" onClick={handleVerifyOtpAndDelete}>
|
|
Verify & Delete
|
|
</Button>
|
|
</Group>
|
|
</>
|
|
)}
|
|
</Modal>
|
|
</>
|
|
|
|
)}
|
|
</Paper >
|
|
);
|
|
}
|