81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
|
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>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|