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;

components/Footer/Footer.tsx

@@ -16,7 +16,7 @@ const Footer = () => {
                         color: "inherit",
                         fontSize: 14,
                     }}>
-                    Help and support
+                    Помощь
                 </Link>
                 <Group gap={5}>
                     <Text style={{ fontSize: 18 }}>©</Text>

components/ServicesList/ServicesList.tsx

@@ -1,20 +1,50 @@
-import Link from "next/link";
+"use client";
+
+import { useMemo } from "react";
+import { redirect } from "next/navigation";
 import { Button, Stack, Title } from "@mantine/core";
 import styles from "@/components/ServicesList/ServicesList.module.css";
 import TitleWithLines from "@/components/TitleWithLines/TitleWithLines";
+import SERVICES from "@/constants/services";
+import { ServiceCode } from "@/enums/ServiceCode";
+import { setTargetService } from "@/lib/features/targetService/targetServiceSlice";
+import { useAppDispatch } from "@/lib/store";
+import ServiceData from "@/types/ServiceData";
 
 const ServicesList = () => {
-    const getServiceLink = (
-        title: string,
-        href: string,
-        isInDevelopment: boolean = false
-    ) => {
+    const dispatch = useAppDispatch();
+    const services = useMemo(
+        () =>
+            Object.entries(SERVICES)
+                .filter(([key]) => key !== ServiceCode.UNDEFINED)
+                .map(([, value]) => value),
+        [SERVICES]
+    );
+
+    const onServiceClick = (service: ServiceData) => {
+        dispatch(setTargetService(service.code));
+        redirect("confirm-access");
+    };
+
+    const getServiceButton = (service: ServiceData, key: number) => {
         return (
             <Button
-                component={Link}
+                key={key}
                 size={"xl"}
-                href={isInDevelopment ? "" : href}
-                disabled={isInDevelopment}>
+                onClick={() => onServiceClick(service)}>
+                <Stack gap={0}>
+                    <Title order={4}>{service.name}</Title>
+                </Stack>
+            </Button>
+        );
+    };
+
+    const getServiceInDevelopment = (title: string) => {
+        return (
+            <Button
+                size={"xl"}
+                onClick={() => {}}
+                disabled>
                 <Stack gap={0}>
                     <Title order={4}>{title}</Title>
                 </Stack>
@@ -26,9 +56,9 @@ const ServicesList = () => {
         <Stack
             className={styles.container}
             gap={"lg"}>
-            {getServiceLink("CRM", "https://skirbo.ru/")}
+            {services.map((service, i) => getServiceButton(service, i))}
             <TitleWithLines title="Скоро будет" />
-            {getServiceLink("Analytics", "", true)}
+            {getServiceInDevelopment("Analytics")}
         </Stack>
     );
 };