refactor: clarify frontend module ownership

src/pages/card/ui/OperationForm/OperationForm.vm.ts

@@ -4,14 +4,12 @@ import { useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import {
-	bankDateInputValue,
-	bankDateSchema,
+	bankDateField,
 	bankMoneyValue,
 	type BankOperation,
 	bankOperationKinds,
 	bankToday,
 	useBankCategories,
-	useBankExpenses,
 	useBankFormFocus,
 	useBankOperation,
 	useCreateBankOperation,
@@ -25,6 +23,7 @@ import type {
 } from "./OperationForm.types";
 
 import { createOperationSchema } from "./OperationForm.schema";
+import { useRefundPurchase } from "./useRefundPurchase";
 
 const useOperationFormVm = (props: OperationFormProps) => {
 	useBankFormFocus();
@@ -33,7 +32,6 @@ const useOperationFormVm = (props: OperationFormProps) => {
 	const [categoriesOpen, setCategoriesOpen] = useState(false);
 	const [version, setVersion] = useState(props.operation?.version ?? 1);
 	const [latest, setLatest] = useState<BankOperation>();
-	const [sourcePage, setSourcePage] = useState(1);
 
 	const currentQuery = useBankOperation(props.operation?.id);
 
@@ -72,20 +70,14 @@ const useOperationFormVm = (props: OperationFormProps) => {
 		)(values, context, options),
 	});
 
-	const sourceId = useWatch({
-		control: methods.control,
-		name: "originalExpenseId",
-	});
-
-	const sourceQuery = useBankOperation(sourceId || undefined);
-
 	const kind = useWatch({ control: methods.control, name: "kind" });
 
-	const expenses = useBankExpenses(
-		kind === "refund" ? props.card.id : undefined,
-		{ page: sourcePage },
+	const purchase = useRefundPurchase(
+		methods.control, props.card.id, kind, Boolean(props.operation),
 	);
 
+	const { sourceId, sourceQuery } = purchase;
+
 	const source = useWatch({ control: methods.control, name: "cardId" });
 	const isPending = !opened || methods.formState.isSubmitting;
 
@@ -149,23 +141,6 @@ const useOperationFormVm = (props: OperationFormProps) => {
 		else setError(result.error);
 	};
 
-	const expenseChoice = (item: BankOperation) => ({
-		label: t("bank.expenseChoice", {
-			amount: formatMoney(item.amount),
-			available: formatMoney(item.availableRefund),
-			date: formatDate(item.date),
-			name: item.description || item.categoryName,
-		}),
-		value: item.id,
-	});
-
-	const expenseOptions
-		= expenses.data?.items.map(element => expenseChoice(element)) ?? [];
-
-	const selected = sourceQuery.data
-		? expenseChoice(sourceQuery.data)
-		: undefined;
-
 	return {
 		categoriesError: categories.isError
 			? categories.error
@@ -173,16 +148,14 @@ const useOperationFormVm = (props: OperationFormProps) => {
 		categoriesOpen,
 		closeCategories: () => setCategoriesOpen(false),
 		error,
-		expensesError: expenses.isError
-			? expenses.error
-			: null,
+		expensesError: purchase.error,
 		methods,
 		onCategoryCreated: (id: string) => {
 			methods.setValue("categoryId", id);
 			setCategoriesOpen(false);
 		},
 		retryCategories: () => void categories.refetch(),
-		retryExpenses: () => void expenses.refetch(),
+		retryExpenses: purchase.retry,
 		retrySource: () => void sourceQuery.refetch(),
 		sourceError: sourceQuery.isError
 			? sourceQuery.error
@@ -190,14 +163,12 @@ const useOperationFormVm = (props: OperationFormProps) => {
 		view: {
 			categoriesOpen,
 			editing: Boolean(props.operation),
-			emptyExpenses: Boolean(
-				expenses.data && expenses.data.items.length === 0 && !props.operation,
-			),
+			emptyExpenses: purchase.empty,
 			fields: {
+				bindDate: bankDateField,
 				cards: options,
 				categories:
 					categories.data?.map(c => ({ label: c.name, value: c.id })) ?? [],
-				dateInputValue: bankDateInputValue,
 				defaultCategory: categories.data?.find(c => c.isDefault)?.id ?? "",
 				editing: Boolean(props.operation),
 				kind,
@@ -208,7 +179,6 @@ const useOperationFormVm = (props: OperationFormProps) => {
 				maxDate: bankToday,
 				refundCardId: props.card.id,
 				targets: options.filter(c => c.value !== source),
-				validDate: (value: string) => bankDateSchema.safeParse(value).success,
 			},
 			latest: latest
 				? {
@@ -221,26 +191,22 @@ const useOperationFormVm = (props: OperationFormProps) => {
 						version: latest.version,
 					}
 				: undefined,
-			loadingExpenses: expenses.isLoading,
-			nextDisabled: !expenses.data?.hasNext || expenses.isFetching,
+			loadingExpenses: purchase.loading,
+			nextDisabled: purchase.nextDisabled,
 			onAddCategory: () => setCategoriesOpen(true),
 			onCancel: () => setOpened(false),
 			onClose: () => !isPending && !categoriesOpen && setOpened(false),
 			onExitTransitionEnd: props.onClose,
-			onNext: () => setSourcePage(sourcePage + 1),
-			onPrevious: () => setSourcePage(sourcePage - 1),
+			onNext: purchase.onNext,
+			onPrevious: purchase.onPrevious,
 			onReload: error && (sourceId || props.operation) ? onReload : undefined,
 			onSubmit,
 			opened,
 			pending: isPending,
-			previousDisabled: sourcePage === 1 || expenses.isFetching,
+			previousDisabled: purchase.previousDisabled,
 			refund: {
 				editing: Boolean(props.operation),
-				expenses:
-					selected
-					&& expenseOptions.every(item => item.value !== selected.value)
-						? [selected, ...expenseOptions]
-						: expenseOptions,
+				expenses: purchase.options,
 				limit: props.operation
 					? refundLimit
 					: sourceQuery.data?.availableRefund,
@@ -248,7 +214,7 @@ const useOperationFormVm = (props: OperationFormProps) => {
 			saveDisabled:
 				(kind === "expense" && !categories.data)
 				|| (kind === "refund" && !sourceQuery.data),
-			sourcePage,
+			sourcePage: purchase.page,
 		},
 	};
 };