WIP settings in integrations modal

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/RemoveFileBlock/RemoveFileBlock.tsx

@@ -13,7 +13,6 @@ export const RemoveFileBlock: FC<RemoveFileBlockProps> = ({
   file,
 }) => {
   const theme = useTheme();
-  console.log("theme", theme);
   return (
     <Box sx={{ display: "flex", gap: "15px", alignItems: "center" }}>
       <Typography

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

@@ -21,11 +21,28 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
         height: "100%",
         flexGrow: 1,
       }}
+    >
+      <Box
+        sx={{
+          marginTop: "20px",
+          width: "100%",
+          height: "100%",
+          borderRadius: "10px",
+          padding: "10px",
+          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
+        }}
+      ></Box>
+      <Box
+        sx={{
+          marginTop: "20px",
+          alignSelf: "end",
+        }}
       >
         <StepButtonsBlock
           onSmallBtnClick={handlePrevStep}
           isLargeBtnMissing={true}
         />
       </Box>
+    </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Dialog,
   IconButton,
   Typography,
@@ -15,9 +14,10 @@ import { IntegrationStep3 } from "./IntegrationStep3/IntegrationStep3";
 import { IntegrationStep4 } from "./IntegrationStep4/IntegrationStep4";
 import { IntegrationStep5 } from "./IntegrationStep5/IntegrationStep5";
 import { IntegrationStep6 } from "./IntegrationStep6/IntegrationStep6";
-import GearIcon from "@icons/GearIcon";
 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";
 
 type IntegrationsModalProps = {
   isModalOpen: boolean;
@@ -35,6 +35,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   const [step, setStep] = useState<number>(0);
+  const [isSettingsBlock, setIsSettingsBlock] = useState<boolean>(false);
   const [selectedFunnelPerformer, setSelectedFunnelPerformer] = useState<
     string | null
   >(null);
@@ -190,57 +191,27 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
           flexGrow: 1,
         }}
       >
-        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+        <IntegrationsModalTitle
-          <Box>
+          step={step}
-            <Typography
+          steps={steps}
-              sx={{
+          isSettingsBlock={isSettingsBlock}
-                fontSize: isMobile ? "18px" : "24px",
+          setIsSettingsBlock={setIsSettingsBlock}
-                color: "#4D4D4D",
+          setStep={setStep}
-                fontWeight: "400",
-                lineHeight: "1",
-              }}
-            >
-              {steps[step].title}
-            </Typography>
-            <Typography
-              sx={{
-                color: "#9A9AAF",
-                fontWeight: "400",
-                marginTop: "4px",
-                fontSize: "14px",
-                lineHeight: "1",
-              }}
-            >
-              Шаг {step + 1}
-            </Typography>
-          </Box>
-          {steps[step].isSettingsAvailable && (
-            <Button
-              variant="outlined"
-              startIcon={
-                <GearIcon
-                  color={theme.palette.brightPurple.main}
-                  height={"20px"}
-                  width={"20px"}
         />
-              }
+        {isSettingsBlock ? (
-              onClick={() => {}}
+          <SettingsBlock
-              sx={{
+            setIsSettingsBlock={setIsSettingsBlock}
-                padding: isMobile ? "10px" : "10px 20px",
+            setStep={setStep}
-                width: "fit-content",
+            selectedDealPerformer={selectedDealPerformer}
-                backgroundColor: "transparent",
+            selectedFunnelPerformer={selectedFunnelPerformer}
-                color: theme.palette.brightPurple.main,
+            selectedFunnel={selectedFunnel}
-                "& .MuiButton-startIcon": {
+            selectedStagePerformer={selectedStagePerformer}
-                  marginRight: isMobile ? 0 : "8px",
+            selectedStage={selectedStage}
-                  marginLeft: 0,
+            utmFile={utmFile}
-                },
+          />
-              }}
+        ) : (
-            >
-              {isMobile ? "" : "Мои настройки"}
-            </Button>
-          )}
-        </Box>
           <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
+        )}
       </Box>
     </Dialog>
   );

src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx

@@ -0,0 +1,100 @@
+import Box from "@mui/material/Box";
+import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
+import GearIcon from "@icons/GearIcon";
+import React, { FC, useCallback, useMemo } from "react";
+import AccountSetting from "@icons/AccountSetting";
+
+type IntegrationsModalTitleProps = {
+  step: number;
+  steps: { title: string; isSettingsAvailable: boolean }[];
+  isSettingsBlock?: boolean;
+  setIsSettingsBlock: (value: boolean) => void;
+  setStep: (value: number) => void;
+};
+
+export const IntegrationsModalTitle: FC<IntegrationsModalTitleProps> = ({
+  step,
+  steps,
+  setIsSettingsBlock,
+  isSettingsBlock,
+  setStep,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+  const handleClick = useCallback(() => {
+    if (isSettingsBlock) {
+      setIsSettingsBlock(false);
+      setStep(0);
+      return;
+    }
+    setIsSettingsBlock(true);
+  }, [isSettingsBlock, setIsSettingsBlock, setStep]);
+
+  const btnText = useMemo(() => {
+    return isSettingsBlock ? "Сменить аккаунт" : "Мои настройки";
+  }, [isSettingsBlock]);
+
+  return (
+    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+      <Box>
+        <Typography
+          sx={{
+            fontSize: isMobile ? "18px" : "24px",
+            color: theme.palette.grey3.main,
+            fontWeight: "400",
+            lineHeight: "1",
+          }}
+        >
+          {isSettingsBlock ? "Мои настройки" : steps[step].title}
+        </Typography>
+        {isSettingsBlock || (
+          <Typography
+            sx={{
+              color: theme.palette.grey2.main,
+              fontWeight: "400",
+              marginTop: "4px",
+              fontSize: "14px",
+              lineHeight: "1",
+            }}
+          >
+            Шаг {step + 1}
+          </Typography>
+        )}
+      </Box>
+      {steps[step].isSettingsAvailable && (
+        <Button
+          variant="outlined"
+          startIcon={
+            isSettingsBlock ? (
+              <AccountSetting
+                color={theme.palette.brightPurple.main}
+                height={"20px"}
+                width={"20px"}
+              />
+            ) : (
+              <GearIcon
+                color={theme.palette.brightPurple.main}
+                height={"24px"}
+                width={"24px"}
+              />
+            )
+          }
+          onClick={handleClick}
+          sx={{
+            padding: isMobile ? "10px" : "10px 20px",
+            width: "fit-content",
+            backgroundColor: "transparent",
+            color: theme.palette.brightPurple.main,
+            "& .MuiButton-startIcon": {
+              marginRight: isMobile ? 0 : "8px",
+              marginLeft: 0,
+            },
+          }}
+        >
+          {isMobile ? "" : btnText}
+        </Button>
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,16 @@
+import Box from "@mui/material/Box";
+import { FC } from "react";
+
+type SettingItemProps = {
+  step: number;
+  title: string;
+  onEditClick: () => void;
+};
+
+export const SettingItem: FC<SettingItemProps> = ({
+  step,
+  onEditClick,
+  title,
+}) => {
+  return <Box></Box>;
+};

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

@@ -0,0 +1,62 @@
+import { FC } from "react";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
+
+type SettingsBlockProps = {
+  setStep: (value: number) => void;
+  setIsSettingsBlock: (value: boolean) => void;
+  selectedFunnelPerformer: string | null;
+  selectedFunnel: string | null;
+  selectedStagePerformer: string | null;
+  selectedStage: string | null;
+  selectedDealPerformer: string | null;
+  utmFile: File | null;
+};
+
+export const SettingsBlock: FC<SettingsBlockProps> = ({
+  setStep,
+  setIsSettingsBlock,
+  selectedFunnelPerformer,
+  selectedFunnel,
+  selectedStagePerformer,
+  selectedDealPerformer,
+  selectedStage,
+  utmFile,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        height: "100%",
+        flexGrow: 1,
+      }}
+    >
+      <Box
+        sx={{
+          marginTop: "10px",
+          width: "100%",
+          height: "100%",
+          borderRadius: "10px",
+          padding: "10px",
+          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
+        }}
+      ></Box>
+      <Box
+        sx={{
+          marginTop: "20px",
+          alignSelf: "end",
+        }}
+      >
+        <StepButtonsBlock
+          onSmallBtnClick={() => setIsSettingsBlock(false)}
+          isLargeBtnMissing={true}
+        />
+      </Box>
+    </Box>
+  );
+};