feat: clarify grouped coupon payouts (#162) (#165)

src/entities/broker-operation/ui/OperationGroup.tsx

@@ -9,12 +9,13 @@ import {
 	sumMoney,
 	totalText,
 } from "@/shared/lib";
-import { AccountCardRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
+import { AccountCardRow, AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
 
 import type { BrokerageOperation } from "../api/useBrokerageOperations";
 
 import {
 	entryLabelKey,
+	isCouponPayment,
 	isZeroDecimal,
 	operationLabelKey,
 	paymentPresentation,
@@ -37,6 +38,8 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
 		? entryLabelKey(first)
 		: operationLabelKey(first.type));
 
+	const isCoupon = isCouponPayment(first);
+
 	const instrument
 		= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
 
@@ -52,9 +55,21 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
 		: null;
 
 	const date = formatSnapshotDay(first.occurredAt);
-	const title = `${typeLabel} · ${instrument}`;
+	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?.length && totals.every(total => !isZeroDecimal(total.value) && !total.value.startsWith("-"))
+		? "positive"
+		: "neutral";
+
 	const accessibleName = [
 		title,
 		t("payout.executedAt", { date }),
@@ -63,13 +78,14 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
 
 	return (
 		<EntryGroup
+			flat={isCoupon}
 			header={(
 				<EntryCard
 					imageSrc={instrumentLogoUrl(first.logoName)}
 					initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
 					metadata={t("payout.executedAt", { date })}
 					title={title}
-					tone="neutral"
+					tone={totalTone}
 					value={<EntryGroupTotal isSigned totals={totals} />}
 					valueLabel={typeLabel}
 					wrap
@@ -80,14 +96,15 @@ const OperationGroup: FC<OperationGroupProps> = (props) => {
 			{props.entries.map(({ key, operation }) => {
 				const payment = paymentPresentation(operation);
 
-				return (
-					<AccountCardRow
-						accountName={operation.account?.name ?? "—"}
-						key={key}
-						value={payment.amount}
-						valueLabel={t(payment.label)}
-					/>
-				);
+				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>
 	);