(null);
const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
@@ -110,7 +118,24 @@ const EditFeeDialog = () => {
};
const [formField, setFormField] = useState(initialState);
+ const useDebounce = (value:string, delay:number) => {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+ useEffect(() => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ }, [value, delay]);
+
+ return debouncedValue;
+};
+
+const debouncedDeductSearch = useDebounce(deductSearchTerm, 300);
+const debouncedCreditSearch = useDebounce(creditSearchTerm, 300);
useEffect(() => {
const updated_time = new Date();
const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -204,7 +229,6 @@ const EditFeeDialog = () => {
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
}
- // console.log(payload);
try {
const response = await PutData(
`${API_URL}/transactionfees/update/${selectedTransferFee}`,
@@ -262,31 +286,89 @@ const EditFeeDialog = () => {
if (!showEditFeeDialog) return;
fetchWallets();
}, [showEditFeeDialog, fetchWallets]);
-
- useEffect(() => {
- if (!showEditFeeDialog) return;
-
- const getCustomerList = async (sorting: any) => {
- setIsLoadingCustomers(true);
+ const searchDeductCustomers = useCallback(
+ async (searchTerm: string) => {
+ setIsSearchingCustomers(true);
try {
- sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
- const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
- limit: 100,
- page: 1,
- with_deleted: false,
- order_field: sorting[0].id,
- order_direction: sorting[0].desc ? 'DESC' : 'ASC'
- });
- setCustomers(response?.data.list || []);
+ let response;
+ if (!searchTerm.trim()) {
+ response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+ limit: 20,
+ page: 1,
+ with_deleted: false,
+ order_field: 'username',
+ order_direction: 'ASC'
+ });
+ } else {
+ const filters = [{ id: 'fullname', value: searchTerm.trim() }];
+ response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+ limit: 20,
+ page: 1,
+ with_deleted: false,
+ order_field: 'username',
+ order_direction: 'ASC',
+ filter: JSON.stringify(filters),
+ specialFilter: true
+ });
+ }
+ setDeductFilteredCustomers(response?.data?.list || []);
} catch (error) {
- console.error('Error fetching customers', error);
+ console.error('Error searching deduct customers', error);
+ setDeductFilteredCustomers([]);
} finally {
- setIsLoadingCustomers(false);
+ setIsSearchingCustomers(false);
}
- };
+ },
+ [GetData]
+ );
- getCustomerList([{ id: 'id', desc: false }]);
- }, [showEditFeeDialog, GetData]);
+ const searchCreditCustomers = useCallback(
+ async (searchTerm: string) => {
+ setIsSearchingCustomers(true);
+ try {
+ let response;
+ if (!searchTerm.trim()) {
+ response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+ limit: 20,
+ page: 1,
+ with_deleted: false,
+ order_field: 'username',
+ order_direction: 'ASC'
+ });
+ } else {
+ const filters = [{ id: 'fullname', value: searchTerm.trim() }];
+ response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+ limit: 20,
+ page: 1,
+ with_deleted: false,
+ order_field: 'username',
+ order_direction: 'ASC',
+ filter: JSON.stringify(filters),
+ specialFilter: true
+ });
+ }
+ setCreditFilteredCustomers(response?.data?.list || []);
+ } catch (error) {
+ console.error('Error searching credit customers', error);
+ setCreditFilteredCustomers([]);
+ } finally {
+ setIsSearchingCustomers(false);
+ }
+ },
+ [GetData]
+ );
+
+useEffect(() => {
+ if (openDeductOrigin) {
+ searchDeductCustomers(debouncedDeductSearch);
+ }
+}, [debouncedDeductSearch, openDeductOrigin, searchDeductCustomers]);
+
+useEffect(() => {
+ if (openCreditDestination) {
+ searchCreditCustomers(debouncedCreditSearch);
+ }
+}, [debouncedCreditSearch, openCreditDestination, searchCreditCustomers]);
useEffect(() => {
if (!showEditFeeDialog) return;
@@ -323,7 +405,7 @@ const EditFeeDialog = () => {
setIsLoadingTransferFee(true);
try {
const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
- // console.log(response);
+
if (response?.status) {
setFormField({
...initialState,
@@ -354,6 +436,32 @@ const EditFeeDialog = () => {
if (response.data.transaction_type?.name) {
setTransactionTypeName(response.data.transaction_type.name);
}
+
+ if (
+ response.data.deduct_origin &&
+ response.data.deduct_origin.id !== '00000000-0000-0000-0000-000000000000'
+ ) {
+ setSelectedDeductCustomer({
+ id: response.data.deduct_origin.id,
+ fullname: response.data.deduct_origin.fullname || '',
+ msisdn: response.data.deduct_origin.msisdn || ''
+ });
+ } else {
+ setSelectedDeductCustomer(null);
+ }
+
+ if (
+ response.data.credit_destination &&
+ response.data.credit_destination.id !== '00000000-0000-0000-0000-000000000000'
+ ) {
+ setSelectedCreditCustomer({
+ id: response.data.credit_destination.id,
+ fullname: response.data.credit_destination.fullname || '',
+ msisdn: response.data.credit_destination.msisdn || ''
+ });
+ } else {
+ setSelectedCreditCustomer(null);
+ }
}
} catch (error) {
console.error('Error fetching transaction fee details', error);
@@ -658,11 +766,19 @@ const EditFeeDialog = () => {
setOpenDeductOrigin(!openDeductOrigin)}
+ onClick={() => {
+ setOpenDeductOrigin(!openDeductOrigin);
+ if (!openDeductOrigin && deductSearchTerm.trim() === '') {
+ searchDeductCustomers('');
+ }
+ }}
>
- {customers.find((customer) => customer.id === formField.deduct_origin)
- ?.username || 'Search customer...'}
+ {selectedDeductCustomer
+ ? selectedDeductCustomer.fullname
+ : deductFilteredCustomers.find(
+ (customer) => customer.id === formField.deduct_origin
+ )?.fullname || 'Search customer...'}
@@ -673,45 +789,44 @@ const EditFeeDialog = () => {
className="h-8 text-sm"
type="text"
placeholder="Search customer..."
- value={customerSearchTerm}
- onChange={(e) => setCustomerSearchTerm(e.target.value)}
+ value={deductSearchTerm}
+ onChange={(e) => {
+ const value = e.target.value;
+ setDeductSearchTerm(value);
+
+ }}
autoComplete="off"
onClick={(e) => e.stopPropagation()}
autoFocus
/>
- {customers
- .filter(
- (customer) =>
- customer.username
- .toLowerCase()
- .includes(customerSearchTerm.toLowerCase()) ||
- customer.msisdn.includes(customerSearchTerm)
- )
- .map((customer) => (
+ {isSearchingCustomers ? (
+
Searching...
+ ) : (
+ deductFilteredCustomers.map((customer) => (
{
setFormField({ ...formField, deduct_origin: customer.id });
+ setSelectedDeductCustomer(customer);
+ setDeductSearchTerm('');
setOpenDeductOrigin(false);
}}
>
- {customer.username}
+ {customer.fullname}
- ))}
- {customers.filter(
- (customer) =>
- customer.username
- .toLowerCase()
- .includes(customerSearchTerm.toLowerCase()) ||
- customer.msisdn.includes(customerSearchTerm)
- ).length === 0 && (
-
- No customer found
-
+ ))
)}
+
+ {!isSearchingCustomers &&
+ deductFilteredCustomers.length === 0 &&
+ deductSearchTerm.trim() && (
+
+ No customer found
+
+ )}
setOpenCreditDestination(!openCreditDestination)}
+ onClick={() => {
+ setOpenCreditDestination(!openCreditDestination);
+ if (!openCreditDestination && creditSearchTerm.trim() === '') {
+ searchCreditCustomers('');
+ }
+ }}
>
- {customers.find(
- (customer) => customer.id === formField.credit_destination
- )?.username || 'Search customer...'}
+ {selectedCreditCustomer
+ ? selectedCreditCustomer.fullname
+ : creditFilteredCustomers.find(
+ (customer) => customer.id === formField.credit_destination
+ )?.fullname || 'Search customer...'}
@@ -779,23 +901,21 @@ const EditFeeDialog = () => {
className="h-8 text-sm"
type="text"
placeholder="Search customer..."
- value={customerSearchTerm}
- onChange={(e) => setCustomerSearchTerm(e.target.value)}
+ value={creditSearchTerm}
+ onChange={(e) => {
+ const value = e.target.value;
+ setCreditSearchTerm(value);
+ }}
autoComplete="off"
onClick={(e) => e.stopPropagation()}
autoFocus
/>
- {customers
- .filter(
- (customer) =>
- customer.username
- .toLowerCase()
- .includes(customerSearchTerm.toLowerCase()) ||
- customer.msisdn.includes(customerSearchTerm)
- )
- .map((customer) => (
+ {isSearchingCustomers ? (
+
Searching...
+ ) : (
+ creditFilteredCustomers.map((customer) => (
{
setFormField({
...formField,
credit_destination: customer.id
- });
- setOpenCreditDestination(false);
+ });
+ setOpenCreditDestination(false);
}}
>
- {customer.username}
+ {customer.fullname}
- ))}
- {customers.filter(
- (customer) =>
- customer.username
- .toLowerCase()
- .includes(customerSearchTerm.toLowerCase()) ||
- customer.msisdn.includes(customerSearchTerm)
- ).length === 0 && (
-
- No customer found
-
+ ))
)}
+
+ {!isSearchingCustomers &&
+ creditFilteredCustomers.length === 0 &&
+ creditSearchTerm.trim() && (
+
+ No customer found
+
+ )}