WIP step 5

src/components/CustomFileUploader/CustomFileUploader.tsx

@@ -0,0 +1,92 @@
+import {
+  Box,
+  ButtonBase,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import UploadIcon from "@icons/UploadIcon";
+import { type DragEvent, FC, useRef, useState } from "react";
+
+type TextFormat = "txt" | "docx";
+
+interface CustomFileUploaderProps {
+  description?: string;
+  accept?: TextFormat[];
+  handleImageChange: (file: File) => void;
+}
+
+export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
+  accept,
+  description,
+  handleImageChange,
+}) => {
+  const theme = useTheme();
+  const dropZone = useRef<HTMLDivElement>(null);
+  const [ready, setReady] = useState(false);
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+  const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setReady(true);
+  };
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const file = event.dataTransfer.files[0];
+    if (!file) return;
+
+    handleImageChange(file);
+  };
+
+  const acceptedFormats = accept
+    ? accept.map((format) => "." + format).join(", ")
+    : "";
+
+  return (
+    <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
+      <input
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) handleImageChange(file);
+        }}
+        hidden
+        accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
+        multiple
+        type="file"
+        data-cy="upload-image-input"
+      />
+      <Box
+        onDragOver={(event: DragEvent<HTMLDivElement>) =>
+          event.preventDefault()
+        }
+        onDrop={handleDrop}
+        ref={dropZone}
+        sx={{
+          width: "580px",
+          padding: isMobile ? "33px" : "33px 10px 33px 55px",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: theme.palette.background.default,
+          border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
+          borderRadius: "8px",
+          gap: "55px",
+          flexDirection: isMobile ? "column" : undefined,
+        }}
+        onDragEnter={handleDragEnter}
+      >
+        <UploadIcon />
+        <Box>
+          <Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
+            Добавить файл
+          </Typography>
+          <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            {description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
+          </Typography>
+        </Box>
+      </Box>
+    </ButtonBase>
+  );
+};

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx

@@ -1,18 +1,26 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
+import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 
 type IntegrationStep4Props = {
   handlePrevStep: () => void;
   handleNextStep: () => void;
+  selectedDealPerformer: string | null;
+  setSelectedDealPerformer: (value: string | null) => void;
+  performers: string[];
 };
 
 export const IntegrationStep4: FC<IntegrationStep4Props> = ({
   handlePrevStep,
   handleNextStep,
+  selectedDealPerformer,
+  setSelectedDealPerformer,
+  performers,
 }) => {
   const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   return (
     <Box
@@ -24,15 +32,24 @@ export const IntegrationStep4: FC<IntegrationStep4Props> = ({
         flexGrow: 1,
       }}
     >
-      <Typography
+      <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
+        <CustomSelect
+          selectedItem={selectedDealPerformer}
+          items={performers}
+          setSelectedItem={setSelectedDealPerformer}
+        />
+      </Box>
+      <Box
+        sx={{
+          marginTop: "auto",
+          alignSelf: "end",
+        }}
       >
-        step 4
+        <StepButtonsBlock
-      </Typography>
+          handleNextStep={handleNextStep}
-      <StepButtonsBlock
+          handlePrevStep={handlePrevStep}
-        handleNextStep={handleNextStep}
+        />
-        handlePrevStep={handlePrevStep}
+      </Box>
-      />
     </Box>
   );
 };

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

@@ -1,15 +1,21 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
+import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
+import { CustomFileUploader } from "../../../../components/CustomFileUploader/CustomFileUploader";
 
 type IntegrationStep5Props = {
   handlePrevStep: () => void;
   handleNextStep: () => void;
+  setUtmFile: (file: File | null) => void;
+  utmFile: File | null;
 };
 
 export const IntegrationStep5: FC<IntegrationStep5Props> = ({
   handlePrevStep,
   handleNextStep,
+  utmFile,
+  setUtmFile,
 }) => {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -24,11 +30,13 @@ export const IntegrationStep5: FC<IntegrationStep5Props> = ({
         flexGrow: 1,
       }}
     >
-      <Typography
+      <Box sx={{ alignSelf: "start", marginTop: "20px" }}>
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
+        <CustomFileUploader
-      >
+          description={"Принимает .txt и .docx формат — максимум 100мб"}
-        step 5
+          accept={["txt", "docx"]}
-      </Typography>
+          handleImageChange={setUtmFile}
+        />
+      </Box>
       <StepButtonsBlock
         handleNextStep={handleNextStep}
         handlePrevStep={handlePrevStep}

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

@@ -1,5 +1,6 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
 import { FC } from "react";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
 
 type IntegrationStep6Props = {
   handlePrevStep: () => void;
@@ -9,8 +10,8 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
   handlePrevStep,
 }) => {
   const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
-
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   return (
     <Box
       sx={{
@@ -21,11 +22,23 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
         flexGrow: 1,
       }}
     >
-      <Typography
+      <Box
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
+        sx={{
+          display: "flex",
+          gap: "10px",
+          marginTop: "auto",
+          marginLeft: "auto",
+        }}
       >
-        step 6
+        <Button
-      </Typography>
+          variant="outlined"
+          sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
+          data-cy="back-button"
+          onClick={handlePrevStep}
+        >
+          <ArrowLeft color={theme.palette.brightPurple.main} />
+        </Button>
+      </Box>
     </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx

@@ -17,6 +17,7 @@ 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";
 
 type IntegrationsModalProps = {
   isModalOpen: boolean;
@@ -42,6 +43,10 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
     string | null
   >(null);
   const [selectedStage, setSelectedStage] = useState<string | null>(null);
+  const [selectedDealPerformer, setSelectedDealPerformer] = useState<
+    string | null
+  >(null);
+  const [utmFile, setUtmFile] = useState<File | null>(null);
 
   const handleNextStep = () => {
     setStep((prevState) => prevState + 1);
@@ -54,10 +59,12 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
     () => [
       {
         title: "Авторизация в аккаунте",
+        isSettingsAvailable: false,
         component: <IntegrationStep1 handleNextStep={handleNextStep} />,
       },
       {
         title: "Выбор воронки",
+        isSettingsAvailable: true,
         component: (
           <IntegrationStep2
             handlePrevStep={handlePrevStep}
@@ -73,6 +80,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
       },
       {
         title: "Выбор этапа воронки",
+        isSettingsAvailable: true,
         component: (
           <IntegrationStep3
             handlePrevStep={handlePrevStep}
@@ -88,28 +96,43 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
       },
       {
         title: "Сделка",
+        isSettingsAvailable: true,
         component: (
           <IntegrationStep4
             handlePrevStep={handlePrevStep}
             handleNextStep={handleNextStep}
+            selectedDealPerformer={selectedDealPerformer}
+            setSelectedDealPerformer={setSelectedDealPerformer}
+            performers={performersMock}
           />
         ),
       },
       {
-        title: "Название шага",
+        title: "Добавление utm-меток",
+        isSettingsAvailable: false,
         component: (
           <IntegrationStep5
             handlePrevStep={handlePrevStep}
             handleNextStep={handleNextStep}
+            utmFile={utmFile}
+            setUtmFile={setUtmFile}
           />
         ),
       },
       {
         title: "Добавление тегов",
+        isSettingsAvailable: true,
         component: <IntegrationStep6 handlePrevStep={handlePrevStep} />,
       },
     ],
-    [],
+    [
+      utmFile,
+      selectedFunnelPerformer,
+      selectedFunnel,
+      selectedStagePerformer,
+      selectedStage,
+      selectedDealPerformer,
+    ],
   );
 
   return (
@@ -191,29 +214,31 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
               Шаг {step + 1}
             </Typography>
           </Box>
-          <Button
+          {steps[step].isSettingsAvailable && (
-            variant="outlined"
+            <Button
-            startIcon={
+              variant="outlined"
-              <GearIcon
+              startIcon={
-                color={theme.palette.brightPurple.main}
+                <GearIcon
-                height={"20px"}
+                  color={theme.palette.brightPurple.main}
-                width={"20px"}
+                  height={"20px"}
-              />
+                  width={"20px"}
-            }
+                />
-            onClick={() => {}}
+              }
-            sx={{
+              onClick={() => {}}
-              padding: isMobile ? "10px" : "10px 20px",
+              sx={{
-              width: "fit-content",
+                padding: isMobile ? "10px" : "10px 20px",
-              backgroundColor: "transparent",
+                width: "fit-content",
-              color: theme.palette.brightPurple.main,
+                backgroundColor: "transparent",
-              "& .MuiButton-startIcon": {
+                color: theme.palette.brightPurple.main,
-                marginRight: isMobile ? 0 : "8px",
+                "& .MuiButton-startIcon": {
-                marginLeft: 0,
+                  marginRight: isMobile ? 0 : "8px",
-              },
+                  marginLeft: 0,
-            }}
+                },
-          >
+              }}
-            {isMobile ? "" : "Мои настройки"}
+            >
-          </Button>
+              {isMobile ? "" : "Мои настройки"}
+            </Button>
+          )}
         </Box>
         <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
       </Box>