From 3f7bcc011f89f01884108ea7bd858ac74cfddce9 Mon Sep 17 00:00:00 2001
From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com>
Date: Wed, 10 Apr 2024 13:38:30 +0400
Subject: [PATCH] added 5step, refactored buttons

---
 .../IntegrationStep1/IntegrationStep1.tsx     | 48 ++----------
 .../IntegrationStep2/IntegrationStep2.tsx     |  4 +-
 .../IntegrationStep3/IntegrationStep3.tsx     |  4 +-
 .../IntegrationStep4/IntegrationStep4.tsx     |  4 +-
 .../CustomFileUploader/CustomFileUploader.tsx |  6 +-
 .../IntegrationStep5/IntegrationStep5.tsx     | 24 +++---
 .../RemoveFileBlock/RemoveFileBlock.tsx       | 60 +++++++++++++++
 .../IntegrationStep6/IntegrationStep6.tsx     | 25 ++----
 .../StepButtonsBlock/StepButtonsBlock.tsx     | 77 ++++++++++++-------
 9 files changed, 149 insertions(+), 103 deletions(-)
 rename src/{components => pages/IntegrationsPage/IntegrationsModal/IntegrationStep5}/CustomFileUploader/CustomFileUploader.tsx (93%)
 create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/RemoveFileBlock/RemoveFileBlock.tsx

diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx
index 4cfa17d0..a1d9b6ea 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx
@@ -1,16 +1,10 @@
-import {
-  Box,
-  Button,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, 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
-        sx={{
-          display: "flex",
-          gap: "10px",
-          marginTop: "auto",
-          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>
+      <StepButtonsBlock
+        isSmallBtnDisabled={true}
+        largeBtnType={"submit"}
+        isLargeBtnDisabled={formik.isSubmitting}
+        largeBtnText={"Войти"}
+      />
     </Box>
   );
 };
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx
index 5d633696..edd16fd2 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx
@@ -66,8 +66,8 @@ export const IntegrationStep2: FC<IntegrationStep2Props> = ({
         }}
       >
         <StepButtonsBlock
-          handleNextStep={handleNextStep}
-          handlePrevStep={handlePrevStep}
+          onLargeBtnClick={handleNextStep}
+          onSmallBtnClick={handlePrevStep}
         />
       </Box>
     </Box>
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep3/IntegrationStep3.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep3/IntegrationStep3.tsx
index 60e3a38e..75d77f10 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep3/IntegrationStep3.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep3/IntegrationStep3.tsx
@@ -67,8 +67,8 @@ export const IntegrationStep3: FC<IntegrationStep3Props> = ({
         }}
       >
         <StepButtonsBlock
-          handleNextStep={handleNextStep}
-          handlePrevStep={handlePrevStep}
+          onLargeBtnClick={handleNextStep}
+          onSmallBtnClick={handlePrevStep}
         />
       </Box>
     </Box>
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx
index fef9bccb..88009b2e 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx
@@ -46,8 +46,8 @@ export const IntegrationStep4: FC<IntegrationStep4Props> = ({
         }}
       >
         <StepButtonsBlock
-          handleNextStep={handleNextStep}
-          handlePrevStep={handlePrevStep}
+          onLargeBtnClick={handleNextStep}
+          onSmallBtnClick={handlePrevStep}
         />
       </Box>
     </Box>
diff --git a/src/components/CustomFileUploader/CustomFileUploader.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/CustomFileUploader/CustomFileUploader.tsx
similarity index 93%
rename from src/components/CustomFileUploader/CustomFileUploader.tsx
rename to src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/CustomFileUploader/CustomFileUploader.tsx
index ffe8a804..2f8f07c9 100644
--- a/src/components/CustomFileUploader/CustomFileUploader.tsx
+++ b/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}
       >
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx
index 8be5edbd..8da67205 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx
+++ b/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
-          description={"Принимает .txt и .docx формат — максимум 100мб"}
-          accept={["txt", "docx"]}
-          handleImageChange={setUtmFile}
-        />
+        {utmFile ? (
+          <RemoveFileBlock file={utmFile} setFile={setUtmFile} />
+        ) : (
+          <CustomFileUploader
+            description={"Принимает .txt и .docx формат — максимум 100мб"}
+            accept={["txt", "docx"]}
+            handleImageChange={setUtmFile}
+          />
+        )}
       </Box>
       <StepButtonsBlock
-        handleNextStep={handleNextStep}
-        handlePrevStep={handlePrevStep}
+        onLargeBtnClick={handleNextStep}
+        onSmallBtnClick={handlePrevStep}
+        isLargeBtnDisabled={!utmFile}
       />
     </Box>
   );
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/RemoveFileBlock/RemoveFileBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/RemoveFileBlock/RemoveFileBlock.tsx
new file mode 100644
index 00000000..eb35d9d0
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx
index 98582b53..4dbdd713 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx
+++ b/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
-        sx={{
-          display: "flex",
-          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>
+      <StepButtonsBlock
+        onSmallBtnClick={handlePrevStep}
+        isLargeBtnMissing={true}
+      />
     </Box>
   );
 };
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/StepButtonsBlock/StepButtonsBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/StepButtonsBlock/StepButtonsBlock.tsx
index 0891d0d0..4b032d1d 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/StepButtonsBlock/StepButtonsBlock.tsx
+++ b/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;
-  handleNextStep: () => void;
+  onSmallBtnClick?: () => 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,
-  handleNextStep,
+  onSmallBtnClick,
+  onLargeBtnClick,
+  isSmallBtnMissing,
+  isLargeBtnMissing,
+  smallBtnText,
+  largeBtnText,
+  isSmallBtnDisabled,
+  isLargeBtnDisabled,
+  largeBtnType,
 }) => {
   const theme = useTheme();
   return (
@@ -21,28 +35,39 @@ export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
         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>
-      <Button
-        data-cy="next-step"
-        variant="contained"
-        sx={{
-          height: "44px",
-          padding: "10px 20px",
-          borderRadius: "8px",
-          background: theme.palette.brightPurple.main,
-          fontSize: "18px",
-        }}
-        onClick={handleNextStep}
-      >
-        Далее
-      </Button>
+      {isSmallBtnMissing || (
+        <Button
+          variant="outlined"
+          sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
+          data-cy="back-button"
+          disabled={isSmallBtnDisabled}
+          onClick={onSmallBtnClick}
+        >
+          {smallBtnText ? (
+            smallBtnText
+          ) : (
+            <ArrowLeft color={theme.palette.brightPurple.main} />
+          )}
+        </Button>
+      )}
+      {isLargeBtnMissing || (
+        <Button
+          data-cy="next-step"
+          variant="contained"
+          disabled={isLargeBtnDisabled}
+          type={largeBtnType ? largeBtnType : "button"}
+          sx={{
+            height: "44px",
+            padding: "10px 20px",
+            borderRadius: "8px",
+            background: theme.palette.brightPurple.main,
+            fontSize: "18px",
+          }}
+          onClick={onLargeBtnClick}
+        >
+          {largeBtnText ? largeBtnText : "Далее"}
+        </Button>
+      )}
     </Box>
   );
 };