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 | 1x 3x 3x 3x 3x 3x 10x 3x 10x 3x 3x 3x 3x 1x | import { useCallback, memo } from "react";
import { Stack } from "@mui/material";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { ExportIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import GiveSearchBar from "@shared/SearchBar/GiveSearchBar";
import { useAppDispatch, useAppSelector } from "@redux/hooks";
import { setSearchQueryByKey, selectQueryString } from "@redux/slices/search";
import { useExportSettlementMerchants } from "@features/Settlements/hooks/useExportSettlementMerchants";
import { prepareBasePath } from "@components/VirtualList/api";
import { useGetCurrentMerchantId } from "@hooks/common";
import { selectDateFilter } from "@redux/slices/merchantFilters";
import { EXPORT_MERCHANTS_QKEY } from "@constants/queryKeys";
const SettlementMerchantActions = memo(() => {
const dispatch = useAppDispatch();
const { isMobileView } = useCustomThemeV2();
const { handleExport, isLoading: isLoadingExport } =
useExportSettlementMerchants();
const { merchantId } = useGetCurrentMerchantId();
const settlementDate = useAppSelector((state) =>
selectDateFilter(state, "settlement-date"),
);
const search = useAppSelector((state) =>
selectQueryString(state, EXPORT_MERCHANTS_QKEY),
);
const prepareExport = useCallback(() => {
const url = prepareBasePath(
{
queryString: `settlementDate:"${settlementDate}"`,
path: `merchants/${merchantId}/transaction-settlements-min.csv`,
},
false,
);
handleExport({ url });
}, [settlementDate, merchantId, handleExport]);
const onSearchChange = useCallback(
(value: string, _reason: string) => {
dispatch(
setSearchQueryByKey({
queryKey: EXPORT_MERCHANTS_QKEY,
params: {
value,
},
}),
);
},
[dispatch],
);
return (
<Stack
direction={isMobileView ? "column" : "row"}
justifyContent="space-between"
gap={2}
>
<GiveSearchBar
value={search}
handleChange={onSearchChange}
searchOnEnter
sx={{
width: isMobileView ? "100%" : "380px",
}}
/>
<GiveButton
variant={isMobileView ? "filled" : "ghost"}
color="light"
size="large"
startIcon={<ExportIcon />}
label="Export"
sx={{
width: "fit-content",
}}
loading={isLoadingExport}
disabled={isLoadingExport}
onClick={prepareExport}
/>
</Stack>
);
});
SettlementMerchantActions.displayName = "SettlementMerchantActions";
export default SettlementMerchantActions;
|