105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
import Box from "@mui/material/Box";
|
||
import { FC, useMemo } from "react";
|
||
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";
|
||
|
||
type SettingItemProps = {
|
||
step: number;
|
||
title: string;
|
||
setStep: (value: number) => void;
|
||
setIsSettingsBlock: (value: boolean) => void;
|
||
selectedFunnelPerformer: string | null;
|
||
selectedFunnel: string | null;
|
||
selectedStagePerformer: string | null;
|
||
selectedDealPerformer: string | null;
|
||
selectedStage: string | null;
|
||
utmFile: File | null;
|
||
};
|
||
|
||
export const SettingItem: FC<SettingItemProps> = ({
|
||
step,
|
||
title,
|
||
setStep,
|
||
setIsSettingsBlock,
|
||
selectedFunnelPerformer,
|
||
selectedFunnel,
|
||
selectedStagePerformer,
|
||
selectedDealPerformer,
|
||
selectedStage,
|
||
utmFile,
|
||
}) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
|
||
if (step === 0) {
|
||
return;
|
||
}
|
||
|
||
const SettingsContent = useMemo(() => {
|
||
if (step === 1) {
|
||
return (
|
||
<>
|
||
<ResponsiblePerson performer={selectedFunnelPerformer} />
|
||
<SelectedParameter parameter={selectedFunnel} />
|
||
</>
|
||
);
|
||
}
|
||
if (step === 2) {
|
||
return (
|
||
<>
|
||
<ResponsiblePerson performer={selectedStagePerformer} />
|
||
<SelectedParameter parameter={selectedStage} />
|
||
</>
|
||
);
|
||
}
|
||
if (step === 3) {
|
||
return (
|
||
<>
|
||
<ResponsiblePerson performer={selectedDealPerformer} />
|
||
</>
|
||
);
|
||
}
|
||
if (step === 4) {
|
||
return (
|
||
<Box sx={{ display: "flex", gap: "15px", marginTop: "20px" }}>
|
||
{utmFile ? (
|
||
<FileBlock file={utmFile} />
|
||
) : (
|
||
<Typography>Файл не загружен</Typography>
|
||
)}
|
||
</Box>
|
||
);
|
||
}
|
||
return null;
|
||
}, [
|
||
step,
|
||
selectedFunnelPerformer,
|
||
selectedFunnel,
|
||
selectedStagePerformer,
|
||
selectedDealPerformer,
|
||
selectedStage,
|
||
utmFile,
|
||
]);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
padding: "20px 0",
|
||
borderTop: `1px solid ${theme.palette.background.default}`,
|
||
}}
|
||
>
|
||
<SettingItemHeader
|
||
title={title}
|
||
step={step}
|
||
setIsSettingsBlock={setIsSettingsBlock}
|
||
setStep={setStep}
|
||
/>
|
||
<Box>{SettingsContent}</Box>
|
||
</Box>
|
||
);
|
||
};
|