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 };