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 | 2x 8x 8x 4x 1x 1x 8x 8x 40x 40x | import NiceModal, { useModal } from "@ebay/nice-modal-react";
import { Stack } from "@mui/material";
import { TDisputeData } from "../../utils/data.types";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import { CustomGridContainer } from "@features/Merchants/MerchantSidePanel/GiveMerchantFile/bankAccounts/CustomGridContainer";
import { GiveSectionItem } from "@features/Merchants/MerchantSidePanel/GiveMerchantFile/GiveSectionItem";
import { ISectionItem } from "@features/TransactionPanel/types";
import { Box } from "@mui/material";
import { cardIconsMap } from "@features/MerchantPortal/ManageMoney/ManageMoneyTable.atoms";
import { capitalize } from "lodash";
import { useMemo } from "react";
type GetProperty<T, K extends keyof T> = T[K];
interface IProps extends GetProperty<TDisputeData, "binInfo"> {
cardBrand: string;
}
const DisputeBinModal = NiceModal.create(
({ cardCategory, cardType, country, issuerBankName, cardBrand }: IProps) => {
const { remove, visible } = useModal();
const cardIcon = useMemo(() => {
if (!cardBrand) return;
const _cardBrand = cardBrand.toLowerCase();
return cardIconsMap()[_cardBrand as keyof typeof cardIconsMap];
}, [cardBrand]);
const items: Array<ISectionItem> = [
{
key: 0,
title: "Issuing Bank Name",
value: issuerBankName,
},
{
key: 1,
title: "Card Brand",
value: capitalize(cardBrand),
icon: cardIcon,
},
{ key: 2, title: "Card Type", value: cardType },
{ key: 3, title: "Country of Issuance", value: country || "Unavailable" },
{ key: 4, title: "Card Category", value: cardCategory || "Unavailable" },
];
return (
<GiveBaseModal
title="Bank Identification Number"
onClose={remove}
open={visible}
showFooter={false}
customContentPadding="80px 20px 20px 20px"
>
<Stack>
{items.map((item, i) => {
const highlight = i % 2 === 0;
return (
<Box key={item.title}>
<CustomGridContainer
container
spacing={2}
highlight={highlight}
key={item.key}
margin="0px !important"
width="100%"
>
<GiveSectionItem
item={item}
sx={{
padding: "0 !important",
margin: 0,
}}
/>
</CustomGridContainer>
</Box>
);
})}
</Stack>
</GiveBaseModal>
);
},
);
export default DisputeBinModal;
|