feat: confirm access page and persist redux store

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>
     );
 };