вывод вопросов и сохранение вопросов и тегов как id

src/components/CustomRadioGroup/CustomRadioGroup.tsx

@@ -15,12 +15,16 @@ import {
   Step,
   Tag,
 } from "@api/integration";
+import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal"
 
 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;
 };
 
 const SIZE = 25;
@@ -30,6 +34,9 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
   selectedValue,
   setSelectedValue,
   pipelineId,
+  items,
+  tags = [],
+  setTags,
 }) => {
   const theme = useTheme();
 
@@ -40,13 +47,15 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
   );
   const [page, setPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
-  const [tags, setTags] = useState<Tag[]>([]);
+
   const [steps, setSteps] = useState<Step[]>([]);
   const [pipelines, setPipelines] = useState<Pipeline[]>([]);
   const [hasMoreItems, setHasMoreItems] = useState(true);
   const boxRef = useRef(null);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log("применился хенделчейндж")
+    console.log((event.target as HTMLInputElement).value)
     setSelectedValue((event.target as HTMLInputElement).value);
     setCurrentValue((event.target as HTMLInputElement).value);
   };
@@ -61,9 +70,12 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
       setPage((prevPage) => prevPage + 1);
     }
   };
+  console.log(type)
+  console.log(items)
+  console.log(type === "typeQuestions" && items && items.length !== 0)
 
   useEffect(() => {
-    if (type === "typeTags" && hasMoreItems) {
+    if (type === "typeTags" && hasMoreItems && setTags !== undefined) {
       setIsLoading(true);
       const pagination: PaginationRequest = {
         page: page,
@@ -71,7 +83,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
       };
       getTags(pagination).then(([response]) => {
         if (response && response.items !== null) {
-          setTags((prevItems) => [...prevItems, ...response.items]);
+          setTags((prevItems:Tag[]) => [...prevItems, ...response.items]);
           if (response.items.length < SIZE) {
             setHasMoreItems(false);
           }
@@ -118,9 +130,8 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
     if (type === "typeTags" && tags && tags.length !== 0) {
       return tags.map((item) => (
         <FormControlLabel
-          key={item.ID}
+          key={item.AmoID}
           sx={{
-            color: "red",
             padding: "15px",
             borderBottom: `1px solid ${theme.palette.background.default}`,
             display: "flex",
@@ -128,11 +139,11 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
             borderRadius: "12px",
             margin: 0,
             backgroundColor:
-              currentValue === item.Name
+              currentValue === item.AmoID.toString()
                 ? theme.palette.background.default
                 : theme.palette.common.white,
           }}
-          value={item.Name}
+          value={item.AmoID.toString()}
           control={
             <Radio
               checkedIcon={
@@ -232,6 +243,46 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
         />
       ));
     }
+    if (type === "typeQuestions" && items && items.length !== 0) {
+      return items.map(({ backendId, title }) => (
+        <FormControlLabel
+          key={backendId}
+          sx={{
+            color: "black",
+            padding: "15px",
+            borderBottom: `1px solid ${theme.palette.background.default}`,
+            display: "flex",
+            justifyContent: "space-between",
+            borderRadius: "12px",
+            margin: 0,
+            backgroundColor:
+              currentValue === backendId
+                ? theme.palette.background.default
+                : theme.palette.common.white,
+                "&.MuiFormControlLabel-root > .MuiTypography-root": {
+                  width: "200px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                }
+          }}
+          value={backendId}
+          control={
+            <Radio
+              checkedIcon={
+                <CheckboxIcon
+                  checked
+                  isRounded
+                  color={theme.palette.brightPurple.main}
+                />
+              }
+              icon={<CheckboxIcon isRounded />}
+            />
+          }
+          label={title}
+          labelPlacement={"start"}
+        />
+      ));
+    }
     return (
       <Box
         sx={{

src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx

@@ -24,6 +24,10 @@ import { redirect } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 
 export type TitleKeys = "contacts" | "company" | "deal" | "buyers";
+export type TagQuestionObject = {
+  backendId: string;
+  title: string;
+};
 
 export type TQuestionEntity = Record<TitleKeys, string[] | []>;
 type IntegrationsModalProps = {
@@ -86,7 +90,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
         const [account, error] = await getAccount();
 
         if (error) {
-          enqueueSnackbar(error)
+          if (!error.includes("Not Found")) enqueueSnackbar(error)
           setAccountInfo(null);
         }
         if (account) {
@@ -97,7 +101,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
         const [settingsResponse, error] = await getIntegrationRules(quizID.toString());
 
         if (error) {
-          enqueueSnackbar(error)
+          if (!error.includes("Not Found")) enqueueSnackbar(error)
           setIntegrationRules(null);
         }
         if (settingsResponse) {
@@ -182,10 +186,10 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
         isSettingsAvailable: true,
         component: (
           <AmoStep6
-            tags={tags}
+          tagsNames={tags}
             handlePrevStep={handlePrevStep}
             handleNextStep={handleNextStep}
-            setTags={setTags}
+            setTagsNames={setTags}
           />
         ),
       },

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/AmoStep6.tsx

@@ -4,6 +4,7 @@ import {
   FC,
   SetStateAction,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from "react";
@@ -12,33 +13,34 @@ import { TagKeys, TTags } from "../AmoCRMModal";
 import Box from "@mui/material/Box";
 import { ItemsSelectionView } from "../IntegrationStep7/ItemsSelectionView/ItemsSelectionView";
 import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
+import { Tag } from "@api/integration";
 
 type Props = {
   handleNextStep: () => void;
   handlePrevStep: () => void;
-  tags: TTags;
+  tagsNames: TTags;
-  setTags: Dispatch<SetStateAction<TTags>>;
+  setTagsNames: Dispatch<SetStateAction<TTags>>;
 };
 
 export const AmoStep6: FC<Props> = ({
   handleNextStep,
   handlePrevStep,
-  tags,
+  tagsNames,
-  setTags,
+  setTagsNames
 }) => {
   const theme = useTheme();
   const [isSelection, setIsSelection] = useState<boolean>(false);
   const [activeItem, setActiveItem] = useState<string | null>(null);
   const [selectedValue, setSelectedValue] = useState<string | null>(null);
-
+  const [tags, setTags] = useState<Tag[]>([]);
   const handleAdd = useCallback(() => {
     if (!activeItem || !selectedValue) return;
 
-    setTags((prevState) => ({
+    setTagsNames((prevState) => ({
       ...prevState,
       [activeItem]: [...prevState[activeItem as TagKeys], selectedValue],
     }));
-  }, [activeItem, setTags, selectedValue]);
+  }, [activeItem, setTagsNames, selectedValue]);
 
   const items = useMemo(
     () => ["#тег с результатом 1", "#еще один тег с результатом 2", "#тег"],
@@ -56,7 +58,8 @@ export const AmoStep6: FC<Props> = ({
     >
       {isSelection ? (
         <ItemsSelectionView
-          items={items}
+          parentTags={tags}
+          setTags={setTags}
           selectedValue={selectedValue}
           setSelectedValue={setSelectedValue}
           type={"typeTags"}
@@ -75,7 +78,7 @@ export const AmoStep6: FC<Props> = ({
           setIsSelection={setIsSelection}
           handlePrevStep={handlePrevStep}
           handleNextStep={handleNextStep}
-          tags={tags}
+          tagsNames={tagsNames}
           setActiveItem={setActiveItem}
         />
       )}

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

@@ -8,14 +8,14 @@ type TagsDetailsViewProps = {
   setIsSelection: (value: boolean) => void;
   handlePrevStep: () => void;
   handleNextStep: () => void;
-  tags: TTags;
+  tagsNames: TTags;
   setActiveItem: (value: string | null) => void;
 };
 
 export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
   handlePrevStep,
   handleNextStep,
-  tags,
+  tagsNames,
   setActiveItem,
   setIsSelection,
 }) => {
@@ -68,8 +68,8 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
             justifyContent: "start",
           }}
         >
-          {tags &&
+          {tagsNames &&
-            Object.keys(tags).map((item) => (
+            Object.keys(tagsNames).map((item) => (
               <Item
                 key={item}
                 title={item as TagKeys}
@@ -77,7 +77,7 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
                   setIsSelection(true);
                   setActiveItem(item);
                 }}
-                data={tags}
+                data={tagsNames}
               />
             ))}
         </Box>

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/AmoStep7.tsx

@@ -9,9 +9,11 @@ import {
 } from "react";
 import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
 import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
-import { TitleKeys, TQuestionEntity } from "../AmoCRMModal";
+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";
 
 type Props = {
   handlePrevStep: () => void;
@@ -42,10 +44,33 @@ export const AmoStep7: FC<Props> = ({
     }));
   }, [activeItem, setQuestionEntity, selectedValue]);
 
-  const items = useMemo(
+  const items: TagQuestionObject[] = useMemo(
-    () => ["Город", "Имя", "Фамилия", "Отчество", "Контрагент"],
+    () => Object.values(questions)
+      .filter(({ type }) =>
+        type !== "result"
+        && type !== null)
+      .map(({ backendId, title }) => ({
+        backendId: backendId.toString(),
+        title
+      })),
     [],
   );
+  const translatedQuestionEntity = useMemo(() => {
+    const translated = {} as TQuestionEntity;
+
+    for (let key in questionEntity) {
+      // /* ... делать что-то с obj[key] ... */
+      translated[key] = questionEntity[key].map((id) => 
+      questions.find((q) => q.backendId === Number(id))?.title || id
+      )
+    }
+
+    console.log("questionEntity", questionEntity)
+    console.log("translated", translated)
+    return translated
+  },
+    [questionEntity],
+  )
 
   return (
     <Box
@@ -59,6 +84,7 @@ export const AmoStep7: FC<Props> = ({
       {isSelection ? (
         <ItemsSelectionView
           items={items}
+          type="typeQuestions"
           selectedValue={selectedValue}
           setSelectedValue={setSelectedValue}
           onSmallBtnClick={() => {
@@ -70,14 +96,13 @@ export const AmoStep7: FC<Props> = ({
             setActiveItem(null);
             setIsSelection(false);
           }}
-          questions={questions}
         />
       ) : (
         <ItemDetailsView
           setIsSelection={setIsSelection}
           handleLargeBtn={handleNextStep}
           handleSmallBtn={handlePrevStep}
-          questionEntity={questionEntity}
+          questionEntity={translatedQuestionEntity}
           setActiveItem={setActiveItem}
         />
       )}

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

@@ -12,6 +12,8 @@ type ItemProps = {
 export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data }) => {
   const theme = useTheme();
 
+  console.log("title")
+  console.log(data)
   const titleDictionary = {
     contact: "Контакт",
     company: "Компания",

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

@@ -3,14 +3,18 @@ import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/Cus
 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 ItemsSelectionViewProps = {
   type?: string;
-  items: string[];
+  items?: TagQuestionObject[];
   selectedValue: string | null;
   setSelectedValue: (value: string | null) => void;
   onLargeBtnClick: () => void;
   onSmallBtnClick: () => void;
+  setTags: (setValueFunc: (value: Tag[]) => Tag[]) => void;
+  parentTags: Tag[]
 };
 
 export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
@@ -20,7 +24,11 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
   onLargeBtnClick,
   onSmallBtnClick,
   type,
+  parentTags,
+  setTags
 }) => {
+  console.log("items тегов")
+  console.log(items)
   return (
     <Box
       sx={{
@@ -42,6 +50,8 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
         <CustomRadioGroup
           type={type}
           items={items}
+          tags={parentTags}
+          setTags={setTags}
           selectedValue={selectedValue}
           setSelectedValue={setSelectedValue}
         />