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 | 1x 1x 3x 3x 9x 1x 13x 6x | import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import NiceModal from "@ebay/nice-modal-react";
import { Box } from "@mui/material";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
const sections = [
{
title: "$999.99 or less",
description:
"For all transfers of $999.99 or less you will be charged $0.99 per transfer. For example, if you transfer $500 it will cost you only $0.99 to make the transfer.",
},
{
title: "Between $1,000.00 and $19,999.99",
description:
"Any money transfers between $1,000.00 and $19,999.99 the bank charges you 0.1% of the amount. For example, if you transfer $5000 it will cost you only $5 to make the transfer which is a 0.1% transfer fee.",
},
{
title: "$20,000.00 or more",
description:
"Any transfer of $20,000.00 or more you have a fixed rate of $20.00 per transfer. The bank has capped the rate for transferring large amounts at $20.00. This is less than 0.1% for any amount larger than $20,000.00. For example, if you transfer $200,000.00 you pay only $20.00 which is a 0.01% transfer fee.",
},
];
const MoneyTransferFeesPopup = NiceModal.create(() => {
const { open, onClose } = useNiceModal();
return (
<GiveBaseModal
open={open}
title="Fee"
height="fit-content"
customContentPadding="84px 20px 20px 20px"
width="800px"
onClose={onClose}
showFooter={false}
>
<GiveText variant="bodyM">For money transfers:</GiveText>
{sections.map(({ title, description }, index) => (
<SectionContainer key={title} isLast={index === sections.length - 1}>
<GiveText variant="bodyS">{title}</GiveText>
<GiveText variant="bodyS" color="secondary">
{description}
</GiveText>
</SectionContainer>
))}
</GiveBaseModal>
);
});
const SectionContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== "isLast",
})<{ isLast: boolean }>(({ isLast, theme }) => ({
display: "flex",
gap: "24px",
padding: "20px 0",
"& p": { width: "50%" },
...(!isLast && {
borderBottom: `1px solid ${theme.palette.border?.primary}`,
}),
[theme.breakpoints.down("v2_sm")]: {
flexDirection: "column",
gap: "12px",
padding: "24px 0",
"& p": { width: "100%" },
},
}));
export default MoneyTransferFeesPopup;
|