restored amo modal

src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx

@@ -15,7 +15,6 @@ import { IntegrationStep4 } from "./IntegrationStep4/IntegrationStep4";
 import { IntegrationStep5 } from "./IntegrationStep5/IntegrationStep5";
 import { IntegrationStep6 } from "./IntegrationStep6/IntegrationStep6";
 import { funnelsMock, performersMock, stagesMock } from "../mocks/MockData";
-import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
 import { IntegrationsModalTitle } from "./IntegrationsModalTitle/IntegrationsModalTitle";
 import { SettingsBlock } from "./SettingsBlock/SettingsBlock";
 import { IntegrationStep7 } from "./IntegrationStep7/IntegrationStep7";
@@ -32,7 +31,7 @@ type IntegrationsModalProps = {
 export type TagKeys = "contact" | "company" | "deal" | "buyer";
 export type TTags = Record<TagKeys, string[] | []>;
 
-export const IntegrationsModal: FC<IntegrationsModalProps> = ({
+export const AmoCRMModal: FC<IntegrationsModalProps> = ({
   isModalOpen,
   handleCloseModal,
   companyName,
@@ -209,6 +208,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
             fontSize: isMobile ? "20px" : "24px",
             fontWeight: "500",
             padding: "20px",
+            color: theme.palette.grey2.main,
           }}
         >
           Интеграция с {companyName ? companyName : "партнером"}

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
 import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
-import { TitleKeys, TQuestionEntity } from "../IntegrationsModal";
+import { TitleKeys, TQuestionEntity } from "../AmoCRMModal";
 import Box from "@mui/material/Box";
 
 type IntegrationStep6Props = {

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx

@@ -2,12 +2,7 @@ import { Box, Typography, useTheme } from "@mui/material";
 import { FC } from "react";
 import { IconBtnAdd } from "./IconBtnAdd/IconBtnAdd";
 import { AnswerItem } from "./AnswerItem/AnswerItem";
-import {
-  TagKeys,
-  TitleKeys,
-  TQuestionEntity,
-  TTags,
-} from "../../IntegrationsModal";
+import { TagKeys, TitleKeys, TQuestionEntity, TTags } from "../../AmoCRMModal";
 
 type ItemProps = {
   title: TitleKeys | TagKeys;

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemDetailsView/ItemDetailsView.tsx

@@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material";
 import { Item } from "../Item/Item";
 import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
 import { FC } from "react";
-import { TQuestionEntity } from "../../IntegrationsModal";
+import { TQuestionEntity } from "../../AmoCRMModal";
 
 type TitleKeys = "contacts" | "company" | "deal" | "users" | "buyers";
 

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep7.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from "react";
 
-import { TagKeys, TTags } from "../IntegrationsModal";
+import { TagKeys, TTags } from "../AmoCRMModal";
 import Box from "@mui/material/Box";
 import { ItemsSelectionView } from "../IntegrationStep6/ItemsSelectionView/ItemsSelectionView";
 import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/TagsDetailsView/TagsDetailsView.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography, useTheme } from "@mui/material";
 import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
 import { FC } from "react";
-import { TagKeys, TTags } from "../../IntegrationsModal";
+import { TagKeys, TTags } from "../../AmoCRMModal";
 import { Item } from "../../IntegrationStep6/Item/Item";
 
 type TagsDetailsViewProps = {

src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx

@@ -5,7 +5,7 @@ import { SettingItemHeader } from "./SettingItemHeader/SettingItemHeader";
 import { ResponsiblePerson } from "./ResponsiblePerson/ResponsiblePerson";
 import { SelectedParameter } from "./SelectedParameter/SelectedParameter";
 import { FileBlock } from "../../IntegrationStep5/FileBlock/FileBlock";
-import { TQuestionEntity, TTags } from "../../IntegrationsModal";
+import { TQuestionEntity, TTags } from "../../AmoCRMModal";
 
 type SettingItemProps = {
   step: number;

src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 import { SettingItem } from "./SettingItem/SettingItem";
-import { TQuestionEntity, TTags } from "../IntegrationsModal";
+import { TQuestionEntity, TTags } from "../AmoCRMModal";
 
 type SettingsBlockProps = {
   stepTitles: string[];

src/pages/IntegrationsPage/IntegrationsPage.tsx

@@ -5,7 +5,6 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import { useNavigate } from "react-router-dom";
 import { PartnersBoard } from "./PartnersBoard/PartnersBoard";
-import { partnersMock } from "./mocks/MockData";
 import { QuizMetricType } from "@model/quizSettings";
 
 interface IntegrationsPageProps {
@@ -26,6 +25,9 @@ export const IntegrationsPage = ({
   const [companyName, setCompanyName] = useState<
     keyof typeof QuizMetricType | null
   >(null);
+
+  const [isAmoCrmModalOpen, setIsAmoCrmModalOpen] = useState<boolean>(false);
+
   useEffect(() => {
     if (editQuizId === null) navigate("/list");
   }, [navigate, editQuizId]);
@@ -38,9 +40,9 @@ export const IntegrationsPage = ({
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
-    // setTimeout(() => {
-    //   setCompanyName(null);
-    // }, 300);
+  };
+  const handleCloseAmoSRMModal = () => {
+    setIsAmoCrmModalOpen(false);
   };
 
   return (
@@ -63,18 +65,15 @@ export const IntegrationsPage = ({
           Интеграции
         </Typography>
         <PartnersBoard
-          partners={partnersMock}
           setIsModalOpen={setIsModalOpen}
           companyName={companyName}
           setCompanyName={setCompanyName}
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}
+          setIsAmoCrmModalOpen={setIsAmoCrmModalOpen}
+          isAmoCrmModalOpen={isAmoCrmModalOpen}
+          handleCloseAmoSRMModal={handleCloseAmoSRMModal}
         />
-        {/*<IntegrationsModal*/}
-        {/*  isModalOpen={isModalOpen}*/}
-        {/*  handleCloseModal={handleCloseModal}*/}
-        {/*  companyName={companyName}*/}
-        {/*/>*/}
       </Box>
     </>
   );

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

@@ -1,50 +0,0 @@
-import { Box, Typography, useTheme } from "@mui/material";
-import { FC } from "react";
-import { Partner } from "../PartnersBoard";
-
-type PartnerItemProps = {
-  partner: Partner;
-  setIsModalOpen: (value: boolean) => void;
-  setCompanyName: (value: string) => void;
-};
-
-export const PartnerItem: FC<PartnerItemProps> = ({
-  partner,
-  setIsModalOpen,
-  setCompanyName,
-}) => {
-  const theme = useTheme();
-
-  const handleClick = () => {
-    setCompanyName(partner.name);
-    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

@@ -1,44 +1,36 @@
 import { Box, Typography, useTheme } from "@mui/material";
-import { FC } from "react";
+import React, { FC } from "react";
 import { ServiceButton } from "./ServiceButton/ServiceButton";
 import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
 import AnalyticsModal from "./AnalyticsModal/AnalyticsModal";
 import { VKPixelLogo } from "../mocks/VKPixelLogo";
 import { QuizMetricType } from "@model/quizSettings";
-
-export type Partner = {
-  name: string;
-  logo?: string;
-  category: string;
-};
+import { AmoCRMLogo } from "../mocks/AmoCRMLogo";
+import { AmoCRMModal } from "../IntegrationsModal/AmoCRMModal";
 
 type PartnersBoardProps = {
-  partners: Partner[];
   setIsModalOpen: (value: boolean) => void;
   companyName: keyof typeof QuizMetricType | null;
   setCompanyName: (value: keyof typeof QuizMetricType) => void;
   isModalOpen: boolean;
   handleCloseModal: () => void;
+  setIsAmoCrmModalOpen: (value: boolean) => void;
+  isAmoCrmModalOpen: boolean;
+  handleCloseAmoSRMModal: () => void;
 };
 
 export const PartnersBoard: FC<PartnersBoardProps> = ({
-  partners,
   setIsModalOpen,
   isModalOpen,
   handleCloseModal,
   companyName,
   setCompanyName,
+  setIsAmoCrmModalOpen,
+  isAmoCrmModalOpen,
+  handleCloseAmoSRMModal,
 }) => {
   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={{
@@ -48,39 +40,32 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
         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}*/}
-      {/*          setCompanyName={setCompanyName}*/}
-      {/*        />*/}
-      {/*      ))}*/}
-
-      {/*    </Box>*/}
-      {/*  </Box>*/}
-      {/*))}*/}
-
       <Box>
+        <Typography
+          variant="h6"
+          sx={{
+            textAlign: { xs: "start", sm: "start", md: "start" },
+            lineHeight: "1",
+            marginBottom: "12px",
+          }}
+        >
+          CRM
+        </Typography>
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: { xs: "start", sm: "start", md: "start" },
+          }}
+        >
+          <ServiceButton
+            logo={<AmoCRMLogo />}
+            setIsModalOpen={setIsAmoCrmModalOpen}
+            setCompanyName={setCompanyName}
+            name={"amoCRM"}
+          />
+        </Box>
+
         <Typography
           variant="h6"
           sx={{
@@ -120,6 +105,13 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
           companyName={companyName}
         />
       )}
+      {companyName && (
+        <AmoCRMModal
+          isModalOpen={isAmoCrmModalOpen}
+          handleCloseModal={handleCloseAmoSRMModal}
+          companyName={companyName}
+        />
+      )}
     </Box>
   );
 };

src/pages/IntegrationsPage/mocks/AmoCRMLogo.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { ReactComponent as AmoLogo } from "./amoCRMLogo.svg";
+
+export const AmoCRMLogo = () => {
+  return <AmoLogo />;
+};

src/pages/IntegrationsPage/mocks/MockData.ts

@@ -1,9 +1,3 @@
-import amoCrmLogo from "./amoCrmLogo.png";
-
-export const partnersMock = [
-  { category: "CRM", name: "amoCRM", logo: amoCrmLogo },
-];
-
 export const performersMock = [
   "Ангелина Полякова",
   "Петр Иванов",