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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | 3x 576x 576x 576x 576x 576x 3x 576x 576x 576x 576x 576x 576x 3x 576x | import { TransactionTableRow } from "@components/ManageMoney/TransactionTable/transactions.types";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { Box, Stack } from "@mui/material";
import {
capitalizeCardType,
formatLargeNumber,
formatNumberToShort,
parseAmount,
} from "@utils/index";
import GiveText from "@shared/Text/GiveText";
import {
getAmountFormatAndStyle,
getType,
getFormattedDescription,
getOriginalChargedAmount,
} from "@components/ManageMoney/TransactionTable/transactions.helpers";
import { checkPortals } from "@utils/routing";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import {
cardIconsMap,
isFeeTransaction,
DescriptionFeesText,
Dot,
} from "features/MerchantPortal/ManageMoney/ManageMoneyTable.atoms";
import { moveFundsArray } from "@components/ManageMoney/TransactionTable/transactions.types";
export const DesktopDescriptionColumn = (row: TransactionTableRow) => {
const { isMerchantPortal, isAcquirerPortal } = checkPortals();
const formattedDescription = getFormattedDescription(
row?.detailedDescription?.[0],
row?.transactionType,
isMerchantPortal,
false,
row?.description,
);
const isFee = isFeeTransaction(row?.transactionType, isAcquirerPortal);
Iif (isFee) {
return <DescriptionFeesText transactionType={row?.transactionType} />;
}
return (
<Stack gap="4px">
<Stack flex={1} gap="10px" direction="row" alignItems="center">
{row?.cardDigits && (
<>
<Box height="18px">
{cardIconsMap()[row?.cardType as keyof typeof cardIconsMap]}
</Box>
<GiveText variant="bodyS">{row?.cardDigits}</GiveText>
<Dot>•</Dot>
</>
)}
<GiveTruncateText variant="bodyS" lineClamp={1} maxWidth="auto">
{capitalizeCardType(formattedDescription || "")}
</GiveTruncateText>
</Stack>
<TypeColumn {...row} />
</Stack>
);
};
export const MerchantColumn = (row: TransactionTableRow) => {
const { isAcquirerPortal } = checkPortals();
const isFee = isFeeTransaction(row?.transactionType, isAcquirerPortal);
Iif (isFee) return <GiveText>-</GiveText>;
//for muve funds we need to follow different logic for this column
const isMoveFunds = row?.transactionType === "move_funds";
const usedMerchantName = isMoveFunds
? row?.sourceAccount?.merchant?.name
: row?.merchantName;
return (
<Stack gap="5px" flex={1}>
<GiveTruncateText variant="bodyS" lineClamp={1}>
{usedMerchantName}
</GiveTruncateText>
{isAcquirerPortal && (
<GiveTruncateText
variant="bodyXS"
color="secondary"
fontWeight="regular"
lineClamp={1}
>
{row?.parentName}
</GiveTruncateText>
)}
</Stack>
);
};
export const TypeColumn = (row: TransactionTableRow) => (
<GiveTruncateText variant="bodyXS" color="secondary" lineClamp={1}>
{getType(row)?.replace("Money Transfer", "Transfer")}
</GiveTruncateText>
);
export function TransferAmount(row: TransactionTableRow) {
const { isWideView } = useCustomThemeV2();
const { amount } = getAmountFormatAndStyle(row);
const isTransferFunds =
row?.transactionType && moveFundsArray.includes(row?.transactionType);
const chargedAmount = formatLargeNumber(
getOriginalChargedAmount(row, true) ?? 0,
);
const displayAmount = (amount ?? parseAmount(0))
?.replace("+", "")
?.replace("-", "");
const formattedAmount = !isTransferFunds ? displayAmount : chargedAmount;
return (
<Stack
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
maxWidth="200px"
width="100%"
>
<GiveText variant="bodyS">
{formatNumberToShort(formattedAmount)} {!isWideView && "USD"}
</GiveText>
</Stack>
);
}
|