added 5step, refactored buttons

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx

@@ -1,16 +1,10 @@
-import {
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Button,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { FC } from "react";
 import { object, string } from "yup";
 import InputTextfield from "@ui_kit/InputTextfield";
 import PasswordInput from "@ui_kit/passwordInput";
 import { useFormik } from "formik";
-import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 
 type IntegrationStep1Props = {
   handleNextStep: () => void;
@@ -140,38 +134,12 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
           массового участия
         </Typography>
       </Box>
-      <Box
+      <StepButtonsBlock
-        sx={{
+        isSmallBtnDisabled={true}
-          display: "flex",
+        largeBtnType={"submit"}
-          gap: "10px",
+        isLargeBtnDisabled={formik.isSubmitting}
-          marginTop: "auto",
+        largeBtnText={"Войти"}
-          marginLeft: "auto",
+      />
-        }}
-      >
-        <Button
-          variant="outlined"
-          sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
-          data-cy="back-button"
-          disabled
-        >
-          <ArrowLeft color={theme.palette.grey2.main} />
-        </Button>
-        <Button
-          variant="contained"
-          type="submit"
-          disabled={formik.isSubmitting}
-          sx={{
-            height: "44px",
-            padding: "10px 20px",
-            borderRadius: "8px",
-            background: theme.palette.brightPurple.main,
-            fontSize: "18px",
-          }}
-          data-cy="signin"
-        >
-          Войти
-        </Button>
-      </Box>
     </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx

@@ -66,8 +66,8 @@ export const IntegrationStep2: FC<IntegrationStep2Props> = ({
         }}
       >
         <StepButtonsBlock
-          handleNextStep={handleNextStep}
+          onLargeBtnClick={handleNextStep}
-          handlePrevStep={handlePrevStep}
+          onSmallBtnClick={handlePrevStep}
         />
       </Box>
     </Box>

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep3/IntegrationStep3.tsx

@@ -67,8 +67,8 @@ export const IntegrationStep3: FC<IntegrationStep3Props> = ({
         }}
       >
         <StepButtonsBlock
-          handleNextStep={handleNextStep}
+          onLargeBtnClick={handleNextStep}
-          handlePrevStep={handlePrevStep}
+          onSmallBtnClick={handlePrevStep}
         />
       </Box>
     </Box>

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

@@ -46,8 +46,8 @@ export const IntegrationStep4: FC<IntegrationStep4Props> = ({
         }}
       >
         <StepButtonsBlock
-          handleNextStep={handleNextStep}
+          onLargeBtnClick={handleNextStep}
-          handlePrevStep={handlePrevStep}
+          onSmallBtnClick={handlePrevStep}
         />
       </Box>
     </Box>

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

@@ -24,7 +24,7 @@ export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
   const theme = useTheme();
   const dropZone = useRef<HTMLDivElement>(null);
   const [ready, setReady] = useState(false);
-  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isMobile = useMediaQuery(theme.breakpoints.down(700));
 
   const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -65,7 +65,7 @@ export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
         onDrop={handleDrop}
         ref={dropZone}
         sx={{
-          width: "580px",
+          width: isMobile ? "100%" : "580px",
           padding: isMobile ? "33px" : "33px 10px 33px 55px",
           display: "flex",
           alignItems: "center",
@@ -73,7 +73,7 @@ export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
           border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
           borderRadius: "8px",
           gap: "55px",
-          flexDirection: isMobile ? "column" : undefined,
+          flexDirection: isMobile ? "column" : "row",
         }}
         onDragEnter={handleDragEnter}
       >

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

@@ -1,8 +1,9 @@
 import { Box, useMediaQuery, useTheme } from "@mui/material";
-import { FC } from "react";
+import React, { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
-import { CustomFileUploader } from "../../../../components/CustomFileUploader/CustomFileUploader";
+import { RemoveFileBlock } from "./RemoveFileBlock/RemoveFileBlock";
+import { CustomFileUploader } from "./CustomFileUploader/CustomFileUploader";
 
 type IntegrationStep5Props = {
   handlePrevStep: () => void;
@@ -31,15 +32,20 @@ export const IntegrationStep5: FC<IntegrationStep5Props> = ({
       }}
     >
       <Box sx={{ alignSelf: "start", marginTop: "20px" }}>
-        <CustomFileUploader
+        {utmFile ? (
-          description={"Принимает .txt и .docx формат — максимум 100мб"}
+          <RemoveFileBlock file={utmFile} setFile={setUtmFile} />
-          accept={["txt", "docx"]}
+        ) : (
-          handleImageChange={setUtmFile}
+          <CustomFileUploader
-        />
+            description={"Принимает .txt и .docx формат — максимум 100мб"}
+            accept={["txt", "docx"]}
+            handleImageChange={setUtmFile}
+          />
+        )}
       </Box>
       <StepButtonsBlock
-        handleNextStep={handleNextStep}
+        onLargeBtnClick={handleNextStep}
-        handlePrevStep={handlePrevStep}
+        onSmallBtnClick={handlePrevStep}
+        isLargeBtnDisabled={!utmFile}
       />
     </Box>
   );

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

@@ -0,0 +1,60 @@
+import React, { FC } from "react";
+import Box from "@mui/material/Box";
+import { IconButton, Typography, useTheme } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+type RemoveFileBlockProps = {
+  file: File | null;
+  setFile: (file: File | null) => void;
+};
+
+export const RemoveFileBlock: FC<RemoveFileBlockProps> = ({
+  setFile,
+  file,
+}) => {
+  const theme = useTheme();
+  console.log("theme", theme);
+  return (
+    <Box sx={{ display: "flex", gap: "15px", alignItems: "center" }}>
+      <Typography
+        sx={{
+          fontSize: "18px",
+          fontWeight: "400",
+          color: theme.palette.grey3.main,
+        }}
+      >
+        Вы загрузили:
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: theme.palette.brightPurple.main,
+          borderRadius: "8px",
+          padding: "5px 5px 5px 14px",
+          gap: "20px",
+        }}
+      >
+        <Typography
+          sx={{ color: "white", fontSize: "14px", fontWeight: "400" }}
+        >
+          {file?.name}
+        </Typography>
+        <IconButton
+          onClick={() => setFile(null)}
+          sx={{
+            backgroundColor: "#864BD9",
+            borderRadius: "50%",
+            width: "24px",
+            height: "24px",
+            color: "white",
+          }}
+        >
+          <CloseIcon
+            sx={{ width: "14px", height: "14px", transform: "scale(1.5)" }}
+          />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,6 +1,6 @@
-import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { FC } from "react";
-import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 
 type IntegrationStep6Props = {
   handlePrevStep: () => void;
@@ -22,23 +22,10 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
         flexGrow: 1,
       }}
     >
-      <Box
+      <StepButtonsBlock
-        sx={{
+        onSmallBtnClick={handlePrevStep}
-          display: "flex",
+        isLargeBtnMissing={true}
-          gap: "10px",
+      />
-          marginTop: "auto",
-          marginLeft: "auto",
-        }}
-      >
-        <Button
-          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/StepButtonsBlock/StepButtonsBlock.tsx

@@ -3,13 +3,27 @@ import ArrowLeft from "@icons/questionsPage/arrowLeft";
 import { FC } from "react";
 
 type StepButtonsBlockProps = {
-  handlePrevStep: () => void;
+  onSmallBtnClick?: () => void;
-  handleNextStep: () => void;
+  onLargeBtnClick?: () => void;
+  isSmallBtnMissing?: boolean;
+  isLargeBtnMissing?: boolean;
+  isSmallBtnDisabled?: boolean;
+  isLargeBtnDisabled?: boolean;
+  smallBtnText?: string;
+  largeBtnText?: string;
+  largeBtnType?: "button" | "submit" | "reset";
 };
 
 export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
-  handlePrevStep,
+  onSmallBtnClick,
-  handleNextStep,
+  onLargeBtnClick,
+  isSmallBtnMissing,
+  isLargeBtnMissing,
+  smallBtnText,
+  largeBtnText,
+  isSmallBtnDisabled,
+  isLargeBtnDisabled,
+  largeBtnType,
 }) => {
   const theme = useTheme();
   return (
@@ -21,28 +35,39 @@ export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
         marginLeft: "auto",
       }}
     >
-      <Button
+      {isSmallBtnMissing || (
-        variant="outlined"
+        <Button
-        sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
+          variant="outlined"
-        data-cy="back-button"
+          sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
-        onClick={handlePrevStep}
+          data-cy="back-button"
-      >
+          disabled={isSmallBtnDisabled}
-        <ArrowLeft color={theme.palette.brightPurple.main} />
+          onClick={onSmallBtnClick}
-      </Button>
+        >
-      <Button
+          {smallBtnText ? (
-        data-cy="next-step"
+            smallBtnText
-        variant="contained"
+          ) : (
-        sx={{
+            <ArrowLeft color={theme.palette.brightPurple.main} />
-          height: "44px",
+          )}
-          padding: "10px 20px",
+        </Button>
-          borderRadius: "8px",
+      )}
-          background: theme.palette.brightPurple.main,
+      {isLargeBtnMissing || (
-          fontSize: "18px",
+        <Button
-        }}
+          data-cy="next-step"
-        onClick={handleNextStep}
+          variant="contained"
-      >
+          disabled={isLargeBtnDisabled}
-        Далее
+          type={largeBtnType ? largeBtnType : "button"}
-      </Button>
+          sx={{
+            height: "44px",
+            padding: "10px 20px",
+            borderRadius: "8px",
+            background: theme.palette.brightPurple.main,
+            fontSize: "18px",
+          }}
+          onClick={onLargeBtnClick}
+        >
+          {largeBtnText ? largeBtnText : "Далее"}
+        </Button>
+      )}
     </Box>
   );
 };