Merge branch 'dev' into 'staging'
Dev See merge request frontend/squzanswerer!115
This commit is contained in:
commit
a788c619fb
@ -1,3 +1,4 @@
|
|||||||
|
import { FC, useRef, useState, useEffect } from "react";
|
||||||
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
||||||
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
||||||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||||||
@ -11,11 +12,10 @@ import {
|
|||||||
TextField as MuiTextField,
|
TextField as MuiTextField,
|
||||||
TextFieldProps,
|
TextFieldProps,
|
||||||
Typography,
|
Typography,
|
||||||
useTheme
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import { FC, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { DESIGN_LIST } from "@/utils/designList";
|
import { DESIGN_LIST } from "@/utils/designList";
|
||||||
import { sendFC } from "@api/quizRelase";
|
import { sendFC } from "@api/quizRelase";
|
||||||
@ -27,9 +27,9 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
|
|
||||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||||||
const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
|
const EMAIL_REGEXP =
|
||||||
|
/^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
currentQuestion: AnyTypedQuizQuestion;
|
currentQuestion: AnyTypedQuizQuestion;
|
||||||
@ -46,13 +46,27 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
const [phone, setPhone] = useState("");
|
const [phone, setPhone] = useState("");
|
||||||
const [text, setText] = useState("");
|
const [text, setText] = useState("");
|
||||||
const [adress, setAdress] = useState("");
|
const [adress, setAdress] = useState("");
|
||||||
|
const [screenHeight, setScreenHeight] = useState<number>(window.innerHeight);
|
||||||
|
|
||||||
const fireOnce = useRef(true);
|
const fireOnce = useRef(true);
|
||||||
const [fire, setFire] = useState(false);
|
const [fire, setFire] = useState(false);
|
||||||
const isMobile = useRootContainerSize() < 850;
|
const isMobile = useRootContainerSize() < 850;
|
||||||
const isTablet = useRootContainerSize() < 1000;
|
const isTablet = useRootContainerSize() < 1000;
|
||||||
|
|
||||||
const resultQuestion = currentQuestion.type === "result"
|
useEffect(() => {
|
||||||
|
function handleResize() {
|
||||||
|
setScreenHeight(window.innerHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", handleResize);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const resultQuestion =
|
||||||
|
currentQuestion.type === "result"
|
||||||
? currentQuestion
|
? currentQuestion
|
||||||
: questions.find((question): question is QuizQuestionResult => {
|
: questions.find((question): question is QuizQuestionResult => {
|
||||||
if (settings?.cfg.haveRoot) {
|
if (settings?.cfg.haveRoot) {
|
||||||
@ -62,7 +76,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
question.type === "result" && question.content.rule.parentId === "line"
|
question.type === "result" &&
|
||||||
|
question.content.rule.parentId === "line"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -84,7 +99,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
questionId: currentQuestion.id,
|
questionId: currentQuestion.id,
|
||||||
body: body,
|
body: body,
|
||||||
qid: quizId,
|
qid: quizId,
|
||||||
preview
|
preview,
|
||||||
});
|
});
|
||||||
|
|
||||||
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
||||||
@ -98,7 +113,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const FCcopy: any = settings.cfg.formContact.fields || settings.cfg.formContact;
|
const FCcopy: any =
|
||||||
|
settings.cfg.formContact.fields || settings.cfg.formContact;
|
||||||
|
|
||||||
const filteredFC: any = {};
|
const filteredFC: any = {};
|
||||||
for (const i in FCcopy) {
|
for (const i in FCcopy) {
|
||||||
@ -108,22 +124,21 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
async function handleShowResultsClick() {
|
async function handleShowResultsClick() {
|
||||||
const FC: any = settings.cfg.formContact.fields;
|
const FC: any = settings.cfg.formContact.fields;
|
||||||
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
|
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
|
||||||
return enqueueSnackbar("введена некорректная почта");
|
return enqueueSnackbar("введена некорректная почта");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (fireOnce.current) {
|
if (fireOnce.current) {
|
||||||
if (
|
if (
|
||||||
name.length === 0
|
name.length === 0 &&
|
||||||
&& email.length === 0
|
email.length === 0 &&
|
||||||
&& phone.length === 0
|
phone.length === 0 &&
|
||||||
&& text.length === 0
|
text.length === 0 &&
|
||||||
&& adress.length === 0
|
adress.length === 0
|
||||||
) return enqueueSnackbar("Пожалуйста, заполните поля");
|
)
|
||||||
|
return enqueueSnackbar("Пожалуйста, заполните поля");
|
||||||
|
|
||||||
//почта валидна, хоть одно поле заполнено
|
//почта валидна, хоть одно поле заполнено
|
||||||
setFire(true);
|
setFire(true);
|
||||||
@ -134,10 +149,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
localStorage.getItem("sessions") || "{}"
|
localStorage.getItem("sessions") || "{}"
|
||||||
);
|
);
|
||||||
sessions[quizId] = Date.now();
|
sessions[quizId] = Date.now();
|
||||||
localStorage.setItem(
|
localStorage.setItem("sessions", JSON.stringify(sessions));
|
||||||
"sessions",
|
|
||||||
JSON.stringify(sessions)
|
|
||||||
);
|
|
||||||
enqueueSnackbar("Данные успешно отправлены");
|
enqueueSnackbar("Данные успешно отправлены");
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
enqueueSnackbar("повторите попытку позже");
|
enqueueSnackbar("повторите попытку позже");
|
||||||
@ -145,7 +157,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
if (settings.cfg.resultInfo.showResultForm === "after") {
|
if (settings.cfg.resultInfo.showResultForm === "after") {
|
||||||
onShowResult();
|
onShowResult();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setFire(false);
|
setFire(false);
|
||||||
@ -158,7 +169,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
height: "100%",
|
height: screenHeight > 500 ? "100%" : "auto",
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
"&::-webkit-scrollbar": {
|
"&::-webkit-scrollbar": {
|
||||||
width: "0",
|
width: "0",
|
||||||
@ -169,10 +180,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
msOverflowStyle: "none",
|
msOverflowStyle: "none",
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
backgroundImage: settings.cfg.design && !isMobile
|
backgroundImage:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
? quizThemes[settings.cfg.theme].isLight
|
? quizThemes[settings.cfg.theme].isLight
|
||||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||||
: `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})`
|
: `linear-gradient(90deg, #272626, transparent), url(${
|
||||||
|
DESIGN_LIST[settings.cfg.theme]
|
||||||
|
})`
|
||||||
: null,
|
: null,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -180,10 +194,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
sx={{
|
sx={{
|
||||||
width: !isMobile ? "100%" : isMobile ? undefined : "530px",
|
width: !isMobile ? "100%" : isMobile ? undefined : "530px",
|
||||||
borderRadius: "4px",
|
borderRadius: "4px",
|
||||||
height: "100%",
|
height: isMobile ? "100%" : "auto",
|
||||||
minHeight: "100%",
|
minHeight: "100%",
|
||||||
display: isMobile ? undefined : "flex",
|
display: isMobile ? undefined : "flex",
|
||||||
background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
|
background:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? undefined
|
||||||
|
: theme.palette.background.default,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -194,7 +211,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
|
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
|
||||||
margin: isMobile ? 0 : "40px 0"
|
margin: isMobile ? 0 : "40px 0",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -205,7 +222,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
|
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
@ -216,7 +233,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
lineHeight: "normal",
|
lineHeight: "normal",
|
||||||
fontWeight: 501,
|
fontWeight: 501,
|
||||||
color: theme.palette.text.primary,
|
color: theme.palette.text.primary,
|
||||||
wordBreak: "break-word"
|
wordBreak: "break-word",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{settings.cfg.formContact.title ||
|
{settings.cfg.formContact.title ||
|
||||||
@ -228,14 +245,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
color: theme.palette.text.primary,
|
color: theme.palette.text.primary,
|
||||||
m: "20px 0",
|
m: "20px 0",
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
wordBreak: "break-word"
|
wordBreak: "break-word",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{settings.cfg.formContact.desc}
|
{settings.cfg.formContact.desc}
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
@ -280,8 +296,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
border: `1px solid ${theme.palette.primary.main}`,
|
border: `1px solid ${theme.palette.primary.main}`,
|
||||||
"&:disabled": {
|
"&:disabled": {
|
||||||
border: "1px solid #9A9AAF",
|
border: "1px solid #9A9AAF",
|
||||||
color: "#9A9AAF"
|
color: "#9A9AAF",
|
||||||
}
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||||
@ -319,13 +335,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
 ознакомлен
|
 ознакомлен
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
{show_badge &&
|
{show_badge && (
|
||||||
<Box
|
<Box
|
||||||
component={Link}
|
component={Link}
|
||||||
target={"_blank"}
|
target={"_blank"}
|
||||||
href={
|
href={`https://${
|
||||||
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
|
window.location.hostname.includes("s") ? "s" : ""
|
||||||
}
|
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
@ -338,21 +354,24 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
<NameplateLogo
|
<NameplateLogo
|
||||||
style={{
|
style={{
|
||||||
fontSize: "23px",
|
fontSize: "23px",
|
||||||
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#151515"
|
||||||
|
: "#FFFFFF",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#4D4D4D"
|
||||||
|
: "#F5F7FF",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Сделано на PenaQuiz
|
Сделано на PenaQuiz
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
}
|
)}
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
@ -388,7 +407,7 @@ const Inputs = ({
|
|||||||
);
|
);
|
||||||
const Email = (
|
const Email = (
|
||||||
<CustomInput
|
<CustomInput
|
||||||
onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
|
onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ""))}
|
||||||
id={email}
|
id={email}
|
||||||
title={FC["email"].innerText || "Введите Email"}
|
title={FC["email"].innerText || "Введите Email"}
|
||||||
desc={FC["email"].text || "Email"}
|
desc={FC["email"].text || "Email"}
|
||||||
@ -444,11 +463,17 @@ const Inputs = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const CustomInput = ({ title, desc, Icon, onChange, id }: {
|
const CustomInput = ({
|
||||||
|
title,
|
||||||
|
desc,
|
||||||
|
Icon,
|
||||||
|
onChange,
|
||||||
|
id,
|
||||||
|
}: {
|
||||||
id: string;
|
id: string;
|
||||||
title: string;
|
title: string;
|
||||||
desc: string;
|
desc: string;
|
||||||
Icon: FC<{ color: string; backgroundColor: string; }>;
|
Icon: FC<{ color: string; backgroundColor: string }>;
|
||||||
onChange: TextFieldProps["onChange"];
|
onChange: TextFieldProps["onChange"];
|
||||||
}) => {
|
}) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
@ -467,24 +492,29 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
|
|||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
"& .MuiOutlinedInput-notchedOutline": {
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
borderColor: "#9A9AAF80",
|
borderColor: "#9A9AAF80",
|
||||||
borderRadius: "12px"
|
borderRadius: "12px",
|
||||||
},
|
},
|
||||||
"& .MuiInputBase-root": {
|
"& .MuiInputBase-root": {
|
||||||
paddingLeft: 0
|
paddingLeft: 0,
|
||||||
},
|
},
|
||||||
'& .MuiOutlinedInput-root': {
|
"& .MuiOutlinedInput-root": {
|
||||||
'&:hover fieldset': {
|
"&:hover fieldset": {
|
||||||
borderColor: theme.palette.primary.main,
|
borderColor: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
|
||||||
}}
|
}}
|
||||||
placeholder={desc}
|
placeholder={desc}
|
||||||
InputProps={{
|
InputProps={{
|
||||||
startAdornment: (
|
startAdornment: (
|
||||||
<InputAdornment position="start">
|
<InputAdornment position="start">
|
||||||
<Icon color="gray"
|
<Icon
|
||||||
backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
|
color="gray"
|
||||||
|
backgroundColor={
|
||||||
|
quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#F2F3F7"
|
||||||
|
: "#F2F3F71A"
|
||||||
|
}
|
||||||
|
/>
|
||||||
</InputAdornment>
|
</InputAdornment>
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -1,9 +1,4 @@
|
|||||||
import {
|
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
|
||||||
Box,
|
|
||||||
Button, Link,
|
|
||||||
Typography,
|
|
||||||
useTheme
|
|
||||||
} from "@mui/material";
|
|
||||||
|
|
||||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||||
@ -24,7 +19,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
const isMobile = useRootContainerSize() < 650;
|
const isMobile = useRootContainerSize() < 650;
|
||||||
const isTablet = useRootContainerSize() < 1000;
|
const isTablet = useRootContainerSize() < 1000;
|
||||||
const { settings, show_badge, quizId } = useQuizData();
|
const { settings, show_badge, quizId } = useQuizData();
|
||||||
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
|
const setCurrentQuizStep = useQuizViewStore(
|
||||||
|
(state) => state.setCurrentQuizStep
|
||||||
|
);
|
||||||
const spec = settings.cfg.spec;
|
const spec = settings.cfg.spec;
|
||||||
console.log(quizThemes[settings.cfg.theme].isLight);
|
console.log(quizThemes[settings.cfg.theme].isLight);
|
||||||
|
|
||||||
@ -41,10 +38,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
backgroundImage: settings.cfg.design && !isMobile
|
backgroundImage:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||||
: null,
|
: null,
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -57,7 +54,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
background: settings.cfg.design && !isMobile
|
background:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
? quizThemes[settings.cfg.theme].isLight
|
? quizThemes[settings.cfg.theme].isLight
|
||||||
? "transparent"
|
? "transparent"
|
||||||
: "linear-gradient(90deg,#272626, transparent)"
|
: "linear-gradient(90deg,#272626, transparent)"
|
||||||
@ -77,7 +75,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
mb: "7px",
|
mb: "7px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{settings.cfg.startpage.logo &&
|
{settings.cfg.startpage.logo && (
|
||||||
<img
|
<img
|
||||||
src={settings.cfg.startpage.logo}
|
src={settings.cfg.startpage.logo}
|
||||||
style={{
|
style={{
|
||||||
@ -87,7 +85,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
}}
|
}}
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
}
|
)}
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
@ -106,9 +104,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
maxWidth: "844px",
|
maxWidth: "844px",
|
||||||
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
||||||
}}>
|
}}
|
||||||
{
|
>
|
||||||
!resultQuestion?.content.useImage && resultQuestion.content.video && (
|
{!resultQuestion?.content.useImage &&
|
||||||
|
resultQuestion.content.video && (
|
||||||
<YoutubeEmbedIframe
|
<YoutubeEmbedIframe
|
||||||
videoUrl={resultQuestion.content.video}
|
videoUrl={resultQuestion.content.video}
|
||||||
containerSX={{
|
containerSX={{
|
||||||
@ -117,11 +116,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
height: isMobile ? "100%" : "306px",
|
height: isMobile ? "100%" : "306px",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)
|
)}
|
||||||
}
|
{resultQuestion?.content.useImage && resultQuestion.content.back && (
|
||||||
{
|
<Box
|
||||||
resultQuestion?.content.useImage && resultQuestion.content.back && (
|
sx={{ width: "100%", display: "flex", justifyContent: "center" }}
|
||||||
<Box sx={{width: "100%", display: "flex", justifyContent: "center"}}>
|
>
|
||||||
<Box
|
<Box
|
||||||
component="img"
|
component="img"
|
||||||
src={resultQuestion.content.back}
|
src={resultQuestion.content.back}
|
||||||
@ -134,9 +133,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
)}
|
||||||
)
|
|
||||||
}
|
|
||||||
{resultQuestion.description !== "" &&
|
{resultQuestion.description !== "" &&
|
||||||
resultQuestion.description !== " " && (
|
resultQuestion.description !== " " && (
|
||||||
<Typography
|
<Typography
|
||||||
@ -145,7 +142,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
m: "20px 0",
|
m: "20px 0",
|
||||||
color: theme.palette.text.primary,
|
color: theme.palette.text.primary,
|
||||||
wordBreak: "break-word"
|
wordBreak: "break-word",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{resultQuestion.description}
|
{resultQuestion.description}
|
||||||
@ -156,14 +153,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
sx={{
|
sx={{
|
||||||
m: "20px 0",
|
m: "20px 0",
|
||||||
color: theme.palette.text.primary,
|
color: theme.palette.text.primary,
|
||||||
wordBreak: "break-word"
|
wordBreak: "break-word",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{resultQuestion.title}
|
{resultQuestion.title}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
{
|
{resultQuestion.content.text !== "" &&
|
||||||
resultQuestion.content.text !== "" &&
|
|
||||||
resultQuestion.content.text !== " " && (
|
resultQuestion.content.text !== " " && (
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
@ -173,15 +169,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
color: theme.palette.text.primary,
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{
|
{resultQuestion.content.text}
|
||||||
resultQuestion.content.text
|
|
||||||
}
|
|
||||||
</Typography>
|
</Typography>
|
||||||
)
|
)}
|
||||||
}
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
|
||||||
<Box width="100%">
|
<Box width="100%">
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@ -191,40 +183,43 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
px: "20px",
|
px: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{show_badge &&
|
{show_badge && (
|
||||||
<Box
|
<Box
|
||||||
component={Link}
|
component={Link}
|
||||||
target={"_blank"}
|
target={"_blank"}
|
||||||
href={
|
href={`https://${
|
||||||
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
|
window.location.hostname.includes("s") ? "s" : ""
|
||||||
}
|
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
mt: "15px",
|
mt: "15px",
|
||||||
gap: "10px",
|
gap: "10px",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
mb: "15px"
|
mb: "15px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<NameplateLogo
|
<NameplateLogo
|
||||||
style={{
|
style={{
|
||||||
fontSize: "23px",
|
fontSize: "23px",
|
||||||
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#000000"
|
||||||
|
: "#F5F7FF",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#4D4D4D"
|
||||||
|
: "#F5F7FF",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Сделано на PenaQuiz
|
Сделано на PenaQuiz
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
}
|
)}
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
@ -237,18 +232,16 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
borderTop: "1px solid #9A9AAF80",
|
borderTop: "1px solid #9A9AAF80",
|
||||||
p:
|
p:
|
||||||
(
|
(settings.cfg.resultInfo.showResultForm === "before" &&
|
||||||
settings.cfg.resultInfo.showResultForm === "before" &&
|
!settings.cfg.score) ||
|
||||||
!settings.cfg.score
|
(settings.cfg.resultInfo.showResultForm === "after" &&
|
||||||
) ||
|
resultQuestion.content.redirect)
|
||||||
(
|
? "20px"
|
||||||
settings.cfg.resultInfo.showResultForm === "after" &&
|
: "0",
|
||||||
resultQuestion.content.redirect
|
|
||||||
)
|
|
||||||
? "20px" : "0",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score && (
|
{settings.cfg.resultInfo.showResultForm === "before" &&
|
||||||
|
!settings.cfg.score && (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setCurrentQuizStep("contactform")}
|
onClick={() => setCurrentQuizStep("contactform")}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
@ -264,7 +257,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
{settings.cfg.resultInfo.showResultForm === "after" &&
|
{settings.cfg.resultInfo.showResultForm === "after" &&
|
||||||
resultQuestion.content.redirect && (
|
resultQuestion.content.redirect && (
|
||||||
<Button
|
<Button
|
||||||
href={resultQuestion.content.redirect}
|
href={
|
||||||
|
resultQuestion.content.redirect.includes("https")
|
||||||
|
? resultQuestion.content.redirect
|
||||||
|
: `https://${resultQuestion.content.redirect}`
|
||||||
|
}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
|
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user