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

Merge branch 'staging'

Browse Source
This commit is contained in:
Nastya 2024-05-11 02:07:26 +03:00
commit 2b70c92ee8
18 changed files with 2276 additions and 2038 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
lib/components/QuizAnswerer.tsx
View File

@ -1,27 +1,45 @@
import { getQuizData } from "@/api/quizRelase";
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
import { QuizDataContext } from "@contexts/QuizDataContext";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import { QuizSettings } from "@model/settingsData";
import { Box, CssBaseline, ThemeProvider } from "@mui/material";
import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
import {
startTransition,
useEffect,
useLayoutEffect,
useRef,
useState,
} from "react";
import { ErrorBoundary } from "react-error-boundary";
import useSWR from "swr";
import { SnackbarProvider } from "notistack";
import moment from "moment";
import {
Box,
ScopedCssBaseline,
CssBaseline,
ThemeProvider,
} from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { ruRU } from "@mui/x-date-pickers/locales";
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
import { getQuizData } from "@/api/quizRelase";
import { QuizDataContext } from "@contexts/QuizDataContext";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { handleComponentError } from "@utils/handleComponentError";
import lightTheme from "@utils/themes/light";
import moment from "moment";
import { SnackbarProvider } from "notistack";
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import useSWR from "swr";
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
import type { QuizSettings } from "@model/settingsData";
moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
const localeText =
ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
type Props = {
quizSettings?: QuizSettings;
@ -32,49 +50,53 @@ type Props = {
disableGlobalCss?: boolean;
};
function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFaviconAndTitle = true, className, disableGlobalCss = false }: Props) {
function QuizAnswererInner({
quizSettings,
quizId,
preview = false,
changeFaviconAndTitle = true,
className,
disableGlobalCss = false,
}: Props) {
const [quizViewStore] = useState(createQuizViewStore);
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
const [rootContainerWidth, setRootContainerWidth] = useState<number>(
() => window.innerWidth
);
const rootContainerRef = useRef<HTMLDivElement>(null);
const { data, error, isLoading } = useSWR(quizSettings ? null : ["quizData", quizId], params => getQuizData(params[1]), {
const { data, error, isLoading } = useSWR(
quizSettings ? null : ["quizData", quizId],
(params) => getQuizData(params[1]),
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
});
}
);
const vkMetrics = useVkMetricsGoals(
quizSettings?.settings.cfg.vkMetricsNumber
);
const yandexMetrics = useYandexMetricsGoals(
quizSettings?.settings.cfg.yandexMetricsNumber
);
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)
}, [])
vkMetrics.quizOpened();
yandexMetrics.quizOpened();
}, 4000);
}, []);
useLayoutEffect(() => {
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
if (rootContainerRef.current)
setRootContainerWidth(rootContainerRef.current.clientWidth);
}, []);
useEffect(() => {
const handleWindowResize = () => {
startTransition(() => {
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
if (rootContainerRef.current)
setRootContainerWidth(rootContainerRef.current.clientWidth);
});
};
window.addEventListener("resize", handleWindowResize);
@ -90,7 +112,8 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
quizSettings ??= data;
if (!quizSettings) throw new Error("Quiz data is null");
if (quizSettings.questions.length === 0) return <ApologyPage error={new Error("No questions found")} />;
if (quizSettings.questions.length === 0)
return <ApologyPage error={new Error("No questions found")} />;
if (!quizId) return <ApologyPage error={new Error("No quiz id")} />;
const quizContainer = (
@ -115,7 +138,9 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
return (
<QuizViewContext.Provider value={quizViewStore}>
<RootContainerWidthContext.Provider value={rootContainerWidth}>
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
<QuizDataContext.Provider
value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}
>
{disableGlobalCss ? (
<ScopedCssBaseline
sx={{
@ -127,9 +152,7 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
{quizContainer}
</ScopedCssBaseline>
) : (
<CssBaseline>
{quizContainer}
</CssBaseline>
<CssBaseline>{quizContainer}</CssBaseline>
)}
</QuizDataContext.Provider>
</RootContainerWidthContext.Provider>
@ -138,9 +161,12 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
}
export default function QuizAnswerer(props: Props) {
return (
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
<LocalizationProvider
dateAdapter={AdapterMoment}
adapterLocale="ru"
localeText={localeText}
>
<ThemeProvider theme={lightTheme}>
<SnackbarProvider
preventDuplicate={true}

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

@ -1,29 +1,32 @@
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 { enqueueSnackbar } from "notistack";
import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
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 {
import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs";
import { ContactTextBlock } from "./ContactTextBlock";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { sendFC, SendFCParams } from "@api/quizRelase";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { EMAIL_REGEXP } from "@utils/emailRegexp";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@utils/designList";
import { NameplateLogo } from "@icons/NameplateLogo";
import type {
FormContactFieldData,
FormContactFieldName,
} from "@model/settingsData.ts";
import {
Inputs
} from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
import {
ContactTextBlock
} from "@/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx";
} from "@model/settingsData";
import type { QuizQuestionResult } from "@model/questionTypes/result";
import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
type Props = {
currentQuestion: AnyTypedQuizQuestion;
@ -47,6 +50,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const isMobile = useRootContainerSize() < 850;
const isTablet = useRootContainerSize() < 1000;
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
useEffect(() => {
function handleResize() {
setScreenHeight(window.innerHeight);
@ -145,24 +151,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
sessions[quizId] = Date.now();
localStorage.setItem("sessions", JSON.stringify(sessions));
//@ts-ignore
const YM = window?.ym;
//@ts-ignore
const 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"
});
}
vkMetrics.contactsFormFilled();
yandexMetrics.contactsFormFilled();
} catch (e) {
enqueueSnackbar("повторите попытку позже");
}
@ -174,25 +164,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
setFire(false);
}
useEffect(() => {
//@ts-ignore
const YM = window?.ym;
//@ts-ignore
const 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"
});
}
}, [])
vkMetrics.contactsFormOpened();
yandexMetrics.contactsFormOpened();
}, []);
return (
<Box
@ -216,7 +190,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: `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%), url(${DESIGN_LIST[settings.cfg.theme]
: `linear-gradient(90deg, #272626, transparent), url(${
DESIGN_LIST[settings.cfg.theme]
})`
: null,
}}
@ -235,7 +210,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
}}
>
<ContactTextBlock settings={settings} />
<Box sx={{
<Box
sx={{
flexGrow: 0,
display: "flex",
alignItems: "center",
@ -243,14 +219,19 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
flexDirection: "column",
backgroundColor: theme.palette.background.default,
height: "auto",
}}>
}}
>
<Box
sx={{
display: "flex",
alignItems: isMobile ? undefined : "center",
justifyContent: "center",
flexDirection: "column",
p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
p: isMobile
? "0 20px"
: isTablet
? "0px 40px 30px 60px"
: "125px 60px 30px 60px",
}}
>
<Box
@ -258,7 +239,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
display: "flex",
flexDirection: "column",
mt: isMobile ? "10px" : "20px",
mb: "20px"
mb: "20px",
}}
>
<Inputs
@ -289,14 +270,20 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
colorIcon={theme.palette.primary.main}
sx={{ marginRight: "0" }}
/>
<Typography sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }} fontSize={"16px"} >
<Typography
sx={{
color: theme.palette.text.primary,
lineHeight: "18.96px",
}}
fontSize={"16px"}
>
С&ensp;
<Link href={`https://${window.location.hostname.includes("s") ? "s" : ""}hub.pena.digital/ppdd`} target="_blank">
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
Положением об обработке персональных данных{" "}
</Link>
&ensp;и&ensp;
<Link
href={`https://${window.location.hostname.includes("s") ? "s" : ""}hub.pena.digital/docs/privacy`}
href={"https://shub.pena.digital/docs/privacy"}
target="_blank"
>
{" "}
@ -319,7 +306,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
border: "1px solid #9A9AAF",
color: "#9A9AAF",
},
}}
>
{settings.cfg.formContact?.button || "Получить результаты"}
@ -329,13 +315,14 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
<Box
component={Link}
target={"_blank"}
href={`https://${window.location.hostname.includes("s") ? "s" : ""
href={`https://${
window.location.hostname.includes("s") ? "s" : ""
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{
display: "flex",
alignItems: "center",
mt: "55px",
mb: isMobile? "30px": isTablet? "40px" :"50px",
mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
gap: "10px",
textDecoration: "none",
}}
@ -355,4 +342,3 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
</Box>
);
};

0
lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx → lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/index.tsx
View File

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

@ -1,15 +1,21 @@
import { useEffect } from "react";
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
import { NameplateLogo } from "@icons/NameplateLogo";
import { useQuizViewStore } from "@/stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { DESIGN_LIST } from "@/utils/designList";
import { quizThemes } from "@utils/themes/Publication/themePublication";
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 { useQuizViewStore } from "@/stores/quizView";
import { DESIGN_LIST } from "@/utils/designList";
import { useEffect } from "react";
import { NameplateLogo } from "@icons/NameplateLogo";
import type { QuizQuestionResult } from "@/model/questionTypes/result";
type ResultFormProps = {
resultQuestion: QuizQuestionResult;
@ -24,27 +30,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
(state) => state.setCurrentQuizStep
);
const spec = settings.cfg.spec;
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
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}}`
});
};
}, [])
vkMetrics.resultShown(resultQuestion.id);
yandexMetrics.resultShown(resultQuestion.id);
}, []);
return (
<Box
@ -197,7 +189,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Box
component={Link}
target={"_blank"}
href={`https://${window.location.hostname.includes("s") ? "s" : ""
href={`https://${
window.location.hostname.includes("s") ? "s" : ""
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{
display: "flex",
@ -216,7 +209,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
: "#F5F7FF",
}}
/>
</Box>
)}
</Box>

46
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
View File

@ -27,10 +27,10 @@ const StandartLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: LayoutProps) => {
}: LayoutProps) => {
const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100;
const { settings } = useQuizData();
const {settings} = useQuizData();
return (
<Box
@ -49,7 +49,21 @@ const StandartLayout = ({
width: 0,
},
overflowY: "auto",
}}
>
<Box
sx={{
display: "flex",
flexDirection: alignType === "left" ? "row" : "row-reverse",
padding: isTablet ? "15px" : "0",
background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? alignType === 'left'
? "linear-gradient(90deg, #272626, transparent)"
: alignType === 'right'
? "linear-gradient(-90deg, #272626, transparent)"
: "linear-gradient(0deg, #272626, transparent)"
: null,
}}
>
<Box
@ -60,12 +74,8 @@ const StandartLayout = ({
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" ,
p: isTablet ? "25px" : alignType === 'left' ? "25px 25px 25px 35px" : "25px 35px 25px 25px",
overflowY: "auto",
background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)"
: null,
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
width: 0,
@ -76,18 +86,19 @@ const StandartLayout = ({
{quizMainBlock}
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "60%", overflow: "hidden" }}><Box
<Box sx={{width: "60%", overflow: "hidden"}}><Box
sx={{
width: "100%",
height: "100%",
padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
padding: alignType === "left" ? "25px 25px 25px 15px" : "25px 15px 25px 25px",
display: "flex",
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
"& > img": {width: "100%", borderRadius: "12px"},
}}
>{backgroundBlock}</Box></Box>
)}
</Box>
</Box>
);
};
@ -96,7 +107,7 @@ const ExpandedLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: LayoutProps) => {
}: LayoutProps) => {
const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100;
return (
@ -174,9 +185,9 @@ const CenteredLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: LayoutProps) => {
}: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100;
const { settings } = useQuizData();
const {settings} = useQuizData();
return (
<Box
sx={{
@ -188,9 +199,8 @@ const CenteredLayout = ({
height: "100%",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
width: 0,
@ -207,7 +217,7 @@ const CenteredLayout = ({
height: isTablet ? "530px" : "306px",
display: "flex",
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
"& > img": {width: "100%", borderRadius: "12px"},
}}
>
{backgroundBlock}
@ -224,7 +234,7 @@ export const StartPageDesktop = ({
backgroundBlock,
startpageType,
alignType,
}: StartPageDesktopProps) => {
}: StartPageDesktopProps) => {
switch (startpageType) {
case null:
case "standard": {

30
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
View File

@ -21,8 +21,8 @@ const StandartMobileLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: MobileLayoutProps) => {
const { settings } = useQuizData();
}: MobileLayoutProps) => {
const {settings} = useQuizData();
return (
<Box
@ -33,7 +33,7 @@ const StandartMobileLayout = ({
justifyContent: "flex-end",
minHeight: "100%",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
"&::-webkit-scrollbar": {width: 0},
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
@ -69,14 +69,17 @@ const StandartMobileLayout = ({
{quizHeaderBlock}
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "100%", overflow: "hidden" }}>
<Box sx={{width: "100%", overflow: "hidden"}}>
<Box
sx={{
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
"& > img": {
width: "100%",
borderRadius: "12px"
},
}}
>
{backgroundBlock}
@ -105,7 +108,7 @@ const ExpandedMobileLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: MobileLayoutProps) => (
}: MobileLayoutProps) => (
<Box
sx={{
display: "flex",
@ -114,7 +117,7 @@ const ExpandedMobileLayout = ({
justifyContent: "flex-end",
minHeight: "100%",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
"&::-webkit-scrollbar": {width: 0},
}}
>
<Box
@ -129,8 +132,8 @@ const ExpandedMobileLayout = ({
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": { width: "4px" },
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
"&::-webkit-scrollbar": {width: "4px"},
"&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
}}
>
<Box
@ -173,7 +176,7 @@ const CenteredMobileLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: MobileLayoutProps) => {
}: MobileLayoutProps) => {
const {settings} = useQuizData();
return (
<Box
@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
height: "100%",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
"&::-webkit-scrollbar": {width: 0},
}}
>
@ -242,7 +244,7 @@ export const StartPageMobile = ({
quizMainBlock,
backgroundBlock,
startpageType,
}: StartPageMobileProps) => {
}: StartPageMobileProps) => {
switch (startpageType) {
case null:
case "standard": {

327
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -8,49 +8,43 @@ import {
useTheme,
} from "@mui/material";
import {QuizPreviewLayoutByType} from "./QuizPreviewLayoutByType";
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
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 { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
import {useQuizData} from "@contexts/QuizDataContext";
import {useRootContainerSize} from "@contexts/RootContainerWidthContext";
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";
export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings, show_badge, quizId, questions } = useQuizData();
const { isMobileDevice } = useUADevice();
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
const setCurrentQuizStep = useQuizViewStore(
(state) => state.setCurrentQuizStep
);
const size = useRootContainerSize();
const isMobile = size < 700;
const isTablet = size >= 700 && size < 1100;
console.log(settings)
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
//@ts-ignore
const YM = window?.ym;
//@ts-ignore
const 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"
});
}
vkMetrics.phoneNumberOpened();
yandexMetrics.phoneNumberOpened();
};
const background =
@ -101,23 +95,41 @@ export const StartPageViewPublication = () => {
) : null
) : null;
const quizHeaderBlock = (<Box
const quizHeaderBlock = (
<Box
sx={{
margin:
settings.cfg.startpageType === "centered" ? "0 auto" : null,
margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "nowrap" : "wrap",
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
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.startpage.logo && (
<img
src={settings.cfg.startpage.logo}
style={{
@ -127,7 +139,7 @@ export const StartPageViewPublication = () => {
}}
alt=""
/>
}
)}
<Typography
sx={{
fontSize: "12px",
@ -135,27 +147,38 @@ export const StartPageViewPublication = () => {
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}
</Typography>
</Box>
</Box>)
</Box>
);
const PenaBadge = (
<Box
component={Link}
target={"_blank"}
href={
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
}
href={`https://${
window.location.hostname.includes("s") ? "s" : ""
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{
display: "flex",
alignItems: "center",
gap: "7px",
textDecoration: "none",
marginLeft: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isTablet && !isMobile ? "61px" : undefined
marginLeft:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isTablet &&
!isMobile
? "61px"
: undefined,
}}
>
<NameplateLogo
@ -183,9 +206,30 @@ export const StartPageViewPublication = () => {
{/*>*/}
{/* Сделано на PenaQuiz*/}
{/*</Typography>*/}
</Box>)
</Box>
);
const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
const realQuestionsCount = questions.filter(
(question) => question.type !== null && question.type !== "result"
).length;
const onQuizStart = () => {
setCurrentQuizStep("question");
vkMetrics.firstPageOpened();
yandexMetrics.firstPageOpened();
};
const onSiteClick = () => {
vkMetrics.emailOpened();
yandexMetrics.emailOpened();
location.href = (
settings.cfg.info.site.includes("https")
? settings.cfg.info.site
: `https://${settings.cfg.info.site}`
).replace(/\s+/g, "");
};
return (
<Paper
@ -196,7 +240,8 @@ export const StartPageViewPublication = () => {
width: "100%",
background:
settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "left" || isMobile && settings.cfg.startpage.position === "right"
? 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%)"
@ -207,16 +252,19 @@ export const StartPageViewPublication = () => {
}}
>
<QuizPreviewLayoutByType
quizHeaderBlock={quizHeaderBlock
}
quizHeaderBlock={quizHeaderBlock}
quizMainBlock={
<>
<Box
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,
wordBreak: "break-word",
alignItems:
settings.cfg.startpageType === "centered"
? "center"
@ -225,8 +273,21 @@ export const StartPageViewPublication = () => {
? "center"
: "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",
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",
}}
>
<Typography
@ -287,36 +348,13 @@ export const StartPageViewPublication = () => {
background: theme.palette.primary.main,
borderRadius: "12px",
}}
onClick={() => {
setCurrentQuizStep("question")
//@ts-ignore
const YM = window?.ym;
//@ts-ignore
const 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"
});
}
}}
onClick={onQuizStart}
>
{settings.cfg.startpage.button.trim()
? settings.cfg.startpage.button
: "Пройти тест"}
</Button>
</Box>
</Box>
<Box
sx={{
@ -329,53 +367,74 @@ export const StartPageViewPublication = () => {
: 0,
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",
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}
<Box sx={{
{settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isMobile &&
quizHeaderBlock}
<Box
sx={{
maxWidth: "300px",
display: settings.cfg.startpageType === "centered" && isMobile || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "flex" : "block",
display:
(settings.cfg.startpageType === "centered" && isMobile) ||
(settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
isMobile)
? "flex"
: "block",
flexDirection: "column",
alignItems: "center",
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "2" : "0"
}}>
order:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center"
? "2"
: "0",
}}
>
{settings.cfg.info.site && (
<ButtonBase
sx={{ display:"block",marginLeft: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "auto" : undefined,}}
onClick={async () => {
//@ts-ignore
const YM = window?.ym;
//@ts-ignore
const 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, '')
onClick={onSiteClick}
sx={{
display: "block",
width: "100%",
marginTop: "10px",
marginLeft:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isMobile
? "auto"
: undefined,
}}
>
<Typography
sx={{
lineHeight: "19px",
fontSize: "16px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "end" : "none",
textAlign:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isMobile
? "end" : settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
isMobile || settings.cfg.startpageType === "centered" &&
isMobile ? "center"
: "start",
color: theme.palette.primary.main,
overflow: "hidden",
textOverflow: "ellipsis",
@ -385,7 +444,6 @@ export const StartPageViewPublication = () => {
{settings.cfg.info.site}
</Typography>
</ButtonBase>
)}
{settings.cfg.info.clickable ? (
isMobileDevice ? (
@ -393,7 +451,11 @@ export const StartPageViewPublication = () => {
<Typography
sx={{
lineHeight: "19px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
textAlign:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center"
? "end"
: "none",
fontSize: "16px",
color:
settings.cfg.startpageType === "expanded"
@ -405,13 +467,26 @@ export const StartPageViewPublication = () => {
</Typography>
</Link>
) : (
<ButtonBase sx={{ display:"block", marginTop:"10px",
marginLeft: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "auto" : undefined,
<ButtonBase
onClick={handleCopyNumber}
sx={{
display: "block",
marginTop: "10px",
marginLeft:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isMobile
? "auto"
: undefined,
}}
onClick={handleCopyNumber} >
>
<Typography
sx={{
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
textAlign:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center"
? "end"
: "none",
fontSize: "16px",
lineHeight: "19px",
color:
@ -428,7 +503,11 @@ export const StartPageViewPublication = () => {
<Typography
sx={{
lineHeight: "19px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
textAlign:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center"
? "end"
: "none",
fontSize: "16px",
marginTop: "10px",
color:
@ -440,13 +519,25 @@ export const StartPageViewPublication = () => {
{settings.cfg.info.phonenumber}
</Typography>
)}
<Typography
sx={{
lineHeight: "14px",
width: "100%",
overflowWrap: "break-word",
fontSize: "12px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "end" : settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile || settings.cfg.startpageType === "centered" && isMobile ? "center" : "none",
textAlign:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isMobile
? "end"
: (settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
isMobile) ||
(settings.cfg.startpageType === "centered" &&
isMobile)
? "center"
: "none",
maxHeight: "120px",
overflow: "auto",
marginTop: "10px",

37
lib/components/ViewPublicationPage/ViewPublicationPage.tsx
View File

@ -1,23 +1,21 @@
import {sendAnswer} from "@api/quizRelase";
import {useQuizData} from "@contexts/QuizDataContext";
import {ThemeProvider, Typography} from "@mui/material";
import {useQuizViewStore} from "@stores/quizView";
import {useQuestionFlowControl} from "@utils/hooks/useQuestionFlowControl";
import {notReachable} from "@utils/notReachable";
import {quizThemes} from "@utils/themes/Publication/themePublication";
import {enqueueSnackbar} from "notistack";
import {ReactElement, useEffect} from "react";
import {Question} from "./Question";
import {ResultForm} from "./ResultForm";
import {StartPageViewPublication} from "./StartPageViewPublication";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { ThemeProvider, Typography } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { ReactElement, useEffect } from "react";
import { Question } from "./Question";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
import NextButton from "./tools/NextButton";
import PrevButton from "./tools/PrevButton";
import QuestionSelect from "./QuestionSelect";
import {useYandexMetrics} from "@/utils/hooks/useYandexMetrics";
import {useVKMetrics} from "@/utils/hooks/useVKMetrics";
import {
ContactForm
} from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
import { useYandexMetrics } from "@/utils/hooks/metrics/useYandexMetrics";
import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
export default function ViewPublicationPage() {
const {
@ -39,8 +37,8 @@ export default function ViewPublicationPage() {
showResultAfterContactForm,
setQuestion,
} = useQuestionFlowControl();
useYandexMetrics(settings?.cfg?.yandexMetricNumber);
useVKMetrics(settings?.cfg?.vkMetricNumber);
useYandexMetrics(settings?.cfg?.yandexMetricsNumber);
useVKMetrics(settings?.cfg?.vkMetricsNumber);
const isAnswer = answers.some(
(ans) => ans.questionId === currentQuestion?.id
@ -75,7 +73,6 @@ export default function ViewPublicationPage() {
</ThemeProvider>
);
let quizStepElement: ReactElement;
switch (currentQuizStep) {
case "startpage": {

8
lib/model/metrics.ts Normal file
View File

@ -0,0 +1,8 @@
export type MetricsMessengers =
| "telegram"
| "viber"
| "whatsapp"
| "vkontakte"
| "messenger"
| "skype"
| "instagram";

4
lib/model/settingsData.ts
View File

@ -110,8 +110,8 @@ export interface QuizConfig {
law?: string;
};
meta: string;
yandexMetricNumber: number | undefined;
vkMetricNumber: number | undefined;
yandexMetricsNumber: number | undefined;
vkMetricsNumber: number | undefined;
}
export type FormContactFieldName =

0
lib/utils/emailRegexp.tsx → lib/utils/emailRegexp.ts
View File

14
lib/utils/hooks/useVKMetrics.ts → lib/utils/hooks/metrics/useVKMetrics.ts
View File

@ -1,17 +1,17 @@
import { useEffect } from "react";
export const useVKMetrics = (vkMetricNumber: number | undefined) => {
export const useVKMetrics = (vkMetricsNumber: number | undefined) => {
useEffect(() => {
if (
vkMetricNumber &&
typeof vkMetricNumber === "number" &&
!Number.isNaN(vkMetricNumber)
vkMetricsNumber &&
typeof vkMetricsNumber === "number" &&
!Number.isNaN(vkMetricsNumber)
) {
const script = document.createElement("script");
script.type = "text/javascript";
script.innerHTML = `
var _tmr = window._tmr || (window._tmr = []);
_tmr.push({id: "${vkMetricNumber}", type: "pageView", start: (new Date()).getTime()});
_tmr.push({id: "${vkMetricsNumber}", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
if (d.getElementById(id)) return;
var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
@ -23,8 +23,8 @@ export const useVKMetrics = (vkMetricNumber: number | undefined) => {
document.body.appendChild(script);
const noscript = document.createElement("noscript");
noscript.innerHTML = `<div><img src="https://top-fwz1.mail.ru/counter?id=${vkMetricNumber};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
noscript.innerHTML = `<div><img src="https://top-fwz1.mail.ru/counter?id=${vkMetricsNumber};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
document.body.appendChild(noscript);
}
}, [vkMetricNumber]);
}, [vkMetricsNumber]);
};

36
lib/utils/hooks/useVkMetricGoals.ts → lib/utils/hooks/metrics/useVkMetricsGoals.ts
View File

@ -1,25 +1,16 @@
import { useEffect, useState } from "react";
import type { MetricsMessengers } from "@model/metrics";
type VkMetric = {
type MetricsGoal = {
type: "reachGoal";
id: number;
goal: string;
};
type ExtendedWindow = Window & { _tmp?: VkMetric[] };
type Messenger =
| "telegram"
| "viber"
| "whatsapp"
| "vkontakte"
| "messenger"
| "skype"
| "instagram";
type ExtendedWindow = Window & { _tmr?: MetricsGoal[] };
const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
if (vkPixelId) {
(window as ExtendedWindow)._tmp?.push({
(window as ExtendedWindow)._tmr?.push({
type: "reachGoal",
id: vkPixelId,
goal,
@ -27,15 +18,7 @@ const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
}
};
export const useVkMetricGoals = (vkPixelId: number | undefined) => {
const [vkId, setVkId] = useState<number | undefined>(undefined);
useEffect(() => {
if (vkPixelId) {
setVkId(vkPixelId);
}
}, [vkPixelId]);
export const useVkMetricsGoals = (vkId: number | undefined) => {
return {
// Посетитель открыл квиз
quizOpened: () => sendMetrics(vkId, "penaquiz-start"),
@ -46,16 +29,17 @@ export const useVkMetricGoals = (vkPixelId: number | undefined) => {
// Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultShown: (resultId: string) => sendMetrics(vkId, `penaquiz-result-${resultId}`),
resultShown: (resultId: string) =>
sendMetrics(vkId, `penaquiz-result-${resultId}`),
// Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
// Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
// Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: Messenger) =>
sendMetrics(vkId, `marquiz-messengers-${messenger}`),
messengerRequestSended: (messenger: MetricsMessengers) =>
sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос
questionPassed: (questionId: string) =>
sendMetrics(vkId, `marquiz-step${questionId}`),
sendMetrics(vkId, `penaquiz-step${questionId}`),
};
};

14
lib/utils/hooks/useYandexMetrics.ts → lib/utils/hooks/metrics/useYandexMetrics.ts
View File

@ -1,11 +1,11 @@
import { useEffect } from "react";
export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
export const useYandexMetrics = (yandexMetricsNumber: number | undefined) => {
useEffect(() => {
if (
yandexMetricNumber &&
typeof yandexMetricNumber === "number" &&
!Number.isNaN(yandexMetricNumber)
yandexMetricsNumber &&
typeof yandexMetricsNumber === "number" &&
!Number.isNaN(yandexMetricsNumber)
) {
const script = document.createElement("script");
script.type = "text/javascript";
@ -16,7 +16,7 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(${yandexMetricNumber}, "init", {
ym(${yandexMetricsNumber}, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
@ -27,8 +27,8 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
document.body.appendChild(script);
const noscript = document.createElement("noscript");
noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricsNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
document.body.appendChild(noscript);
}
}, [yandexMetricNumber]);
}, [yandexMetricsNumber]);
};

37
lib/utils/hooks/metrics/useYandexMetricsGoals.ts Normal file
View File

@ -0,0 +1,37 @@
import type { MetricsMessengers } from "@model/metrics";
type ExtendedWindow = Window & {
ym?: (id: number, type: string, goal: string) => void;
};
const sendMetrics = (yandexMetricsId: number | undefined, goal: string) => {
if (yandexMetricsId) {
(window as ExtendedWindow).ym?.(yandexMetricsId, "reachGoal", goal);
}
};
export const useYandexMetricsGoals = (id: number | undefined) => {
return {
// Посетитель открыл квиз
quizOpened: () => sendMetrics(id, "penaquiz-start"),
// Посетитель нажал на кнопку стартовой страницы
firstPageOpened: () => sendMetrics(id, "penaquiz-startquiz"),
// Посетитель кликнул по номеру телефона на стартовой странице
phoneNumberOpened: () => sendMetrics(id, "penaquiz-phone"),
// Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(id, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultShown: (resultId: string) =>
sendMetrics(id, `penaquiz-result-${resultId}`),
// Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(id, "penaquiz-form"),
// Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(id, "penaquiz-contacts"),
// Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: MetricsMessengers) =>
sendMetrics(id, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос
questionPassed: (questionId: string) =>
sendMetrics(id, `penaquiz-step${questionId}`),
};
};

181
lib/utils/hooks/useQuestionFlowControl.ts
View File

@ -1,25 +1,39 @@
import { useQuizViewStore } from "@stores/quizView";
import { useCallback, useDebugValue, useMemo, useState } from "react";
import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData";
import moment from "moment";
import { useQuizData } from "@contexts/QuizDataContext";
import { enqueueSnackbar } from "notistack";
import moment from "moment";
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizViewStore } from "@stores/quizView";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
export function useQuestionFlowControl() {
const { settings, questions } = useQuizData();
const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page);
}, [questions]);
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId);
const answers = useQuizViewStore(state => state.answers);
const pointsSum = useQuizViewStore(state => state.pointsSum);
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(
getFirstQuestionId
);
const answers = useQuizViewStore((state) => state.answers);
const pointsSum = useQuizViewStore((state) => state.pointsSum);
const setCurrentQuizStep = useQuizViewStore(
(state) => state.setCurrentQuizStep
);
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
const currentQuestion = sortedQuestions.find(question => question.id === currentQuestionId) ?? sortedQuestions[0];
console.log("currentQuestion", currentQuestion)
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
const linearQuestionIndex =
currentQuestion &&
sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
? sortedQuestions.indexOf(currentQuestion)
: null;
@ -28,7 +42,9 @@ export function useQuestionFlowControl() {
if (settings.cfg.haveRoot) {
const nextQuestion = sortedQuestions.find(
question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
(question) =>
question.id === settings.cfg.haveRoot ||
question.content.id === settings.cfg.haveRoot
);
if (!nextQuestion) return null;
@ -39,19 +55,28 @@ export function useQuestionFlowControl() {
}
const nextQuestionIdPointsLogic = useCallback(() => {
return sortedQuestions.find(question =>
return sortedQuestions.find(
(question) =>
question.type === "result" && question.content.rule.parentId === "line"
);
}, [sortedQuestions]);
const nextQuestionIdMainLogic = useCallback(() => {
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
const questionAnswer = answers.find(
({ questionId }) => questionId === currentQuestion.id
);
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
const userAnswers = Array.isArray(questionAnswer.answer)
? questionAnswer.answer
: [questionAnswer.answer];
for (const branchingRule of currentQuestion.content.rule.main) {
if (userAnswers.some(answer => branchingRule.rules[0].answers.includes(answer))) {
if (
userAnswers.some((answer) =>
branchingRule.rules[0].answers.includes(answer)
)
) {
return branchingRule.next;
}
}
@ -59,18 +84,23 @@ export function useQuestionFlowControl() {
if (!currentQuestion.required) {
const defaultNextQuestionId = currentQuestion.content.rule.default;
if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId;
if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ")
return defaultNextQuestionId;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
//Кинуть на ребёнка надо даже если там нет дефолта
if (
["date", "page", "text", "number"].includes(currentQuestion.type)
&& currentQuestion.content.rule.children.length === 1
) return currentQuestion.content.rule.children[0];
["date", "page", "text", "number"].includes(currentQuestion.type) &&
currentQuestion.content.rule.children.length === 1
)
return currentQuestion.content.rule.children[0];
}
//ничё не нашли, ищем резулт
return sortedQuestions.find(q => {
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
return sortedQuestions.find((q) => {
return (
q.type === "result" &&
q.content.rule.parentId === currentQuestion.content.id
);
})?.id;
}, [answers, currentQuestion, sortedQuestions]);
@ -81,19 +111,26 @@ export function useQuestionFlowControl() {
return nextQuestionIdMainLogic();
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score]);
const prevQuestion = linearQuestionIndex !== null
const prevQuestion =
linearQuestionIndex !== null
? sortedQuestions[linearQuestionIndex - 1]
: sortedQuestions.find(q =>
q.id === currentQuestion?.content.rule.parentId
|| q.content.id === currentQuestion?.content.rule.parentId
: sortedQuestions.find(
(q) =>
q.id === currentQuestion?.content.rule.parentId ||
q.content.id === currentQuestion?.content.rule.parentId
);
const findResultPointsLogic = useCallback(() => {
const results = sortedQuestions.filter(
e => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum
(e) =>
e.type === "result" &&
e.content.rule.minScore !== undefined &&
e.content.rule.minScore <= pointsSum
);
const numbers = results.map(
e => e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
const numbers = results.map((e) =>
e.type === "result" && e.content.rule.minScore !== undefined
? e.content.rule.minScore
: 0
);
const indexOfNext = Math.max(...numbers);
@ -105,33 +142,53 @@ export function useQuestionFlowControl() {
if (settings.cfg.score) {
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1];
if (next?.type === "result" || next == undefined) next = findResultPointsLogic();
if (next?.type === "result" || next == undefined)
next = findResultPointsLogic();
}
} else {
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1] ?? sortedQuestions.find(question =>
question.type === "result" && question.content.rule.parentId === "line"
next =
sortedQuestions[linearQuestionIndex + 1] ??
sortedQuestions.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === "line"
);
} else {
next = sortedQuestions.find(q => q.id === nextQuestionId || q.content.id === nextQuestionId);
next = sortedQuestions.find(
(q) => q.id === nextQuestionId || q.content.id === nextQuestionId
);
}
}
return next;
}, [nextQuestionId, findResultPointsLogic, linearQuestionIndex, sortedQuestions, settings.cfg.score]);
}, [
nextQuestionId,
findResultPointsLogic,
linearQuestionIndex,
sortedQuestions,
settings.cfg.score,
]);
const showResult = useCallback(() => {
if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
if (nextQuestion?.type !== "result")
throw new Error("Current question is not result");
setCurrentQuestionId(nextQuestion.id);
if (
settings.cfg.resultInfo.showResultForm === "after"
|| isResultQuestionEmpty(nextQuestion)
) setCurrentQuizStep("contactform");
}, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm]);
settings.cfg.resultInfo.showResultForm === "after" ||
isResultQuestionEmpty(nextQuestion)
)
setCurrentQuizStep("contactform");
}, [
nextQuestion,
setCurrentQuizStep,
settings.cfg.resultInfo.showResultForm,
]);
const showResultAfterContactForm = useCallback(() => {
if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
if (currentQuestion?.type !== "result")
throw new Error("Current question is not result");
if (isResultQuestionEmpty(currentQuestion)) {
enqueueSnackbar("Данные отправлены");
return;
@ -150,43 +207,34 @@ 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}}`
});
};
// Засчитываем переход с вопроса дальше
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
setCurrentQuestionId(nextQuestion.id);
}, [nextQuestion, showResult]);
const setQuestion = useCallback((questionId: string) => {
const question = sortedQuestions.find(q => q.id === questionId);
const setQuestion = useCallback(
(questionId: string) => {
const question = sortedQuestions.find((q) => q.id === questionId);
if (!question) return;
setCurrentQuestionId(question.id);
}, [sortedQuestions]);
},
[sortedQuestions]
);
const isPreviousButtonEnabled = Boolean(prevQuestion);
const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
const hasAnswer = answers.some(
({ questionId }) => questionId === currentQuestion.id
);
if ("required" in currentQuestion.content && currentQuestion.content.required) {
if (
"required" in currentQuestion.content &&
currentQuestion.content.required
) {
return hasAnswer;
}
@ -202,7 +250,8 @@ export function useQuestionFlowControl() {
return {
currentQuestion,
currentQuestionStepNumber: linearQuestionIndex === null ? null : linearQuestionIndex + 1,
currentQuestionStepNumber:
linearQuestionIndex === null ? null : linearQuestionIndex + 1,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@frontend/squzanswerer",
"version": "1.0.37",
"version": "1.0.38",
"type": "module",
"main": "./dist-package/index.js",
"module": "./dist-package/index.js",

1618
yarn.lock
View File

File diff suppressed because it is too large Load Diff