SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

фк и результаты градиент поверх фотофона

Browse Source
This commit is contained in:
Tamara 2024-03-14 20:17:19 +03:00
parent ab0f53e061
commit 7bec600391
2 changed files with 196 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
lib/components/ViewPublicationPage/ContactForm.tsx
View File

@ -3,20 +3,29 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import NameIcon from "@icons/ContactFormIcon/NameIcon"; import NameIcon from "@icons/ContactFormIcon/NameIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon"; import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon"; import TextIcon from "@icons/ContactFormIcon/TextIcon";
import { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material"; import {
Box,
Button,
InputAdornment,
Link,
TextField as MuiTextField,
TextFieldProps,
Typography,
useTheme
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { FC, useRef, useState } from "react"; import {FC, useRef, useState} from "react";
import { sendFC } from "@api/quizRelase"; import {sendFC} from "@api/quizRelase";
import { NameplateLogo } from "@icons/NameplateLogo"; import {NameplateLogo} from "@icons/NameplateLogo";
import { QuizQuestionResult } from "@model/questionTypes/result"; import {QuizQuestionResult} from "@model/questionTypes/result";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; import {AnyTypedQuizQuestion} from "@model/questionTypes/shared";
import { quizThemes } from "@utils/themes/Publication/themePublication"; 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";
import { useQuizData } from "@contexts/QuizDataContext"; import {useQuizData} from "@contexts/QuizDataContext";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question"; import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590) const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@ -27,9 +36,9 @@ type Props = {
onShowResult: () => void; onShowResult: () => void;
}; };
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
const theme = useTheme(); const theme = useTheme();
const { settings, questions, quizId, show_badge } = useQuizData(); const {settings, questions, quizId, show_badge} = useQuizData();
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [name, setName] = useState(""); const [name, setName] = useState("");
@ -66,7 +75,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
if (email.length > 0) body.email = email; if (email.length > 0) body.email = email;
if (phone.length > 0) body.phone = phone; if (phone.length > 0) body.phone = phone;
if (adress.length > 0) body.address = adress; if (adress.length > 0) body.address = adress;
if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text }; if (text.length > 0) body.customs = {[FC.text.text || "Фамилия"]: text};
if (Object.keys(body).length > 0) { if (Object.keys(body).length > 0) {
try { try {
@ -79,7 +88,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}"); const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
localStorage.setItem( localStorage.setItem(
"sessions", "sessions",
JSON.stringify({ ...sessions, [quizId]: new Date().getTime() }) JSON.stringify({...sessions, [quizId]: new Date().getTime()})
); );
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
@ -99,7 +108,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const isWide = Object.keys(filteredFC).length > 2; const isWide = Object.keys(filteredFC).length > 2;
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("введена некорректная почта");
} }
@ -156,7 +165,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
msOverflowStyle: "none", msOverflowStyle: "none",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: settings.cfg.design && !isMobile
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
}} }}
@ -168,6 +177,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
height: "100%", height: "100%",
minHeight: "100vh", minHeight: "100vh",
display: isWide && !isMobile ? "flex" : undefined, display: isWide && !isMobile ? "flex" : undefined,
background: settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight
? "transparent"
: "linear-gradient(90deg,#272626, transparent)"
: theme.palette.background.default,
}} }}
> >
<Box <Box
@ -278,13 +292,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
> >
<CustomCheckbox <CustomCheckbox
label="" label=""
handleChange={({ target }) => { handleChange={({target}) => {
setReady(target.checked); setReady(target.checked);
}} }}
checked={ready} checked={ready}
colorIcon={theme.palette.primary.main} colorIcon={theme.palette.primary.main}
/> />
<Typography sx={{ color: theme.palette.text.primary }}> <Typography sx={{color: theme.palette.text.primary}}>
С&ensp; С&ensp;
<Link href={"https://shub.pena.digital/ppdd"} target="_blank"> <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
Положением об обработке персональных данных{" "} Положением об обработке персональных данных{" "}
@ -338,18 +352,18 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
}; };
const Inputs = ({ const Inputs = ({
name, name,
setName, setName,
email, email,
setEmail, setEmail,
phone, phone,
setPhone, setPhone,
text, text,
setText, setText,
adress, adress,
setAdress, setAdress,
}: any) => { }: any) => {
const { settings } = useQuizData(); const {settings} = useQuizData();
const FC = settings.cfg.formContact.fields; const FC = settings.cfg.formContact.fields;
@ -357,7 +371,7 @@ const Inputs = ({
const Name = ( const Name = (
<CustomInput <CustomInput
onChange={({ target }) => setName(target.value)} onChange={({target}) => setName(target.value)}
id={name} id={name}
title={FC["name"].innerText || "Введите имя"} title={FC["name"].innerText || "Введите имя"}
desc={FC["name"].text || "Имя"} desc={FC["name"].text || "Имя"}
@ -366,7 +380,7 @@ const Inputs = ({
); );
const Email = ( const Email = (
<CustomInput <CustomInput
onChange={({ target }) => setEmail(target.value)} onChange={({target}) => setEmail(target.value)}
id={email} id={email}
title={FC["email"].innerText || "Введите Email"} title={FC["email"].innerText || "Введите Email"}
desc={FC["email"].text || "Email"} desc={FC["email"].text || "Email"}
@ -375,7 +389,7 @@ const Inputs = ({
); );
const Phone = ( const Phone = (
<CustomInput <CustomInput
onChange={({ target }) => setPhone(target.value)} onChange={({target}) => setPhone(target.value)}
id={phone} id={phone}
title={FC["phone"].innerText || "Введите номер телефона"} title={FC["phone"].innerText || "Введите номер телефона"}
desc={FC["phone"].text || "Номер телефона"} desc={FC["phone"].text || "Номер телефона"}
@ -384,7 +398,7 @@ const Inputs = ({
); );
const Text = ( const Text = (
<CustomInput <CustomInput
onChange={({ target }) => setText(target.value)} onChange={({target}) => setText(target.value)}
id={text} id={text}
title={FC["text"].text || "Введите фамилию"} title={FC["text"].text || "Введите фамилию"}
desc={FC["text"].innerText || "Фамилия"} desc={FC["text"].innerText || "Фамилия"}
@ -393,7 +407,7 @@ const Inputs = ({
); );
const Adress = ( const Adress = (
<CustomInput <CustomInput
onChange={({ target }) => setAdress(target.value)} onChange={({target}) => setAdress(target.value)}
id={adress} id={adress}
title={FC["address"].innerText || "Введите адрес"} title={FC["address"].innerText || "Введите адрес"}
desc={FC["address"].text || "Адрес"} desc={FC["address"].text || "Адрес"}
@ -422,7 +436,7 @@ 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;
@ -431,7 +445,7 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 600; const isMobile = useRootContainerSize() < 600;
const { settings } = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box m="15px 0"> <Box m="15px 0">
<Typography mb="7px" color={theme.palette.text.primary}> <Typography mb="7px" color={theme.palette.text.primary}>
@ -456,7 +470,8 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Icon color="gray" backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} /> <Icon color="gray"
backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/>
</InputAdornment> </InputAdornment>
), ),
}} }}

267
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -5,25 +5,25 @@ import {
useTheme useTheme
} from "@mui/material"; } from "@mui/material";
import { NameplateLogo } from "@icons/NameplateLogo"; import {NameplateLogo} from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { useQuizData } from "@contexts/QuizDataContext"; import {useQuizData} from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import {quizThemes} from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext"; import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
import type { QuizQuestionResult } from "../../model/questionTypes/result"; import type {QuizQuestionResult} from "../../model/questionTypes/result";
import { setCurrentQuizStep } from "@stores/quizView"; import {setCurrentQuizStep} from "@stores/quizView";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question"; import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question";
type ResultFormProps = { type ResultFormProps = {
resultQuestion: QuizQuestionResult; resultQuestion: QuizQuestionResult;
}; };
export const ResultForm = ({ resultQuestion }: ResultFormProps) => { export const ResultForm = ({resultQuestion}: ResultFormProps) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000; const isTablet = useRootContainerSize() < 1000;
const { settings, show_badge } = useQuizData(); const {settings, show_badge} = useQuizData();
const spec = settings.cfg.spec const spec = settings.cfg.spec
return ( return (
@ -36,52 +36,67 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
height: "100%", height: "100%",
minHeight: "100vh", minHeight: "100vh",
width: "100%", width: "100%",
pt: "28px",
overflow: "auto", overflow: "auto",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: settings.cfg.design && !isMobile
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
}}
}}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "start", justifyContent: "space-between",
maxWidth: "844px", alignItems: "center",
width: "100%", pt: "30px",
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined, width: "inherit",
height: "inherit",
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "transparent"
: "linear-gradient(90deg,#272626, transparent)"
: theme.palette.background.default,
}} }}
> >
{ <Box
!resultQuestion?.content.useImage && resultQuestion.content.video && ( sx={{
<YoutubeEmbedIframe display: "flex",
videoUrl={resultQuestion.content.video} flexDirection: "column",
containerSX={{ alignItems: "flex-start",
width: isMobile ? "100%" : "490px", width: "100%",
height: isMobile ? "100%" : "280px", maxWidth: "844px",
}} padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
/> }}>
) {
} !resultQuestion?.content.useImage && resultQuestion.content.video && (
{ <YoutubeEmbedIframe
resultQuestion?.content.useImage && resultQuestion.content.back && ( videoUrl={resultQuestion.content.video}
<Box containerSX={{
component="img" width: isMobile ? "100%" : "490px",
src={resultQuestion.content.back} height: isMobile ? "100%" : "280px",
sx={{ }}
width: "100%", />
maxWidth: "844px", )
height: spec ? "auto" : isMobile ? "100%" : "306px", }
borderRadius: "8px" {
}} resultQuestion?.content.useImage && resultQuestion.content.back && (
></Box> <Box
) component="img"
} src={resultQuestion.content.back}
{resultQuestion.description !== "" && sx={{
width: "100%",
maxWidth: "844px",
height: spec ? "auto" : isMobile ? "100%" : "306px",
borderRadius: "8px"
}}
></Box>
)
}
{resultQuestion.description !== "" &&
resultQuestion.description !== " " && ( resultQuestion.description !== " " && (
<Typography <Typography
sx={{ sx={{
@ -96,77 +111,78 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
</Typography> </Typography>
)} )}
<Typography <Typography
sx={{
m: "20px 0",
color: theme.palette.text.primary,
wordBreak: "break-word"
}}
>
{resultQuestion.title}
</Typography>
{
resultQuestion.content.text !== "" &&
resultQuestion.content.text !== " " && (
<Typography
sx={{
fontSize: "18px",
m: "20px 0",
wordBreak: "break-word",
color: theme.palette.text.primary,
}}
>
{
resultQuestion.content.text
}
</Typography>
)
}
</Box>
<Box width="100%">
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px",
}}
>
{show_badge &&
<Box
component={Link}
target={"_blank"}
href={"https://quiz.pena.digital"}
sx={{ sx={{
display: "flex", m: "20px 0",
alignItems: "center", color: theme.palette.text.primary,
mt: "15px", wordBreak: "break-word"
gap: "10px",
textDecoration: "none",
mb: "5px"
}} }}
> >
<NameplateLogo {resultQuestion.title}
style={{ </Typography>
fontSize: "34px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF", {
}} resultQuestion.content.text !== "" &&
/> resultQuestion.content.text !== " " && (
<Typography <Typography
sx={{
fontSize: "18px",
m: "20px 0",
wordBreak: "break-word",
color: theme.palette.text.primary,
}}
>
{
resultQuestion.content.text
}
</Typography>
)
}
</Box>
<Box width="100%">
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px",
}}
>
{show_badge &&
<Box
component={Link}
target={"_blank"}
href={"https://quiz.pena.digital"}
sx={{ sx={{
fontSize: "20px", display: "flex",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", alignItems: "center",
whiteSpace: "nowrap", mt: "15px",
gap: "10px",
textDecoration: "none",
mb: "5px"
}} }}
> >
Сделано на PenaQuiz <NameplateLogo
</Typography> style={{
</Box> fontSize: "34px",
} color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
}}
/>
<Typography
sx={{
fontSize: "20px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
}
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -177,16 +193,16 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
border: "1px solid #9A9AAF80", border: "1px solid #9A9AAF80",
p: p:
( (
settings.cfg.resultInfo.showResultForm === "before" && settings.cfg.resultInfo.showResultForm === "before" &&
!Boolean(settings.cfg.score) !Boolean(settings.cfg.score)
) || ) ||
( (
settings.cfg.resultInfo.showResultForm === "after" && settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect resultQuestion.content.redirect
) )
? "20px" : "0", ? "20px" : "0",
}} }}
> >
{settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && ( {settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
@ -203,16 +219,17 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
</Button> </Button>
)} )}
{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}
variant="contained" variant="contained"
sx={{ p: "10px 20px", width: "auto", height: "50px" }} sx={{p: "10px 20px", width: "auto", height: "50px"}}
> >
{resultQuestion.content.hint.text || "Перейти на сайт"} {resultQuestion.content.hint.text || "Перейти на сайт"}
</Button> </Button>
)} )}
</Box> </Box>
</Box>
</Box> </Box>
</Box> </Box>
); );