From a900035409dc89a84d301b9c78e89af1811204ec Mon Sep 17 00:00:00 2001 From: Nastya Date: Mon, 6 May 2024 01:07:15 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=92=D0=9F=20=D0=AF=D0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/components/QuizAnswerer.tsx | 24 +++ .../ContactForm/ContactForm.tsx | 148 ++++++++----- .../ContactForm/Inputs/Inputs.tsx | 1 - .../ViewPublicationPage/ResultForm.tsx | 32 ++- .../StartPageViewPublication/index.tsx | 200 ++++++++++++------ .../ViewPublicationPage.tsx | 1 + .../questions/File/UploadFile.tsx | 5 +- .../questions/Variant/VariantItem.tsx | 6 +- lib/utils/hooks/useQuestionFlowControl.ts | 21 ++ 9 files changed, 302 insertions(+), 136 deletions(-) diff --git a/lib/components/QuizAnswerer.tsx b/lib/components/QuizAnswerer.tsx index 50c703c..0a98d9a 100644 --- a/lib/components/QuizAnswerer.tsx +++ b/lib/components/QuizAnswerer.tsx @@ -43,6 +43,30 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico refreshInterval: 0, }); + + useEffect(() => { + setTimeout(() => { + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && quizSettings?.settings.cfg.yandexMetricNumber !== undefined) { + YM( + quizSettings.settings.cfg.yandexMetricNumber, + "reachGoal", + "penaquiz-start" + ); + }; + if (VP !== undefined && quizSettings?.settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: quizSettings.settings.cfg.vkMetricNumber, + goal: "penaquiz-start" + }); + }; + }, 4000) + }, []) + useLayoutEffect(() => { if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); }, []); diff --git a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx index 2fdc158..2344a62 100644 --- a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx @@ -1,25 +1,25 @@ -import {useEffect, useRef, useState,} from "react"; -import {Box, Button, Link, Typography, useTheme,} from "@mui/material"; +import { useEffect, useRef, useState, } from "react"; +import { Box, Button, Link, Typography, useTheme, } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx"; -import {DESIGN_LIST} from "@utils/designList.ts"; -import {sendFC, SendFCParams} from "@api/quizRelase.ts"; -import {useQuizData} from "@contexts/QuizDataContext.ts"; -import {NameplateLogo} from "@icons/NameplateLogo.tsx"; -import {QuizQuestionResult} from "@model/questionTypes/result.ts"; -import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts"; -import {quizThemes} from "@utils/themes/Publication/themePublication.ts"; -import {enqueueSnackbar} from "notistack"; -import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts"; +import { DESIGN_LIST } from "@utils/designList.ts"; +import { sendFC, SendFCParams } from "@api/quizRelase.ts"; +import { useQuizData } from "@contexts/QuizDataContext.ts"; +import { NameplateLogo } from "@icons/NameplateLogo.tsx"; +import { QuizQuestionResult } from "@model/questionTypes/result.ts"; +import { AnyTypedQuizQuestion } from "@model/questionTypes/shared.ts"; +import { quizThemes } from "@utils/themes/Publication/themePublication.ts"; +import { enqueueSnackbar } from "notistack"; +import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts"; import { - FormContactFieldData, - FormContactFieldName, + FormContactFieldData, + FormContactFieldName, } from "@model/settingsData.ts"; import { - Inputs + Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx"; -import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx"; +import { EMAIL_REGEXP } from "@utils/emailRegexp.tsx"; type Props = { @@ -60,18 +60,18 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { currentQuestion.type === "result" ? currentQuestion : questions.find((question): question is QuizQuestionResult => { - if (settings?.cfg.haveRoot) { - return ( - question.type === "result" && - question.content.rule.parentId === currentQuestion.content.id - ); - } else { - return ( - question.type === "result" && - question.content.rule.parentId === "line" - ); - } - }); + if (settings?.cfg.haveRoot) { + return ( + question.type === "result" && + question.content.rule.parentId === currentQuestion.content.id + ); + } else { + return ( + question.type === "result" && + question.content.rule.parentId === "line" + ); + } + }); if (!resultQuestion) throw new Error("Result question not found"); @@ -141,7 +141,25 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { const sessions = JSON.parse(localStorage.getItem("sessions") || "{}"); sessions[quizId] = Date.now(); localStorage.setItem("sessions", JSON.stringify(sessions)); - enqueueSnackbar("Данные успешно отправлены"); + + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + "penaquiz-contacts" + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: "penaquiz-contacts" + }); + }; } catch (e) { enqueueSnackbar("повторите попытку позже"); } @@ -152,6 +170,26 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { setFire(false); } + useEffect(() => { + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + "penaquiz-form" + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: "penaquiz-form" + }); + }; + }, []) return ( { settings.cfg.design && !isMobile ? quizThemes[settings.cfg.theme].isLight ? `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, }} > @@ -290,7 +327,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { }} checked={ready} colorIcon={theme.palette.primary.main} - sx={{marginRight: "0"}} + sx={{ marginRight: "0" }} /> С  @@ -308,35 +345,34 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {  ознакомлен - { - // resultQuestion && - // settings.cfg.resultInfo.when === "after" && - - } + }} + > + {settings.cfg.formContact?.button || "Получить результаты"} + + } {show_badge && ( { const { settings } = useQuizData(); -console.log('phone',phone) const FC = settings.cfg.formContact.fields; if (!FC) return null; diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx index 68169ca..61b672d 100644 --- a/lib/components/ViewPublicationPage/ResultForm.tsx +++ b/lib/components/ViewPublicationPage/ResultForm.tsx @@ -9,6 +9,7 @@ import { useRootContainerSize } from "../../contexts/RootContainerWidthContext"; import type { QuizQuestionResult } from "../../model/questionTypes/result"; import { useQuizViewStore } from "@/stores/quizView"; import { DESIGN_LIST } from "@/utils/designList"; +import { useEffect } from "react"; type ResultFormProps = { resultQuestion: QuizQuestionResult; @@ -23,7 +24,27 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => { (state) => state.setCurrentQuizStep ); const spec = settings.cfg.spec; - console.log(quizThemes[settings.cfg.theme].isLight); + + useEffect(() => { + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + `penaquiz-result-{${resultQuestion.id}}` + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: `penaquiz-result-{${resultQuestion.id}}` + }); + }; + }, []) return ( { { p: (settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score) || - (settings.cfg.resultInfo.showResultForm === "after" && - resultQuestion.content.redirect) + (settings.cfg.resultInfo.showResultForm === "after" && + resultQuestion.content.redirect) ? "20px" : "0", }} diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx index e543897..0b1a9b2 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx @@ -8,18 +8,18 @@ import { useTheme, } from "@mui/material"; -import {QuizPreviewLayoutByType} from "./QuizPreviewLayoutByType"; +import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType"; import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe"; -import {useQuizData} from "@contexts/QuizDataContext"; -import {useRootContainerSize} from "@contexts/RootContainerWidthContext"; +import { useQuizData } from "@contexts/QuizDataContext"; +import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; -import {useUADevice} from "@utils/hooks/useUADevice"; -import {quizThemes} from "@utils/themes/Publication/themePublication"; +import { useUADevice } from "@utils/hooks/useUADevice"; +import { quizThemes } from "@utils/themes/Publication/themePublication"; -import {NameplateLogo} from "@icons/NameplateLogo"; -import {useQuizViewStore} from "@/stores/quizView"; -import {DESIGN_LIST} from "@/utils/designList"; +import { NameplateLogo } from "@icons/NameplateLogo"; +import { useQuizViewStore } from "@/stores/quizView"; +import { DESIGN_LIST } from "@/utils/designList"; export const StartPageViewPublication = () => { const theme = useTheme(); @@ -30,9 +30,27 @@ export const StartPageViewPublication = () => { const size = useRootContainerSize(); const isMobile = size < 700; const isTablet = size >= 700 && size < 1100; - + console.log(settings) const handleCopyNumber = () => { navigator.clipboard.writeText(settings.cfg.info.phonenumber); + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + "penaquiz-phone" + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: "penaquiz-phone" + }); + }; }; const background = @@ -93,18 +111,18 @@ export const StartPageViewPublication = () => { sx={{ display: "flex", alignItems: "center", - flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap", - gap: isMobile? "20px" : "30px", - mb: settings.cfg.startpageType === "centered" ? isMobile? "20px" : "25px" : settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" &&!isMobile ? 0 : "7px", - justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile? "center" : undefined + flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "nowrap" : "wrap", + gap: isMobile ? "20px" : "30px", + mb: settings.cfg.startpageType === "centered" ? isMobile ? "20px" : "25px" : settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? 0 : "7px", + justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "center" : undefined }} > {settings.cfg.startpage.logo && { settings.cfg.startpageType === "expanded" ? "white" : theme.palette.text.primary, - wordBreak: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "normal" : "break-word", + wordBreak: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "normal" : "break-word", }} > {settings.cfg.info.orgname} @@ -126,46 +144,46 @@ export const StartPageViewPublication = () => { ) const PenaBadge = ( - + - - {/**/} - {/* Сделано на PenaQuiz*/} - {/**/} - ) + /> + {/**/} + {/* Сделано на PenaQuiz*/} + {/**/} + ) const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length; @@ -178,8 +196,8 @@ export const StartPageViewPublication = () => { width: "100%", background: settings.cfg.startpageType === "expanded" - ? settings.cfg.startpage.position === "left" || isMobile && settings.cfg.startpage.position === "right" - ? "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" + ? settings.cfg.startpage.position === "left" || isMobile && settings.cfg.startpage.position === "right" + ? "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" : settings.cfg.startpage.position === "center" ? "linear-gradient(0deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" : "linear-gradient(-90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" @@ -197,7 +215,7 @@ export const StartPageViewPublication = () => { sx={{ display: "flex", flexDirection: "column", - justifyContent: settings.cfg.startpageType === "standard" && isMobile? "start" : "center", + justifyContent: settings.cfg.startpageType === "standard" && isMobile ? "start" : "center", flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1, alignItems: settings.cfg.startpageType === "centered" @@ -208,7 +226,7 @@ export const StartPageViewPublication = () => { : "start" : "start", marginTop: settings.cfg.startpageType === "centered" ? "30px" : isMobile ? "0px" : "5px", - maxWidth: isMobile? "100%" : settings.cfg.startpageType === "centered" ? "700px" : isTablet && settings.cfg.startpageType !== "expanded" && settings.cfg.startpage.position !== "center" ? "380px" : "531px", + maxWidth: isMobile ? "100%" : settings.cfg.startpageType === "centered" ? "700px" : isTablet && settings.cfg.startpageType !== "expanded" && settings.cfg.startpage.position !== "center" ? "380px" : "531px", }} > { background: theme.palette.primary.main, borderRadius: "12px", }} - onClick={() => setCurrentQuizStep("question")} + onClick={() => { + setCurrentQuizStep("question") + + + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + "penaquiz-startquiz" + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: "penaquiz-startquiz" + }); + }; + }} > {settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button @@ -287,21 +327,48 @@ export const StartPageViewPublication = () => { ? 0 : 1 : 0, - gap: isMobile? "30px" : "40px", + gap: isMobile ? "30px" : "40px", alignItems: "flex-end", - justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile || settings.cfg.startpageType === "centered" && isMobile ? "center" : "space-between", + justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile || settings.cfg.startpageType === "centered" && isMobile ? "center" : "space-between", width: "100%", flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? isMobile ? "wrap-reverse" : "nowrap" : "wrap", }} > {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile && quizHeaderBlock} - + order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "2" : "0" + }}> {settings.cfg.info.site && ( - { + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + await YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + "penaquiz-email" + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + await VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: "penaquiz-email" + }); + }; + location.href = ( + settings.cfg.info.site.includes("https") + ? settings.cfg.info.site + : `https://${settings.cfg.info.site}` + ).replace(/\s+/g, '') + }} > { > {settings.cfg.info.site} - + + )} {settings.cfg.info.clickable ? ( isMobileDevice ? ( diff --git a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx index 571c372..8e3716f 100644 --- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx +++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx @@ -75,6 +75,7 @@ export default function ViewPublicationPage() { ); + let quizStepElement: ReactElement; switch (currentQuizStep) { case "startpage": { diff --git a/lib/components/ViewPublicationPage/questions/File/UploadFile.tsx b/lib/components/ViewPublicationPage/questions/File/UploadFile.tsx index 3951574..288b75a 100644 --- a/lib/components/ViewPublicationPage/questions/File/UploadFile.tsx +++ b/lib/components/ViewPublicationPage/questions/File/UploadFile.tsx @@ -47,8 +47,6 @@ export const UploadFile = ({ const uploadFile = async (file: File | undefined) => { if (isSending) return; if (!file) return; - console.log(file.size); - console.log(MAX_FILE_SIZE); if (file.size > MAX_FILE_SIZE) return setModalWarningType("errorSize"); const isFileTypeAccepted = ACCEPT_SEND_FILE_TYPES_MAP[ @@ -68,7 +66,6 @@ export const UploadFile = ({ }, qid: quizId, }); - console.log(data); await sendAnswer({ questionId: currentQuestion.id, @@ -85,7 +82,7 @@ export const UploadFile = ({ 0 ); } catch (error) { - console.log(error); + console.error(error); enqueueSnackbar("ответ не был засчитан"); } diff --git a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx index b515286..9f48478 100644 --- a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx +++ b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx @@ -77,7 +77,7 @@ export const VariantItem = ({ currentQuestion.content.variants[index].points || 0 ); } catch (error) { - console.log(error); + console.error(error); enqueueSnackbar("ответ не был засчитан"); } @@ -101,7 +101,7 @@ export const VariantItem = ({ : currentQuestion.content.variants[index].points || 0 ); } catch (error) { - console.log(error); + console.error(error); enqueueSnackbar("ответ не был засчитан"); } @@ -114,7 +114,7 @@ export const VariantItem = ({ preview, }); } catch (error) { - console.log(error); + console.error(error); enqueueSnackbar("ответ не был засчитан"); } deleteAnswer(currentQuestion.id); diff --git a/lib/utils/hooks/useQuestionFlowControl.ts b/lib/utils/hooks/useQuestionFlowControl.ts index ddc7122..472d385 100644 --- a/lib/utils/hooks/useQuestionFlowControl.ts +++ b/lib/utils/hooks/useQuestionFlowControl.ts @@ -17,6 +17,7 @@ export function useQuestionFlowControl() { const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep); const currentQuestion = sortedQuestions.find(question => question.id === currentQuestionId) ?? sortedQuestions[0]; + console.log("currentQuestion", currentQuestion) const linearQuestionIndex = currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled ? sortedQuestions.indexOf(currentQuestion) @@ -149,6 +150,26 @@ export function useQuestionFlowControl() { if (!nextQuestion) throw new Error("Next question not found"); if (nextQuestion.type === "result") return showResult(); + //засчитываем переход с вопроса дальше + + //@ts-ignore + let YM = window?.ym; + //@ts-ignore + let VP = window?._tmr; + if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) { + YM( + settings.cfg.yandexMetricNumber, + "reachGoal", + `penaquiz-step{${currentQuestion.id}}` + ); + }; + if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) { + VP.push({ + type: "reachGoal", + id: settings.cfg.vkMetricNumber, + goal: `penaquiz-step{${currentQuestion.id}}` + }); + }; setCurrentQuestionId(nextQuestion.id); }, [nextQuestion, showResult]);