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 | 1x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x | import { useState } from "react";
import { useNavigate } from "react-router-dom";
import Table from "componentsV2/Table/Table";
import { useLegalDocumentsColumns } from "./useLegalDocumentsColumns";
import { Box } from "@mui/material";
import GiveMotionWrapper from "@shared/Motion/GiveMotionWrapper";
import { ACQUIRER_PATHS } from "@routes/paths";
import { useListLegalDocuments } from "./api/useLegalDocuments";
import { useGetMerchantById } from "@hooks/enterprise-api/account/useGetMerchants";
import { useAppTheme } from "@theme/v2/Provider";
const LegalDocumentsTable = () => {
const navigate = useNavigate();
const { palette } = useAppTheme();
const { columns } = useLegalDocumentsColumns();
const [selectedRowIdx, setSelectedRowIdx] = useState<number | undefined>();
const { isError: isAcquirerError, isLoading: isAcquirerLoading } =
useGetMerchantById();
const {
data: allRows = [],
isLoading,
isIdle,
isError,
} = useListLegalDocuments();
// The list query sits idle until the acquirer id resolves — surface that as
// loading (skeletons), not as "You do not have any documents", but only
// while the acquirer lookup is actually in flight: a disabled acquirer
// query (sub-user without the READ permission, unresolved merchant id)
// stays idle forever and must settle on the empty state, not skeletons.
const isTableLoading = isLoading || (isIdle && isAcquirerLoading);
// Surface the full-screen error only when there is nothing to show — a
// failed background refetch keeps the last-good rows (react-query retains
// data while flipping status to error) instead of blowing them away.
const isTableError = (isError || isAcquirerError) && allRows.length === 0;
const handleRowClick = (index: number) => {
setSelectedRowIdx(index);
const document = allRows[index];
if (!document) return;
navigate(
`/${ACQUIRER_PATHS.ACQUIRER}/${ACQUIRER_PATHS.SETTINGS}/${ACQUIRER_PATHS.LEGAL_DOCUMENTS}/${document.documentID}`,
);
};
return (
<Box
paddingLeft={0}
height="calc(100vh - 140px)"
sx={{
// Mockup (node 4092-18981): loading bars are thin 12px pills in the
// border neutral, not MUI's scaled text bars. Scoped to this table —
// skeletons only exist while loading.
"& .MuiSkeleton-text": {
height: "12px",
borderRadius: "17.5px",
transform: "none",
backgroundColor: palette.border?.primary,
},
"& .MuiSkeleton-circular": {
backgroundColor: palette.border?.primary,
},
}}
>
<GiveMotionWrapper
delay={30}
containerProps={{ sx: { height: "100%", zIndex: 2 } }}
customStyle={{
height: "100%",
display: "flex",
justifyContent: "center",
}}
>
<Table
type="empty-legal-documents"
allRows={allRows}
columns={columns}
isLoading={isTableLoading}
isError={isTableError}
// Mockup (node 4092-18981): 5 loading rows at the 70px row height.
customLoadingRowProps={{ rowCount: 5, height: 70 }}
page={1}
setPageDispatcher={() => {
return;
}}
setPage={() => {
return;
}}
openModal={""}
totalRows={allRows.length}
selectedRowIdx={selectedRowIdx}
setSelectedRowIdx={handleRowClick}
disablePadding={true}
minHeight={"-webkit-fill-available"}
searchQuery=""
hideCaret
isSponsorTabSelected={true}
/>
</GiveMotionWrapper>
</Box>
);
};
export default LegalDocumentsTable;
|