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 | 4x 1x 1x 5x 5x 5x 5x | import React from "react";
import { Box, Stack, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { AmountText, BaseText } from "./atoms";
import { palette } from "@palette";
const getCostLabel = (status: string, recipient: string) => {
switch (status) {
case "Pending":
return `${recipient} will receive (USD)`;
case "Requested":
return `${recipient} will receive (USD)`;
case "Sending":
return `${recipient} is receiving (USD)`;
case "Ready to Process":
return `${recipient} is receiving (USD)`;
case "Sent":
return `${recipient} recieved (USD)`;
case "Error":
return `Failed Amount (USD)`;
case "Canceled":
return `Canceled Amount (USD)`;
default:
return `Amount (USD)`;
}
};
export function ChargedColumnGrid({
fees,
cost,
charged,
styleProperties,
feePaidByCustomer,
status,
recipient,
displayType,
}: {
status: string;
fees: number;
cost: number;
styleProperties: any;
feePaidByCustomer: boolean;
recipient: string;
charged: number;
displayType: string;
}) {
const theme = useTheme();
const isXl = useMediaQuery(theme.breakpoints.up("xl"));
const isTransfer = displayType === "Money Transfer";
return (
<Stack
width={styleProperties.isSmallView ? "100%" : "50%"}
direction="row"
justifyContent={styleProperties.isSmallView ? "flex-start" : "flex-end"}
// paddingRight={`${styleProperties.paddingRight}px`}
paddingTop={styleProperties.isSmallView ? 4 : 0}
>
<Stack
direction="column"
gap={0.5}
alignItems="flex-start"
// width={`calc(${styleProperties.columnWidth}px ${
// isXl ? "- 12px" : "+ 0px"
// })`}
paddingBottom="20px"
sx={{ position: "relative", minWidth: "200px" }}
>
<Stack width="100%" direction="row" justifyContent="space-between">
<BaseText
flex={1}
value={
isTransfer
? getCostLabel(status, recipient)
: "Amount (USD)"
}
/>
<AmountText value={cost} />
</Stack>
<Stack width="100%" direction="row" justifyContent="space-between">
<BaseText flex={1} value="Fee (USD)" />
<AmountText value={`${fees}*`} />
</Stack>
<div
style={{
height: 2,
width: "100%",
borderBottom: `2px solid ${palette.neutral[20]}`,
marginBottom: 10,
}}
/>
<Stack width="100%" direction="row" justifyContent="space-between">
<BaseText
flex={1}
color={palette.neutral[800]}
value={isTransfer ? "Money Transfer (USD)" : "Charged (USD)"}
/>
<AmountText value={charged} />
</Stack>
<Box
sx={{
width: "max-content",
pt: 2,
alignSelf: "flex-end",
}}
>
<BaseText
color={palette.neutral[800]}
value={
feePaidByCustomer
? "* Customer paid fee"
: "* Fee deducted from Available Balance"
}
/>
</Box>
</Stack>
{/* <Stack
direction="column"
gap={0.5}
paddingRight={isXl ? "16px" : "32px"}
></Stack> */}
</Stack>
);
}
|