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 | 2x 43x 43x 43x 2x 2x 2x 2x 43x 43x 3x 2x | import { useDownloadReport } from "@components/ManageMoney/TransactionTable/hooks";
import { ExportIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import { ContextualMenuOptionProps } from "@shared/ContextualMenu/ContextualMenu.types";
import { useState } from "react";
import { HubFilters, isProcessorResolved } from "../useHubFilters";
import { buildHubQueryString } from "../hooks/buildHubQueryString";
interface Props {
merchantId?: number;
filters: HubFilters;
}
/**
* Export menu for the Reconciliation Hub. The Standard CSV download hits
* `GET /merchants/{id}/reconciliation-hub/export.csv` with the same period +
* processor + merchant scope, so it stays disabled until the hub has resolved
* a processor. The Sage-formatted export is shown but disabled — the backend
* export endpoint has no `format=sage` yet (gated on BE Task 7).
*/
const HubExportButton = ({ merchantId, filters }: Props) => {
const { downloadReport, disableDownload } = useDownloadReport({
exportType: "settlements",
});
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleStandardExport = () => {
Iif (!merchantId) return;
const query = buildHubQueryString(filters, { includeMerchant: true });
downloadReport(
`/merchants/${merchantId}/reconciliation-hub/export.csv?${query}`,
);
setAnchorEl(null);
};
const options: Omit<ContextualMenuOptionProps, "children">[] = [
{
text: "Standard CSV",
onClick: handleStandardExport,
},
{
// Sage export is not yet available on the backend (no format param).
text: "Sage Export (coming soon)",
disabled: true,
},
];
return (
<>
<GiveButton
variant="ghost"
color="light"
size="large"
label="Export"
startIcon={<ExportIcon size={18} />}
disabled={disableDownload || !isProcessorResolved(filters)}
data-testid="hub-export-button"
onClick={(e: React.MouseEvent<HTMLElement>) =>
setAnchorEl(e.currentTarget)
}
/>
<ContextualMenu
anchorEl={anchorEl}
options={options}
handleClose={() => setAnchorEl(null)}
menuWidth="240px"
horizontalOrigin="left"
color="tertiary"
texture="blurred"
/>
</>
);
};
export default HubExportButton;
|