refactor: address frontend review feedback

src/entities/bank-card/ui/BankCardForm/BankCardFields.vm.ts

@@ -1,11 +1,10 @@
-import type { ComponentProps } from "react";
-
-import { DateInput } from "@mantine/dates";
-import { useController, useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { bankDateInputValue } from "../../model/form-validation";
-import { type BankCardValues, bankDateSchema } from "../../model/form.schema";
+import type { BankCardValues } from "../../model/form.schema";
+
+import { useOpeningDateField } from "./useOpeningDateField";
+import { usePaymentSystemField } from "./usePaymentSystemField";
 
 function useBankCardFieldsVm() {
 	const {
@@ -15,62 +14,10 @@ function useBankCardFieldsVm() {
 	} = useFormContext<BankCardValues>();
 
 	const { t } = useTranslation();
+	const openingDate = useOpeningDateField(control);
+	const paymentSystem = usePaymentSystemField(control);
 
-	const { field: paymentSystemField } = useController({
-		control,
-		name: "paymentSystem",
-	});
-
-	const { field: openingDateField } = useController({
-		control,
-		name: "openingDate",
-	});
-
-	const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({
-		label: t(`bank.paymentSystems.${value}`),
-		value,
-	}));
-
-	const onPaymentSystemChange: (value: null | string) => void = value =>
-		paymentSystemField.onChange(value ?? "");
-
-	const dateParser: ComponentProps<typeof DateInput>["dateParser"] = value =>
-		bankDateSchema.safeParse(bankDateInputValue(value)).success
-			? bankDateInputValue(value)
-			: null; // eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled openingDateField as null.
-
-	const onOpeningDateBlur: ComponentProps<typeof DateInput>["onBlur"] = (
-		event,
-	) => {
-		openingDateField.onChange(bankDateInputValue(event.currentTarget.value));
-		openingDateField.onBlur();
-	};
-
-	const onOpeningDateChange: (value: null | string) => void = value =>
-		openingDateField.onChange(value ?? "");
-
-	const onOpeningDateInput: ComponentProps<typeof DateInput>["onInput"] = event =>
-		openingDateField.onChange(bankDateInputValue(event.currentTarget.value));
-
-	const openingDateValue = bankDateSchema.safeParse(openingDateField.value)
-		.success
-		? openingDateField.value
-		: undefined;
-
-	return {
-		dateParser,
-		errors,
-		onOpeningDateBlur,
-		onOpeningDateChange,
-		onOpeningDateInput,
-		onPaymentSystemChange,
-		openingDateField,
-		openingDateValue,
-		paymentSystemField,
-		paymentSystems,
-		register,
-		t,
-	};
+	return { ...openingDate, ...paymentSystem, errors, register, t };
 }
 
 export { useBankCardFieldsVm };

src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx

@@ -12,8 +12,6 @@ import type { BankCard } from "../../api/queries";
 
 import { BankCardForm } from "./BankCardForm";
 
-/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-
 const card: BankCard
 	= {
 		archivedAt: null,
@@ -28,7 +26,6 @@ const card: BankCard
 		version: 1,
 	};
 
-/* eslint-enable unicorn/no-null */
 function setup(value: BankCard) {
 	configureAuthClient({
 		accessToken: () => "test",
@@ -75,7 +72,7 @@ describe("BankCardForm", () => {
 		);
 		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
 		await waitFor(() => expect(close).toHaveBeenCalled());
-		/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
 		expect(body).toEqual(
 			{
 				bankName: null,
@@ -84,7 +81,6 @@ describe("BankCardForm", () => {
 				paymentSystem: null,
 				version: 1,
 			},
-			/* eslint-enable unicorn/no-null */
 		);
 	});
 	it("loads and saves the selected payment system", async () => {

src/entities/bank-card/ui/BankCardForm/BankCardForm.view.tsx

@@ -57,7 +57,6 @@ const BankCardFields: FC<BankCardFieldsProps> = (props) => {
 				placeholder={t("bank.paymentSystemUnknown")}
 				value={
 					paymentSystemField.value
-					// eslint-disable-next-line unicorn/no-null -- Mantine represents an empty controlled paymentSystemField as null.
 					|| null
 				}
 			/>

src/entities/bank-card/ui/BankCardForm/BankCardForm.vm.ts

@@ -49,16 +49,13 @@ function useBankCardFormVm(props: BankCardFormProps) {
 			const metadata = {
 				bankName:
 					values.bankName
-					// eslint-disable-next-line unicorn/no-null -- PATCH uses null to clear these optional card fields.
 					|| null,
 				lastFour:
 					values.lastFour
-					// eslint-disable-next-line unicorn/no-null -- PATCH uses null to clear these optional card fields.
 					|| null,
 				name: values.name,
 				paymentSystem:
 					values.paymentSystem
-					// eslint-disable-next-line unicorn/no-null -- PATCH uses null to clear these optional card fields.
 					|| null,
 			};
 

src/entities/bank-card/ui/BankCardForm/useOpeningDateField.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps } from "react";
+import type { Control } from "react-hook-form";
+
+import { DateInput } from "@mantine/dates";
+import { useController } from "react-hook-form";
+
+import { bankDateInputValue } from "../../model/form-validation";
+import { type BankCardValues, bankDateSchema } from "../../model/form.schema";
+
+function useOpeningDateField(control: Control<BankCardValues>) {
+	const { field: openingDateField } = useController({
+		control,
+		name: "openingDate",
+	});
+
+	const dateParser: ComponentProps<typeof DateInput>["dateParser"] = value =>
+		bankDateSchema.safeParse(bankDateInputValue(value)).success
+			? bankDateInputValue(value)
+			: null;
+
+	const onOpeningDateBlur: ComponentProps<typeof DateInput>["onBlur"] = (
+		event,
+	) => {
+		openingDateField.onChange(bankDateInputValue(event.currentTarget.value));
+		openingDateField.onBlur();
+	};
+
+	const onOpeningDateChange = (value: null | string) =>
+		openingDateField.onChange(value ?? "");
+
+	const onOpeningDateInput: ComponentProps<typeof DateInput>["onInput"] = event =>
+		openingDateField.onChange(bankDateInputValue(event.currentTarget.value));
+
+	const openingDateValue = bankDateSchema.safeParse(openingDateField.value)
+		.success
+		? openingDateField.value
+		: undefined;
+
+	return {
+		dateParser,
+		onOpeningDateBlur,
+		onOpeningDateChange,
+		onOpeningDateInput,
+		openingDateField,
+		openingDateValue,
+	};
+}
+
+export { useOpeningDateField };

src/entities/bank-card/ui/BankCardForm/usePaymentSystemField.ts

@@ -0,0 +1,27 @@
+import type { Control } from "react-hook-form";
+
+import { useController } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import type { BankCardValues } from "../../model/form.schema";
+
+function usePaymentSystemField(control: Control<BankCardValues>) {
+	const { t } = useTranslation();
+
+	const { field: paymentSystemField } = useController({
+		control,
+		name: "paymentSystem",
+	});
+
+	const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({
+		label: t(`bank.paymentSystems.${value}`),
+		value,
+	}));
+
+	const onPaymentSystemChange = (value: null | string) =>
+		paymentSystemField.onChange(value ?? "");
+
+	return { onPaymentSystemChange, paymentSystemField, paymentSystems };
+}
+
+export { usePaymentSystemField };