интеграция яндекс метрика

src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx

@@ -0,0 +1,40 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { FC } from "react";
+import YandexMetric from "../mocks/YandexMetric.png";
+
+type PartnerItemProps = {
+    setIsModalOpen: (value: boolean) => void;
+    setCompanyName?: (value: string) => void;
+};
+
+export const YandexButton: FC<PartnerItemProps> = ({setIsModalOpen,
+                                                      setCompanyName,}) => {
+    const theme = useTheme();
+
+    const handleClick = () => {
+        setIsModalOpen(true);
+    };
+
+    return (
+        <>
+            <Box
+                sx={{
+                    width: 250,
+                    height: 60,
+                    backgroundColor: "white",
+                    borderRadius: "8px",
+                    padding: "0 20px",
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "2%",
+                    marginRight: "2%",
+                    cursor: "pointer",
+                }}
+                onClick={()=> setIsModalOpen(true)}
+            >
+                <img width={"100%"} src={YandexMetric} alt={"Yandex.Метрика"} />
+            </Box>
+
+        </>
+    );
+};

src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx

@@ -0,0 +1,112 @@
+import {Button, Dialog, IconButton, Typography, useMediaQuery, useTheme} from "@mui/material";
+import Box from "@mui/material/Box";
+import CloseIcon from "@mui/icons-material/Close";
+import React, {useState} from "react";
+import CustomTextField from "@ui_kit/CustomTextField";
+import PencilIcon from "@icons/PencilIcon";
+import PencilCircleIcon from "@icons/PencilCircleIcon";
+import {Pencil} from "@ui_kit/Sidebar/icons/Pencil";
+
+interface Props{
+    isModalOpen: boolean;
+    handleCloseModal: () => void;
+}
+
+export default function YandexModal({isModalOpen, handleCloseModal}: Props){
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(600));
+    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const [save, setSave] = useState(false)
+    return (
+        <Dialog
+            open={isModalOpen}
+            onClose={handleCloseModal}
+            fullWidth
+            fullScreen={isMobile}
+            PaperProps={{
+                sx: {
+                    maxWidth: isTablet ? "100%" : "580px",
+                    maxHeight: isTablet ? "100%" : "251px",
+                    borderRadius: "12px",
+                },
+            }}
+        >
+            <Box
+                sx={{
+                    width: "100%",
+                    height: "68px",
+                    backgroundColor: theme.palette.background.default,
+                }}
+            >
+                <Typography
+                    sx={{
+                        fontSize: isMobile ? "20px" : "24px",
+                        fontWeight: "500",
+                        padding: "20px",
+                    }}
+                >
+                    Аналитика с Яндекс.Метрикой
+                </Typography>
+            </Box>
+            <IconButton
+                onClick={handleCloseModal}
+                sx={{
+                    width: "12px",
+                    height: "12px",
+                    position: "absolute",
+                    right: "15px",
+                    top: "15px",
+                }}
+            >
+                <CloseIcon
+                    sx={{ width: "12px", height: "12px", transform: "scale(1.5)" }}
+                />
+            </IconButton>
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    padding: "15px 20px 15px",
+                    flexGrow: 1,
+                    gap: "20px"
+                }}
+            >
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "10px"
+                    }}
+                >
+                    <Box sx={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+                        <Typography fontWeight={500}>{save ? "Ваш номер счетчика" : "Введите номер счетчика"}</Typography>
+                        {save &&
+                        <Box>
+                            <IconButton onClick={()=>{setSave(false)}}><Pencil color={"#7E2AEA"}/></IconButton>
+                            <IconButton>x</IconButton>
+                        </Box>
+                        }
+
+                    </Box>
+
+                    <CustomTextField placeholder={"в формате ХХХХХХХХ"}/>
+                </Box>
+                {!save &&
+                <Box sx={{
+                    display: "flex",
+                    justifyContent: "end",
+                    gap: "10px"
+                }}>
+                    <Button variant={"outlined"}>Отмена</Button>
+                    <Button
+                        variant={"contained"}
+                        onClick={()=>{setSave(true)}}
+                    >Сохранить</Button>
+                </Box>
+                }
+
+
+            </Box>
+        </Dialog>
+    )
+}

src/pages/IntegrationsPage/IntegrationsPage.tsx

@@ -38,9 +38,9 @@ export const IntegrationsPage = ({
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
-    setTimeout(() => {
-      setCompanyName(null);
-    }, 300);
+    // setTimeout(() => {
+    //   setCompanyName(null);
+    // }, 300);
   };
 
   return (
@@ -66,12 +66,14 @@ export const IntegrationsPage = ({
           partners={partnersMock}
           setIsModalOpen={setIsModalOpen}
           setCompanyName={setCompanyName}
-        />
-        <IntegrationsModal
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}
-          companyName={companyName}
         />
+        {/*<IntegrationsModal*/}
+        {/*  isModalOpen={isModalOpen}*/}
+        {/*  handleCloseModal={handleCloseModal}*/}
+        {/*  companyName={companyName}*/}
+        {/*/>*/}
       </Box>
     </>
   );

src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx

@@ -1,6 +1,8 @@
 import { Box, Typography, useTheme } from "@mui/material";
 import { FC } from "react";
 import { PartnerItem } from "./PartnerItem/PartnerItem";
+import {YandexButton} from "../IntegrationYandex/YandexButton";
+import YandexModal from "../IntegrationYandex/YandexModal";
 
 export type Partner = {
   name: string;
@@ -12,11 +14,15 @@ type PartnersBoardProps = {
   partners: Partner[];
   setIsModalOpen: (value: boolean) => void;
   setCompanyName: (value: string) => void;
+  isModalOpen: boolean;
+  handleCloseModal: ()=> void
 };
 
 export const PartnersBoard: FC<PartnersBoardProps> = ({
   partners,
   setIsModalOpen,
+  isModalOpen,
+  handleCloseModal,
   setCompanyName,
 }) => {
   const theme = useTheme();
@@ -38,36 +44,49 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
         justifyContent: { xs: "center", sm: "center", md: "start" },
       }}
     >
-      {Object.entries(partnersByCategory).map(([category, partners]) => (
-        <Box key={category}>
-          <Typography
+      {/*{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>*/}
+      {/*))}*/}
+        <Typography
             variant="h6"
             sx={{
-              textAlign: { xs: "center", sm: "start", md: "start" },
-              lineHeight: "1",
-              marginBottom: "12px",
+                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>
-      ))}
+        >
+            Аналитика
+        </Typography>
+        <YandexButton setIsModalOpen={setIsModalOpen}/>
+        <YandexModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal}/>
     </Box>
   );
 };