From 5434d0cafca7af73c3af432844f51cc40a8aa82e Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Thu, 4 Apr 2024 17:48:45 +0400 Subject: [PATCH] added new IntegrationsPage, setuped routing, added modal --- src/App.tsx | 11 +++ .../IntegrationsModal/IntegrationsModal.tsx | 56 ++++++++++++ .../IntegrationsPage/IntegrationsPage.tsx | 80 ++++++++++++++++++ .../PartnersBoard/PartnerItem/PartnerItem.tsx | 47 ++++++++++ .../PartnersBoard/PartnersBoard.tsx | 70 +++++++++++++++ .../IntegrationsPage/mocks/amoCrmLogo.png | Bin 0 -> 3374 bytes src/ui_kit/Sidebar/Sidebar.tsx | 29 +++++++ 7 files changed, 293 insertions(+) create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx create mode 100644 src/pages/IntegrationsPage/IntegrationsPage.tsx create mode 100644 src/pages/IntegrationsPage/PartnersBoard/PartnerItem/PartnerItem.tsx create mode 100644 src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx create mode 100644 src/pages/IntegrationsPage/mocks/amoCrmLogo.png diff --git a/src/App.tsx b/src/App.tsx index 5045ad9e..f6890e2e 100644 --- a/src/App.tsx +++ b/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) => ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx new file mode 100644 index 00000000..6a4f656f --- /dev/null +++ b/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 = ({ + isModalOpen, + setIsModalOpen, +}) => { + const theme = useTheme(); + + function handleClose() { + setIsModalOpen(false); + } + + return ( + + + + + + + ); +}; diff --git a/src/pages/IntegrationsPage/IntegrationsPage.tsx b/src/pages/IntegrationsPage/IntegrationsPage.tsx new file mode 100644 index 00000000..a4c2ac4a --- /dev/null +++ b/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(0); + const [isModalOpen, setIsModalOpen] = useState(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 ( + + ); + return ( + <> + + + Интеграции + + + + + + ); +}; diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnerItem/PartnerItem.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnerItem/PartnerItem.tsx new file mode 100644 index 00000000..495d9924 --- /dev/null +++ b/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 = ({ + partner, + setIsModalOpen, +}) => { + const theme = useTheme(); + + const handleClick = () => { + setIsModalOpen(true); + }; + + return ( + <> + {partner && ( + + {partner.logo ? ( + {partner.name} + ) : ( + {partner.name} + )} + + )} + + ); +}; diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx new file mode 100644 index 00000000..b0df1552 --- /dev/null +++ b/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 = ({ + partners, + setIsModalOpen, +}) => { + const theme = useTheme(); + + const partnersByCategory = partners.reduce( + (acc, partner) => { + (acc[partner.category] = acc[partner.category] || []).push(partner); + return acc; + }, + {} as Record, + ); + + return ( + + {Object.entries(partnersByCategory).map(([category, partners]) => ( + + + {category} + + + {partners.map((partner) => ( + + ))} + + + ))} + + ); +}; diff --git a/src/pages/IntegrationsPage/mocks/amoCrmLogo.png b/src/pages/IntegrationsPage/mocks/amoCrmLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..07d03d78474832ac5d0e8cf8e3bd42bed9c98936 GIT binary patch literal 3374 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 literal 0 HcmV?d00001 diff --git a/src/ui_kit/Sidebar/Sidebar.tsx b/src/ui_kit/Sidebar/Sidebar.tsx index 6f179b66..eee51b68 100755 --- a/src/ui_kit/Sidebar/Sidebar.tsx +++ b/src/ui_kit/Sidebar/Sidebar.tsx @@ -178,6 +178,35 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) { /> } /> + { + navigate("/integrations"); + setCurrentStep(16); + }} + text={"Интеграции"} + isCollapsed={isMenuCollapsed} + isActive={pathname.startsWith("/integrations")} + disabled={ + pathname.startsWith("/integrations") + ? false + : quiz === undefined + ? true + : quiz?.config.type === null + } + icon={ + + } + /> {/* {quizSettingsMenuItems.map((menuItem, index) => { const Icon = menuItem[0];