feat: confirm access page and persist redux store

components/ConfirmAccessForm/ConfirmAccessButton.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { redirect } from "next/navigation";
+import { useSelector } from "react-redux";
+import { Button, Text } from "@mantine/core";
+import SERVICES from "@/constants/services";
+import { ServiceCode } from "@/enums/ServiceCode";
+import { RootState } from "@/lib/store";
+import ServiceData from "@/types/ServiceData";
+
+const ConfirmAccessButton: FC = () => {
+    const serviceCode = useSelector(
+        (state: RootState) => state.targetService.serviceCode
+    );
+    const [serviceData, setServiceData] = useState<ServiceData>();
+
+    useEffect(() => {
+        if (serviceCode === ServiceCode.UNDEFINED) {
+            redirect("services");
+        }
+        setServiceData(SERVICES[serviceCode]);
+    }, [serviceCode]);
+
+    const confirmAccess = () => {};
+
+    return (
+        <>
+            <Button
+                onClick={() => confirmAccess()}
+                variant={"filled"}>
+                Войти
+            </Button>
+            <Text
+                fz={"h4"}
+                ta="center">
+                Сервис {serviceData?.name} получит{" "}
+                {serviceData?.requiredAccesses}
+            </Text>
+        </>
+    );
+};
+
+export default ConfirmAccessButton;

components/ConfirmAccessForm/ConfirmAccessForm.module.css

@@ -0,0 +1,14 @@
+.container {
+    @media (min-width: 48em) {
+        max-width: 400px;
+     }
+}
+
+.gray-text {
+    @mixin dark {
+        color: #807e7e;
+    }
+    @mixin light {
+        color: gray;
+    }
+}

components/ConfirmAccessForm/ConfirmAccessForm.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { Stack, Text } from "@mantine/core";
+import ConfirmAccessButton from "@/components/ConfirmAccessForm/ConfirmAccessButton";
+import styles from "./ConfirmAccessForm.module.css";
+
+const ConfirmAccessForm: FC = () => {
+    return (
+        <Stack
+            align={"center"}
+            className={styles.container}>
+            <ConfirmAccessButton />
+            <Text
+                className={styles["gray-text"]}
+                ta="center">
+                Данные из LogiDex ID передаются в другой сервис и обрабатываются
+                в соответствии с правилами этого сервиса
+            </Text>
+        </Stack>
+    );
+};
+
+export default ConfirmAccessForm;