refactor: unified transaction url.
feat: modify admin pages.
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
|
||||
import { Button, Divider, Group, List, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { generateOTP } from '@/app/OTPGenerator';
|
||||
import { IconAlertTriangle } from "@tabler/icons-react";
|
||||
|
||||
interface accountData {
|
||||
stAccountNo: string;
|
||||
@@ -17,6 +18,7 @@ export default function SendToBeneficiaryOthers() {
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
const [accountData, setAccountData] = useState<accountData[]>([]);
|
||||
const [beneficiaryData, setBeneficiaryData] = useState<any[]>([]);
|
||||
const [showIntroModal, setShowIntroModal] = useState(true);
|
||||
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
||||
const [beneficiaryAcc, setBeneficiaryAcc] = useState<string | null>(null);
|
||||
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
|
||||
@@ -287,6 +289,8 @@ export default function SendToBeneficiaryOthers() {
|
||||
setIsSubmitting(false);
|
||||
setShowTxnPassword(false);
|
||||
setShowOtpField(false);
|
||||
setOtp('');
|
||||
setTxnPassword('');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -294,6 +298,58 @@ export default function SendToBeneficiaryOthers() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={showIntroModal}
|
||||
onClose={() => setShowIntroModal(false)}
|
||||
centered
|
||||
withCloseButton={false} // force them to press OK
|
||||
>
|
||||
<Stack gap={1}>
|
||||
<Title order={4} style={{ textAlign: "center" }}>Important Note</Title>
|
||||
<Text size="sm">• <strong>IMPS</strong> is available 24X7. Limit: up to ₹5,00,000. Money is transfer instantly.</Text>
|
||||
<Text size="sm">• <strong>NEFT</strong> is available 24x7. Can be used for any amount but not instant.</Text>
|
||||
<Text size="sm">• <strong>RTGS</strong> is for ₹2,00,000 and above. Available during banking hours.As per directions of RBI, RTGS transactions are subjected to the following{" "}
|
||||
<strong>Time Varying Tariff</strong> in addition to the existing <strong>RTGS</strong>
|
||||
Commission. The tariff will be calculated based on the time of completion
|
||||
of transaction.</Text>
|
||||
<List
|
||||
spacing="xs"
|
||||
size="sm"
|
||||
icon={
|
||||
<ThemeIcon color="red" size={20} radius="xl">
|
||||
<IconAlertTriangle size={14} />
|
||||
</ThemeIcon>
|
||||
}
|
||||
>
|
||||
<List.Item>
|
||||
From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
|
||||
<strong>₹0.00</strong>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
|
||||
<strong>₹1.00</strong>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
|
||||
</List.Item>
|
||||
</List>
|
||||
<Divider my="sm" variant="dashed" />
|
||||
<Text size="xs" c="blue">
|
||||
• Minimum Transfer Amount on this Day is Rs. 1.00
|
||||
</Text>
|
||||
<Text size="xs" c="blue">
|
||||
• Maximum Transfer Limit per Day is Rs. 500000.00
|
||||
</Text>
|
||||
<Text size="xs" c="blue">
|
||||
• Available Transfer Amount on this Day is Rs. 500000.00
|
||||
</Text>
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button color="blue" onClick={() => setShowIntroModal(false)}>
|
||||
Okay
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
<Modal
|
||||
opened={showConfirmModel}
|
||||
onClose={() => setConfirmModel(false)}
|
||||
@@ -330,133 +386,178 @@ export default function SendToBeneficiaryOthers() {
|
||||
</Group>
|
||||
</Modal>
|
||||
{/* main content */}
|
||||
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
|
||||
<Stack gap={5} justify="flex-start">
|
||||
<Group grow gap='xs' >
|
||||
<Select
|
||||
label="Select Debit Account Number"
|
||||
placeholder="Choose account number"
|
||||
data={accountOptions}
|
||||
value={selectedAccNo}
|
||||
onChange={setSelectedAccNo}
|
||||
withAsterisk
|
||||
readOnly={isVisibilityLocked}
|
||||
/>
|
||||
<Select
|
||||
label="Beneficiary Account No"
|
||||
placeholder="Choose beneficiary account number"
|
||||
data={benAccountOption}
|
||||
value={beneficiaryAcc}
|
||||
onChange={handleBeneficiary}
|
||||
withAsterisk
|
||||
readOnly={isVisibilityLocked}
|
||||
nothingFoundMessage='No account found'
|
||||
/>
|
||||
<TextInput
|
||||
label="Beneficiary Name"
|
||||
value={beneficiaryName ? beneficiaryName : ""}
|
||||
disabled
|
||||
readOnly
|
||||
withAsterisk
|
||||
/>
|
||||
<TextInput
|
||||
label="Beneficiary IFSC Code"
|
||||
value={beneficiaryIFSC ? beneficiaryIFSC : ""}
|
||||
disabled
|
||||
readOnly
|
||||
withAsterisk
|
||||
/>
|
||||
</Group>
|
||||
<Group gap='xs' >
|
||||
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
|
||||
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group grow gap='xs'>
|
||||
<Radio.Group
|
||||
name="payment-mode"
|
||||
label="Select Payment Method"
|
||||
value={paymentMode}
|
||||
onChange={setPaymentMode}
|
||||
withAsterisk
|
||||
readOnly={isVisibilityLocked}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<Radio value="IMPS" label="IMPS" />
|
||||
<Radio value="RTGS" label="RTGS" />
|
||||
<Radio value="NEFT" label="NEFT" />
|
||||
</Group>
|
||||
<Text size="xs" c="red">
|
||||
{paymentMode === "IMPS" && "IMPS is available 24X7. Limit: up to ₹2,00,000. Money is transfer instantly. "}
|
||||
{paymentMode === "RTGS" && "RTGS is for ₹2,00,000 and above. Available during banking hours."}
|
||||
{paymentMode === "NEFT" && "NEFT is available 24x7. Can be used for any amount but not instant."}
|
||||
{!showIntroModal && (
|
||||
<div style={{ maxHeight: "290px", overflowY: "auto" }}>
|
||||
<Stack gap={5} justify="flex-start">
|
||||
<Group grow gap='xs' >
|
||||
<Select
|
||||
label="Select Debit Account Number"
|
||||
placeholder="Choose account number"
|
||||
data={accountOptions}
|
||||
value={selectedAccNo}
|
||||
onChange={setSelectedAccNo}
|
||||
withAsterisk
|
||||
readOnly={isVisibilityLocked}
|
||||
/>
|
||||
<Select
|
||||
label="Beneficiary Account No"
|
||||
placeholder="Choose beneficiary account number"
|
||||
data={benAccountOption}
|
||||
value={beneficiaryAcc}
|
||||
onChange={handleBeneficiary}
|
||||
withAsterisk
|
||||
readOnly={isVisibilityLocked}
|
||||
nothingFoundMessage='No account found'
|
||||
/>
|
||||
<TextInput
|
||||
label="Beneficiary Name"
|
||||
value={beneficiaryName ? beneficiaryName : ""}
|
||||
disabled
|
||||
readOnly
|
||||
withAsterisk
|
||||
/>
|
||||
<TextInput
|
||||
label="Beneficiary IFSC Code"
|
||||
value={beneficiaryIFSC ? beneficiaryIFSC : ""}
|
||||
disabled
|
||||
readOnly
|
||||
withAsterisk
|
||||
/>
|
||||
</Group>
|
||||
<Group gap='xs' >
|
||||
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
|
||||
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
|
||||
</Text>
|
||||
</Radio.Group>
|
||||
|
||||
<TextInput
|
||||
label="Amount"
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => {
|
||||
let input = e.currentTarget.value;
|
||||
if (/^\d*\.?\d{0,2}$/.test(input))
|
||||
setAmount(input);
|
||||
}}
|
||||
error={getAmountError()}
|
||||
leftSection="₹"
|
||||
withAsterisk
|
||||
readOnly={showOtpField}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Remarks"
|
||||
placeholder="Enter remarks"
|
||||
value={remarks}
|
||||
onChange={(e) => {
|
||||
let input = e.currentTarget.value;
|
||||
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
|
||||
setRemarks(input)
|
||||
}}
|
||||
maxLength={50}
|
||||
withAsterisk
|
||||
readOnly={showOtpField}
|
||||
/>
|
||||
</Group>
|
||||
<Group grow>
|
||||
{showOtpField && (
|
||||
<TextInput
|
||||
label="OTP"
|
||||
placeholder="Enter OTP"
|
||||
type="otp"
|
||||
value={otp}
|
||||
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||
</Group>
|
||||
<Group grow gap='xs'>
|
||||
<Radio.Group
|
||||
name="payment-mode"
|
||||
label="Select Payment Method"
|
||||
value={paymentMode}
|
||||
onChange={setPaymentMode}
|
||||
withAsterisk
|
||||
disabled={showTxnPassword}
|
||||
/>
|
||||
)}
|
||||
{showTxnPassword && (
|
||||
readOnly={isVisibilityLocked}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<Radio value="IMPS" label="IMPS" />
|
||||
<Radio value="RTGS" label="RTGS" />
|
||||
<Radio value="NEFT" label="NEFT" />
|
||||
</Group>
|
||||
<Text size="xs" c="red">
|
||||
{paymentMode === "IMPS" && "IMPS is available 24X7. Limit: up to ₹2,00,000. Money is transfer instantly. "}
|
||||
{paymentMode === "RTGS" && "RTGS is for ₹2,00,000 and above. Available during banking hours."}
|
||||
{paymentMode === "NEFT" && "NEFT is available 24x7. Can be used for any amount but not instant."}
|
||||
</Text>
|
||||
</Radio.Group>
|
||||
|
||||
<TextInput
|
||||
label="Transaction Password"
|
||||
placeholder="Enter transaction password"
|
||||
type="password"
|
||||
value={txnPassword}
|
||||
onChange={(e) => setTxnPassword(e.currentTarget.value)}
|
||||
label="Amount"
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => {
|
||||
let input = e.currentTarget.value;
|
||||
if (/^\d*\.?\d{0,2}$/.test(input))
|
||||
setAmount(input);
|
||||
}}
|
||||
error={getAmountError()}
|
||||
leftSection="₹"
|
||||
withAsterisk
|
||||
readOnly={showOtpField}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
<Group justify="flex-start">
|
||||
<Button
|
||||
variant="filled"
|
||||
color="blue"
|
||||
onClick={handleProceed}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</div >
|
||||
|
||||
<TextInput
|
||||
label="Remarks"
|
||||
placeholder="Enter remarks"
|
||||
value={remarks}
|
||||
onChange={(e) => {
|
||||
let input = e.currentTarget.value;
|
||||
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
|
||||
setRemarks(input)
|
||||
}}
|
||||
maxLength={50}
|
||||
withAsterisk
|
||||
readOnly={showOtpField}
|
||||
/>
|
||||
</Group>
|
||||
<Group grow>
|
||||
{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">
|
||||
<Button
|
||||
variant="filled"
|
||||
color="blue"
|
||||
onClick={handleProceed}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
|
||||
</Button>
|
||||
</Group>
|
||||
<Stack gap={1} mt="xs">
|
||||
{paymentMode === "RTGS" &&
|
||||
<>
|
||||
<Text size="xs" >
|
||||
• As per directions of RBI, RTGS transactions are subjected to the following{" "}
|
||||
<strong>Time Varying Tariff</strong> in addition to the existing RTGS
|
||||
Commission. The tariff will be calculated based on the time of completion
|
||||
of transaction.
|
||||
</Text>
|
||||
<List
|
||||
spacing="xs"
|
||||
size="sm"
|
||||
// icon={
|
||||
// <ThemeIcon color="red" size={20} radius="xl">
|
||||
// <IconAlertTriangle size={14} />
|
||||
// </ThemeIcon>
|
||||
// }
|
||||
>
|
||||
<List.Item>
|
||||
From <strong>09:00 hrs</strong> to <strong>12:00 hrs</strong> →{" "}
|
||||
<strong>₹0.00</strong>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
After <strong>12:00 hrs</strong> up to <strong>15:30 hrs</strong> →{" "}
|
||||
<strong>₹1.00</strong>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
After <strong>15:30 hrs</strong> → <strong>₹5.00</strong>
|
||||
</List.Item>
|
||||
</List>
|
||||
</>
|
||||
}
|
||||
<Text size="xs" c="dimmed">
|
||||
• Minimum Transfer Limit per Day is Rs. 1.00
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
• Maximum Transfer Limit per Day is Rs. 500000.00
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
• Available Transfer Amount on this Day is Rs. 500000.00
|
||||
</Text>
|
||||
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div >
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user