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 | import { ConnectionErrorState } from "@common/EmptyState";
import { useBreadcrumbs } from "@components/CustomBreadcrumbsPage/hooks/useBreadcrumbs";
import { PortalRootContainer } from "@components/Layout/Layout";
import {
MembershipsReportBanner,
MembershipsReportTable,
} from "@components/Memberships/MembershipsReport";
import { MembershipsReportFilterBar } from "@components/Memberships/MembershipsReport/Table/MembershipsReportFilterBar";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { Ticker } from "@components/Ticker";
import { VirtualListLayoutWrapper } from "@components/VirtualList/wrappers/VlLayoutWrapper";
import { QKEY_MEMBERSHIP_TRANSACTIONS } from "@constants/queryKeys";
import { useParseTransactionRow } from "@pages/FundraisersDonationList/utils";
import { useGetMembershipById } from "@services/api/products/membership";
import { useGetTransactionsByProduct } from "@services/api/products/transactions";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { columns } from "./columns";
import { VirtualTransactionsTableV2 } from "@components/VirtualList/VirtualTransactionsTableV2";
export function MembershipReport() {
const { id } = useParams();
const { data, error, isLoading } = useGetMembershipById(id as string);
const pageElement = document.getElementById("page-container") || undefined;
useBreadcrumbs({
product_id: data?.id,
imgSrc: data?.imageURL,
title: data?.name,
});
const { rowParser } = useParseTransactionRow();
const isEnabledVl = useSelector<any, boolean>(
(state: any) => state.app.enabledVL,
);
if (isLoading) return <LoadingSpinner />;
if (error && !isLoading) return <ConnectionErrorState />;
return (
<PortalRootContainer>
<VirtualListLayoutWrapper show={isEnabledVl}>
<Ticker />
<MembershipsReportBanner data={data} />
</VirtualListLayoutWrapper>
{isEnabledVl ? (
<VirtualTransactionsTableV2
isPurchase
apiBuilder={
id
? useGetTransactionsByProduct(id, QKEY_MEMBERSHIP_TRANSACTIONS)
: undefined
}
overrideColumns={columns}
queryKey={QKEY_MEMBERSHIP_TRANSACTIONS}
queryPath={`products/${id}/transaction-items`}
rowParser={rowParser}
filters={{
type: "REACT_COMPONENT",
jsx: <MembershipsReportFilterBar />,
}}
customScrollParent={pageElement}
filter={`reversalTransactionID:""`}
stickyHeader
/>
) : (
<MembershipsReportTable
id={id}
isEmpty={data?.totalTransactions === 0}
/>
)}
</PortalRootContainer>
);
}
|