fix визуал инфо о акке, выставление заголовков на шаги

src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx

@@ -6,14 +6,14 @@ import AccountSetting from "@icons/AccountSetting";
 
 type AmoAccountInfoProps = {
   handleNextStep: () => void;
-  accountInfo: AccountResponse;
+  accountInfo: AccountResponse | null;
 };
 
 export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
-  const infoItem = (title: string, value: string | number) => (
+  const infoItem = (title: string, value: string | number | undefined) => (
     <Box
       sx={{
         display: "flex",
@@ -38,7 +38,7 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
     </Box>
   );
 
-  const infoItemLink = (title: string, link: string) => (
+  const infoItemLink = (title: string, link: string | undefined) => (
     <Box
       sx={{
         display: "flex",
@@ -46,58 +46,59 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
         mt: "20px",
       }}
     >
-      <Box sx={{ width: isMobile ? "100%" : "45%" }}>
+      <Box sx={{ width: "100%" }}>
         <Typography sx={{
           color: theme.palette.grey2.main,
           fontSize: "16px",
           lineHeight: "18.96px",
         }}>{title}:</Typography>
       </Box>
-      <Box sx={{ width: isMobile ? "100%" : "45%" }}>
+      <Box sx={{ width: "100%" }}>
-        <a
+        {
-          target="_blank"
+          link ?
-          href={link}
+            <a
-          style={{
+              target="_blank"
-            wordBreak: "break-word",
+              href={link}
-            fontSize: "18px",
+              style={{
-            lineHeight: "21.33px",
+                wordBreak: "break-word",
-            color: "#7E2AEA"
+                fontSize: "18px",
-          }}
+                lineHeight: "21.33px",
-        >
+                color: "#7E2AEA"
-          {link}
+              }}
-        </a>
+            >
+              {link}
+            </a>
+            :
+            <Typography>не указана</Typography>
+        }
       </Box>
     </Box >
   );
 
   return (
     <Box
-      className="инфокомпонент"
       sx={{
         display: "inline-flex",
         flexDirection: "column",
-        // flexDirection: "column",
+        justifyContent: "space-between",
-        // alignItems: "center",
         height: "100%",
+        overflow: "auto",
         flexGrow: 1,
       }}
     >
       <Box
         sx={{
-        display: "flex",
+          display: "flex",
-        justifyContent: "space-between",
+          justifyContent: "space-between",
 
-          width: "100%"
+          flexDirection: isMobile ? "column" : "row",
+
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
         }}
       >
-        <Box
+        <Box>
-          sx={{
-            // marginTop: isMobile ? "20px" : "60px",
-            // display: "flex",
-            // flexDirection: "column",
-            // gap: isMobile ? "10px" : "20px",
-          }}
-        >
           <Typography
             sx={{
               fontSize: "18px",
@@ -109,35 +110,37 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
           </Typography>
           <Typography
             sx={{
-              color: "#4D4D4D",
-              fontSize: "16px",
               m: "5px 0 19px 0",
               lineHeight: "16.59px",
+              color: theme.palette.grey2.main,
+              fontSize: "14px",
             }}
           >
             1 шаг
           </Typography>
-          {infoItem("Amo ID", accountInfo.amoID)}
+          {infoItem("Amo ID", accountInfo?.amoID)}
-          {infoItem("Имя аккаунта", accountInfo.name)}
+          {infoItem("Имя аккаунта", accountInfo?.name)}
-          {/* {infoItem("Email аккаунта", accountInfo.email)} */}
+          {infoItemLink("ЛК в amo", `https://${accountInfo?.subdomain}.amocrm.ru/dashboard/`)}
-          {infoItemLink("ЛК в amo", `https://${accountInfo.subdomain}.amocrm.ru/dashboard/`)}
+          {infoItemLink("Профиль пользователя в amo", `https://${accountInfo?.subdomain}.amocrm.ru/settings/users/`)}
-          {infoItemLink("Профиль пользователя в amo", `https://${accountInfo.subdomain}.amocrm.ru/settings/users/`)}
+          {infoItem("Страна пользователя", accountInfo?.country)}
-          {infoItem("Страна пользователя", accountInfo.country)}
         </Box>
+        <Box>
+
         <Button
           variant="outlined"
           startIcon={
             <AccountSetting
-                color={theme.palette.brightPurple.main}
+              color={theme.palette.brightPurple.main}
-                height={"20px"}
+              height={"20px"}
-                width={"20px"}
+              width={"20px"}
-              />
+            />
           }
           onClick={() => { }}
           sx={{
             height: "44px",
-            padding: isMobile ? "10px" : "10px 20px",
+            padding: "0",
-            width: "fit-content",
+            mt: isMobile ? "30px" : "0",
+            width: "205px",
             backgroundColor: "transparent",
             color: theme.palette.brightPurple.main,
             "& .MuiButton-startIcon": {
@@ -166,8 +169,9 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
             },
           }}
         >
-          {isMobile ? "" : "Сменить аккаунт"}
+          Сменить аккаунт
         </Button>
+        </Box>
       </Box>
       <StepButtonsBlock
         isSmallBtnDisabled={true}

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

@@ -3,6 +3,7 @@ import { FC } from "react";
 import { StepButtonsBlock } from "./StepButtonsBlock";
 import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 import { MinifiedData } from "./types";
+import { ModalTitle } from "./ModalTitle";
 
 type Props = {
   users: MinifiedData[];
@@ -10,6 +11,13 @@ type Props = {
   handleNextStep: () => void;
   selectedDealUser: string | null;
   setSelectedDealPerformer: (value: string | null) => void;
+
+  titleProps: {
+    step: number;
+    title: string;
+    desc: string;
+    toSettings: () => void;
+  }
 };
 
 export const DealPerformers: FC<Props> = ({
@@ -18,12 +26,17 @@ export const DealPerformers: FC<Props> = ({
   handleNextStep,
   selectedDealUser,
   setSelectedDealPerformer,
+  titleProps,
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   return (
+    <>
+    <ModalTitle
+    {...titleProps}
+    />
     <Box
       sx={{
         display: "flex",
@@ -53,5 +66,6 @@ export const DealPerformers: FC<Props> = ({
         />
       </Box>
     </Box>
+    </>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx

@@ -6,38 +6,20 @@ import AccountSetting from "@icons/AccountSetting";
 
 type AmoModalTitleProps = {
   step: number;
-  steps: { title: string; isSettingsAvailable: boolean }[];
+  title: string;
-  isSettingsBlock?: boolean;
+  desc: string;
-  setIsSettingsBlock: (value: boolean) => void;
+  toSettings: () => void;
-  setStep: (value: number) => void;
-  startRemoveAccount: () => void;
 };
 
 export const ModalTitle: FC<AmoModalTitleProps> = ({
   step,
-  steps,
+  title,
-  setIsSettingsBlock,
+  desc,
-  isSettingsBlock,
+  toSettings,
-  setStep,
-  startRemoveAccount,
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
-  const handleClick = useCallback(async () => {
-    if (isSettingsBlock) {
-      startRemoveAccount();
-      setIsSettingsBlock(false);
-      setStep(0);
-      return;
-    }
-    setIsSettingsBlock(true);
-  }, [isSettingsBlock, setIsSettingsBlock, setStep]);
-
-  const btnText = useMemo(() => {
-    return isSettingsBlock ? "Сменить аккаунт" : "Мои настройки";
-  }, [isSettingsBlock]);
-
   return (
     <Box sx={{ display: "flex", justifyContent: "space-between" }}>
       <Box>
@@ -49,10 +31,10 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
             lineHeight: "1",
           }}
         >
-          {isSettingsBlock ? "Мои настройки" : steps[step].title}
+          {title}
         </Typography>
         {
-          steps[step].desc &&
+          desc &&
           <Typography
             sx={{
               color: "#4D4D4D",
@@ -60,10 +42,9 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
               m: "5px 0 15px 0"
             }}
           >
-            {steps[step].desc}
+            {desc}
           </Typography>
         }
-        {isSettingsBlock || (
           <Typography
             sx={{
               color: theme.palette.grey2.main,
@@ -73,29 +54,20 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
               lineHeight: "1",
             }}
           >
-            Шаг {step + 1}
+            {step} шаг
           </Typography>
-        )}
       </Box>
-      {steps[step].isSettingsAvailable && (
+      
         <Button
           variant="outlined"
           startIcon={
-            isSettingsBlock ? (
+            <GearIcon
-              <AccountSetting
-                color={theme.palette.brightPurple.main}
-                height={"20px"}
-                width={"20px"}
-              />
-            ) : (
-              <GearIcon
                 color={theme.palette.brightPurple.main}
                 height={"24px"}
                 width={"24px"}
               />
-            )
           }
-          onClick={handleClick}
+          onClick={toSettings}
           sx={{
             height: "44px",
             padding: isMobile ? "10px" : "10px 20px",
@@ -128,9 +100,8 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
             },
           }}
         >
-          {isMobile ? "" : btnText}
+          {isMobile ? "" : "Мои настройки"}
         </Button>
-      )}
     </Box>
   );
 };

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

@@ -4,6 +4,7 @@ import { StepButtonsBlock } from "./StepButtonsBlock";
 import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
 import { MinifiedData } from "./types";
+import { ModalTitle } from "./ModalTitle";
 
 type Props = {
   users: MinifiedData[];
@@ -14,6 +15,13 @@ type Props = {
   setSelectedDealPerformer: (value: string | null) => void;
   selectedStep: string | null;
   setSelectedStep: (value: string | null) => void;
+
+  titleProps: {
+    step: number;
+    title: string;
+    desc: string;
+    toSettings: () => void;
+  }
 };
 
 export const PipelineSteps: FC<Props> = ({
@@ -27,12 +35,18 @@ export const PipelineSteps: FC<Props> = ({
 
   handlePrevStep,
   handleNextStep,
+
+  titleProps
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   return (
+    <>
+    <ModalTitle
+    {...titleProps}
+    />
     <Box
       sx={{
         display: "flex",
@@ -77,5 +91,6 @@ export const PipelineSteps: FC<Props> = ({
         />
       </Box>
     </Box>
+    </>
   );
 };

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

@@ -4,6 +4,7 @@ import { StepButtonsBlock } from "./StepButtonsBlock";
 import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
 import { MinifiedData } from "./types";
+import { ModalTitle } from "./ModalTitle";
 
 type Props = {
   pipelines: MinifiedData[];
@@ -14,12 +15,20 @@ type Props = {
   setSelectedDealPerformer: (value: string | null) => void;
   selectedPipeline: string | null;
   setSelectedPipeline: (value: string | null) => void;
+
+  titleProps: {
+    step: number;
+    title: string;
+    desc: string;
+    toSettings: () => void;
+  }
 };
 
 export const Pipelines: FC<Props> = ({
   pipelines,
   selectedPipeline,
   setSelectedPipeline,
+  titleProps,
 
   users,
   selectedDealUser,
@@ -32,49 +41,54 @@ export const Pipelines: FC<Props> = ({
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   return (
-    <Box
+    <>
-      sx={{
+      <ModalTitle
-        display: "flex",
+      {...titleProps}
-        flexDirection: "column",
+      />
-        alignItems: "center",
-        height: "100%",
-        flexGrow: 1,
-      }}
-    >
-      <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
-        <CustomSelect
-          items={users}
-          selectedItemId={selectedDealUser}
-          setSelectedItem={setSelectedDealPerformer}
-          handleScroll={() => {}}
-        />
-      </Box>
       <Box
         sx={{
-          marginTop: "20px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          height: "100%",
           flexGrow: 1,
-          width: "100%",
-          height: "346px",
         }}
       >
-        <CustomRadioGroup
+        <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
-          items={pipelines}
+          <CustomSelect
-          selectedItemId={selectedPipeline}
+            items={users}
-          setSelectedItem={setSelectedPipeline}
+            selectedItemId={selectedDealUser}
-          handleScroll={() => {}}
+            setSelectedItem={setSelectedDealPerformer}
-        />
+            handleScroll={() => { }}
+          />
+        </Box>
+        <Box
+          sx={{
+            marginTop: "20px",
+            flexGrow: 1,
+            width: "100%",
+            height: "346px",
+          }}
+        >
+          <CustomRadioGroup
+            items={pipelines}
+            selectedItemId={selectedPipeline}
+            setSelectedItem={setSelectedPipeline}
+            handleScroll={() => { }}
+          />
+        </Box>
+        <Box
+          sx={{
+            marginTop: "20px",
+            alignSelf: "end",
+          }}
+        >
+          <StepButtonsBlock
+            onLargeBtnClick={handleNextStep}
+            onSmallBtnClick={handlePrevStep}
+          />
+        </Box>
       </Box>
-      <Box
+    </>
-        sx={{
-          marginTop: "20px",
-          alignSelf: "end",
-        }}
-      >
-        <StepButtonsBlock
-          onLargeBtnClick={handleNextStep}
-          onSmallBtnClick={handlePrevStep}
-        />
-      </Box>
-    </Box>
   );
 };

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

@@ -6,6 +6,7 @@ import { MinifiedData, QuestionKeys, SelectedQuestions, TagKeys, TagQuestionHC }
 import { EntitiesQuestions } from "./EntitiesQuestions";
 import { diffArr } from "..";
 import { DataConstrictor } from "../Components/DataConstrictor";
+import { ModalTitle } from "../ModalTitle";
 
 type Props = {
   selectedCurrentFields: MinifiedData[] | [];
@@ -18,6 +19,11 @@ type Props = {
   handleNextStep: () => void;
   FieldsAllowedFC: MinifiedData[]
   setSelectedCurrentFields: (value: MinifiedData[]) => void;
+  titleProps: {
+    step: number;
+    title: string;
+    toSettings: () => void;
+  }
 };
 export type QuestionPair = {
   question: string,
@@ -40,7 +46,8 @@ export const AmoQuestions: FC<Props> = ({
   handleNextStep,
   openDelete,
   FieldsAllowedFC,
-  setSelectedCurrentFields
+  setSelectedCurrentFields,
+  titleProps,
 }) => {
   const [isSelection, setIsSelection] = useState<boolean>(false);
   const [activeScope, setActiveScope] = useState<QuestionKeys | null>(null);
@@ -109,17 +116,6 @@ export const AmoQuestions: FC<Props> = ({
   const [sortedFieldsItems, setSortedFieldsItems] = useState<MinifiedData[]>(fieldsItems);
   const [sortedquestionsItems, setSortedquestionsItems] = useState<MinifiedData[]>(questionsItems);
 
-  console.log("допущенные ФОРМА КОНТАКТОВ")
-  console.log(FieldsAllowedFC)
-  console.log("фильтрованные")
-  console.log(sortedFieldsAllowedFC)
-  console.log("")
-  console.log("допущенные вапросы")
-  console.log(questionsItems)
-  console.log("фильтрованные")
-  console.log(sortedquestionsItems)
-
-
   const startConstrictor = (substr: string) => {
     const a = FieldsAllowedFC.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
     const b = fieldsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
@@ -135,6 +131,11 @@ export const AmoQuestions: FC<Props> = ({
     setSortedquestionsItems(questionsItems);
   }, [activeScope])
   return (
+    <>
+    <ModalTitle
+      {...titleProps}
+      desc={isSelection && activeScope !== null ? "На этом этапе вы можете соотнести ваше ранее созданное поле с вопросом из квиза или добавить новое поле" : "На этом этапе вы можете добавить в поля соответствующие вопросы"}
+    />
     <Box
       sx={{
         display: "flex",
@@ -144,14 +145,12 @@ export const AmoQuestions: FC<Props> = ({
       }}
     >
       {isSelection && activeScope !== null ? (
+        // Здесь выбираем элемент в табличку
         <>
           <DataConstrictor
             isError={false}
             constrictor={startConstrictor}
           />
-
-          {/* табличка */}
-
           <EntitiesQuestions
             FieldsAllowedFC={sortedFieldsAllowedFC}
             fieldsItems={sortedFieldsItems}
@@ -175,21 +174,6 @@ export const AmoQuestions: FC<Props> = ({
             isCurrentFields={isCurrentFields}
           />
         </>
-        // Здесь выбираем элемент в табличку
-        // <ItemsSelectionView
-        //   items={questionsItems}
-        //   selectedItemId={selectedQuestion}
-        //   setSelectedItem={setSelectedQuestion}
-        //   onSmallBtnClick={() => {
-        //     setActiveScope(null);
-        //     setIsSelection(false);
-        //   }}
-        //   onLargeBtnClick={() => {
-        //     handleAdd();
-        //     setActiveScope(null);
-        //     setIsSelection(false);
-        //   }}
-        // />
       ) : (
         // Табличка
         <ItemDetailsView
@@ -208,5 +192,6 @@ export const AmoQuestions: FC<Props> = ({
         />
       )}
     </Box>
+    </>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx

@@ -30,9 +30,10 @@ export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
     <Box
       sx={{
         display: "flex",
+        justifyContent: "end",
+        alignItems: "end",
         gap: "10px",
-        marginTop: "auto",
+        mt: "20px"
-        marginLeft: "auto",
       }}
     >
       {isSmallBtnMissing || (

src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx

@@ -46,19 +46,19 @@ interface Props {
   selectedCurrentFields: MinifiedData[];
   selectedPipelineStep: string | null;
   selectedDealUser: string | null;
-  setSelectedPipeline:any;
+  setSelectedPipeline: any;
-  setSelectedPipelineStep:any;
+  setSelectedPipelineStep: any;
-  setSelectedDealPerformer:any;
+  setSelectedDealPerformer: any;
-  selectedTags:any;
+  selectedTags: any;
-  setSelectedTags:any;
+  setSelectedTags: any;
-  selectedQuestions:any;
+  selectedQuestions: any;
-  setSelectedQuestions:any;
+  setSelectedQuestions: any;
-  setPageOfPipelines:any;
+  setPageOfPipelines: any;
-  setPageOfPipelinesSteps:any;
+  setPageOfPipelinesSteps: any;
-  setPageOfUsers:any;
+  setPageOfUsers: any;
-  setPageOfTags:any;
+  setPageOfTags: any;
-  setSelectedCurrentFields:any;
+  setSelectedCurrentFields: any;
-  handleCloseModal:any;
+  handleCloseModal: any;
 }
 
 export const SwitchPages = ({
@@ -88,7 +88,6 @@ export const SwitchPages = ({
   setPageOfTags,
   setSelectedCurrentFields,
   handleCloseModal,
-
 }: Props) => {
   const [step, setStep] = useState(0)
   const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("accountInfo")
@@ -122,29 +121,29 @@ export const SwitchPages = ({
     },
     [quiz]
   );
-  const handleAddTagQuestion =  (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => {
+  const handleAddTagQuestion = (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => {
-      if (!scope || !id) return;
+    if (!scope || !id) return;
 
-      if (type === "tag") {
+    if (type === "tag") {
-        setSelectedTags((prevState) => ({
+      setSelectedTags((prevState) => ({
-          ...prevState,
+        ...prevState,
-          [scope]: [...prevState[scope as TagKeys], id],
+        [scope]: [...prevState[scope as TagKeys], id],
-        }));
+      }));
-      }
-
-      if (type === "question") {
-        const q = questions.find(e => e.backendId === Number(id))
-        setSelectedQuestions((prevState) => ({
-          ...prevState,
-          [scope]: [...prevState[scope as QuestionKeys], {
-            id,
-            title: q?.title || "вопрос",
-            entity: scope,
-          }],
-        }));
-      }
     }
 
+    if (type === "question") {
+      const q = questions.find(e => e.backendId === Number(id))
+      setSelectedQuestions((prevState) => ({
+        ...prevState,
+        [scope]: [...prevState[scope as QuestionKeys], {
+          id,
+          title: q?.title || "вопрос",
+          entity: scope,
+        }],
+      }));
+    }
+  }
+
   const handleDeleteTagQuestion = () => {
     if (openDelete === null || !openDelete.scope || !openDelete.id || !openDelete.type) return;
     if (openDelete.type === "tag") {
@@ -233,7 +232,7 @@ export const SwitchPages = ({
     //    updateIntegrationRules(quiz.backendId.toString(), body);
     //  }
 
-      handleCloseModal();
+    handleCloseModal();
   };
 
 
@@ -241,25 +240,27 @@ export const SwitchPages = ({
 
   const steps = [
     {
-      title: "Выбор воронки",
-      desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку",
       isSettingsAvailable: true,
       component: (
         <Pipelines
           users={arrayOfUsers}
           pipelines={arrayOfPipelines}
-          handlePrevStep={handlePrevStep}
+          handlePrevStep={() => setSpecialPage("accountInfo")}
           handleNextStep={handleNextStep}
           selectedDealUser={selectedDealUser}
           setSelectedDealPerformer={setSelectedDealPerformer}
           selectedPipeline={selectedPipeline}
           setSelectedPipeline={setSelectedPipeline}
+          titleProps={{
+            step: step + 2,
+            title: "Выбор воронки",
+            desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку",
+            toSettings: () => setSpecialPage("settingsBlock")
+          }}
         />
       ),
     },
     {
-      title: "Выбор этапа воронки",
-      desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку",
       isSettingsAvailable: true,
       component: (
         <PipelineSteps
@@ -271,12 +272,16 @@ export const SwitchPages = ({
           setSelectedStep={setSelectedPipelineStep}
           handlePrevStep={handlePrevStep}
           handleNextStep={handleNextStep}
+          titleProps={{
+            step: step + 2,
+            title: "Выбор этапа воронки",
+            desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку",
+            toSettings: () => setSpecialPage("settingsBlock")
+          }}
         />
       ),
     },
     {
-      title: "Сделка",
-      desc: "На этом этапе вы можете выбрать ответственного за сделку",
       isSettingsAvailable: true,
       component: (
         <DealPerformers
@@ -285,11 +290,16 @@ export const SwitchPages = ({
           users={arrayOfUsers}
           selectedDealUser={selectedDealUser}
           setSelectedDealPerformer={setSelectedDealPerformer}
+          titleProps={{
+            step: step + 2,
+            title: "Сделка",
+            desc: "На этом этапе вы можете выбрать ответственного за сделку",
+            toSettings: () => setSpecialPage("settingsBlock")
+          }}
         />
       ),
     },
     {
-      title: "Добавление тегов",
       isSettingsAvailable: true,
       component: (
         <AmoTags
@@ -300,11 +310,16 @@ export const SwitchPages = ({
           handleAddTag={handleAddTagQuestion}
           handlePrevStep={handlePrevStep}
           handleNextStep={handleNextStep}
+          titleProps={{
+            step: step + 2,
+            title: "Добавление тегов",
+            desc: "На этом этапе вы можете добавить теги с результатами",
+            toSettings: () => setSpecialPage("settingsBlock")
+          }}
         />
       ),
     },
     {
-      title: "Соотнесение вопросов и сущностей",
       isSettingsAvailable: true,
       component: (
         <AmoQuestions
@@ -318,6 +333,11 @@ export const SwitchPages = ({
           handlePrevStep={handlePrevStep}
           handleNextStep={handleSave}
           FieldsAllowedFC={FieldsAllowedFC}
+          titleProps={{
+            step: step + 2,
+            title: "Соотнесение вопросов и сущностей",
+            toSettings: () => setSpecialPage("settingsBlock")
+          }}
         />
       ),
     },
@@ -351,7 +371,7 @@ export const SwitchPages = ({
       />
     case "amoLogin": return <AmoLogin handleNextStep={handleNextStep} />
     case "accountInfo": return <AccountInfo
-      handleNextStep={handleNextStep}
+      handleNextStep={() => setSpecialPage("")}
       accountInfo={accountInfo}
     />
 
@@ -361,13 +381,13 @@ export const SwitchPages = ({
 }
 
 // const S = <ModalTitle
-    // step={1}
+// step={1}
-    // steps={2}
+// steps={2}
-    // isSettingsBlock={true}
+// isSettingsBlock={true}
-    // setIsSettingsBlock={setIsSettingsBlock}
+// setIsSettingsBlock={setIsSettingsBlock}
-    // setStep={setStep}
+// setStep={setStep}
-    // startRemoveAccount={() => setSpecialPage("removeAccount")}
+// startRemoveAccount={() => setSpecialPage("removeAccount")}
-  // />
+// />
 
 
 //   title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте",

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

@@ -4,6 +4,7 @@ import { ItemsSelectionView } from "../Questions/ItemsSelectionView/ItemsSelecti
 import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
 import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types";
 import { DataConstrictor } from "../Components/DataConstrictor";
+import { ModalTitle } from "../ModalTitle";
 
 type Props = {
   tagsItems: MinifiedData[] | [];
@@ -13,6 +14,12 @@ type Props = {
   handleScroll: () => void;
   handlePrevStep: () => void;
   handleNextStep: () => void;
+  titleProps: {
+    step: number;
+    title: string;
+    desc: string;
+    toSettings: () => void;
+  }
 };
 
 export const AmoTags: FC<Props> = ({
@@ -23,6 +30,7 @@ export const AmoTags: FC<Props> = ({
   handleScroll,
   handlePrevStep,
   handleNextStep,
+  titleProps,
 }) => {
   const [sortedTagsItems, setSortedTagsItems] = useState<MinifiedData[] | []>(tagsItems);
 
@@ -43,55 +51,60 @@ export const AmoTags: FC<Props> = ({
     });
   };
   const startConstrictor = (substr: string) => {
-      const a = tagsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
+    const a = tagsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
-      setSortedTagsItems(a);
+    setSortedTagsItems(a);
   }
 
   return (
-    <Box
+    <>
-      sx={{
+      <ModalTitle
-        display: "flex",
+        {...titleProps}
-        flexDirection: "column",
+      />
-        height: "100%",
+      <Box
-        flexGrow: 1,
+        sx={{
-      }}
+          display: "flex",
-    >
+          flexDirection: "column",
-      {isSelection && activeScope !== null ? (
+          height: "100%",
-        // Здесь выбираем элемент в табличку
+          flexGrow: 1,
-        <>
+        }}
-          <DataConstrictor
+      >
-            isError={sortedTagsItems.length === 0}
+        {isSelection && activeScope !== null ? (
-            constrictor={startConstrictor}
+          // Здесь выбираем элемент в табличку
+          <>
+            <DataConstrictor
+              isError={sortedTagsItems.length === 0}
+              constrictor={startConstrictor}
+            />
+            <ItemsSelectionView
+              items={sortedTagsItems}
+              selectedItemId={selectedTag}
+              setSelectedItem={setSelectedTag}
+              handleScroll={handleScroll}
+              activeScope={activeScope}
+              onSmallBtnClick={() => {
+                setActiveScope(null);
+                setIsSelection(false);
+              }}
+              onLargeBtnClick={() => {
+                handleAdd();
+                setActiveScope(null);
+                setIsSelection(false);
+              }}
+            />
+          </>
+        ) : (
+          // Табличка
+          <TagsDetailsView
+            items={tagsItems}
+            setActiveScope={setActiveScope}
+            selectedTags={selectedTags}
+            setIsSelection={setIsSelection}
+            handleNextStep={handleNextStep}
+            handlePrevStep={handlePrevStep}
+            deleteHC={handleDelete}
           />
-          <ItemsSelectionView
+        )}
-            items={sortedTagsItems}
+      </Box>
-            selectedItemId={selectedTag}
+    </>
-            setSelectedItem={setSelectedTag}
-            handleScroll={handleScroll}
-            activeScope={activeScope}
-            onSmallBtnClick={() => {
-              setActiveScope(null);
-              setIsSelection(false);
-            }}
-            onLargeBtnClick={() => {
-              handleAdd();
-              setActiveScope(null);
-              setIsSelection(false);
-            }}
-          />
-        </>
-      ) : (
-        // Табличка
-        <TagsDetailsView
-          items={tagsItems}
-          setActiveScope={setActiveScope}
-          selectedTags={selectedTags}
-          setIsSelection={setIsSelection}
-          handleNextStep={handleNextStep}
-          handlePrevStep={handlePrevStep}
-          deleteHC={handleDelete}
-        />
-      )}
-    </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx

@@ -74,11 +74,12 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
       PaperProps={{
         sx: {
           maxWidth: isTablet ? "100%" : "919px",
-          maxHeight: isTablet ? "100%" : "658px",
+          height: "658px",
           borderRadius: "12px",
         },
       }}
     >
+      <Box>
       <Box
         sx={{
           width: "100%",
@@ -109,15 +110,17 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
       >
         <CloseIcon sx={{ width: "12px", height: "12px", transform: "scale(1.5)" }} />
       </IconButton>
+      </Box>
       <Box
       className="родитель"
         sx={{
           display: "flex",
           flexDirection: "column",
-          width: isTablet ? "100%" : "919px",
+          width: "100%",
-          height: "600px",
           padding: "15px 20px 15px",
           flexGrow: 1,
+          height: "100%",
+          overflow: "auto"
         }}
       >
         {isLoadingPage ?