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 | 2x 22x 22x 22x 22x 22x | import { Box, Stack, StackProps } from "@mui/material";
import { CaretRightIcon } from "@phosphor-icons/react";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { VARIANT } from "@common/CampaignCard/CampaignDetailsModal/types";
import { useAppTheme } from "@theme/v2/Provider";
import GiveText from "@shared/Text/GiveText";
import { useFormatPaymentFormDate } from "@sections/PayBuilder/utils";
export const LatestPurchasesItem = ({
name,
createdAt,
totalPrice,
creator,
inventory,
onClick,
isSelected,
displayStatus,
hideCount,
product,
}: VARIANT & StackProps) => {
const { palette } = useAppTheme();
const { formatPaymentFormDate } = useFormatPaymentFormDate();
const mapStatusToColor = {
settled: "success",
chargeback: "error",
"chargeback reversal": "success",
refunded: "warning",
pending: "secondary",
voided: "secondary",
};
const statusColor =
mapStatusToColor[
displayStatus?.toLowerCase() as keyof typeof mapStatusToColor
];
return (
<Stack
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap="16px"
sx={{
transition: "background-color 0.3s ease-in-out",
cursor: "pointer",
borderRadius: "8px",
padding: "12px",
backgroundColor: isSelected
? palette.primitive?.transparent["darken-5"]
: "",
"&:hover": {
backgroundColor: palette.primitive?.transparent["darken-5"],
},
}}
onClick={onClick}
data-testid={`latest-purchase-${name}`}
>
<Stack gap="4px">
{!hideCount && (
<GiveText color="secondary" variant="bodyS">
{`${product?.variant?.name || name} (x${inventory} )`}
</GiveText>
)}
<Stack direction="row" gap="4px" alignItems="center">
<GiveText color={statusColor} variant="bodyS">
{displayStatus}
</GiveText>
<Box
width="4px"
height="4px"
borderRadius="50%"
bgcolor={palette.icon?.["icon-secondary"]}
flexShrink={0}
/>
<GiveTruncateText
lineClamp={1}
variant="bodyS"
sx={{
wordBreak: "break-all",
}}
>
{`${formatPaymentFormDate(
createdAt,
false,
undefined,
"abbreviated",
)}, ${creator}`}
</GiveTruncateText>
</Stack>
</Stack>
<Stack direction="row" gap="10px">
<GiveText variant="bodyS" whiteSpace="nowrap">
{totalPrice} USD
</GiveText>
<CaretRightIcon size={18} />
</Stack>
</Stack>
);
};
|