feat: info icon tooltips

This commit is contained in:
IlyaDoronin 2023-09-18 15:34:41 +03:00
parent f158726935
commit 49271576ba
14 changed files with 581 additions and 116 deletions

@ -15,6 +15,7 @@ import {
SelectChangeEvent,
TextField,
Typography,
Tooltip,
useTheme,
} from "@mui/material";
import Stepper from "@ui_kit/Stepper";
@ -46,11 +47,27 @@ type BackgroundType = "text" | "video";
export default function InstallQuiz() {
const buttonInstall: { icon: string; title: string; text: string }[] = [
{ icon: OnButton, title: "По кнопке", text: "Конструктор кнопки или собственная кнопка" },
{
icon: OnButton,
title: "По кнопке",
text: "Конструктор кнопки или собственная кнопка",
},
{ icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" },
{ icon: InBidySite, title: "В тело сайта", text: "Задайте свои размеры и встройте в сайт" },
{ icon: AutoOpen, title: "Автооткрытие", text: "Автооткрытие поп-ап на сайте" },
{ icon: WidgetImg, title: "Виджет", text: "Сбоку страницы как консультант" },
{
icon: InBidySite,
title: "В тело сайта",
text: "Задайте свои размеры и встройте в сайт",
},
{
icon: AutoOpen,
title: "Автооткрытие",
text: "Автооткрытие поп-ап на сайте",
},
{
icon: WidgetImg,
title: "Виджет",
text: "Сбоку страницы как консультант",
},
];
const [activeStep, setActiveStep] = React.useState(5);
@ -97,8 +114,20 @@ export default function InstallQuiz() {
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<LinkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
<Typography>Ссылка на квиз</Typography> <InfoIcon />
<LinkIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
/>
<Typography>Ссылка на квиз</Typography>
<Tooltip
title="Скопируйте или укажите свою ссылку на квиз. Ссылка должна быть от 4 до 20 символов включительно, может содержать латинские буквы, цифры, тире '-' и нижнее подчеркивание '_'."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
<FormControl
fullWidth
size="small"
@ -223,9 +252,19 @@ export default function InstallQuiz() {
}}
/>
</FormControl>
<CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} marL={"10px"} />
<CopyIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
marL={"10px"}
/>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<ButtonSocial />
<Typography sx={{ color: "#FC712F" }}>Не опубликован</Typography>
@ -245,11 +284,16 @@ export default function InstallQuiz() {
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<VkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
<VkIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
/>
<Typography> Вконтакте</Typography>
</Box>
<Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
<Typography>
Для публикации сниппета на стене группы, призывающего пройти тест.
</Typography>
<Link
component="button"
onClick={handleOpenVk}
@ -278,10 +322,16 @@ export default function InstallQuiz() {
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<DomenIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
<DomenIcon
color={theme.palette.brightPurple.main}
bgcolor={"#EEE4FC"}
/>
<Typography>Свой домен</Typography>
</Box>
<Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
<Typography>
Подключите свой домен, если хотите, чтобы квиз открывался по вашей
ссылке.
</Typography>
<Link
component="button"
onClick={handleOpenDom}
@ -338,7 +388,13 @@ export default function InstallQuiz() {
>
<img src={e.icon} />
<Typography>{e.title}</Typography>
<Typography sx={{ fontSize: "16px", color: theme.palette.grey2.main, textAlign: "start" }}>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.grey2.main,
textAlign: "start",
}}
>
{e.text}
</Typography>
</ButtonBase>
@ -351,8 +407,13 @@ export default function InstallQuiz() {
<AutoOpenInstall />
<VidjetInstall />
<InstallQzCode />
<Box sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}>
<Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
<Box
sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
>
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px" }}
>
<ArrowLeft />
</Button>
<Button variant="contained">Запустить рекламу</Button>
@ -387,7 +448,9 @@ export default function InstallQuiz() {
background: theme.palette.background.default,
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>Добавить квиз в группу ВК</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>
Добавить квиз в группу ВК
</Typography>
</Box>
<Box
sx={{
@ -408,19 +471,31 @@ export default function InstallQuiz() {
<Typography>1. Добавьте приложение в сообщество</Typography>
<Button
variant="contained"
sx={{ maxWidth: "275px", display: "flex", gap: "10px", padding: "13px 15px" }}
sx={{
maxWidth: "275px",
display: "flex",
gap: "10px",
padding: "13px 15px",
}}
>
{" "}
<VkIconButton />
Добавить приложение
</Button>
<Typography sx={{ color: theme.palette.grey2.main }}>
Для публикации сниппета на стене, призывающего пройти тест, вставьте в новую запись ссылку на приложение
Для публикации сниппета на стене, призывающего пройти тест,
вставьте в новую запись ссылку на приложение
</Typography>
<CustomTextField placeholder={""} text={"https://vk.com/app6656524_-XXXXXXXXXXX"} />
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке, открыв
приложение в вашей группе
<CustomTextField
placeholder={""}
text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
/>
<Typography
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
>
где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
можно узнать в браузерной строке, открыв приложение в вашей
группе
</Typography>
</Box>
@ -431,13 +506,24 @@ export default function InstallQuiz() {
flexDirection: "column",
}}
>
<Typography>2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
Справа снизу нажмите на значок "редактировать" В появившемся окне введите id квиза и нажмите
"Привязать". Готово! Квиз привязан к группе
<Typography>
2. Откройте квиз в группе (вы должны быть администратором
группы)
</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>ID этого квиза</Typography>
<CustomTextField placeholder={""} text={"639727c5177be5004f11a0f2"} />
<Typography
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
>
Справа снизу нажмите на значок "редактировать" В появившемся
окне введите id квиза и нажмите "Привязать". Готово! Квиз
привязан к группе
</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>
ID этого квиза
</Typography>
<CustomTextField
placeholder={""}
text={"639727c5177be5004f11a0f2"}
/>
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
@ -479,7 +565,9 @@ export default function InstallQuiz() {
background: theme.palette.background.default,
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>Подключить свой домен</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>
Подключить свой домен
</Typography>
</Box>
<Box
sx={{
@ -497,14 +585,21 @@ export default function InstallQuiz() {
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Подключите домен к проекту, чтобы создать несколько квизов на одном домене
Подключите домен к проекту, чтобы создать несколько квизов на
одном домене
</Typography>
<Typography>1. Настройте записи в регистраторе домена</Typography>
<Box sx={{ display: "flex" }}>
<SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
<SelectableButton
isSelected={backgroundType === "text"}
onClick={() => setBackgroundType("text")}
>
Для поддоменов
</SelectableButton>
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
<SelectableButton
isSelected={backgroundType === "video"}
onClick={() => setBackgroundType("video")}
>
Для доменов
</SelectableButton>
</Box>
@ -538,7 +633,8 @@ export default function InstallQuiz() {
maxWidth: "372px",
}}
>
Как подключить свой домен/поддомен к квизу? Ошибки при подключении домена
Как подключить свой домен/поддомен к квизу? Ошибки при
подключении домена
</Link>
</Box>
@ -569,7 +665,10 @@ export default function InstallQuiz() {
// onMouseDown={}
edge="end"
>
<CopyIcon color={"#ffffff"} bgcolor={theme.palette.brightPurple.main} />
<CopyIcon
color={"#ffffff"}
bgcolor={theme.palette.brightPurple.main}
/>
</IconButton>
</InputAdornment>
}
@ -579,8 +678,11 @@ export default function InstallQuiz() {
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
Привязка домена и обновление DNS записей может занять до 48 часов
<Typography
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
>
Привязка домена и обновление DNS записей может занять до 48
часов
</Typography>
<Button variant="outlined" onClick={handleCloseDom}>
Отмена

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData";
import { useState, useEffect } from "react";
@ -44,7 +50,9 @@ export default function DataOptions({ totalIndex }: Props) {
>
<Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
<SelectableButton
isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
isSelected={
listQuestions[quizId][totalIndex].content.type === "calendar"
}
onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.type = "calendar";
@ -55,7 +63,9 @@ export default function DataOptions({ totalIndex }: Props) {
Использовать календарь
</SelectableButton>
<SelectableButton
isSelected={listQuestions[quizId][totalIndex].content.type === "mask"}
isSelected={
listQuestions[quizId][totalIndex].content.type === "mask"
}
onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.type = "mask";
@ -77,10 +87,18 @@ export default function DataOptions({ totalIndex }: Props) {
>
Пользователю будет предложено выбрать дату
</Typography>
<InfoIcon />
<Tooltip title="Выбор даты." placement="top">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchData switchState={switchState} totalIndex={totalIndex} />
</>
);

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -16,7 +22,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
return (
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null,
}}
>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки календаря</Typography>
<CustomCheckbox
@ -41,7 +53,9 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
</Box>
<Box
sx={{
padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px",
padding: isWrappColumn
? "0px 20px 20px 20px "
: "20px 20px 20px 20px",
minWidth: isWrappColumn ? null : "350px",
marginRight: "30px",
}}
@ -70,8 +84,15 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -17,7 +23,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null,
}}
>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки ответов</Typography>
<CustomCheckbox
@ -41,7 +53,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
</Box>
<Box
sx={{
padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px ",
padding: isWrappColumn
? "0px 20px 20px 20px "
: "20px 20px 20px 20px ",
minWidth: isWrappColumn ? null : "350px",
marginRight: "30px",
}}
@ -70,8 +84,15 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -104,7 +110,14 @@ export default function SettingOptionsAndPict({
});
}}
/>
<InfoIcon />
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,6 +1,13 @@
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Button,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
@ -36,12 +43,22 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
<Button
onClick={onClick}
variant="outlined"
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
startIcon={
<Icon
color={
isActive
? theme.palette.navbarbg.main
: theme.palette.brightPurple.main
}
/>
}
sx={{
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
borderRadius: 0,
border: "none",
color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
color: isActive
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
p: "7px",
width: "auto",
minWidth: 0,
@ -51,14 +68,18 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
},
"&:hover": {
border: "none",
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
borderColor: isActive
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
},
}}
/>
);
}
export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictProps) {
export default function SettingOpytionsPict({
totalIndex,
}: SettingOpytionsPictProps) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
@ -100,13 +121,17 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
<SelectIconButton
key={index}
onClick={() => updateProportions(value)}
isActive={listQuestions[quizId][totalIndex].content.xy === value}
isActive={
listQuestions[quizId][totalIndex].content.xy === value
}
Icon={icon}
/>
))}
</Box>
<Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
<Typography sx={{ marginBottom: "15px" }}>
Настройки ответов
</Typography>
<CustomCheckbox
sx={{ display: "block" }}
@ -166,7 +191,9 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
},
})
}
isActive={listQuestions[quizId][totalIndex].content.format === "carousel"}
isActive={
listQuestions[quizId][totalIndex].content.format === "carousel"
}
Icon={FormatIcon2}
/>
<SelectIconButton
@ -178,11 +205,15 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
},
})
}
isActive={listQuestions[quizId][totalIndex].content.format === "masonry"}
isActive={
listQuestions[quizId][totalIndex].content.format === "masonry"
}
Icon={FormatIcon1}
/>
</Box>
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
<Typography sx={{ marginBottom: "15px" }}>
Настройки вопросов
</Typography>
<CustomCheckbox
label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required}
@ -210,7 +241,14 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
})
}
/>
<InfoIcon />
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,6 +1,6 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography, useTheme } from "@mui/material";
import { Box, Typography, Tooltip, useTheme } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ButtonsOptions from "../ButtonsOptions";
@ -57,10 +57,21 @@ export default function OwnTextField({ totalIndex }: Props) {
>
Пользователю будет дано поле для ввода значения{" "}
</Typography>
<InfoIcon />
<Tooltip
title="Будет использоваться для ввода значения."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchTextField switchState={switchState} totalIndex={totalIndex} />
</>
);

@ -6,6 +6,7 @@ import {
Radio,
RadioGroup,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
@ -33,7 +34,9 @@ const ANSWER_TYPES: Answer[] = [
{ name: "Только числа", value: "number" },
];
export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
export default function SettingTextField({
totalIndex,
}: SettingTextFieldProps) {
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
const theme = useTheme();
@ -55,7 +58,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])}
value={ANSWER_TYPES.findIndex(
({ value }) => listQuestions[quizId][totalIndex].content[value]
)}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = {
...listQuestions[quizId][totalIndex].content,
@ -76,7 +81,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
"& .MuiRadio-root": { padding: "8px 9px" },
}}
value={index}
control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
control={
<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
}
label={name}
/>
))}
@ -117,8 +124,15 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import { Box, Typography, Tooltip } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
@ -34,7 +34,14 @@ export default function SettingPageOptions({
})
}
/>
<InfoIcon />
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -4,6 +4,7 @@ import {
ButtonBase,
Slider,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
@ -145,8 +146,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
@ -17,7 +23,13 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null,
}}
>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки ползунка</Typography>
<CustomCheckbox
@ -55,8 +67,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,5 +1,5 @@
import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import { Box, Typography, Tooltip } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
@ -50,8 +50,15 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>{" "}
<InfoIcon />
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -1,5 +1,11 @@
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import CustomTextField from "@ui_kit/CustomTextField";
@ -83,10 +89,19 @@ export default function ResponseSettings({ totalIndex }: Props) {
clonContent.innerName = "";
}
updateQuestionsList(quizId, totalIndex, { content: clonContent });
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
/>
<InfoIcon />
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField

@ -7,6 +7,7 @@ import {
FormControlLabel,
MenuItem,
Select,
Tooltip,
Typography,
useTheme,
} from "@mui/material";
@ -40,9 +41,21 @@ interface HandleNext {
}
const designTypes = [
["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
[
"standard",
(color: string) => <LayoutStandartIcon color={color} />,
"Standard",
],
[
"expanded",
(color: string) => <LayoutExpandedIcon color={color} />,
"Expanded",
],
[
"centered",
(color: string) => <LayoutCenteredIcon color={color} />,
"Centered",
],
] as const;
// type DesignType = typeof designTypes[number][0];
@ -56,7 +69,9 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
const designType = listQuizes[params].startpage;
const StartPageClone = listQuizes[params];
console.log(StartPageClone);
const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
const [backgroundType, setBackgroundType] = useState(
listQuizes[params].config.startpage.background.type
);
const [alignType, setAlignType] = useState<AlignType>("left");
const videoHC = (videoInp: HTMLInputElement) => {
@ -148,7 +163,15 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
flex: `1 1 342px`,
}}
>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mb: "14px",
}}
>
Дизайн
</Typography>
<FormControl
fullWidth
size="small"
@ -163,7 +186,9 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
variant="outlined"
value={designType}
displayEmpty
onChange={(e) => updateQuizesList(params, { startpage: e.target.value })}
onChange={(e) =>
updateQuizesList(params, { startpage: e.target.value })
}
sx={{
height: "48px",
borderRadius: "8px",
@ -218,13 +243,26 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
color: theme.palette.grey2.main,
}}
>
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
{type[1](
type[0] === designType
? theme.palette.orange.main
: theme.palette.grey2.main
)}
{type[2]}
</MenuItem>
))}
</Select>
</FormControl>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Фон
</Typography>
<Box
sx={{
display: "flex",
@ -267,7 +305,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
flexDirection: "column",
}}
>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Изображение
</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
@ -284,7 +329,12 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
}}
>
<FormControlLabel
control={<Checkbox icon={<IconCheck />} checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />} />}
control={
<Checkbox
icon={<IconCheck />}
checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
/>
}
label="мобильная версия"
sx={{
color: theme.palette.brightPurple.main,
@ -299,7 +349,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
/>
{mobileVersion ? (
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "11px",
mb: "14px",
}}
>
Изображение для мобильной версии
</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
@ -325,11 +382,25 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
mb: "14px",
}}
>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
<InfoIcon />
<Typography
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
>
Добавить видео
</Typography>
<Tooltip title="Можно загрузить видео." placement="top">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input onChange={(event) => videoHC(event.target)} hidden accept=".mp4" multiple type="file" />
<input
onChange={(event) => videoHC(event.target)}
hidden
accept=".mp4"
multiple
type="file"
/>
<UploadBox
icon={<UploadIcon />}
sx={{
@ -340,7 +411,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
/>
</ButtonBase>
{video ? <video src={video} width="400" controls /> : null}
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "5px",
}}
>
Настройки видео
</Typography>
<CustomCheckbox
@ -352,13 +430,27 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
updateQuizesList(params, { config: SPageClone });
}}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "11px",
mb: "14px",
}}
>
Изображение для мобильной версии
</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
</Box>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Расположение элементов
</Typography>
<Box
@ -406,11 +498,26 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
flexDirection: "column",
}}
>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, margin: "20px 0" }}>Логотип</Typography>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
margin: "20px 0",
}}
>
Логотип
</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
</Box>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Favicon
</Typography>
<Box
@ -420,7 +527,11 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
gap: "10px",
}}
>
<DropFav sx={{ height: "48px", width: "48px" }} heightImg={"48px"} widthImg={"48px"} />
<DropFav
sx={{ height: "48px", width: "48px" }}
heightImg={"48px"}
widthImg={"48px"}
/>
<Typography
sx={{
@ -442,13 +553,28 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
flex: `1 1 795px`,
}}
>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mb: "14px",
}}
>
Заголовок
</Typography>
<CustomTextField
placeholder="Текст-заполнитель — это текст, который"
text={listQuizes[params].name}
onChange={(e) => updateQuizesList(params, { name: e.target.value })}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Текст
</Typography>
<CustomTextField
@ -456,7 +582,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
text={listQuizes[params].config.startpage.description}
onChange={mutationHC}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Текст кнопки
</Typography>
<CustomTextField
@ -464,7 +597,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
text={listQuizes[params].config.startpage.button}
onChange={mutationButtonHC}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Телефон
</Typography>
<CustomTextField
@ -482,7 +622,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
updateQuizesList(params, { config: SPageClone });
}}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "11px",
mb: "14px",
}}
>
Название или слоган компании
</Typography>
<CustomTextField
@ -490,7 +637,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
text={listQuizes[params].config.info.orgname}
onChange={mutationOrgNameHC}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Сайт
</Typography>
<CustomTextField
@ -498,7 +652,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
text={listQuizes[params].config.info.site}
onChange={mutationSiteHC}
/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Юридическая информация
</Typography>
<CustomTextField
@ -524,13 +685,22 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
icon={
<Button
variant="outlined"
sx={{ backgroundColor: "transparent", color: theme.palette.brightPurple.main }}
sx={{
backgroundColor: "transparent",
color: theme.palette.brightPurple.main,
}}
>
Отключить стартовую страницу
</Button>
}
checkedIcon={
<Button variant="outlined" sx={{ backgroundColor: theme.palette.brightPurple.main, color: "white" }}>
<Button
variant="outlined"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
}}
>
Включить стартовую страницу
</Button>
}
@ -561,7 +731,8 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
"https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg";
SPageClone.startpage.background.mobile =
"https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png";
SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ";
SPageClone.startpage.background.video =
"https://youtu.be/dbaPkCiLPKQ";
updateQuizesList(params, { config: SPageClone });
handleNext();
createQuestion(params);