diff --git a/src/pages/ViewPublicationPage/ContactForm.tsx b/src/pages/ViewPublicationPage/ContactForm.tsx index c0bff21..a781ceb 100644 --- a/src/pages/ViewPublicationPage/ContactForm.tsx +++ b/src/pages/ViewPublicationPage/ContactForm.tsx @@ -1,4 +1,4 @@ -import { Box, Typography, Button, Paper, TextField, Link, InputAdornment, useTheme } from "@mui/material"; +import { Box, Typography, Button, useMediaQuery, TextField, Link, InputAdornment, useTheme } from "@mui/material"; import NameIcon from "@icons/ContactFormIcon/NameIcon"; import EmailIcon from "@icons/ContactFormIcon/EmailIcon"; import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon"; @@ -19,6 +19,10 @@ import { modes } from "../../utils/themes/Publication/themePublication"; import { QuizQuestionResult } from "@model/questionTypes/result"; import { ApologyPage } from "./ApologyPage"; + + +const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu; + type ContactFormProps = { currentQuestion: any; showResultForm: boolean; @@ -40,6 +44,7 @@ export const ContactForm = ({ setShowContactForm, setShowResultForm, }: ContactFormProps) => { + const theme = useTheme(); const { settings, items } = useQuestionsStore() const [ready, setReady] = useState(false) @@ -51,12 +56,12 @@ export const ContactForm = ({ const fireOnce = useRef(true) const [fire, setFire] = useState(false) + const isMobile = useMediaQuery(theme.breakpoints.down(600)); const followNextForm = () => { setShowContactForm(false); setShowResultForm(true); }; - const theme = useTheme(); const mode = modes; //@ts-ignore const resultQuestion: QuizQuestionResult = items.find((question) => { @@ -120,9 +125,10 @@ export const ContactForm = ({ > @@ -142,6 +148,7 @@ export const ContactForm = ({ settings?.cfg.formContact.desc && { - setFire(true) + variant="contained" + onClick={async () => { + if (EMAIL_REGEXP.test(email)) {//почта валидна + setFire(true) - if (fireOnce.current) { - if ( - name.length > 0 || - email.length > 0 || - phone.length > 0 || - text.length > 0 || - adress.length > 0 - ) { - - try { - await inputHC() - fireOnce.current = false - enqueueSnackbar("Данные успешно отправлены") - } catch (e) { - enqueueSnackbar("повторите попытку позже") + if (fireOnce.current) { + if ( + name.length > 0 || + email.length > 0 || + phone.length > 0 || + text.length > 0 || + adress.length > 0 + ) { + + try { + await inputHC() + fireOnce.current = false + enqueueSnackbar("Данные успешно отправлены") + } catch (e) { + enqueueSnackbar("повторите попытку позже") + } + + if (settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email" && !checkEmptyData({ resultData: resultQuestion })) { + setShowContactForm(false) + setShowResultForm(true) + } + } else { + enqueueSnackbar("Пожалуйста, заполните поля") } - - if (settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email" && !checkEmptyData({ resultData: resultQuestion })) { - setShowContactForm(false) - setShowResultForm(true) - } - } else { - enqueueSnackbar("Пожалуйста, заполните поля") } - } - - setFire(false) + + setFire(false) + } else { + enqueueSnackbar("введена некорректная почта") + } + }} > {settings?.cfg.formContact?.button || "Получить результаты"} @@ -228,11 +241,11 @@ export const ContactForm = ({ sx={{ display: "flex", mt: "20px", - width: "450px", + width: isMobile ? "300px" : "450px", }} > { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} /> - + С  Положением об обработке персональных данных  и  @@ -259,7 +272,7 @@ export const ContactForm = ({ //@ts-ignore color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap" }}> - Сделано на Penasettings + Сделано на PenaQuiz @@ -277,6 +290,8 @@ const Inputs = ({ }: any) => { const { settings, items } = useQuestionsStore() + console.log("______________________EMAIL_REGEXP.test(email)") + console.log(EMAIL_REGEXP.test(email)) //@ts-ignore const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact @@ -284,7 +299,12 @@ const Inputs = ({ //@ts-ignore const Name = setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} /> //@ts-ignore - const Email = setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} /> + const Email = setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} /> //@ts-ignore const Phone = setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} /> //@ts-ignore @@ -311,9 +331,11 @@ const Inputs = ({ } const CustomInput = ({ title, desc, Icon, onChange }: any) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); //@ts-ignore return - {title} + {title} { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(650)); const { settings, items } = useQuestionsStore() - - const resultQuestion = (items.find( - (question) => - question.type === "result" && - (question.content.rule.parentId === "line" || currentQuestion.id) - )) || - items.find( - (question) => - question.type === "result" && question.content.rule.parentId === "line" - ) const mode = modes; + const searchResult = () => { + if (Boolean(settings?.cfg.haveRoot)) { + //ищём для ветвления + return (items.find( + (question) => + question.type === "result" && + question.content.rule.parentId === currentQuestion.content.id, + ) || + items.find( + (question) => + question.type === "result" && + question.content.rule.parentId === "line", + )) + } else { + return items.find( + (question) => + question.type === "result" && + question.content.rule.parentId === "line", + ) + } + }; + const resultQuestion = searchResult(); const followNextForm = () => { setShowResultForm(false); setShowContactForm(true); }; - if (resultQuestion === null || resultQuestion === undefined) { followNextForm() @@ -63,7 +76,8 @@ export const ResultForm = ({ display: "flex", flexDirection: "column", alignItems: "start", - width: "490px", + width: isMobile ? "100%" : "490px", + padding: isMobile ? "0 16px" : undefined, }} > { @@ -73,8 +87,8 @@ export const ResultForm = ({ //@ts-ignore videoUrl={resultQuestion.content.video} containerSX={{ - width: "490px", - height: "280px", + width: isMobile ? "100%" : "490px", + height: isMobile ? "100%" : "280px", }} /> )} @@ -85,8 +99,8 @@ export const ResultForm = ({ component="img" src={resultQuestion.content.back} sx={{ - width: "490px", - height: "280px", + width: isMobile ? "100%" : "490px", + height: isMobile ? "100%" : "280px", }} > )} @@ -97,6 +111,7 @@ export const ResultForm = ({ fontSize: "23px", fontWeight: 700, m: "20px 0", + color: theme.palette.text.primary, }} > {resultQuestion.description} @@ -106,9 +121,10 @@ export const ResultForm = ({ - {resultQuestion.title || "Форма результатов"} + {resultQuestion.title} { @@ -120,6 +136,7 @@ export const ResultForm = ({ sx={{ fontSize: "18px", m: "20px 0", + color: theme.palette.text.primary, }} > { @@ -143,9 +160,15 @@ export const ResultForm = ({ display: "flex", alignItems: "center", mt: "15px", + gap: "10px", }} > - + { const mode = modes; const { isMobileDevice } = useUADevice(); const isMobile = useMediaQuery(theme.breakpoints.down(650)); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); if (!settings) return null; @@ -50,14 +51,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { settings.cfg.startpageType === "centered" ? "550px" : settings.cfg.startpageType === "expanded" - ? "100vw" - : "100%", + ? "100vw" + : "100%", height: settings.cfg.startpageType === "centered" ? "275px" : settings.cfg.startpageType === "expanded" - ? "100vh" - : "100%", + ? "100vh" + : "100%", borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0", overflow: "hidden", "& iframe": { @@ -67,8 +68,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { settings.cfg.startpageType === "centered" ? "" : settings.cfg.startpageType === "expanded" - ? "scale(1.5)" - : "scale(2.4)", + ? "scale(1.5)" + : "scale(2.4)", }, }} /> @@ -81,14 +82,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { sx={{ height: "100vh", width: "100vw", - background: - settings.cfg.startpageType === "expanded" && !isMobile - ? settings.cfg.startpage.position === "left" - ? "linear-gradient(90deg,#272626,transparent)" - : settings.cfg.startpage.position === "center" - ? "linear-gradient(180deg,transparent,#272626)" - : "linear-gradient(270deg,#272626,transparent)" - : theme.palette.background.default, + background: + settings.cfg.startpageType === "expanded" && !isMobile + ? settings.cfg.startpage.position === "left" + ? "linear-gradient(90deg,#272626,transparent)" + : settings.cfg.startpage.position === "center" + ? "linear-gradient(180deg,transparent,#272626)" + : "linear-gradient(270deg,#272626,transparent)" + : theme.palette.background.default, color: settings.cfg.startpageType === "expanded" ? "white" : "black", }} @@ -115,7 +116,13 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { alt="" /> )} - {settings.cfg.info.orgname} + {settings.cfg.info.orgname} @@ -135,10 +142,10 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { settings.cfg.startpageType === "centered" ? "center" : settings.cfg.startpageType === "expanded" - ? settings.cfg.startpage.position === "center" - ? "center" - : "start" - : "start", + ? settings.cfg.startpage.position === "center" + ? "center" + : "start" + : "start", mt: "28px", width: "100%", }} @@ -186,12 +193,12 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { @@ -214,7 +221,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { {settings.cfg.info.phonenumber} )} - + {settings.cfg.info.law} @@ -259,51 +273,51 @@ function QuizPreviewLayoutByType({ const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(650)); function StartPageMobile() { - return( + return ( + + + {quizHeaderBlock} - - {quizHeaderBlock} - - {quizMainBlock} - - - - {backgroundBlock} - + {quizMainBlock} - ) + + + {backgroundBlock} + + + ) } @@ -312,137 +326,137 @@ function QuizPreviewLayoutByType({ case null: case "standard": { return ( - <> - {isMobile ? ( - - ) : ( - - - {quizHeaderBlock} - {quizMainBlock} - + <> + {isMobile ? ( + + ) : ( + + + {quizHeaderBlock} + {quizMainBlock} + - - {backgroundBlock} - - - )} + + {backgroundBlock} + + + )} - + ); } case "expanded": { return ( - <> - {isMobile ? ( - - ) : ( - - - {quizHeaderBlock} - {quizMainBlock} - - - {backgroundBlock} - - - ) - } - + <> + {isMobile ? ( + + ) : ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ) + } + ); } case "centered": { return ( - <> - {isMobile ? ( - - ) : ( - - {quizHeaderBlock} - {backgroundBlock && ( - - {backgroundBlock} - - )} - {quizMainBlock} - - ) - } - + <> + {isMobile ? ( + + ) : ( + + {quizHeaderBlock} + {backgroundBlock && ( + + {backgroundBlock} + + )} + {quizMainBlock} + + ) + } + ); } diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index 5f54ef8..76bfc8a 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -115,7 +115,8 @@ export const Number = ({ currentQuestion }: NumberProps) => { onChange={async (_, value) => { - const range = String(value).replace(",", "—"); + + const range = String(value).replace(",", "—").replace (/\D/, ''); updateAnswer(currentQuestion.id, range); @@ -144,7 +145,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { placeholder="0" value={answer} onChange={async ({ target }) => { - updateMinRangeDebounced(window.Number(target.value) > max + updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max ? String(max) : window.Number(target.value) < min ? String(min) @@ -174,7 +175,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { placeholder="0" value={minRange} onChange={({ target }) => { - setMinRange(target.value); + setMinRange(target.value.replace (/\D/, '')); if (window.Number(target.value) >= window.Number(maxRange)) { updateMinRangeDebounced(`${maxRange}—${maxRange}`, true); @@ -198,7 +199,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { placeholder="0" value={maxRange} onChange={({ target }) => { - setMaxRange(target.value); + setMaxRange(target.value.replace (/\D/, '')); if (window.Number(target.value) <= window.Number(minRange)) { updateMaxRangeDebounced(`${minRange}—${minRange}`, true); diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx index 800fbc4..b78d148 100644 --- a/src/pages/ViewPublicationPage/questions/Page.tsx +++ b/src/pages/ViewPublicationPage/questions/Page.tsx @@ -43,8 +43,13 @@ export const Page = ({ currentQuestion }: PageProps) => { ) : ( )} diff --git a/src/pages/ViewPublicationPage/questions/Rating.tsx b/src/pages/ViewPublicationPage/questions/Rating.tsx index 5c1580c..6d1950e 100644 --- a/src/pages/ViewPublicationPage/questions/Rating.tsx +++ b/src/pages/ViewPublicationPage/questions/Rating.tsx @@ -78,15 +78,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => { alignItems: "center", gap: "20px", marginTop: "20px", - width: isMobile ? "100%" : undefined + flexDirection: "column", + width: isMobile ? "100%" : undefined, }} > - - {currentQuestion.content.ratingNegativeDescription} - { try { - + await sendAnswer({ questionId: currentQuestion.id, body: String(value), //@ts-ignore qid: settings.qid }) - + updateAnswer(currentQuestion.id, String(value)) - + } catch (e) { enqueueSnackbar("ответ не был засчитан") } }} - sx={{ height: "50px", + sx={{ + height: "50px", gap: isMobile ? undefined : "15px", justifyContent: isMobile ? "space-between" : undefined, width: isMobile ? "100%" : undefined @@ -123,9 +119,24 @@ export const Rating = ({ currentQuestion }: RatingProps) => { emptyIcon={form?.icon("#9A9AAF")} /> - - {currentQuestion.content.ratingPositiveDescription} - + + + {currentQuestion.content.ratingNegativeDescription} + + + {currentQuestion.content.ratingPositiveDescription} + + ); diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx index 7629802..1493515 100644 --- a/src/pages/ViewPublicationPage/questions/Variant.tsx +++ b/src/pages/ViewPublicationPage/questions/Variant.tsx @@ -145,16 +145,19 @@ const VariantItem = ({ color: theme.palette.text.primary, padding: "15px", border: `1px solid`, - borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", - backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default, + borderColor: + answer === variant.id ? theme.palette.primary.main : "#9A9AAF", + backgroundColor: mode[settings.cfg.theme] + ? "white" + : theme.palette.background.default, display: "flex", maxWidth: "685px", + maxHeight: "85px", justifyContent: "space-between", width: "100%", "&.MuiFormControl-root": { width: "100%", - - } + }, }} value={index} labelPlacement="start" diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx index 6692107..9ca0c34 100644 --- a/src/pages/ViewPublicationPage/questions/Varimg.tsx +++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx @@ -143,18 +143,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { color: "#9A9AAF" }} > - { - answer ? - - : - (variant?.extendedText || isMobile ? ("Выберите вариант ответа ниже") : ("Выберите вариант ответа слева")) - } + ) : variant?.extendedText || isMobile ? ( + "Выберите вариант ответа ниже" + ) : ( + "Выберите вариант ответа слева" + )} {/* )} */} diff --git a/src/pages/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx b/src/pages/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx index 677690e..26d3864 100644 --- a/src/pages/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx +++ b/src/pages/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx @@ -1,37 +1,49 @@ import { Box, SxProps } from "@mui/material"; - - interface Props { - videoUrl: string; - containerSX?: SxProps; + videoUrl: string; + containerSX?: SxProps; } export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) { - const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi; - const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1]; - if (!videoId) return null; + const extractYoutubeVideoId = + /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi; + const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1]; + // if (!videoId) return null; - const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`; - - return ( - -