{card.bankName || t("bank.card")}
- {card.archivedAt && (
- {t("bank.archived")}
- )}
+
+ {card.archivedAt && {t("bank.archived")}}
+
-
+
+
{`•••• •••• •••• ${card.lastFour || "••••"}`}
+
{card.name}
+
{formatMoney(card.balance)}
+
{card.paymentSystem && (
- {card.paymentSystem === "mastercard" && (
-
- )}
+ {card.paymentSystem === "mastercard" && }
+
{t(`bank.paymentSystems.${card.paymentSystem}`)}
)}
@@ -66,6 +58,7 @@ 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";
}
diff --git a/src/entities/bank-card/ui/BankCardForm/BankCardFields.vm.ts b/src/entities/bank-card/ui/BankCardForm/BankCardFields.vm.ts
new file mode 100644
index 0000000..69ebd46
--- /dev/null
+++ b/src/entities/bank-card/ui/BankCardForm/BankCardFields.vm.ts
@@ -0,0 +1,23 @@
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import type { BankCardValues } from "../../model/form.schema";
+
+import { useOpeningDateField } from "./useOpeningDateField";
+import { usePaymentSystemField } from "./usePaymentSystemField";
+
+function useBankCardFieldsVm() {
+ const {
+ control,
+ formState: { errors },
+ register,
+ } = useFormContext
();
+
+ const { t } = useTranslation();
+ const openingDate = useOpeningDateField(control);
+ const paymentSystem = usePaymentSystemField(control);
+
+ return { ...openingDate, ...paymentSystem, errors, register, t };
+}
+
+export { useBankCardFieldsVm };
diff --git a/src/entities/bank-card/ui/BankCardForm/BankCardForm.stories.tsx b/src/entities/bank-card/ui/BankCardForm/BankCardForm.stories.tsx
index ff12e6a..3bc5e06 100644
--- a/src/entities/bank-card/ui/BankCardForm/BankCardForm.stories.tsx
+++ b/src/entities/bank-card/ui/BankCardForm/BankCardForm.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import { FormProvider, useForm } from "react-hook-form";
-import type { BankCardValues } from "../../model/form-validation";
+import type { BankCardValues } from "../../model/form.schema";
import { BankCardFields } from "./BankCardForm.view";
@@ -20,6 +20,7 @@ const meta = {
openingDate: "2026-08-01",
},
});
+
return (
@@ -38,8 +39,11 @@ const meta = {
tags: ["autodocs"],
title: "Product/BankCards/CardFields",
} satisfies Meta;
+
export default meta;
+
type Story = StoryObj;
+
export const Active: Story = { name: "Независимая карта в рублях" };
export const Archived: Story = {
args: { archived: true },
diff --git a/src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx b/src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx
index 5692bf3..49611b1 100644
--- a/src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx
+++ b/src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx
@@ -12,8 +12,8 @@ import type { BankCard } from "../../api/queries";
import { BankCardForm } from "./BankCardForm";
-const card: BankCard = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
+const card: BankCard
+ = {
archivedAt: null,
balance: { currency: "RUB", value: "50" },
bankName: "Банк",
@@ -24,8 +24,8 @@ const card: BankCard = (/* eslint-disable unicorn/no-null -- Fixture preserves t
openingDate: "2026-01-01",
paymentSystem: null,
version: 1,
- }
-/* eslint-enable unicorn/no-null */);
+ };
+
function setup(value: BankCard) {
configureAuthClient({
accessToken: () => "test",
@@ -41,8 +41,10 @@ function setup(value: BankCard) {
,
);
+
return close;
}
+
describe("BankCardForm", () => {
it("waits for the exit transition before notifying the parent", async () => {
const close = setup(card);
@@ -64,20 +66,22 @@ describe("BankCardForm", () => {
server.use(
http.patch("*/api/v1/bank-cards/a", async ({ request }) => {
body = await request.json();
+
return HttpResponse.json(card);
}),
);
fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
await waitFor(() => expect(close).toHaveBeenCalled());
- expect(body).toEqual((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ expect(body).toEqual(
{
bankName: null,
lastFour: null,
name: "Основная",
paymentSystem: null,
version: 1,
- }
- /* eslint-enable unicorn/no-null */));
+ },
+ );
});
it("loads and saves the selected payment system", async () => {
const close = setup({ ...card, paymentSystem: "mir" });
@@ -92,6 +96,7 @@ describe("BankCardForm", () => {
server.use(
http.patch("*/api/v1/bank-cards/a", async ({ request }) => {
body = await request.json();
+
return HttpResponse.json({ ...card, paymentSystem: "visa" });
}),
);
@@ -132,6 +137,7 @@ describe("BankCardForm", () => {
const body = (await request.json()) as Record;
bodies.push(body);
version = 2;
+
return body.version === 1
? HttpResponse.json(
{ code: "BANK_VERSION_CONFLICT" },
@@ -146,9 +152,11 @@ describe("BankCardForm", () => {
fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
await screen.findByText(/Запись уже изменена/);
fireEvent.click(screen.getByRole("button", { name: "Перечитать запись" }));
+
const adopt = await screen.findByRole("button", {
name: "Использовать актуальную версию 2",
});
+
expect(screen.getByLabelText(/Название карты/)).toHaveValue("Мой черновик");
fireEvent.click(adopt);
fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
diff --git a/src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx b/src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx
index a7e30db..493dc8d 100644
--- a/src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx
+++ b/src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx
@@ -1,121 +1,61 @@
-import { zodResolver } from "@hookform/resolvers/zod";
import { Button, Group, Modal, Stack, Text } from "@mantine/core";
-import { type FC, useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { type FC } from "react";
+import { FormProvider } from "react-hook-form";
import { formatDate } from "@/shared/lib";
-import { useBankMutations } from "../../api/mutations";
-import { type BankCard, useBankCard } from "../../api/queries";
-import {
- bankCardSchema,
- type BankCardValues,
- bankMoneyValue,
- bankToday,
-} from "../../model/form-validation";
+import { type BankCard } from "../../api/queries";
import { BankFeedback } from "../BankFeedback";
import classes from "../BankForms.module.css";
-import { useBankFormFocus } from "../useBankFormFocus";
import { BankCardFields } from "./BankCardForm.view";
+import { useBankCardFormVm } from "./BankCardForm.vm";
type BankCardFormProps = { card?: BankCard; onClose: () => void };
+
const BankCardForm: FC = (props) => {
- useBankFormFocus();
- const [opened, setOpened] = useState(true);
- const { t } = useTranslation();
- const [intent] = useState(() => crypto.randomUUID());
- const [version, setVersion] = useState(props.card?.version ?? 1);
- const [error, setError] = useState();
- const [latest, setLatest] = useState();
- const fresh = useBankCard(props.card?.id);
- const mutation = useBankMutations();
- const methods = useForm({
- defaultValues: {
- bankName: props.card?.bankName ?? "",
- lastFour: props.card?.lastFour ?? "",
- name: props.card?.name ?? "",
- openingBalance: props.card?.openingBalance.value ?? "0",
- openingDate: props.card?.openingDate ?? bankToday(),
- paymentSystem: props.card?.paymentSystem ?? "",
- },
- resolver: zodResolver(bankCardSchema),
- });
- const isPending
- = !opened
- || methods.formState.isSubmitting
- || (fresh.isFetching && Boolean(error));
+ const {
+ dialogTitle,
+ error,
+ isPending,
+ latest,
+ methods,
+ onAdoptVersion,
+ onCancel,
+ onReloadRecord,
+ onRequestClose,
+ onSubmit,
+ opened,
+ t,
+ } = useBankCardFormVm(props);
+
return (
!isPending && setOpened(false)}
+ onClose={onRequestClose}
onExitTransitionEnd={props.onClose}
opened={opened}
- title={t(props.card ? "bank.editCard" : "bank.addCard")}
+ title={dialogTitle}
>
-
- )}
- large
- state={vm.candlesState}
- title={t("stock.chart")}
- >
- {!!(vm.candles) && ((
- vm.chartData.length > 0
- ? (
- <>
-
- new Intl.NumberFormat("ru-RU", {
- maximumFractionDigits: 4,
- }).format(value)}
- withDots={vm.chartData.length === 1}
- withGradient
- yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
- />
-
- {t(
- props.priceUnit === "percent"
- ? "bond.chartNote"
- : "stock.chartNote",
- )}
-
- {!!(vm.hasIncompleteCandle) && ((
-
- {t("stock.incomplete")}
-
- ))}
- {vm.averageLine !== null && ((
-
- {t("stock.averageLine")}
- :
- {" "}
- {formatMoney(vm.position?.averagePurchasePrice)}
-
- ))}
-
-
-
- {t("stock.priceTable")}
-
- {t("stock.priceTableHint", { count: vm.chartData.length })}
-
-
-
-
-
-
-
- {t("stock.date")}
- {t("stock.price")}
- {t("stock.candle")}
-
-
-
- {vm.priceRows.map(candle => (
-
- {candle.date}
-
- {priceLabel(candle.close)}
-
-
-
- {t(
- candle.isComplete
- ? "stock.complete"
- : "stock.forming",
- )}
-
-
-
- ))}
-
-
-
-
-
-
-
- )
- : (
-
- {t(
- vm.candlesState.partial
- ? "investment.partial"
- : "stock.noCandles",
- )}
-
- )
- ))}
-
- );
-};
-
-export { InstrumentChart };
diff --git a/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.view.tsx b/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.view.tsx
new file mode 100644
index 0000000..7aa826c
--- /dev/null
+++ b/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.view.tsx
@@ -0,0 +1,195 @@
+import type { FC } from "react";
+
+import { AreaChart } from "@mantine/charts";
+import {
+ Accordion,
+ Badge,
+ ScrollArea,
+ SegmentedControl,
+ Table,
+ Text,
+} from "@mantine/core";
+
+import { formatMoney } from "@/shared/lib";
+
+import type { InstrumentChartVm } from "../../model/types";
+
+import classes from "../InstrumentDetails.module.css";
+import { InstrumentSection } from "../InstrumentSection.view";
+import { useInstrumentChartVm } from "./InstrumentChart.vm";
+
+type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
+
+const InstrumentChart: FC = (props) => {
+ const {
+ chartLabel,
+ formatChartValue,
+ periodOptions,
+ priceRows,
+ referenceLines,
+ t,
+ vm,
+ } = useInstrumentChartVm(props);
+
+ let chartContent;
+
+ if (vm.candles) {
+ if (vm.chartData.length > 0) {
+ chartContent = (
+ <>
+
+
+
+ {t(
+ props.priceUnit === "percent"
+ ? "bond.chartNote"
+ : "stock.chartNote",
+ )}
+
+
+ {!!vm.hasIncompleteCandle && (
+
+ {t("stock.incomplete")}
+
+ )}
+
+ {vm.averageLine !== null && (
+
+ {t("stock.averageLine")}:{" "}
+ {formatMoney(vm.position?.averagePurchasePrice)}
+
+ )}
+
+
+
+
+ {t("stock.priceTable")}
+
+
+ {t("stock.priceTableHint", { count: vm.chartData.length })}
+
+
+
+
+
+
+
+
+ {t("stock.date")}
+
+ {t("stock.price")}
+
+ {t("stock.candle")}
+
+
+
+
+ {priceRows.map((candle) => {
+ const displayColor = candle.isComplete
+ ? "gray"
+ : "blue";
+
+ return (
+
+ {candle.date}
+
+
+ {candle.price}
+
+
+
+
+ {t(
+ candle.isComplete
+ ? "stock.complete"
+ : "stock.forming",
+ )}
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+ }
+ else {
+ chartContent = (
+
+ {t(
+ vm.candlesState.partial
+ ? "investment.partial"
+ : "stock.noCandles",
+ )}
+
+ );
+ }
+ }
+
+ return (
+
+
+
+ )}
+ large
+ state={vm.candlesState}
+ title={t("stock.chart")}
+ >
+ {chartContent}
+
+ );
+};
+
+export { InstrumentChart };
diff --git a/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.vm.ts b/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.vm.ts
new file mode 100644
index 0000000..02c6d0c
--- /dev/null
+++ b/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.vm.ts
@@ -0,0 +1,64 @@
+import { useTranslation } from "react-i18next";
+
+import { formatChartValue, formatDecimal, formatMoney } from "@/shared/lib";
+
+import type { InstrumentChartVm } from "../../model/types";
+
+type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
+
+function useInstrumentChartVm(props: InstrumentChartProps) {
+ const { vm } = props;
+ const { t } = useTranslation();
+
+ const priceRows = vm.priceRows.map((candle) => {
+ const currency = vm.candles?.currency;
+ const value = candle.close;
+
+ const amount = currency ? { currency, value } : undefined;
+
+ const price = props.priceUnit === "percent"
+ ? `${formatDecimal(value)} %`
+ : formatMoney(amount);
+
+ return { ...candle, price };
+ });
+
+ const periodOptions = ["month", "halfYear", "year", "all"].map(value => ({
+ label: t(`stock.periods.${value}`),
+ value,
+ }));
+
+ const chartLabel = t(
+ props.priceUnit === "percent" ? "bond.chartLabel" : "stock.chartLabel",
+ {
+ currency:
+ props.priceUnit === "percent"
+ ? t("bond.percentOfNominal")
+ : (vm.candles?.currency ?? ""),
+ },
+ );
+
+ const referenceLines
+ = vm.averageLine === null
+ ? []
+ : [
+ {
+ color: "orange.7",
+ ifOverflow: "extendDomain" as const,
+ label: t("stock.averageLine"),
+ y: vm.averageLine,
+ },
+ ];
+
+ return {
+ chartLabel,
+ formatChartValue,
+ periodOptions,
+ priceRows,
+ referenceLines,
+ t,
+ vm,
+ };
+}
+
+export { useInstrumentChartVm };
diff --git a/src/features/instrument-details/ui/InstrumentEvents.view.tsx b/src/features/instrument-details/ui/InstrumentEvents.view.tsx
index df9de31..6d6b75d 100644
--- a/src/features/instrument-details/ui/InstrumentEvents.view.tsx
+++ b/src/features/instrument-details/ui/InstrumentEvents.view.tsx
@@ -20,25 +20,54 @@ type InstrumentEventsProps = {
const InstrumentEvents: FC
= (props) => {
const { vm } = props;
const { t } = useTranslation();
+
+ const options = [
+ "all",
+ "trades",
+ props.incomeFilter ?? "dividends",
+ "other",
+ ].map(value => ({
+ label:
+ value === (props.incomeFilter ?? "dividends") && props.incomeLabel
+ ? props.incomeLabel
+ : t(`stock.filters.${value}`),
+ value,
+ }));
+
+ let eventsContent;
+
+ if (vm.eventRows.length > 0) {
+ eventsContent = (
+
+ {vm.eventRows.map(event => (
+
+ ))}
+
+ );
+ }
+ else {
+ eventsContent = (
+
+ {t(
+ vm.operationsState.partial
+ ? "investment.partial"
+ : "stock.noOperations",
+ )}
+
+ );
+ }
+
return (
({
- label:
- value === (props.incomeFilter ?? "dividends")
- && props.incomeLabel
- ? props.incomeLabel
- : t(`stock.filters.${value}`),
- value,
- }))}
+ data={options}
onChange={vm.setFilter}
value={vm.filter}
/>
@@ -47,32 +76,14 @@ const InstrumentEvents: FC = (props) => {
state={vm.operationsState}
title={t("stock.history")}
>
- {!!(vm.operations) && ((
+ {!!vm.operations && (
<>
{props.historyNote ?? t("stock.historyNote")}
- {vm.eventRows.length > 0
- ? (
-
- {vm.eventRows.map(event => (
-
- ))}
-
- )
- : (
-
- {t(
- vm.operationsState.partial
- ? "investment.partial"
- : "stock.noOperations",
- )}
-
- )}
+
+ {eventsContent}
+
+
- ))}
+ )}
);
};
diff --git a/src/features/instrument-details/ui/InstrumentPosition.view.tsx b/src/features/instrument-details/ui/InstrumentPosition.view.tsx
index f4abd37..96d5c41 100644
--- a/src/features/instrument-details/ui/InstrumentPosition.view.tsx
+++ b/src/features/instrument-details/ui/InstrumentPosition.view.tsx
@@ -16,130 +16,144 @@ type InstrumentPositionProps = {
returnNote?: string;
vm: InstrumentPositionVm;
};
+
const InstrumentPosition: FC = (props) => {
const { vm } = props;
const { t } = useTranslation();
if (vm.position && vm.position.accounts.length === 0) return;
+
+ const positionReturnColor = vm.position?.absoluteReturn?.value.startsWith("-")
+ ? "red.8"
+ : "green.8";
+
return (
- {!!(vm.position) && ((
+ {!!vm.position && (
- {!!(vm.position.isStale) && ((
- {t("portfolio.staleWarning")}
- ))}
+ {!!vm.position.isStale && {t("portfolio.staleWarning")}}
+
{props.quantityLabel ?? t("stock.quantity")}
+
{formatDecimal(vm.position.quantity)}
+
{t("stock.value")}
+
{formatMoney(vm.position.currentValue)}
+
{t("stock.average")}
+
{formatMoney(vm.position.averagePurchasePrice)}
+
{t("stock.openReturn")}
-
+
+
{formatMoney(vm.position.absoluteReturn)}
- {vm.position.returnPercent !== null && ((
+
+ {vm.position.returnPercent !== null && (
- {formatDecimal(vm.position.returnPercent)}
- {" "}
- %
+ {formatDecimal(vm.position.returnPercent)} %
- ))}
+ )}
+
{props.returnNote ?? t("stock.openReturnNote")}
+
- {vm.position.accounts.map(account => (
-
- {account.account
- ? (
-
- {account.account.name}
-
- )
- : (
-
{t("stock.portfolio")}
- )}
-
-
- {props.quantityLabel ?? t("stock.quantity")}
-
- {formatDecimal(account.quantity)}
-
-
-
- {t("stock.average")}
-
- {formatMoney(account.averagePurchasePrice)}
-
-
-
- {t("stock.value")}
-
- {formatMoney(account.currentValue)}
-
-
-
- {t("stock.openReturn")}
-
-
- {formatMoney(account.absoluteReturn)}
-
- {account.returnPercent !== null && ((
-
- {formatDecimal(account.returnPercent)}
- {" "}
- %
+ {vm.position.accounts.map((account) => {
+ const accountReturnColor = account.absoluteReturn?.value.startsWith("-")
+ ? "red.8"
+ : undefined;
+
+ return (
+
+ {account.account
+ ? (
+
+ {account.account.name}
+
+ )
+ :
{t("stock.portfolio")}}
+
+
+
+ {props.quantityLabel ?? t("stock.quantity")}
- ))}
+
+ {formatDecimal(account.quantity)}
+
+
+
+
+ {t("stock.average")}
+
+
+ {formatMoney(account.averagePurchasePrice)}
+
+
+
+
+ {t("stock.value")}
+
+
+ {formatMoney(account.currentValue)}
+
+
+
+
+ {t("stock.openReturn")}
+
+
+
+ {formatMoney(account.absoluteReturn)}
+
+
+ {account.returnPercent !== null && (
+
+ {formatDecimal(account.returnPercent)} %
+
+ )}
+
- ))}
+ );
+ })}
+
{t("stock.snapshotAt", {
date: formatSnapshotTime(vm.position.observedAt),
})}
- ))}
+ )}
);
};
diff --git a/src/features/instrument-details/ui/InstrumentSection.view.tsx b/src/features/instrument-details/ui/InstrumentSection.view.tsx
index e021b77..9119dd3 100644
--- a/src/features/instrument-details/ui/InstrumentSection.view.tsx
+++ b/src/features/instrument-details/ui/InstrumentSection.view.tsx
@@ -29,12 +29,46 @@ type InstrumentSectionProps = PropsWithChildren<{
state: SectionState;
title: string;
}>;
+
const InstrumentSection: FC
= (props) => {
const { t } = useTranslation();
- const readError = t(props.state.hasData ? "accounts.refreshError" : "stock.sectionError");
+
+ const readError = t(
+ props.state.hasData ? "accounts.refreshError" : "stock.sectionError",
+ );
+
+ const sectionClassName = props.embedded
+ ? classes.embeddedSection
+ : classes.section;
+
+ const skeletonHeight = props.large
+ ? CHART_SKELETON_HEIGHT_PX
+ : SECTION_SKELETON_HEIGHT_PX;
+
+ let sectionContent;
+
+ if (props.state.loading) {
+ sectionContent = (
+
+
+
+
+
+
+
+ );
+ }
+ else {
+ sectionContent = (
+ props.children
+ );
+ }
+
return (
@@ -42,34 +76,35 @@ const InstrumentSection: FC = (props) => {
{props.title}
+
{props.controls}
- {!!(props.state.stale) && ((
- {t("investment.stale")}
- ))}
- {!!(props.state.partial) && ((
- {t("investment.partial")}
- ))}
- {!!(props.state.lastSuccessfulAt) && ((
+
+ {!!props.state.stale && {t("investment.stale")}}
+
+ {!!props.state.partial && {t("investment.partial")}}
+
+ {!!props.state.lastSuccessfulAt && (
{t("investment.sourceTime", {
date: formatSnapshotTime(props.state.lastSuccessfulAt),
})}
- ))}
- {!!(props.state.refreshing) && ((
+ )}
+
+ {!!props.state.refreshing && (
{t("accounts.refreshing")}
- ))}
- {!!(props.state.error) && ((
+ )}
+
+ {!!props.state.error && (
- {props.state.sourceError
- ? t("investment.syncFailed")
- : readError}
+ {props.state.sourceError ? t("investment.syncFailed") : readError}
+
- ))}
- {props.state.loading
- ? (
-
-
-
-
-
-
- )
- : (
- props.children
- )}
+ )}
+
+ {sectionContent}
);
};
diff --git a/src/features/tbank-connection/model/connection-boundary.ts b/src/features/tbank-connection/model/connection-boundary.ts
index 5e23015..a25a7fe 100644
--- a/src/features/tbank-connection/model/connection-boundary.ts
+++ b/src/features/tbank-connection/model/connection-boundary.ts
@@ -31,6 +31,7 @@ function commitTbankConnectionBoundary(
void queryClient.resetQueries({
predicate: ({ queryKey }) => {
const [method, path] = queryKey;
+
return (
method === "get"
&& typeof path === "string"
diff --git a/src/features/tbank-connection/model/screen-sync.test.tsx b/src/features/tbank-connection/model/screen-sync.test.tsx
index fec1d07..037298a 100644
--- a/src/features/tbank-connection/model/screen-sync.test.tsx
+++ b/src/features/tbank-connection/model/screen-sync.test.tsx
@@ -19,11 +19,14 @@ function auth() {
refresh: () => Promise.resolve(true),
});
}
+
describe("page-owned screen synchronization", () => {
it("ignores a late sync acceptance after the account scope changes", async () => {
auth();
- const { promise: blocked, resolve: release } = Promise.withResolvers();
+ const { promise: blocked, resolve: release }
+ = Promise.withResolvers();
+
const posted: string[] = [];
const polled: string[] = [];
server.use(
@@ -32,8 +35,10 @@ describe("page-owned screen synchronization", () => {
accountId: string;
screen: "account";
};
+
posted.push(scope.accountId);
await blocked;
+
return HttpResponse.json(
{ id: scope.accountId, now: "2026-09-25T00:00:00Z", scope },
{ status: 202 },
@@ -41,6 +46,7 @@ describe("page-owned screen synchronization", () => {
}),
http.get("*/api/v1/tbank-sync/:id", ({ params }) => {
polled.push(String(params.id));
+
return HttpResponse.json({
id: params.id,
resources: [],
@@ -48,6 +54,7 @@ describe("page-owned screen synchronization", () => {
});
}),
);
+
const { rerender, result } = renderHook(
({ accountId }) => useScreenSync({ accountId, screen: "account" }, []),
{
@@ -55,6 +62,7 @@ describe("page-owned screen synchronization", () => {
wrapper: createQueryWrapper().wrapper,
},
);
+
let pending!: Promise;
act(() => {
pending = result.current.refresh();
@@ -79,6 +87,7 @@ describe("page-owned screen synchronization", () => {
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
+
return isUnavailable
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(
@@ -87,14 +96,17 @@ describe("page-owned screen synchronization", () => {
}),
http.post("*/api/v1/tbank-sync", () => {
posts += 1;
+
return new HttpResponse(null, { status: 500 });
}),
);
const { queryClient, wrapper } = createQueryWrapper();
+
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
const disabled = useStockQuote("");
+
return {
accounts,
disabled,
@@ -103,6 +115,7 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper },
);
+
if (cached) {
await waitFor(() =>
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
@@ -111,6 +124,7 @@ describe("page-owned screen synchronization", () => {
isUnavailable = true;
await act(() => result.current.accounts.refetch());
}
+
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
isUnavailable = false;
await act(() => result.current.sync.retry());
@@ -119,7 +133,13 @@ describe("page-owned screen synchronization", () => {
cached ? "3" : "2",
);
expect(modes).toEqual(
- cached ? [null, /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, "observe"] : [null, "observe"],
+ cached
+ ? [
+ null,
+ null,
+ "observe",
+ ]
+ : [null, "observe"],
);
expect(posts).toBe(0);
expect(result.current.disabled.data).toBeUndefined();
@@ -141,7 +161,9 @@ describe("page-owned screen synchronization", () => {
async (boundary, pending) => {
auth();
- const { promise: blocked, resolve: release } = Promise.withResolvers();
+ const { promise: blocked, resolve: release }
+ = Promise.withResolvers();
+
let isRecovering = false;
let isChanged = false;
server.use(
@@ -154,18 +176,22 @@ describe("page-owned screen synchronization", () => {
: HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 });
isRecovering = true;
await blocked;
+
return HttpResponse.json(resource([], { stateVersion: "old" }));
}),
);
const { queryClient, wrapper } = createQueryWrapper();
const published: unknown[] = [];
+
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
if (event.type === "updated" && event.action.type === "success")
published.push(event.query.state.data);
});
+
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
+
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
@@ -173,6 +199,7 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper },
);
+
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
let recovery!: Promise;
act(() => {
@@ -182,6 +209,7 @@ describe("page-owned screen synchronization", () => {
if (pending) await waitFor(() => expect(isRecovering).toBe(true));
await act(async () => {
isChanged = true;
+
switch (boundary) {
case "access": {
invalidateResourceAccess(queryClient, "brokerage", {
@@ -190,24 +218,29 @@ describe("page-owned screen synchronization", () => {
break;
}
+
case "logout": {
configureAuthClient();
queryClient.clear();
break;
}
+
case "session": {
auth();
queryClient.clear();
break;
}
- case "connection": { commitTbankConnectionBoundary(queryClient, {
- connected: true,
- connectedAt: "2026-09-27T00:00:00Z",
- });
+
+ case "connection": {
+ commitTbankConnectionBoundary(queryClient, {
+ connected: true,
+ connectedAt: "2026-09-27T00:00:00Z",
+ });
}
}
+
release();
await recovery;
});
@@ -233,6 +266,7 @@ describe("page-owned screen synchronization", () => {
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
+
return modes.length === 1
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
: HttpResponse.json(resource([]));
@@ -242,6 +276,7 @@ describe("page-owned screen synchronization", () => {
),
http.get("*/api/v1/tbank-sync/:id", () => {
polls += 1;
+
return retryStatus && polls === 1
? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 })
: HttpResponse.json({
@@ -252,10 +287,12 @@ describe("page-owned screen synchronization", () => {
}),
);
const { queryClient, wrapper } = createQueryWrapper();
+
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
const disabled = useStockQuote("");
+
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts, disabled]),
@@ -263,9 +300,11 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper },
);
+
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
expect(result.current.accounts.meta).toBeUndefined();
await act(() => result.current.sync.refresh());
+
if (retryStatus) {
await waitFor(() =>
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
@@ -273,9 +312,10 @@ describe("page-owned screen synchronization", () => {
);
await act(() => result.current.sync.retry());
}
+
await waitFor(() => expect(result.current.accounts.isSuccess).toBe(true));
expect(result.current.accounts.data).toEqual([]);
- // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response.
+
expect(modes).toEqual([null, "observe"]);
expect(
queryClient
@@ -290,16 +330,20 @@ describe("page-owned screen synchronization", () => {
const bodies: unknown[] = [];
let isCompleted = false;
let polls = 0;
+
const meta = () =>
resource([], { stateVersion: isCompleted ? "2" : "1" }).meta;
+
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
+
return HttpResponse.json(resource([], meta()));
}),
http.post("*/api/v1/tbank-sync", async ({ request }) => {
bodies.push(await request.json());
isCompleted = true;
+
return HttpResponse.json(
{
id: "screen",
@@ -311,7 +355,8 @@ describe("page-owned screen synchronization", () => {
}),
http.get("*/api/v1/tbank-sync/:id", () => {
polls++;
- return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ return HttpResponse.json(
{
errorCode: null,
id: "screen",
@@ -320,13 +365,15 @@ describe("page-owned screen synchronization", () => {
resources: [meta()],
scope: { screen: "accounts" },
state: "succeeded",
- }
- /* eslint-enable unicorn/no-null */));
+ },
+ );
}),
);
+
const { result, unmount } = renderHook(
() => {
const accounts = useBrokerageAccounts();
+
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
@@ -334,6 +381,7 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper: createQueryWrapper().wrapper },
);
+
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
await act(async () => {
await Promise.all([
@@ -345,13 +393,14 @@ describe("page-owned screen synchronization", () => {
expect(result.current.accounts.meta?.stateVersion).toBe("2"),
);
expect(bodies).toEqual([{ screen: "accounts" }]);
- // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response.
+
expect(modes).toEqual([null, "observe"]);
vi.useFakeTimers();
+
try {
await act(() => vi.advanceTimersByTimeAsync(120_000));
expect(polls).toBe(1);
- // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response.
+
expect(modes).toEqual([null, "observe"]);
unmount();
await vi.advanceTimersByTimeAsync(120_000);
@@ -365,26 +414,34 @@ describe("page-owned screen synchronization", () => {
"publishes completed empty coverage while history runs, then stops on %s",
async (boundary) => {
vi.useFakeTimers({ toFake: ["Date"] });
+
try {
auth();
let isCompleted = false;
let polls = 0;
const modes: (null | string)[] = [];
+
const snapshot = () =>
- resource(isCompleted ? [] : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ resource(
+ isCompleted
+ ? []
+ : null,
{
stateVersion: isCompleted ? "covered" : "initial",
sync: { errorCode: null, id: "history", state: "running" },
- }
- /* eslint-enable unicorn/no-null */));
+ },
+ );
+
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
modes.push(new URL(request.url).searchParams.get("sync"));
+
return HttpResponse.json(snapshot());
}),
http.get("*/api/v1/tbank-sync/:id", () => {
polls++;
- return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ return HttpResponse.json(
{
errorCode: null,
id: "history",
@@ -397,13 +454,15 @@ describe("page-owned screen synchronization", () => {
resources: [snapshot().meta],
scope: null,
state: "running",
- }
- /* eslint-enable unicorn/no-null */));
+ },
+ );
}),
);
+
const { result, unmount } = renderHook(
() => {
const accounts = useBrokerageAccounts();
+
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
@@ -411,6 +470,7 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper: createQueryWrapper().wrapper },
);
+
await waitFor(() =>
expect(result.current.accounts.meta?.sync.id).toBe("history"),
);
@@ -426,7 +486,7 @@ describe("page-owned screen synchronization", () => {
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 1100));
});
- // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response.
+
expect(modes).toEqual([null, "observe"]);
if (boundary === "leave") unmount();
else act(() => configureAuthClient());
@@ -447,20 +507,24 @@ describe("page-owned screen synchronization", () => {
server.use(
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json(
- resource([], (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ resource(
+
+ [],
{
sync: { errorCode: null, id: "revoked", state: "running" },
- }
- /* eslint-enable unicorn/no-null */)),
+ },
+ ),
),
),
http.get("*/api/v1/tbank-sync/:id", () =>
HttpResponse.json({ code: "INVALID_TBANK_TOKEN" }, { status: 400 }),
),
);
+
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
+
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
@@ -468,6 +532,7 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper: createQueryWrapper().wrapper },
);
+
await waitFor(() => expect(result.current.accounts.isError).toBe(true));
expect(result.current.accounts.data).toBeUndefined();
});
@@ -475,7 +540,10 @@ describe("page-owned screen synchronization", () => {
auth();
let isObserved = false;
const modes: (null | string)[] = [];
- const dependency = resource([], (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ const dependency = resource(
+
+ [],
{
resourceKey: "operations",
stateVersion: isObserved ? "covered" : "initial",
@@ -484,24 +552,35 @@ describe("page-owned screen synchronization", () => {
id: "dependency",
state: isObserved ? "idle" : "running",
},
- }
- /* eslint-enable unicorn/no-null */)).meta;
+ },
+ ).meta;
+
server.use(
http.get("*/api/v1/brokerage-accounts", ({ request }) => {
const mode = new URL(request.url).searchParams.get("sync");
modes.push(mode);
if (mode) isObserved = true;
+
return HttpResponse.json(
- resource(isObserved ? [] : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, {
- dependencies: [
- { ...dependency, stateVersion: isObserved ? "covered" : "initial" },
- ],
- resourceKey: "projection",
- }),
+ resource(
+ isObserved
+ ? []
+ : null,
+ {
+ dependencies: [
+ {
+ ...dependency,
+ stateVersion: isObserved ? "covered" : "initial",
+ },
+ ],
+ resourceKey: "projection",
+ },
+ ),
);
}),
http.get("*/api/v1/tbank-sync/:id", () =>
- HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ HttpResponse.json(
{
errorCode: null,
id: "dependency",
@@ -510,20 +589,23 @@ describe("page-owned screen synchronization", () => {
resources: [{ ...dependency, stateVersion: "covered" }],
scope: null,
state: "succeeded",
- }
- /* eslint-enable unicorn/no-null */)),
+ },
+ ),
),
);
+
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
useScreenSync({ screen: "accounts" }, [accounts]);
+
return accounts;
},
{ wrapper: createQueryWrapper().wrapper },
);
+
await waitFor(() => expect(result.current.data).toEqual([]));
- // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response.
+
expect(modes).toEqual([null, "observe"]);
});
@@ -536,9 +618,11 @@ describe("page-owned screen synchronization", () => {
HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
),
);
+
const { result } = renderHook(
() => {
const accounts = useBrokerageAccounts();
+
return {
accounts,
sync: useScreenSync({ screen: "accounts" }, [accounts]),
@@ -546,6 +630,7 @@ describe("page-owned screen synchronization", () => {
},
{ wrapper: createQueryWrapper().wrapper },
);
+
await waitFor(() => expect(result.current.accounts.data).toEqual([]));
await act(() => result.current.sync.refresh());
await waitFor(() => expect(result.current.sync.transportError).toBe(true));
diff --git a/src/features/tbank-connection/model/screen-sync.ts b/src/features/tbank-connection/model/screen-sync.ts
index 6bfd0a2..325ce28 100644
--- a/src/features/tbank-connection/model/screen-sync.ts
+++ b/src/features/tbank-connection/model/screen-sync.ts
@@ -15,15 +15,21 @@ import { type InvestmentScreen, useTbankSync } from "./sync";
type ResourceMeta
= paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number];
+
type ScreenResource = {
meta?: ResourceMeta;
observe: (version?: string) => Promise;
queryKey: QueryKey;
transport: {
- fetchStatus: "fetching" | "idle" | "paused";
- status: "error" | "pending" | "success";
+ fetchStatus: "fetching"
+ | "idle"
+ | "paused";
+ status: "error"
+ | "pending"
+ | "success";
};
};
+
const STATUS_INTERVAL_MS = 1000;
function observeResource(
@@ -38,27 +44,34 @@ function observeResource(
if (observed.get(key) === completedId) return;
observed.set(key, completedId);
void resource.observe().catch(() => {});
+
return;
}
+
const changed = [
resource.meta,
...(resource.meta.dependencies ?? []),
].flatMap((current) => {
const notified = latest.get(current.resourceKey);
+
return notified && notified.stateVersion !== current.stateVersion
? [notified]
: [];
});
+
if (changed.length === 0) return;
+
const notification = JSON.stringify(
changed.map(meta => [meta.resourceKey, meta.stateVersion]),
);
- if (observed.get(resource.meta.resourceKey) === notification)
- return;
+
+ if (observed.get(resource.meta.resourceKey) === notification) return;
observed.set(resource.meta.resourceKey, notification);
+
const own = changed.find(
meta => meta.resourceKey === resource.meta?.resourceKey,
);
+
void resource.observe(own?.stateVersion).catch(() => {});
}
@@ -67,17 +80,24 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
const client = useQueryClient();
const deniedRef = useRef(new Set());
const scopeKey = JSON.stringify(scope);
- const [requested, setRequested] = useState(null);
+
+ const [requested, setRequested] = useState(null);
+
const requestInFlightRef = useRef(null);
const currentScopeRef = useRef(scopeKey);
useLayoutEffect(() => {
currentScopeRef.current = scopeKey;
}, [scopeKey]);
- const isCurrentMutation = JSON.stringify(mutation.variables?.body) === scopeKey;
+
+ const isCurrentMutation
+ = JSON.stringify(mutation.variables?.body) === scopeKey;
+
const observedRef = useRef(new Map());
+
const ids = [
...new Set([
...(requested?.scope === scopeKey ? [requested.id] : []),
@@ -93,6 +113,7 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
),
]),
];
+
const statuses = useAuthenticatedQueries(
ids.map(id => ({
...apiQueryClient.queryOptions("get", "/api/v1/tbank-sync/{id}", {
@@ -101,12 +122,16 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
refetchInterval: (query: {
state: { data?: { state: string }; error: unknown };
}) =>
- !(query.state.error || (query.state.data && query.state.data.state !== "running")) && STATUS_INTERVAL_MS,
+ !(
+ query.state.error
+ || (query.state.data && query.state.data.state !== "running")
+ ) && STATUS_INTERVAL_MS,
refetchOnMount: false,
refetchOnWindowFocus: false,
retry: false,
})),
);
+
useEffect(() => {
for (const status of statuses) {
if (!status.error || deniedRef.current.has(status.error)) {
@@ -117,10 +142,16 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
if (!isApiErrorCode(apiErrorCode(status.error), ApiErrorCode.NotFound))
invalidateResourceAccess(client, "brokerage", status.error);
}
+
const latest = new Map();
- const orderedStatuses = statuses.toSorted((a, b) => a.dataUpdatedAt - b.dataUpdatedAt);
+
+ const orderedStatuses = statuses.toSorted(
+ (a, b) => a.dataUpdatedAt - b.dataUpdatedAt,
+ );
+
for (const status of orderedStatuses) {
const statusResources = status.data?.resources ?? [];
+
for (const meta of statusResources) {
latest.set(meta.resourceKey, meta);
const dependencies = meta.dependencies ?? [];
@@ -128,10 +159,18 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
latest.set(dependency.resourceKey, dependency);
}
}
- const completed = statuses.find(status => requested?.scope === scopeKey
- && status.data?.id === requested.id && status.data.state !== "running")?.data;
- for (const resource of resources) observeResource(resource, latest, completed?.id, observedRef.current);
+
+ const completed = statuses.find(
+ status =>
+ requested?.scope === scopeKey
+ && status.data?.id === requested.id
+ && status.data.state !== "running",
+ )?.data;
+
+ for (const resource of resources)
+ observeResource(resource, latest, completed?.id, observedRef.current);
}, [client, statuses, resources, requested, scopeKey]);
+
const isRefreshing
= (isCurrentMutation && mutation.isPending)
|| statuses.some(
@@ -139,15 +178,18 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
)
|| resources.some(({ meta }) => {
const status = statuses[ids.indexOf(meta?.sync.id ?? "")];
+
return (
!status?.isError
&& (!status?.data || status.data.state === "running")
&& (meta?.sync.state === "running" || meta?.sync.state === "queued")
);
});
+
const refresh = async () => {
if (isRefreshing || requestInFlightRef.current === scopeKey) return;
requestInFlightRef.current = scopeKey;
+
try {
const accepted = await mutation.mutateAsync({ body: scope });
if (
@@ -162,15 +204,20 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
*/
}
finally {
- if (requestInFlightRef.current === scopeKey) requestInFlightRef.current = /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+ if (requestInFlightRef.current === scopeKey)
+ requestInFlightRef.current
+
+ = null;
}
};
+
// Retry failed HTTP reads without asking the source to import again.
// A source failure (or explicit refresh with no read error) still needs a sync.
const retry = async () => {
const failed = resources.filter(
resource => resource.transport.status === "error",
);
+
const failedStatuses = statuses.filter(status => status.isError);
if (failed.length > 0 || failedStatuses.length > 0) {
await Promise.allSettled([
@@ -180,6 +227,7 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
}
else await refresh();
};
+
return {
refresh,
refreshing: isRefreshing,
diff --git a/src/features/tbank-connection/model/sync.test.tsx b/src/features/tbank-connection/model/sync.test.tsx
index 7f90b16..d3ede0a 100644
--- a/src/features/tbank-connection/model/sync.test.tsx
+++ b/src/features/tbank-connection/model/sync.test.tsx
@@ -25,25 +25,30 @@ describe("sync connection and session boundaries", () => {
refresh: () => Promise.resolve(true),
});
- const { promise: blocked, resolve: release } = Promise.withResolvers();
+ const { promise: blocked, resolve: release }
+ = Promise.withResolvers();
+
const accepted = {
id: "work",
now: "2026-09-25T12:00:00Z",
scope: { screen: "accounts" },
};
+
let started = 0;
let isChanged = false;
server.use(
http.post("*/api/v1/tbank-sync", async () => {
started += 1;
await blocked;
+
return HttpResponse.json(accepted, { status: 202 });
}),
http.get("*/api/v1/tbank-sync/:id", async () => {
const now = isChanged ? "2026-09-25T12:01:00Z" : accepted.now;
started += 1;
await blocked;
- return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ return HttpResponse.json(
{
...accepted,
errorCode: null,
@@ -51,21 +56,25 @@ describe("sync connection and session boundaries", () => {
progress: { completed: 1, discovering: false, total: 1 },
resources: [],
state: "succeeded",
- }
- /* eslint-enable unicorn/no-null */));
+ },
+ );
}),
);
const { queryClient, wrapper } = createQueryWrapper();
const published: string[] = [];
+
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
- if ((event.query.queryKey as readonly unknown[])[1]
- !== "/api/v1/tbank-sync/{id}") {
+ if (
+ (event.query.queryKey as readonly unknown[])[1]
+ !== "/api/v1/tbank-sync/{id}"
+ ) {
return;
}
const data = event.query.state.data as undefined | { now?: string };
if (data?.now) published.push(data.now);
});
+
const { result } = renderHook(
() => ({
mutation: useTbankSync(),
@@ -73,39 +82,48 @@ describe("sync connection and session boundaries", () => {
}),
{ wrapper },
);
+
const screen: InvestmentScreen = { screen: "accounts" };
let mutation!: Promise;
act(() => {
mutation = result.current.mutation.mutateAsync({ body: screen });
});
+
// eslint-disable-next-line vitest/valid-expect -- Attach rejection handling before releasing the request; the assertion is awaited below.
const discarded = expect(mutation).rejects.toMatchObject({
name: "AbortError",
});
+
await waitFor(() => expect(started).toBe(2));
await act(async () => {
isChanged = true;
+
if (boundary === "connection")
- commitTbankConnectionBoundary(queryClient, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ commitTbankConnectionBoundary(
+
+ queryClient,
{
connected: false,
connectedAt: null,
- }
- /* eslint-enable unicorn/no-null */));
+ },
+ );
else {
generation += 1;
queryClient.clear();
}
+
release();
await blocked;
});
await discarded;
expect(result.current.mutation.data).toBeUndefined();
+
const key = apiQueryClient.queryOptions(
"get",
"/api/v1/tbank-sync/{id}",
{ params: { path: { id: "work" } } },
).queryKey;
+
// A new request may start after a successful connection boundary; an old result cannot win it.
if (boundary === "session")
// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
diff --git a/src/features/tbank-connection/model/sync.ts b/src/features/tbank-connection/model/sync.ts
index 578b213..c53e2f6 100644
--- a/src/features/tbank-connection/model/sync.ts
+++ b/src/features/tbank-connection/model/sync.ts
@@ -6,11 +6,13 @@ import {
type InvestmentScreen
= paths["/api/v1/tbank-sync"]["post"]["requestBody"]["content"]["application/json"];
+
function useTbankSync() {
return apiQueryClient.useMutation("post", "/api/v1/tbank-sync", {
retry: false,
});
}
+
function useTbankSyncStatus(id: null | string) {
return useAuthenticatedQuery({
...apiQueryClient.queryOptions("get", "/api/v1/tbank-sync/{id}", {
diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx
index 8cd01eb..32492fd 100644
--- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx
+++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx
@@ -21,26 +21,31 @@ const brokerageAccountsQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/brokerage-accounts",
).queryKey;
+
const portfolioQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/brokerage-accounts/{accountId}/portfolio",
{ params: { path: { accountId: "account-1" } } },
).queryKey;
+
const operationsQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/brokerage-accounts/{accountId}/operations",
{ params: { path: { accountId: "account-1" } } },
).queryKey;
+
const stockQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/stocks/{uid}/position",
{ params: { path: { uid: "e6123145-9665-43e0-8413-cd61b8aa9b13" } } },
).queryKey;
+
const bondQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/bonds/{uid}/position",
{ params: { path: { uid: "e6123145-9665-43e0-8413-cd61b8aa9b13" } } },
).queryKey;
+
const bankCardsQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/bank-cards",
@@ -48,6 +53,7 @@ const bankCardsQueryKey = apiQueryClient.queryOptions(
params: { query: { includeArchived: "false" } },
},
).queryKey;
+
const unrelatedQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/auth/me",
@@ -59,6 +65,7 @@ function renderSection(client: QueryClient) {
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
+
return render(
@@ -70,21 +77,22 @@ function renderSection(client: QueryClient) {
function seededClient() {
const client = createTestQueryClient();
+
client.setQueryData(brokerageAccountsQueryKey, [
- (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
- id: "account-1",
- name: "Основной счет",
- openedOn: null,
- type: "BROKERAGE",
- }
- /* eslint-enable unicorn/no-null */),
+ {
+ id: "account-1",
+ name: "Основной счет",
+ openedOn: null,
+ type: "BROKERAGE",
+ },
+
]);
client.setQueryData(portfolioQueryKey, { source: "previous-connection" });
client.setQueryData(stockQueryKey, { source: "previous-connection" });
client.setQueryData(bondQueryKey, { source: "previous-connection" });
client.setQueryData(unrelatedQueryKey, { id: "user-1" });
client.setQueryData(bankCardsQueryKey, [{ id: "bank-card-1" }]);
+
return client;
}
@@ -92,18 +100,23 @@ describe("TbankConnectionSection", () => {
it("preserves cached status and a draft entered during a delayed failed refetch", async () => {
const status = { connected: true, connectedAt: "2026-08-14T00:00:00Z" };
- const { promise: response, resolve: finishRefetch } = Promise.withResolvers();
+ const { promise: response, resolve: finishRefetch }
+ = Promise.withResolvers();
+
let reads = 0;
server.use(
http.get("*/api/v1/tbank-connection", async () => {
reads += 1;
+
if (reads === 1) {
await response;
+
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
}
+
return HttpResponse.json(status);
}),
);
@@ -141,11 +154,13 @@ describe("TbankConnectionSection", () => {
server.use(
http.get("*/api/v1/tbank-connection", () => {
reads += 1;
+
return reads === 1
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
- : HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- { connected: false, connectedAt: null }
- /* eslint-enable unicorn/no-null */));
+
+ : HttpResponse.json(
+ { connected: false, connectedAt: null },
+ );
}),
);
renderSection(createTestQueryClient());
@@ -244,19 +259,24 @@ describe("TbankConnectionSection", () => {
const client = seededClient();
let isAborted = false;
- const { promise: previousResponse, resolve: finishPrevious } = Promise.withResolvers<{ source: string }>();
+
+ const { promise: previousResponse, resolve: finishPrevious }
+ = Promise.withResolvers<{ source: string }>();
+
const previousRequest = client
.query({
queryFn: ({ signal }) => {
signal.addEventListener("abort", () => {
isAborted = true;
});
+
return previousResponse;
},
queryKey: operationsQueryKey,
})
// eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering.
.catch(() => {});
+
renderSection(client);
await screen.findByText("Не подключено");
@@ -302,7 +322,9 @@ describe("TbankConnectionSection", () => {
it("keeps DELETE recovery inside the dialog and preserves cache until successful retry", async () => {
let deletes = 0;
- const { promise: response, resolve: finishDelete } = Promise.withResolvers();
+ const { promise: response, resolve: finishDelete }
+ = Promise.withResolvers();
+
server.use(
http.get("*/api/v1/tbank-connection", () =>
HttpResponse.json({
@@ -313,6 +335,7 @@ describe("TbankConnectionSection", () => {
http.delete("*/api/v1/tbank-connection", async () => {
deletes += 1;
if (deletes === 1) await response;
+
return deletes === 1
? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
: new HttpResponse(null, { status: 204 });
@@ -324,9 +347,11 @@ describe("TbankConnectionSection", () => {
fireEvent.click(
await screen.findByRole("button", { name: "Удалить подключение" }),
);
+
const dialog = await screen.findByRole("dialog", {
name: "Удалить подключение?",
});
+
await waitFor(() =>
// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
expect(dialog.contains(document.activeElement)).toBe(true),
diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx
index 205fd1b..a0a7eac 100644
--- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx
+++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx
@@ -10,7 +10,10 @@ import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
const TbankConnectionSection: FC = () => {
const viewModel = useTbankConnectionViewModel();
if (viewModel.state === "loading") return ;
- return viewModel.state === "error" ? : ;
+
+ return viewModel.state === "error"
+ ?
+ : ;
};
export { TbankConnectionSection };
diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx
index 2029b30..ec68a16 100644
--- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx
+++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx
@@ -10,11 +10,13 @@ import {
describe("TbankConnectionSection state views", () => {
it("renders loading and retries a status error", () => {
const retry = vi.fn();
+
const { rerender } = render(
,
);
+
expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
"aria-busy",
"true",
diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx
index 9fb619c..67730de 100644
--- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx
+++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx
@@ -14,6 +14,7 @@ const TbankConnectionLoading: FC = () => {
return (
+
);
diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts
index aa1a587..9507c0e 100644
--- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts
+++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts
@@ -6,9 +6,13 @@ function useTbankConnectionViewModel() {
const status = useAuthenticatedQuery({
...tbankConnectionQueryOptions(),
});
+
if (!status.data) {
- return status.isPending ? { state: "loading" as const } : { retry: () => status.refetch(), state: "error" as const };
+ return status.isPending
+ ? { state: "loading" as const }
+ : { retry: () => status.refetch(), state: "error" as const };
}
+
return {
refreshError: status.isError,
refreshing: status.isFetching,
diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx
index a84bf72..9749021 100644
--- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx
+++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx
@@ -8,19 +8,11 @@ import {
Stack,
Text,
} from "@mantine/core";
-import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { ApiErrorCode, apiErrorCode, apiQueryClient, isApiErrorCode } from "@/shared/api";
+import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
-import {
- commitTbankConnectionBoundary,
- type TbankConnectionStatus,
-} from "../../model/connection-boundary";
-
-enum ConnectionErrorCode { RequestFailed = "REQUEST_ERROR" }
+import { type TbankConnectionStatus } from "../../model/connection-boundary";
+import { useTbankConnectionSectionLoadedVm } from "./TbankConnectionSectionLoaded.vm";
type TbankConnectionSectionLoadedProps = {
refreshError: boolean;
@@ -32,48 +24,29 @@ type TbankConnectionSectionLoadedProps = {
const TbankConnectionSectionLoaded: FC = (
props,
) => {
- const { status } = props;
- const { t } = useTranslation();
- const queryClient = useQueryClient();
- const [isDeleteOpened, setIsDeleteOpened] = useState(false);
- const removalButtonRef = useRef(null);
- const [requestError, setRequestError] = useState(null);
const {
- formState: { errors },
- handleSubmit,
+ errors,
+ isConnected,
+ isDeleteOpened,
+ isPending,
+ onCloseDisconnect,
+ onConfirmDisconnect,
+ onOpenDisconnect,
+ onSubmit,
register,
- reset,
- } = useForm<{ token: string }>();
- const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
- onError: error => setRequestError(apiErrorCode(error) ?? ConnectionErrorCode.RequestFailed),
- onSuccess: (data) => {
- commitTbankConnectionBoundary(queryClient, data);
- reset();
- },
- });
- const remove = apiQueryClient.useMutation(
- "delete",
- "/api/v1/tbank-connection",
- {
- onSuccess: () => {
- commitTbankConnectionBoundary(queryClient, {
- connected: false,
- connectedAt: /* eslint-disable-line unicorn/no-null -- The disconnected API snapshot requires a null connection timestamp. */ null,
- });
- setIsDeleteOpened(false);
- },
- },
- );
- const unavailableMessage = isApiErrorCode(requestError, ApiErrorCode.TbankUnavailable) ? "tbank.unavailable" : "tbank.requestError";
- const isPending = update.isPending || remove.isPending;
- const isConnected = status.connected;
- useEffect(() => {
- if (isDeleteOpened && remove.isError) removalButtonRef.current?.focus();
- }, [isDeleteOpened, remove.isError]);
+ removalButtonRef,
+ remove,
+ requestError,
+ status,
+ t,
+ unavailableMessage,
+ update,
+ } = useTbankConnectionSectionLoadedVm(props);
return (
{t("tbank.title")}
+
{isConnected
? t("tbank.connected", {
@@ -83,18 +56,22 @@ const TbankConnectionSectionLoaded: FC = (
})
: t("tbank.disconnected")}
+
{t("tbank.hint")}
+
{props.refreshing && (
{t("tbank.refreshing")}
)}
+
{props.refreshError && (
{t("tbank.refreshError")}
+
)}
-
+
!isPending && setIsDeleteOpened(false)}
+ onClose={onCloseDisconnect}
opened={isDeleteOpened}
title={t("tbank.deleteTitle")}
>
{t("tbank.deleteText")}
- {remove.isError && (
- {t("tbank.requestError")}
- )}
+
+ {remove.isError && {t("tbank.requestError")}}
+
,
);
await screen.findByLabelText("Период");
+
for (const expected of ["", "", "?from=2099-02-01", "?to=2099-02-28"]) {
fireEvent.click(
screen.getByRole("button", { name: "History forward" }),
@@ -192,6 +206,7 @@ describe("Upcoming event date filters", () => {
);
await screen.findByLabelText("Период");
}
+
fireEvent.click(screen.getByRole("button", { name: "History back" }));
await waitFor(() =>
expect(screen.getByLabelText("URL")).toHaveTextContent(
@@ -227,6 +242,7 @@ describe("Upcoming event date filters", () => {
initialEntries={[`/accounts/${accountId}/events?from=2099-02-01`]}
>
+
}
@@ -258,6 +274,7 @@ describe("Upcoming event date filters", () => {
"*/api/v1/brokerage-accounts/:accountId/events",
({ request }) => {
searches.push(new URL(request.url).search);
+
return HttpResponse.json(
resource({
accountId,
@@ -278,6 +295,7 @@ describe("Upcoming event date filters", () => {
]}
>
+
}
@@ -333,6 +351,7 @@ it("retains the previous complete forecast and timestamp when its source refresh
clear: vi.fn(),
refresh: () => Promise.resolve(true),
});
+
const events = [
{
date: "2026-10-01",
@@ -341,16 +360,19 @@ it("retains the previous complete forecast and timestamp when its source refresh
type: "coupon",
},
];
+
const snapshot = resource(
{ events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] },
{ sync: { errorCode: "TBANK_UNAVAILABLE", id: "failed", state: "failed" } },
);
+
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
HttpResponse.json(snapshot),
),
);
const queryClient = createTestQueryClient();
+
const { result } = renderHook(() => useAccountEventsPageViewModel("all"), {
wrapper: ({ children }) => (
@@ -358,6 +380,7 @@ it("retains the previous complete forecast and timestamp when its source refresh
),
});
+
await waitFor(() =>
expect(result.current).toMatchObject({
events,
diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx
index 1532319..3d1025c 100644
--- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx
@@ -37,7 +37,8 @@ function renderPage() {
describe("AccountEventsPage", () => {
beforeEach(() => {
refresh.mockClear();
- query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ query.mockReturnValue(
{
data: {
accountId: "account",
@@ -51,8 +52,8 @@ describe("AccountEventsPage", () => {
sync: { errorCode: null, id: null, state: "idle" },
},
refetch: vi.fn(),
- }
- /* eslint-enable unicorn/no-null */) as never);
+ } as never,
+ );
});
it("passes the selected route account to the query", () => {
@@ -72,7 +73,7 @@ describe("AccountEventsPage", () => {
});
it("keeps the loading fallback when no result or account is available", () => {
- query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ query.mockReturnValue(
{
data: undefined,
isError: false,
@@ -82,8 +83,8 @@ describe("AccountEventsPage", () => {
sync: { errorCode: null, id: null, state: "idle" },
},
refetch: vi.fn(),
- }
- /* eslint-enable unicorn/no-null */) as never);
+ } as never,
+ );
renderPage();
expect(query).toHaveBeenCalledWith("", {});
expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
@@ -93,7 +94,7 @@ describe("AccountEventsPage", () => {
});
it("renders events and marks an offer without an amount", () => {
- query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ query.mockReturnValue(
{
data: {
accountId: "account",
@@ -132,8 +133,8 @@ describe("AccountEventsPage", () => {
sync: { errorCode: null, id: null, state: "idle" },
},
refetch: vi.fn(),
- }
- /* eslint-enable unicorn/no-null */) as never);
+ } as never,
+ );
renderPage();
expect(screen.getByText("1 250 ₽")).toBeInTheDocument();
expect(screen.getByText("Сумма неизвестна")).toBeInTheDocument();
@@ -180,7 +181,7 @@ describe("AccountEventsPage", () => {
});
it("shows a structural busy state before events are available", () => {
- query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ query.mockReturnValue(
{
data: undefined,
isError: false,
@@ -190,8 +191,8 @@ describe("AccountEventsPage", () => {
sync: { errorCode: null, id: null, state: "idle" },
},
refetch: vi.fn(),
- }
- /* eslint-enable unicorn/no-null */) as never);
+ } as never,
+ );
renderPage();
diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx
index 247e587..33f0160 100644
--- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx
@@ -10,7 +10,10 @@ type AccountEventsPageProps = { accountId?: string };
const AccountEventsPage: FC = (props) => {
const viewModel = useAccountEventsPageViewModel(props.accountId);
if (viewModel.state === "loading") return ;
- return viewModel.state === "error" ? : ;
+
+ return viewModel.state === "error"
+ ?
+ : ;
};
export { AccountEventsPage };
diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts
index 0fd1c23..20d0a67 100644
--- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts
+++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts
@@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
import { useParams, useSearchParams } from "react-router";
-import { z } from "zod";
import {
type BrokerageEvent,
useBrokerageEvents,
} from "@/entities/brokerage-event";
import { useScreenSync } from "@/features/tbank-connection";
+import { isValidPeriod } from "@/shared/lib";
type AccountEventsPageViewModel
= | {
@@ -38,8 +38,15 @@ function useAccountEventsPageViewModel(
const urlFrom = searchParameters.get("from");
const urlTo = searchParameters.get("to");
const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo);
- const appliedFrom = isValidUrlPeriod ? urlFrom : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
- const appliedTo = isValidUrlPeriod ? urlTo : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+
+ const appliedFrom = isValidUrlPeriod
+ ? urlFrom
+ : null;
+
+ const appliedTo = isValidUrlPeriod
+ ? urlTo
+ : null;
+
const [draftFrom, setDraftFrom] = useState(appliedFrom);
const [draftTo, setDraftTo] = useState(appliedTo);
useEffect(() => {
@@ -49,19 +56,23 @@ function useAccountEventsPageViewModel(
normalized.delete("to");
setSearchParameters(normalized, { replace: true });
}, [isValidUrlPeriod, searchParameters, setSearchParameters]);
+
const [previousPeriod, setPreviousPeriod] = useState([
appliedFrom,
appliedTo,
]);
+
if (previousPeriod[0] !== appliedFrom || previousPeriod[1] !== appliedTo) {
setPreviousPeriod([appliedFrom, appliedTo]);
setDraftFrom(appliedFrom);
setDraftTo(appliedTo);
}
+
const events = useBrokerageEvents(accountId, {
...(appliedFrom && { from: appliedFrom }),
...(appliedTo && { to: appliedTo }),
});
+
const sync = useScreenSync(
{
accountId,
@@ -71,12 +82,15 @@ function useAccountEventsPageViewModel(
},
[events],
);
+
if (events.isLoading) return { state: "loading" };
+
const onReset = () => {
setDraftFrom(null);
setDraftTo(null);
setSearchParameters({});
};
+
if ((events.isError || events.meta?.sync.state === "failed") && !events.data)
return {
onReset,
@@ -86,6 +100,7 @@ function useAccountEventsPageViewModel(
state: "error",
};
if (!events.data) return { state: "loading" };
+
return {
canApply:
(draftFrom !== appliedFrom || draftTo !== appliedTo)
@@ -115,14 +130,4 @@ function useAccountEventsPageViewModel(
};
}
-const calendarDate = z.iso.date();
-function isValidPeriod(from: null | string, to: null | string) {
- return (
- [from, to].every(
- date => date === null || calendarDate.safeParse(date).success,
- )
- && (!from || !to || from <= to)
- );
-}
-
export { type AccountEventsPageViewModel, useAccountEventsPageViewModel };
diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx
index 160df64..990a551 100644
--- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx
@@ -5,9 +5,8 @@ import { useTranslation } from "react-i18next";
const AccountEventsPageEmpty: FC = () => {
const { t } = useTranslation();
- return (
-
- );
+
+ return ;
};
export { AccountEventsPageEmpty };
diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx
index dd0156a..9630812 100644
--- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx
@@ -8,11 +8,13 @@ type AccountEventsPageErrorProps = { onReset: () => void; retry: () => void };
const AccountEventsPageError: FC = (props) => {
const { t } = useTranslation();
+
return (
+
diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx
index 0415a3f..8956252 100644
--- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx
@@ -10,7 +10,6 @@ import {
Title,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
-import { useTranslation } from "react-i18next";
import { BrokerageEventCard } from "@/entities/brokerage-event";
import { formatSnapshotTime } from "@/shared/lib";
@@ -18,82 +17,90 @@ import { formatSnapshotTime } from "@/shared/lib";
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view";
+import { useAccountEventsPageLoadedVm } from "./AccountEventsPageLoaded.vm";
type AccountEventsPageLoadedProps = Extract<
AccountEventsPageViewModel,
{ state: "loaded" }
>;
-const AccountEventsPageLoaded: FC = (props) => {
- const { t } = useTranslation();
- function renderEvents() {
- if (props.events.length > 0) {
- return (
-
- {props.events.map(event => (
-
- ))}
-
- );
- }
- if (props.partial) {
- return;
- }
- return ;
+const AccountEventsPageLoadedEvents: FC = (
+ props,
+) => {
+ if (props.events.length > 0) {
+ return (
+
+ {props.events.map(event => (
+
+ ))}
+
+ );
}
+
+ if (props.partial) {
+ return;
+ }
+
+ return ;
+};
+
+const AccountEventsPageLoaded: FC = (props) => {
+ const { onPeriodChange, t } = useAccountEventsPageLoadedVm(props);
+
return (
- {!!(props.lastSuccessfulAt) && ((
+ {!!props.lastSuccessfulAt && (
{t("investment.sourceTime", {
date: formatSnapshotTime(props.lastSuccessfulAt),
})}
- ))}
+ )}
+
{t("events.title")}
+
- {!!(props.partial) && ((
- {t("investment.partial")}
- ))}
- {!!(props.refreshing) && ((
-
- ))}
- {!!(props.refreshError) && ((
+
+ {!!props.partial && {t("investment.partial")}}
+
+ {!!props.refreshing && }
+
+ {!!props.refreshError && (
{t(
props.sourceError
? "investment.syncFailed"
: "accounts.refreshError",
)}
+
- ))}
+ )}
+
{t("events.hint")}
+
{
- props.onDraftFromChange(from);
- props.onDraftToChange(to);
- }}
+ onChange={onPeriodChange}
popoverProps={{
middlewares: { shift: { crossAxis: true } },
returnFocus: true,
@@ -103,15 +110,18 @@ const AccountEventsPageLoaded: FC = (props) => {
valueFormat="DD.MM.YYYY"
/>
+
+
- {renderEvents()}
+
+
);
};
diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.vm.ts b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.vm.ts
new file mode 100644
index 0000000..af03a32
--- /dev/null
+++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.vm.ts
@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+
+import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
+
+type AccountEventsPageLoadedProps = Extract<
+ AccountEventsPageViewModel,
+ { state: "loaded" }
+>;
+
+function useAccountEventsPageLoadedVm(props: AccountEventsPageLoadedProps) {
+ const { t } = useTranslation();
+
+ const onPeriodChange: (value: [null | string, null | string]) => void = ([
+ from,
+ to,
+ ]) => {
+ props.onDraftFromChange(from);
+ props.onDraftToChange(to);
+ };
+
+ return { onPeriodChange, t };
+}
+
+export { useAccountEventsPageLoadedVm };
diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx
index a9de6bd..42843cb 100644
--- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx
@@ -8,21 +8,26 @@ const skeletonRowIds = ["first", "second", "third", "fourth"];
const AccountEventsPageLoading: FC = () => {
const { t } = useTranslation();
+
return (
+
+
+
+
+
- {skeletonRowIds.map(id => (
-
- ))}
+
+ {skeletonRowIds.map(id => )}
);
};
diff --git a/src/pages/account-income/model/income.schema.ts b/src/pages/account-income/model/income.schema.ts
new file mode 100644
index 0000000..9d22512
--- /dev/null
+++ b/src/pages/account-income/model/income.schema.ts
@@ -0,0 +1,31 @@
+import { z } from "zod";
+
+import { validationMessage } from "@/shared/i18n";
+
+import { moscowDate, parseDraftDate } from "./period";
+
+const draftDate = z
+ .string()
+ .refine(value => parseDraftDate(value) !== null, {
+ error: validationMessage("income.validation.date"),
+ })
+ .refine(
+ (value) => {
+ const date = parseDraftDate(value);
+
+ return !date || date <= moscowDate(new Date());
+ },
+ { error: validationMessage("income.validation.future") },
+ );
+
+const incomeFormSchema = z.object({ from: draftDate, to: draftDate }).refine(
+ ({ from, to }) => {
+ const start = parseDraftDate(from);
+ const end = parseDraftDate(to);
+
+ return !start || !end || start <= end;
+ },
+ { path: ["to"], ...validationMessage("income.validation.period")({}) },
+);
+
+export { incomeFormSchema };
diff --git a/src/pages/account-income/model/period.ts b/src/pages/account-income/model/period.ts
index 110e056..4662a7e 100644
--- a/src/pages/account-income/model/period.ts
+++ b/src/pages/account-income/model/period.ts
@@ -7,12 +7,14 @@ const datePattern = /^\d{4}-\d{2}-\d{2}$/;
function formatDraftDate(value: string): string {
const [year, month, day] = value.split("-", DATE_PART_COUNT);
+
return `${day}.${month}.${year}`;
}
function isDate(value: string): boolean {
if (!datePattern.test(value)) return false;
const parsed = new Date(`${value}T00:00:00Z`);
+
return (
Number.isFinite(parsed.valueOf())
&& parsed.toISOString().slice(0, ISO_DATE_LENGTH) === value
@@ -26,19 +28,26 @@ function moscowDate(value: Date): string {
timeZone: "Europe/Moscow",
year: "numeric",
}).formatToParts(value);
+
const part = (type: string) =>
parts.find(item => item.type === type)?.value;
+
return `${part("year")}-${part("month")}-${part("day")}`;
}
function parseDraftDate(value: string): null | string {
- if (!/^\d{2}\.\d{2}\.\d{4}$/.test(value)) return /* eslint-disable-line unicorn/no-null -- Mantine date fields use null for an incomplete or invalid date. */ null;
+ if (!/^\d{2}\.\d{2}\.\d{4}$/.test(value))
+ return null;
const [day, month, year] = value.split(".", DATE_PART_COUNT);
const date = `${year}-${month}-${day}`;
- return isDate(date) ? date : /* eslint-disable-line unicorn/no-null -- Mantine date fields use null for an incomplete or invalid date. */ null;
+
+ return isDate(date)
+ ? date
+ : null;
}
-export { formatDraftDate,
+export {
+ formatDraftDate,
type IncomePeriod as IncomeForm,
type IncomePeriod,
isDate,
diff --git a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx
index fe6240e..614b29d 100644
--- a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx
@@ -1,6 +1,5 @@
import type { FC } from "react";
-import "dayjs/locale/ru";
import { MantineProvider } from "@mantine/core";
import { DatesProvider } from "@mantine/dates";
import { QueryClientProvider } from "@tanstack/react-query";
@@ -13,6 +12,7 @@ import {
waitFor,
within,
} from "@testing-library/react";
+import "dayjs/locale/ru";
import { http, HttpResponse } from "msw";
import {
MemoryRouter,
@@ -38,49 +38,48 @@ import {
} from "./AccountIncomePage.vm";
import { IncomePayments } from "./components/IncomePayments.view";
-const analytics = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-{
- accountId: "account-1",
- bucketGranularity: "day",
- buckets: [
- {
- period: { from: "2026-08-01", to: "2026-08-01" },
- totalsByCurrency: [summary("RUB", "10", "2")],
+const analytics
+ = {
+ accountId: "account-1",
+ bucketGranularity: "day",
+ buckets: [
+ {
+ period: { from: "2026-08-01", to: "2026-08-01" },
+ totalsByCurrency: [summary("RUB", "10", "2")],
+ },
+ ],
+ calculatedAt: "2026-08-27T00:00:00Z",
+ entries: [
+ entry(),
+ {
+ ...entry(),
+ id: "dividend-1",
+ payment: money("RUB", "2"),
+ type: "OPERATION_TYPE_DIVIDEND",
+ },
+ ],
+ instruments: [
+ {
+ coupon: money("RUB", "10"),
+ displayName: "BOND",
+ dividend: money("RUB", "2"),
+ figi: "FIGI",
+ instrumentType: "bond",
+ instrumentUid: null,
+ key: "income-group-opaque-v2",
+ receiptCount: 2,
+ ticker: "BOND",
+ total: money("RUB", "12"),
+ },
+ ],
+ period: { from: "2026-08-01", to: "2026-08-27" },
+ previous: {
+ period: { from: "2026-07-01", to: "2026-07-31" },
+ totalsByCurrency: [comparison("RUB")],
},
- ],
- calculatedAt: "2026-08-27T00:00:00Z",
- entries: [
- entry(),
- {
- ...entry(),
- id: "dividend-1",
- payment: money("RUB", "2"),
- type: "OPERATION_TYPE_DIVIDEND",
- },
- ],
- instruments: [
- {
- coupon: money("RUB", "10"),
- displayName: "BOND",
- dividend: money("RUB", "2"),
- figi: "FIGI",
- instrumentType: "bond",
- instrumentUid: null,
- key: "income-group-opaque-v2",
- receiptCount: 2,
- ticker: "BOND",
- total: money("RUB", "12"),
- },
- ],
- period: { from: "2026-08-01", to: "2026-08-27" },
- previous: {
- period: { from: "2026-07-01", to: "2026-07-31" },
- totalsByCurrency: [comparison("RUB")],
- },
- totalsByCurrency: [summary("RUB", "10", "2")],
- yearComparison: null,
-}
-/* eslint-enable unicorn/no-null */) satisfies IncomeAnalytics;
+ totalsByCurrency: [summary("RUB", "10", "2")],
+ yearComparison: null,
+ } satisfies IncomeAnalytics;
function comparison(currency: string) {
return {
@@ -92,26 +91,24 @@ function comparison(currency: string) {
}
function entry(): IncomeAnalytics["entries"][number] {
- return (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
- accruedInterest: null,
- category: "income",
- commission: null,
- description: "Купон",
- figi: "FIGI",
- id: "coupon-1",
- instrumentKey: "income-group-opaque-v2",
- instrumentType: "bond",
- instrumentUid: null,
- logoName: null,
- occurredAt: "2026-08-01T12:00:00Z",
- payment: money("RUB", "10"),
- price: null,
- quantity: null,
- ticker: "BOND",
- type: "OPERATION_TYPE_COUPON",
- }
- /* eslint-enable unicorn/no-null */);
+ return {
+ accruedInterest: null,
+ category: "income",
+ commission: null,
+ description: "Купон",
+ figi: "FIGI",
+ id: "coupon-1",
+ instrumentKey: "income-group-opaque-v2",
+ instrumentType: "bond",
+ instrumentUid: null,
+ logoName: null,
+ occurredAt: "2026-08-01T12:00:00Z",
+ payment: money("RUB", "10"),
+ price: null,
+ quantity: null,
+ ticker: "BOND",
+ type: "OPERATION_TYPE_COUPON",
+ };
}
function money(currency: string, value: string) {
@@ -125,6 +122,7 @@ function renderPage(search = "from=2026-08-01&to=2026-08-27") {
refresh: () => Promise.resolve(true),
});
const queryClient = createTestQueryClient();
+
const view = render(
@@ -133,11 +131,13 @@ function renderPage(search = "from=2026-08-01&to=2026-08-27") {
initialEntries={[`/accounts/account-1/income?${search}`]}
>
+
}
path="/accounts/:accountId/income"
/>
+
Events}
path="/accounts/:accountId/events"
@@ -148,6 +148,7 @@ function renderPage(search = "from=2026-08-01&to=2026-08-27") {
,
);
+
return { ...view, queryClient };
}
@@ -171,10 +172,12 @@ describe("AccountIncomePage", () => {
server.use(
http.all("*/api/v1/*", ({ request }) => {
requests.push(request.url);
+
return new HttpResponse(null, { status: 503 });
}),
);
const queryClient = createTestQueryClient();
+
const { result } = renderHook(() => useAccountIncomePageViewModel(), {
wrapper: ({ children }) => (
@@ -184,6 +187,7 @@ describe("AccountIncomePage", () => {
),
});
+
await new Promise(resolve => setTimeout(resolve, 0));
expect(result.current).toEqual({ state: "loading" });
expect(queryClient.isFetching()).toBe(0);
@@ -198,21 +202,24 @@ describe("AccountIncomePage", () => {
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
({ request }) => {
requested.push(new URL(request.url).search);
+
return HttpResponse.json(
- resource(null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+ resource(
+ null,
{
sync: {
errorCode: "TBANK_UNAVAILABLE",
id: null,
state: "failed",
},
- }
- /* eslint-enable unicorn/no-null */)),
+ },
+ ),
);
},
),
http.post("*/api/v1/tbank-sync", async ({ request }) => {
syncRequests.push(await request.json());
+
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
@@ -243,6 +250,7 @@ describe("AccountIncomePage", () => {
"*/api/v1/brokerage-accounts/:accountId/income-analytics",
({ request }) => {
requested.push(new URL(request.url).search);
+
return HttpResponse.json(resource(analytics));
},
),
@@ -255,18 +263,21 @@ describe("AccountIncomePage", () => {
it("preserves every repeated-ID payment when an open card updates", async () => {
const first = { ...entry(), description: "Выплата A", id: "same-id" };
+
const second = {
...entry(),
description: "Выплата B",
id: "same-id",
payment: money("RUB", "-2"),
};
+
const third = {
...entry(),
description: "Выплата C",
id: "other-id",
payment: money("RUB", "1"),
};
+
function breakdown(entries: IncomeAnalytics["entries"], total: string) {
const display = toIncomeDisplayModel({
...analytics,
@@ -281,19 +292,24 @@ describe("AccountIncomePage", () => {
},
],
});
+
expect(display).not.toBeNull();
+
return (
);
}
+
const { rerender } = render(breakdown([first, second, third], "9"));
const panel = await screen.findByRole("region", { name: "Выплаты" });
+
const payments = () =>
within(panel)
.getAllByText(/^Выплата [ABC]$/)
.map(element => element.textContent);
+
expect(payments()).toEqual(["Выплата A", "Выплата B", "Выплата C"]);
rerender(breakdown([third, first, second], "9"));
@@ -323,6 +339,7 @@ describe("AccountIncomePage", () => {
analytics.entries[1],
],
};
+
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(response)),
@@ -409,8 +426,8 @@ describe("AccountIncomePage", () => {
});
it("renders the signed drill-down using opaque membership rather than instrument identity", async () => {
- const response = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
+ const response
+ = {
...analytics,
entries: [
{
@@ -436,8 +453,8 @@ describe("AccountIncomePage", () => {
total: money("RUB", "8"),
},
],
- }
- /* eslint-enable unicorn/no-null */);
+ };
+
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(response)),
@@ -486,9 +503,11 @@ describe("AccountIncomePage", () => {
expect(eventsRequest).not.toHaveBeenCalled();
expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
const year = screen.getByRole("region", { name: "Годом ранее" });
+
const selected = within(year).getByRole("region", {
name: "01.08.2026 – 27.08.2026",
});
+
expect(
screen.getByRole("region", { name: "01.08.2025 – 27.08.2025" }),
).toBeInTheDocument();
@@ -502,13 +521,17 @@ describe("AccountIncomePage", () => {
).toBeInTheDocument();
expect(screen.queryByText("Сравнения")).not.toBeInTheDocument();
expect(screen.queryByText("RUB", { exact: true })).not.toBeInTheDocument();
+
for (const amount of ["10 ₽", "2 ₽", "12 ₽"]) {
expect(within(selected).getByText(amount)).toBeInTheDocument();
}
+
const difference = within(year).getByRole("region", { name: "Разница" });
+
for (const amount of ["+9 ₽", "+2 ₽", "+11 ₽"]) {
expect(within(difference).getByText(amount)).toBeInTheDocument();
}
+
expect(within(difference).getByText("+900 %")).toBeInTheDocument();
expect(within(difference).getByText("+1 100 %")).toBeInTheDocument();
expect(within(difference).queryByText("нет базы")).not.toBeInTheDocument();
@@ -523,14 +546,13 @@ describe("AccountIncomePage", () => {
const dependencies = [
{ ...resource(analytics).meta, role: "selected" as const },
{ ...resource(analytics).meta, role: "previous" as const },
- (
- {
- ...resource(null).meta,
- role: "year" as const,
- unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
- }
- ),
+ {
+ ...resource(null).meta,
+ role: "year" as const,
+ unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
+ },
];
+
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(analytics, { dependencies })),
@@ -572,16 +594,41 @@ describe("income comparison display", () => {
["1", "3", "+33,3 %"],
["0.01", "0.04", "+25 %"],
["123456789012345678.123456789", "123456789012345678.123456789", "+100 %"],
- ["10", "0", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null],
- ["0", "0", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null],
- ["10", "-0.00", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null],
- ["10", "-100", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null],
- ["9".repeat(400), "1", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null],
- ["1", "9".repeat(400), /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null],
+ [
+ "10",
+ "0",
+ null,
+ ],
+ [
+ "0",
+ "0",
+ null,
+ ],
+ [
+ "10",
+ "-0.00",
+ null,
+ ],
+ [
+ "10",
+ "-100",
+ null,
+ ],
+ [
+ "9".repeat(400),
+ "1",
+ null,
+ ],
+ [
+ "1",
+ "9".repeat(400),
+ null,
+ ],
])("formats change %s against base %s", (difference, base, expected) => {
const value = comparison("RUB");
value.difference.coupon = money("RUB", difference);
value.compared.coupon = money("RUB", base);
+
const display = toIncomeDisplayModel({
...analytics,
yearComparison: {
@@ -589,10 +636,13 @@ describe("income comparison display", () => {
totalsByCurrency: [value],
},
});
+
const result = display?.comparison?.values[0];
- expect(result?.percentages.coupon?.replaceAll("\u{A0}", " ") ?? /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null).toBe(
- expected,
- );
+ expect(
+ result?.percentages.coupon?.replaceAll("\u{A0}", " ")
+
+ ?? null,
+ ).toBe(expected);
expect(result?.difference.coupon.value).toBe(difference);
expect(result?.compared.coupon.value).toBe(base);
});
@@ -606,6 +656,7 @@ describe("income comparison display", () => {
totalsByCurrency: [comparison("RUB"), comparison("USD")],
},
});
+
expect(display?.comparison?.selectedPeriod.replaceAll(/\s/g, " ")).toBe(
"01.12.2025 – 09.01.2026",
);
@@ -622,9 +673,11 @@ describe("income comparison display", () => {
const LocationProbe: FC = () => {
const location = useLocation();
const navigate = useNavigate();
+
return (
<>
+
@@ -639,6 +692,7 @@ function respondWithRequestedPeriod(requests: string[]) {
({ request }) => {
const url = new URL(request.url);
requests.push(url.search);
+
return HttpResponse.json(
resource({
...analytics,
@@ -753,12 +807,15 @@ describe("income period and snapshot boundary", () => {
await screen.findByLabelText("Период");
selectPeriod();
- const { promise: pending, resolve: release } = Promise.withResolvers();
+ const { promise: pending, resolve: release }
+ = Promise.withResolvers();
+
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
async () => {
await pending;
+
return new HttpResponse(null, { status: 503 });
},
),
@@ -790,7 +847,8 @@ describe("income period and snapshot boundary", () => {
),
),
http.get("*/api/v1/tbank-sync/:id", () =>
- HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+ HttpResponse.json(
{
errorCode: null,
id: "income",
@@ -799,8 +857,8 @@ describe("income period and snapshot boundary", () => {
resources: [resource(null, { stateVersion: "2" }).meta],
scope: null,
state: "succeeded",
- }
- /* eslint-enable unicorn/no-null */)),
+ },
+ ),
),
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(analytics, { stateVersion: "2" })),
@@ -822,12 +880,15 @@ describe("income period and snapshot boundary", () => {
renderPage();
await screen.findByLabelText("Период");
- const { promise: pending, resolve: release } = Promise.withResolvers();
+ const { promise: pending, resolve: release }
+ = Promise.withResolvers();
+
server.use(
http.get(
"*/api/v1/brokerage-accounts/account-1/income-analytics",
async () => {
await pending;
+
return HttpResponse.json(
resource({
...analytics,
@@ -882,6 +943,7 @@ describe("income period and snapshot boundary", () => {
total: money("RUB", "-3"),
},
];
+
const display = toIncomeDisplayModel({
...analytics,
entries: instruments.map(instrument => ({
@@ -892,6 +954,7 @@ describe("income period and snapshot boundary", () => {
instruments,
totalsByCurrency: [summary("RUB", "-5", "0"), summary("USD", "10", "0")],
});
+
render(
@@ -917,8 +980,9 @@ describe("income period and snapshot boundary", () => {
it("maps comparison notices by role regardless of dependency order or resource key", () => {
const selected = { ...resource(analytics).meta, role: "selected" as const };
- const previous = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
+
+ const previous
+ = {
...resource(null).meta,
resourceKey: "opaque/year-looking-key",
role: "previous" as const,
@@ -927,16 +991,15 @@ it("maps comparison notices by role regardless of dependency order or resource k
id: null,
state: "failed" as const,
},
- }
- /* eslint-enable unicorn/no-null */);
- const year = (
- {
- ...resource(null).meta,
- resourceKey: "opaque/previous-looking-key",
- role: "year" as const,
- unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
- }
- );
+ };
+
+ const year = {
+ ...resource(null).meta,
+ resourceKey: "opaque/previous-looking-key",
+ role: "year" as const,
+ unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY",
+ };
+
for (const dependencies of [
[selected, previous, year],
[year, selected, previous],
@@ -945,6 +1008,7 @@ it("maps comparison notices by role regardless of dependency order or resource k
...resource(analytics).meta,
dependencies,
});
+
expect(display?.previousNotice).toBe("comparisonFailed");
expect(display?.yearNotice).toBe("yearUnavailable");
expect(display?.previousComparison).not.toBeNull();
@@ -957,21 +1021,18 @@ it.each([false, true])(
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(
+
resource(
- (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- { ...analytics, previous: null, yearComparison: null }
- /* eslint-enable unicorn/no-null */),
- (
- {
- dependencies: legacy
- ? [
- resource(null).meta,
- resource(null).meta,
- resource(null).meta,
- ]
- : [],
- }
- ),
+ { ...analytics, previous: null, yearComparison: null },
+ {
+ dependencies: legacy
+ ? [
+ resource(null).meta,
+ resource(null).meta,
+ resource(null).meta,
+ ]
+ : [],
+ },
),
),
),
@@ -992,20 +1053,20 @@ it.each([false, true])(
it("shows selected income before comparison coverage without inventing a zero baseline", async () => {
const dependencies = (["year", "selected", "previous"] as const).map(
- role => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
+
+ role =>
+ ({
...resource(role === "selected" ? analytics : null).meta,
role,
- }
- /* eslint-enable unicorn/no-null */)),
+ }),
);
+
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(
+
resource(
- (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- { ...analytics, previous: null, yearComparison: null }
- /* eslint-enable unicorn/no-null */),
+ { ...analytics, previous: null, yearComparison: null },
{ dependencies },
),
),
@@ -1031,20 +1092,26 @@ it("shows selected income before comparison coverage without inventing a zero ba
it("keeps complete previous comparison while year source failed without inventing its amounts", async () => {
const dependencies = [
- { ...resource(analytics).meta, role: "previous" as const },
- (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
- {
- ...resource(null).meta,
- role: "year" as const,
- sync: {
- errorCode: "TBANK_UNAVAILABLE",
- id: null,
- state: "failed" as const,
- },
- }
- /* eslint-enable unicorn/no-null */),
- { ...resource(analytics).meta, role: "selected" as const },
+ {
+ ...resource(analytics).meta,
+ role: "previous" as const,
+
+ },
+ {
+ ...resource(null).meta,
+ role: "year" as const,
+ sync: {
+ errorCode: "TBANK_UNAVAILABLE",
+ id: null,
+ state: "failed" as const,
+ },
+ },
+ {
+ ...resource(analytics).meta,
+ role: "selected" as const,
+ },
];
+
server.use(
http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
HttpResponse.json(resource(analytics, { dependencies })),
diff --git a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx
index bdbfab6..d9217bb 100644
--- a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx
@@ -10,7 +10,10 @@ type AccountIncomePageProps = { accountId?: string };
const AccountIncomePage: FC = (props) => {
const viewModel = useAccountIncomePageViewModel(props.accountId);
if (viewModel.state === "loading") return ;
- return viewModel.state === "error" ? : ;
+
+ return viewModel.state === "error"
+ ?
+ : ;
};
export { AccountIncomePage };
diff --git a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts
index ef00e28..ab419df 100644
--- a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts
+++ b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts
@@ -2,13 +2,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { useParams, useSearchParams } from "react-router";
-import { z } from "zod";
import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income";
import { useScreenSync } from "@/features/tbank-connection";
-import { validationMessage } from "@/shared/i18n";
import { formatDate } from "@/shared/lib";
+import { incomeFormSchema } from "../../model/income.schema";
import {
formatDraftDate,
type IncomeForm,
@@ -43,6 +42,7 @@ type AccountIncomePageViewModel
state: "error";
}
| { state: "loading" };
+
type ComparisonNotice
= | "comparisonFailed"
| "comparisonPending"
@@ -50,15 +50,18 @@ type ComparisonNotice
| "yearUnavailable";
type IncomeDisplayModel = {
- comparison: null | {
- comparedPeriod: string;
- selectedPeriod: string;
- values: (NonNullable<
- IncomeAnalytics["yearComparison"]
- >["totalsByCurrency"][number] & {
- percentages: Record<"coupon" | "dividend" | "total", null | string>;
- })[];
- };
+ comparison: null
+ | {
+ comparedPeriod: string;
+ selectedPeriod: string;
+ values: (NonNullable<
+ IncomeAnalytics["yearComparison"]
+ >["totalsByCurrency"][number] & {
+ percentages: Record<"coupon"
+ | "dividend"
+ | "total", null | string>;
+ })[];
+ };
entries: { key: string; operation: IncomeAnalytics["entries"][number] }[];
previousComparison: IncomeDisplayModel["comparison"];
previousNotice: ComparisonNotice;
@@ -67,33 +70,13 @@ type IncomeDisplayModel = {
type IncomeMeta = ReturnType["meta"];
-const draftDate = z
- .string()
- .refine(value => parseDraftDate(value) !== null, {
- error: validationMessage("income.validation.date"),
- })
- .refine(
- (value) => {
- const date = parseDraftDate(value);
- return !date || date <= moscowDate(new Date());
- },
- { error: validationMessage("income.validation.future") },
- );
-const incomeFormSchema = z.object({ from: draftDate, to: draftDate }).refine(
- ({ from, to }) => {
- const start = parseDraftDate(from);
- const end = parseDraftDate(to);
- return !start || !end || start <= end;
- },
- { path: ["to"], ...validationMessage("income.validation.period")({}) },
-);
-
const useAccountIncomePageViewModel = (
scopeId?: string,
): AccountIncomePageViewModel => {
const { accountId: routeAccountId } = useParams();
const accountId = scopeId ?? routeAccountId ?? "";
const [searchParameters, setSearchParameters] = useSearchParams();
+
const requested = useMemo(
() => ({
from: searchParameters.get("from") ?? "",
@@ -101,31 +84,39 @@ const useAccountIncomePageViewModel = (
}),
[searchParameters],
);
+
const period = useMemo(
() => (isValidPeriod(requested) ? requested : defaultPeriod()),
[requested],
);
+
const form = useForm({
defaultValues: draftPeriod(period),
resolver: zodResolver(incomeFormSchema),
});
+
const [resetRevision, setResetRevision] = useState(0);
const analytics = useIncomeAnalytics(accountId, period);
+
const sync = useScreenSync(
{ accountId, from: period.from, screen: "income", to: period.to },
[analytics],
);
useEffect(() => {
- if (!isValidPeriod(requested)) setSearchParameters(period, { replace: true });
+ if (!isValidPeriod(requested))
+ setSearchParameters(period, { replace: true });
}, [period, requested, setSearchParameters]);
useEffect(() => {
form.reset(draftPeriod(period));
}, [form, period]);
if (analytics.isLoading || !analytics.data) {
- return analytics.isError || analytics.meta?.sync.state === "failed" ? { period, retry: sync.retry, state: "error" } : { state: "loading" };
+ return analytics.isError || analytics.meta?.sync.state === "failed"
+ ? { period, retry: sync.retry, state: "error" }
+ : { state: "loading" };
}
+
const display = toIncomeDisplayModel(analytics.data, analytics.meta);
if (!display)
return {
@@ -133,11 +124,13 @@ const useAccountIncomePageViewModel = (
retry: () => analytics.observe(),
state: "error",
};
+
const onSubmit = (values: IncomeForm) => {
const from = parseDraftDate(values.from);
const to = parseDraftDate(values.to);
if (from && to) setSearchParameters({ from, to });
};
+
const onReset = () => {
const next = defaultPeriod();
form.reset(draftPeriod(next));
@@ -145,6 +138,7 @@ const useAccountIncomePageViewModel = (
setResetRevision(revision => revision + 1);
setSearchParameters(next, { replace: true });
};
+
return {
analytics: analytics.data,
display,
@@ -166,7 +160,9 @@ function comparisonDisplay(
period: IncomePeriod,
comparison: IncomeAnalytics["yearComparison"],
): IncomeDisplayModel["comparison"] {
- if (!comparison) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+ if (!comparison)
+ return null;
+
return {
comparedPeriod: formatComparisonPeriod(comparison.period),
selectedPeriod: formatComparisonPeriod(period),
@@ -192,11 +188,11 @@ function comparisonDisplay(
function comparisonNotice(
dependency:
- | NonNullable["dependencies"]>[number]
- | undefined,
+ NonNullable["dependencies"]>[number] | undefined,
unavailable: "previousUnavailable" | "yearUnavailable",
): ComparisonNotice {
if (!dependency || dependency.unavailableReason) return unavailable;
+
return dependency.sync.state === "failed"
? "comparisonFailed"
: "comparisonPending";
@@ -204,6 +200,7 @@ function comparisonNotice(
function defaultPeriod(): IncomePeriod {
const today = moscowDate(new Date());
+
return { from: `${today.slice(0, ISO_MONTH_LENGTH)}-01`, to: today };
}
@@ -221,9 +218,12 @@ function formatIncomeChange(
): null | string {
// Display-only ratio; server-provided Money values remain exact decimal strings.
const base = Number(compared);
- if (!Number.isFinite(base) || base <= 0) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+ if (!Number.isFinite(base) || base <= 0)
+ return null;
const ratio = Number(difference) / base;
- if (!Number.isFinite(ratio)) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+ if (!Number.isFinite(ratio))
+ return null;
+
return new Intl.NumberFormat("ru-RU", {
maximumFractionDigits: 1,
signDisplay: "exceptZero",
@@ -236,6 +236,7 @@ function isValidPeriod(period: IncomePeriod): period is IncomePeriod {
const from = new Date(`${period.from}T00:00:00Z`);
const to = new Date(`${period.to}T00:00:00Z`);
const today = new Date(`${moscowDate(new Date())}T00:00:00Z`);
+
return (
from.toISOString().slice(0, ISO_DATE_LENGTH) === period.from
&& to.toISOString().slice(0, ISO_DATE_LENGTH) === period.to
@@ -256,9 +257,11 @@ function toIncomeDisplayModel(
receiptCount: number;
}
>();
+
const currencies = new Set(
analytics.totalsByCurrency.map(({ currency }) => currency),
);
+
for (const instrument of analytics.instruments) {
if (
typeof instrument.key !== "string"
@@ -266,7 +269,7 @@ function toIncomeDisplayModel(
|| instruments.has(instrument.key)
|| !currencies.has(instrument.total.currency)
)
- // eslint-disable-next-line unicorn/no-null -- Preserve the existing nullable validation/ref contract.
+
return null;
instruments.set(instrument.key, {
currency: instrument.total.currency,
@@ -274,15 +277,15 @@ function toIncomeDisplayModel(
receiptCount: instrument.receiptCount,
});
}
+
const entries: IncomeDisplayModel["entries"] = [];
const occurrences = new Map();
+
for (const entry of analytics.entries) {
if (typeof entry.instrumentKey !== "string" || !entry.instrumentKey.trim())
- // eslint-disable-next-line unicorn/no-null -- Preserve the existing nullable validation/ref contract.
return null;
const instrument = instruments.get(entry.instrumentKey);
if (!instrument || entry.payment?.currency !== instrument.currency)
- // eslint-disable-next-line unicorn/no-null -- Preserve the existing nullable validation/ref contract.
return null;
const occurrenceKey = JSON.stringify([entry.instrumentKey, entry.id]);
const occurrence = occurrences.get(occurrenceKey) ?? 0;
@@ -298,12 +301,15 @@ function toIncomeDisplayModel(
operation: entry,
});
}
+
for (const instrument of instruments.values()) {
- if (instrument.includedCount !== instrument.receiptCount) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+ if (instrument.includedCount !== instrument.receiptCount)
+ return null;
}
const previous = meta?.dependencies?.find(({ role }) => role === "previous");
const year = meta?.dependencies?.find(({ role }) => role === "year");
+
return {
comparison: comparisonDisplay(analytics.period, analytics.yearComparison),
entries,
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx
index 51ad1a6..e4603ea 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx
@@ -10,6 +10,7 @@ type ErrorProps = Extract;
const AccountIncomePageError: FC = (props) => {
const { t } = useTranslation();
+
return (
{t("income.retry")}}
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx
index cb5cfcd..91d91d1 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx
@@ -25,45 +25,42 @@ import { IncomeSummary } from "./IncomeSummary.view";
type LoadedProps = Extract;
-const AccountIncomePageLoaded: FC = (props) => {
- const {
- analytics,
- display,
- form,
- onReset,
- onSubmit,
- refreshError,
- refreshing,
- retry,
- } = props;
+const AccountIncomePageLoadedSummary: FC = (props) => {
const { t } = useTranslation();
- function renderSummary() {
- if (props.partial) {
- return {t("investment.partial")};
- }
- if (analytics.totalsByCurrency.length > 0) {
- return ;
- }
- return (
-
- );
+
+ const { analytics } = props;
+
+ if (props.partial) {
+ return {t("investment.partial")};
}
+
+ return analytics.totalsByCurrency.length > 0
+ ?
+ : ;
+};
+
+const AccountIncomePageLoaded: FC = (props) => {
+ const { display, form, onReset, onSubmit, refreshError, refreshing, retry }
+ = props;
+
+ const { t } = useTranslation();
+
return (
- {!!(props.lastSuccessfulAt) && ((
+ {!!props.lastSuccessfulAt && (
{t("investment.sourceTime", {
date: formatSnapshotTime(props.lastSuccessfulAt),
})}
- ))}
+ )}
+
{t("income.title")}
+
+
= (props) => {
onSubmit={form.handleSubmit(onSubmit)}
/>
- {!!(refreshing) && ((
+
+ {!!refreshing && (
+
{t("income.refreshing")}
- ))}
- {!!(refreshError) && ((
+ )}
+
+ {!!refreshError && (
@@ -87,24 +87,30 @@ const AccountIncomePageLoaded: FC = (props) => {
: "income.refreshError",
)}
+
- ))}
- {renderSummary()}
+ )}
+
+
+
{t("income.taxBoundary")}
+
+
+
);
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx
index b51136c..235d38d 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx
@@ -8,24 +8,34 @@ import classes from "../AccountIncomePage.module.css";
const AccountIncomePageLoading: FC = () => {
const { t } = useTranslation();
+
return (
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx
index 9acf384..2cd9f14 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx
@@ -12,12 +12,16 @@ import classes from "../AccountIncomePage.module.css";
type ComparisonProps = NonNullable & {
title: string;
};
+
type ComparisonValuesProps = {
- kind: "compared" | "difference" | "selected";
+ kind: "compared"
+ | "difference"
+ | "selected";
label: string;
percentages?: ComparisonProps["values"][number]["percentages"];
values: ComparisonProps["values"][number]["selected"];
};
+
type IncomeComparisonsProps = {
comparison: IncomeDisplayModel["comparison"];
notice: string;
@@ -28,10 +32,9 @@ const IncomeComparisons: FC = (props) => {
return (
{props.title}
+
{props.comparison
- ? (
-
- )
+ ?
: (
@@ -45,6 +48,7 @@ const IncomeComparisons: FC = (props) => {
const Comparison: FC = (props) => {
const { t } = useTranslation();
+
return (
@@ -61,11 +65,13 @@ const Comparison: FC = (props) => {
label={props.selectedPeriod}
values={value.selected}
/>
+
+
= (props) => {
{(["total", "coupon", "dividend"] as const).map((key) => {
- const money = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.values[key];
- const percentage = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.percentages?.[key];
+ const money
+ // eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
+ = props.values[key];
+
+ const percentage
+ // eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
+ = props.percentages?.[key];
+
const tone
= props.kind === "difference"
? differenceTone(money.value)
: undefined;
+
+ const appearanceClass
+ = key === "total"
+ ? classes.comparisonTotal
+ : classes.comparisonDetail;
+
return (
-
+
- {t(`income.${key}`)}
+
-
{tone === "positive" ? "+" : ""}
+
{formatMoney(money)}
- {!!(percentage) && ((
+
+ {!!percentage && (
{percentage}
- ))}
+ )}
);
@@ -136,8 +156,11 @@ const ComparisonValues: FC
= (props) => {
);
};
-function differenceTone(value: string): "negative" | "neutral" | "positive" {
+function differenceTone(value: string): "negative"
+ | "neutral"
+ | "positive" {
if (!/[1-9]/.test(value)) return "neutral";
+
return value.startsWith("-") ? "negative" : "positive";
}
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx
index cf418ed..fd85150 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx
@@ -10,13 +10,16 @@ import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
import classes from "../AccountIncomePage.module.css";
type IncomePaymentsProps = { entries: LoadedProps["display"]["entries"] };
+
type LoadedProps = Extract;
const IncomePayments: FC = (props) => {
const { t } = useTranslation();
+
return (
{t("income.payments")}
+
{props.entries.map(({ key, operation }) => (
-
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx
index 8109871..94b849a 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx
@@ -8,6 +8,7 @@ import type { IncomeForm } from "../../../../model/period";
import { IncomePeriodForm } from "./IncomePeriodForm.view";
const period = { from: "01.08.2026", to: "27.08.2026" };
+
const errors = {
to: { message: "Синтетическая ошибка периода", type: "manual" },
};
@@ -19,8 +20,13 @@ const PeriodExample: FC = (props) => {
defaultValues: period,
errors: props.invalid ? errors : undefined,
});
+
const { isSubmitSuccessful } = useFormState({ control: methods.control });
- const submitted = isSubmitSuccessful ? methods.getValues() : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null;
+
+ const submitted = isSubmitSuccessful
+ ? methods.getValues()
+ : null;
+
return (
= (props) => {
}}
onSubmit={methods.handleSubmit(() => {})}
/>
+