amo fix types, вывод названий вместо id, удаление выбранных вопросов и тегов

src/api/integration.ts

@@ -1,3 +1,4 @@
+import { QuestionKeys } from "@/pages/IntegrationsPage/IntegrationsModal/types";
 import { makeRequest } from "@api/makeRequest";
 import { parseAxiosError } from "@utils/parse-error";
 
@@ -225,29 +226,13 @@ export const getPipelines = async ({
 };
 
 //получение настроек интеграции
-type QuestionID = Record<string, number>
+export type QuestionID = Record<string, number>
 
 export type IntegrationRules = {
   PipelineID: number;
   StepID: number;
   PerformerID?: number;
-  FieldsRule: {
+  FieldsRule: FieldsRule;
-    Lead: [
-      {
-        QuestionID: QuestionID;
-      }
-    ] | null,
-    Company: [
-      {
-        QuestionID: QuestionID;
-      }
-    ] | null,
-    Customer: [
-      {
-        QuestionID: QuestionID;
-      }
-    ] | null,
-  };
   TagsToAdd: {
     Lead: number[] | null;
     Contact: number[] | null;
@@ -255,6 +240,7 @@ export type IntegrationRules = {
     Customer: number[] | null;
   }
 };
+export type FieldsRule = Record<Partial<QuestionKeys>, null | [{QuestionID: QuestionID;}]>
 
 export const getIntegrationRules = async (
   quizID: string,

src/components/CustomRadioGroup/CustomRadioGroup.tsx

@@ -10,18 +10,15 @@ import {
   RadioGroup,
   Radio,
 } from "@mui/material";
+import { MinifiedData, TagKeys } from "@/pages/IntegrationsPage/IntegrationsModal/types";
 
-type Items = {
-  id: string;
-  title: string;
-  subTitle?: string;
-}
 
 type CustomRadioGroupProps = {
-  items: Items[] | [];
+  items: MinifiedData[] | [];
   selectedItemId?: string | null;
   setSelectedItem: (value: string | null) => void;
   handleScroll: () => void;
+  activeScope?: TagKeys;
 };
 
 export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
@@ -29,6 +26,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
   selectedItemId = "",
   setSelectedItem,
   handleScroll,
+  activeScope,
 }) => {
   const theme = useTheme();
 
@@ -39,6 +37,14 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
     return null;
   }, [selectedItemId, items])
 
+  const filteredItems = useMemo(() => {
+    let newArray = items
+    if (activeScope !== undefined) newArray =newArray.filter(item => {
+      return item.entity === activeScope
+    })
+    return newArray
+  }, items)
+
   const onScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
     const scrollHeight = e.currentTarget.scrollHeight;
     const scrollTop = e.currentTarget.scrollTop;
@@ -52,8 +58,8 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
 
 
   const formControlLabels = useMemo(() => {
-    if (items.length !== 0) {
+    if (filteredItems.length !== 0) {
-      return items.map( item => 
+      return filteredItems.map(item =>
         <FormControlLabel
           key={item.id}
           sx={{
@@ -68,6 +74,12 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
               currentItem?.id === item.id
                 ? theme.palette.background.default
                 : theme.palette.common.white,
+            "&.MuiFormControlLabel-root > .MuiTypography-root": {
+              width: "200px",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+
           }}
           value={item.id}
           control={
@@ -100,7 +112,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
         <Typography>Нет элементов</Typography>
       </Box>
     );
-  }, [items]);
+  }, [filteredItems, selectedItemId]);
 
   return (
     <Box
@@ -116,7 +128,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
       <RadioGroup
         aria-labelledby="demo-controlled-radio-buttons-group"
         name="controlled-radio-buttons-group"
-        value={setSelectedItem}
+        value={selectedItemId}
         onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
         onScroll={onScroll}
       >

src/components/CustomSelect/CustomSelect.tsx

@@ -13,22 +13,15 @@ import {
 } from "@mui/material";
 import "./CustomSelect.css";
 import arrow_down from "../../assets/icons/arrow_down.svg";
-
+import { MinifiedData } from "@/pages/IntegrationsPage/IntegrationsModal/types";
-
-type Items = {
-  id: string;
-  title: string;
-  subTitle: string;
-}
 
 type CustomSelectProps = {
-  items: Items[] | [];
+  items: MinifiedData[] | [];
   selectedItemId: string | null;
   setSelectedItem: (value: string | null) => void;
   handleScroll: () => void;
 };
 
-
 export const CustomSelect: FC<CustomSelectProps> = ({
   items,
   selectedItemId,
@@ -39,7 +32,6 @@ export const CustomSelect: FC<CustomSelectProps> = ({
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   const ref = useRef<HTMLDivElement | null>(null);
-
   const [opened, setOpened] = useState<boolean>(false);
 
   const toggleOpened = useCallback(() => {
@@ -116,7 +108,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
         нет данных
       </MenuItem>
     );
-  }, [items]);
+  }, [items, selectedItemId]);
 
   return (
     <Box>
@@ -171,7 +163,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
       <Select
         ref={ref}
         className="select"
-        value={""}
+        value={selectedItemId || ""}
         open={opened}
         MenuProps={{
           disablePortal: true,

src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx

@@ -14,6 +14,7 @@ import { enqueueSnackbar } from "notistack";
 import CloseIcon from "@mui/icons-material/Close";
 
 import { AmoRemoveAccount } from "./AmoRemoveAccount/AmoRemoveAccount";
+import { AmoDeleteTagQuestion } from "./AmoRemoveAccount/AmoDeleteTagQuestion";
 import { AmoLogin } from "./AmoLogin/AmoLogin";
 import { Pipelines } from "./Pipelines/Pipelines";
 import { PipelineSteps } from "./PipelineSteps/PipelineSteps";
@@ -23,9 +24,10 @@ import { AmoQuestions } from "./AmoQuestions/AmoQuestions";
 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 { AccountResponse, FieldsRule, IntegrationRules, Pipeline, Step, User, getAccount, getIntegrationRules, getPipelines, getSteps, getTags, getUsers, setIntegrationRules, updateIntegrationRules } from "@api/integration";
+import type { QuestionID } from "@api/integration";
 import { useAmoIntegration } from "./useAmoIntegration";
-import { QuestionKeys, TagKeys } from "./types";
+import { QuestionKeys, TagKeys, TagQuestionHC } from "./types";
 
 
 
@@ -36,6 +38,8 @@ type IntegrationsModalProps = {
   quizID: number | undefined;
 };
 
+
+
 export const AmoCRMModal: FC<IntegrationsModalProps> = ({
   isModalOpen,
   handleCloseModal,
@@ -67,6 +71,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
   const [step, setStep] = useState<number>(0);
   const [isSettingsBlock, setIsSettingsBlock] = useState<boolean>(false);
   const [isTryRemoveAccount, setIsTryRemoveAccount] = useState<boolean>(false);
+  const [openDelete, setOpenDelete] = useState<TagQuestionHC | null>(null);
 
   const {
     isloadingPage,
@@ -82,7 +87,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
     setSelectedPipelineStep,
     selectedDealUser,
     setSelectedDealPerformer,
-    questionEntityBackend,
+    questionsBackend,
     selectedTags,
     setSelectedTags,
     selectedQuestions,
@@ -114,6 +119,33 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
       }));
     }
   }, [setSelectedQuestions, setSelectedTags]);
+  const handleDeleteTagQuestion = useCallback(() => {
+    if (openDelete === null || !openDelete.scope || !openDelete.id || !openDelete.type) return;
+    if (openDelete.type === "tag") {
+      let newArray = selectedTags[openDelete.scope];
+      const index = newArray.indexOf(openDelete.id)
+      if (index !== -1)
+        newArray.splice(index, 1);
+
+      setSelectedTags((prevState) => ({
+        ...prevState,
+        [openDelete.scope]: newArray
+      }));
+    }
+
+    if (openDelete.type === "question") {
+      let newArray = selectedQuestions[openDelete.scope as QuestionKeys];
+      const index = newArray.indexOf(openDelete.id)
+      if (index !== -1)
+        newArray.splice(index, 1);
+
+      setSelectedQuestions((prevState) => ({
+        ...prevState,
+        [openDelete.scope]: newArray
+      }));
+    }
+    setOpenDelete(null)
+  }, [openDelete]);
 
 
   const handleNextStep = () => {
@@ -123,14 +155,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
     setStep((prevState) => prevState - 1);
   };
   const handleSave = () => {
-    console.log("На отправку")
+
-    console.log({
-      PipelineID: Number(selectedPipeline),
-      StepID: Number(selectedPipelineStep),
-      PerformerID: Number(selectedDealUser),
-      FieldsRule: questionEntity,
-      TagsToAdd: tags
-    })
     if (quizID === undefined) return
     if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку")
     if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки")
@@ -139,23 +164,26 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
       PipelineID: Number(selectedPipeline),
       StepID: Number(selectedPipelineStep),
       PerformerID: Number(selectedDealUser),
-      FieldsRule: questionEntityBackend,
+      // FieldsRule: questionsBackend,
-      TagsToAdd: tags
+      TagsToAdd: selectedTags
     }
 
-
+    const FieldsRule = {} as Record<Partial<QuestionKeys>, [{ QuestionID: QuestionID; }]>;
-    for (let key in questionEntityBackend) {
+    for (let key in questionsBackend) {
       if (key !== "Contact") {
 
-        if (body.FieldsRule[key] === null) body.FieldsRule[key] = [{ "QuestionID": {} }]
+        if (questionsBackend[key as QuestionKeys] === null) FieldsRule[key as QuestionKeys] = [{ "QuestionID": {} }]
-        console.log(key)
+        selectedQuestions[key as QuestionKeys].forEach((id) => {
-        console.log(questionEntity)
+          FieldsRule[key as QuestionKeys][0].QuestionID[id] = 0
-        questionEntity[key].forEach((id) => {
-          body.FieldsRule[key][0].QuestionID[id] = 0
         })
       }
     }
+    for (let key in body.TagsToAdd) {
+      body.TagsToAdd[key as TagKeys] = body.TagsToAdd[key as TagKeys].map(id => Number(id))
+    }
+    body.FieldsRule = FieldsRule
 
+    console.log("На отправку")
     console.log(body)
 
     if (firstRules) {
@@ -188,10 +216,12 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
         isSettingsAvailable: true,
         component: (
           <Pipelines
+            users={arrayOfUsers}
+            pipelines={arrayOfPipelines}
             handlePrevStep={handlePrevStep}
             handleNextStep={handleNextStep}
-            selectedPipelinePerformer={selectedDealUser}
+            selectedDealUser={selectedDealUser}
-            setSelectedPipelineUser={setSelectedDealPerformer}
+            setSelectedDealPerformer={setSelectedDealPerformer}
             selectedPipeline={selectedPipeline}
             setSelectedPipeline={setSelectedPipeline}
           />
@@ -202,13 +232,16 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
         isSettingsAvailable: true,
         component: (
           <PipelineSteps
+            users={arrayOfUsers}
+            selectedDealUser={selectedDealUser}
+            selectedStep={selectedPipelineStep}
+
+            steps={arrayOfPipelinesSteps}
+            setSelectedDealPerformer={setSelectedDealPerformer}
+            setSelectedStep={setSelectedPipelineStep}
+
             handlePrevStep={handlePrevStep}
             handleNextStep={handleNextStep}
-            selectedStepsPerformer={selectedDealUser}
-            setSelectedStepsPerformer={setSelectedDealPerformer}
-            selectedStep={selectedPipelineStep}
-            setSelectedStep={setSelectedPipelineStep}
-            pipelineId={selectedPipeline}
           />
         ),
       },
@@ -219,6 +252,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
           <DealPerformers
             handlePrevStep={handlePrevStep}
             handleNextStep={handleNextStep}
+            users={arrayOfUsers}
             selectedDealUser={selectedDealUser}
             setSelectedDealPerformer={setSelectedDealPerformer}
           />
@@ -231,6 +265,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
           <AmoTags
             tagsItems={arrayOfTags}
             selectedTags={selectedTags}
+            openDelete={setOpenDelete}
             handleScroll={() => { }}
             handleAddTag={handleAddTagQuestion}
             handlePrevStep={handlePrevStep}
@@ -245,6 +280,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
           <AmoQuestions
             questionsItems={minifiedQuestions}
             selectedQuestions={selectedQuestions}
+            openDelete={setOpenDelete}
             handleAddQuestion={handleAddTagQuestion}
             handlePrevStep={handlePrevStep}
             handleNextStep={handleSave}
@@ -257,6 +293,16 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
       arrayOfPipelinesSteps,
       arrayOfUsers,
       arrayOfTags,
+      selectedPipeline,
+      selectedPipelineStep,
+      selectedDealUser,
+      selectedQuestions,
+      selectedTags,
+      arrayOfPipelines,
+      arrayOfPipelinesSteps,
+      arrayOfUsers,
+      minifiedQuestions,
+      arrayOfTags,
     ],
   );
 
@@ -326,6 +372,15 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
           setStep={setStep}
           startRemoveAccount={() => setIsTryRemoveAccount(true)}
         />
+        {openDelete !== null ?
+          (
+            <AmoDeleteTagQuestion
+              close={() => setOpenDelete(null)}
+              deleteItem={handleDeleteTagQuestion}
+            />
+          )
+          :
+          (<>
             {isTryRemoveAccount && (
               <AmoRemoveAccount
                 stopThisPage={() => setIsTryRemoveAccount(false)}
@@ -337,9 +392,9 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
                   stepTitles={stepTitles}
                   setIsSettingsBlock={setIsSettingsBlock}
                   setStep={setStep}
-              selectedDealUser={selectedDealUser}
+                  selectedDealUser={arrayOfUsers.find(u => u.id === selectedDealUser)?.title || "не указан"}
-              selectedFunnel={selectedPipeline}
+                  selectedFunnel={arrayOfPipelines.find(p => p.id === selectedPipeline)?.title || "нет данных"}
-              selectedStage={selectedPipelineStep}
+                  selectedStage={arrayOfPipelinesSteps.find(s => s.id === selectedPipelineStep)?.title || "нет данных"}
                   selectedQuestions={selectedQuestions}
                   selectedTags={selectedTags}
                 />
@@ -348,6 +403,8 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
             {!isSettingsBlock && !isTryRemoveAccount && (
               <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
             )}
+          </>)
+        }
       </Box>
     </Dialog>
   );

src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx

@@ -5,17 +5,18 @@ import {
 import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
 import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
 import { Box } from "@mui/material";
-import { QuestionKeys, SelectedQuestions, TagKeys } from "../types";
+import { QuestionKeys, SelectedQuestions, TagKeys, TagQuestionHC } from "../types";
 
-type Items = {
+type MinifiedData = {
   id: string;
   title: string;
   subTitle?: string;
 };
 type Props = {
-  questionsItems: Items[] | [];
+  questionsItems: MinifiedData[] | [];
   selectedQuestions: SelectedQuestions;
   handleAddQuestion: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
+  openDelete: (data: TagQuestionHC) => void;
   handlePrevStep: () => void;
   handleNextStep: () => void;
 };
@@ -26,6 +27,7 @@ export const AmoQuestions: FC<Props> = ({
   handleAddQuestion,
   handlePrevStep,
   handleNextStep,
+  openDelete
 }) => {
   const [isSelection, setIsSelection] = useState<boolean>(false);
   const [activeScope, setActiveScope] = useState<QuestionKeys | null>(null);
@@ -33,8 +35,16 @@ export const AmoQuestions: FC<Props> = ({
 
   const handleAdd = () => {
     if (activeScope === null || selectedQuestion === null) return
+    setActiveScope(null)
     handleAddQuestion(activeScope, selectedQuestion, "question")
   }
+  const handleDelete = (id: string, scope:QuestionKeys) => {
+    openDelete({
+      id,
+      scope,
+      type: "question"
+    })
+  }
 
   return (
     <Box
@@ -49,6 +59,7 @@ export const AmoQuestions: FC<Props> = ({
         // Здесь выбираем элемент в табличку
         <ItemsSelectionView
           items={questionsItems}
+          selectedItemId={selectedQuestion}
           setSelectedItem={setSelectedQuestion}
           onSmallBtnClick={() => {
             setActiveScope(null);
@@ -63,11 +74,13 @@ export const AmoQuestions: FC<Props> = ({
       ) : (
         // Табличка
         <ItemDetailsView
+        items={questionsItems}
           setActiveScope={setActiveScope}
           selectedQuestions={selectedQuestions}
           setIsSelection={setIsSelection}
           handleLargeBtn={handleNextStep}
           handleSmallBtn={handlePrevStep}
+          deleteHC={handleDelete}
         />
       )}
     </Box>

src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx

@@ -1,12 +1,14 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, IconButton, Typography, useTheme } from "@mui/material";
 import { FC } from "react";
+import Trash from "@icons/trash";
 
 type AnswerItemProps = {
   fieldName: string;
   fieldValue: string;
+  deleteHC: () => void;
 };
 
-export const AnswerItem: FC<AnswerItemProps> = ({ fieldName, fieldValue }) => {
+export const AnswerItem: FC<AnswerItemProps> = ({ fieldName, fieldValue, deleteHC }) => {
   const theme = useTheme();
   return (
     <Box
@@ -14,6 +16,16 @@ export const AnswerItem: FC<AnswerItemProps> = ({ fieldName, fieldValue }) => {
         padding: "10px 20px",
         height: "140px",
         borderBottom: `1px solid ${theme.palette.background.default}`,
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        justifyContent: "space-between"
+      }}
+    >
+      <Box
+      sx={{
+        overflow: "hidden",
+        width: "100%"
       }}
       >
         <Typography
@@ -22,22 +34,36 @@ export const AnswerItem: FC<AnswerItemProps> = ({ fieldName, fieldValue }) => {
             fontWeight: 500,
             color: theme.palette.grey3.main,
             textOverflow: "ellipsis",
-          overflow: "hidden"
+            overflow: "hidden",
+            width: "100%",
+            whiteSpace: "nowrap",
           }}
         >
           {fieldName}
         </Typography>
+
         <Typography
           sx={{
             fontSize: "14px",
             fontWeight: 400,
             color: theme.palette.grey3.main,
             textOverflow: "ellipsis",
-          overflow: "hidden"
+            overflow: "hidden",
+            width: "100%",
+            whiteSpace: "nowrap",
           }}
         >
           {fieldValue}
         </Typography>
       </Box>
+      <IconButton
+        sx={{
+          m: "auto"
+        }}
+        onClick={deleteHC}
+      >
+        <Trash />
+      </IconButton>
+    </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/Item.tsx

@@ -1,15 +1,23 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, IconButton, Typography, useTheme } from "@mui/material";
 import { FC } from "react";
 import { IconBtnAdd } from "./IconBtnAdd/IconBtnAdd";
 import { AnswerItem } from "./AnswerItem/AnswerItem";
-import { TagKeys, TitleKeys, TQuestionEntity, TTags } from "../../AmoCRMModal";
+import { QuestionKeys, SelectedQuestions, TagKeys, SelectedTags, MinifiedData } from "../../types";
 
 type ItemProps = {
-  title: TitleKeys | TagKeys;
+  items: MinifiedData[];
+  title: QuestionKeys | TagKeys;
   onAddBtnClick: () => void;
-  data: TQuestionEntity | TTags;
+  data: SelectedTags | SelectedQuestions;
+  deleteHC: (id: string, scope: QuestionKeys | TagKeys) => void;
 };
-export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data, tagsNamesList }) => {
+export const Item: FC<ItemProps> = ({
+  items,
+  title,
+  onAddBtnClick,
+  data,
+  deleteHC
+}) => {
   const theme = useTheme();
 
   const titleDictionary = {
@@ -20,7 +28,7 @@ export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data, tagsNamesList
   };
 
   const translatedTitle = titleDictionary[title];
-  const selectedOptions = data[title];
+  const selectedOptions = data[title]
   return (
     <Box
       sx={{
@@ -47,11 +55,12 @@ export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data, tagsNamesList
         </Typography>
       </Box>
       {selectedOptions &&
-        selectedOptions.map((text, index) => (
+        selectedOptions.map((id, index) => (
           <AnswerItem
-            key={text + index}
+            key={id + index}
             fieldValue={"Значение поля"}
-            fieldName={tagsNamesList?.[title][index] || text}
+            fieldName={items.find(e => e.id === id)?.title || id}
+            deleteHC={() => deleteHC(selectedOptions[index], title)}
           />
         ))}
 

src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx

@@ -2,24 +2,28 @@ import { Box, useTheme } from "@mui/material";
 import { Item } from "../Item/Item";
 import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
 import { FC } from "react";
-import { QuestionKeys, SelectedQuestions } from "../../types";
+import { MinifiedData, QuestionKeys, SelectedQuestions } from "../../types";
 
 type TitleKeys = "Contact" | "Company" | "Lead" | "Customer";
 
 type ItemDetailsViewProps = {
+  items: MinifiedData[];
   setIsSelection: (value: boolean) => void;
   handleSmallBtn: () => void;
   handleLargeBtn: () => void;
   selectedQuestions: SelectedQuestions;
   setActiveScope: (value: QuestionKeys | null) => void;
+  deleteHC: (id: string, scope:QuestionKeys) => void;
 };
 
 export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
+  items,
   handleSmallBtn,
   handleLargeBtn,
   selectedQuestions,
   setIsSelection,
   setActiveScope,
+  deleteHC,
 }) => {
   const theme = useTheme();
 
@@ -52,12 +56,14 @@ export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
           Object.keys(selectedQuestions).map((item) => (
             <Item
               key={item}
-              title={item}
+              title={item as QuestionKeys}
               onAddBtnClick={() => {
                 setIsSelection(true);
                 setActiveScope(item as QuestionKeys);
               }}
+              items={items}
               data={selectedQuestions}
+              deleteHC={deleteHC}
             />
           ))}
       </Box>

src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx

@@ -2,19 +2,21 @@ import { Box } from "@mui/material";
 import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/CustomRadioGroup";
 import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
 import { FC } from "react";
+import { TagKeys } from "../../types";
 
-type Items = {
+type MinifiedData = {
   id: string;
   title: string;
   subTitle?: string;
 };
 type ItemsSelectionViewProps = {
-  items: Items[] | [];
+  items: MinifiedData[] | [];
   selectedItemId?: string | null;
   setSelectedItem: (value: string | null) => void;
   handleScroll?: () => void;
   onLargeBtnClick: () => void;
   onSmallBtnClick: () => void;
+  activeScope: TagKeys;
 };
 
 export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
@@ -24,6 +26,7 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
   handleScroll,
   onLargeBtnClick,
   onSmallBtnClick,
+  activeScope,
 }) => {
   return (
     <Box
@@ -48,6 +51,7 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
           selectedItemId={selectedItemId}
           setSelectedItem={setSelectedItem}
           handleScroll={handleScroll}
+          activeScope={activeScope}
         />
       </Box>
       <Box

src/pages/IntegrationsPage/IntegrationsModal/AmoRemoveAccount/AmoDeleteTagQuestion.tsx

@@ -0,0 +1,49 @@
+import { FC } from "react"
+import { Button, Typography, useTheme, Box } from "@mui/material"
+
+interface Props {
+    deleteItem: () => void;
+    close: () => void;
+}
+
+export const AmoDeleteTagQuestion: FC<Props> = ({
+    close,
+    deleteItem,
+}) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+        sx={{
+            mt: "30px"
+        }}
+        >
+            <Typography textAlign="center">
+                Вы хотите удалить элемент?
+            </Typography>
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-evenly",
+                    flexWrap: "wrap",
+                    margin: "30px auto",
+                }}
+            >
+                <Button
+                    variant="contained"
+                    sx={{
+                        width: "150px",
+                    }}
+                    onClick={close}
+                >отмена</Button>
+                <Button
+                    variant="contained"
+                    sx={{
+                        width: "150px",
+                    }}
+                    onClick={deleteItem}
+                >удалить</Button>
+            </Box>
+        </Box >
+    )
+}

src/pages/IntegrationsPage/IntegrationsModal/AmoTags/AmoTags.tsx

@@ -5,17 +5,14 @@ import {
 import { Box } from "@mui/material";
 import { ItemsSelectionView } from "../AmoQuestions/ItemsSelectionView/ItemsSelectionView";
 import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
-import { QuestionKeys, SelectedTags, TagKeys } from "../types";
+import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types";
+
 
-type Items = {
-  id: string;
-  title: string;
-  subTitle?: string;
-};
 type Props = {
-  tagsItems: Items[] | [];
+  tagsItems: MinifiedData[] | [];
   selectedTags: SelectedTags;
   handleAddTag: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
+  openDelete: (data: TagQuestionHC) => void;
   handleScroll: () => void;
   handlePrevStep: () => void;
   handleNextStep: () => void;
@@ -25,6 +22,7 @@ export const AmoTags: FC<Props> = ({
   tagsItems,
   selectedTags,
   handleAddTag,
+  openDelete,
   handleScroll,
   handlePrevStep,
   handleNextStep,
@@ -35,8 +33,16 @@ export const AmoTags: FC<Props> = ({
 
   const handleAdd = () => {
     if (activeScope === null || selectedTag === null) return
+    setActiveScope(null)
     handleAddTag(activeScope, selectedTag, "tag")
   }
+  const handleDelete = (id: string, scope: TagKeys) => {
+    openDelete({
+      id,
+      scope,
+      type: "tag"
+    })
+  }
 
   return (
     <Box
@@ -51,8 +57,10 @@ export const AmoTags: FC<Props> = ({
         // Здесь выбираем элемент в табличку
         <ItemsSelectionView
           items={tagsItems}
+          selectedItemId={selectedTag}
           setSelectedItem={setSelectedTag}
           handleScroll={handleScroll}
+          activeScope={activeScope}
           onSmallBtnClick={() => {
             setActiveScope(null);
             setIsSelection(false);
@@ -66,11 +74,13 @@ export const AmoTags: FC<Props> = ({
       ) : (
         // Табличка
         <TagsDetailsView
+          items={tagsItems}
           setActiveScope={setActiveScope}
           selectedTags={selectedTags}
           setIsSelection={setIsSelection}
           handleNextStep={handleNextStep}
           handlePrevStep={handlePrevStep}
+          deleteHC={handleDelete}
         />
       )}
     </Box>

src/pages/IntegrationsPage/IntegrationsModal/AmoTags/TagsDetailsView/TagsDetailsView.tsx

@@ -2,22 +2,26 @@ import { Box, Typography, useTheme } from "@mui/material";
 import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
 import { FC } from "react";
 import { Item } from "../../AmoQuestions/Item/Item";
-import { SelectedTags, TagKeys } from "../../types";
+import { MinifiedData, SelectedTags, TagKeys } from "../../types";
 
 type TagsDetailsViewProps = {
+  items: MinifiedData[];
   setIsSelection: (value: boolean) => void;
   handlePrevStep: () => void;
   handleNextStep: () => void;
   setActiveScope: (value: TagKeys | null) => void;
   selectedTags: SelectedTags;
+  deleteHC: (id: string, scope:TagKeys) => void;
 };
 
 export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
+  items,
   setActiveScope,
   selectedTags,
   setIsSelection,
   handlePrevStep,
   handleNextStep,
+  deleteHC,
 }) => {
   const theme = useTheme();
 
@@ -72,12 +76,14 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
             Object.keys(selectedTags).map((item) => (
               <Item
                 key={item}
-                title={item}
+                items={items}
+                title={item as TagKeys}
                 onAddBtnClick={() => {
                   setIsSelection(true);
                   setActiveScope(item as TagKeys);
                 }}
                 data={selectedTags}
+                deleteHC={deleteHC}
               />
             ))}
         </Box>

src/pages/IntegrationsPage/IntegrationsModal/DealPerformers/DealPerformers.tsx

@@ -2,8 +2,10 @@ import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
+import { MinifiedData } from "../types";
 
 type Props = {
+  users: MinifiedData[];
   handlePrevStep: () => void;
   handleNextStep: () => void;
   selectedDealUser: string | null;
@@ -11,6 +13,7 @@ type Props = {
 };
 
 export const DealPerformers: FC<Props> = ({
+  users,
   handlePrevStep,
   handleNextStep,
   selectedDealUser,
@@ -32,10 +35,10 @@ export const DealPerformers: FC<Props> = ({
     >
       <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
         <CustomSelect
-          items={ }
+          items={users}
-          selectedItemId={ }
+          selectedItemId={selectedDealUser}
-          setSelectedItem={ }
+          setSelectedItem={setSelectedDealPerformer}
-          handleScroll={ }
+          handleScroll={() => {}}
         />
       </Box>
       <Box

src/pages/IntegrationsPage/IntegrationsModal/PipelineSteps/PipelineSteps.tsx

@@ -3,25 +3,30 @@ import { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
+import { MinifiedData } from "../types";
 
 type Props = {
+  users: MinifiedData[];
+  steps: MinifiedData[];
   handlePrevStep: () => void;
   handleNextStep: () => void;
-  selectedStepsPerformer: string | null;
+  selectedDealUser: string | null;
-  setSelectedStepsPerformer: (value: string | null) => void;
+  setSelectedDealPerformer: (value: string | null) => void;
   selectedStep: string | null;
   setSelectedStep: (value: string | null) => void;
-  pipelineId: string | null;
 };
 
 export const PipelineSteps: FC<Props> = ({
-  handlePrevStep,
+  users,
-  handleNextStep,
+  selectedDealUser,
-  selectedStepsPerformer,
+  setSelectedDealPerformer,
-  setSelectedStepsPerformer,
+
+  steps,
   selectedStep,
   setSelectedStep,
-  pipelineId,
+
+  handlePrevStep,
+  handleNextStep,
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
@@ -39,10 +44,10 @@ export const PipelineSteps: FC<Props> = ({
     >
       <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
         <CustomSelect
-          items={ }
+          items={users}
-          selectedItemId={ }
+          selectedItemId={selectedDealUser}
-          setSelectedItem={ }
+          setSelectedItem={setSelectedDealPerformer}
-          handleScroll={ }
+          handleScroll={() => {}}
         />
       </Box>
       <Box
@@ -54,10 +59,10 @@ export const PipelineSteps: FC<Props> = ({
         }}
       >
         <CustomRadioGroup
-          items={ }
+          items={steps}
-          selectedItemId={ }
+          selectedItemId={selectedStep}
-          setSelectedItem={ }
+          setSelectedItem={setSelectedStep}
-          handleScroll={ }
+          handleScroll={() => {}}
         />
       </Box>
       <Box

src/pages/IntegrationsPage/IntegrationsModal/Pipelines/Pipelines.tsx

@@ -3,24 +3,31 @@ import { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
 import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
+import { MinifiedData } from "../types";
 
 type Props = {
+  pipelines: MinifiedData[];
+  users: MinifiedData[];
   handlePrevStep: () => void;
   handleNextStep: () => void;
-  selectedPipelinePerformer: string | null;
+  selectedDealUser: string | null;
-  setSelectedPipelineUser: (value: string | null) => void;
+  setSelectedDealPerformer: (value: string | null) => void;
   selectedPipeline: string | null;
   setSelectedPipeline: (value: string | null) => void;
   
 };
 
 export const Pipelines: FC<Props> = ({
-  handlePrevStep,
+  pipelines,
-  handleNextStep,
-  selectedPipelinePerformer,
-  setSelectedPipelineUser,
   selectedPipeline,
   setSelectedPipeline,
+
+  users,
+  selectedDealUser,
+  setSelectedDealPerformer,
+
+  handlePrevStep,
+  handleNextStep,
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
@@ -37,10 +44,10 @@ export const Pipelines: FC<Props> = ({
     >
       <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
         <CustomSelect
-          items={ }
+          items={users}
-          selectedItemId={ }
+          selectedItemId={selectedDealUser}
-          setSelectedItem={ }
+          setSelectedItem={setSelectedDealPerformer}
-          handleScroll={ }
+          handleScroll={() => {}}
         />
       </Box>
       <Box
@@ -52,10 +59,10 @@ export const Pipelines: FC<Props> = ({
         }}
       >
         <CustomRadioGroup
-          items={ }
+          items={pipelines}
-          selectedItemId={ }
+          selectedItemId={selectedPipeline}
-          setSelectedItem={ }
+          setSelectedItem={setSelectedPipeline}
-          handleScroll={ }
+          handleScroll={() => {}}
         />
       </Box>
       <Box

src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx

@@ -64,7 +64,7 @@ export const SettingItem: FC<SettingItemProps> = ({
       );
     }
     if (step === 4) {
-      const isFilled = Object.values(selectedQuestions).some(
+      const isFilled = Object.values(selectedTags).some(
         (array) => array.length > 0,
       );
       const status = isFilled ? "Заполнено" : "Не заполнено";
@@ -96,7 +96,9 @@ export const SettingItem: FC<SettingItemProps> = ({
       );
     }
     if (step === 5) {
-      const isFilled = Object.values(selectedTags).some((array) => array.length > 0);
+      const isFilled = Object.values(selectedQuestions).some(
+        (array) => array.length > 0,
+      );
       const status = isFilled ? "Заполнено" : "Не заполнено";
 
       return (

src/pages/IntegrationsPage/IntegrationsModal/types.ts

@@ -1,11 +1,18 @@
 export type TagKeys = "Contact" | "Company" | "Lead" | "Customer";
-export type SelectedTags = Record<TagKeys, string[] | []>;
+export type SelectedTags = Record<TagKeys, string[]>;
 
 export type QuestionKeys = "Company" | "Lead" | "Customer";
-export type SelectedQuestions = Record<QuestionKeys, string[] | []>;
+export type SelectedQuestions = Record<QuestionKeys, string[]>;
 
-export type minifiedData = {
+export type MinifiedData = {
   id: string;
   title: string;
   subTitle?: string;
+  entity?: TagKeys;
+};
+
+export type TagQuestionHC = {
+  scope: QuestionKeys | TagKeys,
+  id: string,
+  type: "question" | "tag"
 };

src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts

@@ -1,11 +1,11 @@
-import { FC, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { enqueueSnackbar } from "notistack";
 import type {
     TagKeys,
     SelectedTags,
     QuestionKeys,
     SelectedQuestions,
-    minifiedData,
+    MinifiedData,
 } from "./types";
 import {
     AccountResponse,
@@ -15,9 +15,10 @@ import {
     getTags,
     getUsers,
     getAccount,
+    FieldsRule,
 } from "@/api/integration";
 
-const SIZE = 25;
+const SIZE = 75;
 
 interface Props {
     isModalOpen: boolean;
@@ -34,16 +35,16 @@ export const useAmoIntegration = ({
     const [firstRules, setFirstRules] = useState<boolean>(false);
     const [accountInfo, setAccountInfo] = useState<AccountResponse | null>(null);
 
-    const [arrayOfPipelines, setArrayOfPipelines] = useState<minifiedData[]>([]);
+    const [arrayOfPipelines, setArrayOfPipelines] = useState<MinifiedData[]>([]);
-    const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState<minifiedData[]>([]);
+    const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState<MinifiedData[]>([]);
-    const [arrayOfUsers, setArrayOfUsers] = useState<minifiedData[]>([]);
+    const [arrayOfUsers, setArrayOfUsers] = useState<MinifiedData[]>([]);
-    const [arrayOfTags, setArrayOfTags] = useState<minifiedData[]>([]);
+    const [arrayOfTags, setArrayOfTags] = useState<MinifiedData[]>([]);
 
     const [selectedPipeline, setSelectedPipeline] = useState<string | null>(null);
     const [selectedPipelineStep, setSelectedPipelineStep] = useState<string | null>(null);
     const [selectedDealUser, setSelectedDealPerformer] = useState<string | null>(null);
 
-    const [questionEntityBackend, setQuestionEntityBackend] = useState<Record<Partial<TagKeys>, number> | {}>({});
+    const [questionsBackend, setQuestionsBackend] = useState<FieldsRule>({} as FieldsRule);
     const [selectedTags, setSelectedTags] = useState<SelectedTags>({
         Lead: [],
         Contact: [],
@@ -88,7 +89,7 @@ export const useAmoIntegration = ({
                     if (Boolean(settingsResponse.FieldsRule) &&
                         Object.keys(settingsResponse?.FieldsRule).length > 0) {
                         const gottenQuestions = { ...selectedQuestions }
-                        setQuestionEntityBackend(settingsResponse.FieldsRule)
+                        setQuestionsBackend(settingsResponse.FieldsRule)
 
                         for (let key in settingsResponse.FieldsRule) {
                             if (settingsResponse.FieldsRule[key as QuestionKeys] !== null && Array.isArray(settingsResponse.FieldsRule[key as QuestionKeys])) {
@@ -129,7 +130,7 @@ export const useAmoIntegration = ({
             setSelectedPipeline(null);
             setSelectedPipelineStep(null);
             setSelectedDealPerformer(null);
-            setQuestionEntityBackend({});
+            setQuestionsBackend({} as FieldsRule);
             setSelectedTags({
                 Lead: [],
                 Contact: [],
@@ -154,7 +155,7 @@ export const useAmoIntegration = ({
             size: SIZE,
         }).then(([response]) => {
             if (response && response.items !== null) {
-                const minifiedPipelines: minifiedData[] = []
+                const minifiedPipelines: MinifiedData[] = []
 
                 response.items.forEach((step) => {
                     minifiedPipelines.push({
@@ -163,10 +164,12 @@ export const useAmoIntegration = ({
                     })
                 })
                 setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]);
+                setPageOfPipelinesSteps(1)
             }
         })
     }, [pageOfPipelines])
     useEffect(() => {
+        const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps
         if (selectedPipeline !== null)
             getSteps({
                 page: pageOfPipelinesSteps,
@@ -174,7 +177,7 @@ export const useAmoIntegration = ({
                 pipelineId: Number(selectedPipeline),
             }).then(([response]) => {
                 if (response && response.items !== null) {
-                    const minifiedSteps: minifiedData[] = []
+                    const minifiedSteps: MinifiedData[] = []
 
                     response.items.forEach((step) => {
                         minifiedSteps.push({
@@ -182,7 +185,7 @@ export const useAmoIntegration = ({
                             title: step.Name
                         })
                     })
-                    setArrayOfPipelinesSteps((prevItems) => [...prevItems, ...minifiedSteps]);
+                    setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]);
                 }
             });
     }, [selectedPipeline, pageOfPipelinesSteps])
@@ -192,11 +195,11 @@ export const useAmoIntegration = ({
             size: SIZE,
         }).then(([response]) => {
             if (response && response.items !== null) {
-                const minifiedUsers: minifiedData[] = []
+                const minifiedUsers: MinifiedData[] = []
 
                 response.items.forEach((step) => {
                     minifiedUsers.push({
-                        id: step.amoID.toString(),
+                        id: step.amoUserID.toString(),
                         title: step.name
                     })
                 })
@@ -210,12 +213,15 @@ export const useAmoIntegration = ({
             size: SIZE,
         }).then(([response]) => {
             if (response && response.items !== null) {
-                const minifiedTags: minifiedData[] = []
+                const minifiedTags: MinifiedData[] = []
 
                 response.items.forEach((step) => {
                     minifiedTags.push({
                         id: step.AmoID.toString(),
-                        title: step.Name
+                        title: step.Name,
+                        entity: step.Entity === "leads" ? "Lead" :
+                            step.Entity === "contacts" ? "Contact" :
+                                step.Entity === "companies" ? "Company" : "Customer"
                     })
                 })
                 setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]);
@@ -237,7 +243,7 @@ export const useAmoIntegration = ({
         setSelectedPipelineStep,
         selectedDealUser,
         setSelectedDealPerformer,
-        questionEntityBackend,
+        questionsBackend,
         selectedTags,
         setSelectedTags,
         selectedQuestions,