114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { EntryCard } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
formatSnapshotDay,
|
|
instrumentLogoUrl,
|
|
sumMoney,
|
|
totalText,
|
|
} from "@/shared/lib";
|
|
import { AccountCardRow, AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
|
|
|
|
import type { BrokerageOperation } from "../api/useBrokerageOperations";
|
|
|
|
import {
|
|
entryLabelKey,
|
|
isCouponPayment,
|
|
isZeroDecimal,
|
|
operationLabelKey,
|
|
paymentPresentation,
|
|
} from "../model/display";
|
|
|
|
type OperationGroupProps = {
|
|
entries: { key: string; operation: BrokerageOperation }[];
|
|
totalVisible: boolean;
|
|
};
|
|
|
|
const OperationGroup: FC<OperationGroupProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
const operations = props.entries.map(entry => entry.operation);
|
|
const first = operations.at(0);
|
|
|
|
// groupItems only emits groups of at least two entries.
|
|
if (!first) return null;
|
|
|
|
const typeLabel = t(first.category === "income"
|
|
? entryLabelKey(first)
|
|
: operationLabelKey(first.type));
|
|
|
|
const isCoupon = isCouponPayment(first);
|
|
|
|
const instrument
|
|
= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
|
|
|
|
const amounts = operations.flatMap(operation =>
|
|
operation.payment ? [operation.payment] : [],
|
|
);
|
|
|
|
const isAmountsKnown = amounts.length === operations.length
|
|
&& amounts.every(amount => !isZeroDecimal(amount.value));
|
|
|
|
const totals = isAmountsKnown && props.totalVisible
|
|
? sumMoney(amounts)
|
|
: null;
|
|
|
|
const date = formatSnapshotDay(first.occurredAt);
|
|
const description = first.description.trim();
|
|
let title = `${typeLabel} · ${instrument}`;
|
|
|
|
if (isCoupon) {
|
|
title = description && description.toLocaleLowerCase() !== "купон"
|
|
? description
|
|
: t("ledger.couponPayment", { instrument });
|
|
}
|
|
|
|
const totalsText = totalText(totals, true);
|
|
|
|
const totalTone = isCoupon && totals && !isZeroDecimal(totals.value) && !totals.value.startsWith("-")
|
|
? "positive"
|
|
: "neutral";
|
|
|
|
const accessibleName = [
|
|
title,
|
|
t("payout.executedAt", { date }),
|
|
totalsText || t("entryGroup.totalUnavailable"),
|
|
].join(", ");
|
|
|
|
return (
|
|
<EntryGroup
|
|
flat={isCoupon}
|
|
header={(
|
|
<EntryCard
|
|
imageSrc={instrumentLogoUrl(first.logoName)}
|
|
initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
|
|
metadata={t("payout.executedAt", { date })}
|
|
title={title}
|
|
tone={totalTone}
|
|
value={<EntryGroupTotal isSigned totals={totals} />}
|
|
valueLabel={typeLabel}
|
|
wrap
|
|
/>
|
|
)}
|
|
label={accessibleName}
|
|
>
|
|
{props.entries.map(({ key, operation }) => {
|
|
const payment = paymentPresentation(operation);
|
|
|
|
const accountRowProps = {
|
|
accountName: operation.account?.name ?? "—",
|
|
value: payment.amount,
|
|
valueLabel: t(payment.label),
|
|
};
|
|
|
|
return isCoupon
|
|
? <AccountRow key={key} {...accountRowProps} tone={payment.tone} />
|
|
: <AccountCardRow key={key} {...accountRowProps} />;
|
|
})}
|
|
</EntryGroup>
|
|
);
|
|
};
|
|
|
|
export { OperationGroup };
|