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

2024-08-11 02:18:27 +03:00 · 2024-08-11 02:18:27 +03:00 · 8a6efc36ed
commit 8a6efc36ed
parent 7766c2d3a5
10 changed files with 300 additions and 260 deletions
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx
+++ b/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%" }}>
-        <a
-          target="_blank"
-          href={link}
-          style={{
-            wordBreak: "break-word",
-            fontSize: "18px",
-            lineHeight: "21.33px",
-            color: "#7E2AEA"
-          }}
-        >
-          {link}
-        </a>
+      <Box sx={{ width: "100%" }}>
+        {
+          link ?
+            <a
+              target="_blank"
+              href={link}
+              style={{
+                wordBreak: "break-word",
+                fontSize: "18px",
+                lineHeight: "21.33px",
+                color: "#7E2AEA"
+              }}
+            >
+              {link}
+            </a>
+            :
+            <Typography>не указана</Typography>
+        }
      </Box>
    </Box >
  );

  return (
    <Box
-      className="инфокомпонент"
      sx={{
        display: "inline-flex",
        flexDirection: "column",
-        // flexDirection: "column",
-        // alignItems: "center",
+        justifyContent: "space-between",
        height: "100%",
+        overflow: "auto",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
-        display: "flex",
-        justifyContent: "space-between",
+          display: "flex",
+          justifyContent: "space-between",

-          width: "100%"
+          flexDirection: isMobile ? "column" : "row",
+
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
        }}
      >
-        <Box
-          sx={{
-            // marginTop: isMobile ? "20px" : "60px",
-            // display: "flex",
-            // flexDirection: "column",
-            // gap: isMobile ? "10px" : "20px",
-          }}
-        >
+        <Box>
          <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("Имя аккаунта", accountInfo.name)}
-          {/* {infoItem("Email аккаунта", accountInfo.email)} */}
-          {infoItemLink("ЛК в amo", `https://${accountInfo.subdomain}.amocrm.ru/dashboard/`)}
-          {infoItemLink("Профиль пользователя в amo", `https://${accountInfo.subdomain}.amocrm.ru/settings/users/`)}
-          {infoItem("Страна пользователя", accountInfo.country)}
+          {infoItem("Amo ID", accountInfo?.amoID)}
+          {infoItem("Имя аккаунта", accountInfo?.name)}
+          {infoItemLink("ЛК в amo", `https://${accountInfo?.subdomain}.amocrm.ru/dashboard/`)}
+          {infoItemLink("Профиль пользователя в amo", `https://${accountInfo?.subdomain}.amocrm.ru/settings/users/`)}
+          {infoItem("Страна пользователя", accountInfo?.country)}
        </Box>
+        <Box>
+
        <Button
          variant="outlined"
          startIcon={
            <AccountSetting
-                color={theme.palette.brightPurple.main}
-                height={"20px"}
-                width={"20px"}
-              />
+              color={theme.palette.brightPurple.main}
+              height={"20px"}
+              width={"20px"}
+            />
          }
          onClick={() => { }}
          sx={{
            height: "44px",
-            padding: isMobile ? "10px" : "10px 20px",
-            width: "fit-content",
+            padding: "0",
+            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}
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx
+++ b/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>
+    </>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx
+++ b/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 }[];
-  isSettingsBlock?: boolean;
-  setIsSettingsBlock: (value: boolean) => void;
-  setStep: (value: number) => void;
-  startRemoveAccount: () => void;
+  title: string;
+  desc: string;
+  toSettings: () => void;
 };

 export const ModalTitle: FC<AmoModalTitleProps> = ({
  step,
-  steps,
-  setIsSettingsBlock,
-  isSettingsBlock,
-  setStep,
-  startRemoveAccount,
+  title,
+  desc,
+  toSettings,
 }) => {
  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 ? (
-              <AccountSetting
-                color={theme.palette.brightPurple.main}
-                height={"20px"}
-                width={"20px"}
-              />
-            ) : (
-              <GearIcon
+            <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>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx
+++ b/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>
+    </>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx
+++ b/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={{
-        display: "flex",
-        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>
+    <>
+      <ModalTitle
+      {...titleProps}
+      />
      <Box
        sx={{
-          marginTop: "20px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          height: "100%",
          flexGrow: 1,
-          width: "100%",
-          height: "346px",
        }}
      >
-        <CustomRadioGroup
-          items={pipelines}
-          selectedItemId={selectedPipeline}
-          setSelectedItem={setSelectedPipeline}
-          handleScroll={() => {}}
-        />
+        <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
+          <CustomSelect
+            items={users}
+            selectedItemId={selectedDealUser}
+            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>
+    </>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx
+++ b/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>
+    </>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx
+++ b/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",
-        marginLeft: "auto",
+        mt: "20px"
      }}
    >
      {isSmallBtnMissing || (
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx
@ -46,19 +46,19 @@ interface Props {
  selectedCurrentFields: MinifiedData[];
  selectedPipelineStep: string | null;
  selectedDealUser: string | null;
-  setSelectedPipeline:any;
-  setSelectedPipelineStep:any;
-  setSelectedDealPerformer:any;
-  selectedTags:any;
-  setSelectedTags:any;
-  selectedQuestions:any;
-  setSelectedQuestions:any;
-  setPageOfPipelines:any;
-  setPageOfPipelinesSteps:any;
-  setPageOfUsers:any;
-  setPageOfTags:any;
-  setSelectedCurrentFields:any;
-  handleCloseModal:any;
+  setSelectedPipeline: any;
+  setSelectedPipelineStep: any;
+  setSelectedDealPerformer: any;
+  selectedTags: any;
+  setSelectedTags: any;
+  selectedQuestions: any;
+  setSelectedQuestions: any;
+  setPageOfPipelines: any;
+  setPageOfPipelinesSteps: any;
+  setPageOfUsers: any;
+  setPageOfTags: any;
+  setSelectedCurrentFields: 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") => {
-      if (!scope || !id) return;
+  const handleAddTagQuestion = (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => {
+    if (!scope || !id) return;

-      if (type === "tag") {
-        setSelectedTags((prevState) => ({
-          ...prevState,
-          [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 === "tag") {
+      setSelectedTags((prevState) => ({
+        ...prevState,
+        [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,
+        }],
+      }));
+    }
+  }
+
  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}
-    // steps={2}
-    // isSettingsBlock={true}
-    // setIsSettingsBlock={setIsSettingsBlock}
-    // setStep={setStep}
-    // startRemoveAccount={() => setSpecialPage("removeAccount")}
-  // />
+// step={1}
+// steps={2}
+// isSettingsBlock={true}
+// setIsSettingsBlock={setIsSettingsBlock}
+// setStep={setStep}
+// startRemoveAccount={() => setSpecialPage("removeAccount")}
+// />


 //   title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте",
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx
+++ b/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()))
-      setSortedTagsItems(a);
+    const a = tagsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
+    setSortedTagsItems(a);
  }

  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        flexGrow: 1,
-      }}
-    >
-      {isSelection && activeScope !== null ? (
-        // Здесь выбираем элемент в табличку
-        <>
-          <DataConstrictor
-            isError={sortedTagsItems.length === 0}
-            constrictor={startConstrictor}
+    <>
+      <ModalTitle
+        {...titleProps}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          flexGrow: 1,
+        }}
+      >
+        {isSelection && activeScope !== null ? (
+          // Здесь выбираем элемент в табличку
+          <>
+            <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}
-            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>
+        )}
+      </Box>
+    </>
  );
 };
--- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx
+++ b/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",
-          height: "600px",
+          width: "100%",
          padding: "15px 20px 15px",
          flexGrow: 1,
+          height: "100%",
+          overflow: "auto"
        }}
      >
        {isLoadingPage ?