844 lines
32 KiB
TypeScript
844 lines
32 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, updateQuiz } from "@root/quizes/actions";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
|
||
type BackgroundType = "text" | "video";
|
||
|
||
export default function InstallQuiz() {
|
||
const quiz = useCurrentQuiz()
|
||
console.log(quiz)
|
||
|
||
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();
|
||
|
||
|
||
const CopyLink = () => {
|
||
let one = document.getElementById("inputLinkone").value;
|
||
let text = document.getElementById("inputLink").value;
|
||
// text.select();
|
||
navigator.clipboard.writeText(one+text)
|
||
// document.execCommand("copy");
|
||
}
|
||
|
||
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={"inputLinkone"}
|
||
value="https://hbpn.link/"
|
||
// 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={quiz.qid}
|
||
id={"inputLink"}
|
||
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>
|
||
<IconButton
|
||
onClick={CopyLink}
|
||
id={"copyLink"}
|
||
sx={{borderRadius: "6px"}}>
|
||
<CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
|
||
</IconButton>
|
||
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<ButtonSocial />
|
||
|
||
<Typography sx={{ color: "#FC712F" }}>{quiz?.status === "start" ? "Опубликован" : "Не опубликован"}</Typography>
|
||
</Box>
|
||
</Paper>
|
||
</Box>
|
||
</>
|
||
)
|
||
}
|
||
|
||
|
||
|
||
|
||
// export default function InstallQuiz() {
|
||
|
||
// 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>
|
||
// </>
|
||
// );
|
||
// }
|
||
|
||
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: "Сбоку страницы как консультант",
|
||
},
|
||
]; |