91 lines
2.8 KiB
TypeScript
91 lines
2.8 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 [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||
const [companyName, setCompanyName] = useState<string | null>(null);
|
||
|
||
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" }} />
|
||
);
|
||
|
||
const handleCloseModal = () => {
|
||
setIsModalOpen(false);
|
||
setTimeout(() => {
|
||
setCompanyName(null);
|
||
}, 300);
|
||
};
|
||
|
||
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}
|
||
setCompanyName={setCompanyName}
|
||
/>
|
||
<IntegrationsModal
|
||
isModalOpen={isModalOpen}
|
||
handleCloseModal={handleCloseModal}
|
||
companyName={companyName}
|
||
/>
|
||
</Box>
|
||
</>
|
||
);
|
||
};
|