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,14 +46,16 @@ 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%" }}>
+        {
+          link ?
             <a
               target="_blank"
               href={link}
@@ -66,19 +68,21 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
             >
               {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,
       }}
     >
@@ -87,17 +91,14 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
           display: "flex",
           justifyContent: "space-between",
 
-          width: "100%"
+          flexDirection: isMobile ? "column" : "row",
-        }}
+
-      >
+          width: "100%",
-        <Box
+          height: "100%",
-          sx={{
+          overflow: "auto",
-            // marginTop: isMobile ? "20px" : "60px",
-            // display: "flex",
-            // flexDirection: "column",
-            // gap: isMobile ? "10px" : "20px",
         }}
       >
+        <Box>
           <Typography
             sx={{
               fontSize: "18px",
@@ -109,21 +110,22 @@ 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={
@@ -136,8 +138,9 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
           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,9 +169,10 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
             },
           }}
         >
-          {isMobile ? "" : "Сменить аккаунт"}
+          Сменить аккаунт
         </Button>
         </Box>
+      </Box>
       <StepButtonsBlock
         isSmallBtnDisabled={true}
         onLargeBtnClick={handleNextStep}

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 ? (
-              <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,6 +41,10 @@ export const Pipelines: FC<Props> = ({
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   return (
+    <>
+      <ModalTitle
+      {...titleProps}
+      />
       <Box
         sx={{
           display: "flex",
@@ -76,5 +89,6 @@ export const Pipelines: FC<Props> = ({
           />
         </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

@@ -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")
@@ -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}
     />
 

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);
 
@@ -48,6 +56,10 @@ export const AmoTags: FC<Props> = ({
   }
 
   return (
+    <>
+      <ModalTitle
+        {...titleProps}
+      />
       <Box
         sx={{
           display: "flex",
@@ -93,5 +105,6 @@ export const AmoTags: FC<Props> = ({
           />
         )}
       </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 ?