feat : merge for production movement
This commit is contained in:
@@ -5,7 +5,7 @@ import {TextInput,Button,Select,Title,Paper,Grid,Group,Radio,Text,PasswordInput}
|
|||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { notifications } from '@mantine/notifications';
|
import { notifications } from '@mantine/notifications';
|
||||||
import AddBeneficiaryOthers from './addBeneficiaryOthers';
|
import AddBeneficiaryOthers from './addBeneficiaryOthers';
|
||||||
import { generateOTP } from '@/app/OTPGenerator';
|
|
||||||
|
|
||||||
const bankOptions = [
|
const bankOptions = [
|
||||||
{ value: 'KCCB', label: 'KCCB - The Kangra Central Co-Operative Bank' },
|
{ value: 'KCCB', label: 'KCCB - The Kangra Central Co-Operative Bank' },
|
||||||
@@ -30,7 +30,6 @@ const AddBeneficiary: React.FC = () => {
|
|||||||
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
|
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
|
||||||
|
|
||||||
const handleGenerateOtp = async () => {
|
const handleGenerateOtp = async () => {
|
||||||
// const value = await generateOTP(6);
|
|
||||||
const value = "123456"; // Or generate a random OTP
|
const value = "123456"; // Or generate a random OTP
|
||||||
setGeneratedOtp(value);
|
setGeneratedOtp(value);
|
||||||
return value;
|
return value;
|
||||||
|
|||||||
@@ -1,451 +1,451 @@
|
|||||||
"use client";
|
// "use client";
|
||||||
|
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
// import React, { useEffect, useRef, useState } from "react";
|
||||||
import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
|
// import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
|
||||||
import { notifications } from "@mantine/notifications";
|
// import { notifications } from "@mantine/notifications";
|
||||||
import { useRouter } from "next/navigation";
|
// import { useRouter } from "next/navigation";
|
||||||
import { generateOTP } from '@/app/OTPGenerator';
|
|
||||||
|
|
||||||
interface accountData {
|
|
||||||
stAccountNo: string;
|
|
||||||
stAccountType: string;
|
|
||||||
stAvailableBalance: string;
|
|
||||||
custname: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function OutsideQuickPay() {
|
// interface accountData {
|
||||||
const router = useRouter();
|
// stAccountNo: string;
|
||||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
// stAccountType: string;
|
||||||
const [accountData, setAccountData] = useState<accountData[]>([]);
|
// stAvailableBalance: string;
|
||||||
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
// custname: string;
|
||||||
const [beneficiaryAcc, setBeneficiaryAcc] = useState("");
|
// }
|
||||||
const [showPayeeAcc, setShowPayeeAcc] = useState(true);
|
|
||||||
const [confirmBeneficiaryAcc, setConfirmBeneficiaryAcc] = useState("");
|
|
||||||
const [paymentMode, setPaymentMode] = useState('IMPS');
|
|
||||||
const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
|
|
||||||
const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
|
|
||||||
const [amount, setAmount] = useState("");
|
|
||||||
const [remarks, setRemarks] = useState("");
|
|
||||||
const [showConfirmModel, setConfirmModel] = useState(false);
|
|
||||||
const [showTxnPassword, setShowTxnPassword] = useState(false);
|
|
||||||
const [txnPassword, setTxnPassword] = useState("");
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null);
|
|
||||||
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
|
|
||||||
const [showOtpField, setShowOtpField] = useState(false);
|
|
||||||
const [otp, setOtp] = useState("");
|
|
||||||
const [generateOtp, setGenerateOtp] = useState("");
|
|
||||||
|
|
||||||
async function handleGenerateOtp() {
|
// export default function OutsideQuickPay() {
|
||||||
// const value = await generateOTP(6);
|
// const router = useRouter();
|
||||||
const value = "123456";
|
// const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||||
setGenerateOtp(value);
|
// const [accountData, setAccountData] = useState<accountData[]>([]);
|
||||||
return value;
|
// const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
||||||
}
|
// const [beneficiaryAcc, setBeneficiaryAcc] = useState("");
|
||||||
|
// const [showPayeeAcc, setShowPayeeAcc] = useState(true);
|
||||||
|
// const [confirmBeneficiaryAcc, setConfirmBeneficiaryAcc] = useState("");
|
||||||
|
// const [paymentMode, setPaymentMode] = useState('IMPS');
|
||||||
|
// const [beneficiaryType, setBeneficiaryType] = useState<string | null>(null);
|
||||||
|
// const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
|
||||||
|
// const [amount, setAmount] = useState("");
|
||||||
|
// const [remarks, setRemarks] = useState("");
|
||||||
|
// const [showConfirmModel, setConfirmModel] = useState(false);
|
||||||
|
// const [showTxnPassword, setShowTxnPassword] = useState(false);
|
||||||
|
// const [txnPassword, setTxnPassword] = useState("");
|
||||||
|
// const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
// const [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null);
|
||||||
|
// const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
|
||||||
|
// const [showOtpField, setShowOtpField] = useState(false);
|
||||||
|
// const [otp, setOtp] = useState("");
|
||||||
|
// const [generateOtp, setGenerateOtp] = useState("");
|
||||||
|
|
||||||
const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
|
// async function handleGenerateOtp() {
|
||||||
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
|
// // const value = await generateOTP(6);
|
||||||
|
// const value = "123456";
|
||||||
|
// setGenerateOtp(value);
|
||||||
|
// return value;
|
||||||
|
// }
|
||||||
|
|
||||||
const accountOptions = accountData.map((acc) => ({
|
// const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
|
||||||
value: acc.stAccountNo,
|
// const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
|
||||||
label: `${acc.stAccountNo} (${acc.stAccountType})`,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const FetchAccountDetails = async () => {
|
// const accountOptions = accountData.map((acc) => ({
|
||||||
try {
|
// value: acc.stAccountNo,
|
||||||
const token = localStorage.getItem("access_token");
|
// label: `${acc.stAccountNo} (${acc.stAccountType})`,
|
||||||
const response = await fetch("/api/customer", {
|
// }));
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const data = await response.json();
|
|
||||||
if (response.ok && Array.isArray(data)) {
|
|
||||||
const filterSAaccount = data.filter((acc) => ['SA', 'SB'].includes(acc.stAccountType));
|
|
||||||
setAccountData(filterSAaccount);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
notifications.show({
|
|
||||||
withBorder: true,
|
|
||||||
color: "red",
|
|
||||||
title: "Please try again later",
|
|
||||||
message: "Unable to Fetch, Please try again later",
|
|
||||||
autoClose: 5000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
// const FetchAccountDetails = async () => {
|
||||||
const token = localStorage.getItem("access_token");
|
// try {
|
||||||
if (!token) {
|
// const token = localStorage.getItem("access_token");
|
||||||
setAuthorized(false);
|
// const response = await fetch("/api/customer", {
|
||||||
router.push("/login");
|
// method: "GET",
|
||||||
} else {
|
// headers: {
|
||||||
setAuthorized(true);
|
// "Content-Type": "application/json",
|
||||||
}
|
// Authorization: `Bearer ${token}`,
|
||||||
}, []);
|
// },
|
||||||
|
// });
|
||||||
|
// const data = await response.json();
|
||||||
|
// if (response.ok && Array.isArray(data)) {
|
||||||
|
// const filterSAaccount = data.filter((acc) => ['SA', 'SB'].includes(acc.stAccountType));
|
||||||
|
// setAccountData(filterSAaccount);
|
||||||
|
// }
|
||||||
|
// } catch {
|
||||||
|
// notifications.show({
|
||||||
|
// withBorder: true,
|
||||||
|
// color: "red",
|
||||||
|
// title: "Please try again later",
|
||||||
|
// message: "Unable to Fetch, Please try again later",
|
||||||
|
// autoClose: 5000,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
if (authorized) {
|
// const token = localStorage.getItem("access_token");
|
||||||
FetchAccountDetails();
|
// if (!token) {
|
||||||
}
|
// setAuthorized(false);
|
||||||
}, [authorized]);
|
// router.push("/login");
|
||||||
|
// } else {
|
||||||
|
// setAuthorized(true);
|
||||||
|
// }
|
||||||
|
// }, []);
|
||||||
|
|
||||||
async function handleValidate() {
|
// useEffect(() => {
|
||||||
if (!selectedAccNo || !beneficiaryAcc ||
|
// if (authorized) {
|
||||||
!confirmBeneficiaryAcc
|
// FetchAccountDetails();
|
||||||
) {
|
// }
|
||||||
notifications.show({
|
// }, [authorized]);
|
||||||
title: "Validation Error",
|
|
||||||
message: "Please fill debit account, beneficiary account number and confirm beneficiary account number",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (beneficiaryAcc.length < 10 || beneficiaryAcc.length > 17) {
|
|
||||||
notifications.show({
|
|
||||||
title: "Invalid Account Number",
|
|
||||||
message: "Please Enter valid account Number",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (beneficiaryAcc !== confirmBeneficiaryAcc) {
|
|
||||||
notifications.show({
|
|
||||||
title: "Mismatch",
|
|
||||||
message: "Beneficiary account numbers do not match",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
// async function handleValidate() {
|
||||||
const token = localStorage.getItem("access_token");
|
// if (!selectedAccNo || !beneficiaryAcc ||
|
||||||
// Need to change with proper API
|
// !confirmBeneficiaryAcc
|
||||||
const response = await fetch(`/api/beneficiary/validate/within-bank?accountNumber=${beneficiaryAcc}`, {
|
// ) {
|
||||||
method: "GET",
|
// notifications.show({
|
||||||
headers: {
|
// title: "Validation Error",
|
||||||
"Content-Type": "application/json",
|
// message: "Please fill debit account, beneficiary account number and confirm beneficiary account number",
|
||||||
Authorization: `Bearer ${token}`,
|
// color: "red",
|
||||||
},
|
// });
|
||||||
});
|
// return;
|
||||||
const data = await response.json();
|
// }
|
||||||
|
// if (beneficiaryAcc.length < 10 || beneficiaryAcc.length > 17) {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Invalid Account Number",
|
||||||
|
// message: "Please Enter valid account Number",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (beneficiaryAcc !== confirmBeneficiaryAcc) {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Mismatch",
|
||||||
|
// message: "Beneficiary account numbers do not match",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
if (response.ok && data?.name) {
|
// try {
|
||||||
setBeneficiaryName(data.name);
|
// const token = localStorage.getItem("access_token");
|
||||||
setValidationStatus("success");
|
// // Need to change with proper API
|
||||||
setIsVisibilityLocked(true);
|
// const response = await fetch(`/api/beneficiary/validate/within-bank?accountNumber=${beneficiaryAcc}`, {
|
||||||
} else {
|
// method: "GET",
|
||||||
setBeneficiaryName("Invalid account number");
|
// headers: {
|
||||||
setValidationStatus("error");
|
// "Content-Type": "application/json",
|
||||||
setBeneficiaryAcc("");
|
// Authorization: `Bearer ${token}`,
|
||||||
setConfirmBeneficiaryAcc("");
|
// },
|
||||||
}
|
// });
|
||||||
} catch {
|
// const data = await response.json();
|
||||||
setBeneficiaryName("Invalid account number");
|
|
||||||
setValidationStatus("error");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function handleProceed() {
|
// if (response.ok && data?.name) {
|
||||||
if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !paymentMode || !beneficiaryType || !amount || !remarks) {
|
// setBeneficiaryName(data.name);
|
||||||
notifications.show({
|
// setValidationStatus("success");
|
||||||
title: "Validation Error",
|
// setIsVisibilityLocked(true);
|
||||||
message: "Please fill all required fields",
|
// } else {
|
||||||
color: "red",
|
// setBeneficiaryName("Invalid account number");
|
||||||
});
|
// setValidationStatus("error");
|
||||||
return;
|
// setBeneficiaryAcc("");
|
||||||
}
|
// setConfirmBeneficiaryAcc("");
|
||||||
|
// }
|
||||||
|
// } catch {
|
||||||
|
// setBeneficiaryName("Invalid account number");
|
||||||
|
// setValidationStatus("error");
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
if (validationStatus !== "success") {
|
// async function handleProceed() {
|
||||||
notifications.show({
|
// if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !paymentMode || !beneficiaryType || !amount || !remarks) {
|
||||||
title: "Validation Required",
|
// notifications.show({
|
||||||
message: "Please validate beneficiary before proceeding",
|
// title: "Validation Error",
|
||||||
color: "red",
|
// message: "Please fill all required fields",
|
||||||
});
|
// color: "red",
|
||||||
return;
|
// });
|
||||||
}
|
// return;
|
||||||
if (parseInt(amount) <= 0) {
|
// }
|
||||||
notifications.show({
|
|
||||||
title: "Invalid amount",
|
|
||||||
message: "Amount Can not be less than Zero",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
|
|
||||||
}
|
// if (validationStatus !== "success") {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Validation Required",
|
||||||
|
// message: "Please validate beneficiary before proceeding",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (parseInt(amount) <= 0) {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Invalid amount",
|
||||||
|
// message: "Amount Can not be less than Zero",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
|
||||||
if (!showOtpField && !showTxnPassword && !showConfirmModel) {
|
// }
|
||||||
setConfirmModel(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!otp) {
|
// if (!showOtpField && !showTxnPassword && !showConfirmModel) {
|
||||||
notifications.show({
|
// setConfirmModel(true);
|
||||||
title: "Enter OTP",
|
// return;
|
||||||
message: "Please enter the OTP",
|
// }
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (otp !== generateOtp) {
|
|
||||||
notifications.show({
|
|
||||||
title: "Invalid OTP",
|
|
||||||
message: "The OTP entered does not match",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!showTxnPassword) {
|
// if (!otp) {
|
||||||
setShowTxnPassword(true);
|
// notifications.show({
|
||||||
return;
|
// title: "Enter OTP",
|
||||||
}
|
// message: "Please enter the OTP",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (otp !== generateOtp) {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Invalid OTP",
|
||||||
|
// message: "The OTP entered does not match",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
if (!txnPassword) {
|
// if (!showTxnPassword) {
|
||||||
notifications.show({
|
// setShowTxnPassword(true);
|
||||||
title: "Missing field",
|
// return;
|
||||||
message: "Please Enter Transaction Password Before Proceed",
|
// }
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
setIsSubmitting(true);
|
|
||||||
const token = localStorage.getItem("access_token");
|
|
||||||
// Need to change with proper API
|
|
||||||
const res = await fetch("/api/payment/transfer", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
fromAccount: selectedAccNo,
|
|
||||||
toAccount: beneficiaryAcc,
|
|
||||||
toAccountType: beneficiaryType,
|
|
||||||
amount: amount,
|
|
||||||
narration: remarks,
|
|
||||||
tpassword: txnPassword,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
const result = await res.json();
|
|
||||||
if (res.ok) {
|
|
||||||
notifications.show({
|
|
||||||
title: "Success",
|
|
||||||
message: "Transaction successful",
|
|
||||||
color: "green",
|
|
||||||
});
|
|
||||||
setShowTxnPassword(false);
|
|
||||||
setTxnPassword("");
|
|
||||||
setShowOtpField(false);
|
|
||||||
setOtp("");
|
|
||||||
setValidationStatus(null);
|
|
||||||
setBeneficiaryName(null);
|
|
||||||
} else {
|
|
||||||
notifications.show({
|
|
||||||
title: "Error",
|
|
||||||
message: result?.error || "Transaction failed",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
notifications.show({
|
|
||||||
title: "Error",
|
|
||||||
message: "Something went wrong",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!authorized) return null;
|
// if (!txnPassword) {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Missing field",
|
||||||
|
// message: "Please Enter Transaction Password Before Proceed",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// try {
|
||||||
|
// setIsSubmitting(true);
|
||||||
|
// const token = localStorage.getItem("access_token");
|
||||||
|
// // Need to change with proper API
|
||||||
|
// const res = await fetch("/api/payment/transfer", {
|
||||||
|
// method: "POST",
|
||||||
|
// headers: {
|
||||||
|
// "Content-Type": "application/json",
|
||||||
|
// Authorization: `Bearer ${token}`,
|
||||||
|
// },
|
||||||
|
// body: JSON.stringify({
|
||||||
|
// fromAccount: selectedAccNo,
|
||||||
|
// toAccount: beneficiaryAcc,
|
||||||
|
// toAccountType: beneficiaryType,
|
||||||
|
// amount: amount,
|
||||||
|
// narration: remarks,
|
||||||
|
// tpassword: txnPassword,
|
||||||
|
// }),
|
||||||
|
// });
|
||||||
|
// const result = await res.json();
|
||||||
|
// if (res.ok) {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Success",
|
||||||
|
// message: "Transaction successful",
|
||||||
|
// color: "green",
|
||||||
|
// });
|
||||||
|
// setShowTxnPassword(false);
|
||||||
|
// setTxnPassword("");
|
||||||
|
// setShowOtpField(false);
|
||||||
|
// setOtp("");
|
||||||
|
// setValidationStatus(null);
|
||||||
|
// setBeneficiaryName(null);
|
||||||
|
// } else {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Error",
|
||||||
|
// message: result?.error || "Transaction failed",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// } catch {
|
||||||
|
// notifications.show({
|
||||||
|
// title: "Error",
|
||||||
|
// message: "Something went wrong",
|
||||||
|
// color: "red",
|
||||||
|
// });
|
||||||
|
// } finally {
|
||||||
|
// setIsSubmitting(false);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
return (
|
// if (!authorized) return null;
|
||||||
<>
|
|
||||||
<Modal
|
|
||||||
opened={showConfirmModel}
|
|
||||||
onClose={() => setConfirmModel(false)}
|
|
||||||
// title="Confirm Transaction"
|
|
||||||
centered
|
|
||||||
>
|
|
||||||
<Stack>
|
|
||||||
<Title order={4}>Confirm Transaction</Title>
|
|
||||||
<Text><strong>Debit Account:</strong> {selectedAccNo}</Text>
|
|
||||||
<Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
|
|
||||||
<Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
|
|
||||||
<Text><strong>Amount:</strong> ₹ {amount}</Text>
|
|
||||||
<Text><strong>Remarks:</strong> {remarks}</Text>
|
|
||||||
</Stack>
|
|
||||||
<Group justify="flex-end" mt="md">
|
|
||||||
<Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
|
|
||||||
<Button
|
|
||||||
color="blue"
|
|
||||||
onClick={async () => {
|
|
||||||
setConfirmModel(false);
|
|
||||||
const otp = await handleGenerateOtp();
|
|
||||||
setShowOtpField(true);
|
|
||||||
notifications.show({
|
|
||||||
title: "OTP Sent",
|
|
||||||
message: `Check your registered device for OTP`,
|
|
||||||
color: "green",
|
|
||||||
autoClose: 5000,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
</Modal>
|
|
||||||
{/* main content */}
|
|
||||||
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
|
|
||||||
<Stack gap="xs">
|
|
||||||
<Group grow>
|
|
||||||
<Select
|
|
||||||
label="Select Debit Account Number"
|
|
||||||
placeholder="Choose account number"
|
|
||||||
data={accountOptions}
|
|
||||||
value={selectedAccNo}
|
|
||||||
onChange={setSelectedAccNo}
|
|
||||||
withAsterisk
|
|
||||||
readOnly={isVisibilityLocked}
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Payee Account No"
|
|
||||||
value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.currentTarget.value;
|
|
||||||
if (/^\d*$/.test(value)) {
|
|
||||||
setBeneficiaryAcc(value);
|
|
||||||
setShowPayeeAcc(true);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={() => setShowPayeeAcc(false)}
|
|
||||||
onFocus={() => setShowPayeeAcc(true)}
|
|
||||||
withAsterisk
|
|
||||||
readOnly={isVisibilityLocked}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextInput
|
// return (
|
||||||
label="Confirm Payee Account No"
|
// <>
|
||||||
value={confirmBeneficiaryAcc}
|
// <Modal
|
||||||
onChange={(e) => {
|
// opened={showConfirmModel}
|
||||||
const value = e.currentTarget.value;
|
// onClose={() => setConfirmModel(false)}
|
||||||
if (/^\d*$/.test(value)) {
|
// // title="Confirm Transaction"
|
||||||
setConfirmBeneficiaryAcc(value);
|
// centered
|
||||||
}
|
// >
|
||||||
}}
|
// <Stack>
|
||||||
// onCopy={(e) => e.preventDefault()}
|
// <Title order={4}>Confirm Transaction</Title>
|
||||||
// onPaste={(e) => e.preventDefault()}
|
// <Text><strong>Debit Account:</strong> {selectedAccNo}</Text>
|
||||||
// onCut={(e) => e.preventDefault()}
|
// <Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
|
||||||
withAsterisk
|
// <Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
|
||||||
readOnly={isVisibilityLocked}
|
// <Text><strong>Amount:</strong> ₹ {amount}</Text>
|
||||||
/>
|
// <Text><strong>Remarks:</strong> {remarks}</Text>
|
||||||
<TextInput
|
// </Stack>
|
||||||
label="Payee Name"
|
// <Group justify="flex-end" mt="md">
|
||||||
value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
|
// <Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
|
||||||
disabled
|
// <Button
|
||||||
readOnly
|
// color="blue"
|
||||||
withAsterisk
|
// onClick={async () => {
|
||||||
/>
|
// setConfirmModel(false);
|
||||||
</Group>
|
// const otp = await handleGenerateOtp();
|
||||||
<Group justify="space-between" >
|
// setShowOtpField(true);
|
||||||
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
|
// notifications.show({
|
||||||
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
|
// title: "OTP Sent",
|
||||||
</Text>
|
// message: `Check your registered device for OTP`,
|
||||||
<Group justify="center">
|
// color: "green",
|
||||||
{validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
|
// autoClose: 5000,
|
||||||
</Group>
|
// });
|
||||||
</Group>
|
// }}
|
||||||
<Group grow>
|
// >
|
||||||
<Radio.Group
|
// Confirm
|
||||||
name="payment-mode"
|
// </Button>
|
||||||
label="Select Payment Method"
|
// </Group>
|
||||||
value={paymentMode}
|
// </Modal>
|
||||||
onChange={setPaymentMode}
|
// {/* main content */}
|
||||||
withAsterisk
|
// <div style={{ maxHeight: "320px", overflowY: "auto" }}>
|
||||||
>
|
// <Stack gap="xs">
|
||||||
<Group>
|
// <Group grow>
|
||||||
<Radio value="IMPS" label="IMPS" />
|
// <Select
|
||||||
<Radio value="RTGS" label="RTGS" />
|
// label="Select Debit Account Number"
|
||||||
<Radio value="NEFT" label="NEFT" />
|
// placeholder="Choose account number"
|
||||||
</Group>
|
// data={accountOptions}
|
||||||
</Radio.Group>
|
// value={selectedAccNo}
|
||||||
|
// onChange={setSelectedAccNo}
|
||||||
|
// withAsterisk
|
||||||
|
// readOnly={isVisibilityLocked}
|
||||||
|
// />
|
||||||
|
// <TextInput
|
||||||
|
// label="Payee Account No"
|
||||||
|
// value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
|
||||||
|
// onChange={(e) => {
|
||||||
|
// const value = e.currentTarget.value;
|
||||||
|
// if (/^\d*$/.test(value)) {
|
||||||
|
// setBeneficiaryAcc(value);
|
||||||
|
// setShowPayeeAcc(true);
|
||||||
|
// }
|
||||||
|
// }}
|
||||||
|
// onBlur={() => setShowPayeeAcc(false)}
|
||||||
|
// onFocus={() => setShowPayeeAcc(true)}
|
||||||
|
// withAsterisk
|
||||||
|
// readOnly={isVisibilityLocked}
|
||||||
|
// />
|
||||||
|
|
||||||
<Select
|
// <TextInput
|
||||||
label="Payee Account Type"
|
// label="Confirm Payee Account No"
|
||||||
placeholder="Select type"
|
// value={confirmBeneficiaryAcc}
|
||||||
data={["Savings", "Current"]}
|
// onChange={(e) => {
|
||||||
value={beneficiaryType}
|
// const value = e.currentTarget.value;
|
||||||
onChange={setBeneficiaryType}
|
// if (/^\d*$/.test(value)) {
|
||||||
withAsterisk
|
// setConfirmBeneficiaryAcc(value);
|
||||||
readOnly={showOtpField}
|
// }
|
||||||
/>
|
// }}
|
||||||
|
// // onCopy={(e) => e.preventDefault()}
|
||||||
|
// // onPaste={(e) => e.preventDefault()}
|
||||||
|
// // onCut={(e) => e.preventDefault()}
|
||||||
|
// withAsterisk
|
||||||
|
// readOnly={isVisibilityLocked}
|
||||||
|
// />
|
||||||
|
// <TextInput
|
||||||
|
// label="Payee Name"
|
||||||
|
// value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
|
||||||
|
// disabled
|
||||||
|
// readOnly
|
||||||
|
// withAsterisk
|
||||||
|
// />
|
||||||
|
// </Group>
|
||||||
|
// <Group justify="space-between" >
|
||||||
|
// <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
|
||||||
|
// {selectedAccount ? selectedAccount.stAvailableBalance : 0}
|
||||||
|
// </Text>
|
||||||
|
// <Group justify="center">
|
||||||
|
// {validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
|
||||||
|
// </Group>
|
||||||
|
// </Group>
|
||||||
|
// <Group grow>
|
||||||
|
// <Radio.Group
|
||||||
|
// name="payment-mode"
|
||||||
|
// label="Select Payment Method"
|
||||||
|
// value={paymentMode}
|
||||||
|
// onChange={setPaymentMode}
|
||||||
|
// withAsterisk
|
||||||
|
// >
|
||||||
|
// <Group>
|
||||||
|
// <Radio value="IMPS" label="IMPS" />
|
||||||
|
// <Radio value="RTGS" label="RTGS" />
|
||||||
|
// <Radio value="NEFT" label="NEFT" />
|
||||||
|
// </Group>
|
||||||
|
// </Radio.Group>
|
||||||
|
|
||||||
<TextInput
|
// <Select
|
||||||
label="Amount"
|
// label="Payee Account Type"
|
||||||
type="number"
|
// placeholder="Select type"
|
||||||
value={amount}
|
// data={["Savings", "Current"]}
|
||||||
onChange={(e) => setAmount(e.currentTarget.value)}
|
// value={beneficiaryType}
|
||||||
error={
|
// onChange={setBeneficiaryType}
|
||||||
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
|
// withAsterisk
|
||||||
"Amount exceeds available balance" : false}
|
// readOnly={showOtpField}
|
||||||
withAsterisk
|
// />
|
||||||
readOnly={showOtpField}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextInput
|
// <TextInput
|
||||||
label="Remarks"
|
// label="Amount"
|
||||||
placeholder="Enter remarks"
|
// type="number"
|
||||||
value={remarks}
|
// value={amount}
|
||||||
onChange={(e) => setRemarks(e.currentTarget.value)}
|
// onChange={(e) => setAmount(e.currentTarget.value)}
|
||||||
withAsterisk
|
// error={
|
||||||
readOnly={showOtpField}
|
// selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
|
||||||
/>
|
// "Amount exceeds available balance" : false}
|
||||||
</Group>
|
// withAsterisk
|
||||||
<Group grow>
|
// readOnly={showOtpField}
|
||||||
{showOtpField && (
|
// />
|
||||||
<TextInput
|
|
||||||
label="OTP"
|
|
||||||
placeholder="Enter OTP"
|
|
||||||
type="otp"
|
|
||||||
value={otp}
|
|
||||||
onChange={(e) => setOtp(e.currentTarget.value)}
|
|
||||||
withAsterisk
|
|
||||||
disabled={showTxnPassword}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{showTxnPassword && (
|
|
||||||
<TextInput
|
|
||||||
label="Transaction Password"
|
|
||||||
placeholder="Enter transaction password"
|
|
||||||
type="password"
|
|
||||||
value={txnPassword}
|
|
||||||
onChange={(e) => setTxnPassword(e.currentTarget.value)}
|
|
||||||
withAsterisk
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
<Group justify="flex-start">
|
// <TextInput
|
||||||
<Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
|
// label="Remarks"
|
||||||
Validate
|
// placeholder="Enter remarks"
|
||||||
</Button>
|
// value={remarks}
|
||||||
<Button
|
// onChange={(e) => setRemarks(e.currentTarget.value)}
|
||||||
variant="filled"
|
// withAsterisk
|
||||||
color="blue"
|
// readOnly={showOtpField}
|
||||||
onClick={handleProceed}
|
// />
|
||||||
loading={isSubmitting}
|
// </Group>
|
||||||
disabled={validationStatus !== "success"}
|
// <Group grow>
|
||||||
>
|
// {showOtpField && (
|
||||||
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
|
// <TextInput
|
||||||
</Button>
|
// label="OTP"
|
||||||
</Group>
|
// placeholder="Enter OTP"
|
||||||
</Stack>
|
// type="otp"
|
||||||
</div>
|
// value={otp}
|
||||||
</>
|
// onChange={(e) => setOtp(e.currentTarget.value)}
|
||||||
);
|
// withAsterisk
|
||||||
}
|
// disabled={showTxnPassword}
|
||||||
|
// />
|
||||||
|
// )}
|
||||||
|
// {showTxnPassword && (
|
||||||
|
// <TextInput
|
||||||
|
// label="Transaction Password"
|
||||||
|
// placeholder="Enter transaction password"
|
||||||
|
// type="password"
|
||||||
|
// value={txnPassword}
|
||||||
|
// onChange={(e) => setTxnPassword(e.currentTarget.value)}
|
||||||
|
// withAsterisk
|
||||||
|
// />
|
||||||
|
// )}
|
||||||
|
// </Group>
|
||||||
|
|
||||||
|
// <Group justify="flex-start">
|
||||||
|
// <Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
|
||||||
|
// Validate
|
||||||
|
// </Button>
|
||||||
|
// <Button
|
||||||
|
// variant="filled"
|
||||||
|
// color="blue"
|
||||||
|
// onClick={handleProceed}
|
||||||
|
// loading={isSubmitting}
|
||||||
|
// disabled={validationStatus !== "success"}
|
||||||
|
// >
|
||||||
|
// {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
|
||||||
|
// </Button>
|
||||||
|
// </Group>
|
||||||
|
// </Stack>
|
||||||
|
// </div>
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|||||||
@@ -4,8 +4,6 @@ import React, { useEffect, useRef, useState } from "react";
|
|||||||
import { Button, Group, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
|
import { Button, Group, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
|
||||||
import { notifications } from "@mantine/notifications";
|
import { notifications } from "@mantine/notifications";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { generateOTP } from '@/app/OTPGenerator';
|
|
||||||
import OutsideQuickPay from "./outside_quick_pay";
|
|
||||||
import { IconRefresh } from "@tabler/icons-react";
|
import { IconRefresh } from "@tabler/icons-react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import img from '@/app/image/logo1.jpg'
|
import img from '@/app/image/logo1.jpg'
|
||||||
@@ -20,7 +18,6 @@ interface accountData {
|
|||||||
|
|
||||||
export default function QuickPay() {
|
export default function QuickPay() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
// const [bankType, setBankType] = useState("own");
|
|
||||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||||
const [accountData, setAccountData] = useState<accountData[]>([]);
|
const [accountData, setAccountData] = useState<accountData[]>([]);
|
||||||
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
||||||
@@ -237,14 +234,6 @@ export default function QuickPay() {
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// if (otp !== generateOtp) {
|
|
||||||
// notifications.show({
|
|
||||||
// title: "Invalid OTP",
|
|
||||||
// message: "The OTP entered does not match",
|
|
||||||
// color: "red",
|
|
||||||
// });
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
const verified = await handleVerifyOtp();
|
const verified = await handleVerifyOtp();
|
||||||
if (!verified) {
|
if (!verified) {
|
||||||
notifications.show({
|
notifications.show({
|
||||||
@@ -564,11 +553,6 @@ export default function QuickPay() {
|
|||||||
</Text>
|
</Text>
|
||||||
</Stack>
|
</Stack>
|
||||||
</div>
|
</div>
|
||||||
{/* ) : (
|
|
||||||
<div>
|
|
||||||
<OutsideQuickPay />
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
</Paper>
|
</Paper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -256,22 +256,6 @@ export default function SendToBeneficiaryOthers() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (!otp) {
|
|
||||||
// notifications.show({
|
|
||||||
// title: "Enter OTP",
|
|
||||||
// message: "Please enter the OTP",
|
|
||||||
// color: "red",
|
|
||||||
// });
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// if (otp !== generateOtp) {
|
|
||||||
// notifications.show({
|
|
||||||
// title: "Invalid OTP",
|
|
||||||
// message: "The OTP entered does not match",
|
|
||||||
// color: "red",
|
|
||||||
// });
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
if (showOtpField && !showTxnPassword) {
|
if (showOtpField && !showTxnPassword) {
|
||||||
if (!otp) {
|
if (!otp) {
|
||||||
notifications.show({
|
notifications.show({
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
// export function generateOTP(length: number) {
|
|
||||||
// const digits = '0123456789';
|
|
||||||
// let otp = '';
|
|
||||||
// otp += digits[Math.floor(Math.random() * 9)+1]; //first digit cannot be zero
|
|
||||||
// for (let i = 1; i < length; i++) {
|
|
||||||
// otp += digits[Math.floor(Math.random() * digits.length)];
|
|
||||||
// }
|
|
||||||
// // console.log("OTP generate :",otp);
|
|
||||||
// return otp;
|
|
||||||
// }
|
|
||||||
@@ -9,7 +9,6 @@ import logo from '@/app/image/logo1.jpg';
|
|||||||
import changePwdImage from '@/app/image/set_log_pass.jpg';
|
import changePwdImage from '@/app/image/set_log_pass.jpg';
|
||||||
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
|
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
|
||||||
import { generateCaptcha } from '@/app/captcha';
|
import { generateCaptcha } from '@/app/captcha';
|
||||||
import { generateOTP } from "../OTPGenerator";
|
|
||||||
import { sendOtp, verifyOtp } from "../_util/otp";
|
import { sendOtp, verifyOtp } from "../_util/otp";
|
||||||
//const [showOtpField, setShowOtpField] = useState(false);
|
//const [showOtpField, setShowOtpField] = useState(false);
|
||||||
|
|
||||||
|
|||||||
@@ -67,7 +67,6 @@ export default function SetTransactionPwd() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function handleGenerateOtp() {
|
async function handleGenerateOtp() {
|
||||||
// const value = await generateOTP(6);
|
|
||||||
const value = "123456";
|
const value = "123456";
|
||||||
setGenerateOtp(value);
|
setGenerateOtp(value);
|
||||||
setCountdown(60);
|
setCountdown(60);
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import NextImage from "next/image";
|
|||||||
import logo from '@/app/image/logo1.jpg';
|
import logo from '@/app/image/logo1.jpg';
|
||||||
import changePwdImage from '@/app/image/changepw.png';
|
import changePwdImage from '@/app/image/changepw.png';
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { generateOTP } from '@/app/OTPGenerator';
|
|
||||||
|
|
||||||
export default function ValidateUser() {
|
export default function ValidateUser() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -24,7 +24,6 @@ export default function ValidateUser() {
|
|||||||
{ cif: "11122233344", mobile: "9998887776" },
|
{ cif: "11122233344", mobile: "9998887776" },
|
||||||
];
|
];
|
||||||
async function handleGenerateOtp() {
|
async function handleGenerateOtp() {
|
||||||
// const value = await generateOTP(6);
|
|
||||||
const value = "123456";
|
const value = "123456";
|
||||||
setGenerateOtp(value);
|
setGenerateOtp(value);
|
||||||
return value;
|
return value;
|
||||||
|
|||||||
Reference in New Issue
Block a user