utm
This commit is contained in:
parent
7e9613d975
commit
739eb32d23
4
src/assets/icons/PlusIco.svg
Normal file
4
src/assets/icons/PlusIco.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="36" height="36" rx="6" fill="#EEE4FC"/>
|
||||
<path d="M26.9503 17.9503H18M18 17.9503V9M18 17.9503V26.9006M18 17.9503H9.04972" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 322 B |
@ -1,11 +1,14 @@
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { decrementCurrentStep } from "@root/quizes/actions";
|
||||
import ArrowLeft from "@/assets/icons/questionsPage/arrowLeft";
|
||||
import QuizInstallationCard from "./QuizInstallationCard/QuizInstallationCard";
|
||||
import QuizLinkCard from "./QuizLinkCard";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import QuizMarkCreate from "./QuizInstallationCard/QuizMarkCreate";
|
||||
|
||||
export default function InstallQuiz() {
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1426));
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<>
|
||||
@ -17,8 +20,16 @@ export default function InstallQuiz() {
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<QuizLinkCard />
|
||||
<Box sx={{
|
||||
display: "inline-flex",
|
||||
gap: "22px",
|
||||
flexDirection: isTablet ? "column" : "row"
|
||||
}}>
|
||||
<QuizLinkCard />
|
||||
<QuizMarkCreate />
|
||||
</Box>
|
||||
<QuizInstallationCard />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
|
||||
227
src/pages/InstallQuiz/QuizInstallationCard/QuizMarkCreate.tsx
Normal file
227
src/pages/InstallQuiz/QuizInstallationCard/QuizMarkCreate.tsx
Normal file
@ -0,0 +1,227 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
TextField as MuiTextField,
|
||||
Paper,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
TextFieldProps,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { FC, useState } from "react";
|
||||
import ArrowDown from "@/assets/icons/ArrowDownIcon";
|
||||
import CopyIcon from "@/assets/icons/CopyIcon";
|
||||
import LinkIcon from "@/assets/icons/LinkIcon";
|
||||
import { ReactComponent as PlusIco } from "@/assets/icons/PlusIco.svg";
|
||||
import { InfoPopover } from "@/ui_kit/InfoPopover";
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
||||
|
||||
|
||||
export default function QuizMarkCreate() {
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz();
|
||||
const [display, setDisplay] = useState("1");
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
|
||||
const CopyLink = () => {
|
||||
let one = (document.getElementById("inputMarkLinkone") as HTMLInputElement)
|
||||
?.value;
|
||||
let text = (document.getElementById("inputMarkLink") as HTMLInputElement)
|
||||
?.value;
|
||||
navigator.clipboard.writeText(one + text);
|
||||
};
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setDisplay(event.target.value);
|
||||
};
|
||||
|
||||
if (!quiz) return null;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
boxSizing: "border-box",
|
||||
maxWidth: "580px",
|
||||
width: "100%",
|
||||
padding: "22px 18px 20px 20px",
|
||||
borderRadius: "12px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
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: isMobile ? "flex-start" : "center",
|
||||
gap: "10px",
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<LinkIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
/>
|
||||
<Typography color="#4D4D4D">Создание/выбор utm меток</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
|
||||
<InfoPopover />
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
|
||||
width: "100%",
|
||||
maxWidth: "118px",
|
||||
height: "24px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
id="display-select"
|
||||
variant="outlined"
|
||||
value={display}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
height: "24px",
|
||||
borderRadius: "8px",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none !important",
|
||||
},
|
||||
"& .MuiSelect-icon": {
|
||||
position: 'relative',
|
||||
marginBottom: '13px',
|
||||
}
|
||||
}}
|
||||
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: "20px",
|
||||
gap: "20px"
|
||||
},
|
||||
}}
|
||||
IconComponent={(props) => <ArrowDown {...props} sx={{
|
||||
position: 'relative',
|
||||
top: '-5px', // Поднимаем вверх
|
||||
right: '5px'
|
||||
}} />}
|
||||
|
||||
>
|
||||
<MenuItem
|
||||
value={1}
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Google
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: "inline-flex", alignItems: "center", justifyContent: "space-between", margin: "30px 0px 0px 0px" }}>
|
||||
<Box sx={{ display: "inline-flex" }}>
|
||||
<FormControl variant="standard" sx={{ p: 0 }}>
|
||||
<TextField
|
||||
disabled
|
||||
id="inputMarkLinkone"
|
||||
placeholder="Название"
|
||||
sx={{
|
||||
width: isTablet ? "100%" : "182px",
|
||||
maxWidth: "182px",
|
||||
"& .MuiInputBase-root": {
|
||||
|
||||
height: "48px",
|
||||
color: "#525253",
|
||||
borderRadius: "8px 0 0 8px",
|
||||
backgroundColor: "#F2F3F7",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl variant="standard" sx={{ p: 0 }}>
|
||||
<TextField
|
||||
placeholder="пример-ссылки-с-utm-метками"
|
||||
|
||||
sx={{
|
||||
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#525253",
|
||||
width: isTablet ? "100%" : "317px",
|
||||
maxWidth: "317px",
|
||||
height: "48px",
|
||||
borderRadius: "0 8px 8px 0",
|
||||
backgroundColor: "#F2F3F7"
|
||||
},
|
||||
}}
|
||||
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>
|
||||
|
||||
<Box sx={{ display: "inline-flex", margin: "11px 0 0 0", alignItems: "flex-end" }}>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "0px 0px 0px 0px" }}>
|
||||
<PlusIco></PlusIco>
|
||||
</IconButton>
|
||||
<Button variant="contained" sx={{ width: "133px", height: "44px", margin: "0px 0 0 auto" }}>Сохранить</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
}
|
||||
@ -18,6 +18,11 @@ import { FC, useState } from "react";
|
||||
import ArrowDown from "@/assets/icons/ArrowDownIcon";
|
||||
import CopyIcon from "@/assets/icons/CopyIcon";
|
||||
import LinkIcon from "@/assets/icons/LinkIcon";
|
||||
import BrowserIcon from "@/assets/icons/BrowserIcon";
|
||||
import TiktokIcon from "@/assets/icons/tiktokIcon";
|
||||
import { QrCode, Telegram } from "@mui/icons-material";
|
||||
import TelegramIcon from "@/assets/icons/telegramIcon";
|
||||
import { CrossedEyeIcon } from "@/assets/icons/CrossedEyeIcon";
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
||||
|
||||
@ -27,6 +32,7 @@ export default function QuizLinkCard() {
|
||||
const { isTestServer } = useDomainDefine();
|
||||
const [display, setDisplay] = useState("1");
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
|
||||
const CopyLink = () => {
|
||||
let one = (document.getElementById("inputLinkone") as HTMLInputElement)
|
||||
@ -45,13 +51,13 @@ export default function QuizLinkCard() {
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
maxWidth: "522px",
|
||||
boxSizing: "border-box",
|
||||
maxWidth: "560px",
|
||||
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)",
|
||||
}}
|
||||
@ -64,146 +70,96 @@ export default function QuizLinkCard() {
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center",gap:"10px"}}>
|
||||
<LinkIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
/>
|
||||
<Typography>Ссылка на quiz</Typography>
|
||||
<Typography color="#4D4D4D">Ссылка на quiz</Typography>
|
||||
</Box>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
height: "48px",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
|
||||
<TextField
|
||||
disabled
|
||||
id={"inputLinkone"}
|
||||
value={isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}
|
||||
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>
|
||||
<Box sx={{display: "inline-flex", alignItems: "center", justifyContent: "space-between", margin:"30px 0px 0px 0px"}}>
|
||||
<Box sx={{ display: "inline-flex"}}>
|
||||
<FormControl variant="standard" sx={{ p: 0 }}>
|
||||
<TextField
|
||||
disabled
|
||||
id={"inputLinkone"}
|
||||
value={isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}
|
||||
sx={{
|
||||
width: isTablet ? "100%" : "182px",
|
||||
maxWidth:"182px",
|
||||
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiInputBase-root": {
|
||||
|
||||
height: "48px",
|
||||
color:"#8c8694",
|
||||
borderRadius: "10px 0 0 10px",
|
||||
backgroundColor: "#EEE4FC",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl variant="standard" sx={{ p: 0 }}>
|
||||
<TextField
|
||||
value={quiz.qid}
|
||||
id={"inputLink"}
|
||||
|
||||
placeholder="6235840cc71"
|
||||
sx={{
|
||||
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: "#a5a5ad",
|
||||
width: isTablet?"100%":"297px",
|
||||
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" }}
|
||||
sx={{ borderRadius: "6px"}}
|
||||
>
|
||||
<CopyIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{display:"inline-flex",margin:"29px 0 0 0",gap:"5px"}}>
|
||||
<BrowserIcon />
|
||||
<TiktokIcon/>
|
||||
<TelegramIcon/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
margin: "6px 0 0 auto",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#FC712F" }}>
|
||||
<Typography sx={{ color: "#FC712F", fontSize:"16px"}}>
|
||||
{quiz?.status === "start" ? "Опубликован" : "Не опубликован"}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user