added 5step, refactored buttons

2024-04-10 13:38:30 +04:00 · 2024-04-10 13:38:30 +04:00 · 3f7bcc011f
commit 3f7bcc011f
parent 17a0fd8bc5
9 changed files with 149 additions and 103 deletions
--- 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>
  );
 };
--- 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>
--- 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>
--- 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>
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/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}
      >
--- 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>
  );
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/RemoveFileBlock/RemoveFileBlock.tsx
+++ 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>
+  );
+};
--- 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>
  );
 };
--- 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>
  );
 };