Merge branch 'staging'
This commit is contained in:
commit
2b70c92ee8
@ -1,154 +1,180 @@
|
||||
import { getQuizData } from "@/api/quizRelase";
|
||||
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
|
||||
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
|
||||
import { QuizDataContext } from "@contexts/QuizDataContext";
|
||||
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
import { Box, CssBaseline, ThemeProvider } from "@mui/material";
|
||||
import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
|
||||
import {
|
||||
startTransition,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import useSWR from "swr";
|
||||
import { SnackbarProvider } from "notistack";
|
||||
import moment from "moment";
|
||||
import {
|
||||
Box,
|
||||
ScopedCssBaseline,
|
||||
CssBaseline,
|
||||
ThemeProvider,
|
||||
} from "@mui/material";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers";
|
||||
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
|
||||
import { ruRU } from "@mui/x-date-pickers/locales";
|
||||
|
||||
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
|
||||
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
|
||||
|
||||
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
|
||||
|
||||
import { getQuizData } from "@/api/quizRelase";
|
||||
|
||||
import { QuizDataContext } from "@contexts/QuizDataContext";
|
||||
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
|
||||
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
|
||||
|
||||
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||
import { handleComponentError } from "@utils/handleComponentError";
|
||||
import lightTheme from "@utils/themes/light";
|
||||
import moment from "moment";
|
||||
import { SnackbarProvider } from "notistack";
|
||||
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import useSWR from "swr";
|
||||
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
|
||||
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
|
||||
|
||||
import type { QuizSettings } from "@model/settingsData";
|
||||
|
||||
moment.locale("ru");
|
||||
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
|
||||
const localeText =
|
||||
ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
|
||||
|
||||
type Props = {
|
||||
quizSettings?: QuizSettings;
|
||||
quizId: string;
|
||||
preview?: boolean;
|
||||
changeFaviconAndTitle?: boolean;
|
||||
className?: string;
|
||||
disableGlobalCss?: boolean;
|
||||
quizSettings?: QuizSettings;
|
||||
quizId: string;
|
||||
preview?: boolean;
|
||||
changeFaviconAndTitle?: boolean;
|
||||
className?: string;
|
||||
disableGlobalCss?: boolean;
|
||||
};
|
||||
|
||||
function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFaviconAndTitle = true, className, disableGlobalCss = false }: Props) {
|
||||
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,
|
||||
});
|
||||
function QuizAnswererInner({
|
||||
quizSettings,
|
||||
quizId,
|
||||
preview = false,
|
||||
changeFaviconAndTitle = true,
|
||||
className,
|
||||
disableGlobalCss = false,
|
||||
}: Props) {
|
||||
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(() => {
|
||||
setTimeout(() => {
|
||||
//@ts-ignore
|
||||
let YM = window?.ym;
|
||||
//@ts-ignore
|
||||
let VP = window?._tmr;
|
||||
if (YM !== undefined && quizSettings?.settings.cfg.yandexMetricNumber !== undefined) {
|
||||
YM(
|
||||
quizSettings.settings.cfg.yandexMetricNumber,
|
||||
"reachGoal",
|
||||
"penaquiz-start"
|
||||
);
|
||||
};
|
||||
if (VP !== undefined && quizSettings?.settings.cfg.vkMetricNumber !== undefined) {
|
||||
VP.push({
|
||||
type: "reachGoal",
|
||||
id: quizSettings.settings.cfg.vkMetricNumber,
|
||||
goal: "penaquiz-start"
|
||||
});
|
||||
};
|
||||
}, 4000)
|
||||
}, [])
|
||||
useLayoutEffect(() => {
|
||||
if (rootContainerRef.current)
|
||||
setRootContainerWidth(rootContainerRef.current.clientWidth);
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const handleWindowResize = () => {
|
||||
startTransition(() => {
|
||||
if (rootContainerRef.current)
|
||||
setRootContainerWidth(rootContainerRef.current.clientWidth);
|
||||
});
|
||||
};
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
|
||||
useEffect(() => {
|
||||
const handleWindowResize = () => {
|
||||
startTransition(() => {
|
||||
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
|
||||
});
|
||||
};
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleWindowResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleWindowResize);
|
||||
};
|
||||
}, []);
|
||||
if (isLoading) return <LoadingSkeleton />;
|
||||
if (error) return <ApologyPage error={error} />;
|
||||
|
||||
if (isLoading) return <LoadingSkeleton />;
|
||||
if (error) return <ApologyPage error={error} />;
|
||||
quizSettings ??= data;
|
||||
if (!quizSettings) throw new Error("Quiz data is null");
|
||||
|
||||
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 (!quizId) return <ApologyPage error={new Error("No quiz id")} />;
|
||||
|
||||
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 = (
|
||||
<Box
|
||||
ref={rootContainerRef}
|
||||
className={className}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary
|
||||
FallbackComponent={ApologyPage}
|
||||
onError={handleComponentError}
|
||||
>
|
||||
<ViewPublicationPage />
|
||||
</ErrorBoundary>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const quizContainer = (
|
||||
<Box
|
||||
ref={rootContainerRef}
|
||||
className={className}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
}}
|
||||
return (
|
||||
<QuizViewContext.Provider value={quizViewStore}>
|
||||
<RootContainerWidthContext.Provider value={rootContainerWidth}>
|
||||
<QuizDataContext.Provider
|
||||
value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}
|
||||
>
|
||||
<ErrorBoundary
|
||||
FallbackComponent={ApologyPage}
|
||||
onError={handleComponentError}
|
||||
{disableGlobalCss ? (
|
||||
<ScopedCssBaseline
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<ViewPublicationPage />
|
||||
</ErrorBoundary>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<QuizViewContext.Provider value={quizViewStore}>
|
||||
<RootContainerWidthContext.Provider value={rootContainerWidth}>
|
||||
<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>
|
||||
);
|
||||
{quizContainer}
|
||||
</ScopedCssBaseline>
|
||||
) : (
|
||||
<CssBaseline>{quizContainer}</CssBaseline>
|
||||
)}
|
||||
</QuizDataContext.Provider>
|
||||
</RootContainerWidthContext.Provider>
|
||||
</QuizViewContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default function QuizAnswerer(props: Props) {
|
||||
|
||||
return (
|
||||
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<SnackbarProvider
|
||||
preventDuplicate={true}
|
||||
style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
|
||||
>
|
||||
<QuizAnswererInner {...props} />
|
||||
</SnackbarProvider>
|
||||
</ThemeProvider>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
return (
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterMoment}
|
||||
adapterLocale="ru"
|
||||
localeText={localeText}
|
||||
>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<SnackbarProvider
|
||||
preventDuplicate={true}
|
||||
style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
|
||||
>
|
||||
<QuizAnswererInner {...props} />
|
||||
</SnackbarProvider>
|
||||
</ThemeProvider>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,29 +1,32 @@
|
||||
import {useEffect, useRef, useState,} from "react";
|
||||
import {Box, Button, Link, Typography, useTheme,} from "@mui/material";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
|
||||
import {DESIGN_LIST} from "@utils/designList.ts";
|
||||
import {sendFC, SendFCParams} from "@api/quizRelase.ts";
|
||||
import {useQuizData} from "@contexts/QuizDataContext.ts";
|
||||
import {NameplateLogo} from "@icons/NameplateLogo.tsx";
|
||||
import {QuizQuestionResult} from "@model/questionTypes/result.ts";
|
||||
import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
|
||||
import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
|
||||
import {enqueueSnackbar} from "notistack";
|
||||
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
|
||||
import {
|
||||
import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs";
|
||||
import { ContactTextBlock } from "./ContactTextBlock";
|
||||
|
||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
import { sendFC, SendFCParams } from "@api/quizRelase";
|
||||
|
||||
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||
|
||||
import { EMAIL_REGEXP } from "@utils/emailRegexp";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { DESIGN_LIST } from "@utils/designList";
|
||||
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
|
||||
import type {
|
||||
FormContactFieldData,
|
||||
FormContactFieldName,
|
||||
} from "@model/settingsData.ts";
|
||||
import {
|
||||
Inputs
|
||||
} from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
|
||||
import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
|
||||
import {
|
||||
ContactTextBlock
|
||||
} from "@/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx";
|
||||
|
||||
} from "@model/settingsData";
|
||||
import type { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
|
||||
type Props = {
|
||||
currentQuestion: AnyTypedQuizQuestion;
|
||||
@ -47,6 +50,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
const isMobile = useRootContainerSize() < 850;
|
||||
const isTablet = useRootContainerSize() < 1000;
|
||||
|
||||
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
|
||||
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setScreenHeight(window.innerHeight);
|
||||
@ -63,18 +69,18 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
currentQuestion.type === "result"
|
||||
? currentQuestion
|
||||
: questions.find((question): question is QuizQuestionResult => {
|
||||
if (settings?.cfg.haveRoot) {
|
||||
return (
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === currentQuestion.content.id
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === "line"
|
||||
);
|
||||
}
|
||||
});
|
||||
if (settings?.cfg.haveRoot) {
|
||||
return (
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === currentQuestion.content.id
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === "line"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
if (!resultQuestion) throw new Error("Result question not found");
|
||||
|
||||
@ -145,24 +151,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
sessions[quizId] = Date.now();
|
||||
localStorage.setItem("sessions", JSON.stringify(sessions));
|
||||
|
||||
//@ts-ignore
|
||||
const YM = window?.ym;
|
||||
//@ts-ignore
|
||||
const VP = window?._tmr;
|
||||
if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
|
||||
YM(
|
||||
settings.cfg.yandexMetricNumber,
|
||||
"reachGoal",
|
||||
"penaquiz-contacts"
|
||||
);
|
||||
}
|
||||
if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
|
||||
VP.push({
|
||||
type: "reachGoal",
|
||||
id: settings.cfg.vkMetricNumber,
|
||||
goal: "penaquiz-contacts"
|
||||
});
|
||||
}
|
||||
vkMetrics.contactsFormFilled();
|
||||
yandexMetrics.contactsFormFilled();
|
||||
} catch (e) {
|
||||
enqueueSnackbar("повторите попытку позже");
|
||||
}
|
||||
@ -174,25 +164,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
setFire(false);
|
||||
}
|
||||
useEffect(() => {
|
||||
//@ts-ignore
|
||||
const YM = window?.ym;
|
||||
//@ts-ignore
|
||||
const VP = window?._tmr;
|
||||
if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
|
||||
YM(
|
||||
settings.cfg.yandexMetricNumber,
|
||||
"reachGoal",
|
||||
"penaquiz-form"
|
||||
);
|
||||
}
|
||||
if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
|
||||
VP.push({
|
||||
type: "reachGoal",
|
||||
id: settings.cfg.vkMetricNumber,
|
||||
goal: "penaquiz-form"
|
||||
});
|
||||
}
|
||||
}, [])
|
||||
vkMetrics.contactsFormOpened();
|
||||
yandexMetrics.contactsFormOpened();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -216,8 +190,9 @@ 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,
|
||||
}}
|
||||
>
|
||||
@ -234,77 +209,89 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<ContactTextBlock settings={settings} />
|
||||
<Box sx={{
|
||||
flexGrow: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: "column",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "auto",
|
||||
}}>
|
||||
<Box
|
||||
<ContactTextBlock settings={settings} />
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 0,
|
||||
display: "flex",
|
||||
alignItems: isMobile ? undefined : "center",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: "column",
|
||||
p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: isMobile ? undefined : "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
mt: isMobile ? "10px" : "20px",
|
||||
mb: "20px"
|
||||
p: isMobile
|
||||
? "0 20px"
|
||||
: isTablet
|
||||
? "0px 40px 30px 60px"
|
||||
: "125px 60px 30px 60px",
|
||||
}}
|
||||
>
|
||||
<Inputs
|
||||
name={name}
|
||||
setName={setName}
|
||||
email={email}
|
||||
setEmail={setEmail}
|
||||
phone={phone}
|
||||
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);
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
mt: isMobile ? "10px" : "20px",
|
||||
mb: "20px",
|
||||
}}
|
||||
checked={ready}
|
||||
colorIcon={theme.palette.primary.main}
|
||||
sx={{ marginRight: "0" }}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }} fontSize={"16px"} >
|
||||
С 
|
||||
<Link href={`https://${window.location.hostname.includes("s") ? "s" : ""}hub.pena.digital/ppdd`} target="_blank">
|
||||
Положением об обработке персональных данных{" "}
|
||||
</Link>
|
||||
 и 
|
||||
<Link
|
||||
href={`https://${window.location.hostname.includes("s") ? "s" : ""}hub.pena.digital/docs/privacy`}
|
||||
target="_blank"
|
||||
>
|
||||
<Inputs
|
||||
name={name}
|
||||
setName={setName}
|
||||
email={email}
|
||||
setEmail={setEmail}
|
||||
phone={phone}
|
||||
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}
|
||||
sx={{ marginRight: "0" }}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
lineHeight: "18.96px",
|
||||
}}
|
||||
fontSize={"16px"}
|
||||
>
|
||||
{" "}
|
||||
Политикой конфиденциальности{" "}
|
||||
</Link>
|
||||
 ознакомлен
|
||||
</Typography>
|
||||
</Box>
|
||||
С 
|
||||
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
|
||||
Положением об обработке персональных данных{" "}
|
||||
</Link>
|
||||
 и 
|
||||
<Link
|
||||
href={"https://shub.pena.digital/docs/privacy"}
|
||||
target="_blank"
|
||||
>
|
||||
{" "}
|
||||
Политикой конфиденциальности{" "}
|
||||
</Link>
|
||||
 ознакомлен
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
disabled={!(ready && !fire)}
|
||||
@ -319,40 +306,39 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
border: "1px solid #9A9AAF",
|
||||
color: "#9A9AAF",
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||
</Button>
|
||||
</Box>
|
||||
{show_badge && (
|
||||
<Box
|
||||
component={Link}
|
||||
target={"_blank"}
|
||||
href={`https://${window.location.hostname.includes("s") ? "s" : ""
|
||||
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "55px",
|
||||
mb: isMobile? "30px": isTablet? "40px" :"50px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
color: quizThemes[settings.cfg.theme].isLight
|
||||
? "#151515"
|
||||
: "#FFFFFF",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
component={Link}
|
||||
target={"_blank"}
|
||||
href={`https://${
|
||||
window.location.hostname.includes("s") ? "s" : ""
|
||||
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "55px",
|
||||
mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
color: quizThemes[settings.cfg.theme].isLight
|
||||
? "#151515"
|
||||
: "#FFFFFF",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
import { useEffect } from "react";
|
||||
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { useQuizViewStore } from "@/stores/quizView";
|
||||
|
||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||
import { DESIGN_LIST } from "@/utils/designList";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionResult } from "../../model/questionTypes/result";
|
||||
import { useQuizViewStore } from "@/stores/quizView";
|
||||
import { DESIGN_LIST } from "@/utils/designList";
|
||||
import { useEffect } from "react";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
|
||||
import type { QuizQuestionResult } from "@/model/questionTypes/result";
|
||||
|
||||
type ResultFormProps = {
|
||||
resultQuestion: QuizQuestionResult;
|
||||
@ -24,27 +30,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
(state) => state.setCurrentQuizStep
|
||||
);
|
||||
const spec = settings.cfg.spec;
|
||||
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
|
||||
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
|
||||
|
||||
useEffect(() => {
|
||||
//@ts-ignore
|
||||
let YM = window?.ym;
|
||||
//@ts-ignore
|
||||
let VP = window?._tmr;
|
||||
if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
|
||||
YM(
|
||||
settings.cfg.yandexMetricNumber,
|
||||
"reachGoal",
|
||||
`penaquiz-result-{${resultQuestion.id}}`
|
||||
);
|
||||
};
|
||||
if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
|
||||
VP.push({
|
||||
type: "reachGoal",
|
||||
id: settings.cfg.vkMetricNumber,
|
||||
goal: `penaquiz-result-{${resultQuestion.id}}`
|
||||
});
|
||||
};
|
||||
}, [])
|
||||
vkMetrics.resultShown(resultQuestion.id);
|
||||
yandexMetrics.resultShown(resultQuestion.id);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -197,8 +189,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
<Box
|
||||
component={Link}
|
||||
target={"_blank"}
|
||||
href={`https://${window.location.hostname.includes("s") ? "s" : ""
|
||||
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||
href={`https://${
|
||||
window.location.hostname.includes("s") ? "s" : ""
|
||||
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@ -216,7 +209,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
: "#F5F7FF",
|
||||
}}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
@ -233,8 +225,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
p:
|
||||
(settings.cfg.resultInfo.showResultForm === "before" &&
|
||||
!settings.cfg.score) ||
|
||||
(settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect)
|
||||
(settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect)
|
||||
? "20px"
|
||||
: "0",
|
||||
}}
|
||||
|
||||
@ -23,14 +23,14 @@ type StartPageDesktopProps = {
|
||||
type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
|
||||
|
||||
const StandartLayout = ({
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const size = useRootContainerSize();
|
||||
const isTablet = size >= 700 && size < 1100;
|
||||
const { settings } = useQuizData();
|
||||
const {settings} = useQuizData();
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -49,54 +49,65 @@ const StandartLayout = ({
|
||||
width: 0,
|
||||
},
|
||||
overflowY: "auto",
|
||||
padding: isTablet ? "15px" : "0",
|
||||
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "40%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
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,
|
||||
},
|
||||
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,
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "60%", overflow: "hidden" }}><Box
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
width: "40%",
|
||||
height: "100%",
|
||||
padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
flexDirection: "column",
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const ExpandedLayout = ({
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const size = useRootContainerSize();
|
||||
const isTablet = size >= 700 && size < 1100;
|
||||
return (
|
||||
@ -171,12 +182,12 @@ const ExpandedLayout = ({
|
||||
}
|
||||
|
||||
const CenteredLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const isTablet = useRootContainerSize() < 1100;
|
||||
const { settings } = useQuizData();
|
||||
const {settings} = useQuizData();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -188,9 +199,8 @@ const CenteredLayout = ({
|
||||
height: "100%",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: 0,
|
||||
@ -207,7 +217,7 @@ const CenteredLayout = ({
|
||||
height: isTablet ? "530px" : "306px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
@ -219,12 +229,12 @@ const CenteredLayout = ({
|
||||
};
|
||||
|
||||
export const StartPageDesktop = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
alignType,
|
||||
}: StartPageDesktopProps) => {
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
alignType,
|
||||
}: StartPageDesktopProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
|
||||
@ -9,171 +9,174 @@ import type {QuizStartpageType} from "@model/settingsData";
|
||||
import {DESIGN_LIST} from "@/utils/designList";
|
||||
|
||||
type StartPageMobileProps = {
|
||||
quizHeaderBlock: JSX.Element;
|
||||
quizMainBlock: JSX.Element;
|
||||
backgroundBlock: JSX.Element | null;
|
||||
startpageType: QuizStartpageType;
|
||||
quizHeaderBlock: JSX.Element;
|
||||
quizMainBlock: JSX.Element;
|
||||
backgroundBlock: JSX.Element | null;
|
||||
startpageType: QuizStartpageType;
|
||||
};
|
||||
|
||||
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
|
||||
|
||||
const StandartMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const { settings } = useQuizData();
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const {settings} = useQuizData();
|
||||
|
||||
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>
|
||||
)}
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
marginTop: "30px"
|
||||
}}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
const ExpandedMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => (
|
||||
<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%",
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "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>
|
||||
);
|
||||
|
||||
const CenteredMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const {settings} = useQuizData();
|
||||
return (
|
||||
<Box
|
||||
@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
|
||||
height: "100%",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
}}
|
||||
>
|
||||
@ -211,11 +213,11 @@ const CenteredMobileLayout = ({
|
||||
{quizHeaderBlock}
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
@ -238,44 +240,44 @@ const CenteredMobileLayout = ({
|
||||
}
|
||||
|
||||
export const StartPageMobile = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
}: StartPageMobileProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
return (
|
||||
<StandartMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
}: StartPageMobileProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
return (
|
||||
<StandartMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
case "expanded": {
|
||||
return (
|
||||
<ExpandedMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "expanded": {
|
||||
return (
|
||||
<ExpandedMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
case "centered": {
|
||||
return (
|
||||
<CenteredMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "centered": {
|
||||
return (
|
||||
<CenteredMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
default:
|
||||
notReachable(startpageType);
|
||||
}
|
||||
default:
|
||||
notReachable(startpageType);
|
||||
}
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,23 +1,21 @@
|
||||
import {sendAnswer} from "@api/quizRelase";
|
||||
import {useQuizData} from "@contexts/QuizDataContext";
|
||||
import {ThemeProvider, Typography} from "@mui/material";
|
||||
import {useQuizViewStore} from "@stores/quizView";
|
||||
import {useQuestionFlowControl} from "@utils/hooks/useQuestionFlowControl";
|
||||
import {notReachable} from "@utils/notReachable";
|
||||
import {quizThemes} from "@utils/themes/Publication/themePublication";
|
||||
import {enqueueSnackbar} from "notistack";
|
||||
import {ReactElement, useEffect} from "react";
|
||||
import {Question} from "./Question";
|
||||
import {ResultForm} from "./ResultForm";
|
||||
import {StartPageViewPublication} from "./StartPageViewPublication";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { ThemeProvider, Typography } from "@mui/material";
|
||||
import { useQuizViewStore } from "@stores/quizView";
|
||||
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
|
||||
import { notReachable } from "@utils/notReachable";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { ReactElement, useEffect } from "react";
|
||||
import { Question } from "./Question";
|
||||
import { ResultForm } from "./ResultForm";
|
||||
import { StartPageViewPublication } from "./StartPageViewPublication";
|
||||
import NextButton from "./tools/NextButton";
|
||||
import PrevButton from "./tools/PrevButton";
|
||||
import QuestionSelect from "./QuestionSelect";
|
||||
import {useYandexMetrics} from "@/utils/hooks/useYandexMetrics";
|
||||
import {useVKMetrics} from "@/utils/hooks/useVKMetrics";
|
||||
import {
|
||||
ContactForm
|
||||
} from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
|
||||
import { useYandexMetrics } from "@/utils/hooks/metrics/useYandexMetrics";
|
||||
import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
|
||||
import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
|
||||
|
||||
export default function ViewPublicationPage() {
|
||||
const {
|
||||
@ -39,8 +37,8 @@ export default function ViewPublicationPage() {
|
||||
showResultAfterContactForm,
|
||||
setQuestion,
|
||||
} = useQuestionFlowControl();
|
||||
useYandexMetrics(settings?.cfg?.yandexMetricNumber);
|
||||
useVKMetrics(settings?.cfg?.vkMetricNumber);
|
||||
useYandexMetrics(settings?.cfg?.yandexMetricsNumber);
|
||||
useVKMetrics(settings?.cfg?.vkMetricsNumber);
|
||||
|
||||
const isAnswer = answers.some(
|
||||
(ans) => ans.questionId === currentQuestion?.id
|
||||
@ -75,7 +73,6 @@ export default function ViewPublicationPage() {
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
|
||||
let quizStepElement: ReactElement;
|
||||
switch (currentQuizStep) {
|
||||
case "startpage": {
|
||||
|
||||
8
lib/model/metrics.ts
Normal file
8
lib/model/metrics.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export type MetricsMessengers =
|
||||
| "telegram"
|
||||
| "viber"
|
||||
| "whatsapp"
|
||||
| "vkontakte"
|
||||
| "messenger"
|
||||
| "skype"
|
||||
| "instagram";
|
||||
@ -110,8 +110,8 @@ export interface QuizConfig {
|
||||
law?: string;
|
||||
};
|
||||
meta: string;
|
||||
yandexMetricNumber: number | undefined;
|
||||
vkMetricNumber: number | undefined;
|
||||
yandexMetricsNumber: number | undefined;
|
||||
vkMetricsNumber: number | undefined;
|
||||
}
|
||||
|
||||
export type FormContactFieldName =
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const useVKMetrics = (vkMetricNumber: number | undefined) => {
|
||||
export const useVKMetrics = (vkMetricsNumber: number | undefined) => {
|
||||
useEffect(() => {
|
||||
if (
|
||||
vkMetricNumber &&
|
||||
typeof vkMetricNumber === "number" &&
|
||||
!Number.isNaN(vkMetricNumber)
|
||||
vkMetricsNumber &&
|
||||
typeof vkMetricsNumber === "number" &&
|
||||
!Number.isNaN(vkMetricsNumber)
|
||||
) {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.innerHTML = `
|
||||
var _tmr = window._tmr || (window._tmr = []);
|
||||
_tmr.push({id: "${vkMetricNumber}", type: "pageView", start: (new Date()).getTime()});
|
||||
_tmr.push({id: "${vkMetricsNumber}", type: "pageView", start: (new Date()).getTime()});
|
||||
(function (d, w, id) {
|
||||
if (d.getElementById(id)) return;
|
||||
var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
|
||||
@ -23,8 +23,8 @@ export const useVKMetrics = (vkMetricNumber: number | undefined) => {
|
||||
document.body.appendChild(script);
|
||||
|
||||
const noscript = document.createElement("noscript");
|
||||
noscript.innerHTML = `<div><img src="https://top-fwz1.mail.ru/counter?id=${vkMetricNumber};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
|
||||
noscript.innerHTML = `<div><img src="https://top-fwz1.mail.ru/counter?id=${vkMetricsNumber};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
|
||||
document.body.appendChild(noscript);
|
||||
}
|
||||
}, [vkMetricNumber]);
|
||||
}, [vkMetricsNumber]);
|
||||
};
|
||||
@ -1,25 +1,16 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { MetricsMessengers } from "@model/metrics";
|
||||
|
||||
type VkMetric = {
|
||||
type MetricsGoal = {
|
||||
type: "reachGoal";
|
||||
id: number;
|
||||
goal: string;
|
||||
};
|
||||
|
||||
type ExtendedWindow = Window & { _tmp?: VkMetric[] };
|
||||
|
||||
type Messenger =
|
||||
| "telegram"
|
||||
| "viber"
|
||||
| "whatsapp"
|
||||
| "vkontakte"
|
||||
| "messenger"
|
||||
| "skype"
|
||||
| "instagram";
|
||||
type ExtendedWindow = Window & { _tmr?: MetricsGoal[] };
|
||||
|
||||
const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
|
||||
if (vkPixelId) {
|
||||
(window as ExtendedWindow)._tmp?.push({
|
||||
(window as ExtendedWindow)._tmr?.push({
|
||||
type: "reachGoal",
|
||||
id: vkPixelId,
|
||||
goal,
|
||||
@ -27,15 +18,7 @@ const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const useVkMetricGoals = (vkPixelId: number | undefined) => {
|
||||
const [vkId, setVkId] = useState<number | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (vkPixelId) {
|
||||
setVkId(vkPixelId);
|
||||
}
|
||||
}, [vkPixelId]);
|
||||
|
||||
export const useVkMetricsGoals = (vkId: number | undefined) => {
|
||||
return {
|
||||
// Посетитель открыл квиз
|
||||
quizOpened: () => sendMetrics(vkId, "penaquiz-start"),
|
||||
@ -46,16 +29,17 @@ export const useVkMetricGoals = (vkPixelId: number | undefined) => {
|
||||
// Посетитель кликнул по email на стартовой странице
|
||||
emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
|
||||
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
|
||||
resultShown: (resultId: string) => sendMetrics(vkId, `penaquiz-result-${resultId}`),
|
||||
resultShown: (resultId: string) =>
|
||||
sendMetrics(vkId, `penaquiz-result-${resultId}`),
|
||||
// Посетитель дошёл до формы контактов
|
||||
contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
|
||||
// Посетитель заполнил форму контактов
|
||||
contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
|
||||
// Посетитель отправил заявку с мессенджером
|
||||
messengerRequestSended: (messenger: Messenger) =>
|
||||
sendMetrics(vkId, `marquiz-messengers-${messenger}`),
|
||||
messengerRequestSended: (messenger: MetricsMessengers) =>
|
||||
sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
|
||||
// Посетитель прошёл вопрос
|
||||
questionPassed: (questionId: string) =>
|
||||
sendMetrics(vkId, `marquiz-step${questionId}`),
|
||||
sendMetrics(vkId, `penaquiz-step${questionId}`),
|
||||
};
|
||||
};
|
||||
@ -1,11 +1,11 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
|
||||
export const useYandexMetrics = (yandexMetricsNumber: number | undefined) => {
|
||||
useEffect(() => {
|
||||
if (
|
||||
yandexMetricNumber &&
|
||||
typeof yandexMetricNumber === "number" &&
|
||||
!Number.isNaN(yandexMetricNumber)
|
||||
yandexMetricsNumber &&
|
||||
typeof yandexMetricsNumber === "number" &&
|
||||
!Number.isNaN(yandexMetricsNumber)
|
||||
) {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
@ -16,7 +16,7 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(${yandexMetricNumber}, "init", {
|
||||
ym(${yandexMetricsNumber}, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
@ -27,8 +27,8 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
|
||||
document.body.appendChild(script);
|
||||
|
||||
const noscript = document.createElement("noscript");
|
||||
noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
|
||||
noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricsNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
|
||||
document.body.appendChild(noscript);
|
||||
}
|
||||
}, [yandexMetricNumber]);
|
||||
}, [yandexMetricsNumber]);
|
||||
};
|
||||
37
lib/utils/hooks/metrics/useYandexMetricsGoals.ts
Normal file
37
lib/utils/hooks/metrics/useYandexMetricsGoals.ts
Normal 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}`),
|
||||
};
|
||||
};
|
||||
@ -1,213 +1,262 @@
|
||||
import { useQuizViewStore } from "@stores/quizView";
|
||||
import { useCallback, useDebugValue, useMemo, useState } from "react";
|
||||
import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData";
|
||||
import moment from "moment";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import moment from "moment";
|
||||
|
||||
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
import { useQuizViewStore } from "@stores/quizView";
|
||||
|
||||
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||
|
||||
export function useQuestionFlowControl() {
|
||||
const { settings, questions } = useQuizData();
|
||||
const sortedQuestions = useMemo(() => {
|
||||
return [...questions].sort((a, b) => a.page - b.page);
|
||||
}, [questions]);
|
||||
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId);
|
||||
const answers = useQuizViewStore(state => state.answers);
|
||||
const pointsSum = useQuizViewStore(state => state.pointsSum);
|
||||
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
|
||||
const { settings, questions } = useQuizData();
|
||||
const sortedQuestions = useMemo(() => {
|
||||
return [...questions].sort((a, b) => a.page - b.page);
|
||||
}, [questions]);
|
||||
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(
|
||||
getFirstQuestionId
|
||||
);
|
||||
const answers = useQuizViewStore((state) => state.answers);
|
||||
const pointsSum = useQuizViewStore((state) => state.pointsSum);
|
||||
const setCurrentQuizStep = useQuizViewStore(
|
||||
(state) => state.setCurrentQuizStep
|
||||
);
|
||||
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
|
||||
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
|
||||
|
||||
const currentQuestion = sortedQuestions.find(question => question.id === currentQuestionId) ?? sortedQuestions[0];
|
||||
console.log("currentQuestion", currentQuestion)
|
||||
const currentQuestion =
|
||||
sortedQuestions.find((question) => question.id === currentQuestionId) ??
|
||||
sortedQuestions[0];
|
||||
console.log("currentQuestion", currentQuestion);
|
||||
|
||||
const linearQuestionIndex = currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
|
||||
? sortedQuestions.indexOf(currentQuestion)
|
||||
: null;
|
||||
const linearQuestionIndex =
|
||||
currentQuestion &&
|
||||
sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
|
||||
? sortedQuestions.indexOf(currentQuestion)
|
||||
: null;
|
||||
|
||||
function getFirstQuestionId() {
|
||||
if (sortedQuestions.length === 0) return null;
|
||||
function getFirstQuestionId() {
|
||||
if (sortedQuestions.length === 0) return null;
|
||||
|
||||
if (settings.cfg.haveRoot) {
|
||||
const nextQuestion = sortedQuestions.find(
|
||||
question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
|
||||
);
|
||||
if (!nextQuestion) return null;
|
||||
if (settings.cfg.haveRoot) {
|
||||
const nextQuestion = sortedQuestions.find(
|
||||
(question) =>
|
||||
question.id === settings.cfg.haveRoot ||
|
||||
question.content.id === settings.cfg.haveRoot
|
||||
);
|
||||
if (!nextQuestion) return null;
|
||||
|
||||
return nextQuestion.id;
|
||||
}
|
||||
|
||||
return sortedQuestions[0].id;
|
||||
return nextQuestion.id;
|
||||
}
|
||||
|
||||
const nextQuestionIdPointsLogic = useCallback(() => {
|
||||
return sortedQuestions.find(question =>
|
||||
question.type === "result" && question.content.rule.parentId === "line"
|
||||
);
|
||||
}, [sortedQuestions]);
|
||||
return sortedQuestions[0].id;
|
||||
}
|
||||
|
||||
const nextQuestionIdMainLogic = useCallback(() => {
|
||||
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
|
||||
const nextQuestionIdPointsLogic = useCallback(() => {
|
||||
return sortedQuestions.find(
|
||||
(question) =>
|
||||
question.type === "result" && question.content.rule.parentId === "line"
|
||||
);
|
||||
}, [sortedQuestions]);
|
||||
|
||||
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
|
||||
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
|
||||
const nextQuestionIdMainLogic = useCallback(() => {
|
||||
const questionAnswer = answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
);
|
||||
|
||||
for (const branchingRule of currentQuestion.content.rule.main) {
|
||||
if (userAnswers.some(answer => branchingRule.rules[0].answers.includes(answer))) {
|
||||
return branchingRule.next;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
|
||||
const userAnswers = Array.isArray(questionAnswer.answer)
|
||||
? questionAnswer.answer
|
||||
: [questionAnswer.answer];
|
||||
|
||||
if (!currentQuestion.required) {
|
||||
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);
|
||||
for (const branchingRule of currentQuestion.content.rule.main) {
|
||||
if (
|
||||
settings.cfg.resultInfo.showResultForm === "after"
|
||||
|| isResultQuestionEmpty(nextQuestion)
|
||||
) setCurrentQuizStep("contactform");
|
||||
}, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm]);
|
||||
|
||||
const showResultAfterContactForm = useCallback(() => {
|
||||
if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
|
||||
if (isResultQuestionEmpty(currentQuestion)) {
|
||||
enqueueSnackbar("Данные отправлены");
|
||||
return;
|
||||
userAnswers.some((answer) =>
|
||||
branchingRule.rules[0].answers.includes(answer)
|
||||
)
|
||||
) {
|
||||
return branchingRule.next;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentQuizStep("question");
|
||||
}, [currentQuestion, setCurrentQuizStep]);
|
||||
if (!currentQuestion.required) {
|
||||
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);
|
||||
}, [prevQuestion]);
|
||||
const nextQuestionId = useMemo(() => {
|
||||
if (settings.cfg.score) {
|
||||
return nextQuestionIdPointsLogic();
|
||||
}
|
||||
return nextQuestionIdMainLogic();
|
||||
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score]);
|
||||
|
||||
const moveToNextQuestion = useCallback(() => {
|
||||
if (!nextQuestion) throw new Error("Next question not found");
|
||||
const prevQuestion =
|
||||
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
|
||||
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}}`
|
||||
});
|
||||
};
|
||||
return results[numbers.indexOf(indexOfNext)];
|
||||
}, [pointsSum, sortedQuestions]);
|
||||
|
||||
setCurrentQuestionId(nextQuestion.id);
|
||||
}, [nextQuestion, showResult]);
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const setQuestion = useCallback((questionId: string) => {
|
||||
const question = sortedQuestions.find(q => q.id === questionId);
|
||||
if (!question) return;
|
||||
return next;
|
||||
}, [
|
||||
nextQuestionId,
|
||||
findResultPointsLogic,
|
||||
linearQuestionIndex,
|
||||
sortedQuestions,
|
||||
settings.cfg.score,
|
||||
]);
|
||||
|
||||
setCurrentQuestionId(question.id);
|
||||
}, [sortedQuestions]);
|
||||
const showResult = useCallback(() => {
|
||||
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 hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
|
||||
const showResultAfterContactForm = useCallback(() => {
|
||||
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) {
|
||||
return hasAnswer;
|
||||
}
|
||||
setCurrentQuizStep("question");
|
||||
}, [currentQuestion, setCurrentQuizStep]);
|
||||
|
||||
return Boolean(nextQuestion);
|
||||
}, [answers, currentQuestion, nextQuestion]);
|
||||
const moveToPrevQuestion = useCallback(() => {
|
||||
if (!prevQuestion) throw new Error("Previous question not found");
|
||||
|
||||
useDebugValue({
|
||||
linearQuestionIndex,
|
||||
currentQuestion: currentQuestion,
|
||||
prevQuestion: prevQuestion,
|
||||
nextQuestion: nextQuestion,
|
||||
});
|
||||
setCurrentQuestionId(prevQuestion.id);
|
||||
}, [prevQuestion]);
|
||||
|
||||
return {
|
||||
currentQuestion,
|
||||
currentQuestionStepNumber: linearQuestionIndex === null ? null : linearQuestionIndex + 1,
|
||||
isNextButtonEnabled,
|
||||
isPreviousButtonEnabled,
|
||||
moveToPrevQuestion,
|
||||
moveToNextQuestion,
|
||||
showResultAfterContactForm,
|
||||
setQuestion,
|
||||
};
|
||||
}
|
||||
const moveToNextQuestion = useCallback(() => {
|
||||
if (!nextQuestion) throw new Error("Next question not found");
|
||||
|
||||
if (nextQuestion.type === "result") return showResult();
|
||||
// Засчитываем переход с вопроса дальше
|
||||
vkMetrics.questionPassed(currentQuestion.id);
|
||||
yandexMetrics.questionPassed(currentQuestion.id);
|
||||
|
||||
setCurrentQuestionId(nextQuestion.id);
|
||||
}, [nextQuestion, showResult]);
|
||||
|
||||
const setQuestion = useCallback(
|
||||
(questionId: string) => {
|
||||
const question = sortedQuestions.find((q) => q.id === questionId);
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user