diff --git a/lib/components/ViewPublicationPage/ContactForm.tsx b/lib/components/ViewPublicationPage/ContactForm.tsx index 22afe31..68f0965 100644 --- a/lib/components/ViewPublicationPage/ContactForm.tsx +++ b/lib/components/ViewPublicationPage/ContactForm.tsx @@ -3,20 +3,29 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon"; import NameIcon from "@icons/ContactFormIcon/NameIcon"; import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon"; 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 { FC, useRef, useState } from "react"; +import {FC, useRef, useState} from "react"; -import { sendFC } from "@api/quizRelase"; -import { NameplateLogo } from "@icons/NameplateLogo"; -import { QuizQuestionResult } from "@model/questionTypes/result"; -import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; -import { quizThemes } from "@utils/themes/Publication/themePublication"; -import { enqueueSnackbar } from "notistack"; -import { useRootContainerSize } from "../../contexts/RootContainerWidthContext"; -import { useQuizData } from "@contexts/QuizDataContext"; -import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question"; +import {sendFC} from "@api/quizRelase"; +import {NameplateLogo} from "@icons/NameplateLogo"; +import {QuizQuestionResult} from "@model/questionTypes/result"; +import {AnyTypedQuizQuestion} from "@model/questionTypes/shared"; +import {quizThemes} from "@utils/themes/Publication/themePublication"; +import {enqueueSnackbar} from "notistack"; +import {useRootContainerSize} from "../../contexts/RootContainerWidthContext"; +import {useQuizData} from "@contexts/QuizDataContext"; +import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question"; const TextField = MuiTextField as unknown as FC; // temporary fix ts(2590) @@ -27,9 +36,9 @@ type Props = { onShowResult: () => void; }; -export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { +export const ContactForm = ({currentQuestion, onShowResult}: Props) => { const theme = useTheme(); - const { settings, questions, quizId, show_badge } = useQuizData(); + const {settings, questions, quizId, show_badge} = useQuizData(); const [ready, setReady] = useState(false); const [name, setName] = useState(""); @@ -66,7 +75,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { if (email.length > 0) body.email = email; if (phone.length > 0) body.phone = phone; 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) { try { @@ -79,7 +88,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { const sessions = JSON.parse(localStorage.getItem("sessions") || "{}"); localStorage.setItem( "sessions", - JSON.stringify({ ...sessions, [quizId]: new Date().getTime() }) + JSON.stringify({...sessions, [quizId]: new Date().getTime()}) ); } catch (e) { enqueueSnackbar("ответ не был засчитан"); @@ -99,7 +108,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { const isWide = Object.keys(filteredFC).length > 2; 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)) { return enqueueSnackbar("введена некорректная почта"); } @@ -156,7 +165,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { msOverflowStyle: "none", backgroundPosition: "center", backgroundSize: "cover", - backgroundImage: settings.cfg.design + backgroundImage: settings.cfg.design && !isMobile ? `url(${DESIGN_LIST[settings.cfg.theme]})` : null, }} @@ -168,6 +177,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { height: "100%", minHeight: "100vh", 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, }} > { > { + handleChange={({target}) => { setReady(target.checked); }} checked={ready} colorIcon={theme.palette.primary.main} /> - + С  Положением об обработке персональных данных{" "} @@ -338,18 +352,18 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { }; const Inputs = ({ - name, - setName, - email, - setEmail, - phone, - setPhone, - text, - setText, - adress, - setAdress, -}: any) => { - const { settings } = useQuizData(); + name, + setName, + email, + setEmail, + phone, + setPhone, + text, + setText, + adress, + setAdress, + }: any) => { + const {settings} = useQuizData(); const FC = settings.cfg.formContact.fields; @@ -357,7 +371,7 @@ const Inputs = ({ const Name = ( setName(target.value)} + onChange={({target}) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "Имя"} @@ -366,7 +380,7 @@ const Inputs = ({ ); const Email = ( setEmail(target.value)} + onChange={({target}) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} @@ -375,7 +389,7 @@ const Inputs = ({ ); const Phone = ( setPhone(target.value)} + onChange={({target}) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "Номер телефона"} @@ -384,7 +398,7 @@ const Inputs = ({ ); const Text = ( setText(target.value)} + onChange={({target}) => setText(target.value)} id={text} title={FC["text"].text || "Введите фамилию"} desc={FC["text"].innerText || "Фамилия"} @@ -393,7 +407,7 @@ const Inputs = ({ ); const Adress = ( setAdress(target.value)} + onChange={({target}) => setAdress(target.value)} id={adress} title={FC["address"].innerText || "Введите адрес"} 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; title: string; desc: string; @@ -431,7 +445,7 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: { }) => { const theme = useTheme(); const isMobile = useRootContainerSize() < 600; - const { settings } = useQuizData(); + const {settings} = useQuizData(); return ( @@ -456,7 +470,8 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: { InputProps={{ startAdornment: ( - + ), }} diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx index 1eae9e7..edfdf2b 100644 --- a/lib/components/ViewPublicationPage/ResultForm.tsx +++ b/lib/components/ViewPublicationPage/ResultForm.tsx @@ -5,25 +5,25 @@ import { useTheme } from "@mui/material"; -import { NameplateLogo } from "@icons/NameplateLogo"; +import {NameplateLogo} from "@icons/NameplateLogo"; import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"; -import { useQuizData } from "@contexts/QuizDataContext"; -import { quizThemes } from "@utils/themes/Publication/themePublication"; -import { useRootContainerSize } from "../../contexts/RootContainerWidthContext"; -import type { QuizQuestionResult } from "../../model/questionTypes/result"; -import { setCurrentQuizStep } from "@stores/quizView"; -import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question"; +import {useQuizData} from "@contexts/QuizDataContext"; +import {quizThemes} from "@utils/themes/Publication/themePublication"; +import {useRootContainerSize} from "../../contexts/RootContainerWidthContext"; +import type {QuizQuestionResult} from "../../model/questionTypes/result"; +import {setCurrentQuizStep} from "@stores/quizView"; +import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question"; type ResultFormProps = { resultQuestion: QuizQuestionResult; }; -export const ResultForm = ({ resultQuestion }: ResultFormProps) => { +export const ResultForm = ({resultQuestion}: ResultFormProps) => { const theme = useTheme(); const isMobile = useRootContainerSize() < 650; const isTablet = useRootContainerSize() < 1000; - const { settings, show_badge } = useQuizData(); + const {settings, show_badge} = useQuizData(); const spec = settings.cfg.spec return ( @@ -36,52 +36,67 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => { height: "100%", minHeight: "100vh", width: "100%", - pt: "28px", overflow: "auto", backgroundColor: theme.palette.background.default, backgroundPosition: "center", backgroundSize: "cover", - backgroundImage: settings.cfg.design + backgroundImage: settings.cfg.design && !isMobile ? `url(${DESIGN_LIST[settings.cfg.theme]})` : null, - }} + + }} > - { - !resultQuestion?.content.useImage && resultQuestion.content.video && ( - - ) - } - { - resultQuestion?.content.useImage && resultQuestion.content.back && ( - - ) - } - {resultQuestion.description !== "" && + + { + !resultQuestion?.content.useImage && resultQuestion.content.video && ( + + ) + } + { + resultQuestion?.content.useImage && resultQuestion.content.back && ( + + ) + } + {resultQuestion.description !== "" && resultQuestion.description !== " " && ( { )} - - {resultQuestion.title} - - - { - resultQuestion.content.text !== "" && - resultQuestion.content.text !== " " && ( - - { - resultQuestion.content.text - } - - ) - } - - - - - {show_badge && - - - + + { + resultQuestion.content.text !== "" && + resultQuestion.content.text !== " " && ( + + { + resultQuestion.content.text + } + + ) + } + + + + + + {show_badge && + - Сделано на PenaQuiz - - - } + + + Сделано на PenaQuiz + + + } - + { justifyContent: "center", alignItems: "center", border: "1px solid #9A9AAF80", - p: - ( - settings.cfg.resultInfo.showResultForm === "before" && - !Boolean(settings.cfg.score) - ) || - ( - settings.cfg.resultInfo.showResultForm === "after" && - resultQuestion.content.redirect - ) - ? "20px" : "0", + p: + ( + settings.cfg.resultInfo.showResultForm === "before" && + !Boolean(settings.cfg.score) + ) || + ( + settings.cfg.resultInfo.showResultForm === "after" && + resultQuestion.content.redirect + ) + ? "20px" : "0", }} > {settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && ( @@ -203,16 +219,17 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => { )} {settings.cfg.resultInfo.showResultForm === "after" && - resultQuestion.content.redirect && ( - - )} + resultQuestion.content.redirect && ( + + )} + );