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

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

@@ -8,7 +8,7 @@ import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
 
-import type { BankCard } from "../../api/queries";
+import type { BankCard } from "../../api/types";
 
 import { BankCardForm } from "./BankCardForm";
 

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

@@ -4,7 +4,8 @@ import { FormProvider } from "react-hook-form";
 
 import { formatDate } from "@/shared/lib";
 
-import { type BankCard } from "../../api/queries";
+import type { BankCard } from "../../api/types";
+
 import { BankFeedback } from "../BankFeedback";
 import { BankCardFields } from "./BankCardForm.view";
 import { useBankCardFormVm } from "./BankCardForm.vm";

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

@@ -10,14 +10,9 @@ type BankCardFieldsProps = { archived: boolean };
 
 const BankCardFields: FC<BankCardFieldsProps> = (props) => {
 	const {
-		dateParser,
 		errors,
-		onOpeningDateBlur,
-		onOpeningDateChange,
-		onOpeningDateInput,
 		onPaymentSystemChange,
-		openingDateField,
-		openingDateValue,
+		openingDate,
 		paymentSystemField,
 		paymentSystems,
 		register,
@@ -71,22 +66,17 @@ const BankCardFields: FC<BankCardFieldsProps> = (props) => {
 			/>
 
 			<DateInput
-				{...openingDateField}
-				dateParser={dateParser}
+				{...openingDate}
 				error={errors.openingDate?.message}
 				fixOnBlur={false}
 				label={t("bank.openingDate")}
 				maxDate={bankToday()}
-				onBlur={onOpeningDateBlur}
-				onChange={onOpeningDateChange}
-				onInput={onOpeningDateInput}
 				popoverProps={{
 					middlewares: { shift: { crossAxis: true } },
 					withinPortal: false,
 				}}
 				readOnly={props.archived}
 				required
-				value={openingDateValue}
 				valueFormat="DD.MM.YYYY"
 			/>
 

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

@@ -3,10 +3,13 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
+import type { BankCard } from "../../api/types";
+
 import { useCreateBankCard, useUpdateBankCard } from "../../api/mutations";
-import { type BankCard, useBankCard } from "../../api/queries";
-import { bankMoneyValue, bankToday } from "../../model/form-validation";
+import { useBankCard } from "../../api/queries";
+import { bankToday } from "../../model/form-validation";
 import { bankCardSchema, type BankCardValues } from "../../model/form.schema";
+import { bankMoneyValue } from "../../model/money";
 import { useBankFormFocus } from "../useBankFormFocus";
 
 type BankCardFormProps = { card?: BankCard; onClose: () => void };

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

@@ -1,49 +0,0 @@
-import type { DateInput } from "@mantine/dates";
-import type { ComponentProps } from "react";
-import type { Control } from "react-hook-form";
-
-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

@@ -1,27 +0,0 @@
-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 };