91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
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[];
|
|
setStep: (value: number) => void;
|
|
setIsSettingsBlock: (value: boolean) => void;
|
|
selectedFunnelPerformer: string | null;
|
|
selectedFunnel: string | null;
|
|
selectedStagePerformer: string | null;
|
|
selectedStage: string | null;
|
|
selectedDealPerformer: string | null;
|
|
utmFile: File | null;
|
|
questionEntity: TQuestionEntity;
|
|
tags: TTags;
|
|
};
|
|
|
|
export const SettingsBlock: FC<SettingsBlockProps> = ({
|
|
stepTitles,
|
|
setStep,
|
|
setIsSettingsBlock,
|
|
selectedFunnelPerformer,
|
|
selectedFunnel,
|
|
selectedStagePerformer,
|
|
selectedDealPerformer,
|
|
selectedStage,
|
|
utmFile,
|
|
questionEntity,
|
|
tags,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
marginTop: "10px",
|
|
width: "100%",
|
|
height: "443px",
|
|
borderRadius: "10px",
|
|
padding: " 0 20px",
|
|
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
|
overflowY: "auto",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
{stepTitles &&
|
|
stepTitles.map((title, index) => (
|
|
<SettingItem
|
|
step={index}
|
|
title={title}
|
|
setIsSettingsBlock={setIsSettingsBlock}
|
|
setStep={setStep}
|
|
selectedFunnelPerformer={selectedFunnelPerformer}
|
|
selectedFunnel={selectedFunnel}
|
|
selectedStagePerformer={selectedStagePerformer}
|
|
selectedDealPerformer={selectedDealPerformer}
|
|
selectedStage={selectedStage}
|
|
utmFile={utmFile}
|
|
questionEntity={questionEntity}
|
|
tags={tags}
|
|
/>
|
|
))}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
marginTop: "20px",
|
|
alignSelf: "end",
|
|
}}
|
|
>
|
|
<StepButtonsBlock
|
|
onSmallBtnClick={() => setIsSettingsBlock(false)}
|
|
isLargeBtnMissing={true}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|