added new IntegrationsPage, setuped routing, added modal

src/App.tsx

@@ -46,11 +46,15 @@ import OutdatedLink from "./pages/auth/OutdatedLink";
 import { useAfterpay } from "@utils/hooks/useAfterpay";
 
 const MyQuizzesFull = lazy(() => import("./pages/createQuize/MyQuizzesFull"));
+
 const ViewPage = lazy(() => import("./pages/ViewPublicationPage"));
 const Analytics = lazy(() => import("./pages/Analytics/Analytics"));
 const EditPage = lazy(() => import("./pages/startPage/EditPage"));
 const { Tariffs } = lazily(() => import("./pages/Tariffs/Tariffs"));
 const { DesignPage } = lazily(() => import("./pages/DesignPage/DesignPage"));
+const { IntegrationsPage } = lazily(
+  () => import("./pages/IntegrationsPage/IntegrationsPage"),
+);
 const { QuizAnswersPage } = lazily(
   () => import("./pages/QuizAnswersPage/QuizAnswersPage"),
 );
@@ -75,6 +79,13 @@ const routeslink = [
     sidebar: true,
     footer: true,
   },
+  {
+    path: "/integrations",
+    page: IntegrationsPage,
+    header: true,
+    sidebar: true,
+    footer: true,
+  },
 ] as const;
 
 const LazyLoading = ({ children, fallback }: SuspenseProps) => (

src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx

@@ -0,0 +1,56 @@
+import { Dialog, IconButton, useTheme } from "@mui/material";
+import { FC } from "react";
+import Box from "@mui/material/Box";
+import CloseIcon from "@mui/icons-material/Close";
+
+type IntegrationsModalProps = {
+  isModalOpen: boolean;
+  setIsModalOpen: (value: boolean) => void;
+};
+
+export const IntegrationsModal: FC<IntegrationsModalProps> = ({
+  isModalOpen,
+  setIsModalOpen,
+}) => {
+  const theme = useTheme();
+
+  function handleClose() {
+    setIsModalOpen(false);
+  }
+
+  return (
+    <Dialog
+      open={isModalOpen}
+      onClose={handleClose}
+      fullWidth
+      PaperProps={{
+        sx: {
+          maxWidth: "920px",
+          maxHeight: "660px",
+          borderRadius: "12px",
+        },
+      }}
+    >
+      <IconButton
+        onClick={handleClose}
+        sx={{
+          width: "12px",
+          height: "12px",
+          position: "absolute",
+          right: "15px",
+          top: "15px",
+        }}
+      >
+        <CloseIcon
+          sx={{ width: "12px", height: "12px", transform: "scale(1.5)" }}
+        />
+      </IconButton>
+      <Box
+        sx={{
+          width: "920px",
+          height: "660px",
+        }}
+      ></Box>
+    </Dialog>
+  );
+};

src/pages/IntegrationsPage/IntegrationsPage.tsx

@@ -0,0 +1,80 @@
+import { Skeleton, Typography, useMediaQuery, useTheme } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useQuizStore } from "@root/quizes/store";
+import { useNavigate } from "react-router-dom";
+import { PartnersBoard } from "./PartnersBoard/PartnersBoard";
+import amoCrmLogo from "./mocks/amoCrmLogo.png";
+import { IntegrationsModal } from "./IntegrationsModal/IntegrationsModal";
+
+interface IntegrationsPageProps {
+  heightSidebar: number;
+  mobileSidebar: boolean;
+}
+
+export const IntegrationsPage = ({
+  heightSidebar,
+  mobileSidebar,
+}: IntegrationsPageProps) => {
+  const quiz = useCurrentQuiz();
+  const { editQuizId } = useQuizStore();
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const isMobile = useMediaQuery(theme.breakpoints.down(660));
+  const [step, setStep] = useState<number>(0);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (editQuizId === null) navigate("/list");
+  }, [navigate, editQuizId]);
+
+  const heightBar = heightSidebar + 51 + 88 + 36 + 25;
+
+  const partnersMock = [
+    { category: "CRM", name: "amoCRM", logo: amoCrmLogo },
+    { category: "CRM", name: "bitrix" },
+    { category: "CRM", name: "RetailCRM." },
+    { category: "CRM", name: "SugarCRM." },
+    { category: "SocialMedia", name: "Telegram" },
+    { category: "SocialMedia", name: "VKontakte" },
+    { category: "SocialMedia", name: "X.com" },
+    { category: "Сервисы рассылок", name: "Mailchimp" },
+    { category: "Сервисы рассылок", name: "GetResponse" },
+    { category: "Сервисы рассылок", name: "SendPulse" },
+  ];
+  if (quiz === undefined)
+    return (
+      <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
+    );
+  return (
+    <>
+      <Box
+        sx={{
+          width: "100%",
+          padding: isMobile
+            ? mobileSidebar
+              ? `calc(${heightBar}px - 92px) 16px 70px 16px`
+              : "67px 16px 70px 16px"
+            : "25px",
+          height: isMobile ? "100vh" : "calc(100vh - 80px)",
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{ marginBottom: "40px", color: "#333647" }}
+        >
+          Интеграции
+        </Typography>
+        <PartnersBoard
+          partners={partnersMock}
+          setIsModalOpen={setIsModalOpen}
+        />
+        <IntegrationsModal
+          isModalOpen={isModalOpen}
+          setIsModalOpen={setIsModalOpen}
+        />
+      </Box>
+    </>
+  );
+};

src/pages/IntegrationsPage/PartnersBoard/PartnerItem/PartnerItem.tsx

@@ -0,0 +1,47 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { FC } from "react";
+import { Partner } from "../PartnersBoard";
+
+type PartnerItemProps = {
+  partner: Partner;
+  setIsModalOpen: (value: boolean) => void;
+};
+
+export const PartnerItem: FC<PartnerItemProps> = ({
+  partner,
+  setIsModalOpen,
+}) => {
+  const theme = useTheme();
+
+  const handleClick = () => {
+    setIsModalOpen(true);
+  };
+
+  return (
+    <>
+      {partner && (
+        <Box
+          sx={{
+            width: 250,
+            height: 60,
+            backgroundColor: "white",
+            borderRadius: "8px",
+            padding: "0 20px",
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "2%",
+            marginRight: "2%",
+            cursor: "pointer",
+          }}
+          onClick={handleClick}
+        >
+          {partner.logo ? (
+            <img height={"100%"} src={partner.logo} alt={partner.name} />
+          ) : (
+            <Typography>{partner.name}</Typography>
+          )}
+        </Box>
+      )}
+    </>
+  );
+};

src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx

@@ -0,0 +1,70 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { FC } from "react";
+import { PartnerItem } from "./PartnerItem/PartnerItem";
+
+export type Partner = {
+  name: string;
+  logo?: string;
+  category: string;
+};
+
+type PartnersBoardProps = {
+  partners: Partner[];
+  setIsModalOpen: (value: boolean) => void;
+};
+
+export const PartnersBoard: FC<PartnersBoardProps> = ({
+  partners,
+  setIsModalOpen,
+}) => {
+  const theme = useTheme();
+
+  const partnersByCategory = partners.reduce(
+    (acc, partner) => {
+      (acc[partner.category] = acc[partner.category] || []).push(partner);
+      return acc;
+    },
+    {} as Record<string, Partner[]>,
+  );
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: { xs: "center", sm: "center", md: "start" },
+      }}
+    >
+      {Object.entries(partnersByCategory).map(([category, partners]) => (
+        <Box key={category}>
+          <Typography
+            variant="h6"
+            sx={{
+              textAlign: { xs: "center", sm: "start", md: "start" },
+              lineHeight: "1",
+              marginBottom: "12px",
+            }}
+          >
+            {category}
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: { xs: "center", sm: "start", md: "start" },
+            }}
+          >
+            {partners.map((partner) => (
+              <PartnerItem
+                key={partner.name}
+                partner={partner}
+                setIsModalOpen={setIsModalOpen}
+              />
+            ))}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};

src/ui_kit/Sidebar/Sidebar.tsx

@@ -178,6 +178,35 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
             />
           }
         />
+        <MenuItem
+          onClick={() => {
+            navigate("/integrations");
+            setCurrentStep(16);
+          }}
+          text={"Интеграции"}
+          isCollapsed={isMenuCollapsed}
+          isActive={pathname.startsWith("/integrations")}
+          disabled={
+            pathname.startsWith("/integrations")
+              ? false
+              : quiz === undefined
+                ? true
+                : quiz?.config.type === null
+          }
+          icon={
+            <PuzzlePieceIcon
+              color={
+                pathname.startsWith("/integrations")
+                  ? theme.palette.brightPurple.main
+                  : isMenuCollapsed
+                    ? "white"
+                    : theme.palette.grey2.main
+              }
+              height={isMenuCollapsed ? "35px" : "24px"}
+              width={isMenuCollapsed ? "35px" : "24px"}
+            />
+          }
+        />
 
         {/* {quizSettingsMenuItems.map((menuItem, index) => {
                     const Icon = menuItem[0];