68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import type { FC } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { formatMoney } from "@/shared/lib";
|
|
import type { BankCard } from "../api/queries";
|
|
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 = /сбер|sber/.test(bank)
|
|
? "green"
|
|
: /тинькофф|т[ -]?банк|t[ -]?bank|tinkoff/.test(bank)
|
|
? "yellow"
|
|
: /альфа|alfa/.test(bank)
|
|
? "red"
|
|
: /втб|vtb|газпром|gazprom/.test(bank)
|
|
? "blue"
|
|
: "graphite";
|
|
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 className={classes.hardware} aria-hidden="true">
|
|
<span className={classes.chip} />
|
|
<svg
|
|
aria-hidden="true"
|
|
width="24"
|
|
height="30"
|
|
viewBox="0 0 24 30"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M7 11a8 8 0 0 1 0 8m5-12a15 15 0 0 1 0 16m5-20a23 23 0 0 1 0 24"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</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 className={classes.circles} aria-hidden="true" />
|
|
)}
|
|
{t(`bank.paymentSystems.${card.paymentSystem}`)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { BankCardFace };
|