84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
|
import { FC } from "react";
|
||
|
|
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
||
|
|
import { StepButtonsBlock } from "../StepButtonsBlock";
|
||
|
|
import { SettingItem } from "./SettingItem/SettingItem";
|
||
|
|
import { SelectedQuestions, SelectedTags } from "../types";
|
||
|
|
|
||
|
|
type AmoSettingsBlockProps = {
|
||
|
|
stepTitles: string[];
|
||
|
|
setStep: (value: number) => void;
|
||
|
|
setIsSettingsBlock: (value: boolean) => void;
|
||
|
|
selectedFunnel: string | null;
|
||
|
|
selectedStage: string | null;
|
||
|
|
selectedDealUser: string | null;
|
||
|
|
selectedQuestions: SelectedQuestions;
|
||
|
|
selectedTags: SelectedTags;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
|
||
|
|
stepTitles,
|
||
|
|
setStep,
|
||
|
|
setIsSettingsBlock,
|
||
|
|
selectedFunnel,
|
||
|
|
selectedDealUser,
|
||
|
|
selectedStage,
|
||
|
|
selectedQuestions,
|
||
|
|
selectedTags,
|
||
|
|
}) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ flexGrow: 1, width: "100%" }}>
|
||
|
|
<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}
|
||
|
|
selectedDealUser={selectedDealUser}
|
||
|
|
selectedFunnel={selectedFunnel}
|
||
|
|
selectedStage={selectedStage}
|
||
|
|
selectedQuestions={selectedQuestions}
|
||
|
|
selectedTags={selectedTags}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</Box>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
marginTop: "20px",
|
||
|
|
alignSelf: "end",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<StepButtonsBlock
|
||
|
|
onSmallBtnClick={() => setIsSettingsBlock(false)}
|
||
|
|
isLargeBtnMissing={true}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|