Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 1x 35x 35x 35x 53x 35x 35x 35x 8x 35x 35x 4x 35x 35x 35x | import { useMemo } from "react";
import { useInfiniteMerchants } from "@components/Settlement/hooks/useSettlementInfiniteMerchants";
import { useAppDispatch, useAppSelector } from "@redux/hooks";
import {
selectQueryString,
setSearchQueryByKey,
resetSearchQueryByKey,
} from "@redux/slices/search";
import { TOption } from "@features/Merchants/MerchantsTable/components/DropdownFilter";
import { GiveSearchBarProps } from "@shared/SearchBar/GiveSearchBar";
import GiveThumbnail from "@shared/Thumbnail/GiveThumbnail";
import { addSizeToImage } from "@utils/image.helpers";
import {
QKEY_LIST_ACQUIRER_MERCHANTS,
QKEY_GET_SETTLEMENT_MERCHANTS,
} from "@constants/queryKeys";
import { setSelectedMerchant } from "@redux/slices/merchantFilters";
import { useGetCurrentMerchantId } from "@hooks/common";
export const useGetMerchantDropdownOptions = () => {
const dispatch = useAppDispatch();
const { merchantId, name } = useGetCurrentMerchantId();
const searchQuery = useAppSelector((state) =>
selectQueryString(state, QKEY_LIST_ACQUIRER_MERCHANTS),
);
const { data, isLoading, isFetching, loadNextPage } = useInfiniteMerchants({
disableStats: true,
sorting: "-totalProcessed",
});
const handleSearchChange = (val: string) => {
dispatch(
setSearchQueryByKey({
queryKey: QKEY_LIST_ACQUIRER_MERCHANTS,
params: { value: val },
}),
);
};
const options: TOption[] = useMemo(
() =>
data.map((merchant) => ({
label: merchant.name,
value: merchant.name,
id: merchant.accID,
Image: (
<GiveThumbnail
imageUrl={addSizeToImage(merchant.imageURL, "thumb")}
size="icon"
type="merchant"
/>
),
imageUrl: merchant.imageURL || "",
onClick: () => {
dispatch(
setSelectedMerchant({
queryKey: QKEY_GET_SETTLEMENT_MERCHANTS,
value: { accID: merchant.accID, name: merchant.name } as any,
}),
);
},
})),
[data, dispatch],
);
const handleClearSearch = () => {
dispatch(resetSearchQueryByKey(QKEY_LIST_ACQUIRER_MERCHANTS));
dispatch(
setSelectedMerchant({
queryKey: QKEY_GET_SETTLEMENT_MERCHANTS,
value: { accID: merchantId, name } as any,
}),
);
};
const searchBarProps: GiveSearchBarProps = useMemo(
() => ({
value: searchQuery,
handleChange: handleSearchChange,
placeholder: "Search",
}),
[searchQuery],
);
const showLoading = isLoading && data.length === 0;
const showFetching = isFetching && data.length !== 0;
return {
options,
searchBarProps,
isLoading: showLoading,
isFetching: showFetching,
onEndReached: loadNextPage,
onCloseEmptyState: handleClearSearch,
};
};
|