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

Merge branch 'dev' into staging

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

280
lib/components/QuizAnswerer.tsx
View File

@ -1,154 +1,180 @@
import { getQuizData } from "@/api/quizRelase"; import {
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView"; startTransition,
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton"; useEffect,
import { QuizDataContext } from "@contexts/QuizDataContext"; useLayoutEffect,
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext"; useRef,
import { QuizSettings } from "@model/settingsData"; useState,
import { Box, CssBaseline, ThemeProvider } from "@mui/material"; } from "react";
import ScopedCssBaseline from "@mui/material/ScopedCssBaseline"; 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 { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { ruRU } from "@mui/x-date-pickers/locales"; 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 { handleComponentError } from "@utils/handleComponentError";
import lightTheme from "@utils/themes/light"; 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"); moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText; const localeText =
ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
type Props = { type Props = {
quizSettings?: QuizSettings; quizSettings?: QuizSettings;
quizId: string; quizId: string;
preview?: boolean; preview?: boolean;
changeFaviconAndTitle?: boolean; changeFaviconAndTitle?: boolean;
className?: string; className?: string;
disableGlobalCss?: boolean; disableGlobalCss?: boolean;
}; };
function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFaviconAndTitle = true, className, disableGlobalCss = false }: Props) { function QuizAnswererInner({
const [quizViewStore] = useState(createQuizViewStore); quizSettings,
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth); quizId,
const rootContainerRef = useRef<HTMLDivElement>(null); preview = false,
const { data, error, isLoading } = useSWR(quizSettings ? null : ["quizData", quizId], params => getQuizData(params[1]), { changeFaviconAndTitle = true,
revalidateOnFocus: false, className,
revalidateOnReconnect: false, disableGlobalCss = false,
shouldRetryOnError: false, }: Props) {
refreshInterval: 0, const [quizViewStore] = useState(createQuizViewStore);
}); 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]),
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
}
);
const vkMetrics = useVkMetricsGoals(
quizSettings?.settings.cfg.vkMetricsNumber
);
const yandexMetrics = useYandexMetricsGoals(
quizSettings?.settings.cfg.yandexMetricsNumber
);
useEffect(() => {
setTimeout(() => {
vkMetrics.quizOpened();
yandexMetrics.quizOpened();
}, 4000);
}, []);
useEffect(() => { useLayoutEffect(() => {
setTimeout(() => { if (rootContainerRef.current)
//@ts-ignore setRootContainerWidth(rootContainerRef.current.clientWidth);
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(() => { useEffect(() => {
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); const handleWindowResize = () => {
}, []); startTransition(() => {
if (rootContainerRef.current)
setRootContainerWidth(rootContainerRef.current.clientWidth);
});
};
window.addEventListener("resize", handleWindowResize);
useEffect(() => { return () => {
const handleWindowResize = () => { window.removeEventListener("resize", handleWindowResize);
startTransition(() => { };
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); }, []);
});
};
window.addEventListener("resize", handleWindowResize);
return () => { if (isLoading) return <LoadingSkeleton />;
window.removeEventListener("resize", handleWindowResize); if (error) return <ApologyPage error={error} />;
};
}, []);
if (isLoading) return <LoadingSkeleton />; quizSettings ??= data;
if (error) return <ApologyPage error={error} />; if (!quizSettings) throw new Error("Quiz data is null");
quizSettings ??= data; if (quizSettings.questions.length === 0)
if (!quizSettings) throw new Error("Quiz data is null"); return <ApologyPage error={new Error("No questions found")} />;
if (!quizId) return <ApologyPage error={new Error("No quiz id")} />;
if (quizSettings.questions.length === 0) return <ApologyPage error={new Error("No questions found")} />; const quizContainer = (
if (!quizId) return <ApologyPage error={new Error("No quiz id")} />; <Box
ref={rootContainerRef}
className={className}
sx={{
width: "100%",
height: "100%",
position: "relative",
}}
>
<ErrorBoundary
FallbackComponent={ApologyPage}
onError={handleComponentError}
>
<ViewPublicationPage />
</ErrorBoundary>
</Box>
);
const quizContainer = ( return (
<Box <QuizViewContext.Provider value={quizViewStore}>
ref={rootContainerRef} <RootContainerWidthContext.Provider value={rootContainerWidth}>
className={className} <QuizDataContext.Provider
sx={{ value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}
width: "100%",
height: "100%",
position: "relative",
}}
> >
<ErrorBoundary {disableGlobalCss ? (
FallbackComponent={ApologyPage} <ScopedCssBaseline
onError={handleComponentError} sx={{
height: "100%",
width: "100%",
backgroundColor: "transparent",
}}
> >
<ViewPublicationPage /> {quizContainer}
</ErrorBoundary> </ScopedCssBaseline>
</Box> ) : (
); <CssBaseline>{quizContainer}</CssBaseline>
)}
return ( </QuizDataContext.Provider>
<QuizViewContext.Provider value={quizViewStore}> </RootContainerWidthContext.Provider>
<RootContainerWidthContext.Provider value={rootContainerWidth}> </QuizViewContext.Provider>
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}> );
{disableGlobalCss ? (
<ScopedCssBaseline
sx={{
height: "100%",
width: "100%",
backgroundColor: "transparent",
}}
>
{quizContainer}
</ScopedCssBaseline>
) : (
<CssBaseline>
{quizContainer}
</CssBaseline>
)}
</QuizDataContext.Provider>
</RootContainerWidthContext.Provider>
</QuizViewContext.Provider>
);
} }
export default function QuizAnswerer(props: Props) { export default function QuizAnswerer(props: Props) {
return (
return ( <LocalizationProvider
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}> dateAdapter={AdapterMoment}
<ThemeProvider theme={lightTheme}> adapterLocale="ru"
<SnackbarProvider localeText={localeText}
preventDuplicate={true} >
style={{ backgroundColor: lightTheme.palette.brightPurple.main }} <ThemeProvider theme={lightTheme}>
> <SnackbarProvider
<QuizAnswererInner {...props} /> preventDuplicate={true}
</SnackbarProvider> style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
</ThemeProvider> >
</LocalizationProvider> <QuizAnswererInner {...props} />
); </SnackbarProvider>
</ThemeProvider>
</LocalizationProvider>
);
} }

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

@ -1,29 +1,32 @@
import {useEffect, useRef, useState,} from "react"; import { useEffect, useRef, useState } from "react";
import {Box, Button, Link, Typography, useTheme,} from "@mui/material"; 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 { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs";
import {sendFC, SendFCParams} from "@api/quizRelase.ts"; import { ContactTextBlock } from "./ContactTextBlock";
import {useQuizData} from "@contexts/QuizDataContext.ts";
import {NameplateLogo} from "@icons/NameplateLogo.tsx"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import {QuizQuestionResult} from "@model/questionTypes/result.ts"; import { useQuizData } from "@contexts/QuizDataContext";
import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
import {quizThemes} from "@utils/themes/Publication/themePublication.ts"; import { sendFC, SendFCParams } from "@api/quizRelase";
import {enqueueSnackbar} from "notistack";
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts"; import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { 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, FormContactFieldData,
FormContactFieldName, FormContactFieldName,
} from "@model/settingsData.ts"; } from "@model/settingsData";
import { import type { QuizQuestionResult } from "@model/questionTypes/result";
Inputs import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
} from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
import {
ContactTextBlock
} from "@/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx";
type Props = { type Props = {
currentQuestion: AnyTypedQuizQuestion; currentQuestion: AnyTypedQuizQuestion;
@ -47,6 +50,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const isMobile = useRootContainerSize() < 850; const isMobile = useRootContainerSize() < 850;
const isTablet = useRootContainerSize() < 1000; const isTablet = useRootContainerSize() < 1000;
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
useEffect(() => { useEffect(() => {
function handleResize() { function handleResize() {
setScreenHeight(window.innerHeight); setScreenHeight(window.innerHeight);
@ -63,18 +69,18 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
currentQuestion.type === "result" currentQuestion.type === "result"
? currentQuestion ? currentQuestion
: questions.find((question): question is QuizQuestionResult => { : questions.find((question): question is QuizQuestionResult => {
if (settings?.cfg.haveRoot) { if (settings?.cfg.haveRoot) {
return ( return (
question.type === "result" && question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id question.content.rule.parentId === currentQuestion.content.id
); );
} else { } else {
return ( return (
question.type === "result" && question.type === "result" &&
question.content.rule.parentId === "line" question.content.rule.parentId === "line"
); );
} }
}); });
if (!resultQuestion) throw new Error("Result question not found"); if (!resultQuestion) throw new Error("Result question not found");
@ -145,24 +151,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
sessions[quizId] = Date.now(); sessions[quizId] = Date.now();
localStorage.setItem("sessions", JSON.stringify(sessions)); localStorage.setItem("sessions", JSON.stringify(sessions));
//@ts-ignore vkMetrics.contactsFormFilled();
const YM = window?.ym; yandexMetrics.contactsFormFilled();
//@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"
});
}
} catch (e) { } catch (e) {
enqueueSnackbar("повторите попытку позже"); enqueueSnackbar("повторите попытку позже");
} }
@ -174,25 +164,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
setFire(false); setFire(false);
} }
useEffect(() => { useEffect(() => {
//@ts-ignore vkMetrics.contactsFormOpened();
const YM = window?.ym; yandexMetrics.contactsFormOpened();
//@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"
});
}
}, [])
return ( return (
<Box <Box
@ -216,8 +190,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
settings.cfg.design && !isMobile settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `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, : null,
}} }}
> >
@ -234,77 +209,89 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
: theme.palette.background.default, : theme.palette.background.default,
}} }}
> >
<ContactTextBlock settings={settings} /> <ContactTextBlock settings={settings} />
<Box sx={{ <Box
flexGrow: 0,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexDirection: "column",
backgroundColor: theme.palette.background.default,
height: "auto",
}}>
<Box
sx={{ sx={{
flexGrow: 0,
display: "flex", display: "flex",
alignItems: isMobile ? undefined : "center", alignItems: "center",
justifyContent: "center", justifyContent: "space-between",
flexDirection: "column", flexDirection: "column",
p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px", backgroundColor: theme.palette.background.default,
height: "auto",
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: isMobile ? undefined : "center",
justifyContent: "center",
flexDirection: "column", flexDirection: "column",
mt: isMobile ? "10px" : "20px", p: isMobile
mb: "20px" ? "0 20px"
: isTablet
? "0px 40px 30px 60px"
: "125px 60px 30px 60px",
}} }}
> >
<Inputs <Box
name={name} sx={{
setName={setName} display: "flex",
email={email} flexDirection: "column",
setEmail={setEmail} mt: isMobile ? "10px" : "20px",
phone={phone} mb: "20px",
setPhone={setPhone}
text={text}
setText={setText}
adress={adress}
setAdress={setAdress}
/>
</Box>
<Box
sx={{
display: "flex",
width: isMobile ? "300px" : "390px",
}}
>
<CustomCheckbox
label=""
handleChange={({ target }) => {
setReady(target.checked);
}} }}
checked={ready} >
colorIcon={theme.palette.primary.main} <Inputs
sx={{ marginRight: "0" }} name={name}
/> setName={setName}
<Typography sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }} fontSize={"16px"} > email={email}
С&ensp; setEmail={setEmail}
<Link href={`https://${window.location.hostname.includes("s") ? "s" : ""}hub.pena.digital/ppdd`} target="_blank"> phone={phone}
Положением об обработке персональных данных{" "} setPhone={setPhone}
</Link> text={text}
&ensp;и&ensp; setText={setText}
<Link adress={adress}
href={`https://${window.location.hostname.includes("s") ? "s" : ""}hub.pena.digital/docs/privacy`} setAdress={setAdress}
target="_blank" />
</Box>
<Box
sx={{
display: "flex",
width: isMobile ? "300px" : "390px",
}}
>
<CustomCheckbox
label=""
handleChange={({ target }) => {
setReady(target.checked);
}}
checked={ready}
colorIcon={theme.palette.primary.main}
sx={{ marginRight: "0" }}
/>
<Typography
sx={{
color: theme.palette.text.primary,
lineHeight: "18.96px",
}}
fontSize={"16px"}
> >
{" "} С&ensp;
Политикой конфиденциальности{" "} <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
</Link> Положением об обработке персональных данных{" "}
&ensp;ознакомлен </Link>
</Typography> &ensp;и&ensp;
</Box> <Link
href={"https://shub.pena.digital/docs/privacy"}
target="_blank"
>
{" "}
Политикой конфиденциальности{" "}
</Link>
&ensp;ознакомлен
</Typography>
</Box>
<Button <Button
disabled={!(ready && !fire)} disabled={!(ready && !fire)}
@ -319,40 +306,39 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
color: "#9A9AAF", color: "#9A9AAF",
}, },
}} }}
> >
{settings.cfg.formContact?.button || "Получить результаты"} {settings.cfg.formContact?.button || "Получить результаты"}
</Button> </Button>
</Box> </Box>
{show_badge && ( {show_badge && (
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={`https://${window.location.hostname.includes("s") ? "s" : "" href={`https://${
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`} window.location.hostname.includes("s") ? "s" : ""
sx={{ }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
display: "flex", sx={{
alignItems: "center", display: "flex",
mt: "55px", alignItems: "center",
mb: isMobile? "30px": isTablet? "40px" :"50px", mt: "55px",
gap: "10px", mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
textDecoration: "none", gap: "10px",
}} textDecoration: "none",
> }}
<NameplateLogo >
style={{ <NameplateLogo
fontSize: "20px", style={{
color: quizThemes[settings.cfg.theme].isLight fontSize: "20px",
? "#151515" color: quizThemes[settings.cfg.theme].isLight
: "#FFFFFF", ? "#151515"
}} : "#FFFFFF",
/> }}
</Box> />
</Box>
)} )}
</Box> </Box>
</Box> </Box>
</Box> </Box>
); );
}; };

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

56
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 { 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 YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { useQuizData } from "@contexts/QuizDataContext"; import { NameplateLogo } from "@icons/NameplateLogo";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext"; import type { QuizQuestionResult } from "@/model/questionTypes/result";
import type { QuizQuestionResult } from "../../model/questionTypes/result";
import { useQuizViewStore } from "@/stores/quizView";
import { DESIGN_LIST } from "@/utils/designList";
import { useEffect } from "react";
type ResultFormProps = { type ResultFormProps = {
resultQuestion: QuizQuestionResult; resultQuestion: QuizQuestionResult;
@ -24,27 +30,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
(state) => state.setCurrentQuizStep (state) => state.setCurrentQuizStep
); );
const spec = settings.cfg.spec; const spec = settings.cfg.spec;
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
useEffect(() => { useEffect(() => {
//@ts-ignore vkMetrics.resultShown(resultQuestion.id);
let YM = window?.ym; yandexMetrics.resultShown(resultQuestion.id);
//@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 ( return (
<Box <Box
@ -197,8 +189,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={`https://${window.location.hostname.includes("s") ? "s" : "" href={`https://${
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`} window.location.hostname.includes("s") ? "s" : ""
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -216,7 +209,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
: "#F5F7FF", : "#F5F7FF",
}} }}
/> />
</Box> </Box>
)} )}
</Box> </Box>
@ -233,8 +225,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
p: p:
(settings.cfg.resultInfo.showResultForm === "before" && (settings.cfg.resultInfo.showResultForm === "before" &&
!settings.cfg.score) || !settings.cfg.score) ||
(settings.cfg.resultInfo.showResultForm === "after" && (settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect) resultQuestion.content.redirect)
? "20px" ? "20px"
: "0", : "0",
}} }}

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

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

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

@ -9,171 +9,174 @@ import type {QuizStartpageType} from "@model/settingsData";
import {DESIGN_LIST} from "@/utils/designList"; import {DESIGN_LIST} from "@/utils/designList";
type StartPageMobileProps = { type StartPageMobileProps = {
quizHeaderBlock: JSX.Element; quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element; quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null; backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType; startpageType: QuizStartpageType;
}; };
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">; type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
const StandartMobileLayout = ({ const StandartMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => { }: MobileLayoutProps) => {
const { settings } = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box
sx={{
display: "flex",
flexDirection: "column",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100%",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "20px",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)"
: null,
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
}}
>
<Box sx={{marginBottom: "13px"}}>
{quizHeaderBlock}
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "100%", overflow: "hidden" }}>
<Box
sx={{
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
}}
>
{backgroundBlock}
</Box>
</Box>
)}
<Box <Box
sx={{ sx={{
height: "80%", display: "flex",
display: "flex", flexDirection: "column",
flexGrow: 1, flexGrow: 1,
flexDirection: "column", justifyContent: "flex-end",
justifyContent: "space-between", minHeight: "100%",
width: "100%", height: "100%",
marginTop: "30px" "&::-webkit-scrollbar": {width: 0},
}} backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
> >
{quizMainBlock} <Box
sx={{
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "20px",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)"
: null,
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
}}
>
<Box sx={{marginBottom: "13px"}}>
{quizHeaderBlock}
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{width: "100%", overflow: "hidden"}}>
<Box
sx={{
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
"& > img": {
width: "100%",
borderRadius: "12px"
},
}}
>
{backgroundBlock}
</Box>
</Box>
)}
<Box
sx={{
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
marginTop: "30px"
}}
>
{quizMainBlock}
</Box>
</Box>
</Box> </Box>
</Box> );
</Box>
);
}; };
const ExpandedMobileLayout = ({ const ExpandedMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => ( }: MobileLayoutProps) => (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100%",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box <Box
sx={{
zIndex: 3,
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": { width: "4px" },
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
}}
>
<Box
sx={{ sx={{
padding: "20px", display: "flex",
height: "80%", flexDirection: "column-reverse",
display: "flex", flexGrow: 1,
flexGrow: 1, justifyContent: "flex-end",
flexDirection: "column", minHeight: "100%",
justifyContent: "space-between", height: "100%",
width: "100%", "&::-webkit-scrollbar": {width: 0},
}} }}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
zIndex: -1,
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
// minHeight: "100%",
overflow: "hidden",
"& > img": {
display: "block",
minHeight: "100%",
},
}}
> >
{backgroundBlock} <Box
sx={{
zIndex: 3,
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": {width: "4px"},
"&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
}}
>
<Box
sx={{
padding: "20px",
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
zIndex: -1,
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
// minHeight: "100%",
overflow: "hidden",
"& > img": {
display: "block",
minHeight: "100%",
},
}}
>
{backgroundBlock}
</Box>
</Box> </Box>
</Box>
); );
const CenteredMobileLayout = ({ const CenteredMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => { }: MobileLayoutProps) => {
const {settings} = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box <Box
@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
height: "100%", height: "100%",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
: null,
"&::-webkit-scrollbar": {width: 0}, "&::-webkit-scrollbar": {width: 0},
}} }}
> >
@ -211,11 +213,11 @@ const CenteredMobileLayout = ({
{quizHeaderBlock} {quizHeaderBlock}
{settings.cfg.startpage.background.desktop && ( {settings.cfg.startpage.background.desktop && (
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
overflow: "hidden", overflow: "hidden",
"& > img": {width: "100%", borderRadius: "12px"}, "& > img": {width: "100%", borderRadius: "12px"},
}} }}
> >
{backgroundBlock} {backgroundBlock}
</Box> </Box>
@ -238,44 +240,44 @@ const CenteredMobileLayout = ({
} }
export const StartPageMobile = ({ export const StartPageMobile = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
startpageType, startpageType,
}: StartPageMobileProps) => { }: StartPageMobileProps) => {
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {
return ( return (
<StandartMobileLayout <StandartMobileLayout
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
case "expanded": { case "expanded": {
return ( return (
<ExpandedMobileLayout <ExpandedMobileLayout
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
case "centered": { case "centered": {
return ( return (
<CenteredMobileLayout <CenteredMobileLayout
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
default: default:
notReachable(startpageType); notReachable(startpageType);
} }
}; };

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

File diff suppressed because it is too large Load Diff

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

@ -1,23 +1,21 @@
import {sendAnswer} from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import {useQuizData} from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import {ThemeProvider, Typography} from "@mui/material"; import { ThemeProvider, Typography } from "@mui/material";
import {useQuizViewStore} from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import {useQuestionFlowControl} from "@utils/hooks/useQuestionFlowControl"; import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import {notReachable} from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
import {quizThemes} from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import {enqueueSnackbar} from "notistack"; import { enqueueSnackbar } from "notistack";
import {ReactElement, useEffect} from "react"; import { ReactElement, useEffect } from "react";
import {Question} from "./Question"; import { Question } from "./Question";
import {ResultForm} from "./ResultForm"; import { ResultForm } from "./ResultForm";
import {StartPageViewPublication} from "./StartPageViewPublication"; import { StartPageViewPublication } from "./StartPageViewPublication";
import NextButton from "./tools/NextButton"; import NextButton from "./tools/NextButton";
import PrevButton from "./tools/PrevButton"; import PrevButton from "./tools/PrevButton";
import QuestionSelect from "./QuestionSelect"; import QuestionSelect from "./QuestionSelect";
import {useYandexMetrics} from "@/utils/hooks/useYandexMetrics"; import { useYandexMetrics } from "@/utils/hooks/metrics/useYandexMetrics";
import {useVKMetrics} from "@/utils/hooks/useVKMetrics"; import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
import { import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
ContactForm
} from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
export default function ViewPublicationPage() { export default function ViewPublicationPage() {
const { const {
@ -39,8 +37,8 @@ export default function ViewPublicationPage() {
showResultAfterContactForm, showResultAfterContactForm,
setQuestion, setQuestion,
} = useQuestionFlowControl(); } = useQuestionFlowControl();
useYandexMetrics(settings?.cfg?.yandexMetricNumber); useYandexMetrics(settings?.cfg?.yandexMetricsNumber);
useVKMetrics(settings?.cfg?.vkMetricNumber); useVKMetrics(settings?.cfg?.vkMetricsNumber);
const isAnswer = answers.some( const isAnswer = answers.some(
(ans) => ans.questionId === currentQuestion?.id (ans) => ans.questionId === currentQuestion?.id
@ -75,7 +73,6 @@ export default function ViewPublicationPage() {
</ThemeProvider> </ThemeProvider>
); );
let quizStepElement: ReactElement; let quizStepElement: ReactElement;
switch (currentQuizStep) { switch (currentQuizStep) {
case "startpage": { 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; law?: string;
}; };
meta: string; meta: string;
yandexMetricNumber: number | undefined; yandexMetricsNumber: number | undefined;
vkMetricNumber: number | undefined; vkMetricsNumber: number | undefined;
} }
export type FormContactFieldName = 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"; import { useEffect } from "react";
export const useVKMetrics = (vkMetricNumber: number | undefined) => { export const useVKMetrics = (vkMetricsNumber: number | undefined) => {
useEffect(() => { useEffect(() => {
if ( if (
vkMetricNumber && vkMetricsNumber &&
typeof vkMetricNumber === "number" && typeof vkMetricsNumber === "number" &&
!Number.isNaN(vkMetricNumber) !Number.isNaN(vkMetricsNumber)
) { ) {
const script = document.createElement("script"); const script = document.createElement("script");
script.type = "text/javascript"; script.type = "text/javascript";
script.innerHTML = ` script.innerHTML = `
var _tmr = window._tmr || (window._tmr = []); 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) { (function (d, w, id) {
if (d.getElementById(id)) return; if (d.getElementById(id)) return;
var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; 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); document.body.appendChild(script);
const noscript = document.createElement("noscript"); 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); 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"; type: "reachGoal";
id: number; id: number;
goal: string; goal: string;
}; };
type ExtendedWindow = Window & { _tmp?: VkMetric[] }; type ExtendedWindow = Window & { _tmr?: MetricsGoal[] };
type Messenger =
| "telegram"
| "viber"
| "whatsapp"
| "vkontakte"
| "messenger"
| "skype"
| "instagram";
const sendMetrics = (vkPixelId: number | undefined, goal: string) => { const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
if (vkPixelId) { if (vkPixelId) {
(window as ExtendedWindow)._tmp?.push({ (window as ExtendedWindow)._tmr?.push({
type: "reachGoal", type: "reachGoal",
id: vkPixelId, id: vkPixelId,
goal, goal,
@ -27,15 +18,7 @@ const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
} }
}; };
export const useVkMetricGoals = (vkPixelId: number | undefined) => { export const useVkMetricsGoals = (vkId: number | undefined) => {
const [vkId, setVkId] = useState<number | undefined>(undefined);
useEffect(() => {
if (vkPixelId) {
setVkId(vkPixelId);
}
}, [vkPixelId]);
return { return {
// Посетитель открыл квиз // Посетитель открыл квиз
quizOpened: () => sendMetrics(vkId, "penaquiz-start"), quizOpened: () => sendMetrics(vkId, "penaquiz-start"),
@ -46,16 +29,17 @@ export const useVkMetricGoals = (vkPixelId: number | undefined) => {
// Посетитель кликнул по email на стартовой странице // Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(vkId, "penaquiz-email"), emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result) // Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultShown: (resultId: string) => sendMetrics(vkId, `penaquiz-result-${resultId}`), resultShown: (resultId: string) =>
sendMetrics(vkId, `penaquiz-result-${resultId}`),
// Посетитель дошёл до формы контактов // Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"), contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
// Посетитель заполнил форму контактов // Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"), contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
// Посетитель отправил заявку с мессенджером // Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: Messenger) => messengerRequestSended: (messenger: MetricsMessengers) =>
sendMetrics(vkId, `marquiz-messengers-${messenger}`), sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос // Посетитель прошёл вопрос
questionPassed: (questionId: string) => 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"; import { useEffect } from "react";
export const useYandexMetrics = (yandexMetricNumber: number | undefined) => { export const useYandexMetrics = (yandexMetricsNumber: number | undefined) => {
useEffect(() => { useEffect(() => {
if ( if (
yandexMetricNumber && yandexMetricsNumber &&
typeof yandexMetricNumber === "number" && typeof yandexMetricsNumber === "number" &&
!Number.isNaN(yandexMetricNumber) !Number.isNaN(yandexMetricsNumber)
) { ) {
const script = document.createElement("script"); const script = document.createElement("script");
script.type = "text/javascript"; 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)}) 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"); (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(${yandexMetricNumber}, "init", { ym(${yandexMetricsNumber}, "init", {
clickmap:true, clickmap:true,
trackLinks:true, trackLinks:true,
accurateTrackBounce:true, accurateTrackBounce:true,
@ -27,8 +27,8 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
document.body.appendChild(script); document.body.appendChild(script);
const noscript = document.createElement("noscript"); 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); 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}`),
};
};

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

@ -1,213 +1,262 @@
import { useQuizViewStore } from "@stores/quizView";
import { useCallback, useDebugValue, useMemo, useState } from "react"; 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 { 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() { export function useQuestionFlowControl() {
const { settings, questions } = useQuizData(); const { settings, questions } = useQuizData();
const sortedQuestions = useMemo(() => { const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page); return [...questions].sort((a, b) => a.page - b.page);
}, [questions]); }, [questions]);
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId); const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(
const answers = useQuizViewStore(state => state.answers); getFirstQuestionId
const pointsSum = useQuizViewStore(state => state.pointsSum); );
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep); 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]; const currentQuestion =
console.log("currentQuestion", 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 =
? sortedQuestions.indexOf(currentQuestion) currentQuestion &&
: null; sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
? sortedQuestions.indexOf(currentQuestion)
: null;
function getFirstQuestionId() { function getFirstQuestionId() {
if (sortedQuestions.length === 0) return null; if (sortedQuestions.length === 0) return null;
if (settings.cfg.haveRoot) { if (settings.cfg.haveRoot) {
const nextQuestion = sortedQuestions.find( const nextQuestion = sortedQuestions.find(
question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot (question) =>
); question.id === settings.cfg.haveRoot ||
if (!nextQuestion) return null; question.content.id === settings.cfg.haveRoot
);
if (!nextQuestion) return null;
return nextQuestion.id; return nextQuestion.id;
}
return sortedQuestions[0].id;
} }
const nextQuestionIdPointsLogic = useCallback(() => { return sortedQuestions[0].id;
return sortedQuestions.find(question => }
question.type === "result" && question.content.rule.parentId === "line"
);
}, [sortedQuestions]);
const nextQuestionIdMainLogic = useCallback(() => { const nextQuestionIdPointsLogic = useCallback(() => {
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id); return sortedQuestions.find(
(question) =>
question.type === "result" && question.content.rule.parentId === "line"
);
}, [sortedQuestions]);
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) { const nextQuestionIdMainLogic = useCallback(() => {
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer]; const questionAnswer = answers.find(
({ questionId }) => questionId === currentQuestion.id
);
for (const branchingRule of currentQuestion.content.rule.main) { if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
if (userAnswers.some(answer => branchingRule.rules[0].answers.includes(answer))) { const userAnswers = Array.isArray(questionAnswer.answer)
return branchingRule.next; ? questionAnswer.answer
} : [questionAnswer.answer];
}
}
if (!currentQuestion.required) { for (const branchingRule of currentQuestion.content.rule.main) {
const defaultNextQuestionId = currentQuestion.content.rule.default;
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];
}
//ничё не нашли, ищем резулт
return sortedQuestions.find(q => {
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
})?.id;
}, [answers, currentQuestion, sortedQuestions]);
const nextQuestionId = useMemo(() => {
if (settings.cfg.score) {
return nextQuestionIdPointsLogic();
}
return nextQuestionIdMainLogic();
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score]);
const prevQuestion = linearQuestionIndex !== null
? sortedQuestions[linearQuestionIndex - 1]
: 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
);
const numbers = results.map(
e => e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
);
const indexOfNext = Math.max(...numbers);
return results[numbers.indexOf(indexOfNext)];
}, [pointsSum, sortedQuestions]);
const nextQuestion = useMemo(() => {
let next;
if (settings.cfg.score) {
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1];
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"
);
} else {
next = sortedQuestions.find(q => q.id === nextQuestionId || q.content.id === nextQuestionId);
}
}
return next;
}, [nextQuestionId, findResultPointsLogic, linearQuestionIndex, sortedQuestions, settings.cfg.score]);
const showResult = useCallback(() => {
if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
setCurrentQuestionId(nextQuestion.id);
if ( if (
settings.cfg.resultInfo.showResultForm === "after" userAnswers.some((answer) =>
|| isResultQuestionEmpty(nextQuestion) branchingRule.rules[0].answers.includes(answer)
) setCurrentQuizStep("contactform"); )
}, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm]); ) {
return branchingRule.next;
const showResultAfterContactForm = useCallback(() => {
if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
if (isResultQuestionEmpty(currentQuestion)) {
enqueueSnackbar("Данные отправлены");
return;
} }
}
}
setCurrentQuizStep("question"); if (!currentQuestion.required) {
}, [currentQuestion, setCurrentQuizStep]); const defaultNextQuestionId = currentQuestion.content.rule.default;
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];
}
const moveToPrevQuestion = useCallback(() => { //ничё не нашли, ищем резулт
if (!prevQuestion) throw new Error("Previous question not found"); return sortedQuestions.find((q) => {
return (
q.type === "result" &&
q.content.rule.parentId === currentQuestion.content.id
);
})?.id;
}, [answers, currentQuestion, sortedQuestions]);
setCurrentQuestionId(prevQuestion.id); const nextQuestionId = useMemo(() => {
}, [prevQuestion]); if (settings.cfg.score) {
return nextQuestionIdPointsLogic();
}
return nextQuestionIdMainLogic();
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score]);
const moveToNextQuestion = useCallback(() => { const prevQuestion =
if (!nextQuestion) throw new Error("Next question not found"); linearQuestionIndex !== null
? sortedQuestions[linearQuestionIndex - 1]
: sortedQuestions.find(
(q) =>
q.id === currentQuestion?.content.rule.parentId ||
q.content.id === currentQuestion?.content.rule.parentId
);
if (nextQuestion.type === "result") return showResult(); const findResultPointsLogic = useCallback(() => {
//засчитываем переход с вопроса дальше const results = sortedQuestions.filter(
(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 indexOfNext = Math.max(...numbers);
//@ts-ignore return results[numbers.indexOf(indexOfNext)];
let YM = window?.ym; }, [pointsSum, sortedQuestions]);
//@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); const nextQuestion = useMemo(() => {
}, [nextQuestion, showResult]); let next;
if (settings.cfg.score) {
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1];
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"
);
} else {
next = sortedQuestions.find(
(q) => q.id === nextQuestionId || q.content.id === nextQuestionId
);
}
}
const setQuestion = useCallback((questionId: string) => { return next;
const question = sortedQuestions.find(q => q.id === questionId); }, [
if (!question) return; nextQuestionId,
findResultPointsLogic,
linearQuestionIndex,
sortedQuestions,
settings.cfg.score,
]);
setCurrentQuestionId(question.id); const showResult = useCallback(() => {
}, [sortedQuestions]); if (nextQuestion?.type !== "result")
throw new Error("Current question is not result");
const isPreviousButtonEnabled = Boolean(prevQuestion); setCurrentQuestionId(nextQuestion.id);
if (
settings.cfg.resultInfo.showResultForm === "after" ||
isResultQuestionEmpty(nextQuestion)
)
setCurrentQuizStep("contactform");
}, [
nextQuestion,
setCurrentQuizStep,
settings.cfg.resultInfo.showResultForm,
]);
const isNextButtonEnabled = useMemo(() => { const showResultAfterContactForm = useCallback(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id); if (currentQuestion?.type !== "result")
throw new Error("Current question is not result");
if (isResultQuestionEmpty(currentQuestion)) {
enqueueSnackbar("Данные отправлены");
return;
}
if ("required" in currentQuestion.content && currentQuestion.content.required) { setCurrentQuizStep("question");
return hasAnswer; }, [currentQuestion, setCurrentQuizStep]);
}
return Boolean(nextQuestion); const moveToPrevQuestion = useCallback(() => {
}, [answers, currentQuestion, nextQuestion]); if (!prevQuestion) throw new Error("Previous question not found");
useDebugValue({ setCurrentQuestionId(prevQuestion.id);
linearQuestionIndex, }, [prevQuestion]);
currentQuestion: currentQuestion,
prevQuestion: prevQuestion,
nextQuestion: nextQuestion,
});
return { const moveToNextQuestion = useCallback(() => {
currentQuestion, if (!nextQuestion) throw new Error("Next question not found");
currentQuestionStepNumber: linearQuestionIndex === null ? null : linearQuestionIndex + 1,
isNextButtonEnabled, if (nextQuestion.type === "result") return showResult();
isPreviousButtonEnabled, // Засчитываем переход с вопроса дальше
moveToPrevQuestion, vkMetrics.questionPassed(currentQuestion.id);
moveToNextQuestion, yandexMetrics.questionPassed(currentQuestion.id);
showResultAfterContactForm,
setQuestion, setCurrentQuestionId(nextQuestion.id);
}; }, [nextQuestion, showResult]);
}
const setQuestion = useCallback(
(questionId: string) => {
const question = sortedQuestions.find((q) => q.id === questionId);
if (!question) return;
setCurrentQuestionId(question.id);
},
[sortedQuestions]
);
const isPreviousButtonEnabled = Boolean(prevQuestion);
const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(
({ questionId }) => questionId === currentQuestion.id
);
if (
"required" in currentQuestion.content &&
currentQuestion.content.required
) {
return hasAnswer;
}
return Boolean(nextQuestion);
}, [answers, currentQuestion, nextQuestion]);
useDebugValue({
linearQuestionIndex,
currentQuestion: currentQuestion,
prevQuestion: prevQuestion,
nextQuestion: nextQuestion,
});
return {
currentQuestion,
currentQuestionStepNumber:
linearQuestionIndex === null ? null : linearQuestionIndex + 1,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
setQuestion,
};
}

2
package.json
View File

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

1618
yarn.lock
View File

File diff suppressed because it is too large Load Diff