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 | 1x 12x 12x 3x 6x 6x 6x 12x | import { TSettlement } from "@components/Settlement/data.types";
import GiveText from "@shared/Text/GiveText";
import { useMemo } from "react";
import { formatNumberToShort } from "@utils/index";
import { Stack } from "@mui/material";
import GiveThumbnail from "@shared/Thumbnail/GiveThumbnail";
import { addSizeToImage } from "@utils/image.helpers";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { TableColumnType } from "@common/Table";
import { ColumnBaseType } from "@common/Table/helpers";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
export const useSettlementMerchantColumns = () => {
const { isMobileView } = useCustomThemeV2();
const columns = useMemo(
() => [
{
key: "merchantName",
columnWidth: "60%",
sortable: true,
title: "Merchant",
columnType: "avatar-name" as ColumnBaseType,
sx: {
verticalAlign: "middle",
},
renderColumn: (row: TSettlement) => (
<Stack direction="row" gap="16px" alignItems="center">
<GiveThumbnail
imageUrl={addSizeToImage(row.merchantImageURL, "thumb")}
size="extra_extra_small"
type="merchant"
/>
<GiveText variant="bodyS">{row.merchantName}</GiveText>
</Stack>
),
},
{
key: "availablePayoutAmount",
columnWidth: "40%",
title: isMobileView ? (
<GiveTruncateText
variant="bodyS"
lineClamp={2}
sx={{ textAlign: "right", width: "100%" }}
>
Total Payout Amount (USD)
</GiveTruncateText>
) : (
"Total Payout Amount (USD)"
),
headerPosition: "right" as TableColumnType["headerPosition"],
columnType: "amount" as ColumnBaseType,
sx: isMobileView
? {
maxWidth: "100px",
"& > div": {
whiteSpace: "normal !important",
width: "100% !important",
maxWidth: "100% !important",
justifyContent: "flex-end !important",
textAlign: "right",
},
}
: undefined,
renderColumn: (row: TSettlement) => {
const amount = row.availablePayoutAmount / 100;
return (
<Stack direction="row" width="100%" justifyContent="flex-end">
<GiveTooltip
title={amount.toLocaleString()}
placement="bottom"
disableHoverListener={Math.abs(amount) < 1_000_000}
fluidWidth
>
<GiveText variant="bodyS">
{formatNumberToShort(amount)}
</GiveText>
</GiveTooltip>
</Stack>
);
},
},
],
[isMobileView],
);
return { columns };
};
|