diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx index 17a10a03..fb7f7a1b 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx @@ -1,4 +1,4 @@ -import { useMediaQuery, useTheme } from "@mui/material"; +import { useTheme } from "@mui/material"; import { Dispatch, FC, @@ -9,7 +9,8 @@ import { } from "react"; import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView"; import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView"; -import { TQuestionEntity } from "../IntegrationsModal"; +import { TitleKeys, TQuestionEntity } from "../IntegrationsModal"; +import Box from "@mui/material/Box"; type IntegrationStep6Props = { handlePrevStep: () => void; @@ -25,7 +26,6 @@ export const IntegrationStep6: FC = ({ setQuestionEntity, }) => { const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); const [isSelection, setIsSelection] = useState(false); const [activeItem, setActiveItem] = useState(null); const [selectedValue, setSelectedValue] = useState(null); @@ -35,7 +35,7 @@ export const IntegrationStep6: FC = ({ setQuestionEntity((prevState) => ({ ...prevState, - [activeItem]: [selectedValue], + [activeItem]: [...prevState[activeItem as TitleKeys], selectedValue], })); }, [activeItem, setQuestionEntity, selectedValue]); @@ -45,7 +45,14 @@ export const IntegrationStep6: FC = ({ ); return ( - <> + {isSelection ? ( = ({ setActiveItem={setActiveItem} /> )} - + ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/AnswerItem/AnswerItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/AnswerItem/AnswerItem.tsx index 4120133e..f4082034 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/AnswerItem/AnswerItem.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/AnswerItem/AnswerItem.tsx @@ -2,16 +2,17 @@ import { Box, Typography, useTheme } from "@mui/material"; import { FC } from "react"; type AnswerItemProps = { - text: string; + fieldName: string; + fieldValue: string; }; -export const AnswerItem: FC = ({ text }) => { +export const AnswerItem: FC = ({ fieldName, fieldValue }) => { const theme = useTheme(); return ( @@ -22,7 +23,16 @@ export const AnswerItem: FC = ({ text }) => { color: theme.palette.grey3.main, }} > - {text} + {fieldName} + + + {fieldValue} ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx index 6ff514b0..55c746f9 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx @@ -2,29 +2,33 @@ import { Box, Typography, useTheme } from "@mui/material"; import { FC } from "react"; import { IconBtnAdd } from "./IconBtnAdd/IconBtnAdd"; import { AnswerItem } from "./AnswerItem/AnswerItem"; -import { TitleKeys, TQuestionEntity } from "../../IntegrationsModal"; - -const titleDictionary = { - contacts: "Контакты", - company: "Компании", - deal: "Сделки", - users: "Пользователи", - buyers: "Покупатели", -}; +import { + TagKeys, + TitleKeys, + TQuestionEntity, + TTags, +} from "../../IntegrationsModal"; type ItemProps = { - title: TitleKeys; + title: TitleKeys | TagKeys; onAddBtnClick: () => void; - questionEntity: TQuestionEntity; + data: TQuestionEntity | TTags; }; -export const Item: FC = ({ - title, - onAddBtnClick, - questionEntity, -}) => { +export const Item: FC = ({ title, onAddBtnClick, data }) => { const theme = useTheme(); + + const titleDictionary = { + contact: "Контакт", + company: "Компания", + deal: "Сделка", + buyer: "Покупатель", + contacts: "Контакты", + users: "Пользователи", + buyers: "Покупатели", + }; + const translatedTitle = titleDictionary[title]; - const questionEntityTexts = questionEntity[title]; + const selectedOptions = data[title]; return ( = ({ {translatedTitle} - {questionEntityTexts && - questionEntityTexts.map((text) => )} + {selectedOptions && + selectedOptions.map((text, index) => ( + + ))} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemDetailsView/ItemDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemDetailsView/ItemDetailsView.tsx index 0d05fe12..a22eec6e 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemDetailsView/ItemDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemDetailsView/ItemDetailsView.tsx @@ -1,4 +1,4 @@ -import { Box } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import { Item } from "../Item/Item"; import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; import { FC } from "react"; @@ -21,6 +21,8 @@ export const ItemDetailsView: FC = ({ setActiveItem, setIsSelection, }) => { + const theme = useTheme(); + return ( = ({ display: "flex", flexDirection: "column", alignItems: "center", + height: "100%", flexGrow: 1, }} > {questionEntity && Object.keys(questionEntity).map((item) => ( { setIsSelection(true); setActiveItem(item); }} - questionEntity={questionEntity} + data={questionEntity} /> ))} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep7.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep7.tsx index 14d3eb9b..80607d8b 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep7.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep7.tsx @@ -1,47 +1,83 @@ -import { Box, useMediaQuery, useTheme } from "@mui/material"; -import { FC } from "react"; -import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; +import { useTheme } from "@mui/material"; +import { + Dispatch, + FC, + SetStateAction, + useCallback, + useMemo, + useState, +} from "react"; + +import { TagKeys, TTags } from "../IntegrationsModal"; +import Box from "@mui/material/Box"; +import { ItemsSelectionView } from "../IntegrationStep6/ItemsSelectionView/ItemsSelectionView"; +import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView"; type IntegrationStep7Props = { - handlePrevStep: () => void; + handleSmallBtn: () => void; + handleLargeBtn: () => void; + tags: TTags; + setTags: Dispatch>; }; export const IntegrationStep7: FC = ({ - handlePrevStep, + handleSmallBtn, + handleLargeBtn, + tags, + setTags, }) => { const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const [isSelection, setIsSelection] = useState(false); + const [activeItem, setActiveItem] = useState(null); + const [selectedValue, setSelectedValue] = useState(null); + + const handleAdd = useCallback(() => { + if (!activeItem || !selectedValue) return; + + setTags((prevState) => ({ + ...prevState, + [activeItem]: [...prevState[activeItem as TagKeys], selectedValue], + })); + }, [activeItem, setTags, selectedValue]); + + const items = useMemo( + () => ["#тег с результатом 1", "#еще один тег с результатом 2", "#тег"], + [], + ); + return ( - - - { + setActiveItem(null); + setIsSelection(false); + }} + onLargeBtnClick={() => { + handleAdd(); + setActiveItem(null); + setIsSelection(false); + }} /> - + ) : ( + + )} ); }; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/TagsDetailsView/TagsDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/TagsDetailsView/TagsDetailsView.tsx new file mode 100644 index 00000000..43b050f7 --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/TagsDetailsView/TagsDetailsView.tsx @@ -0,0 +1,99 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock"; +import { FC } from "react"; +import { TagKeys, TTags } from "../../IntegrationsModal"; +import { Item } from "../../IntegrationStep6/Item/Item"; + +type TagsDetailsViewProps = { + setIsSelection: (value: boolean) => void; + handleSmallBtn: () => void; + handleLargeBtn: () => void; + tags: TTags; + setActiveItem: (value: string | null) => void; +}; + +export const TagsDetailsView: FC = ({ + handleSmallBtn, + handleLargeBtn, + tags, + setActiveItem, + setIsSelection, +}) => { + const theme = useTheme(); + + return ( + + + + + Результат + + + + {tags && + Object.keys(tags).map((item) => ( + { + setIsSelection(true); + setActiveItem(item); + }} + data={tags} + /> + ))} + + + + + + + ); +}; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx index 9715341b..e78f1d71 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx @@ -21,6 +21,7 @@ import { SettingsBlock } from "./SettingsBlock/SettingsBlock"; import { IntegrationStep7 } from "./IntegrationStep7/IntegrationStep7"; export type TitleKeys = "contacts" | "company" | "deal" | "users" | "buyers"; + export type TQuestionEntity = Record; type IntegrationsModalProps = { isModalOpen: boolean; @@ -28,6 +29,9 @@ type IntegrationsModalProps = { companyName: string | null; }; +export type TagKeys = "contact" | "company" | "deal" | "buyer"; +export type TTags = Record; + export const IntegrationsModal: FC = ({ isModalOpen, handleCloseModal, @@ -58,6 +62,12 @@ export const IntegrationsModal: FC = ({ users: [], buyers: [], }); + const [tags, setTags] = useState({ + deal: [], + contact: [], + company: [], + buyer: [], + }); const handleNextStep = () => { setStep((prevState) => prevState + 1); @@ -65,7 +75,10 @@ export const IntegrationsModal: FC = ({ const handlePrevStep = () => { setStep((prevState) => prevState - 1); }; - console.log("questionEntity", questionEntity); + const handleSave = () => { + handleCloseModal(); + setStep(1); + }; const steps = useMemo( () => [ @@ -146,7 +159,14 @@ export const IntegrationsModal: FC = ({ { title: "Добавление тегов", isSettingsAvailable: true, - component: , + component: ( + + ), }, ], [ @@ -157,6 +177,7 @@ export const IntegrationsModal: FC = ({ selectedStagePerformer, selectedStage, selectedDealPerformer, + tags, ], ); @@ -236,6 +257,8 @@ export const IntegrationsModal: FC = ({ selectedStagePerformer={selectedStagePerformer} selectedStage={selectedStage} utmFile={utmFile} + questionEntity={questionEntity} + tags={tags} /> ) : ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx index 62921ff1..93462345 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx @@ -96,6 +96,9 @@ export const IntegrationsModalTitle: FC = ({ "& path": { stroke: theme.palette.common.white, }, + "& circle": { + stroke: theme.palette.common.white, + }, }, "&:active": { backgroundColor: "#581CA7", @@ -103,6 +106,9 @@ export const IntegrationsModalTitle: FC = ({ "& path": { stroke: theme.palette.common.white, }, + "& circle": { + stroke: theme.palette.common.white, + }, }, }} > diff --git a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx index ff3935d8..80ace601 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx @@ -5,6 +5,7 @@ import { SettingItemHeader } from "./SettingItemHeader/SettingItemHeader"; import { ResponsiblePerson } from "./ResponsiblePerson/ResponsiblePerson"; import { SelectedParameter } from "./SelectedParameter/SelectedParameter"; import { FileBlock } from "../../IntegrationStep5/FileBlock/FileBlock"; +import { TQuestionEntity, TTags } from "../../IntegrationsModal"; type SettingItemProps = { step: number; @@ -17,6 +18,8 @@ type SettingItemProps = { selectedDealPerformer: string | null; selectedStage: string | null; utmFile: File | null; + questionEntity: TQuestionEntity; + tags: TTags; }; export const SettingItem: FC = ({ @@ -30,6 +33,8 @@ export const SettingItem: FC = ({ selectedDealPerformer, selectedStage, utmFile, + questionEntity, + tags, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -73,6 +78,68 @@ export const SettingItem: FC = ({ ); } + if (step === 5) { + const isFilled = Object.values(questionEntity).some( + (array) => array.length > 0, + ); + const status = isFilled ? "Заполнено" : "Не заполнено"; + + return ( + <> + + Статус: + + + {status} + + + ); + } + if (step === 6) { + const isFilled = Object.values(tags).some((array) => array.length > 0); + const status = isFilled ? "Заполнено" : "Не заполнено"; + + return ( + <> + + Статус: + + + {status} + + + ); + } return null; }, [ step, @@ -82,6 +149,8 @@ export const SettingItem: FC = ({ selectedDealPerformer, selectedStage, utmFile, + questionEntity, + tags, ]); return ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx index 9bd00c9c..523666fd 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx @@ -2,6 +2,7 @@ import { FC } from "react"; import { Box, useMediaQuery, useTheme } from "@mui/material"; import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"; import { SettingItem } from "./SettingItem/SettingItem"; +import { TQuestionEntity, TTags } from "../IntegrationsModal"; type SettingsBlockProps = { stepTitles: string[]; @@ -13,6 +14,8 @@ type SettingsBlockProps = { selectedStage: string | null; selectedDealPerformer: string | null; utmFile: File | null; + questionEntity: TQuestionEntity; + tags: TTags; }; export const SettingsBlock: FC = ({ @@ -25,6 +28,8 @@ export const SettingsBlock: FC = ({ selectedDealPerformer, selectedStage, utmFile, + questionEntity, + tags, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -64,6 +69,8 @@ export const SettingsBlock: FC = ({ selectedDealPerformer={selectedDealPerformer} selectedStage={selectedStage} utmFile={utmFile} + questionEntity={questionEntity} + tags={tags} /> ))}