376 lines
13 KiB
TypeScript
376 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
TextInput,
|
|
Button,
|
|
Title,
|
|
Paper,
|
|
Group,
|
|
Text,
|
|
} from "@mantine/core";
|
|
import { notifications } from "@mantine/notifications";
|
|
import { IconRefresh, IconCurrencyRupee } from "@tabler/icons-react";
|
|
import { generateCaptcha } from "@/app/captcha";
|
|
import { useRouter } from "next/navigation";
|
|
import { sendOtp, verifyOtp } from "@/app/_util/otp";
|
|
import { getDailyLimit } from "@/app/_util/transactionLimit";
|
|
|
|
export default function SetTransactionLimit() {
|
|
const [limit, setLimit] = useState("");
|
|
const [captcha, setCaptcha] = useState("");
|
|
const [captchaInput, setCaptchaInput] = useState("");
|
|
const [otp, setOtp] = useState("");
|
|
const [otpValidated, setOtpValidated] = useState(false);
|
|
const [countdown, setCountdown] = useState(180);
|
|
const [timerActive, setTimerActive] = useState(false);
|
|
const [step, setStep] = useState<"form" | "otp" | "final">("form");
|
|
const [dailyLimit, setDailyLimit] = useState<number | null>(null);
|
|
const router = useRouter();
|
|
|
|
const icon = <IconCurrencyRupee size={18} stroke={1.5} />;
|
|
|
|
const FetchDailyLimit = async () => {
|
|
try {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) return;
|
|
const data = await getDailyLimit(token);
|
|
if (data) {
|
|
setDailyLimit(data.dailyLimit);
|
|
|
|
} else {
|
|
setDailyLimit(null);
|
|
}
|
|
} catch {
|
|
setDailyLimit(null);
|
|
|
|
}
|
|
};
|
|
|
|
async function handleSendOtp() {
|
|
const mobileNumber = localStorage.getItem("remitter_mobile_no");
|
|
if (!mobileNumber) {
|
|
notifications.show({
|
|
title: "Error",
|
|
message: "Mobile number not found. Contact administrator.",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
try {
|
|
await sendOtp({ type: "TLIMIT" });
|
|
setCountdown(180);
|
|
setTimerActive(true);
|
|
notifications.show({
|
|
title: "OTP Sent",
|
|
message: "An OTP has been sent to your registered mobile.",
|
|
color: "blue",
|
|
});
|
|
} catch (err: any) {
|
|
console.error("Send OTP failed", err);
|
|
notifications.show({
|
|
title: "Error",
|
|
message: err.message || "Send OTP failed. Try again later.",
|
|
color: "red",
|
|
});
|
|
}
|
|
}
|
|
|
|
async function handleVerifyOtp() {
|
|
try {
|
|
await verifyOtp(otp);
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
const regenerateCaptcha = async () => {
|
|
const newCaptcha = await generateCaptcha();
|
|
setCaptcha(newCaptcha);
|
|
setCaptchaInput("");
|
|
};
|
|
|
|
useEffect(() => {
|
|
let interval: number | undefined;
|
|
if (timerActive && countdown > 0) {
|
|
interval = window.setInterval(() => {
|
|
setCountdown((prev) => prev - 1);
|
|
}, 1000);
|
|
}
|
|
if (countdown === 0) {
|
|
if (interval) clearInterval(interval);
|
|
setTimerActive(false);
|
|
}
|
|
return () => {
|
|
if (interval) clearInterval(interval);
|
|
};
|
|
}, [timerActive, countdown]);
|
|
|
|
useEffect(() => {
|
|
regenerateCaptcha();
|
|
FetchDailyLimit();
|
|
}, []);
|
|
|
|
const handleSubmit = async () => {
|
|
if (step === "form") {
|
|
if (!limit || !captchaInput) {
|
|
notifications.show({
|
|
title: "Missing Field",
|
|
message: "Please fill all mandatory fields.",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
if (isNaN(Number(limit)) || Number(limit) <= 0) {
|
|
notifications.show({
|
|
title: "Invalid Limit",
|
|
message: "Please enter a valid positive numeric transaction limit.",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (captchaInput !== captcha) {
|
|
notifications.show({
|
|
title: "Invalid Captcha",
|
|
message: "Please enter correct Captcha",
|
|
color: "red",
|
|
});
|
|
regenerateCaptcha();
|
|
return;
|
|
}
|
|
|
|
await handleSendOtp();
|
|
setStep("otp");
|
|
return;
|
|
}
|
|
|
|
if (step === "otp") {
|
|
const verified = await handleVerifyOtp();
|
|
if (!verified) {
|
|
notifications.show({
|
|
title: "Invalid OTP",
|
|
message: "The OTP entered does not match.",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
setOtpValidated(true);
|
|
setStep("final");
|
|
notifications.show({
|
|
title: "OTP Verified",
|
|
message: "OTP has been successfully verified.",
|
|
color: "green",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (step === "final") {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) {
|
|
router.push("/login");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("/api/customer/daily-limit", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Login-Type": "IB",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
amount: Number(limit),
|
|
}),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.message || "Failed to set transaction limit");
|
|
}
|
|
|
|
notifications.show({
|
|
title: "Success",
|
|
message: `Transaction limit set successfully to ₹${limit}.`,
|
|
color: "green",
|
|
});
|
|
resetForm();
|
|
await FetchDailyLimit(); //refresh
|
|
const otp_sended = await sendOtp({ type: "TLIMIT_SET", amount: Number(limit) });
|
|
|
|
} catch (err: any) {
|
|
notifications.show({
|
|
title: "Error",
|
|
message: err.message || "Server error, please try again later",
|
|
color: "red",
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setLimit("");
|
|
setCaptchaInput("");
|
|
setOtp("");
|
|
setOtpValidated(false);
|
|
setStep("form");
|
|
regenerateCaptcha();
|
|
};
|
|
|
|
return (
|
|
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
|
<Title order={3} mb="sm">
|
|
Set Transaction Limit
|
|
</Title>
|
|
|
|
<div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
|
|
<Group grow>
|
|
<TextInput
|
|
label="Transaction Limit"
|
|
placeholder="Enter your transaction limit"
|
|
value={limit}
|
|
onChange={(e) => {
|
|
const val = e.currentTarget.value;
|
|
|
|
// Allow only digits AND max value 500000
|
|
if (/^\d*$/.test(val)) {
|
|
const num = Number(val);
|
|
if (num <= 500000) {
|
|
setLimit(val);
|
|
}
|
|
}
|
|
}}
|
|
leftSection={icon}
|
|
withAsterisk
|
|
mb="sm"
|
|
readOnly={step !== "form"}
|
|
/>
|
|
|
|
</Group>
|
|
{dailyLimit !== null ? (
|
|
<Text size="xs" c="green">
|
|
Your transaction limit per day is Rs. {dailyLimit.toFixed(2)}
|
|
</Text>
|
|
) : (
|
|
<Text size="xs" c="red">
|
|
• No daily limit set for this user
|
|
</Text>
|
|
)}
|
|
{/* CAPTCHA */}
|
|
<div style={{ marginTop: 5 }}>
|
|
<label
|
|
style={{ display: "block", marginBottom: 4, fontSize: "14px" }}
|
|
>
|
|
Enter CAPTCHA <span style={{ color: "red" }}>*</span>
|
|
</label>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
marginBottom: 5,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "18px",
|
|
letterSpacing: "3px",
|
|
background: "#f3f4f6",
|
|
padding: "6px 12px",
|
|
borderRadius: "6px",
|
|
border: "1px solid #d1d5db",
|
|
userSelect: "none",
|
|
textDecoration: "line-through",
|
|
fontFamily: "Verdana",
|
|
}}
|
|
>
|
|
{captcha}
|
|
</div>
|
|
|
|
<Button
|
|
size="xs"
|
|
variant="outline"
|
|
onClick={regenerateCaptcha}
|
|
style={{ height: 30, padding: "0 10px", lineHeight: "1" }}
|
|
disabled={step !== "form"}
|
|
>
|
|
Refresh
|
|
</Button>
|
|
|
|
<TextInput
|
|
placeholder="Enter above text"
|
|
value={captchaInput}
|
|
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
|
withAsterisk
|
|
style={{ flexGrow: 1 }}
|
|
readOnly={step !== "form"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Group grow>
|
|
{step !== "form" && (
|
|
<Group gap="xs" align="flex-end">
|
|
<TextInput
|
|
label="OTP"
|
|
placeholder="Enter OTP"
|
|
value={otp}
|
|
maxLength={6}
|
|
onChange={(e) => setOtp(e.currentTarget.value)}
|
|
withAsterisk
|
|
disabled={otpValidated}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
{!otpValidated &&
|
|
(timerActive ? (
|
|
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
|
|
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>
|
|
</div>
|
|
|
|
<Group mt="md" gap="sm">
|
|
<Button onClick={handleSubmit}>
|
|
{step === "form" && "Submit"}
|
|
{step === "otp" && "Validate OTP"}
|
|
{step === "final" && "Set Limit"}
|
|
</Button>
|
|
<Button variant="outline" color="gray" onClick={resetForm}>
|
|
Reset
|
|
</Button>
|
|
</Group>
|
|
|
|
<Text size="sm" style={{ marginTop: "40px" }}>
|
|
<Text span c="red" fw={600}>
|
|
Note :{" "}
|
|
</Text>
|
|
<Text span>
|
|
Please enter your desired transaction limit. OTP verification is required to
|
|
confirm changes.
|
|
</Text>
|
|
</Text>
|
|
</Paper>
|
|
);
|
|
}
|