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 99 100 101 102 103 104 105 106 107 108 109 110 111 | 1x 12x 12x 12x 12x 12x 12x 12x 12x 19x 12x 3x 12x | import GiveMotionWrapper from "@shared/Motion/GiveMotionWrapper";
import { useHandleScroll } from "componentsV2/Table/hooks/useHandleScroll";
import Table from "componentsV2/Table/Table";
import { useGetSettlementMerchants } from "../hooks/useGetSettlementMerchants";
import { useSettlementMerchantColumns } from "../hooks/useSettlementMerchantColumns";
import SettlementMerchantActions from "../components/SettlementMerchantActions";
import {
EXPORT_MERCHANTS_QKEY,
QKEY_SETTLEMENT_MERCHANTS,
} from "@constants/queryKeys";
import { useAppTheme } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useMemo } from "react";
import { getTableStyles } from "../styles";
import { useAppDispatch, useAppSelector } from "@redux/hooks";
import { selectQueryString, setSearchQueryByKey } from "@redux/slices/search";
const GiveSettlementMerchantsTable = () => {
const { onScroll } = useHandleScroll();
const { columns } = useSettlementMerchantColumns();
const { palette } = useAppTheme();
const dispatch = useAppDispatch();
const {
allRows,
setSelectedRowIdx,
loadMore,
numberOfPages,
selectedRowIdx,
isLoading,
totalRows,
page,
setPageDispatcher,
handlePageChange,
isFetchingNextPage,
} = useGetSettlementMerchants();
const { isMobileView } = useCustomThemeV2();
const handleResetSearch = () => {
dispatch(
setSearchQueryByKey({
queryKey: EXPORT_MERCHANTS_QKEY,
params: {
value: "",
},
}),
);
};
const search = useAppSelector((state) =>
selectQueryString(state, EXPORT_MERCHANTS_QKEY),
);
const tableStyles = useMemo(
() => getTableStyles(palette, isMobileView),
[palette, isMobileView],
);
return (
<GiveMotionWrapper
delay={30}
containerProps={{ sx: { zIndex: 2 } }}
customStyle={{
display: "flex",
justifyContent: "center",
}}
>
<Table
openModal="-"
columns={columns}
totalRows={totalRows}
queryKey={QKEY_SETTLEMENT_MERCHANTS}
onScroll={onScroll}
selectedRowIdx={selectedRowIdx}
loadMore={loadMore}
numberOfPages={numberOfPages}
setSelectedRowIdx={setSelectedRowIdx}
sortReduxKey={QKEY_SETTLEMENT_MERCHANTS}
defaultSortKey="merchantName"
isLoading={isLoading}
allRows={allRows}
page={page}
setPageDispatcher={setPageDispatcher}
setPage={handlePageChange}
Head={<SettlementMerchantActions />}
type="settlements-merchants"
emptyStateCellSx={{
// Overlay-center the empty state: the scroll container is
// position:relative, so absolute inset:0 + flex centers it in the
// visible area on every viewport without viewport-height math.
position: "absolute",
inset: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 0,
border: 0,
}}
enabledInfiniteScroll
isSponsorTabSelected
hideCaret
disablePadding
containerSx={tableStyles.containerSx}
rowSx={tableStyles.rowSx}
isFetchingNextPage={isFetchingNextPage}
handleSearchChange={handleResetSearch}
searchQuery={search}
/>
</GiveMotionWrapper>
);
};
export default GiveSettlementMerchantsTable;
|