From d717322f87a708599ec9e107c526c6c3fc67b037 Mon Sep 17 00:00:00 2001 From: Nastya Date: Sat, 3 Aug 2024 15:53:44 +0300 Subject: [PATCH 1/7] amo --- .../CustomRadioGroup/CustomRadioGroup.tsx | 2 +- .../IntegrationsModal/Amo/AmoCRMModal.tsx | 5 +- .../Amo/AmoModalTitle/AmoModalTitle.tsx | 15 +++- .../Item/AnswerItem/AnswerItem.tsx | 71 +++++++++++++++++++ yarn.lock | 8 +-- 5 files changed, 94 insertions(+), 7 deletions(-) create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx diff --git a/src/components/CustomRadioGroup/CustomRadioGroup.tsx b/src/components/CustomRadioGroup/CustomRadioGroup.tsx index b64c056b..99cd0d89 100644 --- a/src/components/CustomRadioGroup/CustomRadioGroup.tsx +++ b/src/components/CustomRadioGroup/CustomRadioGroup.tsx @@ -106,7 +106,7 @@ export const CustomRadioGroup: FC = ({ border: `1px solid ${theme.palette.grey2.main}`, borderRadius: "12px", padding: "5px", - height: "100%", + height: "305px", overflowY: "auto", }} > diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx index 5283576f..8356ff39 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx @@ -249,6 +249,7 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo }, { title: "Выбор воронки", + desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку", isSettingsAvailable: true, component: ( = ({ isModalOpen, handleClo }, { title: "Выбор этапа воронки", + desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку", isSettingsAvailable: true, component: ( = ({ isModalOpen, handleClo }, { title: "Сделка", + desc: "На этом этапе вы можете выбрать ответственного за сделку", isSettingsAvailable: true, component: ( = ({ isModalOpen, handleClo PaperProps={{ sx: { maxWidth: isTablet ? "100%" : "920px", - maxHeight: isTablet ? "100%" : "660px", + maxHeight: isTablet ? "100%" : "680px", borderRadius: "12px", }, }} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx index c429ad37..2c9c40ac 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx @@ -45,12 +45,24 @@ export const AmoModalTitle: FC = ({ sx={{ fontSize: isMobile ? "18px" : "24px", color: theme.palette.grey3.main, - fontWeight: "400", + fontWeight: "500", lineHeight: "1", }} > {isSettingsBlock ? "Мои настройки" : steps[step].title} + { + steps[step].desc && + + {steps[step].desc} + + } {isSettingsBlock || ( = ({ } onClick={handleClick} sx={{ + height: "44px", padding: isMobile ? "10px" : "10px 20px", width: "fit-content", backgroundColor: "transparent", diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx new file mode 100644 index 00000000..a237cd7c --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx @@ -0,0 +1,71 @@ +import { Box, IconButton, Typography, useTheme } from "@mui/material"; +import { FC } from "react"; +import Trash from "@icons/trash"; + +type AnswerItemProps = { + fieldName: string; + fieldValue: string; + deleteHC: () => void; +}; + +export const AnswerItem: FC = ({ fieldName, fieldValue, deleteHC }) => { + console.log("AnswerItem") + console.log(fieldName) + const theme = useTheme(); + return ( + + + + {fieldName} + + + + {fieldValue} + + + + + + + ); +}; diff --git a/yarn.lock b/yarn.lock index c23cb60c..c26b3a91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1513,10 +1513,10 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5" integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw== -"@frontend/kitui@^1.0.84": - version "1.0.84" - resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.84.tgz#9b655b776433fb8ea6d0840897d941e66530df7f" - integrity sha1-m2Vbd2Qz+46m0IQIl9lB5mUw338= +"@frontend/kitui@^1.0.85": + version "1.0.85" + resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.85.tgz#1a384c9ff3314175c1ba3d35d0979da7026a21ab" + integrity sha1-GjhMn/MxQXXBuj010JedpwJqIas= dependencies: immer "^10.0.2" reconnecting-eventsource "^1.6.2" From 4fa98f644f2268ca65bd809847a54882fb373e29 Mon Sep 17 00:00:00 2001 From: Nastya Date: Mon, 5 Aug 2024 19:07:25 +0300 Subject: [PATCH 2/7] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4?= =?UTF-8?q?=20=D0=B8=D0=BC=D1=91=D0=BD=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D1=81=D0=BE=D0=B2=20=D0=B2=20=D0=B0=D0=BC=D0=BE=20=D0=BC=D0=BE?= =?UTF-8?q?=D0=B4=D0=B0=D0=BB=D0=BA=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AmoAccountInfo.tsx => AccountInfo.tsx} | 4 +- .../IntegrationsModal/Amo/AmoCRMModal.tsx | 464 ------------------ .../Amo/{AmoLogin => }/AmoLogin.tsx | 2 +- .../Item/AnswerItem => Amo}/AnswerItem.tsx | 0 .../{DealPerformers => }/DealPerformers.tsx | 6 +- ...eTagQuestion.tsx => DeleteTagQuestion.tsx} | 2 +- .../AmoModalTitle.tsx => ModalTitle.tsx} | 2 +- .../Amo/{PipelineSteps => }/PipelineSteps.tsx | 8 +- .../Amo/{Pipelines => }/Pipelines.tsx | 8 +- .../AmoQuestions.tsx | 2 +- .../CurrentFieldSelectMobile.tsx | 0 .../CurrentFields.tsx | 2 +- .../EntitiesQuestions.tsx | 4 +- .../Item/AnswerItem/AnswerItem.tsx | 0 .../Item/IconBtnAdd/IconBtnAdd.tsx | 0 .../{AmoQuestions => Questions}/Item/Item.tsx | 0 .../ItemDetailsView/ItemDetailsView.tsx | 2 +- .../ItemForQuestions.tsx | 0 .../ItemsSelectionView/ItemsSelectionView.tsx | 2 +- .../{AmoQuestions => Questions}/NewFields.tsx | 0 ...AmoRemoveAccount.tsx => RemoveAccount.tsx} | 2 +- .../Amo/SettingsBlock/AmoSettingsBlock.tsx | 81 --- .../Amo/SettingsBlock/SettingsBlock.tsx | 83 ++++ .../StepButtonsBlock.tsx | 0 .../IntegrationsModal/Amo/SwitchPages.tsx | 383 +++++++++++++++ .../Amo/{AmoTags => Tags}/AmoTags.tsx | 2 +- .../TagsDetailsView/TagsDetailsView.tsx | 4 +- .../IntegrationsModal/Amo/index.tsx | 166 +++++++ .../Amo/useAmoIntegration.ts | 19 +- .../PartnersBoard/PartnersBoard.tsx | 2 +- 30 files changed, 677 insertions(+), 573 deletions(-) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoAccountInfo/AmoAccountInfo.tsx => AccountInfo.tsx} (93%) delete mode 100644 src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoLogin => }/AmoLogin.tsx (98%) rename src/pages/IntegrationsPage/IntegrationsModal/{AmoQuestions/Item/AnswerItem => Amo}/AnswerItem.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{DealPerformers => }/DealPerformers.tsx (86%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoRemoveAccount/AmoDeleteTagQuestion.tsx => DeleteTagQuestion.tsx} (92%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoModalTitle/AmoModalTitle.tsx => ModalTitle.tsx} (98%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{PipelineSteps => }/PipelineSteps.tsx (85%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{Pipelines => }/Pipelines.tsx (86%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/AmoQuestions.tsx (99%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/CurrentFieldSelectMobile.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/CurrentFields.tsx (98%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/EntitiesQuestions.tsx (97%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/Item/AnswerItem/AnswerItem.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/Item/IconBtnAdd/IconBtnAdd.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/Item/Item.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/ItemDetailsView/ItemDetailsView.tsx (96%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/ItemForQuestions.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/ItemsSelectionView/ItemsSelectionView.tsx (95%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoQuestions => Questions}/NewFields.tsx (100%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoRemoveAccount/AmoRemoveAccount.tsx => RemoveAccount.tsx} (97%) delete mode 100644 src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/AmoSettingsBlock.tsx create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingsBlock.tsx rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{StepButtonsBlock => }/StepButtonsBlock.tsx (100%) create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoTags => Tags}/AmoTags.tsx (96%) rename src/pages/IntegrationsPage/IntegrationsModal/Amo/{AmoTags => Tags}/TagsDetailsView/TagsDetailsView.tsx (95%) create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoAccountInfo/AmoAccountInfo.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx similarity index 93% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoAccountInfo/AmoAccountInfo.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx index e6b00856..dd4595ac 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoAccountInfo/AmoAccountInfo.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx @@ -1,5 +1,5 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; +import { StepButtonsBlock } from "./StepButtonsBlock"; import { FC } from "react"; import { AccountResponse } from "@api/integration"; @@ -8,7 +8,7 @@ type AmoAccountInfoProps = { accountInfo: AccountResponse; }; -export const AmoAccountInfo: FC = ({ handleNextStep, accountInfo }) => { +export const AccountInfo: FC = ({ handleNextStep, accountInfo }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx deleted file mode 100644 index 8356ff39..00000000 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoCRMModal.tsx +++ /dev/null @@ -1,464 +0,0 @@ -import React, { FC, useCallback, useEffect, useMemo, useState } from "react"; -import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box, Skeleton } from "@mui/material"; -import { useQuestions } from "@/stores/questions/hooks"; -import { redirect } from "react-router-dom"; -import { enqueueSnackbar } from "notistack"; - -import CloseIcon from "@mui/icons-material/Close"; - -import { AmoRemoveAccount } from "./AmoRemoveAccount/AmoRemoveAccount"; -import { AmoDeleteTagQuestion } from "./AmoRemoveAccount/AmoDeleteTagQuestion"; -import { AmoLogin } from "./AmoLogin/AmoLogin"; -import { Pipelines } from "./Pipelines/Pipelines"; -import { PipelineSteps } from "./PipelineSteps/PipelineSteps"; -import { DealPerformers } from "./DealPerformers/DealPerformers"; -import { AmoTags } from "./AmoTags/AmoTags"; -import { AmoQuestions } from "./AmoQuestions/AmoQuestions"; -import { AmoModalTitle } from "./AmoModalTitle/AmoModalTitle"; -import { AmoSettingsBlock } from "./SettingsBlock/AmoSettingsBlock"; -import { AmoAccountInfo } from "./AmoAccountInfo/AmoAccountInfo"; -import { useAmoIntegration } from "./useAmoIntegration"; -import { MinifiedData, QuestionKeys, TagKeys, TagQuestionHC } from "./types"; -import { Quiz } from "@/model/quiz/quiz"; -import { setIntegrationRules, updateIntegrationRules } from "@/api/integration"; - -type IntegrationsModalProps = { - isModalOpen: boolean; - handleCloseModal: () => void; - companyName: string | null; - quiz: Quiz; -}; - -const FCTranslate = { - "name": "имя", - "email": "почта", - "phone": "телефон", - "text": "номер", - "address": "адрес", -} - -export const AmoCRMModal: FC = ({ isModalOpen, handleCloseModal, companyName, quiz }) => { - //Если нет контекста квиза, то и делать на этой страничке нечего - if (quiz?.backendId === undefined) { - redirect("/list"); - return null; - } - - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - - const { questions } = useQuestions(); - const minifiedQuestions = useMemo( - () => - questions - .filter((q) => q.type !== "result" && q.type !== null) - .map(({ backendId, title }) => ({ - id: backendId.toString() as string, - title, - })), - [questions] - ); - const FieldsAllowedFC = useMemo( - () => { - const list: MinifiedData[] = [] - if (quiz.config.showfc) { - const fields = quiz.config.formContact.fields - for (let key in fields) { - if (fields[key].used) list.push({ - id: key, - title: FCTranslate[key], - entity: "Contact", - }) - } - } - return list; - }, - [quiz] - ); - - const [step, setStep] = useState(0); - const [isSettingsBlock, setIsSettingsBlock] = useState(false); - const [isTryRemoveAccount, setIsTryRemoveAccount] = useState(false); - const [openDelete, setOpenDelete] = useState(null); - - - const { - isLoadingPage, - firstRules, - accountInfo, - arrayOfPipelines, - arrayOfPipelinesSteps, - arrayOfUsers, - arrayOfTags, - arrayOfFields, - selectedPipeline, - setSelectedPipeline, - selectedCurrentFields, - selectedPipelineStep, - setSelectedPipelineStep, - selectedDealUser, - setSelectedDealPerformer, - questionsBackend, - selectedTags, - setSelectedTags, - selectedQuestions, - setSelectedQuestions, - setPageOfPipelines, - setPageOfPipelinesSteps, - setPageOfUsers, - setPageOfTags, - setSelectedCurrentFields, - } = useAmoIntegration({ - quizID: quiz.backendId, - isModalOpen, - isTryRemoveAccount, - questions, - }); - - - const handleAddTagQuestion = useCallback( - (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, - }], - })); - } - }, - [setSelectedQuestions, setSelectedTags, questions] - ); - const handleDeleteTagQuestion = useCallback(() => { - if (openDelete === null || !openDelete.scope || !openDelete.id || !openDelete.type) return; - if (openDelete.type === "tag") { - let newArray = selectedTags[openDelete.scope]; - const index = newArray.indexOf(openDelete.id); - if (index !== -1) newArray.splice(index, 1); - - setSelectedTags((prevState) => ({ - ...prevState, - [openDelete.scope]: newArray, - })); - } - - if (openDelete.type === "question") { - let newArray = selectedQuestions - newArray[openDelete.scope as QuestionKeys] = newArray[openDelete.scope as QuestionKeys].filter(e => e.id !== openDelete.id) - // let index = -1 - // selectedQuestions[openDelete.scope].forEach((e, i) => { - // if (e.subTitle === openDelete.id) index = i - // }) - // if (index !== -1) newArray.splice(index, 1); - // setSelectedQuestions((prevState) => ({ - // ...prevState, - // [openDelete.scope]: newArray, - // })); - setSelectedQuestions(newArray); - setSelectedCurrentFields(selectedCurrentFields.filter(e => e.id !== openDelete.id)); - - } - setOpenDelete(null); - }, [openDelete]); - - const handleNextStep = () => { - setStep((prevState) => prevState + 1); - }; - const handlePrevStep = () => { - setStep((prevState) => prevState - 1); - }; - const handleSave = () => { - if (quiz?.backendId === undefined) return; - if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку"); - if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки"); - - const body = { - PipelineID: Number(selectedPipeline), - StepID: Number(selectedPipelineStep), - PerformerID: Number(selectedDealUser), - // FieldsRule: questionsBackend, - TagsToAdd: selectedTags, - }; - - const FieldsRule = { - Company: { QuestionID: {} }, - Lead: { QuestionID: {} }, - Customer: { QuestionID: {} }, - Contact: { - QuestionID: {}, - ContactRuleMap: { - } - }, - }; - - for (let key in FieldsRule) { - selectedQuestions[key as QuestionKeys].forEach((data) => { - FieldsRule[key as QuestionKeys].QuestionID[data.id] = 0; - }); - } - - selectedCurrentFields.forEach((data) => { - if (data.entity === "Contact") { - FieldsRule.Contact.ContactRuleMap[data.id] = Number(data.amoId) - } else { - FieldsRule[data.entity].QuestionID[data.id] = Number(data.amoId) || 0 - } - }) - - - for (let key in body.TagsToAdd) { - body.TagsToAdd[key as TagKeys] = body.TagsToAdd[key as TagKeys].map((id) => Number(id)); - } - body.FieldsRule = FieldsRule; - - if (firstRules) { - setIntegrationRules(quiz.backendId.toString(), body); - } else { - updateIntegrationRules(quiz.backendId.toString(), body); - } - - handleCloseModal(); - setStep(1); - }; - const steps = useMemo( - () => [ - { - title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте", - isSettingsAvailable: false, - component: accountInfo ? ( - - ) : ( - - ), - }, - { - title: "Выбор воронки", - desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку", - isSettingsAvailable: true, - component: ( - - ), - }, - { - title: "Выбор этапа воронки", - desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку", - isSettingsAvailable: true, - component: ( - - ), - }, - { - title: "Сделка", - desc: "На этом этапе вы можете выбрать ответственного за сделку", - isSettingsAvailable: true, - component: ( - - ), - }, - { - title: "Добавление тегов", - isSettingsAvailable: true, - component: ( - { }} - handleAddTag={handleAddTagQuestion} - handlePrevStep={handlePrevStep} - handleNextStep={handleNextStep} - /> - ), - }, - { - title: "Соотнесение вопросов и сущностей", - isSettingsAvailable: true, - component: ( - - ), - }, - ], - [ - arrayOfPipelines, - arrayOfPipelinesSteps, - arrayOfUsers, - arrayOfTags, - arrayOfFields, - selectedPipeline, - selectedPipelineStep, - selectedDealUser, - selectedQuestions, - selectedTags, - arrayOfPipelines, - arrayOfPipelinesSteps, - arrayOfUsers, - minifiedQuestions, - selectedCurrentFields, - ] - ); - - const stepTitles = steps.map((step) => step.title); - - return ( - - - - Интеграция с {companyName ? companyName : "партнером"} - - - - - - - {isLoadingPage ? - : - <> - setIsTryRemoveAccount(true)} - /> - {openDelete !== null ? ( - setOpenDelete(null)} - deleteItem={handleDeleteTagQuestion} - /> - ) : ( - <> - {isTryRemoveAccount && setIsTryRemoveAccount(false)} />} - {isSettingsBlock && ( - - u.id === selectedDealUser)?.title || "не указан"} - selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"} - selectedStage={ - arrayOfPipelinesSteps.find((s) => s.id === selectedPipelineStep)?.title || "нет данных" - } - selectedQuestions={selectedQuestions} - selectedTags={selectedTags} - /> - - )} - {!isSettingsBlock && !isTryRemoveAccount && ( - {steps[step].component} - )} - - )} - - } - - - - - ); -}; - -export const diffArr = (arr_A: MinifiedData[], arr_B: MinifiedData[]) => { - return arr_A.filter(person_A => !arr_B.some(person_B => person_A.id === person_B.id)); -} \ No newline at end of file diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoLogin/AmoLogin.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoLogin.tsx similarity index 98% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoLogin/AmoLogin.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoLogin.tsx index 92bf2ec4..7772f82a 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoLogin/AmoLogin.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoLogin.tsx @@ -1,6 +1,6 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import { FC } from "react"; -import { AmoButton } from "../../../../../components/AmoButton/AmoButton"; +import { AmoButton } from "../../../../components/AmoButton/AmoButton"; import { connectAmo } from "@api/integration"; type IntegrationStep1Props = { diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AnswerItem.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/AnswerItem/AnswerItem.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/AnswerItem.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers/DealPerformers.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx similarity index 86% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers/DealPerformers.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx index 43198363..e364e61d 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers/DealPerformers.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx @@ -1,8 +1,8 @@ import { Box, useMediaQuery, useTheme } from "@mui/material"; import { FC } from "react"; -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; -import { CustomSelect } from "../../../../../components/CustomSelect/CustomSelect"; -import { MinifiedData } from "../types"; +import { StepButtonsBlock } from "./StepButtonsBlock"; +import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect"; +import { MinifiedData } from "./types"; type Props = { users: MinifiedData[]; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoRemoveAccount/AmoDeleteTagQuestion.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DeleteTagQuestion.tsx similarity index 92% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoRemoveAccount/AmoDeleteTagQuestion.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/DeleteTagQuestion.tsx index 315251e0..0ac9ec1a 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoRemoveAccount/AmoDeleteTagQuestion.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DeleteTagQuestion.tsx @@ -6,7 +6,7 @@ interface Props { close: () => void; } -export const AmoDeleteTagQuestion: FC = ({ close, deleteItem }) => { +export const DeleteTagQuestion: FC = ({ close, deleteItem }) => { const theme = useTheme(); return ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx similarity index 98% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx index 2c9c40ac..fa533f05 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoModalTitle/AmoModalTitle.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx @@ -13,7 +13,7 @@ type AmoModalTitleProps = { startRemoveAccount: () => void; }; -export const AmoModalTitle: FC = ({ +export const ModalTitle: FC = ({ step, steps, setIsSettingsBlock, diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps/PipelineSteps.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx similarity index 85% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps/PipelineSteps.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx index 3a7b55fc..6939987b 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps/PipelineSteps.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx @@ -1,9 +1,9 @@ import { Box, useMediaQuery, useTheme } from "@mui/material"; import { FC } from "react"; -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; -import { CustomSelect } from "../../../../../components/CustomSelect/CustomSelect"; -import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/CustomRadioGroup"; -import { MinifiedData } from "../types"; +import { StepButtonsBlock } from "./StepButtonsBlock"; +import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect"; +import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup"; +import { MinifiedData } from "./types"; type Props = { users: MinifiedData[]; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines/Pipelines.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx similarity index 86% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines/Pipelines.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx index 46026217..b00cdfc2 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines/Pipelines.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx @@ -1,9 +1,9 @@ import { Box, useMediaQuery, useTheme } from "@mui/material"; import { FC } from "react"; -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; -import { CustomSelect } from "../../../../../components/CustomSelect/CustomSelect"; -import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/CustomRadioGroup"; -import { MinifiedData } from "../types"; +import { StepButtonsBlock } from "./StepButtonsBlock"; +import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect"; +import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup"; +import { MinifiedData } from "./types"; type Props = { pipelines: MinifiedData[]; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/AmoQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx similarity index 99% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/AmoQuestions.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx index 697a4e8e..910a7965 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/AmoQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx @@ -4,7 +4,7 @@ import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView"; import { Box } from "@mui/material"; import { MinifiedData, QuestionKeys, SelectedQuestions, TagKeys, TagQuestionHC } from "../types"; import { EntitiesQuestions } from "./EntitiesQuestions"; -import { diffArr } from "../AmoCRMModal"; +import { diffArr } from ".."; import { DataConstrictor } from "../Components/DataConstrictor"; type Props = { diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFieldSelectMobile.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFieldSelectMobile.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFields.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx similarity index 98% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFields.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx index 2f75ae5a..b8ca77c1 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFields.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx @@ -2,7 +2,7 @@ import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup import {Box, Typography, useMediaQuery, useTheme} from "@mui/material" import { MinifiedData } from "../types"; import {CustomSelect} from "@/components/CustomSelect/CustomSelect"; -import {CurrentFieldSelect} from "@/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFieldSelectMobile"; +import {CurrentFieldSelect} from "@/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile"; interface Props { items: MinifiedData[]; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/EntitiesQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx similarity index 97% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/EntitiesQuestions.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx index 673bce17..f8b7570b 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/EntitiesQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx @@ -1,11 +1,11 @@ import {Box, Button, useMediaQuery, useTheme} from "@mui/material" -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock" +import { StepButtonsBlock } from "../StepButtonsBlock" import { FC, useState } from "react"; import { MinifiedData, TagKeys } from "../types"; import { CurrentFields } from "./CurrentFields"; import { NewFields } from "./NewFields"; import { QuestionPair } from "./AmoQuestions"; -import { diffArr } from "../AmoCRMModal"; +import { diffArr } from ".."; type ItemsSelectionViewProps = { items: MinifiedData[] | []; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/Item/AnswerItem/AnswerItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/Item/AnswerItem/AnswerItem.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/Item/AnswerItem/AnswerItem.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/Item/AnswerItem/AnswerItem.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/Item/IconBtnAdd/IconBtnAdd.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/Item/IconBtnAdd/IconBtnAdd.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/Item/IconBtnAdd/IconBtnAdd.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/Item/IconBtnAdd/IconBtnAdd.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/Item/Item.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/Item/Item.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/Item/Item.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/Item/Item.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx similarity index 96% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx index 86e6c10d..89aca507 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx @@ -1,6 +1,6 @@ import { Box, useTheme } from "@mui/material"; import { ItemForQuestions } from "../ItemForQuestions"; -import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; +import { StepButtonsBlock } from "../../StepButtonsBlock"; import { FC } from "react"; import { MinifiedData, QuestionKeys, SelectedQuestions } from "../../types"; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemForQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemForQuestions.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemForQuestions.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemForQuestions.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx similarity index 95% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx index 6a135e2a..41e62c5c 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material"; import { CustomRadioGroup } from "../../../../../../components/CustomRadioGroup/CustomRadioGroup"; -import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; +import { StepButtonsBlock } from "../../StepButtonsBlock"; import { FC } from "react"; import { MinifiedData, TagKeys } from "../../types"; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/NewFields.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/NewFields.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/NewFields.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/NewFields.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoRemoveAccount/AmoRemoveAccount.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/RemoveAccount.tsx similarity index 97% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoRemoveAccount/AmoRemoveAccount.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/RemoveAccount.tsx index 381a43b9..ca96975b 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoRemoveAccount/AmoRemoveAccount.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/RemoveAccount.tsx @@ -10,7 +10,7 @@ interface Props { } -export const AmoRemoveAccount: FC = ({ +export const RemoveAccount: FC = ({ stopThisPage, handleCloseModal, diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/AmoSettingsBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/AmoSettingsBlock.tsx deleted file mode 100644 index 4d5fc8e4..00000000 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/AmoSettingsBlock.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { FC } from "react"; -import { Box, useMediaQuery, useTheme } from "@mui/material"; -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; -import { SettingItem } from "./SettingItem/SettingItem"; -import { SelectedQuestions, SelectedTags } from "../types"; - -type AmoSettingsBlockProps = { - stepTitles: string[]; - setStep: (value: number) => void; - setIsSettingsBlock: (value: boolean) => void; - selectedFunnel: string | null; - selectedStage: string | null; - selectedDealUser: string | null; - selectedQuestions: SelectedQuestions; - selectedTags: SelectedTags; -}; - -export const AmoSettingsBlock: FC = ({ - stepTitles, - setStep, - setIsSettingsBlock, - selectedFunnel, - selectedDealUser, - selectedStage, - selectedQuestions, - selectedTags, -}) => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - - return ( - - - {stepTitles && - stepTitles.map((title, index) => ( - - ))} - - - setIsSettingsBlock(false)} - isLargeBtnMissing={true} - /> - - - ); -}; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingsBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingsBlock.tsx new file mode 100644 index 00000000..04c50723 --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingsBlock.tsx @@ -0,0 +1,83 @@ +import { FC } from "react"; +import { Box, useMediaQuery, useTheme } from "@mui/material"; +import { StepButtonsBlock } from "../StepButtonsBlock"; +import { SettingItem } from "./SettingItem/SettingItem"; +import { SelectedQuestions, SelectedTags } from "../types"; + +type AmoSettingsBlockProps = { + stepTitles: string[]; + setStep: (value: number) => void; + setIsSettingsBlock: (value: boolean) => void; + selectedFunnel: string | null; + selectedStage: string | null; + selectedDealUser: string | null; + selectedQuestions: SelectedQuestions; + selectedTags: SelectedTags; +}; + +export const SettingsBlock: FC = ({ + stepTitles, + setStep, + setIsSettingsBlock, + selectedFunnel, + selectedDealUser, + selectedStage, + selectedQuestions, + selectedTags, +}) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + + return ( + + + + {stepTitles && + stepTitles.map((title, index) => ( + + ))} + + + setIsSettingsBlock(false)} + isLargeBtnMissing={true} + /> + + + + ); +}; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock/StepButtonsBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx similarity index 100% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock/StepButtonsBlock.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx new file mode 100644 index 00000000..08d06df0 --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx @@ -0,0 +1,383 @@ +import { useMemo, useState } from "react" +import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box, Skeleton } from "@mui/material"; +import { useQuestions } from "@/stores/questions/hooks"; +import { redirect } from "react-router-dom"; +import { enqueueSnackbar } from "notistack"; + +import CloseIcon from "@mui/icons-material/Close"; + +import { RemoveAccount } from "./RemoveAccount"; +import { DeleteTagQuestion } from "./DeleteTagQuestion"; +import { AmoLogin } from "./AmoLogin"; +import { Pipelines } from "./Pipelines"; +import { PipelineSteps } from "./PipelineSteps"; +import { DealPerformers } from "./DealPerformers"; +import { AmoTags } from "./Tags/AmoTags"; +import { AmoQuestions } from "./Questions/AmoQuestions"; +import { ModalTitle } from "./ModalTitle"; +import { SettingsBlock } from "./SettingsBlock/SettingsBlock"; +import { AccountInfo } from "./AccountInfo"; +import { useAmoIntegration } from "./useAmoIntegration"; +import { MinifiedData, QuestionKeys, TagKeys, TagQuestionHC } from "./types"; +import { Quiz } from "@/model/quiz/quiz"; +import { AccountResponse, setIntegrationRules, updateIntegrationRules } from "@/api/integration"; +import { AnyTypedQuizQuestion } from "@frontend/squzanswerer"; +import { UntypedQuizQuestion } from "@/model/questionTypes/shared"; + +const FCTranslate = { + "name": "имя", + "email": "почта", + "phone": "телефон", + "text": "номер", + "address": "адрес", +} + +interface Props { + quiz: Quiz; + questions: (AnyTypedQuizQuestion | UntypedQuizQuestion)[]; + firstRules: boolean; + accountInfo: AccountResponse | null; + arrayOfPipelines: MinifiedData[]; + arrayOfPipelinesSteps: MinifiedData[]; + arrayOfUsers: MinifiedData[]; + arrayOfTags: MinifiedData[]; + arrayOfFields: MinifiedData[]; + selectedPipeline: string | null; + 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; +} + +export const SwitchPages = ({ + quiz, + questions, + firstRules, + accountInfo, + arrayOfPipelines, + arrayOfPipelinesSteps, + arrayOfUsers, + arrayOfTags, + arrayOfFields, + selectedPipeline, + setSelectedPipeline, + selectedCurrentFields, + selectedPipelineStep, + setSelectedPipelineStep, + selectedDealUser, + setSelectedDealPerformer, + selectedTags, + setSelectedTags, + selectedQuestions, + setSelectedQuestions, + setPageOfPipelines, + setPageOfPipelinesSteps, + setPageOfUsers, + setPageOfTags, + setSelectedCurrentFields, + handleCloseModal, + +}: Props) => { + const [step, setStep] = useState(0) + const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("") + const [openDelete, setOpenDelete] = useState(null); + + + const minifiedQuestions = useMemo( + () => + questions + .filter((q) => q.type !== "result" && q.type !== null) + .map(({ backendId, title }) => ({ + id: backendId.toString() as string, + title, + })), + [questions] + ); + const FieldsAllowedFC = useMemo( + () => { + const list: MinifiedData[] = [] + if (quiz.config.showfc) { + const fields = quiz.config.formContact.fields + for (let key in fields) { + if (fields[key].used) list.push({ + id: key, + title: FCTranslate[key], + entity: "Contact", + }) + } + } + return list; + }, + [quiz] + ); + 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, + }], + })); + } + } + + const handleDeleteTagQuestion = () => { + if (openDelete === null || !openDelete.scope || !openDelete.id || !openDelete.type) return; + if (openDelete.type === "tag") { + let newArray = selectedTags[openDelete.scope]; + const index = newArray.indexOf(openDelete.id); + if (index !== -1) newArray.splice(index, 1); + + setSelectedTags((prevState) => ({ + ...prevState, + [openDelete.scope]: newArray, + })); + } + + if (openDelete.type === "question") { + let newArray = selectedQuestions + newArray[openDelete.scope as QuestionKeys] = newArray[openDelete.scope as QuestionKeys].filter(e => e.id !== openDelete.id) + // let index = -1 + // selectedQuestions[openDelete.scope].forEach((e, i) => { + // if (e.subTitle === openDelete.id) index = i + // }) + // if (index !== -1) newArray.splice(index, 1); + // setSelectedQuestions((prevState) => ({ + // ...prevState, + // [openDelete.scope]: newArray, + // })); + setSelectedQuestions(newArray); + setSelectedCurrentFields(selectedCurrentFields.filter(e => e.id !== openDelete.id)); + + } + setOpenDelete(null); + } + + const handleNextStep = () => { + setStep((prevState) => prevState + 1); + }; + const handlePrevStep = () => { + setStep((prevState) => prevState - 1); + }; + const handleSave = () => { + if (quiz?.backendId === undefined) return; + if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку"); + if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки"); + + const body = { + PipelineID: Number(selectedPipeline), + StepID: Number(selectedPipelineStep), + PerformerID: Number(selectedDealUser), + // FieldsRule: questionsBackend, + TagsToAdd: selectedTags, + }; + + const FieldsRule = { + Company: { QuestionID: {} }, + Lead: { QuestionID: {} }, + Customer: { QuestionID: {} }, + Contact: { + QuestionID: {}, + ContactRuleMap: { + } + }, + }; + + for (let key in FieldsRule) { + selectedQuestions[key as QuestionKeys].forEach((data) => { + FieldsRule[key as QuestionKeys].QuestionID[data.id] = 0; + }); + } + + selectedCurrentFields.forEach((data) => { + if (data.entity === "Contact") { + FieldsRule.Contact.ContactRuleMap[data.id] = Number(data.amoId) + } else { + FieldsRule[data.entity].QuestionID[data.id] = Number(data.amoId) || 0 + } + }) + + + for (let key in body.TagsToAdd) { + body.TagsToAdd[key as TagKeys] = body.TagsToAdd[key as TagKeys].map((id) => Number(id)); + } + body.FieldsRule = FieldsRule; + + // if (firstRules) { + // setIntegrationRules(quiz.backendId.toString(), body); + // } else { + // updateIntegrationRules(quiz.backendId.toString(), body); + // } + + handleCloseModal(); + }; + + + const closeSpecialPage = () => setSpecialPage("") + + const steps = [ + { + title: "Выбор воронки", + desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку", + isSettingsAvailable: true, + component: ( + + ), + }, + { + title: "Выбор этапа воронки", + desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку", + isSettingsAvailable: true, + component: ( + + ), + }, + { + title: "Сделка", + desc: "На этом этапе вы можете выбрать ответственного за сделку", + isSettingsAvailable: true, + component: ( + + ), + }, + { + title: "Добавление тегов", + isSettingsAvailable: true, + component: ( + { }} + handleAddTag={handleAddTagQuestion} + handlePrevStep={handlePrevStep} + handleNextStep={handleNextStep} + /> + ), + }, + { + title: "Соотнесение вопросов и сущностей", + isSettingsAvailable: true, + component: ( + + ), + }, + ] + + const stepTitles = steps.map((step) => step.title); + + switch (specialPage) { + case "deleteCell": + return + case "removeAccount": + return + case "settingsBlock": + return u.id === selectedDealUser)?.title || "не указан"} + selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"} + selectedStage={ + arrayOfPipelinesSteps.find((s) => s.id === selectedPipelineStep)?.title || "нет данных" + } + selectedQuestions={selectedQuestions} + selectedTags={selectedTags} + /> + case "amoLogin": return + case "accountInfo": return + + + default: {steps[step].component} + } +} + +// const S = setSpecialPage("removeAccount")} + // /> + + +// title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте", +// isSettingsAvailable: false, +// component: accountInfo ? ( +// +// ) : ( +// +// ), +// }, \ No newline at end of file diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoTags/AmoTags.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx similarity index 96% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoTags/AmoTags.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx index e02bcdaf..b7329f67 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoTags/AmoTags.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx @@ -1,6 +1,6 @@ import { FC, useState } from "react"; import { Box } from "@mui/material"; -import { ItemsSelectionView } from "../AmoQuestions/ItemsSelectionView/ItemsSelectionView"; +import { ItemsSelectionView } from "../Questions/ItemsSelectionView/ItemsSelectionView"; import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView"; import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types"; import { DataConstrictor } from "../Components/DataConstrictor"; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoTags/TagsDetailsView/TagsDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx similarity index 95% rename from src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoTags/TagsDetailsView/TagsDetailsView.tsx rename to src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx index 398c42e8..499743a7 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoTags/TagsDetailsView/TagsDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx @@ -1,7 +1,7 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; +import { StepButtonsBlock } from "../../StepButtonsBlock"; import { FC } from "react"; -import { Item } from "../../AmoQuestions/Item/Item"; +import { Item } from "../../Questions/Item/Item"; import { MinifiedData, SelectedTags, TagKeys } from "../../types"; type TagsDetailsViewProps = { diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx new file mode 100644 index 00000000..ef2ce17b --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx @@ -0,0 +1,166 @@ +import { FC, useState } from "react"; +import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box, Skeleton } from "@mui/material"; +import { useQuestions } from "@/stores/questions/hooks"; +import { redirect, useNavigate } from "react-router-dom"; + +import CloseIcon from "@mui/icons-material/Close"; + +import { useAmoIntegration } from "./useAmoIntegration"; +import { MinifiedData } from "./types"; +import { Quiz } from "@/model/quiz/quiz"; +import { SwitchPages } from "./SwitchPages"; + +type IntegrationsModalProps = { + isModalOpen: boolean; + handleCloseModal: () => void; + companyName: string | null; + quiz: Quiz; +}; + +export const AmoCRMModal: FC = ({ isModalOpen, handleCloseModal, companyName, quiz }) => { + //Если нет контекста квиза, то и делать на этой страничке нечего + if (quiz.backendId === undefined) { + redirect("/list"); + return null; + } + + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + + const { questions } = useQuestions(); + + const [isTryRemoveAccount, setIsTryRemoveAccount] = useState(false); + + const { + isLoadingPage, + firstRules, + accountInfo, + arrayOfPipelines, + arrayOfPipelinesSteps, + arrayOfUsers, + arrayOfTags, + arrayOfFields, + selectedPipeline, + setSelectedPipeline, + selectedCurrentFields, + selectedPipelineStep, + setSelectedPipelineStep, + selectedDealUser, + setSelectedDealPerformer, + questionsBackend, + selectedTags, + setSelectedTags, + selectedQuestions, + setSelectedQuestions, + setPageOfPipelines, + setPageOfPipelinesSteps, + setPageOfUsers, + setPageOfTags, + setSelectedCurrentFields, + } = useAmoIntegration({ + quizID: quiz.backendId, + isModalOpen, + isTryRemoveAccount, + questions, + }); + + return ( + + + + Интеграция с {companyName ? companyName : "партнером"} + + + + + + + {isLoadingPage ? + : + + } + + + ); +}; + +export const diffArr = (arr_A: MinifiedData[], arr_B: MinifiedData[]) => { + return arr_A.filter(person_A => !arr_B.some(person_B => person_A.id === person_B.id)); +} \ No newline at end of file diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts b/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts index e20b272d..28abadf6 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts @@ -13,6 +13,7 @@ import { getFields, } from "@/api/integration"; import { AnyTypedQuizQuestion } from "@frontend/squzanswerer"; +import { UntypedQuizQuestion } from "@/model/questionTypes/shared"; const SIZE = 275; @@ -20,7 +21,7 @@ interface Props { isModalOpen: boolean; isTryRemoveAccount: boolean; quizID: number; - questions: AnyTypedQuizQuestion + questions: (AnyTypedQuizQuestion | UntypedQuizQuestion)[] } const FCTranslate = { @@ -151,6 +152,22 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que }, [isModalOpen, isTryRemoveAccount]); + useEffect(() => { + const transletedQuestions = {} + + Object.keys(selectedQuestions).forEach((column) => { + selectedQuestions[column].forEach((minifiedData) => { + const q = questions.find(e => e.backendId === Number(minifiedData.id)) || {} + transletedQuestions[column] = { + ...minifiedData, + title: q.title || transletedQuestions[column].title + } + }) + }) + + setSelectedQuestions(transletedQuestions) + }, [questions]) + useEffect(() => { getPipelines({ page: pageOfPipelines, diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx index 9834371e..48983487 100644 --- a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx @@ -16,7 +16,7 @@ const AnalyticsModal = lazy(() => ); const AmoCRMModal = lazy(() => - import("../IntegrationsModal/Amo/AmoCRMModal").then((module) => ({ + import("../IntegrationsModal/Amo").then((module) => ({ default: module.AmoCRMModal, })) ); From 7766c2d3a554faa28922585963d05a7f01eb97e2 Mon Sep 17 00:00:00 2001 From: Nastya Date: Sat, 10 Aug 2024 20:48:36 +0300 Subject: [PATCH 3/7] =?UTF-8?q?=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B9?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D1=82=D0=B5=D0=BB=D1=8F=20(=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B8=D0=B7=D1=83=D0=B0?= =?UTF-8?q?=D0=BB=D0=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IntegrationsModal/Amo/AccountInfo.tsx | 136 +++++++++++++++--- .../IntegrationsModal/Amo/SwitchPages.tsx | 6 +- .../IntegrationsModal/Amo/index.tsx | 7 +- 3 files changed, 121 insertions(+), 28 deletions(-) diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx index dd4595ac..41fbd5a4 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx @@ -1,7 +1,8 @@ -import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"; import { StepButtonsBlock } from "./StepButtonsBlock"; import { FC } from "react"; import { AccountResponse } from "@api/integration"; +import AccountSetting from "@icons/AccountSetting"; type AmoAccountInfoProps = { handleNextStep: () => void; @@ -16,14 +17,22 @@ export const AccountInfo: FC = ({ handleNextStep, accountIn - {title}: + {title}: - + {value || "нет данных"} @@ -33,49 +42,132 @@ export const AccountInfo: FC = ({ handleNextStep, accountIn - {title}: + {title}: {link} - + ); return ( - {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)} + + + Информация об аккаунте + + + 1 шаг + + {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)} + + { const [step, setStep] = useState(0) - const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("") + const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("accountInfo") const [openDelete, setOpenDelete] = useState(null); @@ -350,13 +350,13 @@ export const SwitchPages = ({ selectedTags={selectedTags} /> case "amoLogin": return - case "accountInfo": return - default: {steps[step].component} + default: return {steps[step].component} } } diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx index ef2ce17b..15b6ec64 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx @@ -73,8 +73,8 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo // fullScreen={isMobile} PaperProps={{ sx: { - maxWidth: isTablet ? "100%" : "920px", - maxHeight: isTablet ? "100%" : "680px", + maxWidth: isTablet ? "100%" : "919px", + maxHeight: isTablet ? "100%" : "658px", borderRadius: "12px", }, }} @@ -110,10 +110,11 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo Date: Sun, 11 Aug 2024 02:18:27 +0300 Subject: [PATCH 4/7] =?UTF-8?q?fix=20=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB?= =?UTF-8?q?=20=D0=B8=D0=BD=D1=84=D0=BE=20=D0=BE=20=D0=B0=D0=BA=D0=BA=D0=B5?= =?UTF-8?q?,=20=D0=B2=D1=8B=D1=81=D1=82=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=BD=D0=B0=20=D1=88=D0=B0=D0=B3=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IntegrationsModal/Amo/AccountInfo.tsx | 96 +++++++------- .../IntegrationsModal/Amo/DealPerformers.tsx | 14 ++ .../IntegrationsModal/Amo/ModalTitle.tsx | 57 ++------ .../IntegrationsModal/Amo/PipelineSteps.tsx | 15 +++ .../IntegrationsModal/Amo/Pipelines.tsx | 90 +++++++------ .../Amo/Questions/AmoQuestions.tsx | 45 +++---- .../Amo/StepButtonsBlock.tsx | 5 +- .../IntegrationsModal/Amo/SwitchPages.tsx | 124 ++++++++++-------- .../IntegrationsModal/Amo/Tags/AmoTags.tsx | 105 ++++++++------- .../IntegrationsModal/Amo/index.tsx | 9 +- 10 files changed, 300 insertions(+), 260 deletions(-) diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx index 41fbd5a4..60db8082 100644 --- 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 = ({ 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) => ( = ({ handleNextStep, accountIn ); - const infoItemLink = (title: string, link: string) => ( + const infoItemLink = (title: string, link: string | undefined) => ( = ({ handleNextStep, accountIn mt: "20px", }} > - + {title}: - - - {link} - + + { + link ? + + {link} + + : + не указана + } ); return ( - + = ({ handleNextStep, accountIn 1 шаг - {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)} + + + void; selectedDealUser: string | null; setSelectedDealPerformer: (value: string | null) => void; + + titleProps: { + step: number; + title: string; + desc: string; + toSettings: () => void; + } }; export const DealPerformers: FC = ({ @@ -18,12 +26,17 @@ export const DealPerformers: FC = ({ handleNextStep, selectedDealUser, setSelectedDealPerformer, + titleProps, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); return ( + <> + = ({ /> + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx index fa533f05..86769fa8 100644 --- 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 = ({ 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 ( @@ -49,10 +31,10 @@ export const ModalTitle: FC = ({ lineHeight: "1", }} > - {isSettingsBlock ? "Мои настройки" : steps[step].title} + {title} { - steps[step].desc && + desc && = ({ m: "5px 0 15px 0" }} > - {steps[step].desc} + {desc} } - {isSettingsBlock || ( = ({ lineHeight: "1", }} > - Шаг {step + 1} + {step} шаг - )} - {steps[step].isSettingsAvailable && ( + - )} ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx index 6939987b..d419faaf 100644 --- 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 = ({ @@ -27,12 +35,18 @@ export const PipelineSteps: FC = ({ handlePrevStep, handleNextStep, + + titleProps }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); return ( + <> + = ({ /> + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx index b00cdfc2..cfd6c784 100644 --- 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 = ({ pipelines, selectedPipeline, setSelectedPipeline, + titleProps, users, selectedDealUser, @@ -32,49 +41,54 @@ export const Pipelines: FC = ({ const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); return ( - - - {}} - /> - + <> + - {}} - /> + + { }} + /> + + + { }} + /> + + + + - - - - + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx index 910a7965..400c197a 100644 --- 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 = ({ handleNextStep, openDelete, FieldsAllowedFC, - setSelectedCurrentFields + setSelectedCurrentFields, + titleProps, }) => { const [isSelection, setIsSelection] = useState(false); const [activeScope, setActiveScope] = useState(null); @@ -109,17 +116,6 @@ export const AmoQuestions: FC = ({ const [sortedFieldsItems, setSortedFieldsItems] = useState(fieldsItems); const [sortedquestionsItems, setSortedquestionsItems] = useState(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 = ({ setSortedquestionsItems(questionsItems); }, [activeScope]) return ( + <> + = ({ }} > {isSelection && activeScope !== null ? ( + // Здесь выбираем элемент в табличку <> - - {/* табличка */} - = ({ isCurrentFields={isCurrentFields} /> - // Здесь выбираем элемент в табличку - // { - // setActiveScope(null); - // setIsSelection(false); - // }} - // onLargeBtnClick={() => { - // handleAdd(); - // setActiveScope(null); - // setIsSelection(false); - // }} - // /> ) : ( // Табличка = ({ /> )} + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx index d829f09a..94a80e81 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/StepButtonsBlock.tsx @@ -30,9 +30,10 @@ export const StepButtonsBlock: FC = ({ {isSmallBtnMissing || ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx index 826bf38e..1c123dc7 100644 --- 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: ( 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: ( setSpecialPage("settingsBlock") + }} /> ), }, { - title: "Сделка", - desc: "На этом этапе вы можете выбрать ответственного за сделку", isSettingsAvailable: true, component: ( setSpecialPage("settingsBlock") + }} /> ), }, { - title: "Добавление тегов", isSettingsAvailable: true, component: ( setSpecialPage("settingsBlock") + }} /> ), }, { - title: "Соотнесение вопросов и сущностей", isSettingsAvailable: true, component: ( setSpecialPage("settingsBlock") + }} /> ), }, @@ -351,7 +371,7 @@ export const SwitchPages = ({ /> case "amoLogin": return case "accountInfo": return setSpecialPage("")} accountInfo={accountInfo} /> @@ -361,13 +381,13 @@ export const SwitchPages = ({ } // const S = setSpecialPage("removeAccount")} - // /> +// step={1} +// steps={2} +// isSettingsBlock={true} +// setIsSettingsBlock={setIsSettingsBlock} +// setStep={setStep} +// startRemoveAccount={() => setSpecialPage("removeAccount")} +// /> // title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте", diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx index b7329f67..6ac7c682 100644 --- 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 = ({ @@ -23,6 +30,7 @@ export const AmoTags: FC = ({ handleScroll, handlePrevStep, handleNextStep, + titleProps, }) => { const [sortedTagsItems, setSortedTagsItems] = useState(tagsItems); @@ -43,55 +51,60 @@ export const AmoTags: FC = ({ }); }; 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 ( - - {isSelection && activeScope !== null ? ( - // Здесь выбираем элемент в табличку - <> - + + + {isSelection && activeScope !== null ? ( + // Здесь выбираем элемент в табличку + <> + + { + setActiveScope(null); + setIsSelection(false); + }} + onLargeBtnClick={() => { + handleAdd(); + setActiveScope(null); + setIsSelection(false); + }} + /> + + ) : ( + // Табличка + - { - setActiveScope(null); - setIsSelection(false); - }} - onLargeBtnClick={() => { - handleAdd(); - setActiveScope(null); - setIsSelection(false); - }} - /> - - ) : ( - // Табличка - - )} - + )} + + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx index 15b6ec64..435557af 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx @@ -74,11 +74,12 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo PaperProps={{ sx: { maxWidth: isTablet ? "100%" : "919px", - maxHeight: isTablet ? "100%" : "658px", + height: "658px", borderRadius: "12px", }, }} > + = ({ isModalOpen, handleClo > + {isLoadingPage ? From 0c7a54d4ba3af1c8a2fe74ace011a53d165008e3 Mon Sep 17 00:00:00 2001 From: Nastya Date: Sun, 11 Aug 2024 05:03:46 +0300 Subject: [PATCH 5/7] =?UTF-8?q?=D0=BE=D1=81=D0=BD=D0=BE=D0=B2=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=B0=20=D0=BD=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=BE=D0=B5=D0=BA=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8?= =?UTF-8?q?=D0=B2=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomRadioGroup/CustomRadioGroup.tsx | 2 +- src/components/CustomSelect/CustomSelect.tsx | 2 +- .../IntegrationsModal/Amo/AccountInfo.tsx | 5 +- .../IntegrationsModal/Amo/DealPerformers.tsx | 9 +- .../IntegrationsModal/Amo/ModalTitle.tsx | 46 +++--- .../IntegrationsModal/Amo/PipelineSteps.tsx | 91 ++++++------ .../IntegrationsModal/Amo/Pipelines.tsx | 53 ++++--- .../Amo/Questions/AmoQuestions.tsx | 136 ++++++++++-------- .../ItemDetailsView/ItemDetailsView.tsx | 16 --- .../SettingsBlock/SettingItem/SettingItem.tsx | 8 +- .../SettingItemHeader/SettingItemHeader.tsx | 11 +- .../Amo/SettingsBlock/SettingsBlock.tsx | 37 +++-- .../IntegrationsModal/Amo/SwitchPages.tsx | 23 ++- .../IntegrationsModal/Amo/Tags/AmoTags.tsx | 101 +++++++------ .../Tags/TagsDetailsView/TagsDetailsView.tsx | 19 +-- 15 files changed, 297 insertions(+), 262 deletions(-) diff --git a/src/components/CustomRadioGroup/CustomRadioGroup.tsx b/src/components/CustomRadioGroup/CustomRadioGroup.tsx index 99cd0d89..31889355 100644 --- a/src/components/CustomRadioGroup/CustomRadioGroup.tsx +++ b/src/components/CustomRadioGroup/CustomRadioGroup.tsx @@ -106,7 +106,7 @@ export const CustomRadioGroup: FC = ({ border: `1px solid ${theme.palette.grey2.main}`, borderRadius: "12px", padding: "5px", - height: "305px", + maxHeight: "305px", overflowY: "auto", }} > diff --git a/src/components/CustomSelect/CustomSelect.tsx b/src/components/CustomSelect/CustomSelect.tsx index 15fd7e0c..1020acef 100644 --- a/src/components/CustomSelect/CustomSelect.tsx +++ b/src/components/CustomSelect/CustomSelect.tsx @@ -93,7 +93,7 @@ export const CustomSelect: FC = ({ items, selectedItemId, set }, [items, selectedItemId]); return ( - + void; accountInfo: AccountResponse | null; + toChangeAccount: () => void; }; -export const AccountInfo: FC = ({ handleNextStep, accountInfo }) => { +export const AccountInfo: FC = ({ handleNextStep, accountInfo, toChangeAccount }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -135,7 +136,7 @@ export const AccountInfo: FC = ({ handleNextStep, accountIn width={"20px"} /> } - onClick={() => { }} + onClick={toChangeAccount} sx={{ height: "44px", padding: "0", diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx index 14eb6644..0ed87b1a 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx @@ -34,19 +34,20 @@ export const DealPerformers: FC = ({ return ( <> - - + + = ({ const isMobile = useMediaQuery(theme.breakpoints.down(600)); return ( - + = ({ sx={{ color: "#4D4D4D", fontSize: "16px", - m: "5px 0 15px 0" + m: "5px 0 15px 0", + whiteSpace: "break-spaces", + width: "90%" }} > {desc} } - - {step} шаг - + + {step} шаг + - + + + + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx index d419faaf..353723a8 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx @@ -44,53 +44,60 @@ export const PipelineSteps: FC = ({ return ( <> - - - - {}} - /> - + - {}} - /> + }}> + + + { }} + /> + + + { }} + /> + + + + + - - - - ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx index cfd6c784..ce09c838 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx @@ -42,44 +42,51 @@ export const Pipelines: FC = ({ const isTablet = useMediaQuery(theme.breakpoints.down(1000)); return ( <> - - - { }} - /> - - { }} - /> + }}> + + + { }} + /> + + + { }} + /> + diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx index 400c197a..a6deaf0f 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx @@ -7,6 +7,7 @@ import { EntitiesQuestions } from "./EntitiesQuestions"; import { diffArr } from ".."; import { DataConstrictor } from "../Components/DataConstrictor"; import { ModalTitle } from "../ModalTitle"; +import { StepButtonsBlock } from "../StepButtonsBlock"; type Props = { selectedCurrentFields: MinifiedData[] | []; @@ -132,66 +133,83 @@ export const AmoQuestions: FC = ({ }, [activeScope]) return ( <> - - - {isSelection && activeScope !== null ? ( - // Здесь выбираем элемент в табличку - <> - - { - setActiveScope(null); - setIsSelection(false); - }} - onLargeBtnClick={() => { - handleAdd(); - setActiveScope(null); - setIsSelection(false); - }} - activeScope={activeScope} - setIsCurrentFields={setIsCurrentFields} - isCurrentFields={isCurrentFields} - /> - - ) : ( - // Табличка - + - )} - + + {isSelection && activeScope !== null ? ( + // Здесь выбираем элемент в табличку + <> + + { + setActiveScope(null); + setIsSelection(false); + }} + onLargeBtnClick={() => { + handleAdd(); + setActiveScope(null); + setIsSelection(false); + }} + activeScope={activeScope} + setIsCurrentFields={setIsCurrentFields} + isCurrentFields={isCurrentFields} + /> + + ) : ( + // Табличка + + )} + + + + + + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx index 89aca507..23ab2914 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx @@ -9,8 +9,6 @@ type TitleKeys = "Contact" | "Company" | "Lead" | "Customer"; type ItemDetailsViewProps = { items: MinifiedData[]; setIsSelection: (value: boolean) => void; - handleSmallBtn: () => void; - handleLargeBtn: () => void; selectedQuestions: SelectedQuestions; setActiveScope: (value: QuestionKeys | null) => void; deleteHC: (id: string, scope: QuestionKeys) => void; @@ -18,8 +16,6 @@ type ItemDetailsViewProps = { export const ItemDetailsView: FC = ({ items, - handleSmallBtn, - handleLargeBtn, selectedQuestions, setIsSelection, setActiveScope, @@ -68,18 +64,6 @@ export const ItemDetailsView: FC = ({ ))} - - - ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItem.tsx index ee1614be..ce9cf851 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItem.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItem.tsx @@ -9,8 +9,7 @@ import { SelectedQuestions, SelectedTags } from "../../types"; type SettingItemProps = { step: number; title: string; - setStep: (value: number) => void; - setIsSettingsBlock: (value: boolean) => void; + setStep: (step: number) => void; selectedFunnelPerformer: string | null; selectedFunnel: string | null; selectedStagePerformer: string | null; @@ -24,7 +23,6 @@ export const SettingItem: FC = ({ step, title, setStep, - setIsSettingsBlock, selectedFunnelPerformer, selectedFunnel, selectedStagePerformer, @@ -34,6 +32,7 @@ export const SettingItem: FC = ({ selectedTags, }) => { const theme = useTheme(); + console.log(step) const isMobile = useMediaQuery(theme.breakpoints.down(600)); if (step === 0) { return; @@ -146,8 +145,7 @@ export const SettingItem: FC = ({ setStep(step)} /> {SettingsContent} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx index 61a43ea2..bbf6d11a 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx @@ -6,23 +6,16 @@ import { FC } from "react"; type SettingItemHeaderProps = { title: string; step: number; - setStep: (value: number) => void; - setIsSettingsBlock: (value: boolean) => void; + setStep: () => void; }; export const SettingItemHeader: FC = ({ title, step, setStep, - setIsSettingsBlock, }) => { const theme = useTheme(); - const handleClick = () => { - setStep(step); - setIsSettingsBlock(false); - }; - return ( = ({ > {step} этап - + void; - setIsSettingsBlock: (value: boolean) => void; selectedFunnel: string | null; selectedStage: string | null; selectedDealUser: string | null; selectedQuestions: SelectedQuestions; selectedTags: SelectedTags; + toBack: () => void + setStep: (step: number) => void }; export const SettingsBlock: FC = ({ stepTitles, - setStep, - setIsSettingsBlock, selectedFunnel, selectedDealUser, selectedStage, selectedQuestions, selectedTags, + toBack, + setStep, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); return ( - + + + Мои настройки + = ({ {stepTitles && stepTitles.map((title, index) => ( ))} setIsSettingsBlock(false)} + onSmallBtnClick={toBack} isLargeBtnMissing={true} /> diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx index 1c123dc7..e6868cf2 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx @@ -90,7 +90,7 @@ export const SwitchPages = ({ handleCloseModal, }: Props) => { const [step, setStep] = useState(0) - const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("accountInfo") + const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">(accountInfo ? "accountInfo" : "amoLogin") const [openDelete, setOpenDelete] = useState(null); @@ -226,6 +226,8 @@ export const SwitchPages = ({ } body.FieldsRule = FieldsRule; + console.log(body) + // if (firstRules) { // setIntegrationRules(quiz.backendId.toString(), body); // } else { @@ -353,14 +355,12 @@ export const SwitchPages = ({ /> case "removeAccount": return case "settingsBlock": return u.id === selectedDealUser)?.title || "не указан"} selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"} selectedStage={ @@ -368,15 +368,26 @@ export const SwitchPages = ({ } selectedQuestions={selectedQuestions} selectedTags={selectedTags} + toBack={() => closeSpecialPage()} + setStep={(step: number) => { + closeSpecialPage() + setStep(step) + }} /> case "amoLogin": return case "accountInfo": return setSpecialPage("")} + handleNextStep={() => closeSpecialPage()} accountInfo={accountInfo} + toChangeAccount={() => setSpecialPage("removeAccount")} /> - default: return {steps[step].component} + default: return {steps[step].component} } } diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx index 6ac7c682..66743049 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx @@ -5,6 +5,7 @@ import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView"; import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types"; import { DataConstrictor } from "../Components/DataConstrictor"; import { ModalTitle } from "../ModalTitle"; +import { StepButtonsBlock } from "../StepButtonsBlock"; type Props = { tagsItems: MinifiedData[] | []; @@ -57,53 +58,67 @@ export const AmoTags: FC = ({ return ( <> - + + + + {isSelection && activeScope !== null ? ( + // Здесь выбираем элемент в табличку + <> + + { + setActiveScope(null); + setIsSelection(false); + }} + onLargeBtnClick={() => { + handleAdd(); + setActiveScope(null); + setIsSelection(false); + }} + /> + + ) : ( + // Табличка + + )} + + - {isSelection && activeScope !== null ? ( - // Здесь выбираем элемент в табличку - <> - - { - setActiveScope(null); - setIsSelection(false); - }} - onLargeBtnClick={() => { - handleAdd(); - setActiveScope(null); - setIsSelection(false); - }} - /> - - ) : ( - // Табличка - - )} + ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx index 499743a7..61499c08 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx @@ -7,8 +7,6 @@ import { MinifiedData, SelectedTags, TagKeys } from "../../types"; type TagsDetailsViewProps = { items: MinifiedData[]; setIsSelection: (value: boolean) => void; - handlePrevStep: () => void; - handleNextStep: () => void; setActiveScope: (value: TagKeys | null) => void; selectedTags: SelectedTags; deleteHC: (id: string, scope: TagKeys) => void; @@ -19,8 +17,6 @@ export const TagsDetailsView: FC = ({ setActiveScope, selectedTags, setIsSelection, - handlePrevStep, - handleNextStep, deleteHC, }) => { const theme = useTheme(); @@ -30,7 +26,7 @@ export const TagsDetailsView: FC = ({ return ( = ({ = ({ ))} - - - ); }; From 924c488af336a7afa390d797de4d36bfd75b9c50 Mon Sep 17 00:00:00 2001 From: Nastya Date: Wed, 14 Aug 2024 04:19:14 +0300 Subject: [PATCH 6/7] =?UTF-8?q?=D0=BA=D0=BE=D1=80=D1=80=D0=B5=D0=BA=D1=82?= =?UTF-8?q?=D0=BD=D0=B0=D1=8F=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20?= =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D0=BE=D0=B2,=20=D1=80?= =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=B5=D1=82=20=D1=83=D0=B4=D0=B0?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=8F=D1=87=D0=B5=D0=B5=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AmoButton/AmoButton.tsx | 2 +- .../CustomRadioGroup/CustomRadioGroup.tsx | 17 +- src/components/CustomSelect/CustomSelect.tsx | 17 +- .../IntegrationsModal/Amo/DealPerformers.tsx | 4 +- .../IntegrationsModal/Amo/PipelineSteps.tsx | 11 +- .../IntegrationsModal/Amo/Pipelines.tsx | 8 +- .../Amo/Questions/AmoQuestions.tsx | 39 +-- .../Amo/Questions/CurrentFields.tsx | 52 ++-- .../Amo/Questions/EntitiesQuestions.tsx | 29 +-- .../ItemsSelectionView/ItemsSelectionView.tsx | 17 -- .../IntegrationsModal/Amo/SwitchPages.tsx | 62 ++--- .../IntegrationsModal/Amo/Tags/AmoTags.tsx | 58 +++-- .../IntegrationsModal/Amo/index.tsx | 2 + .../Amo/useAmoIntegration.ts | 229 ++++++++++-------- src/utils/throttle.ts | 10 + 15 files changed, 280 insertions(+), 277 deletions(-) create mode 100644 src/utils/throttle.ts diff --git a/src/components/AmoButton/AmoButton.tsx b/src/components/AmoButton/AmoButton.tsx index 0c04b643..b6f93c2f 100644 --- a/src/components/AmoButton/AmoButton.tsx +++ b/src/components/AmoButton/AmoButton.tsx @@ -1,5 +1,5 @@ import { Button, Typography, useMediaQuery, useTheme } from "@mui/material"; -import AmoLogo from "../../assets/icons/Amologo.png"; +import AmoLogo from "@/assets/icons/Amologo.png"; import { FC } from "react"; type AmoButtonProps = { diff --git a/src/components/CustomRadioGroup/CustomRadioGroup.tsx b/src/components/CustomRadioGroup/CustomRadioGroup.tsx index 31889355..1df2888a 100644 --- a/src/components/CustomRadioGroup/CustomRadioGroup.tsx +++ b/src/components/CustomRadioGroup/CustomRadioGroup.tsx @@ -3,6 +3,8 @@ import { FC, useMemo } from "react"; import CheckboxIcon from "@icons/Checkbox"; import { SelectChangeEvent, Typography, useTheme, Box, FormControlLabel, RadioGroup, Radio, useMediaQuery } from "@mui/material"; import { MinifiedData, TagKeys } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types"; +import { determineScrollBottom } from "@/utils/throttle"; +import { throttle } from "@frontend/kitui"; type CustomRadioGroupProps = { items: MinifiedData[] | []; @@ -34,17 +36,6 @@ export const CustomRadioGroup: FC = ({ return item.entity === activeScope; }) : items - const onScroll = React.useCallback((e: React.UIEvent) => { - const scrollHeight = e.currentTarget.scrollHeight; - const scrollTop = e.currentTarget.scrollTop; - const clientHeight = e.currentTarget.clientHeight; - const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9; - - if (scrolledToBottom) { - handleScroll(); - } - }, []); - const formControlLabels = (filteredItems.length !== 0) ? filteredItems.map((item) => ( @@ -101,7 +92,8 @@ export const CustomRadioGroup: FC = ({ return ( determineScrollBottom(e, throttle(handleScroll, 700))} sx={{ border: `1px solid ${theme.palette.grey2.main}`, borderRadius: "12px", @@ -115,7 +107,6 @@ export const CustomRadioGroup: FC = ({ name="controlled-radio-buttons-group" value={selectedItemId} onChange={({ target }: SelectChangeEvent) => setSelectedItem(target.value)} - onScroll={onScroll} > {formControlLabels} diff --git a/src/components/CustomSelect/CustomSelect.tsx b/src/components/CustomSelect/CustomSelect.tsx index 1020acef..ba5cc549 100644 --- a/src/components/CustomSelect/CustomSelect.tsx +++ b/src/components/CustomSelect/CustomSelect.tsx @@ -1,8 +1,10 @@ import * as React from "react"; import { FC, useCallback, useMemo, useRef, useState } from "react"; import { Avatar, MenuItem, Select, SelectChangeEvent, Typography, useMediaQuery, useTheme, Box } from "@mui/material"; -import arrow_down from "../../assets/icons/arrow_down.svg"; +import arrow_down from "@/assets/icons/arrow_down.svg"; import { MinifiedData } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types"; +import { throttle } from "@frontend/kitui"; +import { determineScrollBottom } from "@/utils/throttle"; type CustomSelectProps = { items: MinifiedData[] | []; @@ -22,17 +24,6 @@ export const CustomSelect: FC = ({ items, selectedItemId, set setOpened((isOpened) => !isOpened); }, []); - const onScroll = useCallback((e: React.UIEvent) => { - const scrollHeight = e.currentTarget.scrollHeight; - const scrollTop = e.currentTarget.scrollTop; - const clientHeight = e.currentTarget.clientHeight; - const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9; - - if (scrolledToBottom) { - handleScroll(); - } - }, []); - const currentItem = useMemo(() => items.find((item) => item.id === selectedItemId) || null, [selectedItemId, items]); const menuItems = useMemo(() => { @@ -149,7 +140,7 @@ export const CustomSelect: FC = ({ items, selectedItemId, set MenuProps={{ disablePortal: true, PaperProps: { - onScroll: onScroll, + onScroll: (e) => determineScrollBottom(e, throttle(handleScroll, 700)), style: { zIndex: 2, maxHeight: "300px", diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx index 0ed87b1a..9ffe4c98 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx @@ -18,6 +18,7 @@ type Props = { desc: string; toSettings: () => void; } + onScrollUsers: () => void; }; export const DealPerformers: FC = ({ @@ -26,6 +27,7 @@ export const DealPerformers: FC = ({ handleNextStep, selectedDealUser, setSelectedDealPerformer, + onScrollUsers, titleProps, }) => { const theme = useTheme(); @@ -52,7 +54,7 @@ export const DealPerformers: FC = ({ items={users} selectedItemId={selectedDealUser} setSelectedItem={setSelectedDealPerformer} - handleScroll={() => {}} + handleScroll={onScrollUsers} /> void; } + onScroll: () => void; + onScrollUsers: () => void; }; export const PipelineSteps: FC = ({ @@ -32,6 +34,9 @@ export const PipelineSteps: FC = ({ steps, selectedStep, setSelectedStep, + onScroll, + onScrollUsers, + handlePrevStep, handleNextStep, @@ -59,7 +64,7 @@ export const PipelineSteps: FC = ({ height: "100%", overflow: "auto", zIndex: 3, - width: "100%", + width: "100%", }}> = ({ items={users} selectedItemId={selectedDealUser} setSelectedItem={setSelectedDealPerformer} - handleScroll={() => { }} + handleScroll={onScrollUsers} /> = ({ items={steps} selectedItemId={selectedStep} setSelectedItem={setSelectedStep} - handleScroll={() => { }} + handleScroll={onScroll} /> diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx index ce09c838..21604793 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx @@ -22,6 +22,8 @@ type Props = { desc: string; toSettings: () => void; } + onScroll: () => void; + onScrollUsers: () => void; }; export const Pipelines: FC = ({ @@ -33,6 +35,8 @@ export const Pipelines: FC = ({ users, selectedDealUser, setSelectedDealPerformer, + onScroll, + onScrollUsers, handlePrevStep, handleNextStep, @@ -67,7 +71,7 @@ export const Pipelines: FC = ({ items={users} selectedItemId={selectedDealUser} setSelectedItem={setSelectedDealPerformer} - handleScroll={() => { }} + handleScroll={onScrollUsers} /> = ({ items={pipelines} selectedItemId={selectedPipeline} setSelectedItem={setSelectedPipeline} - handleScroll={() => { }} + handleScroll={onScroll} /> diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx index a6deaf0f..cdba06c8 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx @@ -25,6 +25,7 @@ type Props = { title: string; toSettings: () => void; } + onScroll: () => void; }; export type QuestionPair = { question: string, @@ -48,6 +49,7 @@ export const AmoQuestions: FC = ({ openDelete, FieldsAllowedFC, setSelectedCurrentFields, + onScroll, titleProps, }) => { const [isSelection, setIsSelection] = useState(false); @@ -167,18 +169,10 @@ export const AmoQuestions: FC = ({ selectedField={selectedField} selectedCurrentFields={selectedCurrentFields} setSelectedField={setSelectedField} - onSmallBtnClick={() => { - setActiveScope(null); - setIsSelection(false); - }} - onLargeBtnClick={() => { - handleAdd(); - setActiveScope(null); - setIsSelection(false); - }} activeScope={activeScope} setIsCurrentFields={setIsCurrentFields} isCurrentFields={isCurrentFields} + handleScroll={onScroll} /> ) : ( @@ -204,11 +198,28 @@ export const AmoQuestions: FC = ({ alignSelf: "end", }} > - + {isSelection && activeScope !== null ? + { + handleAdd(); + setActiveScope(null); + setIsSelection(false); + }} + largeBtnText={"Добавить"} + onSmallBtnClick={() => { + setActiveScope(null); + setIsSelection(false); + }} + smallBtnText={"Отменить"} + /> + : + + + } ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx index b8ca77c1..23430a64 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx @@ -1,8 +1,8 @@ import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup" -import {Box, Typography, useMediaQuery, useTheme} from "@mui/material" +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material" import { MinifiedData } from "../types"; -import {CustomSelect} from "@/components/CustomSelect/CustomSelect"; -import {CurrentFieldSelect} from "@/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile"; +import { CustomSelect } from "@/components/CustomSelect/CustomSelect"; +import { CurrentFieldSelect } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile"; interface Props { items: MinifiedData[]; @@ -11,6 +11,7 @@ interface Props { currentQuestion: string; setCurrentField: (value: string) => void; setCurrentQuestion: (value: string) => void; + handleScroll: () => void; } export const CurrentFields = ({ items, @@ -19,6 +20,7 @@ export const CurrentFields = ({ currentQuestion, setCurrentField, setCurrentQuestion, + handleScroll, }: Props) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -53,18 +55,18 @@ export const CurrentFields = ({ {isMobile && { }}/> + selectedItemId={currentField} + setSelectedItem={setCurrentField} + handleScroll={handleScroll} /> } {!isMobile && - { }} - activeScope={undefined} - /> + } @@ -85,20 +87,20 @@ export const CurrentFields = ({ }} >Выберите вопрос для этого поля {isMobile && - { }}/> + { }} /> } {!isMobile && - { }} - activeScope={undefined} - /> + { }} + activeScope={undefined} + /> } diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx index f8b7570b..8a9b7ed5 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx @@ -14,9 +14,7 @@ type ItemsSelectionViewProps = { setSelectedQuestion: (value: string | null) => void; selectedField?: string | null; setSelectedField: (value: string | null) => void; - handleScroll?: () => void; - onLargeBtnClick: () => void; - onSmallBtnClick: () => void; + handleScroll: () => void; activeScope: TagKeys; FieldsAllowedFC: MinifiedData[]; selectedCurrentFields: MinifiedData[]; @@ -31,8 +29,6 @@ export const EntitiesQuestions: FC = ({ selectedField, setSelectedField, handleScroll, - onLargeBtnClick, - onSmallBtnClick, activeScope, FieldsAllowedFC, selectedCurrentFields, @@ -41,13 +37,6 @@ export const EntitiesQuestions: FC = ({ }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); - console.log("--------------") - console.log("EntitiesQuestions") - console.log("вопросы") - console.log(items) - console.log("ФК") - console.log(FieldsAllowedFC) - console.log("------------------------------") return ( = ({ currentQuestion={selectedItemId} setCurrentField={setSelectedField} setCurrentQuestion={setSelectedQuestion} + handleScroll={handleScroll} /> : = ({ /> } - - { - onLargeBtnClick() - }} - largeBtnText={"Добавить"} - onSmallBtnClick={onSmallBtnClick} - smallBtnText={"Отменить"} - /> - ) } \ No newline at end of file diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx index 41e62c5c..f1c0a36f 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx @@ -9,8 +9,6 @@ type ItemsSelectionViewProps = { selectedItemId?: string | null; setSelectedItem: (value: string | null) => void; handleScroll?: () => void; - onLargeBtnClick: () => void; - onSmallBtnClick: () => void; activeScope: TagKeys; }; @@ -19,8 +17,6 @@ export const ItemsSelectionView: FC = ({ selectedItemId, setSelectedItem, handleScroll, - onLargeBtnClick, - onSmallBtnClick, activeScope, }) => { return ( @@ -49,19 +45,6 @@ export const ItemsSelectionView: FC = ({ activeScope={activeScope} /> - - - ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx index e6868cf2..a93c670c 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx @@ -53,10 +53,11 @@ interface Props { setSelectedTags: any; selectedQuestions: any; setSelectedQuestions: any; - setPageOfPipelines: any; - setPageOfPipelinesSteps: any; - setPageOfUsers: any; - setPageOfTags: any; + setPageOfPipelines: () => void; + setPageOfPipelinesSteps: () => void; + setPageOfUsers: () => void; + setPageOfTags: () => void; + setPageOfFields: () => void; setSelectedCurrentFields: any; handleCloseModal: any; } @@ -86,6 +87,7 @@ export const SwitchPages = ({ setPageOfPipelinesSteps, setPageOfUsers, setPageOfTags, + setPageOfFields, setSelectedCurrentFields, handleCloseModal, }: Props) => { @@ -93,6 +95,10 @@ export const SwitchPages = ({ const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">(accountInfo ? "accountInfo" : "amoLogin") const [openDelete, setOpenDelete] = useState(null); + const startDeleteTagQuestion = (itemForDelete) => { + setOpenDelete(itemForDelete) + setSpecialPage("deleteCell") + } const minifiedQuestions = useMemo( () => @@ -160,20 +166,12 @@ export const SwitchPages = ({ if (openDelete.type === "question") { let newArray = selectedQuestions newArray[openDelete.scope as QuestionKeys] = newArray[openDelete.scope as QuestionKeys].filter(e => e.id !== openDelete.id) - // let index = -1 - // selectedQuestions[openDelete.scope].forEach((e, i) => { - // if (e.subTitle === openDelete.id) index = i - // }) - // if (index !== -1) newArray.splice(index, 1); - // setSelectedQuestions((prevState) => ({ - // ...prevState, - // [openDelete.scope]: newArray, - // })); setSelectedQuestions(newArray); setSelectedCurrentFields(selectedCurrentFields.filter(e => e.id !== openDelete.id)); } setOpenDelete(null); + closeSpecialPage(); } const handleNextStep = () => { @@ -259,6 +257,8 @@ export const SwitchPages = ({ desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку", toSettings: () => setSpecialPage("settingsBlock") }} + onScroll={setPageOfPipelines} + onScrollUsers={setPageOfUsers} /> ), }, @@ -280,6 +280,8 @@ export const SwitchPages = ({ desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку", toSettings: () => setSpecialPage("settingsBlock") }} + onScroll={setPageOfPipelinesSteps} + onScrollUsers={setPageOfUsers} /> ), }, @@ -298,6 +300,7 @@ export const SwitchPages = ({ desc: "На этом этапе вы можете выбрать ответственного за сделку", toSettings: () => setSpecialPage("settingsBlock") }} + onScrollUsers={setPageOfUsers} /> ), }, @@ -307,8 +310,7 @@ export const SwitchPages = ({ { }} + openDelete={startDeleteTagQuestion} handleAddTag={handleAddTagQuestion} handlePrevStep={handlePrevStep} handleNextStep={handleNextStep} @@ -318,6 +320,7 @@ export const SwitchPages = ({ desc: "На этом этапе вы можете добавить теги с результатами", toSettings: () => setSpecialPage("settingsBlock") }} + onScroll={setPageOfTags} /> ), }, @@ -330,7 +333,7 @@ export const SwitchPages = ({ selectedCurrentFields={selectedCurrentFields} questionsItems={minifiedQuestions} selectedQuestions={selectedQuestions} - openDelete={setOpenDelete} + openDelete={startDeleteTagQuestion} handleAddQuestion={handleAddTagQuestion} handlePrevStep={handlePrevStep} handleNextStep={handleSave} @@ -340,6 +343,7 @@ export const SwitchPages = ({ title: "Соотнесение вопросов и сущностей", toSettings: () => setSpecialPage("settingsBlock") }} + onScroll={setPageOfFields} /> ), }, @@ -371,7 +375,7 @@ export const SwitchPages = ({ toBack={() => closeSpecialPage()} setStep={(step: number) => { closeSpecialPage() - setStep(step) + setStep(step-1) }} /> case "amoLogin": return @@ -389,26 +393,4 @@ export const SwitchPages = ({ overflow: "auto" }}>{steps[step].component} } -} - -// const S = setSpecialPage("removeAccount")} -// /> - - -// title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте", -// isSettingsAvailable: false, -// component: accountInfo ? ( -// -// ) : ( -// -// ), -// }, \ No newline at end of file +} \ No newline at end of file diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx index 66743049..3e254618 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx @@ -12,7 +12,6 @@ type Props = { selectedTags: SelectedTags; handleAddTag: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void; openDelete: (data: TagQuestionHC) => void; - handleScroll: () => void; handlePrevStep: () => void; handleNextStep: () => void; titleProps: { @@ -21,6 +20,8 @@ type Props = { desc: string; toSettings: () => void; } + onScroll: () => void; + }; export const AmoTags: FC = ({ @@ -28,9 +29,9 @@ export const AmoTags: FC = ({ selectedTags, handleAddTag, openDelete, - handleScroll, handlePrevStep, handleNextStep, + onScroll, titleProps, }) => { const [sortedTagsItems, setSortedTagsItems] = useState(tagsItems); @@ -59,14 +60,14 @@ export const AmoTags: FC = ({ return ( <> - + = ({ isError={sortedTagsItems.length === 0} constrictor={startConstrictor} /> - { - setActiveScope(null); - setIsSelection(false); - }} - onLargeBtnClick={() => { - handleAdd(); - setActiveScope(null); - setIsSelection(false); - }} /> ) : ( @@ -115,10 +107,28 @@ export const AmoTags: FC = ({ alignSelf: "end", }} > - + + { + isSelection && activeScope !== null ? + { + handleAdd(); + setActiveScope(null); + setIsSelection(false); + }} + largeBtnText={"Добавить"} + onSmallBtnClick={() => { + setActiveScope(null); + setIsSelection(false); + }} + smallBtnText={"Отменить"} + /> + : + + } ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx index 435557af..3ef074bb 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/index.tsx @@ -57,6 +57,7 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo setPageOfPipelinesSteps, setPageOfUsers, setPageOfTags, + setPageOfFields, setSelectedCurrentFields, } = useAmoIntegration({ quizID: quiz.backendId, @@ -156,6 +157,7 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo setPageOfPipelinesSteps={setPageOfPipelinesSteps} setPageOfUsers={setPageOfUsers} setPageOfTags={setPageOfTags} + setPageOfFields={setPageOfFields} setSelectedCurrentFields={setSelectedCurrentFields} handleCloseModal={handleCloseModal} /> diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts b/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts index 28abadf6..a9554e7c 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts @@ -15,7 +15,7 @@ import { import { AnyTypedQuizQuestion } from "@frontend/squzanswerer"; import { UntypedQuizQuestion } from "@/model/questionTypes/shared"; -const SIZE = 275; +const SIZE = 25; interface Props { isModalOpen: boolean; @@ -31,6 +31,13 @@ const FCTranslate = { "text": "номер", "address": "адрес", } + +let isReadyGetPipeline = true; +let isReadyGetPipelineStep = true; +let isReadyGetUsers = true; +let isReadyGetTags = true; +let isReadyGetFields = true; + export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, questions }: Props) => { const [isLoadingPage, setIsLoadingPage] = useState(true); const [firstRules, setFirstRules] = useState(false); @@ -102,15 +109,15 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que if (gottenList !== null) { Object.keys(gottenList.QuestionID).forEach((qId) => { - const q = questions.find(e=>e.backendId === Number(qId)) || {} + const q = questions.find(e => e.backendId === Number(qId)) || {} gottenQuestions[key as QuestionKeys].push({ id: qId, title: q.title, entity: key, - + + }) }) - }) - + } if (key === "Contact") { @@ -154,10 +161,10 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que useEffect(() => { const transletedQuestions = {} - - Object.keys(selectedQuestions).forEach((column) => { + + Object.keys(selectedQuestions)?.forEach((column) => { selectedQuestions[column].forEach((minifiedData) => { - const q = questions.find(e => e.backendId === Number(minifiedData.id)) || {} + const q = questions.find(e => e.backendId === Number(minifiedData.id)) || {} transletedQuestions[column] = { ...minifiedData, title: q.title || transletedQuestions[column].title @@ -169,115 +176,142 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que }, [questions]) useEffect(() => { - getPipelines({ - page: pageOfPipelines, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedPipelines: MinifiedData[] = []; - - response.items.forEach((step) => { - minifiedPipelines.push({ - id: step.AmoID.toString(), - title: step.Name, - }); - }); - setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]); - setPageOfPipelinesSteps(1); - } - }); - }, [pageOfPipelines]); - useEffect(() => { - const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps; - if (selectedPipeline !== null) - getSteps({ - page: pageOfPipelinesSteps, + if (isReadyGetPipeline) { + getPipelines({ + page: pageOfPipelines, size: SIZE, - pipelineId: Number(selectedPipeline), }).then(([response]) => { if (response && response.items !== null) { - const minifiedSteps: MinifiedData[] = []; + const minifiedPipelines: MinifiedData[] = []; response.items.forEach((step) => { - minifiedSteps.push({ + minifiedPipelines.push({ id: step.AmoID.toString(), title: step.Name, }); }); - setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]); + setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]); + setPageOfPipelinesSteps(1); + } else { + isReadyGetPipeline = false } }); + } + }, [pageOfPipelines]); + useEffect(() => { + if (isReadyGetPipelineStep) { + const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps; + if (selectedPipeline !== null) + getSteps({ + page: pageOfPipelinesSteps, + size: SIZE, + pipelineId: Number(selectedPipeline), + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedSteps: MinifiedData[] = []; + + response.items.forEach((step) => { + minifiedSteps.push({ + id: step.AmoID.toString(), + title: step.Name, + }); + }); + setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]); + } else { + isReadyGetPipelineStep = false + } + }); + } }, [selectedPipeline, pageOfPipelinesSteps]); useEffect(() => { - getUsers({ - page: pageOfUsers, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedUsers: MinifiedData[] = []; + if (isReadyGetUsers) { + getUsers({ + page: pageOfUsers, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedUsers: MinifiedData[] = []; - response.items.forEach((step) => { - minifiedUsers.push({ - id: step.amoUserID.toString(), - title: step.name, + response.items.forEach((step) => { + minifiedUsers.push({ + id: step.amoUserID.toString(), + title: step.name, + }); }); - }); - setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]); - } - }); + setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]); + } else { + isReadyGetUsers = false + } + }); + } }, [pageOfUsers]); useEffect(() => { - getTags({ - page: pageOfTags, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedTags: MinifiedData[] = []; + if (isReadyGetTags) { + getTags({ + page: pageOfTags, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedTags: MinifiedData[] = []; - response.items.forEach((step) => { - minifiedTags.push({ - id: step.AmoID.toString(), - title: step.Name, - entity: - step.Entity === "leads" - ? "Lead" - : step.Entity === "contacts" - ? "Contact" - : step.Entity === "companies" - ? "Company" - : "Customer", + response.items.forEach((step) => { + minifiedTags.push({ + id: step.AmoID.toString(), + title: step.Name, + entity: + step.Entity === "leads" + ? "Lead" + : step.Entity === "contacts" + ? "Contact" + : step.Entity === "companies" + ? "Company" + : "Customer", + }); }); - }); - setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]); - } - }); + setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]); + } else { + isReadyGetTags = false + } + }); + } }, [pageOfTags]); useEffect(() => { - getFields({ - page: pageOfTags, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedTags: MinifiedData[] = []; + if (isReadyGetFields) { + getFields({ + page: pageOfTags, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedTags: MinifiedData[] = []; - response.items.forEach((field) => { - minifiedTags.push({ - id: field.AmoID.toString(), - title: field.Name, - entity: - field.Entity === "leads" - ? "Lead" - : field.Entity === "contacts" - ? "Contact" - : field.Entity === "companies" - ? "Company" - : "Customer", + response.items.forEach((field) => { + minifiedTags.push({ + id: field.AmoID.toString(), + title: field.Name, + entity: + field.Entity === "leads" + ? "Lead" + : field.Entity === "contacts" + ? "Contact" + : field.Entity === "companies" + ? "Company" + : "Customer", + }); }); - }); - setArrayOfFields((prevItems) => [...prevItems, ...minifiedTags]); - } - }); + setArrayOfFields((prevItems) => [...prevItems, ...minifiedTags]); + } + }); + } else { + isReadyGetFields = false + } }, [pageOfFields]); + useEffect(() => () => { + isReadyGetPipeline = true; + isReadyGetPipelineStep = true; + isReadyGetUsers = true; + isReadyGetTags = true; + isReadyGetFields = true; + }, []) return { isLoadingPage, @@ -300,10 +334,11 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que setSelectedTags, selectedQuestions, setSelectedQuestions, - setPageOfPipelines, - setPageOfPipelinesSteps, - setPageOfUsers, - setPageOfTags, + setPageOfPipelines: () => setPageOfPipelines(old => old + 1), + setPageOfPipelinesSteps: () => setPageOfPipelinesSteps(old => old + 1), + setPageOfUsers: () => setPageOfUsers(old => old + 1), + setPageOfTags: () => setPageOfTags(old => old + 1), + setPageOfFields: () => setPageOfFields(old => old + 1), setSelectedCurrentFields, }; }; diff --git a/src/utils/throttle.ts b/src/utils/throttle.ts new file mode 100644 index 00000000..61627cbd --- /dev/null +++ b/src/utils/throttle.ts @@ -0,0 +1,10 @@ +export function determineScrollBottom(e: any, callback: any) { + const scrollHeight = e.target.scrollHeight; + const scrollTop = e.target.scrollTop; + const clientHeight = e.target.clientHeight; + const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) >= 0.9; + + if (scrolledToBottom) { + callback(); + } +} From d1266d67ef7822a563e26b842eda84abcda2838b Mon Sep 17 00:00:00 2001 From: Nastya Date: Thu, 15 Aug 2024 13:31:15 +0300 Subject: [PATCH 7/7] =?UTF-8?q?=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82=20?= =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5?= =?UTF-8?q?=D1=82=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=B4=20=D1=81=D0=BE=D0=B1=D0=BE=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CustomSelect/CustomSelect.tsx | 10 +++++----- .../IntegrationsModal/Amo/SwitchPages.tsx | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/CustomSelect/CustomSelect.tsx b/src/components/CustomSelect/CustomSelect.tsx index ba5cc549..e7426d6e 100644 --- a/src/components/CustomSelect/CustomSelect.tsx +++ b/src/components/CustomSelect/CustomSelect.tsx @@ -34,7 +34,7 @@ export const CustomSelect: FC = ({ items, selectedItemId, set value={item.id} sx={{ padding: "6px 0", - zIndex: 2, + zIndex: 3, borderTop: "1px solid rgba(154, 154, 175, 0.1)", width: "auto", }} @@ -76,7 +76,7 @@ export const CustomSelect: FC = ({ items, selectedItemId, set нет данных @@ -87,7 +87,7 @@ export const CustomSelect: FC = ({ items, selectedItemId, set = ({ items, selectedItemId, set PaperProps: { onScroll: (e) => determineScrollBottom(e, throttle(handleScroll, 700)), style: { - zIndex: 2, + zIndex: 3, maxHeight: "300px", overflow: "auto", overflowX: "auto", @@ -164,7 +164,7 @@ export const CustomSelect: FC = ({ items, selectedItemId, set border: 0, }, "& .MuiMenu-root.MuiModal-root": { - zIndex: 0, + zIndex: 2, }, }} onChange={({ target }: SelectChangeEvent) => setSelectedItem(target.value)} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx index a93c670c..ab8cb5e4 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx @@ -226,11 +226,11 @@ export const SwitchPages = ({ console.log(body) - // if (firstRules) { - // setIntegrationRules(quiz.backendId.toString(), body); - // } else { - // updateIntegrationRules(quiz.backendId.toString(), body); - // } + if (firstRules) { + setIntegrationRules(quiz.backendId.toString(), body); + } else { + updateIntegrationRules(quiz.backendId.toString(), body); + } handleCloseModal(); }; @@ -375,7 +375,7 @@ export const SwitchPages = ({ toBack={() => closeSpecialPage()} setStep={(step: number) => { closeSpecialPage() - setStep(step-1) + setStep(step - 1) }} /> case "amoLogin": return