From dcb254e8e4bba3d97fcdf624297b54f5a437114f Mon Sep 17 00:00:00 2001 From: Nastya Date: Sat, 15 Jun 2024 08:00:58 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B0=D0=B2=D0=B0=D0=B5?= =?UTF-8?q?=D0=BC=D1=8B=D0=B5=20=D1=82=D0=B8=D0=BF=D1=8B=20=D0=B2=20=D0=BA?= =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20=D0=B0?= =?UTF-8?q?=D0=BC=D0=BE=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/integration.ts | 5 - .../CustomRadioGroup/CustomRadioGroup.tsx | 281 +++--------------- src/components/CustomSelect/CustomSelect.tsx | 117 +++----- .../IntegrationsModal/AmoCRMModal.tsx | 266 +++++++---------- .../AmoQuestions/AmoQuestions.tsx | 95 ++---- .../ItemDetailsView/ItemDetailsView.tsx | 20 +- .../ItemsSelectionView/ItemsSelectionView.tsx | 34 +-- .../IntegrationsModal/AmoTags/AmoTags.tsx | 85 +++--- .../TagsDetailsView/TagsDetailsView.tsx | 25 +- .../DealPerformers/DealPerformers.tsx | 13 +- .../PipelineSteps/PipelineSteps.tsx | 26 +- .../IntegrationsModal/Pipelines/Pipelines.tsx | 24 +- .../SettingsBlock/AmoSettingsBlock.tsx | 24 +- .../SettingsBlock/SettingItem/SettingItem.tsx | 30 +- .../IntegrationsModal/types.ts | 11 + .../IntegrationsModal/useAmoIntegration.ts | 250 ++++++++++++++++ 16 files changed, 602 insertions(+), 704 deletions(-) create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/types.ts create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts diff --git a/src/api/integration.ts b/src/api/integration.ts index 0a1992dd..a23fd89a 100644 --- a/src/api/integration.ts +++ b/src/api/integration.ts @@ -20,11 +20,6 @@ export type AccountResponse = { subdomain: string; country: string; driveURL: string; - // AmoUiserid: number; - // Email: string; - // Role: string; - // Group: number; - // AmoUserID: number; }; export const getAccount = async (): Promise< diff --git a/src/components/CustomRadioGroup/CustomRadioGroup.tsx b/src/components/CustomRadioGroup/CustomRadioGroup.tsx index b24b57fe..f7ba0a8c 100644 --- a/src/components/CustomRadioGroup/CustomRadioGroup.tsx +++ b/src/components/CustomRadioGroup/CustomRadioGroup.tsx @@ -1,172 +1,61 @@ import * as React from "react"; -import { FC, useEffect, useMemo, useRef, useState } from "react"; -import Radio from "@mui/material/Radio"; -import RadioGroup from "@mui/material/RadioGroup"; -import FormControlLabel from "@mui/material/FormControlLabel"; -import Box from "@mui/material/Box"; +import { FC, useMemo } from "react"; import CheckboxIcon from "@icons/Checkbox"; -import { Typography, useMediaQuery, useTheme } from "@mui/material"; import { - getPipelines, - getSteps, - getTags, - PaginationRequest, - Pipeline, - Step, - Tag, -} from "@api/integration"; -import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal" + SelectChangeEvent, + Typography, + useTheme, + Box, + FormControlLabel, + RadioGroup, + Radio, +} from "@mui/material"; + +type Items = { + id: string; + title: string; + subTitle?: string; +} type CustomRadioGroupProps = { - type?: string; - selectedValue: string | null; - setSelectedValue: (value: string | null) => void; - pipelineId?: number | null; - items: TagQuestionObject[] - tags: Tag[] - setTags?: (setValueFunc: (value: Tag[]) => Tag[]) => void; + items: Items[] | []; + selectedItemId?: string | null; + setSelectedItem: (value: string | null) => void; + handleScroll: () => void; }; -const SIZE = 25; - export const CustomRadioGroup: FC = ({ - type, - selectedValue, - setSelectedValue, - pipelineId, items, - tags = [], - setTags, + selectedItemId = "", + setSelectedItem, + handleScroll, }) => { const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(500)); + const currentItem = useMemo(() => { + if (selectedItemId !== null && selectedItemId.length > 0) { + return items.find(item => item.id === selectedItemId) || null + } + return null; + }, [selectedItemId, items]) - const [currentValue, setCurrentValue] = useState( - selectedValue, - ); - const [page, setPage] = useState(1); - const [isLoading, setIsLoading] = useState(false); - - const [steps, setSteps] = useState([]); - const [pipelines, setPipelines] = useState([]); - const [hasMoreItems, setHasMoreItems] = useState(true); - const boxRef = useRef(null); - - const handleChange = (event: React.ChangeEvent) => { - setSelectedValue((event.target as HTMLInputElement).value); - setCurrentValue((event.target as HTMLInputElement).value); - }; - - const handleScroll = (e: React.UIEvent) => { + const onScroll = React.useCallback((e: React.UIEvent) => { const scrollHeight = e.currentTarget.scrollHeight; const scrollTop = e.currentTarget.scrollTop; const clientHeight = e.currentTarget.clientHeight; const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9; - if (scrolledToBottom && !isLoading && hasMoreItems) { - setPage((prevPage) => prevPage + 1); + if (scrolledToBottom) { + handleScroll(); } - }; + }, []); - useEffect(() => { - if (type === "typeTags" && hasMoreItems && setTags !== undefined) { - setIsLoading(true); - const pagination: PaginationRequest = { - page: page, - size: SIZE, - }; - getTags(pagination).then(([response]) => { - if (response && response.items !== null) { - setTags((prevItems:Tag[]) => [...prevItems, ...response.items]); - if (response.items.length < SIZE) { - setHasMoreItems(false); - } - } - setIsLoading(false); - }); - } - if (type === "typeSteps" && hasMoreItems && pipelineId) { - setIsLoading(true); - const pagination: PaginationRequest & { pipelineId: number } = { - page: page, - size: SIZE, - pipelineId: pipelineId, - }; - getSteps(pagination).then(([response]) => { - if (response && response.items !== null) { - setSteps((prevItems) => [...prevItems, ...response.items]); - if (response.items.length < SIZE) { - setHasMoreItems(false); - } - } - setIsLoading(false); - }); - } - if (type === "typePipelines" && hasMoreItems) { - setIsLoading(true); - const pagination: PaginationRequest = { - page: page, - size: SIZE, - }; - getPipelines(pagination).then(([response]) => { - if (response && response.items !== null) { - setPipelines((prevItems) => [...prevItems, ...response.items]); - if (response.items.length < SIZE) { - setHasMoreItems(false); - } - } - setIsLoading(false); - }); - } - }, [page, type, hasMoreItems, pipelineId]); const formControlLabels = useMemo(() => { - if (type === "typeTags" && tags && tags.length !== 0) { - return tags.map((item) => ( - - } - icon={} - /> - } - label={ - - - {item.Name} - - {item.Entity} - - } - labelPlacement={"start"} - /> - )); - } - if (type === "typeSteps" && steps && steps.length !== 0) { - return steps.map((step) => ( - + = ({ borderRadius: "12px", margin: 0, backgroundColor: - currentValue === step.Name + currentItem?.id === item.id ? theme.palette.background.default : theme.palette.common.white, }} - value={step.AmoID} + value={item.id} control={ = ({ icon={} /> } - label={step.Name} + label={item.title} labelPlacement={"start"} /> - )); - } - if (type === "typePipelines" && pipelines && pipelines.length !== 0) { - return pipelines.map((pipeline) => ( - .MuiTypography-root": { - width: "200px", - overflow: "hidden", - textOverflow: "ellipsis" - } - }} - value={pipeline.AmoID} - control={ - - } - icon={} - /> - } - label={pipeline.Name} - labelPlacement={"start"} - /> - )); - } - if (type === "typeQuestions" && items && items.length !== 0) { - return items.map(({ backendId, title }) => ( - .MuiTypography-root": { - width: "200px", - overflow: "hidden", - textOverflow: "ellipsis" - } - }} - value={Number(backendId)} - control={ - - } - icon={} - /> - } - label={title} - labelPlacement={"start"} - /> - )); + ) } return ( = ({ Нет элементов ); - }, [tags, steps, currentValue, type, pipelines]); + }, [items]); return ( = ({ { - handleChange(e) - }} + value={setSelectedItem} + onChange={({ target }: SelectChangeEvent) => setSelectedItem(target.value)} + onScroll={onScroll} > {formControlLabels} diff --git a/src/components/CustomSelect/CustomSelect.tsx b/src/components/CustomSelect/CustomSelect.tsx index 902fd333..929ed823 100644 --- a/src/components/CustomSelect/CustomSelect.tsx +++ b/src/components/CustomSelect/CustomSelect.tsx @@ -1,3 +1,6 @@ + +import * as React from "react"; +import { FC, useCallback, useMemo, useRef, useState } from "react"; import { Avatar, MenuItem, @@ -6,96 +9,64 @@ import { Typography, useMediaQuery, useTheme, + Box, } from "@mui/material"; -import Box from "@mui/material/Box"; -import * as React from "react"; -import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import "./CustomSelect.css"; import arrow_down from "../../assets/icons/arrow_down.svg"; -import { getUsers, PaginationRequest, User } from "@api/integration"; + + +type Items = { + id: string; + title: string; + subTitle: string; +} type CustomSelectProps = { - selectedItem: string | null; + items: Items[] | []; + selectedItemId: string | null; setSelectedItem: (value: string | null) => void; - type?: string; + handleScroll: () => void; }; export const CustomSelect: FC = ({ - selectedItem, + items, + selectedItemId, setSelectedItem, - type, + handleScroll, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const [opened, setOpened] = useState(false); - const [currentValue, setCurrentValue] = useState(selectedItem); - const [users, setUsers] = useState([]); - const [isLoading, setIsLoading] = useState(false); - const [page, setPage] = useState(1); - const [hasMoreItems, setHasMoreItems] = useState(true); - const SIZE = 25; + const ref = useRef(null); - const selectWidth = ref.current ? ref.current.offsetWidth : undefined; - const [savedValue, setSavedValue] = useState(null); - const [userName, setUserName] = useState(""); - - const onSelectItem = useCallback( - (event: SelectChangeEvent) => { - const newValue = event.target.value.toString(); - const selectedUser = users.find((user) => user.amoUserID == Number(newValue)); - setUserName(selectedUser.name) - if (selectedUser) { - //для сохранения ID выбранного пользователя в стейт или конфиг... - setSavedValue(selectedUser.id); - } - setCurrentValue(newValue); - setSelectedItem(newValue); - }, - [setSelectedItem, setCurrentValue, setSavedValue, users], - ); + const [opened, setOpened] = useState(false); const toggleOpened = useCallback(() => { setOpened((isOpened) => !isOpened); }, []); - const handleScroll = (e: React.UIEvent) => { + const onScroll = useCallback((e: React.UIEvent) => { const scrollHeight = e.currentTarget.scrollHeight; const scrollTop = e.currentTarget.scrollTop; const clientHeight = e.currentTarget.clientHeight; const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9; - if (scrolledToBottom && !isLoading && hasMoreItems) { - setPage((prevPage) => prevPage + 1); + if (scrolledToBottom) { + handleScroll(); } - }; + }, []); - useEffect(() => { - if (type === "typeUsers" && hasMoreItems) { - setIsLoading(true); - const pagination: PaginationRequest = { - page: page, - size: SIZE, - }; - getUsers(pagination).then(([response]) => { - if (response && response.items !== null) { - setUsers((prevItems) => [...prevItems, ...response.items]); - if (response.items.length < SIZE) { - setHasMoreItems(false); - } - } - setIsLoading(false); - }); - } - }, [page, type, hasMoreItems]); + const currentItem = useMemo(() => ( + items.find(item => item.id === selectedItemId) || null + ), [selectedItemId, items]) const menuItems = useMemo(() => { - if (type === "typeUsers" && users && users.length !== 0) { - return users.map((user) => ( + if (items.length !== 0) { + return items.map((item) => ( = ({ padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px", }} > - {user.name} + {item.title} = ({ color: isMobile ? "#9A9AAF" : "#4D4D4D", }} > - {user.email} - - - {user.role} + {item.subTitle} @@ -154,7 +116,7 @@ export const CustomSelect: FC = ({ нет данных ); - }, [users, type]); + }, [items]); return ( @@ -166,7 +128,7 @@ export const CustomSelect: FC = ({ height: "56px", padding: "5px", color: - currentValue === null + currentItem === null ? theme.palette.grey2.main : theme.palette.brightPurple.main, border: `2px solid ${theme.palette.common.white}`, @@ -176,13 +138,13 @@ export const CustomSelect: FC = ({ alignItems: "center", cursor: "pointer", }} - onClick={() => ref.current?.click()} + onClick={() => {if (ref.current !== null) ref.current?.click()}} > = ({ flexGrow: 1, }} > - {userName || "Выберите ответственного за сделку"} + {currentItem?.title || "Выберите ответственного за сделку"} = ({ MenuProps={{ disablePortal: true, PaperProps: { - onScroll: handleScroll, + onScroll: onScroll, style: { zIndex: 2, maxHeight: "300px", overflow: "auto", overflowX: "auto", - maxWidth: selectWidth, }, }, }} sx={{}} - onChange={onSelectItem} + onChange={({ target }: SelectChangeEvent) => setSelectedItem(target.value)} onClick={toggleOpened} > {menuItems} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx index c8f5073c..0cb1baf4 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect, useMemo, useState } from "react"; +import React, { FC, useCallback, useEffect, useMemo, useState } from "react"; import { Dialog, IconButton, @@ -24,15 +24,11 @@ import { AmoModalTitle } from "./AmoModalTitle/AmoModalTitle"; import { AmoSettingsBlock } from "./SettingsBlock/AmoSettingsBlock"; import { AmoAccountInfo } from "./AmoAccountInfo/AmoAccountInfo"; import { AccountResponse, IntegrationRules, Pipeline, Step, User, getAccount, getIntegrationRules, getPipelines, getSteps, getTags, getUsers, setIntegrationRules, updateIntegrationRules } from "@api/integration"; +import { useAmoIntegration } from "./useAmoIntegration"; +import { QuestionKeys, TagKeys } from "./types"; -export type TitleKeys = "Company" | "Lead" | "Customer"; -export type TagQuestionObject = { - backendId: string; - title: string; -}; -export type TQuestionEntity = Record; type IntegrationsModalProps = { isModalOpen: boolean; handleCloseModal: () => void; @@ -40,143 +36,85 @@ type IntegrationsModalProps = { quizID: number | undefined; }; -export type TagKeys = "Contact" | "Company" | "Lead" | "Customer"; -export type TTags = Record; - export const AmoCRMModal: FC = ({ isModalOpen, handleCloseModal, companyName, quizID, }) => { + //Если нет контекста квиза, то и делать на этой страничке нечего + if (quizID === undefined) { + redirect("/list"); + return null; + } + const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const { questions } = useQuestions(); + const minifiedQuestions = useMemo(() => questions + .filter((q) => + q.type !== "result" + && q.type !== null + ) + .map(({ backendId, title }) => ({ + id: backendId.toString() as string, + title + })), [questions]) + const [step, setStep] = useState(0); const [isSettingsBlock, setIsSettingsBlock] = useState(false); - const [isRemoveAccount, setIsRemoveAccount] = useState(false); + const [isTryRemoveAccount, setIsTryRemoveAccount] = useState(false); - const [firstRules, setFirstRules] = useState(false); - const [accountInfo, setAccountInfo] = useState(null); + const { + isloadingPage, + firstRules, + accountInfo, + arrayOfPipelines, + arrayOfPipelinesSteps, + arrayOfUsers, + arrayOfTags, + selectedPipeline, + setSelectedPipeline, + selectedPipelineStep, + setSelectedPipelineStep, + selectedDealUser, + setSelectedDealPerformer, + questionEntityBackend, + selectedTags, + setSelectedTags, + selectedQuestions, + setSelectedQuestions, + setPageOfPipelines, + setPageOfPipelinesSteps, + setPageOfUsers, + setPageOfTags, + } = useAmoIntegration({ + quizID, + isModalOpen, + isTryRemoveAccount, + }) - const [arrayOfPipelines, setArrayOfPipelines] = useState([]); - const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState([]); - const [arrayOfUsers, setArrayOfUsers] = useState([]); - const [arrayOfTags, setArrayOfTags] = useState([]); + const handleAddTagQuestion = useCallback((scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => { + if (!scope || !id) return; - const [selectedPipeline, setSelectedPipeline] = useState(null); - const [selectedPipelineStep, setSelectedPipelineStep] = useState(null); - const [selectedDealPerformer, setSelectedDealPerformer] = useState(null); - - const [questionEntityBackend, setQuestionEntityBackend] = useState({}); - const [questionEntity, setQuestionEntity] = useState({ - Lead: [], - Company: [], - Customer: [], - }); - const [tags, setTags] = useState({ - Lead: [], - Contact: [], - Company: [], - Customer: [], - }); - - useEffect(() => { - if (isModalOpen && quizID !== undefined && !isRemoveAccount) { - const fetchAccount = async () => { - const [account, error] = await getAccount(); - - if (error) { - if (!error.includes("Not Found")) enqueueSnackbar(error) - setAccountInfo(null); - } - if (account) { - setAccountInfo(account); - } - }; - const fetchRules = async () => { - const [settingsResponse, error] = await getIntegrationRules(quizID.toString()); - - if (error) { - if (error === "first") setFirstRules(true); - if (!error.includes("Not Found") && !error.includes("first")) enqueueSnackbar(error); - } - if (settingsResponse) { - if (settingsResponse.PipelineID) setSelectedPipeline(settingsResponse.PipelineID) - if (settingsResponse.StepID) setSelectedPipelineStep(settingsResponse.StepID) - if (settingsResponse.PerformerID) setSelectedDealPerformer(settingsResponse.PerformerID) - if (Boolean(settingsResponse.FieldsRule) && - Object.keys(settingsResponse.FieldsRule).length > 0) { - const newRules = { ...questionEntity } - setQuestionEntityBackend(settingsResponse.FieldsRule) - for (let key in settingsResponse.FieldsRule) { - if (settingsResponse.FieldsRule[key] !== null && Array.isArray(settingsResponse.FieldsRule[key])) { - const gottenList = Object.keys(settingsResponse.FieldsRule[key][0].QuestionID) - newRules[key] = gottenList - } - } - setQuestionEntity(newRules) - } - if (Boolean(settingsResponse.TagsToAdd) && - Object.keys(settingsResponse.TagsToAdd).length > 0) { - const newRules = { ...tags } - for (let key in settingsResponse.TagsToAdd) { - const gottenList = settingsResponse.TagsToAdd[key] - if (gottenList !== null && Array.isArray(gottenList)) { - newRules[key] = gottenList - } - } - setTags(newRules) - } - setFirstRules(false); - } - - }; - - getTags({ - page: 1, - size: 9999, - }).then(([response]) => { - if (response && response.items !== null) { - setArrayOfTags(response.items); - } - }); - getUsers({ - page: 1, - size: 9999, - }).then(([response]) => { - if (response && response.items !== null) { - setArrayOfUsers(response.items); - } - }); - getPipelines({ - page: 1, - size: 9999, - }).then(([response]) => { - if (response && response.items !== null) { - setArrayOfPipelines(response.items); - } - }) - - fetchAccount(); - fetchRules(); + if (type === "tag") { + setSelectedTags((prevState) => ({ + ...prevState, + [scope]: [...prevState[scope as TagKeys], id], + })); } - }, [isModalOpen, isRemoveAccount]); - useEffect(() => { - if (selectedPipeline !== null) - getSteps({ - page: 1, - size: 9999, - pipelineId: selectedPipeline, - }).then(([response]) => { - if (response && response.items !== null) { - setArrayOfPipelinesSteps(response.items); - } - }); - }, [selectedPipeline]) + + if (type === "question") { + setSelectedQuestions((prevState) => ({ + ...prevState, + [scope]: [...prevState[scope as QuestionKeys], id], + })); + } + }, [setSelectedQuestions, setSelectedTags]); + const handleNextStep = () => { setStep((prevState) => prevState + 1); @@ -189,18 +127,18 @@ export const AmoCRMModal: FC = ({ console.log({ PipelineID: Number(selectedPipeline), StepID: Number(selectedPipelineStep), - PerformerID: Number(selectedDealPerformer), + PerformerID: Number(selectedDealUser), FieldsRule: questionEntity, TagsToAdd: tags }) - if (quizID === undefined) return - if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку") - if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки") + if (quizID === undefined) return + if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку") + if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки") const body = { PipelineID: Number(selectedPipeline), StepID: Number(selectedPipelineStep), - PerformerID: Number(selectedDealPerformer), + PerformerID: Number(selectedDealUser), FieldsRule: questionEntityBackend, TagsToAdd: tags } @@ -220,14 +158,14 @@ export const AmoCRMModal: FC = ({ console.log(body) - if (firstRules) { - setIntegrationRules(quizID.toString(), body) - } else { - updateIntegrationRules(quizID.toString(), body) - } + if (firstRules) { + setIntegrationRules(quizID.toString(), body) + } else { + updateIntegrationRules(quizID.toString(), body) + } - handleCloseModal(); - setStep(1); + handleCloseModal(); + setStep(1); }; const steps = useMemo( () => [ @@ -252,8 +190,8 @@ export const AmoCRMModal: FC = ({ @@ -266,7 +204,7 @@ export const AmoCRMModal: FC = ({ = ({ ), @@ -291,11 +229,12 @@ export const AmoCRMModal: FC = ({ isSettingsAvailable: true, component: ( {}} + handleAddTag={handleAddTagQuestion} handlePrevStep={handlePrevStep} handleNextStep={handleNextStep} - setIdTags={setTags} - arrayOfTags={arrayOfTags} /> ), }, @@ -304,30 +243,25 @@ export const AmoCRMModal: FC = ({ isSettingsAvailable: true, component: ( ), }, ], [ - accountInfo, - questionEntity, - selectedPipeline, - selectedPipelineStep, - selectedDealPerformer, - tags, + arrayOfPipelines, + arrayOfPipelinesSteps, + arrayOfUsers, + arrayOfTags, ], ); const stepTitles = steps.map((step) => step.title); - //Если нет контекста квиза, то и делать на этой страничке нечего - if (quizID === undefined) return redirect("/list") - return ( = ({ isSettingsBlock={isSettingsBlock} setIsSettingsBlock={setIsSettingsBlock} setStep={setStep} - startRemoveAccount={() => setIsRemoveAccount(true)} + startRemoveAccount={() => setIsTryRemoveAccount(true)} /> - {isRemoveAccount && ( + {isTryRemoveAccount && ( setIsRemoveAccount(false)} + stopThisPage={() => setIsTryRemoveAccount(false)} /> )} {isSettingsBlock && ( @@ -403,15 +337,15 @@ export const AmoCRMModal: FC = ({ stepTitles={stepTitles} setIsSettingsBlock={setIsSettingsBlock} setStep={setStep} - selectedDealPerformer={arrayOfUsers.find(p => p.amoUserID == selectedDealPerformer)?.name || null} - selectedFunnel={arrayOfPipelines.find(p => selectedPipeline)?.Name || null} - selectedStage={arrayOfPipelinesSteps.find(p => selectedPipelineStep)?.Name || null} - questionEntity={questionEntity} - tags={tags} + selectedDealUser={selectedDealUser} + selectedFunnel={selectedPipeline} + selectedStage={selectedPipelineStep} + selectedQuestions={selectedQuestions} + selectedTags={selectedTags} /> )} - {!isSettingsBlock && !isRemoveAccount && ( + {!isSettingsBlock && !isTryRemoveAccount && ( {steps[step].component} )} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx index 55807220..5b407512 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx @@ -1,79 +1,40 @@ -import { useTheme } from "@mui/material"; import { - Dispatch, FC, - SetStateAction, - useCallback, - useMemo, useState, } from "react"; import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView"; import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView"; -import { TagQuestionObject, TitleKeys, TQuestionEntity } from "../AmoCRMModal"; -import Box from "@mui/material/Box"; -import type { AllTypesQuestion } from "@model/questionTypes/shared" -import { getQuestionById } from "@/stores/questions/actions"; -import { useQuestionsStore } from "@/stores/questions/store"; +import { Box } from "@mui/material"; +import { QuestionKeys, SelectedQuestions, TagKeys } from "../types"; +type Items = { + id: string; + title: string; + subTitle?: string; +}; type Props = { + questionsItems: Items[] | []; + selectedQuestions: SelectedQuestions; + handleAddQuestion: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void; handlePrevStep: () => void; handleNextStep: () => void; - questionEntity: TQuestionEntity; - setQuestionEntity: Dispatch>; - questions: AllTypesQuestion[]; }; export const AmoQuestions: FC = ({ + questionsItems, + selectedQuestions, + handleAddQuestion, handlePrevStep, handleNextStep, - questionEntity, - setQuestionEntity, - questions, }) => { - const theme = useTheme(); const [isSelection, setIsSelection] = useState(false); - const [activeItem, setActiveItem] = useState(null); - const [selectedValue, setSelectedValue] = useState(null); + const [activeScope, setActiveScope] = useState(null); + const [selectedQuestion, setSelectedQuestion] = useState(null); - const handleAdd = useCallback(() => { - if (!activeItem || !selectedValue) return; - - setQuestionEntity((prevState) => ({ - ...prevState, - [activeItem]: [...prevState[activeItem as TitleKeys], Number(selectedValue)], - })); - }, [activeItem, setQuestionEntity, selectedValue]); - - const items: TagQuestionObject[] = useMemo( - () => Object.values(questions) - .filter(({ type }) => - type !== "result" - && type !== null) - .map(({ backendId, title }) => ({ - backendId: backendId, - title - })), - [], - ); - const translatedQuestionEntity = useMemo(() => { - const translated = { - - } as TQuestionEntity; - - for (let key in questionEntity) { - if (questionEntity[key] !== "Contact") { - console.log(translated) - console.log(translated[key]) - console.log(questionEntity) - translated[key] = questionEntity[key].map((id) => - questions.find((q) => q.backendId === Number(id))?.title || id) - } - } - - return translated - }, - [questionEntity], - ) + const handleAdd = () => { + if (activeScope === null || selectedQuestion === null) return + handleAddQuestion(activeScope, selectedQuestion, "question") + } return ( = ({ flexGrow: 1, }} > - {isSelection ? ( + {isSelection && activeScope !== null ? ( + // Здесь выбираем элемент в табличку { - setActiveItem(null); + setActiveScope(null); setIsSelection(false); }} onLargeBtnClick={() => { handleAdd(); - setActiveItem(null); + setActiveScope(null); setIsSelection(false); }} /> ) : ( + // Табличка )} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx index 64c14426..8c6eb719 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx @@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material"; import { Item } from "../Item/Item"; import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; import { FC } from "react"; -import { TQuestionEntity } from "../../AmoCRMModal"; +import { QuestionKeys, SelectedQuestions } from "../../types"; type TitleKeys = "Contact" | "Company" | "Lead" | "Customer"; @@ -10,16 +10,16 @@ type ItemDetailsViewProps = { setIsSelection: (value: boolean) => void; handleSmallBtn: () => void; handleLargeBtn: () => void; - questionEntity: TQuestionEntity; - setActiveItem: (value: string | null) => void; + selectedQuestions: SelectedQuestions; + setActiveScope: (value: QuestionKeys | null) => void; }; export const ItemDetailsView: FC = ({ handleSmallBtn, handleLargeBtn, - questionEntity, - setActiveItem, + selectedQuestions, setIsSelection, + setActiveScope, }) => { const theme = useTheme(); @@ -48,16 +48,16 @@ export const ItemDetailsView: FC = ({ justifyContent: "start", }} > - {questionEntity && - Object.keys(questionEntity).map((item) => ( + {selectedQuestions && + Object.keys(selectedQuestions).map((item) => ( { setIsSelection(true); - setActiveItem(item); + setActiveScope(item as QuestionKeys); }} - data={questionEntity} + data={selectedQuestions} /> ))} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx index f79ff169..893d3a0a 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx @@ -2,30 +2,28 @@ import { Box } from "@mui/material"; import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/CustomRadioGroup"; import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; import { FC } from "react"; -import { AllTypesQuestion } from "@/model/questionTypes/shared"; -import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal" -import { Tag } from "@api/integration"; +type Items = { + id: string; + title: string; + subTitle?: string; +}; type ItemsSelectionViewProps = { - type?: string; - items?: TagQuestionObject[]; - selectedValue: string | null; - setSelectedValue: (value: string | null) => void; + items: Items[] | []; + selectedItemId?: string | null; + setSelectedItem: (value: string | null) => void; + handleScroll?: () => void; onLargeBtnClick: () => void; onSmallBtnClick: () => void; - setTags: (setValueFunc: (value: Tag[]) => Tag[]) => void; - parentTags: Tag[] }; export const ItemsSelectionView: FC = ({ items, - selectedValue, - setSelectedValue, + selectedItemId, + setSelectedItem, + handleScroll, onLargeBtnClick, onSmallBtnClick, - type, - parentTags, - setTags }) => { return ( = ({ }} > void; + tagsItems: Items[] | []; + selectedTags: SelectedTags; + handleAddTag: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void; + handleScroll: () => void; handlePrevStep: () => void; - tagsNames: TTags; - setIdTags: Dispatch>; - arrayOfTags: TTags[] + handleNextStep: () => void; }; export const AmoTags: FC = ({ - handleNextStep, + tagsItems, + selectedTags, + handleAddTag, + handleScroll, handlePrevStep, - tagsNames, - setIdTags, - arrayOfTags, + handleNextStep, }) => { - const theme = useTheme(); const [isSelection, setIsSelection] = useState(false); - const [activeTag, setActiveItem] = useState(null); - const [selectedValue, setSelectedValue] = useState(null); - const [tags, setTags] = useState([]); - const [tagsNamesList, setTagsNamesList] = useState>({ - Lead: [], - Contact: [], - Company: [], - Customer: [], - }); - const handleAdd = useCallback(() => { - if (!activeTag || !selectedValue) return; + const [activeScope, setActiveScope] = useState(null); + const [selectedTag, setSelectedTag] = useState(null); - setIdTags((prevState) => ({ - ...prevState, - [activeTag]: [...prevState[activeTag as TagKeys], Number(selectedValue)], - })); - setTagsNamesList((prevState) => ({ - ...prevState, - [activeTag]: [...prevState[activeTag as TagKeys], arrayOfTags.find((tag) => tag.AmoID == selectedValue).Name], - })); - }, [activeTag, setIdTags, selectedValue]); + const handleAdd = () => { + if (activeScope === null || selectedTag === null) return + handleAddTag(activeScope, selectedTag, "tag") + } return ( = ({ flexGrow: 1, }} > - {isSelection ? ( + {isSelection && activeScope !== null ? ( + // Здесь выбираем элемент в табличку { - setActiveItem(null); + setActiveScope(null); setIsSelection(false); }} onLargeBtnClick={() => { handleAdd(); - setActiveItem(null); + setActiveScope(null); setIsSelection(false); }} /> ) : ( + // Табличка )} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/TagsDetailsView/TagsDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/TagsDetailsView/TagsDetailsView.tsx index b350b265..ffac6c9d 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/TagsDetailsView/TagsDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/TagsDetailsView/TagsDetailsView.tsx @@ -1,25 +1,23 @@ import { Box, Typography, useTheme } from "@mui/material"; import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; import { FC } from "react"; -import { TagKeys, TitleKeys, TTags } from "../../AmoCRMModal"; import { Item } from "../../AmoQuestions/Item/Item"; +import { SelectedTags, TagKeys } from "../../types"; type TagsDetailsViewProps = { setIsSelection: (value: boolean) => void; handlePrevStep: () => void; handleNextStep: () => void; - tagsNames: TTags; - setActiveItem: (value: string | null) => void; - tagsNamesList: Record + setActiveScope: (value: TagKeys | null) => void; + selectedTags: SelectedTags; }; export const TagsDetailsView: FC = ({ + setActiveScope, + selectedTags, + setIsSelection, handlePrevStep, handleNextStep, - tagsNames, - setActiveItem, - setIsSelection, - tagsNamesList, }) => { const theme = useTheme(); @@ -70,17 +68,16 @@ export const TagsDetailsView: FC = ({ justifyContent: "start", }} > - {tagsNames && - Object.keys(tagsNames).map((item) => ( + {selectedTags && + Object.keys(selectedTags).map((item) => ( { setIsSelection(true); - setActiveItem(item); + setActiveScope(item as TagKeys); }} - data={tagsNames} + data={selectedTags} /> ))} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/DealPerformers/DealPerformers.tsx b/src/pages/IntegrationsPage/IntegrationsModal/DealPerformers/DealPerformers.tsx index 37fcdce4..061506c5 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/DealPerformers/DealPerformers.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/DealPerformers/DealPerformers.tsx @@ -6,14 +6,14 @@ import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect"; type Props = { handlePrevStep: () => void; handleNextStep: () => void; - selectedDealPerformer: number | null; - setSelectedDealPerformer: (value: number | null) => void; + selectedDealUser: string | null; + setSelectedDealPerformer: (value: string | null) => void; }; export const DealPerformers: FC = ({ handlePrevStep, handleNextStep, - selectedDealPerformer, + selectedDealUser, setSelectedDealPerformer, }) => { const theme = useTheme(); @@ -32,9 +32,10 @@ export const DealPerformers: FC = ({ > void; handleNextStep: () => void; - selectedStepsPerformer: number | null; - setSelectedStepsPerformer: (value: number | null) => void; - selectedStep: number | null; - setSelectedStep: (value: number | null) => void; - pipelineId: number | null; + selectedStepsPerformer: string | null; + setSelectedStepsPerformer: (value: string | null) => void; + selectedStep: string | null; + setSelectedStep: (value: string | null) => void; + pipelineId: string | null; }; export const PipelineSteps: FC = ({ @@ -39,9 +39,10 @@ export const PipelineSteps: FC = ({ > = ({ }} > void; handleNextStep: () => void; - selectedPipelinePerformer: number | null; - setSelectedPipelinePerformer: (value: number | null) => void; - selectedPipeline: number | null; - setSelectedPipeline: (value: number | null) => void; + selectedPipelinePerformer: string | null; + setSelectedPipelineUser: (value: string | null) => void; + selectedPipeline: string | null; + setSelectedPipeline: (value: string | null) => void; }; @@ -18,7 +18,7 @@ export const Pipelines: FC = ({ handlePrevStep, handleNextStep, selectedPipelinePerformer, - setSelectedPipelinePerformer, + setSelectedPipelineUser, selectedPipeline, setSelectedPipeline, }) => { @@ -37,9 +37,10 @@ export const Pipelines: FC = ({ > = ({ }} > void; setIsSettingsBlock: (value: boolean) => void; - selectedFunnel: number | null; - selectedStage: number | null; - selectedDealPerformer: string | null; - questionEntity: TQuestionEntity; - tags: TTags; + selectedFunnel: string | null; + selectedStage: string | null; + selectedDealUser: string | null; + selectedQuestions: SelectedQuestions; + selectedTags: SelectedTags; }; export const AmoSettingsBlock: FC = ({ @@ -20,10 +20,10 @@ export const AmoSettingsBlock: FC = ({ setStep, setIsSettingsBlock, selectedFunnel, - selectedDealPerformer, + selectedDealUser, selectedStage, - questionEntity, - tags, + selectedQuestions, + selectedTags, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -57,11 +57,11 @@ export const AmoSettingsBlock: FC = ({ title={title} setIsSettingsBlock={setIsSettingsBlock} setStep={setStep} - selectedDealPerformer={selectedDealPerformer} + selectedDealUser={selectedDealUser} selectedFunnel={selectedFunnel} selectedStage={selectedStage} - questionEntity={questionEntity} - tags={tags} + selectedQuestions={selectedQuestions} + selectedTags={selectedTags} /> ))} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx index 8c18246e..eae751e7 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx @@ -4,7 +4,7 @@ import { Typography, useMediaQuery, useTheme } from "@mui/material"; import { SettingItemHeader } from "./SettingItemHeader/SettingItemHeader"; import { ResponsiblePerson } from "./ResponsiblePerson/ResponsiblePerson"; import { SelectedParameter } from "./SelectedParameter/SelectedParameter"; -import { TQuestionEntity, TTags } from "../../AmoCRMModal"; +import { SelectedQuestions, SelectedTags } from "../../types"; type SettingItemProps = { step: number; @@ -14,10 +14,10 @@ type SettingItemProps = { selectedFunnelPerformer: string | null; selectedFunnel: string | null; selectedStagePerformer: string | null; - selectedDealPerformer: string | null; + selectedDealUser: string | null; selectedStage: string | null; - questionEntity: TQuestionEntity; - tags: TTags; + selectedQuestions: SelectedQuestions; + selectedTags: SelectedTags; }; export const SettingItem: FC = ({ @@ -28,10 +28,10 @@ export const SettingItem: FC = ({ selectedFunnelPerformer, selectedFunnel, selectedStagePerformer, - selectedDealPerformer, + selectedDealUser, selectedStage, - questionEntity, - tags, + selectedQuestions, + selectedTags, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -43,7 +43,7 @@ export const SettingItem: FC = ({ if (step === 1) { return ( <> - + ); @@ -51,7 +51,7 @@ export const SettingItem: FC = ({ if (step === 2) { return ( <> - + ); @@ -59,12 +59,12 @@ export const SettingItem: FC = ({ if (step === 3) { return ( <> - + ); } if (step === 4) { - const isFilled = Object.values(questionEntity).some( + const isFilled = Object.values(selectedQuestions).some( (array) => array.length > 0, ); const status = isFilled ? "Заполнено" : "Не заполнено"; @@ -96,7 +96,7 @@ export const SettingItem: FC = ({ ); } if (step === 5) { - const isFilled = Object.values(tags).some((array) => array.length > 0); + const isFilled = Object.values(selectedTags).some((array) => array.length > 0); const status = isFilled ? "Заполнено" : "Не заполнено"; return ( @@ -131,10 +131,10 @@ export const SettingItem: FC = ({ selectedFunnelPerformer, selectedFunnel, selectedStagePerformer, - selectedDealPerformer, + selectedDealUser, selectedStage, - questionEntity, - tags, + selectedQuestions, + selectedTags, ]); return ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/types.ts b/src/pages/IntegrationsPage/IntegrationsModal/types.ts new file mode 100644 index 00000000..dea47062 --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/types.ts @@ -0,0 +1,11 @@ +export type TagKeys = "Contact" | "Company" | "Lead" | "Customer"; +export type SelectedTags = Record; + +export type QuestionKeys = "Company" | "Lead" | "Customer"; +export type SelectedQuestions = Record; + +export type minifiedData = { + id: string; + title: string; + subTitle?: string; +}; \ No newline at end of file diff --git a/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts b/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts new file mode 100644 index 00000000..99c1ccde --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts @@ -0,0 +1,250 @@ +import { FC, useEffect, useState } from "react"; +import { enqueueSnackbar } from "notistack"; +import type { + TagKeys, + SelectedTags, + QuestionKeys, + SelectedQuestions, + minifiedData, +} from "./types"; +import { + AccountResponse, + getIntegrationRules, + getPipelines, + getSteps, + getTags, + getUsers, + getAccount, +} from "@/api/integration"; + +const SIZE = 25; + +interface Props { + isModalOpen: boolean; + isTryRemoveAccount: boolean; + quizID: number; +} + +export const useAmoIntegration = ({ + isModalOpen, + isTryRemoveAccount, + quizID, +}: Props) => { + const [isloadingPage, setIsLoadingPage] = useState(true); + const [firstRules, setFirstRules] = useState(false); + const [accountInfo, setAccountInfo] = useState(null); + + const [arrayOfPipelines, setArrayOfPipelines] = useState([]); + const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState([]); + const [arrayOfUsers, setArrayOfUsers] = useState([]); + const [arrayOfTags, setArrayOfTags] = useState([]); + + const [selectedPipeline, setSelectedPipeline] = useState(null); + const [selectedPipelineStep, setSelectedPipelineStep] = useState(null); + const [selectedDealUser, setSelectedDealPerformer] = useState(null); + + const [questionEntityBackend, setQuestionEntityBackend] = useState, number> | {}>({}); + const [selectedTags, setSelectedTags] = useState({ + Lead: [], + Contact: [], + Company: [], + Customer: [], + }); + const [selectedQuestions, setSelectedQuestions] = useState({ + Lead: [], + Company: [], + Customer: [], + }); + + const [pageOfPipelines, setPageOfPipelines] = useState(1); + const [pageOfPipelinesSteps, setPageOfPipelinesSteps] = useState(1); + const [pageOfUsers, setPageOfUsers] = useState(1); + const [pageOfTags, setPageOfTags] = useState(1); + + useEffect(() => { + if (isModalOpen && !isTryRemoveAccount) { + const fetchAccountRules = async () => { + setIsLoadingPage(true) + const [account, accountError] = await getAccount(); + + if (accountError) { + if (!accountError.includes("Not Found")) enqueueSnackbar(accountError) + setAccountInfo(null); + } + if (account) { + setAccountInfo(account); + } + const [settingsResponse, rulesError] = await getIntegrationRules(quizID.toString()); + + if (rulesError) { + if (rulesError === "first") setFirstRules(true); + if (!rulesError.includes("Not Found") && !rulesError.includes("first")) enqueueSnackbar(rulesError); + } + if (settingsResponse) { + if (settingsResponse.PipelineID) setSelectedPipeline(settingsResponse.PipelineID.toString()) + if (settingsResponse.StepID) setSelectedPipelineStep(settingsResponse.StepID.toString()) + if (settingsResponse.PerformerID) setSelectedDealPerformer(settingsResponse.PerformerID.toString()) + + if (Boolean(settingsResponse.FieldsRule) && + Object.keys(settingsResponse?.FieldsRule).length > 0) { + const gottenQuestions = { ...selectedQuestions } + setQuestionEntityBackend(settingsResponse.FieldsRule) + + for (let key in settingsResponse.FieldsRule) { + if (settingsResponse.FieldsRule[key as QuestionKeys] !== null && Array.isArray(settingsResponse.FieldsRule[key as QuestionKeys])) { + + const gottenList = settingsResponse.FieldsRule[key as QuestionKeys] + + if (gottenList !== null) + gottenQuestions[key as QuestionKeys] = Object.keys(gottenList[0].QuestionID) + } + } + setSelectedQuestions(gottenQuestions) + } + + if (Boolean(settingsResponse.TagsToAdd) && + Object.keys(settingsResponse.TagsToAdd).length > 0) { + const gottenTags = { ...selectedTags } + + for (let key in settingsResponse.TagsToAdd) { + const gottenList = settingsResponse.TagsToAdd[key as TagKeys] + if (gottenList !== null && Array.isArray(gottenList)) { + gottenTags[key as TagKeys] = gottenList.map(e => e.toString()) + } + } + setSelectedTags(gottenTags) + } + setFirstRules(false); + } + setIsLoadingPage(false) + }; + + fetchAccountRules(); + } else { + //Вот по-хорошему компонент должен размонтироваться и стереть всё. Но это будет сделано позже + setArrayOfPipelines([]); + setArrayOfPipelinesSteps([]); + setArrayOfUsers([]); + setArrayOfTags([]); + setSelectedPipeline(null); + setSelectedPipelineStep(null); + setSelectedDealPerformer(null); + setQuestionEntityBackend({}); + setSelectedTags({ + Lead: [], + Contact: [], + Company: [], + Customer: [], + }); + setSelectedQuestions({ + Lead: [], + Company: [], + Customer: [], + }); + setPageOfPipelines(1); + setPageOfPipelinesSteps(1); + setPageOfUsers(1); + setPageOfTags(1); + } + }, [isModalOpen, isTryRemoveAccount]); + + useEffect(() => { + getPipelines({ + page: pageOfPipelines, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedPipelines: minifiedData[] = [] + + response.items.forEach((step) => { + minifiedPipelines.push({ + id: step.AmoID.toString(), + title: step.Name + }) + }) + setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]); + } + }) + }, [pageOfPipelines]) + useEffect(() => { + if (selectedPipeline !== null) + getSteps({ + page: pageOfPipelinesSteps, + size: SIZE, + pipelineId: Number(selectedPipeline), + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedSteps: minifiedData[] = [] + + response.items.forEach((step) => { + minifiedSteps.push({ + id: step.AmoID.toString(), + title: step.Name + }) + }) + setArrayOfPipelinesSteps((prevItems) => [...prevItems, ...minifiedSteps]); + } + }); + }, [selectedPipeline, pageOfPipelinesSteps]) + useEffect(() => { + getUsers({ + page: pageOfUsers, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedUsers: minifiedData[] = [] + + response.items.forEach((step) => { + minifiedUsers.push({ + id: step.amoID.toString(), + title: step.name + }) + }) + setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]); + } + }); + }, [pageOfUsers]) + useEffect(() => { + getTags({ + page: pageOfTags, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedTags: minifiedData[] = [] + + response.items.forEach((step) => { + minifiedTags.push({ + id: step.AmoID.toString(), + title: step.Name + }) + }) + setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]); + } + }); + }, [pageOfTags]) + + return ({ + isloadingPage, + firstRules, + accountInfo, + arrayOfPipelines, + arrayOfPipelinesSteps, + arrayOfUsers, + arrayOfTags, + selectedPipeline, + setSelectedPipeline, + selectedPipelineStep, + setSelectedPipelineStep, + selectedDealUser, + setSelectedDealPerformer, + questionEntityBackend, + selectedTags, + setSelectedTags, + selectedQuestions, + setSelectedQuestions, + setPageOfPipelines, + setPageOfPipelinesSteps, + setPageOfUsers, + setPageOfTags, + }) +} \ No newline at end of file