329 lines
11 KiB
TypeScript
329 lines
11 KiB
TypeScript
|
import {
|
|||
|
|
Button,
|
|||
|
|
Dialog,
|
|||
|
|
IconButton,
|
|||
|
|
Typography,
|
|||
|
|
useMediaQuery,
|
|||
|
|
useTheme,
|
|||
|
|
} from "@mui/material";
|
|||
|
|
import Box from "@mui/material/Box";
|
|||
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|||
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|||
|
|
import CustomTextField from "@ui_kit/CustomTextField";
|
|||
|
|
import EditPencil from "@icons/EditPencil";
|
|||
|
|
import Trash from "@icons/trash";
|
|||
|
|
import { updateQuiz } from "@root/quizes/actions";
|
|||
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|||
|
|
import { QuizMetricType } from "@model/quizSettings";
|
|||
|
|
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
isModalOpen: boolean;
|
|||
|
|
handleCloseModal: () => void;
|
|||
|
|
companyName: keyof typeof QuizMetricType;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function AnalyticsModal({
|
|||
|
|
isModalOpen,
|
|||
|
|
handleCloseModal,
|
|||
|
|
companyName,
|
|||
|
|
}: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const quiz = useCurrentQuiz();
|
|||
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|||
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|||
|
|
const configName = QuizMetricType[companyName];
|
|||
|
|
const meterNumber = quiz?.config[configName];
|
|||
|
|
const [isSave, setIsSave] = useState<boolean>(!!meterNumber);
|
|||
|
|
const [currentValue, setCurrentValue] = useState<string>(
|
|||
|
|
meterNumber ? meterNumber.toString() : "",
|
|||
|
|
);
|
|||
|
|
const [isInstructionOpen, setIsInstructionOpen] = useState<boolean>(false);
|
|||
|
|
const analyticTexts = useMemo(() => {
|
|||
|
|
return {
|
|||
|
|
yandex: {
|
|||
|
|
header: "Яндекс.Метрикой",
|
|||
|
|
counterName: "счетчика",
|
|||
|
|
instructionTitle: "Как установить Яндекс Метрику в квиз?",
|
|||
|
|
instructionSubTitle: "Инструкция по настройке Яндекс Метрики",
|
|||
|
|
instructionHeader: "Настройка счётчика и интеграции",
|
|||
|
|
instructionText:
|
|||
|
|
"Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.",
|
|||
|
|
},
|
|||
|
|
vk: {
|
|||
|
|
header: "VK Пиксель",
|
|||
|
|
counterName: "пикселя",
|
|||
|
|
instructionTitle: "Как установить VK Пиксель в квиз?",
|
|||
|
|
instructionSubTitle: "Инструкция по настройке VK Пиксель",
|
|||
|
|
instructionHeader: "Настройка счётчика и интеграции",
|
|||
|
|
instructionText:
|
|||
|
|
"Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.",
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleClose = () => {
|
|||
|
|
handleCloseModal();
|
|||
|
|
setIsInstructionOpen(false);
|
|||
|
|
if (!meterNumber) {
|
|||
|
|
setIsSave(false);
|
|||
|
|
setCurrentValue("");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setIsSave(true);
|
|||
|
|
setCurrentValue(meterNumber.toString());
|
|||
|
|
};
|
|||
|
|
const handleSave = () => {
|
|||
|
|
handleCloseModal();
|
|||
|
|
updateQuiz(quiz?.id, (quiz) => {
|
|||
|
|
quiz.config[configName] = currentValue ? Number(currentValue) : undefined;
|
|||
|
|
});
|
|||
|
|
if (!currentValue) {
|
|||
|
|
setIsSave(false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setIsSave(true);
|
|||
|
|
};
|
|||
|
|
const handleEdit = () => {
|
|||
|
|
setIsSave(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClear = () => {
|
|||
|
|
setCurrentValue("");
|
|||
|
|
setIsSave(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const configName =
|
|||
|
|
QuizMetricType[companyName as keyof typeof QuizMetricType];
|
|||
|
|
const meterNumber = quiz?.config[configName];
|
|||
|
|
setCurrentValue(meterNumber ? meterNumber.toString() : "");
|
|||
|
|
setIsSave(!!meterNumber);
|
|||
|
|
setIsInstructionOpen(false);
|
|||
|
|
}, [companyName]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog
|
|||
|
|
open={isModalOpen}
|
|||
|
|
onClose={handleClose}
|
|||
|
|
fullWidth
|
|||
|
|
PaperProps={{
|
|||
|
|
sx: {
|
|||
|
|
maxWidth: isTablet ? "100%" : "920px",
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "68px",
|
|||
|
|
backgroundColor: theme.palette.background.default,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
fontSize: isMobile ? "20px" : "24px",
|
|||
|
|
fontWeight: "500",
|
|||
|
|
padding: "20px",
|
|||
|
|
color: theme.palette.grey2.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Аналитика с {analyticTexts[companyName]?.header}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<IconButton
|
|||
|
|
onClick={handleClose}
|
|||
|
|
sx={{
|
|||
|
|
width: "12px",
|
|||
|
|
height: "12px",
|
|||
|
|
position: "absolute",
|
|||
|
|
right: "15px",
|
|||
|
|
top: "15px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CloseIcon
|
|||
|
|
sx={{ width: "12px", height: "12px", transform: "scale(1.5)" }}
|
|||
|
|
/>
|
|||
|
|
</IconButton>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
padding: "20px 20px",
|
|||
|
|
flexGrow: 1,
|
|||
|
|
gap: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
alignItems: "center",
|
|||
|
|
maxWidth: isMobile ? "100%" : "590px",
|
|||
|
|
position: "relative",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography fontWeight={500}>
|
|||
|
|
{isSave
|
|||
|
|
? `Ваш номер ${analyticTexts[companyName]?.counterName}`
|
|||
|
|
: `Введите номер ${analyticTexts[companyName]?.counterName}`}
|
|||
|
|
</Typography>
|
|||
|
|
{isSave && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
position: "absolute",
|
|||
|
|
right: "0",
|
|||
|
|
top: "0",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<IconButton onClick={handleEdit} sx={{ padding: "0" }}>
|
|||
|
|
<EditPencil
|
|||
|
|
color={theme.palette.brightPurple.main}
|
|||
|
|
width={"24px"}
|
|||
|
|
height={"24px"}
|
|||
|
|
/>
|
|||
|
|
</IconButton>
|
|||
|
|
<IconButton onClick={handleClear} sx={{ padding: "0" }}>
|
|||
|
|
<Trash
|
|||
|
|
sx={{
|
|||
|
|
width: "24px",
|
|||
|
|
"& path": {
|
|||
|
|
stroke: theme.palette.brightPurple.main,
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</IconButton>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: isMobile ? "column" : "row",
|
|||
|
|
gap: "20px",
|
|||
|
|
alignItems: "center",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CustomTextField
|
|||
|
|
sxForm={{ maxWidth: isMobile ? "100%" : "590px" }}
|
|||
|
|
placeholder={isSave ? currentValue : "в формате ХХХХХХХХ"}
|
|||
|
|
type={"number"}
|
|||
|
|
value={currentValue}
|
|||
|
|
disabled={isSave}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const onlyNums = e.target.value.replace(/[^0-9]/g, "");
|
|||
|
|
setCurrentValue(onlyNums);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
{!isSave && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: isMobile ? "100%" : "auto",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: isMobile ? "space-between" : "end",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{meterNumber && !isSave && (
|
|||
|
|
<Button
|
|||
|
|
sx={{ width: isMobile ? "100%" : "130px", height: "44px" }}
|
|||
|
|
onClick={handleClose}
|
|||
|
|
variant={"outlined"}
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
sx={{ width: isMobile ? "100%" : "130px", height: "44px" }}
|
|||
|
|
variant={"contained"}
|
|||
|
|
onClick={handleSave}
|
|||
|
|
>
|
|||
|
|
Сохранить
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<Box>
|
|||
|
|
<Box
|
|||
|
|
onClick={() => setIsInstructionOpen(!isInstructionOpen)}
|
|||
|
|
sx={{
|
|||
|
|
cursor: "pointer",
|
|||
|
|
backgroundColor: theme.palette.background.default,
|
|||
|
|
borderRadius: isInstructionOpen ? "12px 12px 0 0" : "12px",
|
|||
|
|
padding: "20px",
|
|||
|
|
border: "1px solid #E5E5E5",
|
|||
|
|
borderBottom: isInstructionOpen ? "none" : "1px solid #E5E5E5",
|
|||
|
|
position: "relative",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{isMobile && (
|
|||
|
|
<KeyboardArrowUpIcon
|
|||
|
|
fontSize="medium"
|
|||
|
|
sx={{
|
|||
|
|
position: "absolute",
|
|||
|
|
top: "20px",
|
|||
|
|
right: "20px",
|
|||
|
|
transition: "transform 0.3s",
|
|||
|
|
transform: isInstructionOpen
|
|||
|
|
? "rotate(0deg"
|
|||
|
|
: "rotate(180deg)",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
marginBottom: "4px",
|
|||
|
|
fontWeight: "500",
|
|||
|
|
width: isMobile ? "90%" : "100%",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{analyticTexts[companyName]?.instructionTitle}
|
|||
|
|
</Typography>
|
|||
|
|
<Typography
|
|||
|
|
sx={{ fontSize: "16px", color: theme.palette.grey2.main }}
|
|||
|
|
>
|
|||
|
|
{analyticTexts[companyName]?.instructionSubTitle}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
{isInstructionOpen && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: " 0 0 12px 12px",
|
|||
|
|
padding: "20px",
|
|||
|
|
border: "1px solid #E5E5E5",
|
|||
|
|
borderTop: isInstructionOpen ? "none" : "1px solid #E5E5E5",
|
|||
|
|
maxHeight: isMobile ? "240px" : "300px",
|
|||
|
|
overflowY: "auto",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
fontWeight: "500",
|
|||
|
|
color: theme.palette.grey3.main,
|
|||
|
|
marginBottom: "15px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{analyticTexts[companyName]?.instructionHeader}
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ color: theme.palette.grey3.main }}>
|
|||
|
|
{analyticTexts[companyName]?.instructionText}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|