WIP settings in integrations modal
This commit is contained in:
aleksandr-raw
parent
3f7bcc011f
commit
d686290df5
52
src/assets/icons/AccountSetting.tsx
Normal file
52
src/assets/icons/AccountSetting.tsx
Normal file
File diff suppressed because one or more lines are too long
@ -13,7 +13,6 @@ export const RemoveFileBlock: FC<RemoveFileBlockProps> = ({
|
||||
file,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
console.log("theme", theme);
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: "15px", alignItems: "center" }}>
|
||||
<Typography
|
||||
|
||||
@ -22,10 +22,27 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<StepButtonsBlock
|
||||
onSmallBtnClick={handlePrevStep}
|
||||
isLargeBtnMissing={true}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
borderRadius: "10px",
|
||||
padding: "10px",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
alignSelf: "end",
|
||||
}}
|
||||
>
|
||||
<StepButtonsBlock
|
||||
onSmallBtnClick={handlePrevStep}
|
||||
isLargeBtnMissing={true}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
IconButton,
|
||||
Typography,
|
||||
@ -15,9 +14,10 @@ import { IntegrationStep3 } from "./IntegrationStep3/IntegrationStep3";
|
||||
import { IntegrationStep4 } from "./IntegrationStep4/IntegrationStep4";
|
||||
import { IntegrationStep5 } from "./IntegrationStep5/IntegrationStep5";
|
||||
import { IntegrationStep6 } from "./IntegrationStep6/IntegrationStep6";
|
||||
import GearIcon from "@icons/GearIcon";
|
||||
import { funnelsMock, performersMock, stagesMock } from "../mocks/MockData";
|
||||
import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
|
||||
import { IntegrationsModalTitle } from "./IntegrationsModalTitle/IntegrationsModalTitle";
|
||||
import { SettingsBlock } from "./SettingsBlock/SettingsBlock";
|
||||
|
||||
type IntegrationsModalProps = {
|
||||
isModalOpen: boolean;
|
||||
@ -35,6 +35,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
|
||||
const [step, setStep] = useState<number>(0);
|
||||
const [isSettingsBlock, setIsSettingsBlock] = useState<boolean>(false);
|
||||
const [selectedFunnelPerformer, setSelectedFunnelPerformer] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
@ -190,57 +191,27 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: isMobile ? "18px" : "24px",
|
||||
color: "#4D4D4D",
|
||||
fontWeight: "400",
|
||||
lineHeight: "1",
|
||||
}}
|
||||
>
|
||||
{steps[step].title}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
fontWeight: "400",
|
||||
marginTop: "4px",
|
||||
fontSize: "14px",
|
||||
lineHeight: "1",
|
||||
}}
|
||||
>
|
||||
Шаг {step + 1}
|
||||
</Typography>
|
||||
</Box>
|
||||
{steps[step].isSettingsAvailable && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={
|
||||
<GearIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
height={"20px"}
|
||||
width={"20px"}
|
||||
/>
|
||||
}
|
||||
onClick={() => {}}
|
||||
sx={{
|
||||
padding: isMobile ? "10px" : "10px 20px",
|
||||
width: "fit-content",
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.brightPurple.main,
|
||||
"& .MuiButton-startIcon": {
|
||||
marginRight: isMobile ? 0 : "8px",
|
||||
marginLeft: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isMobile ? "" : "Мои настройки"}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
|
||||
<IntegrationsModalTitle
|
||||
step={step}
|
||||
steps={steps}
|
||||
isSettingsBlock={isSettingsBlock}
|
||||
setIsSettingsBlock={setIsSettingsBlock}
|
||||
setStep={setStep}
|
||||
/>
|
||||
{isSettingsBlock ? (
|
||||
<SettingsBlock
|
||||
setIsSettingsBlock={setIsSettingsBlock}
|
||||
setStep={setStep}
|
||||
selectedDealPerformer={selectedDealPerformer}
|
||||
selectedFunnelPerformer={selectedFunnelPerformer}
|
||||
selectedFunnel={selectedFunnel}
|
||||
selectedStagePerformer={selectedStagePerformer}
|
||||
selectedStage={selectedStage}
|
||||
utmFile={utmFile}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
100
src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx
Normal file
100
src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import GearIcon from "@icons/GearIcon";
|
||||
import React, { FC, useCallback, useMemo } from "react";
|
||||
import AccountSetting from "@icons/AccountSetting";
|
||||
|
||||
type IntegrationsModalTitleProps = {
|
||||
step: number;
|
||||
steps: { title: string; isSettingsAvailable: boolean }[];
|
||||
isSettingsBlock?: boolean;
|
||||
setIsSettingsBlock: (value: boolean) => void;
|
||||
setStep: (value: number) => void;
|
||||
};
|
||||
|
||||
export const IntegrationsModalTitle: FC<IntegrationsModalTitleProps> = ({
|
||||
step,
|
||||
steps,
|
||||
setIsSettingsBlock,
|
||||
isSettingsBlock,
|
||||
setStep,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (isSettingsBlock) {
|
||||
setIsSettingsBlock(false);
|
||||
setStep(0);
|
||||
return;
|
||||
}
|
||||
setIsSettingsBlock(true);
|
||||
}, [isSettingsBlock, setIsSettingsBlock, setStep]);
|
||||
|
||||
const btnText = useMemo(() => {
|
||||
return isSettingsBlock ? "Сменить аккаунт" : "Мои настройки";
|
||||
}, [isSettingsBlock]);
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: isMobile ? "18px" : "24px",
|
||||
color: theme.palette.grey3.main,
|
||||
fontWeight: "400",
|
||||
lineHeight: "1",
|
||||
}}
|
||||
>
|
||||
{isSettingsBlock ? "Мои настройки" : steps[step].title}
|
||||
</Typography>
|
||||
{isSettingsBlock || (
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey2.main,
|
||||
fontWeight: "400",
|
||||
marginTop: "4px",
|
||||
fontSize: "14px",
|
||||
lineHeight: "1",
|
||||
}}
|
||||
>
|
||||
Шаг {step + 1}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{steps[step].isSettingsAvailable && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={
|
||||
isSettingsBlock ? (
|
||||
<AccountSetting
|
||||
color={theme.palette.brightPurple.main}
|
||||
height={"20px"}
|
||||
width={"20px"}
|
||||
/>
|
||||
) : (
|
||||
<GearIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
height={"24px"}
|
||||
width={"24px"}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onClick={handleClick}
|
||||
sx={{
|
||||
padding: isMobile ? "10px" : "10px 20px",
|
||||
width: "fit-content",
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.brightPurple.main,
|
||||
"& .MuiButton-startIcon": {
|
||||
marginRight: isMobile ? 0 : "8px",
|
||||
marginLeft: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isMobile ? "" : btnText}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
16
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx
Normal file
16
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import { FC } from "react";
|
||||
|
||||
type SettingItemProps = {
|
||||
step: number;
|
||||
title: string;
|
||||
onEditClick: () => void;
|
||||
};
|
||||
|
||||
export const SettingItem: FC<SettingItemProps> = ({
|
||||
step,
|
||||
onEditClick,
|
||||
title,
|
||||
}) => {
|
||||
return <Box></Box>;
|
||||
};
|
||||
@ -0,0 +1,62 @@
|
||||
import { FC } from "react";
|
||||
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
|
||||
|
||||
type SettingsBlockProps = {
|
||||
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;
|
||||
};
|
||||
|
||||
export const SettingsBlock: FC<SettingsBlockProps> = ({
|
||||
setStep,
|
||||
setIsSettingsBlock,
|
||||
selectedFunnelPerformer,
|
||||
selectedFunnel,
|
||||
selectedStagePerformer,
|
||||
selectedDealPerformer,
|
||||
selectedStage,
|
||||
utmFile,
|
||||
}) => {
|
||||
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: "100%",
|
||||
borderRadius: "10px",
|
||||
padding: "10px",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
alignSelf: "end",
|
||||
}}
|
||||
>
|
||||
<StepButtonsBlock
|
||||
onSmallBtnClick={() => setIsSettingsBlock(false)}
|
||||
isLargeBtnMissing={true}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user