From 17a0fd8bc5853133deb62ed8b99ca8d4aebab72e Mon Sep 17 00:00:00 2001
From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com>
Date: Tue, 9 Apr 2024 19:38:38 +0400
Subject: [PATCH] WIP step 5

---
 .../CustomFileUploader/CustomFileUploader.tsx | 92 +++++++++++++++++++
 .../IntegrationStep4/IntegrationStep4.tsx     | 37 ++++++--
 .../IntegrationStep5/IntegrationStep5.tsx     | 20 ++--
 .../IntegrationStep6/IntegrationStep6.tsx     | 27 ++++--
 .../IntegrationsModal/IntegrationsModal.tsx   | 75 ++++++++++-----
 5 files changed, 203 insertions(+), 48 deletions(-)
 create mode 100644 src/components/CustomFileUploader/CustomFileUploader.tsx

diff --git a/src/components/CustomFileUploader/CustomFileUploader.tsx b/src/components/CustomFileUploader/CustomFileUploader.tsx
new file mode 100644
index 00000000..ffe8a804
--- /dev/null
+++ 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>
+  );
+};
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep4/IntegrationStep4.tsx
index be02f918..fef9bccb 100644
--- 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>
   );
 };
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx
index 133aedf4..8be5edbd 100644
--- 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}
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx
index 5560cc9d..98582b53 100644
--- 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>
   );
 };
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx
index 67287442..8efae901 100644
--- 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>