refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,139 @@
+import {
+	Alert,
+	Button,
+	Modal,
+	PasswordInput,
+	Stack,
+	Text,
+} from "@mantine/core";
+import { useQueryClient } from "@tanstack/react-query";
+import type { FC } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { apiErrorCode, apiQueryClient } from "@/shared/api";
+import {
+	commitTbankConnectionBoundary,
+	type TbankConnectionStatus,
+} from "../../model/connection-boundary";
+
+type TbankConnectionSectionLoadedProps = {
+	status: TbankConnectionStatus;
+};
+
+const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
+	props,
+) => {
+	const { status } = props;
+	const { t } = useTranslation();
+	const queryClient = useQueryClient();
+	const [deleteOpened, setDeleteOpened] = useState(false);
+	const [requestError, setRequestError] = useState<string | null>(null);
+	const {
+		register,
+		handleSubmit,
+		reset,
+		formState: { errors },
+	} = useForm<{ token: string }>();
+	const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
+		onSuccess: (data) => {
+			commitTbankConnectionBoundary(queryClient, data);
+			reset();
+		},
+		onError: (error) => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
+	});
+	const remove = apiQueryClient.useMutation(
+		"delete",
+		"/api/v1/tbank-connection",
+		{
+			onSuccess: () => {
+				commitTbankConnectionBoundary(queryClient, {
+					connected: false,
+					connectedAt: null,
+				});
+				setDeleteOpened(false);
+			},
+			onError: () => setRequestError("REQUEST_ERROR"),
+		},
+	);
+	const pending = update.isPending || remove.isPending;
+	const connected = status.connected;
+
+	return (
+		<Stack mt="xl">
+			<Text fw={600}>{t("tbank.title")}</Text>
+			<Text size="sm">
+				{connected
+					? t("tbank.connected", {
+							date: new Date(status.connectedAt ?? "").toLocaleDateString(
+								"ru-RU",
+							),
+						})
+					: t("tbank.disconnected")}
+			</Text>
+			<Text size="sm" c="dimmed">
+				{t("tbank.hint")}
+			</Text>
+			<form
+				onSubmit={handleSubmit(({ token }) => {
+					setRequestError(null);
+					update.mutate({ body: { token } });
+				})}
+			>
+				<fieldset disabled={pending}>
+					<Stack>
+						<PasswordInput
+							label={t("tbank.token")}
+							{...register("token", { required: t("tbank.tokenRequired") })}
+							error={errors.token?.message}
+						/>
+						{requestError && (
+							<Alert color="red">
+								{t(
+									requestError === "INVALID_TBANK_TOKEN"
+										? "tbank.invalidToken"
+										: requestError === "TBANK_UNAVAILABLE"
+											? "tbank.unavailable"
+											: "tbank.requestError",
+								)}
+							</Alert>
+						)}
+						<Button type="submit" loading={update.isPending}>
+							{t(connected ? "tbank.replace" : "tbank.connect")}
+						</Button>
+						{connected && (
+							<Button
+								variant="outline"
+								color="red"
+								onClick={() => setDeleteOpened(true)}
+							>
+								{t("tbank.delete")}
+							</Button>
+						)}
+					</Stack>
+				</fieldset>
+			</form>
+			<Modal
+				opened={deleteOpened}
+				onClose={() => !pending && setDeleteOpened(false)}
+				title={t("tbank.deleteTitle")}
+				closeOnClickOutside={!pending}
+				closeOnEscape={!pending}
+			>
+				<Stack>
+					<Text>{t("tbank.deleteText")}</Text>
+					<Button
+						color="red"
+						loading={remove.isPending}
+						disabled={pending}
+						onClick={() => remove.mutate({})}
+					>
+						{t("tbank.deleteConfirm")}
+					</Button>
+				</Stack>
+			</Modal>
+		</Stack>
+	);
+};
+
+export { TbankConnectionSectionLoaded };