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 | 2x 44x 22x 1x | import { Stack } from "@mui/material";
import GiveLink from "@shared/Link/GiveLink";
import GiveText from "@shared/Text/GiveText";
import { StyledSectionStack } from "../styles";
import { List } from "@mui/material";
import { LatestPurchasesItem } from "./LatestPurchasesItem";
import PanelEmptyState from "./PanelEmptyState";
import { VARIANT } from "@common/CampaignCard/CampaignDetailsModal/types";
import { CampaignEmptyStateSection } from "../types";
import { CampaignType } from "@common/Campaigns/hooks/useReportMenuActions";
interface Props {
BodyData: {
variantsList: VARIANT[];
hideViewMore: boolean;
totalTransactions: number;
};
selectedTransaction: any;
chooseTransaction: any;
handleExpand: any;
section: CampaignEmptyStateSection;
campaign: CampaignType;
}
export const TransactionsSection = ({
BodyData,
selectedTransaction,
chooseTransaction,
handleExpand,
section = "latestPurchases",
campaign,
}: Props) => {
return (
<Stack gap="16px" pt="24px">
<Stack direction="row" justifyContent="space-between">
<GiveText variant="bodyM">{`Latest Transaction Items ${
!BodyData?.hideViewMore ? `(${BodyData?.totalTransactions})` : ""
}`}</GiveText>
{section === "latestPurchases" && (
<GiveLink
onClick={handleExpand}
component="button"
variant="bodyS"
sx={{
display: BodyData?.hideViewMore ? "none" : "block",
}}
>
View all
</GiveLink>
)}
</Stack>
<StyledSectionStack>
{BodyData?.variantsList.length !== 0 ? (
<List sx={{ padding: 0 }}>
{BodyData?.variantsList?.map((variant, idx) => (
<LatestPurchasesItem
{...variant}
isSelected={selectedTransaction === variant?.id}
onClick={() =>
chooseTransaction && chooseTransaction(variant.id)
}
key={`${variant.name} ${idx}`}
hideCount={campaign === "invoice"}
/>
))}
</List>
) : (
<PanelEmptyState section={section} />
)}
</StyledSectionStack>
</Stack>
);
};
|