Merge branch 'staging'

lib/components/QuizAnswerer.tsx

@@ -1,27 +1,45 @@
-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 { 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
+      vkMetrics.quizOpened();
-            let YM = window?.ym;
+      yandexMetrics.quizOpened();
-            //@ts-ignore
+    }, 4000);
-            let VP = window?._tmr;
+  }, []);
-            if (YM !== undefined && quizSettings?.settings.cfg.yandexMetricNumber !== undefined) {
-                YM(
-                    quizSettings.settings.cfg.yandexMetricNumber,
-                    "reachGoal",
-                    "penaquiz-start"
-                );
-            };
-            if (VP !== undefined && quizSettings?.settings.cfg.vkMetricNumber !== undefined) {
-                VP.push({
-                    type: "reachGoal",
-                    id: quizSettings.settings.cfg.vkMetricNumber,
-                    goal: "penaquiz-start"
-                });
-            };
-        }, 4000)
-    }, [])
 
   useLayoutEffect(() => {
-        if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
+    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>
+            <CssBaseline>{quizContainer}</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}

lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx

@@ -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 CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
-
-import {DESIGN_LIST} from "@utils/designList.ts";
-import {sendFC, SendFCParams} from "@api/quizRelase.ts";
-import {useQuizData} from "@contexts/QuizDataContext.ts";
-import {NameplateLogo} from "@icons/NameplateLogo.tsx";
-import {QuizQuestionResult} from "@model/questionTypes/result.ts";
-import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
-import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
 import { enqueueSnackbar } from "notistack";
-import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
+
-import {
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+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";
+} 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 = {
   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
+        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) {
         enqueueSnackbar("повторите попытку позже");
       }
@@ -174,25 +164,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
     setFire(false);
   }
   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 (
     <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,7 +315,8 @@ 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",
@@ -355,4 +342,3 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
     </Box>
   );
 };
-

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -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 { 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 = {
   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
+    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 (
     <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>

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx

@@ -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
@@ -62,10 +76,6 @@ const StandartLayout = ({
                         alignItems: "flex-start",
                         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,
@@ -88,6 +98,7 @@ const StandartLayout = ({
                     >{backgroundBlock}</Box></Box>
                 )}
             </Box>
+        </Box>
     );
 };
 
@@ -188,9 +199,8 @@ const CenteredLayout = ({
                 height: "100%",
                 backgroundPosition: "center",
                 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",
                 "&::-webkit-scrollbar": {
                     width: 0,

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx

@@ -76,7 +76,10 @@ const StandartMobileLayout = ({
                                 height: "100%",
                                 display: "flex",
                                 justifyContent: "center",
-                          "& > img": { width: "100%", borderRadius: "12px" },
+                                "& > img": {
+                                    width: "100%",
+                                    borderRadius: "12px"
+                                },
                             }}
                         >
                             {backgroundBlock}
@@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
                 height: "100%",
                 backgroundPosition: "center",
                 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},
             }}
         >

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -9,7 +9,6 @@ import {
 } from "@mui/material";
 
 import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
-import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
 
 import { useQuizData } from "@contexts/QuizDataContext";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
@@ -21,36 +20,31 @@ 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";
+
 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;
+    vkMetrics.phoneNumberOpened();
-        //@ts-ignore
+    yandexMetrics.phoneNumberOpened();
-        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"
-            });
-        }
   };
 
   const background =
@@ -101,23 +95,41 @@ export const StartPageViewPublication = () => {
       ) : null
     ) : null;
 
-    const quizHeaderBlock = (<Box
+  const quizHeaderBlock = (
+    <Box
       sx={{
-            margin:
+        margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
-                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",
+          mb:
-                justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "center" : undefined
+            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={
+      href={`https://${
-                `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
+        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",
+                marginTop:
-                                maxWidth: isMobile ? "100%" : settings.cfg.startpageType === "centered" ? "700px" : isTablet && settings.cfg.startpageType !== "expanded" && settings.cfg.startpage.position !== "center" ? "380px" : "531px",
+                  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={() => {
+                  onClick={onQuizStart}
-                                        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"
-                                            });
-                                        }
-                                    }}
                 >
                   {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}
+              {settings.cfg.startpageType === "expanded" &&
-                            <Box sx={{
+                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={onSiteClick}
-                                        onClick={async () => {
+                    sx={{
-                                            //@ts-ignore
+                      display: "block",
-                                            const YM = window?.ym;
+                      width: "100%",
-                                            //@ts-ignore
+                      marginTop: "10px",
-                                            const VP = window?._tmr;
+                      marginLeft:
-                                            if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
+                        settings.cfg.startpageType === "expanded" &&
-                                                await YM(
+                        settings.cfg.startpage.position === "center" &&
-                                                    settings.cfg.yandexMetricNumber,
+                        !isMobile
-                                                    "reachGoal",
+                          ? "auto"
-                                                    "penaquiz-email"
+                          : undefined,
-                                                );
-                                            }
-                                            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, '')
                     }}
                   >
                     <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",
+                    <ButtonBase
-                                            marginLeft: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "auto" : undefined,
+                      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",

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -13,11 +13,9 @@ 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 { 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() {
   const {
@@ -39,8 +37,8 @@ export default function ViewPublicationPage() {
     showResultAfterContactForm,
     setQuestion,
   } = useQuestionFlowControl();
-  useYandexMetrics(settings?.cfg?.yandexMetricNumber);
+  useYandexMetrics(settings?.cfg?.yandexMetricsNumber);
-  useVKMetrics(settings?.cfg?.vkMetricNumber);
+  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": {

lib/model/metrics.ts

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

lib/model/settingsData.ts

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

lib/utils/hooks/metrics/useVKMetrics.ts

@@ -1,17 +1,17 @@
 import { useEffect } from "react";
 
-export const useVKMetrics = (vkMetricNumber: number | undefined) => {
+export const useVKMetrics = (vkMetricsNumber: number | undefined) => {
   useEffect(() => {
     if (
-      vkMetricNumber &&
+      vkMetricsNumber &&
-      typeof vkMetricNumber === "number" &&
+      typeof vkMetricsNumber === "number" &&
-      !Number.isNaN(vkMetricNumber)
+      !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]);
 };

lib/utils/hooks/metrics/useVkMetricsGoals.ts

@@ -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 ExtendedWindow = Window & { _tmr?: MetricsGoal[] };
-
-type Messenger =
-  | "telegram"
-  | "viber"
-  | "whatsapp"
-  | "vkontakte"
-  | "messenger"
-  | "skype"
-  | "instagram";
 
 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) => {
+export const useVkMetricsGoals = (vkId: number | undefined) => {
-  const [vkId, setVkId] = useState<number | undefined>(undefined);
-
-  useEffect(() => {
-    if (vkPixelId) {
-      setVkId(vkPixelId);
-    }
-  }, [vkPixelId]);
-
   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) =>
+    messengerRequestSended: (messenger: MetricsMessengers) =>
-      sendMetrics(vkId, `marquiz-messengers-${messenger}`),
+      sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
     // Посетитель прошёл вопрос
     questionPassed: (questionId: string) =>
-      sendMetrics(vkId, `marquiz-step${questionId}`),
+      sendMetrics(vkId, `penaquiz-step${questionId}`),
   };
 };

lib/utils/hooks/metrics/useYandexMetrics.ts

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 
-export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
+export const useYandexMetrics = (yandexMetricsNumber: number | undefined) => {
   useEffect(() => {
     if (
-      yandexMetricNumber &&
+      yandexMetricsNumber &&
-      typeof yandexMetricNumber === "number" &&
+      typeof yandexMetricsNumber === "number" &&
-      !Number.isNaN(yandexMetricNumber)
+      !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]);
 };

lib/utils/hooks/metrics/useYandexMetricsGoals.ts

@@ -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}`),
+  };
+};

lib/utils/hooks/useQuestionFlowControl.ts

@@ -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 [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 =
+    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)
+        ["date", "page", "text", "number"].includes(currentQuestion.type) &&
-                && currentQuestion.content.rule.children.length === 1
+        currentQuestion.content.rule.children.length === 1
-            ) return currentQuestion.content.rule.children[0];
+      )
+        return currentQuestion.content.rule.children[0];
     }
 
     //ничё не нашли, ищем резулт
-        return sortedQuestions.find(q => {
+    return sortedQuestions.find((q) => {
-            return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
+      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 =>
+      : sortedQuestions.find(
-            q.id === currentQuestion?.content.rule.parentId
+          (q) =>
-            || q.content.id === currentQuestion?.content.rule.parentId
+            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(
+    const numbers = results.map((e) =>
-            e => e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
+      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 =>
+        next =
-                    question.type === "result" && question.content.rule.parentId === "line"
+          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"
+      settings.cfg.resultInfo.showResultForm === "after" ||
-            || isResultQuestionEmpty(nextQuestion)
+      isResultQuestionEmpty(nextQuestion)
-        ) setCurrentQuizStep("contactform");
+    )
-    }, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm]);
+      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();
-        //засчитываем  переход с вопроса дальше
+    // Засчитываем  переход с вопроса дальше
-
+    vkMetrics.questionPassed(currentQuestion.id);
-        //@ts-ignore
+    yandexMetrics.questionPassed(currentQuestion.id);
-        let YM = window?.ym;
-        //@ts-ignore
-        let VP = window?._tmr;
-        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-            YM(
-                settings.cfg.yandexMetricNumber,
-                "reachGoal",
-                `penaquiz-step{${currentQuestion.id}}`
-            );
-        };
-        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-            VP.push({
-                type: "reachGoal",
-                id: settings.cfg.vkMetricNumber,
-                goal: `penaquiz-step{${currentQuestion.id}}`
-            });
-        };
 
     setCurrentQuestionId(nextQuestion.id);
   }, [nextQuestion, showResult]);
 
-    const setQuestion = useCallback((questionId: string) => {
+  const setQuestion = useCallback(
-        const question = sortedQuestions.find(q => q.id === questionId);
+    (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,

package.json

@@ -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",