688 lines
24 KiB
TypeScript
688 lines
24 KiB
TypeScript
import React, { useState } from "react";
|
||
import {
|
||
Box,
|
||
Button,
|
||
ButtonBase,
|
||
FormControl,
|
||
IconButton,
|
||
InputAdornment,
|
||
Link,
|
||
MenuItem,
|
||
Modal,
|
||
OutlinedInput,
|
||
Paper,
|
||
Select,
|
||
SelectChangeEvent,
|
||
TextField,
|
||
Typography,
|
||
Tooltip,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import LinkIcon from "../../assets/icons/LinkIcon";
|
||
import InfoIcon from "../../assets/icons/InfoIcon";
|
||
import ArrowDown from "../../assets/icons/ArrowDownIcon";
|
||
import CopyIcon from "../../assets/icons/CopyIcon";
|
||
import VkIcon from "../../assets/icons/VkIcon";
|
||
import DomenIcon from "../../assets/icons/DomenIcon";
|
||
import OnButton from "../../assets/OnButton.png";
|
||
import Bunner from "../../assets/Bunner.png";
|
||
import InBidySite from "../../assets/InBodySite.png";
|
||
import AutoOpen from "../../assets/AutoOpen.png";
|
||
import WidgetImg from "../../assets/Widget.png";
|
||
import OneIconBorder from "../../assets/icons/OneIconBorder";
|
||
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import VkIconButton from "../../assets/icons/VkIconButton";
|
||
import SelectableButton from "@ui_kit/SelectableButton";
|
||
import ButtonSocial from "./ButtonSocial";
|
||
import OnButtonInstall from "./OnButtonInstall";
|
||
import BannerInstall from "./BannerInstall";
|
||
import InBodyInstall from "./InBodyInstall";
|
||
import AutoOpenInstall from "./AutoOpenInstall";
|
||
import VidjetInstall from "./VidjetInstall";
|
||
import InstallQzCode from "./InstallQzCode";
|
||
import { incrementCurrentStep } from "@root/quizes/actions";
|
||
|
||
type BackgroundType = "text" | "video";
|
||
|
||
export default function InstallQuiz() {
|
||
const buttonInstall: { icon: string; title: string; text: string }[] = [
|
||
{
|
||
icon: OnButton,
|
||
title: "По кнопке",
|
||
text: "Конструктор кнопки или собственная кнопка",
|
||
},
|
||
{ icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" },
|
||
{
|
||
icon: InBidySite,
|
||
title: "В тело сайта",
|
||
text: "Задайте свои размеры и встройте в сайт",
|
||
},
|
||
{
|
||
icon: AutoOpen,
|
||
title: "Автооткрытие",
|
||
text: "Автооткрытие поп-ап на сайте",
|
||
},
|
||
{
|
||
icon: WidgetImg,
|
||
title: "Виджет",
|
||
text: "Сбоку страницы как консультант",
|
||
},
|
||
];
|
||
|
||
const [display, setDisplay] = React.useState("1");
|
||
const handleChange = (event: SelectChangeEvent) => {
|
||
setDisplay(event.target.value);
|
||
};
|
||
|
||
const [openVk, setOpenVk] = React.useState(false);
|
||
const handleOpenVk = () => setOpenVk(true);
|
||
const handleCloseVk = () => setOpenVk(false);
|
||
|
||
const [openDom, setOpenDom] = React.useState(false);
|
||
const handleOpenDom = () => setOpenDom(true);
|
||
const handleCloseDom = () => setOpenDom(false);
|
||
|
||
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
|
||
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<>
|
||
<Box sx={{ marginTop: "60px", display: "flex", gap: "40px" }}>
|
||
<Paper
|
||
sx={{
|
||
maxWidth: "522px",
|
||
width: "100%",
|
||
padding: "20px",
|
||
borderRadius: "12px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
boxShadow:
|
||
"0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||
<LinkIcon
|
||
color={theme.palette.brightPurple.main}
|
||
bgcolor={"#EEE4FC"}
|
||
/>
|
||
<Typography>Ссылка на квиз</Typography>
|
||
|
||
<Tooltip
|
||
title="Скопируйте или укажите свою ссылку на квиз. Ссылка должна быть от 4 до 20 символов включительно, может содержать латинские буквы, цифры, тире '-' и нижнее подчеркивание '_'."
|
||
placement="top"
|
||
>
|
||
<Box>
|
||
<InfoIcon />
|
||
</Box>
|
||
</Tooltip>
|
||
<FormControl
|
||
fullWidth
|
||
size="small"
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "180px",
|
||
height: "48px",
|
||
// margin: '0 10px'
|
||
}}
|
||
>
|
||
<Select
|
||
id="display-select"
|
||
variant="outlined"
|
||
value={display}
|
||
displayEmpty
|
||
onChange={handleChange}
|
||
sx={{
|
||
height: "48px",
|
||
borderRadius: "8px",
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: "none !important",
|
||
},
|
||
}}
|
||
MenuProps={{
|
||
PaperProps: {
|
||
sx: {
|
||
mt: "8px",
|
||
p: "4px",
|
||
borderRadius: "8px",
|
||
},
|
||
},
|
||
MenuListProps: {
|
||
sx: {
|
||
py: 0,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "8px",
|
||
"& .Mui-selected": {
|
||
backgroundColor: theme.palette.background.default,
|
||
color: theme.palette.brightPurple.main,
|
||
},
|
||
},
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
color: theme.palette.brightPurple.main,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
px: "9px",
|
||
gap: "20px",
|
||
},
|
||
}}
|
||
IconComponent={(props) => <ArrowDown {...props} />}
|
||
>
|
||
<MenuItem
|
||
value={1}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Стандартная
|
||
</MenuItem>
|
||
<MenuItem
|
||
value={2}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
На поддомене
|
||
</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
|
||
<TextField
|
||
disabled
|
||
id="outlined-disabled"
|
||
value="https://pena.com/"
|
||
sx={{
|
||
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
|
||
border: "none",
|
||
},
|
||
"& .MuiInputBase-root": {
|
||
height: "48px",
|
||
borderRadius: "10px 0 0 10px",
|
||
backgroundColor: "#EEE4FC",
|
||
},
|
||
}}
|
||
/>
|
||
</FormControl>
|
||
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
|
||
<TextField
|
||
value=""
|
||
fullWidth
|
||
placeholder="6235840cc71"
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: theme.palette.background.default,
|
||
height: "48px",
|
||
borderRadius: "0 10px 10px 0",
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
borderRadius: "0 10px 10px 0",
|
||
fontSize: "18px",
|
||
lineHeight: "21px",
|
||
py: 0,
|
||
},
|
||
}}
|
||
/>
|
||
</FormControl>
|
||
<CopyIcon
|
||
color={theme.palette.brightPurple.main}
|
||
bgcolor={"#EEE4FC"}
|
||
marL={"10px"}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<ButtonSocial />
|
||
|
||
<Typography sx={{ color: "#FC712F" }}>Не опубликован</Typography>
|
||
</Box>
|
||
</Paper>
|
||
<Paper
|
||
sx={{
|
||
maxWidth: "220px",
|
||
width: "100%",
|
||
padding: "20px",
|
||
borderRadius: "12px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "18px",
|
||
boxShadow:
|
||
"0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||
<VkIcon
|
||
color={theme.palette.brightPurple.main}
|
||
bgcolor={"#EEE4FC"}
|
||
/>
|
||
<Typography> Вконтакте</Typography>
|
||
</Box>
|
||
|
||
<Typography>
|
||
Для публикации сниппета на стене группы, призывающего пройти тест.
|
||
</Typography>
|
||
<Link
|
||
component="button"
|
||
onClick={handleOpenVk}
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
textAlign: "left",
|
||
}}
|
||
>
|
||
Подключить
|
||
</Link>
|
||
</Paper>
|
||
<Paper
|
||
sx={{
|
||
maxWidth: "220px",
|
||
width: "100%",
|
||
padding: "20px",
|
||
borderRadius: "12px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "18px",
|
||
boxShadow:
|
||
"0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||
<DomenIcon
|
||
color={theme.palette.brightPurple.main}
|
||
bgcolor={"#EEE4FC"}
|
||
/>
|
||
<Typography>Свой домен</Typography>
|
||
</Box>
|
||
<Typography>
|
||
Подключите свой домен, если хотите, чтобы квиз открывался по вашей
|
||
ссылке.
|
||
</Typography>
|
||
<Link
|
||
component="button"
|
||
onClick={handleOpenDom}
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
textAlign: "left",
|
||
}}
|
||
>
|
||
Подключить
|
||
</Link>
|
||
</Paper>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
backgroundColor: "#ffffff",
|
||
padding: "20px",
|
||
mt: "40px",
|
||
borderRadius: "12px",
|
||
maxWidth: "1160px",
|
||
boxShadow:
|
||
"0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||
<Typography variant="h5" sx={{ paddingRight: "30px" }}>
|
||
Установка квизов на сайте
|
||
</Typography>
|
||
<OneIconBorder color={"#FC712F"} />
|
||
<Typography sx={{ color: "#FC712F" }}>Способ установки</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
gap: "30px",
|
||
}}
|
||
>
|
||
{buttonInstall.map((e, i) => (
|
||
<ButtonBase
|
||
key={i}
|
||
// onClick={()=>{}}
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "start",
|
||
alignItems: "start",
|
||
maxWidth: "205px",
|
||
gap: "15px",
|
||
}}
|
||
>
|
||
<img src={e.icon} />
|
||
<Typography>{e.title}</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
color: theme.palette.grey2.main,
|
||
textAlign: "start",
|
||
}}
|
||
>
|
||
{e.text}
|
||
</Typography>
|
||
</ButtonBase>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
<OnButtonInstall />
|
||
<BannerInstall />
|
||
<InBodyInstall />
|
||
<AutoOpenInstall />
|
||
<VidjetInstall />
|
||
<InstallQzCode />
|
||
<Box
|
||
sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
|
||
>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{ padding: "10px 20px", borderRadius: "8px" }}
|
||
>
|
||
<ArrowLeft />
|
||
</Button>
|
||
<Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
|
||
</Box>
|
||
|
||
<Modal
|
||
open={openVk}
|
||
onClose={handleCloseVk}
|
||
aria-labelledby="modal-modal-title"
|
||
aria-describedby="modal-modal-description"
|
||
>
|
||
<Box
|
||
sx={{
|
||
position: "absolute" as "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
maxWidth: "620px",
|
||
width: "100%",
|
||
bgcolor: "background.paper",
|
||
borderRadius: "12px",
|
||
|
||
boxShadow: 24,
|
||
p: 0,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
padding: "20px",
|
||
borderRadius: "12px 12px 0 0",
|
||
background: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||
Добавить квиз в группу ВК
|
||
</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "20px",
|
||
// alignItems: 'center',
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography>1. Добавьте приложение в сообщество</Typography>
|
||
<Button
|
||
variant="contained"
|
||
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 вашего сообщества (полный адрес ссылки
|
||
можно узнать в браузерной строке, открыв приложение в вашей
|
||
группе
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "20px",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography>
|
||
2. Откройте квиз в группе (вы должны быть администратором
|
||
группы)
|
||
</Typography>
|
||
<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" }}>
|
||
<Button variant="outlined" onClick={handleCloseVk}>
|
||
Отмена
|
||
</Button>
|
||
<Button variant="contained">Готово</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
|
||
<Modal
|
||
open={openDom}
|
||
onClose={handleCloseDom}
|
||
aria-labelledby="modal-modal-title"
|
||
aria-describedby="modal-modal-description"
|
||
>
|
||
<Box
|
||
sx={{
|
||
position: "absolute" as "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
maxWidth: "620px",
|
||
width: "100%",
|
||
bgcolor: "background.paper",
|
||
borderRadius: "12px",
|
||
|
||
boxShadow: 24,
|
||
p: 0,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
padding: "20px",
|
||
borderRadius: "12px 12px 0 0",
|
||
background: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||
Подключить свой домен
|
||
</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "20px",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||
Подключите домен к проекту, чтобы создать несколько квизов на
|
||
одном домене
|
||
</Typography>
|
||
<Typography>1. Настройте записи в регистраторе домена</Typography>
|
||
<Box sx={{ display: "flex" }}>
|
||
<SelectableButton
|
||
isSelected={backgroundType === "text"}
|
||
onClick={() => setBackgroundType("text")}
|
||
>
|
||
Для поддоменов
|
||
</SelectableButton>
|
||
<SelectableButton
|
||
isSelected={backgroundType === "video"}
|
||
onClick={() => setBackgroundType("video")}
|
||
>
|
||
Для доменов
|
||
</SelectableButton>
|
||
</Box>
|
||
|
||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||
Создайте для нужного поддомена две cname-записи
|
||
</Typography>
|
||
<CustomTextField placeholder={""} text={"XXXXXXXXXXX"} />
|
||
|
||
<TextField
|
||
id="outlined-multiline-static"
|
||
multiline
|
||
rows={2}
|
||
defaultValue="XXXXXXXXXXX
|
||
XXXXXXXXXXX"
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: theme.palette.background.default,
|
||
borderRadius: "10px",
|
||
},
|
||
}}
|
||
/>
|
||
<Link
|
||
component="button"
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
textAlign: "left",
|
||
maxWidth: "372px",
|
||
}}
|
||
>
|
||
Как подключить свой домен/поддомен к квизу? Ошибки при
|
||
подключении домена
|
||
</Link>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "20px",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography>2. Укажите домен и сохраните квиз</Typography>
|
||
|
||
<FormControl sx={{ m: 1, width: "100%" }} variant="outlined">
|
||
<OutlinedInput
|
||
id="outlined-adornment-password"
|
||
type="text"
|
||
placeholder="XXXXXXXXXXX"
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: theme.palette.background.default,
|
||
borderRadius: "10px",
|
||
},
|
||
}}
|
||
endAdornment={
|
||
<InputAdornment position="end">
|
||
<IconButton
|
||
// onClick={}
|
||
// onMouseDown={}
|
||
edge="end"
|
||
>
|
||
<CopyIcon
|
||
color={"#ffffff"}
|
||
bgcolor={theme.palette.brightPurple.main}
|
||
/>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
}
|
||
label="Password"
|
||
/>
|
||
</FormControl>
|
||
</Box>
|
||
|
||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||
<Typography
|
||
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
|
||
>
|
||
Привязка домена и обновление DNS записей может занять до 48
|
||
часов
|
||
</Typography>
|
||
<Button variant="outlined" onClick={handleCloseDom}>
|
||
Отмена
|
||
</Button>
|
||
<Button variant="contained">Готово</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|