WIP step 5

2024-04-09 19:38:38 +04:00 · 2024-04-09 19:38:38 +04:00 · 17a0fd8bc5
commit 17a0fd8bc5
parent dff10de2d7
5 changed files with 203 additions and 48 deletions
--- a/src/components/CustomFileUploader/CustomFileUploader.tsx
+++ b/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>
+  );
+};
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx
+++ b/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
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
+      <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
+        <CustomSelect
+          selectedItem={selectedDealPerformer}
+          items={performers}
+          setSelectedItem={setSelectedDealPerformer}
+        />
+      </Box>
+      <Box
+        sx={{
+          marginTop: "auto",
+          alignSelf: "end",
+        }}
      >
-        step 4
-      </Typography>
-      <StepButtonsBlock
-        handleNextStep={handleNextStep}
-        handlePrevStep={handlePrevStep}
-      />
+        <StepButtonsBlock
+          handleNextStep={handleNextStep}
+          handlePrevStep={handlePrevStep}
+        />
+      </Box>
    </Box>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx
+++ b/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
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
-      >
-        step 5
-      </Typography>
+      <Box sx={{ alignSelf: "start", marginTop: "20px" }}>
+        <CustomFileUploader
+          description={"Принимает .txt и .docx формат — максимум 100мб"}
+          accept={["txt", "docx"]}
+          handleImageChange={setUtmFile}
+        />
+      </Box>
      <StepButtonsBlock
        handleNextStep={handleNextStep}
        handlePrevStep={handlePrevStep}
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx
+++ b/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
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
+      <Box
+        sx={{
+          display: "flex",
+          gap: "10px",
+          marginTop: "auto",
+          marginLeft: "auto",
+        }}
      >
-        step 6
-      </Typography>
+        <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>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx
+++ b/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
-            variant="outlined"
-            startIcon={
-              <GearIcon
-                color={theme.palette.brightPurple.main}
-                height={"20px"}
-                width={"20px"}
-              />
-            }
-            onClick={() => {}}
-            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 ? "" : "Мои настройки"}
-          </Button>
+          {steps[step].isSettingsAvailable && (
+            <Button
+              variant="outlined"
+              startIcon={
+                <GearIcon
+                  color={theme.palette.brightPurple.main}
+                  height={"20px"}
+                  width={"20px"}
+                />
+              }
+              onClick={() => {}}
+              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 ? "" : "Мои настройки"}
+            </Button>
+          )}
        </Box>
        <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
      </Box>