fixing tranfer fee
This commit is contained in:
bagusajisaputroo
@ -90,6 +90,10 @@ const AddFeeDialog = () => {
|
||||
id: customer.id,
|
||||
name: customer.username
|
||||
}));
|
||||
|
||||
const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
|
||||
const [openCreditDestination, setOpenCreditDestination] = useState(false);
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const initialState = {
|
||||
name: '',
|
||||
@ -120,6 +124,16 @@ const AddFeeDialog = () => {
|
||||
setTransactionTypeName('');
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
setCustomerSearchTerm('');
|
||||
setOpenCreditDestination(false);
|
||||
setOpenDeductOrigin(false);
|
||||
setOpen(false);
|
||||
handleEditFeeDialog(false, null);
|
||||
};
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
|
||||
const parsedUser = getAuth()?.user;
|
||||
@ -376,7 +390,15 @@ const AddFeeDialog = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}>
|
||||
<Dialog
|
||||
open={showAddFeeDialog}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
handleAddFeeDialog(open);
|
||||
handleCloseDialog();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
@ -595,16 +617,15 @@ const AddFeeDialog = () => {
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
{openDeductOrigin && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
@ -632,11 +653,8 @@ const AddFeeDialog = () => {
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
deduct_origin: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
setFormField({ ...formField, deduct_origin: customer.id });
|
||||
setOpenDeductOrigin(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
@ -706,17 +724,16 @@ const AddFeeDialog = () => {
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
onClick={() => setOpenCreditDestination(!openCreditDestination)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find(
|
||||
(customer) => customer.id === formField.credit_destination
|
||||
)?.username || 'Search customer...'}
|
||||
</span>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
{openCreditDestination && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
@ -748,7 +765,7 @@ const AddFeeDialog = () => {
|
||||
...formField,
|
||||
credit_destination: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
setOpenCreditDestination(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import {
|
||||
@ -62,6 +61,8 @@ const EditFeeDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { GetData, PutData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
|
||||
const [openCreditDestination, setOpenCreditDestination] = useState(false);
|
||||
|
||||
const [wallets, setWallets] = useState<WalletProps[]>([]);
|
||||
const [customers, setCustomers] = useState<CustomerProps[]>([]);
|
||||
@ -326,7 +327,8 @@ const EditFeeDialog = () => {
|
||||
status_include: response.data.status_include || '',
|
||||
deduct_from: response.data.deduct_from || '',
|
||||
deduct_from_account: response.data.deduct_from_account?.id || '',
|
||||
deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
|
||||
deduct_origin:
|
||||
response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
|
||||
credit_to: response.data.credit_to || '',
|
||||
credit_destination:
|
||||
response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
|
||||
@ -361,22 +363,24 @@ const EditFeeDialog = () => {
|
||||
hasFetchedRef.current = false;
|
||||
}
|
||||
}, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
|
||||
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
setCustomerSearchTerm('');
|
||||
setOpenCreditDestination(false);
|
||||
setOpenDeductOrigin(false);
|
||||
setOpen(false);
|
||||
handleEditFeeDialog(false, null);
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditFeeDialog) {
|
||||
setCustomerSearchTerm('');
|
||||
setOpen(false);
|
||||
}
|
||||
}, [showEditFeeDialog]);
|
||||
|
||||
|
||||
const renderSelectWithLoading = (
|
||||
value: string,
|
||||
onChangeHandler: (value: string) => void,
|
||||
@ -645,78 +649,68 @@ const EditFeeDialog = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{formField.deduct_from === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</div>
|
||||
{formField.deduct_from === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{openDeductOrigin && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({ ...formField, deduct_origin: customer.id });
|
||||
setOpenDeductOrigin(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
deduct_origin: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
@ -756,79 +750,76 @@ const EditFeeDialog = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{formField.credit_to === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find(
|
||||
(customer) => customer.id === formField.credit_destination
|
||||
)?.username || 'Search customer...'}
|
||||
</span>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</div>
|
||||
{formField.credit_to === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenCreditDestination(!openCreditDestination)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.credit_destination)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{openCreditDestination && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
credit_destination: customer.id
|
||||
});
|
||||
setOpenCreditDestination(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
credit_destination: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
|
||||
Reference in New Issue
Block a user