изменены передаваемые типы в компоненты амо модалки
This commit is contained in:
parent
4354d54346
commit
dcb254e8e4
@ -20,11 +20,6 @@ export type AccountResponse = {
|
||||
subdomain: string;
|
||||
country: string;
|
||||
driveURL: string;
|
||||
// AmoUiserid: number;
|
||||
// Email: string;
|
||||
// Role: string;
|
||||
// Group: number;
|
||||
// AmoUserID: number;
|
||||
};
|
||||
|
||||
export const getAccount = async (): Promise<
|
||||
|
||||
@ -1,172 +1,61 @@
|
||||
import * as React from "react";
|
||||
import { FC, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Radio from "@mui/material/Radio";
|
||||
import RadioGroup from "@mui/material/RadioGroup";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Box from "@mui/material/Box";
|
||||
import { FC, useMemo } from "react";
|
||||
import CheckboxIcon from "@icons/Checkbox";
|
||||
import { Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
getPipelines,
|
||||
getSteps,
|
||||
getTags,
|
||||
PaginationRequest,
|
||||
Pipeline,
|
||||
Step,
|
||||
Tag,
|
||||
} from "@api/integration";
|
||||
import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal"
|
||||
SelectChangeEvent,
|
||||
Typography,
|
||||
useTheme,
|
||||
Box,
|
||||
FormControlLabel,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
} from "@mui/material";
|
||||
|
||||
type Items = {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
}
|
||||
|
||||
type CustomRadioGroupProps = {
|
||||
type?: string;
|
||||
selectedValue: string | null;
|
||||
setSelectedValue: (value: string | null) => void;
|
||||
pipelineId?: number | null;
|
||||
items: TagQuestionObject[]
|
||||
tags: Tag[]
|
||||
setTags?: (setValueFunc: (value: Tag[]) => Tag[]) => void;
|
||||
items: Items[] | [];
|
||||
selectedItemId?: string | null;
|
||||
setSelectedItem: (value: string | null) => void;
|
||||
handleScroll: () => void;
|
||||
};
|
||||
|
||||
const SIZE = 25;
|
||||
|
||||
export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
||||
type,
|
||||
selectedValue,
|
||||
setSelectedValue,
|
||||
pipelineId,
|
||||
items,
|
||||
tags = [],
|
||||
setTags,
|
||||
selectedItemId = "",
|
||||
setSelectedItem,
|
||||
handleScroll,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
||||
const currentItem = useMemo(() => {
|
||||
if (selectedItemId !== null && selectedItemId.length > 0) {
|
||||
return items.find(item => item.id === selectedItemId) || null
|
||||
}
|
||||
return null;
|
||||
}, [selectedItemId, items])
|
||||
|
||||
const [currentValue, setCurrentValue] = useState<string | null>(
|
||||
selectedValue,
|
||||
);
|
||||
const [page, setPage] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [steps, setSteps] = useState<Step[]>([]);
|
||||
const [pipelines, setPipelines] = useState<Pipeline[]>([]);
|
||||
const [hasMoreItems, setHasMoreItems] = useState(true);
|
||||
const boxRef = useRef(null);
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedValue((event.target as HTMLInputElement).value);
|
||||
setCurrentValue((event.target as HTMLInputElement).value);
|
||||
};
|
||||
|
||||
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||
const onScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
||||
const scrollHeight = e.currentTarget.scrollHeight;
|
||||
const scrollTop = e.currentTarget.scrollTop;
|
||||
const clientHeight = e.currentTarget.clientHeight;
|
||||
const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9;
|
||||
|
||||
if (scrolledToBottom && !isLoading && hasMoreItems) {
|
||||
setPage((prevPage) => prevPage + 1);
|
||||
if (scrolledToBottom) {
|
||||
handleScroll();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (type === "typeTags" && hasMoreItems && setTags !== undefined) {
|
||||
setIsLoading(true);
|
||||
const pagination: PaginationRequest = {
|
||||
page: page,
|
||||
size: SIZE,
|
||||
};
|
||||
getTags(pagination).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setTags((prevItems:Tag[]) => [...prevItems, ...response.items]);
|
||||
if (response.items.length < SIZE) {
|
||||
setHasMoreItems(false);
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
if (type === "typeSteps" && hasMoreItems && pipelineId) {
|
||||
setIsLoading(true);
|
||||
const pagination: PaginationRequest & { pipelineId: number } = {
|
||||
page: page,
|
||||
size: SIZE,
|
||||
pipelineId: pipelineId,
|
||||
};
|
||||
getSteps(pagination).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setSteps((prevItems) => [...prevItems, ...response.items]);
|
||||
if (response.items.length < SIZE) {
|
||||
setHasMoreItems(false);
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
if (type === "typePipelines" && hasMoreItems) {
|
||||
setIsLoading(true);
|
||||
const pagination: PaginationRequest = {
|
||||
page: page,
|
||||
size: SIZE,
|
||||
};
|
||||
getPipelines(pagination).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setPipelines((prevItems) => [...prevItems, ...response.items]);
|
||||
if (response.items.length < SIZE) {
|
||||
setHasMoreItems(false);
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
}, [page, type, hasMoreItems, pipelineId]);
|
||||
|
||||
const formControlLabels = useMemo(() => {
|
||||
if (type === "typeTags" && tags && tags.length !== 0) {
|
||||
return tags.map((item) => (
|
||||
<FormControlLabel
|
||||
key={item.AmoID}
|
||||
sx={{
|
||||
padding: "15px",
|
||||
borderBottom: `1px solid ${theme.palette.background.default}`,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: "12px",
|
||||
margin: 0,
|
||||
backgroundColor:
|
||||
currentValue === Number(item.AmoID)
|
||||
? theme.palette.background.default
|
||||
: theme.palette.common.white,
|
||||
}}
|
||||
value={Number(item.AmoID)}
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={
|
||||
<CheckboxIcon
|
||||
checked
|
||||
isRounded
|
||||
color={theme.palette.brightPurple.main}
|
||||
/>
|
||||
}
|
||||
icon={<CheckboxIcon isRounded />}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||
<Typography sx={{ color: `${item.Color}` }}>
|
||||
{item.Name}
|
||||
</Typography>
|
||||
<Typography>{item.Entity}</Typography>
|
||||
</Box>
|
||||
}
|
||||
labelPlacement={"start"}
|
||||
/>
|
||||
));
|
||||
}
|
||||
if (type === "typeSteps" && steps && steps.length !== 0) {
|
||||
return steps.map((step) => (
|
||||
<FormControlLabel
|
||||
key={step.ID}
|
||||
if (items.length !== 0) {
|
||||
return items.map( item =>
|
||||
<FormControlLabel
|
||||
key={item.id}
|
||||
sx={{
|
||||
color: "black",
|
||||
padding: "15px",
|
||||
@ -176,11 +65,11 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
||||
borderRadius: "12px",
|
||||
margin: 0,
|
||||
backgroundColor:
|
||||
currentValue === step.Name
|
||||
currentItem?.id === item.id
|
||||
? theme.palette.background.default
|
||||
: theme.palette.common.white,
|
||||
}}
|
||||
value={step.AmoID}
|
||||
value={item.id}
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={
|
||||
@ -193,90 +82,10 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
||||
icon={<CheckboxIcon isRounded />}
|
||||
/>
|
||||
}
|
||||
label={step.Name}
|
||||
label={item.title}
|
||||
labelPlacement={"start"}
|
||||
/>
|
||||
));
|
||||
}
|
||||
if (type === "typePipelines" && pipelines && pipelines.length !== 0) {
|
||||
return pipelines.map((pipeline) => (
|
||||
<FormControlLabel
|
||||
key={pipeline.ID}
|
||||
sx={{
|
||||
color: "black",
|
||||
padding: "15px",
|
||||
borderBottom: `1px solid ${theme.palette.background.default}`,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: "12px",
|
||||
margin: 0,
|
||||
backgroundColor:
|
||||
currentValue === pipeline.Name
|
||||
? theme.palette.background.default
|
||||
: theme.palette.common.white,
|
||||
"&.MuiFormControlLabel-root > .MuiTypography-root": {
|
||||
width: "200px",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis"
|
||||
}
|
||||
}}
|
||||
value={pipeline.AmoID}
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={
|
||||
<CheckboxIcon
|
||||
checked
|
||||
isRounded
|
||||
color={theme.palette.brightPurple.main}
|
||||
/>
|
||||
}
|
||||
icon={<CheckboxIcon isRounded />}
|
||||
/>
|
||||
}
|
||||
label={pipeline.Name}
|
||||
labelPlacement={"start"}
|
||||
/>
|
||||
));
|
||||
}
|
||||
if (type === "typeQuestions" && items && items.length !== 0) {
|
||||
return items.map(({ backendId, title }) => (
|
||||
<FormControlLabel
|
||||
key={backendId}
|
||||
sx={{
|
||||
color: "black",
|
||||
padding: "15px",
|
||||
borderBottom: `1px solid ${theme.palette.background.default}`,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: "12px",
|
||||
margin: 0,
|
||||
backgroundColor:
|
||||
currentValue === Number(backendId)
|
||||
? theme.palette.background.default
|
||||
: theme.palette.common.white,
|
||||
"&.MuiFormControlLabel-root > .MuiTypography-root": {
|
||||
width: "200px",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis"
|
||||
}
|
||||
}}
|
||||
value={Number(backendId)}
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={
|
||||
<CheckboxIcon
|
||||
checked
|
||||
isRounded
|
||||
color={theme.palette.brightPurple.main}
|
||||
/>
|
||||
}
|
||||
icon={<CheckboxIcon isRounded />}
|
||||
/>
|
||||
}
|
||||
label={title}
|
||||
labelPlacement={"start"}
|
||||
/>
|
||||
));
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
@ -291,11 +100,10 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
||||
<Typography>Нет элементов</Typography>
|
||||
</Box>
|
||||
);
|
||||
}, [tags, steps, currentValue, type, pipelines]);
|
||||
}, [items]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={boxRef}
|
||||
onScroll={handleScroll}
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.grey2.main}`,
|
||||
@ -308,10 +116,9 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={currentValue}
|
||||
onChange={(e) => {
|
||||
handleChange(e)
|
||||
}}
|
||||
value={setSelectedItem}
|
||||
onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
|
||||
onScroll={onScroll}
|
||||
>
|
||||
{formControlLabels}
|
||||
</RadioGroup>
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
|
||||
import * as React from "react";
|
||||
import { FC, useCallback, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
Avatar,
|
||||
MenuItem,
|
||||
@ -6,96 +9,64 @@ import {
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import * as React from "react";
|
||||
import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import "./CustomSelect.css";
|
||||
import arrow_down from "../../assets/icons/arrow_down.svg";
|
||||
import { getUsers, PaginationRequest, User } from "@api/integration";
|
||||
|
||||
|
||||
type Items = {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
}
|
||||
|
||||
type CustomSelectProps = {
|
||||
selectedItem: string | null;
|
||||
items: Items[] | [];
|
||||
selectedItemId: string | null;
|
||||
setSelectedItem: (value: string | null) => void;
|
||||
type?: string;
|
||||
handleScroll: () => void;
|
||||
};
|
||||
|
||||
|
||||
export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
selectedItem,
|
||||
items,
|
||||
selectedItemId,
|
||||
setSelectedItem,
|
||||
type,
|
||||
handleScroll,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const [opened, setOpened] = useState<boolean>(false);
|
||||
const [currentValue, setCurrentValue] = useState<string | null>(selectedItem);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMoreItems, setHasMoreItems] = useState(true);
|
||||
const SIZE = 25;
|
||||
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
const selectWidth = ref.current ? ref.current.offsetWidth : undefined;
|
||||
|
||||
const [savedValue, setSavedValue] = useState<number | null>(null);
|
||||
const [userName, setUserName] = useState<string>("");
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(event: SelectChangeEvent<HTMLDivElement>) => {
|
||||
const newValue = event.target.value.toString();
|
||||
const selectedUser = users.find((user) => user.amoUserID == Number(newValue));
|
||||
setUserName(selectedUser.name)
|
||||
if (selectedUser) {
|
||||
//для сохранения ID выбранного пользователя в стейт или конфиг...
|
||||
setSavedValue(selectedUser.id);
|
||||
}
|
||||
setCurrentValue(newValue);
|
||||
setSelectedItem(newValue);
|
||||
},
|
||||
[setSelectedItem, setCurrentValue, setSavedValue, users],
|
||||
);
|
||||
const [opened, setOpened] = useState<boolean>(false);
|
||||
|
||||
const toggleOpened = useCallback(() => {
|
||||
setOpened((isOpened) => !isOpened);
|
||||
}, []);
|
||||
|
||||
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||
const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
||||
const scrollHeight = e.currentTarget.scrollHeight;
|
||||
const scrollTop = e.currentTarget.scrollTop;
|
||||
const clientHeight = e.currentTarget.clientHeight;
|
||||
const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9;
|
||||
|
||||
if (scrolledToBottom && !isLoading && hasMoreItems) {
|
||||
setPage((prevPage) => prevPage + 1);
|
||||
if (scrolledToBottom) {
|
||||
handleScroll();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (type === "typeUsers" && hasMoreItems) {
|
||||
setIsLoading(true);
|
||||
const pagination: PaginationRequest = {
|
||||
page: page,
|
||||
size: SIZE,
|
||||
};
|
||||
getUsers(pagination).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setUsers((prevItems) => [...prevItems, ...response.items]);
|
||||
if (response.items.length < SIZE) {
|
||||
setHasMoreItems(false);
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
}, [page, type, hasMoreItems]);
|
||||
const currentItem = useMemo(() => (
|
||||
items.find(item => item.id === selectedItemId) || null
|
||||
), [selectedItemId, items])
|
||||
|
||||
const menuItems = useMemo(() => {
|
||||
if (type === "typeUsers" && users && users.length !== 0) {
|
||||
return users.map((user) => (
|
||||
if (items.length !== 0) {
|
||||
return items.map((item) => (
|
||||
<MenuItem
|
||||
key={user.amoUserID}
|
||||
value={user.amoUserID}
|
||||
key={item.id}
|
||||
value={item.id}
|
||||
sx={{
|
||||
padding: "6px 0",
|
||||
zIndex: 2,
|
||||
@ -122,7 +93,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
|
||||
}}
|
||||
>
|
||||
{user.name}
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -134,16 +105,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
color: isMobile ? "#9A9AAF" : "#4D4D4D",
|
||||
}}
|
||||
>
|
||||
{user.email}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
width: "33%",
|
||||
padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
|
||||
color: isMobile ? "#9A9AAF" : "#4D4D4D",
|
||||
}}
|
||||
>
|
||||
{user.role}
|
||||
{item.subTitle}
|
||||
</Typography>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
@ -154,7 +116,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
нет данных
|
||||
</MenuItem>
|
||||
);
|
||||
}, [users, type]);
|
||||
}, [items]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
@ -166,7 +128,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
height: "56px",
|
||||
padding: "5px",
|
||||
color:
|
||||
currentValue === null
|
||||
currentItem === null
|
||||
? theme.palette.grey2.main
|
||||
: theme.palette.brightPurple.main,
|
||||
border: `2px solid ${theme.palette.common.white}`,
|
||||
@ -176,13 +138,13 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => ref.current?.click()}
|
||||
onClick={() => {if (ref.current !== null) ref.current?.click()}}
|
||||
>
|
||||
<Avatar sx={{ width: 46, height: 46, marginRight: 1 }} />
|
||||
<Typography
|
||||
sx={{
|
||||
marginLeft: isMobile ? "10px" : "20px",
|
||||
fontWeight: currentValue === null ? "400" : "500",
|
||||
fontWeight: currentItem === null ? "400" : "500",
|
||||
fontSize: isMobile ? "14px" : "16px",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
@ -190,7 +152,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{userName || "Выберите ответственного за сделку"}
|
||||
{currentItem?.title || "Выберите ответственного за сделку"}
|
||||
</Typography>
|
||||
<img
|
||||
src={arrow_down}
|
||||
@ -214,18 +176,17 @@ export const CustomSelect: FC<CustomSelectProps> = ({
|
||||
MenuProps={{
|
||||
disablePortal: true,
|
||||
PaperProps: {
|
||||
onScroll: handleScroll,
|
||||
onScroll: onScroll,
|
||||
style: {
|
||||
zIndex: 2,
|
||||
maxHeight: "300px",
|
||||
overflow: "auto",
|
||||
overflowX: "auto",
|
||||
maxWidth: selectWidth,
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={{}}
|
||||
onChange={onSelectItem}
|
||||
onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
|
||||
onClick={toggleOpened}
|
||||
>
|
||||
{menuItems}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { FC, useEffect, useMemo, useState } from "react";
|
||||
import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
IconButton,
|
||||
@ -24,15 +24,11 @@ import { AmoModalTitle } from "./AmoModalTitle/AmoModalTitle";
|
||||
import { AmoSettingsBlock } from "./SettingsBlock/AmoSettingsBlock";
|
||||
import { AmoAccountInfo } from "./AmoAccountInfo/AmoAccountInfo";
|
||||
import { AccountResponse, IntegrationRules, Pipeline, Step, User, getAccount, getIntegrationRules, getPipelines, getSteps, getTags, getUsers, setIntegrationRules, updateIntegrationRules } from "@api/integration";
|
||||
import { useAmoIntegration } from "./useAmoIntegration";
|
||||
import { QuestionKeys, TagKeys } from "./types";
|
||||
|
||||
|
||||
export type TitleKeys = "Company" | "Lead" | "Customer";
|
||||
export type TagQuestionObject = {
|
||||
backendId: string;
|
||||
title: string;
|
||||
};
|
||||
|
||||
export type TQuestionEntity = Record<TitleKeys, number[] | []>;
|
||||
type IntegrationsModalProps = {
|
||||
isModalOpen: boolean;
|
||||
handleCloseModal: () => void;
|
||||
@ -40,143 +36,85 @@ type IntegrationsModalProps = {
|
||||
quizID: number | undefined;
|
||||
};
|
||||
|
||||
export type TagKeys = "Contact" | "Company" | "Lead" | "Customer";
|
||||
export type TTags = Record<TagKeys, number[] | []>;
|
||||
|
||||
export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
isModalOpen,
|
||||
handleCloseModal,
|
||||
companyName,
|
||||
quizID,
|
||||
}) => {
|
||||
//Если нет контекста квиза, то и делать на этой страничке нечего
|
||||
if (quizID === 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 [step, setStep] = useState<number>(0);
|
||||
const [isSettingsBlock, setIsSettingsBlock] = useState<boolean>(false);
|
||||
const [isRemoveAccount, setIsRemoveAccount] = useState<boolean>(false);
|
||||
const [isTryRemoveAccount, setIsTryRemoveAccount] = useState<boolean>(false);
|
||||
|
||||
const [firstRules, setFirstRules] = useState<boolean>(false);
|
||||
const [accountInfo, setAccountInfo] = useState<AccountResponse | null>(null);
|
||||
const {
|
||||
isloadingPage,
|
||||
firstRules,
|
||||
accountInfo,
|
||||
arrayOfPipelines,
|
||||
arrayOfPipelinesSteps,
|
||||
arrayOfUsers,
|
||||
arrayOfTags,
|
||||
selectedPipeline,
|
||||
setSelectedPipeline,
|
||||
selectedPipelineStep,
|
||||
setSelectedPipelineStep,
|
||||
selectedDealUser,
|
||||
setSelectedDealPerformer,
|
||||
questionEntityBackend,
|
||||
selectedTags,
|
||||
setSelectedTags,
|
||||
selectedQuestions,
|
||||
setSelectedQuestions,
|
||||
setPageOfPipelines,
|
||||
setPageOfPipelinesSteps,
|
||||
setPageOfUsers,
|
||||
setPageOfTags,
|
||||
} = useAmoIntegration({
|
||||
quizID,
|
||||
isModalOpen,
|
||||
isTryRemoveAccount,
|
||||
})
|
||||
|
||||
const [arrayOfPipelines, setArrayOfPipelines] = useState<Pipeline[]>([]);
|
||||
const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState<Step[]>([]);
|
||||
const [arrayOfUsers, setArrayOfUsers] = useState<User[]>([]);
|
||||
const [arrayOfTags, setArrayOfTags] = useState<TTags[]>([]);
|
||||
const handleAddTagQuestion = useCallback((scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => {
|
||||
if (!scope || !id) return;
|
||||
|
||||
const [selectedPipeline, setSelectedPipeline] = useState<number | null>(null);
|
||||
const [selectedPipelineStep, setSelectedPipelineStep] = useState<number | null>(null);
|
||||
const [selectedDealPerformer, setSelectedDealPerformer] = useState<number | null>(null);
|
||||
|
||||
const [questionEntityBackend, setQuestionEntityBackend] = useState<TQuestionEntity>({});
|
||||
const [questionEntity, setQuestionEntity] = useState<TQuestionEntity>({
|
||||
Lead: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
const [tags, setTags] = useState<TTags>({
|
||||
Lead: [],
|
||||
Contact: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen && quizID !== undefined && !isRemoveAccount) {
|
||||
const fetchAccount = async () => {
|
||||
const [account, error] = await getAccount();
|
||||
|
||||
if (error) {
|
||||
if (!error.includes("Not Found")) enqueueSnackbar(error)
|
||||
setAccountInfo(null);
|
||||
}
|
||||
if (account) {
|
||||
setAccountInfo(account);
|
||||
}
|
||||
};
|
||||
const fetchRules = async () => {
|
||||
const [settingsResponse, error] = await getIntegrationRules(quizID.toString());
|
||||
|
||||
if (error) {
|
||||
if (error === "first") setFirstRules(true);
|
||||
if (!error.includes("Not Found") && !error.includes("first")) enqueueSnackbar(error);
|
||||
}
|
||||
if (settingsResponse) {
|
||||
if (settingsResponse.PipelineID) setSelectedPipeline(settingsResponse.PipelineID)
|
||||
if (settingsResponse.StepID) setSelectedPipelineStep(settingsResponse.StepID)
|
||||
if (settingsResponse.PerformerID) setSelectedDealPerformer(settingsResponse.PerformerID)
|
||||
if (Boolean(settingsResponse.FieldsRule) &&
|
||||
Object.keys(settingsResponse.FieldsRule).length > 0) {
|
||||
const newRules = { ...questionEntity }
|
||||
setQuestionEntityBackend(settingsResponse.FieldsRule)
|
||||
for (let key in settingsResponse.FieldsRule) {
|
||||
if (settingsResponse.FieldsRule[key] !== null && Array.isArray(settingsResponse.FieldsRule[key])) {
|
||||
const gottenList = Object.keys(settingsResponse.FieldsRule[key][0].QuestionID)
|
||||
newRules[key] = gottenList
|
||||
}
|
||||
}
|
||||
setQuestionEntity(newRules)
|
||||
}
|
||||
if (Boolean(settingsResponse.TagsToAdd) &&
|
||||
Object.keys(settingsResponse.TagsToAdd).length > 0) {
|
||||
const newRules = { ...tags }
|
||||
for (let key in settingsResponse.TagsToAdd) {
|
||||
const gottenList = settingsResponse.TagsToAdd[key]
|
||||
if (gottenList !== null && Array.isArray(gottenList)) {
|
||||
newRules[key] = gottenList
|
||||
}
|
||||
}
|
||||
setTags(newRules)
|
||||
}
|
||||
setFirstRules(false);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
getTags({
|
||||
page: 1,
|
||||
size: 9999,
|
||||
}).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setArrayOfTags(response.items);
|
||||
}
|
||||
});
|
||||
getUsers({
|
||||
page: 1,
|
||||
size: 9999,
|
||||
}).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setArrayOfUsers(response.items);
|
||||
}
|
||||
});
|
||||
getPipelines({
|
||||
page: 1,
|
||||
size: 9999,
|
||||
}).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setArrayOfPipelines(response.items);
|
||||
}
|
||||
})
|
||||
|
||||
fetchAccount();
|
||||
fetchRules();
|
||||
if (type === "tag") {
|
||||
setSelectedTags((prevState) => ({
|
||||
...prevState,
|
||||
[scope]: [...prevState[scope as TagKeys], id],
|
||||
}));
|
||||
}
|
||||
}, [isModalOpen, isRemoveAccount]);
|
||||
useEffect(() => {
|
||||
if (selectedPipeline !== null)
|
||||
getSteps({
|
||||
page: 1,
|
||||
size: 9999,
|
||||
pipelineId: selectedPipeline,
|
||||
}).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
setArrayOfPipelinesSteps(response.items);
|
||||
}
|
||||
});
|
||||
}, [selectedPipeline])
|
||||
|
||||
if (type === "question") {
|
||||
setSelectedQuestions((prevState) => ({
|
||||
...prevState,
|
||||
[scope]: [...prevState[scope as QuestionKeys], id],
|
||||
}));
|
||||
}
|
||||
}, [setSelectedQuestions, setSelectedTags]);
|
||||
|
||||
|
||||
const handleNextStep = () => {
|
||||
setStep((prevState) => prevState + 1);
|
||||
@ -189,18 +127,18 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
console.log({
|
||||
PipelineID: Number(selectedPipeline),
|
||||
StepID: Number(selectedPipelineStep),
|
||||
PerformerID: Number(selectedDealPerformer),
|
||||
PerformerID: Number(selectedDealUser),
|
||||
FieldsRule: questionEntity,
|
||||
TagsToAdd: tags
|
||||
})
|
||||
if (quizID === undefined) return
|
||||
if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку")
|
||||
if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки")
|
||||
if (quizID === undefined) return
|
||||
if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку")
|
||||
if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки")
|
||||
|
||||
const body = {
|
||||
PipelineID: Number(selectedPipeline),
|
||||
StepID: Number(selectedPipelineStep),
|
||||
PerformerID: Number(selectedDealPerformer),
|
||||
PerformerID: Number(selectedDealUser),
|
||||
FieldsRule: questionEntityBackend,
|
||||
TagsToAdd: tags
|
||||
}
|
||||
@ -220,14 +158,14 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
|
||||
console.log(body)
|
||||
|
||||
if (firstRules) {
|
||||
setIntegrationRules(quizID.toString(), body)
|
||||
} else {
|
||||
updateIntegrationRules(quizID.toString(), body)
|
||||
}
|
||||
if (firstRules) {
|
||||
setIntegrationRules(quizID.toString(), body)
|
||||
} else {
|
||||
updateIntegrationRules(quizID.toString(), body)
|
||||
}
|
||||
|
||||
handleCloseModal();
|
||||
setStep(1);
|
||||
handleCloseModal();
|
||||
setStep(1);
|
||||
};
|
||||
const steps = useMemo(
|
||||
() => [
|
||||
@ -252,8 +190,8 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
<Pipelines
|
||||
handlePrevStep={handlePrevStep}
|
||||
handleNextStep={handleNextStep}
|
||||
selectedPipelinePerformer={selectedDealPerformer}
|
||||
setSelectedPipelinePerformer={setSelectedDealPerformer}
|
||||
selectedPipelinePerformer={selectedDealUser}
|
||||
setSelectedPipelineUser={setSelectedDealPerformer}
|
||||
selectedPipeline={selectedPipeline}
|
||||
setSelectedPipeline={setSelectedPipeline}
|
||||
/>
|
||||
@ -266,7 +204,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
<PipelineSteps
|
||||
handlePrevStep={handlePrevStep}
|
||||
handleNextStep={handleNextStep}
|
||||
selectedStepsPerformer={selectedDealPerformer}
|
||||
selectedStepsPerformer={selectedDealUser}
|
||||
setSelectedStepsPerformer={setSelectedDealPerformer}
|
||||
selectedStep={selectedPipelineStep}
|
||||
setSelectedStep={setSelectedPipelineStep}
|
||||
@ -281,7 +219,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
<DealPerformers
|
||||
handlePrevStep={handlePrevStep}
|
||||
handleNextStep={handleNextStep}
|
||||
selectedDealPerformer={selectedDealPerformer}
|
||||
selectedDealUser={selectedDealUser}
|
||||
setSelectedDealPerformer={setSelectedDealPerformer}
|
||||
/>
|
||||
),
|
||||
@ -291,11 +229,12 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
isSettingsAvailable: true,
|
||||
component: (
|
||||
<AmoTags
|
||||
tagsNames={tags}
|
||||
tagsItems={arrayOfTags}
|
||||
selectedTags={selectedTags}
|
||||
handleScroll={()=>{}}
|
||||
handleAddTag={handleAddTagQuestion}
|
||||
handlePrevStep={handlePrevStep}
|
||||
handleNextStep={handleNextStep}
|
||||
setIdTags={setTags}
|
||||
arrayOfTags={arrayOfTags}
|
||||
/>
|
||||
),
|
||||
},
|
||||
@ -304,30 +243,25 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
isSettingsAvailable: true,
|
||||
component: (
|
||||
<AmoQuestions
|
||||
questionEntity={questionEntity}
|
||||
setQuestionEntity={setQuestionEntity}
|
||||
questionsItems={minifiedQuestions}
|
||||
selectedQuestions={selectedQuestions}
|
||||
handleAddQuestion={handleAddTagQuestion}
|
||||
handlePrevStep={handlePrevStep}
|
||||
handleNextStep={handleSave}
|
||||
questions={questions}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[
|
||||
accountInfo,
|
||||
questionEntity,
|
||||
selectedPipeline,
|
||||
selectedPipelineStep,
|
||||
selectedDealPerformer,
|
||||
tags,
|
||||
arrayOfPipelines,
|
||||
arrayOfPipelinesSteps,
|
||||
arrayOfUsers,
|
||||
arrayOfTags,
|
||||
],
|
||||
);
|
||||
|
||||
const stepTitles = steps.map((step) => step.title);
|
||||
|
||||
//Если нет контекста квиза, то и делать на этой страничке нечего
|
||||
if (quizID === undefined) return redirect("/list")
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isModalOpen}
|
||||
@ -390,11 +324,11 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
isSettingsBlock={isSettingsBlock}
|
||||
setIsSettingsBlock={setIsSettingsBlock}
|
||||
setStep={setStep}
|
||||
startRemoveAccount={() => setIsRemoveAccount(true)}
|
||||
startRemoveAccount={() => setIsTryRemoveAccount(true)}
|
||||
/>
|
||||
{isRemoveAccount && (
|
||||
{isTryRemoveAccount && (
|
||||
<AmoRemoveAccount
|
||||
stopThisPage={() => setIsRemoveAccount(false)}
|
||||
stopThisPage={() => setIsTryRemoveAccount(false)}
|
||||
/>
|
||||
)}
|
||||
{isSettingsBlock && (
|
||||
@ -403,15 +337,15 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
||||
stepTitles={stepTitles}
|
||||
setIsSettingsBlock={setIsSettingsBlock}
|
||||
setStep={setStep}
|
||||
selectedDealPerformer={arrayOfUsers.find(p => p.amoUserID == selectedDealPerformer)?.name || null}
|
||||
selectedFunnel={arrayOfPipelines.find(p => selectedPipeline)?.Name || null}
|
||||
selectedStage={arrayOfPipelinesSteps.find(p => selectedPipelineStep)?.Name || null}
|
||||
questionEntity={questionEntity}
|
||||
tags={tags}
|
||||
selectedDealUser={selectedDealUser}
|
||||
selectedFunnel={selectedPipeline}
|
||||
selectedStage={selectedPipelineStep}
|
||||
selectedQuestions={selectedQuestions}
|
||||
selectedTags={selectedTags}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{!isSettingsBlock && !isRemoveAccount && (
|
||||
{!isSettingsBlock && !isTryRemoveAccount && (
|
||||
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -1,79 +1,40 @@
|
||||
import { useTheme } from "@mui/material";
|
||||
import {
|
||||
Dispatch,
|
||||
FC,
|
||||
SetStateAction,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
|
||||
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
|
||||
import { TagQuestionObject, TitleKeys, TQuestionEntity } from "../AmoCRMModal";
|
||||
import Box from "@mui/material/Box";
|
||||
import type { AllTypesQuestion } from "@model/questionTypes/shared"
|
||||
import { getQuestionById } from "@/stores/questions/actions";
|
||||
import { useQuestionsStore } from "@/stores/questions/store";
|
||||
import { Box } from "@mui/material";
|
||||
import { QuestionKeys, SelectedQuestions, TagKeys } from "../types";
|
||||
|
||||
type Items = {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
};
|
||||
type Props = {
|
||||
questionsItems: Items[] | [];
|
||||
selectedQuestions: SelectedQuestions;
|
||||
handleAddQuestion: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
|
||||
handlePrevStep: () => void;
|
||||
handleNextStep: () => void;
|
||||
questionEntity: TQuestionEntity;
|
||||
setQuestionEntity: Dispatch<SetStateAction<TQuestionEntity>>;
|
||||
questions: AllTypesQuestion[];
|
||||
};
|
||||
|
||||
export const AmoQuestions: FC<Props> = ({
|
||||
questionsItems,
|
||||
selectedQuestions,
|
||||
handleAddQuestion,
|
||||
handlePrevStep,
|
||||
handleNextStep,
|
||||
questionEntity,
|
||||
setQuestionEntity,
|
||||
questions,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const [isSelection, setIsSelection] = useState<boolean>(false);
|
||||
const [activeItem, setActiveItem] = useState<string | null>(null);
|
||||
const [selectedValue, setSelectedValue] = useState<string | null>(null);
|
||||
const [activeScope, setActiveScope] = useState<QuestionKeys | null>(null);
|
||||
const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);
|
||||
|
||||
const handleAdd = useCallback(() => {
|
||||
if (!activeItem || !selectedValue) return;
|
||||
|
||||
setQuestionEntity((prevState) => ({
|
||||
...prevState,
|
||||
[activeItem]: [...prevState[activeItem as TitleKeys], Number(selectedValue)],
|
||||
}));
|
||||
}, [activeItem, setQuestionEntity, selectedValue]);
|
||||
|
||||
const items: TagQuestionObject[] = useMemo(
|
||||
() => Object.values(questions)
|
||||
.filter(({ type }) =>
|
||||
type !== "result"
|
||||
&& type !== null)
|
||||
.map(({ backendId, title }) => ({
|
||||
backendId: backendId,
|
||||
title
|
||||
})),
|
||||
[],
|
||||
);
|
||||
const translatedQuestionEntity = useMemo(() => {
|
||||
const translated = {
|
||||
|
||||
} as TQuestionEntity;
|
||||
|
||||
for (let key in questionEntity) {
|
||||
if (questionEntity[key] !== "Contact") {
|
||||
console.log(translated)
|
||||
console.log(translated[key])
|
||||
console.log(questionEntity)
|
||||
translated[key] = questionEntity[key].map((id) =>
|
||||
questions.find((q) => q.backendId === Number(id))?.title || id)
|
||||
}
|
||||
}
|
||||
|
||||
return translated
|
||||
},
|
||||
[questionEntity],
|
||||
)
|
||||
const handleAdd = () => {
|
||||
if (activeScope === null || selectedQuestion === null) return
|
||||
handleAddQuestion(activeScope, selectedQuestion, "question")
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -84,29 +45,29 @@ export const AmoQuestions: FC<Props> = ({
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{isSelection ? (
|
||||
{isSelection && activeScope !== null ? (
|
||||
// Здесь выбираем элемент в табличку
|
||||
<ItemsSelectionView
|
||||
items={items}
|
||||
type="typeQuestions"
|
||||
selectedValue={selectedValue}
|
||||
setSelectedValue={setSelectedValue}
|
||||
items={questionsItems}
|
||||
setSelectedItem={setSelectedQuestion}
|
||||
onSmallBtnClick={() => {
|
||||
setActiveItem(null);
|
||||
setActiveScope(null);
|
||||
setIsSelection(false);
|
||||
}}
|
||||
onLargeBtnClick={() => {
|
||||
handleAdd();
|
||||
setActiveItem(null);
|
||||
setActiveScope(null);
|
||||
setIsSelection(false);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
// Табличка
|
||||
<ItemDetailsView
|
||||
setActiveScope={setActiveScope}
|
||||
selectedQuestions={selectedQuestions}
|
||||
setIsSelection={setIsSelection}
|
||||
handleLargeBtn={handleNextStep}
|
||||
handleSmallBtn={handlePrevStep}
|
||||
questionEntity={translatedQuestionEntity}
|
||||
setActiveItem={setActiveItem}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material";
|
||||
import { Item } from "../Item/Item";
|
||||
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
|
||||
import { FC } from "react";
|
||||
import { TQuestionEntity } from "../../AmoCRMModal";
|
||||
import { QuestionKeys, SelectedQuestions } from "../../types";
|
||||
|
||||
type TitleKeys = "Contact" | "Company" | "Lead" | "Customer";
|
||||
|
||||
@ -10,16 +10,16 @@ type ItemDetailsViewProps = {
|
||||
setIsSelection: (value: boolean) => void;
|
||||
handleSmallBtn: () => void;
|
||||
handleLargeBtn: () => void;
|
||||
questionEntity: TQuestionEntity;
|
||||
setActiveItem: (value: string | null) => void;
|
||||
selectedQuestions: SelectedQuestions;
|
||||
setActiveScope: (value: QuestionKeys | null) => void;
|
||||
};
|
||||
|
||||
export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
|
||||
handleSmallBtn,
|
||||
handleLargeBtn,
|
||||
questionEntity,
|
||||
setActiveItem,
|
||||
selectedQuestions,
|
||||
setIsSelection,
|
||||
setActiveScope,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
@ -48,16 +48,16 @@ export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
|
||||
justifyContent: "start",
|
||||
}}
|
||||
>
|
||||
{questionEntity &&
|
||||
Object.keys(questionEntity).map((item) => (
|
||||
{selectedQuestions &&
|
||||
Object.keys(selectedQuestions).map((item) => (
|
||||
<Item
|
||||
key={item}
|
||||
title={item as TitleKeys}
|
||||
title={item}
|
||||
onAddBtnClick={() => {
|
||||
setIsSelection(true);
|
||||
setActiveItem(item);
|
||||
setActiveScope(item as QuestionKeys);
|
||||
}}
|
||||
data={questionEntity}
|
||||
data={selectedQuestions}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
34
src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx
34
src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemsSelectionView/ItemsSelectionView.tsx
@ -2,30 +2,28 @@ import { Box } from "@mui/material";
|
||||
import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/CustomRadioGroup";
|
||||
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
|
||||
import { FC } from "react";
|
||||
import { AllTypesQuestion } from "@/model/questionTypes/shared";
|
||||
import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal"
|
||||
import { Tag } from "@api/integration";
|
||||
|
||||
type Items = {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
};
|
||||
type ItemsSelectionViewProps = {
|
||||
type?: string;
|
||||
items?: TagQuestionObject[];
|
||||
selectedValue: string | null;
|
||||
setSelectedValue: (value: string | null) => void;
|
||||
items: Items[] | [];
|
||||
selectedItemId?: string | null;
|
||||
setSelectedItem: (value: string | null) => void;
|
||||
handleScroll?: () => void;
|
||||
onLargeBtnClick: () => void;
|
||||
onSmallBtnClick: () => void;
|
||||
setTags: (setValueFunc: (value: Tag[]) => Tag[]) => void;
|
||||
parentTags: Tag[]
|
||||
};
|
||||
|
||||
export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
|
||||
items,
|
||||
selectedValue,
|
||||
setSelectedValue,
|
||||
selectedItemId,
|
||||
setSelectedItem,
|
||||
handleScroll,
|
||||
onLargeBtnClick,
|
||||
onSmallBtnClick,
|
||||
type,
|
||||
parentTags,
|
||||
setTags
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
@ -46,12 +44,10 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
|
||||
}}
|
||||
>
|
||||
<CustomRadioGroup
|
||||
type={type}
|
||||
items={items}
|
||||
tags={parentTags}
|
||||
setTags={setTags}
|
||||
selectedValue={selectedValue}
|
||||
setSelectedValue={setSelectedValue}
|
||||
selectedItemId={selectedItemId}
|
||||
setSelectedItem={setSelectedItem}
|
||||
handleScroll={handleScroll}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
|
||||
@ -1,58 +1,42 @@
|
||||
import { useTheme } from "@mui/material";
|
||||
import {
|
||||
Dispatch,
|
||||
FC,
|
||||
SetStateAction,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import { TagKeys, TagQuestionObject, TTags } from "../AmoCRMModal";
|
||||
import Box from "@mui/material/Box";
|
||||
import { Box } from "@mui/material";
|
||||
import { ItemsSelectionView } from "../AmoQuestions/ItemsSelectionView/ItemsSelectionView";
|
||||
import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
|
||||
import { Tag } from "@api/integration";
|
||||
import { QuestionKeys, SelectedTags, TagKeys } from "../types";
|
||||
|
||||
type Items = {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
};
|
||||
type Props = {
|
||||
handleNextStep: () => void;
|
||||
tagsItems: Items[] | [];
|
||||
selectedTags: SelectedTags;
|
||||
handleAddTag: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
|
||||
handleScroll: () => void;
|
||||
handlePrevStep: () => void;
|
||||
tagsNames: TTags;
|
||||
setIdTags: Dispatch<SetStateAction<TTags>>;
|
||||
arrayOfTags: TTags[]
|
||||
handleNextStep: () => void;
|
||||
};
|
||||
|
||||
export const AmoTags: FC<Props> = ({
|
||||
handleNextStep,
|
||||
tagsItems,
|
||||
selectedTags,
|
||||
handleAddTag,
|
||||
handleScroll,
|
||||
handlePrevStep,
|
||||
tagsNames,
|
||||
setIdTags,
|
||||
arrayOfTags,
|
||||
handleNextStep,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const [isSelection, setIsSelection] = useState<boolean>(false);
|
||||
const [activeTag, setActiveItem] = useState<string | null>(null);
|
||||
const [selectedValue, setSelectedValue] = useState<string | null>(null);
|
||||
const [tags, setTags] = useState<Tag[]>([]);
|
||||
const [tagsNamesList, setTagsNamesList] = useState<Record<TagKeys, string[]>>({
|
||||
Lead: [],
|
||||
Contact: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
const handleAdd = useCallback(() => {
|
||||
if (!activeTag || !selectedValue) return;
|
||||
const [activeScope, setActiveScope] = useState<TagKeys | null>(null);
|
||||
const [selectedTag, setSelectedTag] = useState<string | null>(null);
|
||||
|
||||
setIdTags((prevState) => ({
|
||||
...prevState,
|
||||
[activeTag]: [...prevState[activeTag as TagKeys], Number(selectedValue)],
|
||||
}));
|
||||
setTagsNamesList((prevState) => ({
|
||||
...prevState,
|
||||
[activeTag]: [...prevState[activeTag as TagKeys], arrayOfTags.find((tag) => tag.AmoID == selectedValue).Name],
|
||||
}));
|
||||
}, [activeTag, setIdTags, selectedValue]);
|
||||
const handleAdd = () => {
|
||||
if (activeScope === null || selectedTag === null) return
|
||||
handleAddTag(activeScope, selectedTag, "tag")
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -63,31 +47,30 @@ export const AmoTags: FC<Props> = ({
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{isSelection ? (
|
||||
{isSelection && activeScope !== null ? (
|
||||
// Здесь выбираем элемент в табличку
|
||||
<ItemsSelectionView
|
||||
parentTags={tags}
|
||||
setTags={setTags}
|
||||
selectedValue={selectedValue}
|
||||
setSelectedValue={setSelectedValue}
|
||||
type={"typeTags"}
|
||||
items={tagsItems}
|
||||
setSelectedItem={setSelectedTag}
|
||||
handleScroll={handleScroll}
|
||||
onSmallBtnClick={() => {
|
||||
setActiveItem(null);
|
||||
setActiveScope(null);
|
||||
setIsSelection(false);
|
||||
}}
|
||||
onLargeBtnClick={() => {
|
||||
handleAdd();
|
||||
setActiveItem(null);
|
||||
setActiveScope(null);
|
||||
setIsSelection(false);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
// Табличка
|
||||
<TagsDetailsView
|
||||
tagsNamesList={tagsNamesList}
|
||||
setActiveScope={setActiveScope}
|
||||
selectedTags={selectedTags}
|
||||
setIsSelection={setIsSelection}
|
||||
handlePrevStep={handlePrevStep}
|
||||
handleNextStep={handleNextStep}
|
||||
tagsNames={tagsNames}
|
||||
setActiveItem={setActiveItem}
|
||||
handlePrevStep={handlePrevStep}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -1,25 +1,23 @@
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
|
||||
import { FC } from "react";
|
||||
import { TagKeys, TitleKeys, TTags } from "../../AmoCRMModal";
|
||||
import { Item } from "../../AmoQuestions/Item/Item";
|
||||
import { SelectedTags, TagKeys } from "../../types";
|
||||
|
||||
type TagsDetailsViewProps = {
|
||||
setIsSelection: (value: boolean) => void;
|
||||
handlePrevStep: () => void;
|
||||
handleNextStep: () => void;
|
||||
tagsNames: TTags;
|
||||
setActiveItem: (value: string | null) => void;
|
||||
tagsNamesList: Record<TagKeys, string[]>
|
||||
setActiveScope: (value: TagKeys | null) => void;
|
||||
selectedTags: SelectedTags;
|
||||
};
|
||||
|
||||
export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
|
||||
setActiveScope,
|
||||
selectedTags,
|
||||
setIsSelection,
|
||||
handlePrevStep,
|
||||
handleNextStep,
|
||||
tagsNames,
|
||||
setActiveItem,
|
||||
setIsSelection,
|
||||
tagsNamesList,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
@ -70,17 +68,16 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
|
||||
justifyContent: "start",
|
||||
}}
|
||||
>
|
||||
{tagsNames &&
|
||||
Object.keys(tagsNames).map((item) => (
|
||||
{selectedTags &&
|
||||
Object.keys(selectedTags).map((item) => (
|
||||
<Item
|
||||
tagsNamesList={tagsNamesList}
|
||||
key={item}
|
||||
title={item as TitleKeys}
|
||||
title={item}
|
||||
onAddBtnClick={() => {
|
||||
setIsSelection(true);
|
||||
setActiveItem(item);
|
||||
setActiveScope(item as TagKeys);
|
||||
}}
|
||||
data={tagsNames}
|
||||
data={selectedTags}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
@ -6,14 +6,14 @@ import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
|
||||
type Props = {
|
||||
handlePrevStep: () => void;
|
||||
handleNextStep: () => void;
|
||||
selectedDealPerformer: number | null;
|
||||
setSelectedDealPerformer: (value: number | null) => void;
|
||||
selectedDealUser: string | null;
|
||||
setSelectedDealPerformer: (value: string | null) => void;
|
||||
};
|
||||
|
||||
export const DealPerformers: FC<Props> = ({
|
||||
handlePrevStep,
|
||||
handleNextStep,
|
||||
selectedDealPerformer,
|
||||
selectedDealUser,
|
||||
setSelectedDealPerformer,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
@ -32,9 +32,10 @@ export const DealPerformers: FC<Props> = ({
|
||||
>
|
||||
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
|
||||
<CustomSelect
|
||||
selectedItem={selectedDealPerformer}
|
||||
setSelectedItem={setSelectedDealPerformer}
|
||||
type={"typeUsers"}
|
||||
items={ }
|
||||
selectedItemId={ }
|
||||
setSelectedItem={ }
|
||||
handleScroll={ }
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
|
||||
@ -7,11 +7,11 @@ import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/Custom
|
||||
type Props = {
|
||||
handlePrevStep: () => void;
|
||||
handleNextStep: () => void;
|
||||
selectedStepsPerformer: number | null;
|
||||
setSelectedStepsPerformer: (value: number | null) => void;
|
||||
selectedStep: number | null;
|
||||
setSelectedStep: (value: number | null) => void;
|
||||
pipelineId: number | null;
|
||||
selectedStepsPerformer: string | null;
|
||||
setSelectedStepsPerformer: (value: string | null) => void;
|
||||
selectedStep: string | null;
|
||||
setSelectedStep: (value: string | null) => void;
|
||||
pipelineId: string | null;
|
||||
};
|
||||
|
||||
export const PipelineSteps: FC<Props> = ({
|
||||
@ -39,9 +39,10 @@ export const PipelineSteps: FC<Props> = ({
|
||||
>
|
||||
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
|
||||
<CustomSelect
|
||||
selectedItem={selectedStepsPerformer}
|
||||
type={"typeUsers"}
|
||||
setSelectedItem={setSelectedStepsPerformer}
|
||||
items={ }
|
||||
selectedItemId={ }
|
||||
setSelectedItem={ }
|
||||
handleScroll={ }
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
@ -53,11 +54,10 @@ export const PipelineSteps: FC<Props> = ({
|
||||
}}
|
||||
>
|
||||
<CustomRadioGroup
|
||||
// @ts-ignore
|
||||
pipelineId={pipelineId}
|
||||
type={"typeSteps"}
|
||||
selectedValue={selectedStep}
|
||||
setSelectedValue={setSelectedStep}
|
||||
items={ }
|
||||
selectedItemId={ }
|
||||
setSelectedItem={ }
|
||||
handleScroll={ }
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
|
||||
@ -7,10 +7,10 @@ import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/Custom
|
||||
type Props = {
|
||||
handlePrevStep: () => void;
|
||||
handleNextStep: () => void;
|
||||
selectedPipelinePerformer: number | null;
|
||||
setSelectedPipelinePerformer: (value: number | null) => void;
|
||||
selectedPipeline: number | null;
|
||||
setSelectedPipeline: (value: number | null) => void;
|
||||
selectedPipelinePerformer: string | null;
|
||||
setSelectedPipelineUser: (value: string | null) => void;
|
||||
selectedPipeline: string | null;
|
||||
setSelectedPipeline: (value: string | null) => void;
|
||||
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ export const Pipelines: FC<Props> = ({
|
||||
handlePrevStep,
|
||||
handleNextStep,
|
||||
selectedPipelinePerformer,
|
||||
setSelectedPipelinePerformer,
|
||||
setSelectedPipelineUser,
|
||||
selectedPipeline,
|
||||
setSelectedPipeline,
|
||||
}) => {
|
||||
@ -37,9 +37,10 @@ export const Pipelines: FC<Props> = ({
|
||||
>
|
||||
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
|
||||
<CustomSelect
|
||||
selectedItem={selectedPipelinePerformer}
|
||||
setSelectedItem={setSelectedPipelinePerformer}
|
||||
type={"typeUsers"}
|
||||
items={ }
|
||||
selectedItemId={ }
|
||||
setSelectedItem={ }
|
||||
handleScroll={ }
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
@ -51,9 +52,10 @@ export const Pipelines: FC<Props> = ({
|
||||
}}
|
||||
>
|
||||
<CustomRadioGroup
|
||||
selectedValue={selectedPipeline}
|
||||
setSelectedValue={setSelectedPipeline}
|
||||
type={"typePipelines"}
|
||||
items={ }
|
||||
selectedItemId={ }
|
||||
setSelectedItem={ }
|
||||
handleScroll={ }
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
|
||||
@ -2,17 +2,17 @@ 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 "../AmoCRMModal";
|
||||
import { SelectedQuestions, SelectedTags } from "../types";
|
||||
|
||||
type AmoSettingsBlockProps = {
|
||||
stepTitles: string[];
|
||||
setStep: (value: number) => void;
|
||||
setIsSettingsBlock: (value: boolean) => void;
|
||||
selectedFunnel: number | null;
|
||||
selectedStage: number | null;
|
||||
selectedDealPerformer: string | null;
|
||||
questionEntity: TQuestionEntity;
|
||||
tags: TTags;
|
||||
selectedFunnel: string | null;
|
||||
selectedStage: string | null;
|
||||
selectedDealUser: string | null;
|
||||
selectedQuestions: SelectedQuestions;
|
||||
selectedTags: SelectedTags;
|
||||
};
|
||||
|
||||
export const AmoSettingsBlock: FC<AmoSettingsBlockProps> = ({
|
||||
@ -20,10 +20,10 @@ export const AmoSettingsBlock: FC<AmoSettingsBlockProps> = ({
|
||||
setStep,
|
||||
setIsSettingsBlock,
|
||||
selectedFunnel,
|
||||
selectedDealPerformer,
|
||||
selectedDealUser,
|
||||
selectedStage,
|
||||
questionEntity,
|
||||
tags,
|
||||
selectedQuestions,
|
||||
selectedTags,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
@ -57,11 +57,11 @@ export const AmoSettingsBlock: FC<AmoSettingsBlockProps> = ({
|
||||
title={title}
|
||||
setIsSettingsBlock={setIsSettingsBlock}
|
||||
setStep={setStep}
|
||||
selectedDealPerformer={selectedDealPerformer}
|
||||
selectedDealUser={selectedDealUser}
|
||||
selectedFunnel={selectedFunnel}
|
||||
selectedStage={selectedStage}
|
||||
questionEntity={questionEntity}
|
||||
tags={tags}
|
||||
selectedQuestions={selectedQuestions}
|
||||
selectedTags={selectedTags}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
@ -4,7 +4,7 @@ import { Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { SettingItemHeader } from "./SettingItemHeader/SettingItemHeader";
|
||||
import { ResponsiblePerson } from "./ResponsiblePerson/ResponsiblePerson";
|
||||
import { SelectedParameter } from "./SelectedParameter/SelectedParameter";
|
||||
import { TQuestionEntity, TTags } from "../../AmoCRMModal";
|
||||
import { SelectedQuestions, SelectedTags } from "../../types";
|
||||
|
||||
type SettingItemProps = {
|
||||
step: number;
|
||||
@ -14,10 +14,10 @@ type SettingItemProps = {
|
||||
selectedFunnelPerformer: string | null;
|
||||
selectedFunnel: string | null;
|
||||
selectedStagePerformer: string | null;
|
||||
selectedDealPerformer: string | null;
|
||||
selectedDealUser: string | null;
|
||||
selectedStage: string | null;
|
||||
questionEntity: TQuestionEntity;
|
||||
tags: TTags;
|
||||
selectedQuestions: SelectedQuestions;
|
||||
selectedTags: SelectedTags;
|
||||
};
|
||||
|
||||
export const SettingItem: FC<SettingItemProps> = ({
|
||||
@ -28,10 +28,10 @@ export const SettingItem: FC<SettingItemProps> = ({
|
||||
selectedFunnelPerformer,
|
||||
selectedFunnel,
|
||||
selectedStagePerformer,
|
||||
selectedDealPerformer,
|
||||
selectedDealUser,
|
||||
selectedStage,
|
||||
questionEntity,
|
||||
tags,
|
||||
selectedQuestions,
|
||||
selectedTags,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
@ -43,7 +43,7 @@ export const SettingItem: FC<SettingItemProps> = ({
|
||||
if (step === 1) {
|
||||
return (
|
||||
<>
|
||||
<ResponsiblePerson performer={selectedDealPerformer} />
|
||||
<ResponsiblePerson performer={selectedDealUser} />
|
||||
<SelectedParameter parameter={selectedFunnel} />
|
||||
</>
|
||||
);
|
||||
@ -51,7 +51,7 @@ export const SettingItem: FC<SettingItemProps> = ({
|
||||
if (step === 2) {
|
||||
return (
|
||||
<>
|
||||
<ResponsiblePerson performer={selectedDealPerformer} />
|
||||
<ResponsiblePerson performer={selectedDealUser} />
|
||||
<SelectedParameter parameter={selectedStage} />
|
||||
</>
|
||||
);
|
||||
@ -59,12 +59,12 @@ export const SettingItem: FC<SettingItemProps> = ({
|
||||
if (step === 3) {
|
||||
return (
|
||||
<>
|
||||
<ResponsiblePerson performer={selectedDealPerformer} />
|
||||
<ResponsiblePerson performer={selectedDealUser} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (step === 4) {
|
||||
const isFilled = Object.values(questionEntity).some(
|
||||
const isFilled = Object.values(selectedQuestions).some(
|
||||
(array) => array.length > 0,
|
||||
);
|
||||
const status = isFilled ? "Заполнено" : "Не заполнено";
|
||||
@ -96,7 +96,7 @@ export const SettingItem: FC<SettingItemProps> = ({
|
||||
);
|
||||
}
|
||||
if (step === 5) {
|
||||
const isFilled = Object.values(tags).some((array) => array.length > 0);
|
||||
const isFilled = Object.values(selectedTags).some((array) => array.length > 0);
|
||||
const status = isFilled ? "Заполнено" : "Не заполнено";
|
||||
|
||||
return (
|
||||
@ -131,10 +131,10 @@ export const SettingItem: FC<SettingItemProps> = ({
|
||||
selectedFunnelPerformer,
|
||||
selectedFunnel,
|
||||
selectedStagePerformer,
|
||||
selectedDealPerformer,
|
||||
selectedDealUser,
|
||||
selectedStage,
|
||||
questionEntity,
|
||||
tags,
|
||||
selectedQuestions,
|
||||
selectedTags,
|
||||
]);
|
||||
|
||||
return (
|
||||
|
||||
11
src/pages/IntegrationsPage/IntegrationsModal/types.ts
Normal file
11
src/pages/IntegrationsPage/IntegrationsModal/types.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export type TagKeys = "Contact" | "Company" | "Lead" | "Customer";
|
||||
export type SelectedTags = Record<TagKeys, string[] | []>;
|
||||
|
||||
export type QuestionKeys = "Company" | "Lead" | "Customer";
|
||||
export type SelectedQuestions = Record<QuestionKeys, string[] | []>;
|
||||
|
||||
export type minifiedData = {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
};
|
||||
@ -0,0 +1,250 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import type {
|
||||
TagKeys,
|
||||
SelectedTags,
|
||||
QuestionKeys,
|
||||
SelectedQuestions,
|
||||
minifiedData,
|
||||
} from "./types";
|
||||
import {
|
||||
AccountResponse,
|
||||
getIntegrationRules,
|
||||
getPipelines,
|
||||
getSteps,
|
||||
getTags,
|
||||
getUsers,
|
||||
getAccount,
|
||||
} from "@/api/integration";
|
||||
|
||||
const SIZE = 25;
|
||||
|
||||
interface Props {
|
||||
isModalOpen: boolean;
|
||||
isTryRemoveAccount: boolean;
|
||||
quizID: number;
|
||||
}
|
||||
|
||||
export const useAmoIntegration = ({
|
||||
isModalOpen,
|
||||
isTryRemoveAccount,
|
||||
quizID,
|
||||
}: Props) => {
|
||||
const [isloadingPage, setIsLoadingPage] = useState<boolean>(true);
|
||||
const [firstRules, setFirstRules] = useState<boolean>(false);
|
||||
const [accountInfo, setAccountInfo] = useState<AccountResponse | null>(null);
|
||||
|
||||
const [arrayOfPipelines, setArrayOfPipelines] = useState<minifiedData[]>([]);
|
||||
const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState<minifiedData[]>([]);
|
||||
const [arrayOfUsers, setArrayOfUsers] = useState<minifiedData[]>([]);
|
||||
const [arrayOfTags, setArrayOfTags] = useState<minifiedData[]>([]);
|
||||
|
||||
const [selectedPipeline, setSelectedPipeline] = useState<string | null>(null);
|
||||
const [selectedPipelineStep, setSelectedPipelineStep] = useState<string | null>(null);
|
||||
const [selectedDealUser, setSelectedDealPerformer] = useState<string | null>(null);
|
||||
|
||||
const [questionEntityBackend, setQuestionEntityBackend] = useState<Record<Partial<TagKeys>, number> | {}>({});
|
||||
const [selectedTags, setSelectedTags] = useState<SelectedTags>({
|
||||
Lead: [],
|
||||
Contact: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
const [selectedQuestions, setSelectedQuestions] = useState<SelectedQuestions>({
|
||||
Lead: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
|
||||
const [pageOfPipelines, setPageOfPipelines] = useState(1);
|
||||
const [pageOfPipelinesSteps, setPageOfPipelinesSteps] = useState(1);
|
||||
const [pageOfUsers, setPageOfUsers] = useState(1);
|
||||
const [pageOfTags, setPageOfTags] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen && !isTryRemoveAccount) {
|
||||
const fetchAccountRules = async () => {
|
||||
setIsLoadingPage(true)
|
||||
const [account, accountError] = await getAccount();
|
||||
|
||||
if (accountError) {
|
||||
if (!accountError.includes("Not Found")) enqueueSnackbar(accountError)
|
||||
setAccountInfo(null);
|
||||
}
|
||||
if (account) {
|
||||
setAccountInfo(account);
|
||||
}
|
||||
const [settingsResponse, rulesError] = await getIntegrationRules(quizID.toString());
|
||||
|
||||
if (rulesError) {
|
||||
if (rulesError === "first") setFirstRules(true);
|
||||
if (!rulesError.includes("Not Found") && !rulesError.includes("first")) enqueueSnackbar(rulesError);
|
||||
}
|
||||
if (settingsResponse) {
|
||||
if (settingsResponse.PipelineID) setSelectedPipeline(settingsResponse.PipelineID.toString())
|
||||
if (settingsResponse.StepID) setSelectedPipelineStep(settingsResponse.StepID.toString())
|
||||
if (settingsResponse.PerformerID) setSelectedDealPerformer(settingsResponse.PerformerID.toString())
|
||||
|
||||
if (Boolean(settingsResponse.FieldsRule) &&
|
||||
Object.keys(settingsResponse?.FieldsRule).length > 0) {
|
||||
const gottenQuestions = { ...selectedQuestions }
|
||||
setQuestionEntityBackend(settingsResponse.FieldsRule)
|
||||
|
||||
for (let key in settingsResponse.FieldsRule) {
|
||||
if (settingsResponse.FieldsRule[key as QuestionKeys] !== null && Array.isArray(settingsResponse.FieldsRule[key as QuestionKeys])) {
|
||||
|
||||
const gottenList = settingsResponse.FieldsRule[key as QuestionKeys]
|
||||
|
||||
if (gottenList !== null)
|
||||
gottenQuestions[key as QuestionKeys] = Object.keys(gottenList[0].QuestionID)
|
||||
}
|
||||
}
|
||||
setSelectedQuestions(gottenQuestions)
|
||||
}
|
||||
|
||||
if (Boolean(settingsResponse.TagsToAdd) &&
|
||||
Object.keys(settingsResponse.TagsToAdd).length > 0) {
|
||||
const gottenTags = { ...selectedTags }
|
||||
|
||||
for (let key in settingsResponse.TagsToAdd) {
|
||||
const gottenList = settingsResponse.TagsToAdd[key as TagKeys]
|
||||
if (gottenList !== null && Array.isArray(gottenList)) {
|
||||
gottenTags[key as TagKeys] = gottenList.map(e => e.toString())
|
||||
}
|
||||
}
|
||||
setSelectedTags(gottenTags)
|
||||
}
|
||||
setFirstRules(false);
|
||||
}
|
||||
setIsLoadingPage(false)
|
||||
};
|
||||
|
||||
fetchAccountRules();
|
||||
} else {
|
||||
//Вот по-хорошему компонент должен размонтироваться и стереть всё. Но это будет сделано позже
|
||||
setArrayOfPipelines([]);
|
||||
setArrayOfPipelinesSteps([]);
|
||||
setArrayOfUsers([]);
|
||||
setArrayOfTags([]);
|
||||
setSelectedPipeline(null);
|
||||
setSelectedPipelineStep(null);
|
||||
setSelectedDealPerformer(null);
|
||||
setQuestionEntityBackend({});
|
||||
setSelectedTags({
|
||||
Lead: [],
|
||||
Contact: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
setSelectedQuestions({
|
||||
Lead: [],
|
||||
Company: [],
|
||||
Customer: [],
|
||||
});
|
||||
setPageOfPipelines(1);
|
||||
setPageOfPipelinesSteps(1);
|
||||
setPageOfUsers(1);
|
||||
setPageOfTags(1);
|
||||
}
|
||||
}, [isModalOpen, isTryRemoveAccount]);
|
||||
|
||||
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]);
|
||||
}
|
||||
})
|
||||
}, [pageOfPipelines])
|
||||
useEffect(() => {
|
||||
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((prevItems) => [...prevItems, ...minifiedSteps]);
|
||||
}
|
||||
});
|
||||
}, [selectedPipeline, pageOfPipelinesSteps])
|
||||
useEffect(() => {
|
||||
getUsers({
|
||||
page: pageOfUsers,
|
||||
size: SIZE,
|
||||
}).then(([response]) => {
|
||||
if (response && response.items !== null) {
|
||||
const minifiedUsers: minifiedData[] = []
|
||||
|
||||
response.items.forEach((step) => {
|
||||
minifiedUsers.push({
|
||||
id: step.amoID.toString(),
|
||||
title: step.name
|
||||
})
|
||||
})
|
||||
setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]);
|
||||
}
|
||||
});
|
||||
}, [pageOfUsers])
|
||||
useEffect(() => {
|
||||
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
|
||||
})
|
||||
})
|
||||
setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]);
|
||||
}
|
||||
});
|
||||
}, [pageOfTags])
|
||||
|
||||
return ({
|
||||
isloadingPage,
|
||||
firstRules,
|
||||
accountInfo,
|
||||
arrayOfPipelines,
|
||||
arrayOfPipelinesSteps,
|
||||
arrayOfUsers,
|
||||
arrayOfTags,
|
||||
selectedPipeline,
|
||||
setSelectedPipeline,
|
||||
selectedPipelineStep,
|
||||
setSelectedPipelineStep,
|
||||
selectedDealUser,
|
||||
setSelectedDealPerformer,
|
||||
questionEntityBackend,
|
||||
selectedTags,
|
||||
setSelectedTags,
|
||||
selectedQuestions,
|
||||
setSelectedQuestions,
|
||||
setPageOfPipelines,
|
||||
setPageOfPipelinesSteps,
|
||||
setPageOfUsers,
|
||||
setPageOfTags,
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user