feat: add tbank tokens

src/features/tbank-connection/index.ts

@@ -0,0 +1 @@
+export { TbankConnectionSection } from "./ui/TbankConnectionSection";

src/features/tbank-connection/ui/TbankConnectionSection.tsx

@@ -0,0 +1,167 @@
+import {
+	Alert,
+	Button,
+	Modal,
+	PasswordInput,
+	Stack,
+	Text,
+} from "@mantine/core";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "../../../shared/api";
+import type { paths } from "../../../shared/api/generated/schema";
+import { useAuth } from "../../auth";
+
+type Status =
+	paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
+
+function errorCode(error: unknown): string | undefined {
+	return typeof error === "object" && error !== null && "code" in error
+		? String(error.code)
+		: undefined;
+}
+
+export function TbankConnectionSection() {
+	const { t } = useTranslation();
+	const { accessToken } = useAuth();
+	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 headers = { Authorization: `Bearer ${accessToken}` };
+	const status = useQuery({
+		queryKey: ["tbank-connection"],
+		queryFn: async () => {
+			const { data, error } = await apiClient.GET("/api/v1/tbank-connection", {
+				headers,
+			});
+			if (error) throw error;
+			return data as Status;
+		},
+	});
+	const update = useMutation({
+		mutationFn: async ({ token }: { token: string }) => {
+			const { data, error } = await apiClient.PUT("/api/v1/tbank-connection", {
+				headers,
+				body: { token },
+			});
+			if (error) throw error;
+			return data as Status;
+		},
+		onSuccess: (data) => {
+			queryClient.setQueryData(["tbank-connection"], data);
+			reset();
+		},
+		onError: (error) => setRequestError(errorCode(error)),
+	});
+	const remove = useMutation({
+		mutationFn: async () => {
+			const { error } = await apiClient.DELETE("/api/v1/tbank-connection", {
+				headers,
+			});
+			if (error) throw error;
+		},
+		onSuccess: () => {
+			queryClient.setQueryData<Status>(["tbank-connection"], {
+				connected: false,
+				connectedAt: null,
+			});
+			setDeleteOpened(false);
+		},
+		onError: () => setRequestError("REQUEST_ERROR"),
+	});
+	const pending = update.isPending || remove.isPending;
+
+	if (status.isPending) return <Text>{t("states.loadingText")}</Text>;
+	if (status.isError)
+		return (
+			<Alert color="red" title={t("tbank.statusError")}>
+				<Button variant="subtle" onClick={() => status.refetch()}>
+					{t("tbank.retry")}
+				</Button>
+			</Alert>
+		);
+	const connected = status.data.connected;
+	return (
+		<Stack mt="xl">
+			<Text fw={600}>{t("tbank.title")}</Text>
+			<Text size="sm">
+				{connected
+					? t("tbank.connected", {
+							date: new Date(
+								String(status.data.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({ 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>
+	);
+}