refactor: clarify frontend module ownership

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

@@ -1,10 +1,9 @@
-import { useFormContext } from "react-hook-form";
+import { useController, 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";
+import { bankDateField } from "../bankDateField";
 
 function useBankCardFieldsVm() {
 	const {
@@ -14,10 +13,26 @@ function useBankCardFieldsVm() {
 	} = useFormContext<BankCardValues>();
 
 	const { t } = useTranslation();
-	const openingDate = useOpeningDateField(control);
-	const paymentSystem = usePaymentSystemField(control);
+	const { field: openingDateField } = useController({ control, name: "openingDate" });
+	const { field: paymentSystemField } = useController({ control, name: "paymentSystem" });
 
-	return { ...openingDate, ...paymentSystem, errors, register, t };
+	const paymentSystems = ["mir", "visa", "mastercard"].map(value => ({
+		label: t(`bank.paymentSystems.${value}`),
+		value,
+	}));
+
+	const onPaymentSystemChange = (value: null | string) =>
+		paymentSystemField.onChange(value ?? "");
+
+	return {
+		errors,
+		onPaymentSystemChange,
+		openingDate: { ...openingDateField, ...bankDateField(openingDateField) },
+		paymentSystemField,
+		paymentSystems,
+		register,
+		t,
+	};
 }
 
 export { useBankCardFieldsVm };