66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { ContactlessIcon } from "@wealthledger/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { formatMoney } from "@/shared/lib";
|
|
|
|
import type { BankCard } from "../../api/types";
|
|
|
|
import classes from "./BankCardFace.module.css";
|
|
|
|
type BankCardFaceProps = { card: BankCard };
|
|
|
|
const BankCardFace: FC<BankCardFaceProps> = (props) => {
|
|
const { card } = props;
|
|
const { t } = useTranslation();
|
|
const bank = card.bankName?.toLocaleLowerCase("ru") ?? "";
|
|
const tone = bankTone(bank);
|
|
|
|
return (
|
|
<div className={classes.face} data-tone={tone}>
|
|
<div className={classes.top}>
|
|
<span className={classes.bank}>{card.bankName || t("bank.card")}</span>
|
|
|
|
{card.archivedAt && <span className={classes.archive}>{t("bank.archived")}</span>}
|
|
</div>
|
|
|
|
<div aria-hidden="true" className={classes.hardware}>
|
|
<span className={classes.chip} />
|
|
|
|
<ContactlessIcon height="30" viewBox="0 0 24 30" />
|
|
</div>
|
|
|
|
<div className={classes.number}>
|
|
{`•••• •••• •••• ${card.lastFour || "••••"}`}
|
|
</div>
|
|
|
|
<div className={classes.bottom}>
|
|
<div className={classes.details}>
|
|
<div className={classes.name}>{card.name}</div>
|
|
|
|
<div className={classes.balance}>{formatMoney(card.balance)}</div>
|
|
</div>
|
|
|
|
{card.paymentSystem && (
|
|
<span className={classes.network} data-network={card.paymentSystem}>
|
|
{card.paymentSystem === "mastercard" && <span aria-hidden="true" className={classes.circles} />}
|
|
|
|
{t(`bank.paymentSystems.${card.paymentSystem}`)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function bankTone(bank: string) {
|
|
if (/сбер|sber/.test(bank)) return "green";
|
|
if (/тинькофф|т[ -]?банк|t[ -]?bank|tinkoff/.test(bank)) return "yellow";
|
|
if (/альфа|alfa/.test(bank)) return "red";
|
|
|
|
return /втб|vtb|газпром|gazprom/.test(bank) ? "blue" : "graphite";
|
|
}
|
|
|
|
export { BankCardFace };
|