SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

WIP... realized pipelines, users, removed utm, refactored modals with lazy

Browse Source
This commit is contained in:
aleksandr-raw 2024-05-22 01:29:33 +04:00
parent 73fa046cc8
commit a66a4764cf
14 changed files with 234 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/integration.ts
View File

@ -21,7 +21,7 @@ export type TagsResponse = {
count: number;
items: Tag[];
};
const API_URL = `${process.env.REACT_APP_DOMAIN}/squiz/amocrm/amocrm`;
const API_URL = `${process.env.REACT_APP_DOMAIN}/squiz/amocrm`;
export const getTags = async ({
page,
@ -112,3 +112,37 @@ export const getSteps = async ({
return [null, `Не удалось получить список шагов. ${error}`];
}
};
export type Pipeline = {
ID: number;
AmoID: number;
AccountID: number;
Name: string;
IsArchive: boolean;
Deleted: boolean;
CreatedAt: number;
};
export type PipelinesResponse = {
count: number;
items: Pipeline[];
};
export const getPipelines = async ({
page,
size,
}: PaginationRequest): Promise<[PipelinesResponse | null, string?]> => {
try {
const pipelinesResponse = await makeRequest<
PaginationRequest,
PipelinesResponse
>({
method: "GET",
url: `${API_URL}/pipelines?page=${page}&size=${size}`,
});
return [pipelinesResponse];
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
return [null, `Не удалось получить список воронок. ${error}`];
}
};

57
src/components/CustomRadioGroup/CustomRadioGroup.tsx
View File

@ -7,9 +7,11 @@ import Box from "@mui/material/Box";
import CheckboxIcon from "@icons/Checkbox";
import { Typography, useTheme } from "@mui/material";
import {
getPipelines,
getSteps,
getTags,
PaginationRequest,
Pipeline,
Step,
Tag,
} from "@api/integration";
@ -37,6 +39,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
const [isLoading, setIsLoading] = useState(false);
const [tags, setTags] = useState<Tag[]>([]);
const [steps, setSteps] = useState<Step[]>([]);
const [pipelines, setPipelines] = useState<Pipeline[]>([]);
const [hasMoreItems, setHasMoreItems] = useState(true);
const boxRef = useRef(null);
@ -90,6 +93,22 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
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(() => {
@ -123,7 +142,6 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
icon={<CheckboxIcon isRounded />}
/>
}
// label={item.Name}
label={
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography sx={{ color: `${item.Color}` }}>
@ -171,6 +189,41 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
/>
));
}
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,
}}
value={pipeline.Name}
control={
<Radio
checkedIcon={
<CheckboxIcon
checked
isRounded
color={theme.palette.brightPurple.main}
/>
}
icon={<CheckboxIcon isRounded />}
/>
}
label={pipeline.Name}
labelPlacement={"start"}
/>
));
}
return (
<Box
sx={{
@ -184,7 +237,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
<Typography>Нет элементов</Typography>
</Box>
);
}, [tags, currentValue, type]);
}, [tags, steps, currentValue, type, pipelines]);
return (
<Box

66
src/components/CustomSelect/CustomSelect.tsx
View File

@ -35,15 +35,22 @@ export const CustomSelect: FC<CustomSelectProps> = ({
const [hasMoreItems, setHasMoreItems] = useState(true);
const SIZE = 25;
const ref = useRef<HTMLDivElement | null>(null);
console.log("page", page);
const selectWidth = ref.current ? ref.current.offsetWidth : undefined;
const [savedValue, setSavedValue] = useState<number | null>(null);
const onSelectItem = useCallback(
(event: SelectChangeEvent<HTMLDivElement>) => {
const newValue = event.target.value.toString();
const selectedUser = users.find((user) => user.Name === newValue);
if (selectedUser) {
//для сохранения ID выбранного пользователя в стейт или конфиг...
setSavedValue(selectedUser.ID);
}
setCurrentValue(newValue);
setSelectedItem(newValue);
},
[setSelectedItem, setCurrentValue],
[setSelectedItem, setCurrentValue, setSavedValue, users],
);
const toggleOpened = useCallback(() => {
@ -86,9 +93,56 @@ export const CustomSelect: FC<CustomSelectProps> = ({
<MenuItem
key={user.ID}
value={user.Name}
sx={{ padding: "12px", zIndex: 2 }}
sx={{
padding: "6px 0",
zIndex: 2,
borderTop: "1px solid rgba(154, 154, 175, 0.1)",
width: "auto",
}}
>
{user.Name}
<Box
sx={{
fontSize: "16px",
color: "#4D4D4D",
display: "flex",
flexDirection: isMobile ? "column" : "row",
justifyContent: "space-evenly",
width: "100%",
}}
>
<Typography
sx={{
width: "33%",
borderRight: isMobile
? "none"
: "1px solid rgba(154, 154, 175, 0.1)",
padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
}}
>
{user.Name}
</Typography>
<Typography
sx={{
width: "33%",
borderRight: isMobile
? "none"
: "1px solid rgba(154, 154, 175, 0.1)",
padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
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}
</Typography>
</Box>
</MenuItem>
));
}
@ -162,10 +216,12 @@ export const CustomSelect: FC<CustomSelectProps> = ({
zIndex: 2,
maxHeight: "300px",
overflow: "auto",
overflowX: "auto",
maxWidth: selectWidth,
},
},
}}
sx={{ width: "100%" }}
sx={{}}
onChange={onSelectItem}
onClick={toggleOpened}
>

67
src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
View File

@ -12,9 +12,8 @@ import { IntegrationStep1 } from "./IntegrationStep1/IntegrationStep1";
import { IntegrationStep2 } from "./IntegrationStep2/IntegrationStep2";
import { IntegrationStep3 } from "./IntegrationStep3/IntegrationStep3";
import { IntegrationStep4 } from "./IntegrationStep4/IntegrationStep4";
import { IntegrationStep5 } from "./IntegrationStep5/IntegrationStep5";
import { IntegrationStep6 } from "./IntegrationStep6/IntegrationStep6";
import { funnelsMock, performersMock, stagesMock } from "../mocks/MockData";
import { performersMock } from "../mocks/MockData";
import { IntegrationsModalTitle } from "./IntegrationsModalTitle/IntegrationsModalTitle";
import { SettingsBlock } from "./SettingsBlock/SettingsBlock";
import { IntegrationStep7 } from "./IntegrationStep7/IntegrationStep7";
@ -42,18 +41,17 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
const [step, setStep] = useState<number>(0);
const [isSettingsBlock, setIsSettingsBlock] = useState<boolean>(false);
const [selectedFunnelPerformer, setSelectedFunnelPerformer] = useState<
const [selectedPipelinePerformer, setSelectedPipelinePerformer] = useState<
string | null
>(null);
const [selectedFunnel, setSelectedFunnel] = useState<string | null>(null);
const [selectedStagePerformer, setSelectedStagePerformer] = useState<
const [selectedPipeline, setSelectedPipeline] = useState<string | null>(null);
const [selectedStepsPerformer, setSelectedStepsPerformer] = useState<
string | null
>(null);
const [selectedStage, setSelectedStage] = useState<string | null>(null);
const [selectedStep, setSelectedStep] = useState<string | null>(null);
const [selectedDealPerformer, setSelectedDealPerformer] = useState<
string | null
>(null);
const [utmFile, setUtmFile] = useState<File | null>(null);
const [questionEntity, setQuestionEntity] = useState<TQuestionEntity>({
contacts: [],
company: [],
@ -93,12 +91,10 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
<IntegrationStep2
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
selectedFunnelPerformer={selectedFunnelPerformer}
setSelectedFunnelPerformer={setSelectedFunnelPerformer}
selectedFunnel={selectedFunnel}
setSelectedFunnel={setSelectedFunnel}
performers={performersMock}
funnels={funnelsMock}
selectedPipelinePerformer={selectedPipelinePerformer}
setSelectedPipelinePerformer={setSelectedPipelinePerformer}
selectedPipeline={selectedPipeline}
setSelectedPipeline={setSelectedPipeline}
/>
),
},
@ -109,13 +105,11 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
<IntegrationStep3
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
selectedStagePerformer={selectedStagePerformer}
setSelectedStagePerformer={setSelectedStagePerformer}
selectedStage={selectedStage}
setSelectedStage={setSelectedStage}
performers={performersMock}
stages={stagesMock}
pipelineId={selectedFunnel}
selectedStepsPerformer={selectedStepsPerformer}
setSelectedStepsPerformer={setSelectedStepsPerformer}
selectedStep={selectedStep}
setSelectedStep={setSelectedStep}
pipelineId={selectedPipeline}
/>
),
},
@ -132,18 +126,6 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
/>
),
},
{
title: "Добавление utm-меток",
isSettingsAvailable: false,
component: (
<IntegrationStep5
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
utmFile={utmFile}
setUtmFile={setUtmFile}
/>
),
},
{
title: "Соотнесение вопросов и сущностей",
isSettingsAvailable: true,
@ -171,11 +153,11 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
],
[
questionEntity,
utmFile,
selectedFunnelPerformer,
selectedFunnel,
selectedStagePerformer,
selectedStage,
// utmFile,
selectedPipelinePerformer,
selectedPipeline,
selectedStepsPerformer,
selectedStep,
selectedDealPerformer,
tags,
],
@ -188,7 +170,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
open={isModalOpen}
onClose={handleCloseModal}
fullWidth
fullScreen={isMobile}
// fullScreen={isMobile}
PaperProps={{
sx: {
maxWidth: isTablet ? "100%" : "920px",
@ -253,11 +235,10 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealPerformer={selectedDealPerformer}
selectedFunnelPerformer={selectedFunnelPerformer}
selectedFunnel={selectedFunnel}
selectedStagePerformer={selectedStagePerformer}
selectedStage={selectedStage}
utmFile={utmFile}
selectedFunnelPerformer={selectedPipelinePerformer}
selectedFunnel={selectedPipeline}
selectedStagePerformer={selectedStepsPerformer}
selectedStage={selectedStep}
questionEntity={questionEntity}
tags={tags}
/>

29
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx
View File

@ -7,23 +7,19 @@ import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/Custom
type IntegrationStep2Props = {
handlePrevStep: () => void;
handleNextStep: () => void;
selectedFunnelPerformer: string | null;
setSelectedFunnelPerformer: (value: string | null) => void;
selectedFunnel: string | null;
setSelectedFunnel: (value: string | null) => void;
performers: string[];
funnels: string[];
selectedPipelinePerformer: string | null;
setSelectedPipelinePerformer: (value: string | null) => void;
selectedPipeline: string | null;
setSelectedPipeline: (value: string | null) => void;
};
export const IntegrationStep2: FC<IntegrationStep2Props> = ({
handlePrevStep,
handleNextStep,
selectedFunnelPerformer,
setSelectedFunnelPerformer,
selectedFunnel,
setSelectedFunnel,
performers,
funnels,
selectedPipelinePerformer,
setSelectedPipelinePerformer,
selectedPipeline,
setSelectedPipeline,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -40,8 +36,8 @@ export const IntegrationStep2: FC<IntegrationStep2Props> = ({
>
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
<CustomSelect
selectedItem={selectedFunnelPerformer}
setSelectedItem={setSelectedFunnelPerformer}
selectedItem={selectedPipelinePerformer}
setSelectedItem={setSelectedPipelinePerformer}
type={"typeUsers"}
/>
</Box>
@ -54,8 +50,9 @@ export const IntegrationStep2: FC<IntegrationStep2Props> = ({
}}
>
<CustomRadioGroup
selectedValue={selectedFunnel}
setSelectedValue={setSelectedFunnel}
selectedValue={selectedPipeline}
setSelectedValue={setSelectedPipeline}
type={"typePipelines"}
/>
</Box>
<Box

26
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep3/IntegrationStep3.tsx
View File

@ -7,22 +7,20 @@ import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/Custom
type IntegrationStep3Props = {
handlePrevStep: () => void;
handleNextStep: () => void;
selectedStagePerformer: string | null;
setSelectedStagePerformer: (value: string | null) => void;
selectedStage: string | null;
setSelectedStage: (value: string | null) => void;
performers: string[];
stages: string[];
selectedStepsPerformer: string | null;
setSelectedStepsPerformer: (value: string | null) => void;
selectedStep: string | null;
setSelectedStep: (value: string | null) => void;
pipelineId: string | null;
};
export const IntegrationStep3: FC<IntegrationStep3Props> = ({
handlePrevStep,
handleNextStep,
selectedStagePerformer,
setSelectedStagePerformer,
selectedStage,
setSelectedStage,
selectedStepsPerformer,
setSelectedStepsPerformer,
selectedStep,
setSelectedStep,
pipelineId,
}) => {
const theme = useTheme();
@ -41,9 +39,9 @@ export const IntegrationStep3: FC<IntegrationStep3Props> = ({
>
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
<CustomSelect
selectedItem={selectedStagePerformer}
selectedItem={selectedStepsPerformer}
type={"typeUsers"}
setSelectedItem={setSelectedStagePerformer}
setSelectedItem={setSelectedStepsPerformer}
/>
</Box>
<Box
@ -57,8 +55,8 @@ export const IntegrationStep3: FC<IntegrationStep3Props> = ({
<CustomRadioGroup
pipelineId={pipelineId}
type={"typeSteps"}
selectedValue={selectedStage}
setSelectedValue={setSelectedStage}
selectedValue={selectedStep}
setSelectedValue={setSelectedStep}
/>
</Box>
<Box

94
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/CustomFileUploader/CustomFileUploader.tsx
View File

@ -1,94 +0,0 @@
import {
Box,
ButtonBase,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import UploadIcon from "@icons/UploadIcon";
import { type DragEvent, FC, useRef, useState } from "react";
type TextFormat = "txt" | "docx";
interface CustomFileUploaderProps {
description?: string;
accept?: TextFormat[];
handleImageChange: (file: File) => void;
}
export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
accept,
description,
handleImageChange,
}) => {
const theme = useTheme();
const dropZone = useRef<HTMLDivElement>(null);
const [ready, setReady] = useState(false);
const isMobile = useMediaQuery(theme.breakpoints.down(700));
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(true);
};
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
const file = event.dataTransfer.files[0];
if (!file) return;
handleImageChange(file);
};
const acceptedFormats = accept
? accept.map((format) => "." + format).join(", ")
: "";
return (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={(event) => {
const file = event.target.files?.[0];
if (file) handleImageChange(file);
}}
hidden
accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
multiple
type="file"
data-cy="upload-image-input"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>
event.preventDefault()
}
onDrop={handleDrop}
ref={dropZone}
sx={{
width: isMobile ? "100%" : "580px",
padding: isMobile ? "33px" : "33px 10px 33px 55px",
display: "flex",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
gap: "55px",
flexDirection: isMobile ? "column" : "row",
}}
onDragEnter={handleDragEnter}
>
<UploadIcon />
<Box>
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
Добавить файл
</Typography>
<Typography
sx={{ color: theme.palette.grey2.main, fontSize: "16px" }}
>
{description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
</Typography>
</Box>
</Box>
</ButtonBase>
);
};

58
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/FileBlock/FileBlock.tsx
View File

@ -1,58 +0,0 @@
import React, { FC } from "react";
import Box from "@mui/material/Box";
import { IconButton, Typography, useTheme } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
type FileBlockProps = {
file: File | null;
setFile?: (file: File | null) => void;
};
export const FileBlock: FC<FileBlockProps> = ({ setFile, file }) => {
const theme = useTheme();
return (
<Box sx={{ display: "flex", gap: "15px", alignItems: "center" }}>
<Typography
sx={{
fontSize: "18px",
fontWeight: "400",
color: theme.palette.grey3.main,
}}
>
Вы загрузили:
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
backgroundColor: theme.palette.brightPurple.main,
borderRadius: "8px",
padding: setFile ? "5px 5px 5px 14px" : "5px 14px",
gap: "20px",
}}
>
<Typography
sx={{ color: "white", fontSize: "14px", fontWeight: "400" }}
>
{file?.name}
</Typography>
{setFile && (
<IconButton
onClick={() => setFile(null)}
sx={{
backgroundColor: "#864BD9",
borderRadius: "50%",
width: "24px",
height: "24px",
color: "white",
}}
>
<CloseIcon
sx={{ width: "14px", height: "14px", transform: "scale(1.5)" }}
/>
</IconButton>
)}
</Box>
</Box>
);
};

52
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx
View File

@ -1,52 +0,0 @@
import { Box, useMediaQuery, useTheme } from "@mui/material";
import React, { FC } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
import { FileBlock } from "./FileBlock/FileBlock";
import { CustomFileUploader } from "./CustomFileUploader/CustomFileUploader";
type IntegrationStep5Props = {
handlePrevStep: () => void;
handleNextStep: () => void;
setUtmFile: (file: File | null) => void;
utmFile: File | null;
};
export const IntegrationStep5: FC<IntegrationStep5Props> = ({
handlePrevStep,
handleNextStep,
utmFile,
setUtmFile,
}) => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
flexGrow: 1,
}}
>
<Box sx={{ alignSelf: "start", marginTop: "20px" }}>
{utmFile ? (
<FileBlock file={utmFile} setFile={setUtmFile} />
) : (
<CustomFileUploader
description={"Принимает .txt и .docx формат — максимум 100мб"}
accept={["txt", "docx"]}
handleImageChange={setUtmFile}
/>
)}
</Box>
<StepButtonsBlock
onLargeBtnClick={handleNextStep}
onSmallBtnClick={handlePrevStep}
isLargeBtnDisabled={!utmFile}
/>
</Box>
);
};

17
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx
View File

@ -4,7 +4,6 @@ import { Typography, useMediaQuery, useTheme } from "@mui/material";
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 "../../AmoCRMModal";
type SettingItemProps = {
@ -17,7 +16,6 @@ type SettingItemProps = {
selectedStagePerformer: string | null;
selectedDealPerformer: string | null;
selectedStage: string | null;
utmFile: File | null;
questionEntity: TQuestionEntity;
tags: TTags;
};
@ -32,7 +30,6 @@ export const SettingItem: FC<SettingItemProps> = ({
selectedStagePerformer,
selectedDealPerformer,
selectedStage,
utmFile,
questionEntity,
tags,
}) => {
@ -68,17 +65,6 @@ export const SettingItem: FC<SettingItemProps> = ({
);
}
if (step === 4) {
return (
<Box sx={{ display: "flex", gap: "15px", marginTop: "20px" }}>
{utmFile ? (
<FileBlock file={utmFile} />
) : (
<Typography>Файл не загружен</Typography>
)}
</Box>
);
}
if (step === 5) {
const isFilled = Object.values(questionEntity).some(
(array) => array.length > 0,
);
@ -110,7 +96,7 @@ export const SettingItem: FC<SettingItemProps> = ({
</>
);
}
if (step === 6) {
if (step === 5) {
const isFilled = Object.values(tags).some((array) => array.length > 0);
const status = isFilled ? "Заполнено" : "Не заполнено";
@ -148,7 +134,6 @@ export const SettingItem: FC<SettingItemProps> = ({
selectedStagePerformer,
selectedDealPerformer,
selectedStage,
utmFile,
questionEntity,
tags,
]);

3
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx
View File

@ -13,7 +13,6 @@ type SettingsBlockProps = {
selectedStagePerformer: string | null;
selectedStage: string | null;
selectedDealPerformer: string | null;
utmFile: File | null;
questionEntity: TQuestionEntity;
tags: TTags;
};
@ -27,7 +26,6 @@ export const SettingsBlock: FC<SettingsBlockProps> = ({
selectedStagePerformer,
selectedDealPerformer,
selectedStage,
utmFile,
questionEntity,
tags,
}) => {
@ -68,7 +66,6 @@ export const SettingsBlock: FC<SettingsBlockProps> = ({
selectedStagePerformer={selectedStagePerformer}
selectedDealPerformer={selectedDealPerformer}
selectedStage={selectedStage}
utmFile={utmFile}
questionEntity={questionEntity}
tags={tags}
/>

6
src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx
View File

@ -25,11 +25,11 @@ interface Props {
companyName: keyof typeof QuizMetricType;
}
export default function AnalyticsModal({
export const AnalyticsModal = ({
isModalOpen,
handleCloseModal,
companyName,
}: Props) {
}: Props) => {
const theme = useTheme();
const quiz = useCurrentQuiz();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -260,4 +260,4 @@ export default function AnalyticsModal({
</Box>
</Dialog>
);
}
};

44
src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx
View File

@ -1,12 +1,23 @@
import { Box, Typography, useTheme } from "@mui/material";
import React, { FC } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import React, { FC, lazy, Suspense } from "react";
import { ServiceButton } from "./ServiceButton/ServiceButton";
import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
import AnalyticsModal from "./AnalyticsModal/AnalyticsModal";
// import AnalyticsModal from "./AnalyticsModal/AnalyticsModal";
import { VKPixelLogo } from "../mocks/VKPixelLogo";
import { QuizMetricType } from "@model/quizSettings";
import { AmoCRMLogo } from "../mocks/AmoCRMLogo";
import { AmoCRMModal } from "../IntegrationsModal/AmoCRMModal";
const AnalyticsModal = lazy(() =>
import("./AnalyticsModal/AnalyticsModal").then((module) => ({
default: module.AnalyticsModal,
})),
);
const AmoCRMModal = lazy(() =>
import("../IntegrationsModal/AmoCRMModal").then((module) => ({
default: module.AmoCRMModal,
})),
);
type PartnersBoardProps = {
setIsModalOpen: (value: boolean) => void;
@ -30,6 +41,7 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
handleCloseAmoSRMModal,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return (
<Box
@ -99,18 +111,22 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
</Box>
</Box>
{companyName && (
<AnalyticsModal
isModalOpen={isModalOpen}
handleCloseModal={handleCloseModal}
companyName={companyName}
/>
<Suspense>
<AnalyticsModal
isModalOpen={isModalOpen}
handleCloseModal={handleCloseModal}
companyName={companyName}
/>
</Suspense>
)}
{companyName && (
<AmoCRMModal
isModalOpen={isAmoCrmModalOpen}
handleCloseModal={handleCloseAmoSRMModal}
companyName={companyName}
/>
<Suspense>
<AmoCRMModal
isModalOpen={isAmoCrmModalOpen}
handleCloseModal={handleCloseAmoSRMModal}
companyName={companyName}
/>
</Suspense>
)}
</Box>
);

1
src/ui_kit/LabeledDatePicker.tsx
View File

@ -11,7 +11,6 @@ import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import type { Moment } from "moment";
interface Props {
label?: string;
sx?: SxProps<Theme>;