71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { EntryCard } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";
|
|
import { PayoutCard } from "@/shared/ui";
|
|
|
|
import type { BrokerageEvent } from "../api/useBrokerageEvents";
|
|
|
|
type BrokerageEventCardProps = { event: BrokerageEvent };
|
|
|
|
const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
|
|
const { event } = props;
|
|
const { t } = useTranslation();
|
|
|
|
const date = formatDate(event.date);
|
|
|
|
if (event.type === "coupon" || event.type === "dividend") {
|
|
const title = [t(`events.type.${event.type}`), event.displayName].join(" · ");
|
|
|
|
const extraMetadata = [event.isin, event.account?.name]
|
|
.filter(Boolean)
|
|
.join(" · ");
|
|
|
|
return (
|
|
<PayoutCard
|
|
date={date}
|
|
dateKind={event.dateKind}
|
|
extraMetadata={extraMetadata}
|
|
imageSrc={instrumentLogoUrl(event.logoName)}
|
|
initial={(event.ticker.trim()[0] ?? "?").toUpperCase()}
|
|
kind="forecast"
|
|
projectedAmount={event.projectedAmount}
|
|
title={title}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const metadata = [
|
|
date,
|
|
event.dateKind === "registry"
|
|
? t("events.dateKind.registry")
|
|
: null,
|
|
event.isin,
|
|
event.account?.name,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" · ");
|
|
|
|
const projectedAmount = event.projectedAmount
|
|
? formatMoney(event.projectedAmount)
|
|
: t("events.noAmount");
|
|
|
|
return (
|
|
<EntryCard
|
|
imageSrc={instrumentLogoUrl(event.logoName)}
|
|
initial={(
|
|
event.ticker.trim()[0] ?? "?"
|
|
).toUpperCase()}
|
|
metadata={metadata}
|
|
title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
|
|
tone="neutral"
|
|
value={projectedAmount}
|
|
valueLabel={t("payout.forecast")}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { BrokerageEventCard };
|