use antifraud setting from quiz config

rename quiz settings context consumer hook
This commit is contained in:
nflnkr 2024-05-31 20:56:17 +03:00
parent 6c2e44ca66
commit 22b3682848
36 changed files with 135 additions and 135 deletions

11
lib/api/hooks.ts Normal file

@ -0,0 +1,11 @@
import useSWR from "swr";
import { getQuizData } from "./quizRelase";
export function useQuizData(quizId: string) {
return useSWR(["quizData", quizId], (params) => getQuizData(params[1]), {
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
});
}

@ -1,30 +1,23 @@
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react"; import { useQuizData } from "@/api/hooks";
import { ErrorBoundary } from "react-error-boundary"; import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
import useSWR from "swr"; import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
import { SnackbarProvider } from "notistack"; import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import moment from "moment"; import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { Box, ScopedCssBaseline, CssBaseline, ThemeProvider } from "@mui/material"; import { QuizSettingsContext } from "@contexts/QuizDataContext";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import type { QuizSettings } from "@model/settingsData";
import { Box, CssBaseline, ScopedCssBaseline, ThemeProvider } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers"; import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { ruRU } from "@mui/x-date-pickers/locales"; import { ruRU } from "@mui/x-date-pickers/locales";
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
import { getQuizData } from "@/api/quizRelase";
import { QuizDataContext } from "@contexts/QuizDataContext";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { handleComponentError } from "@utils/handleComponentError"; import { handleComponentError } from "@utils/handleComponentError";
import lightTheme from "@utils/themes/light"; import lightTheme from "@utils/themes/light";
import moment from "moment";
import type { QuizSettings } from "@model/settingsData"; import { SnackbarProvider } from "notistack";
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
moment.locale("ru"); moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText; const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
@ -49,16 +42,7 @@ function QuizAnswererInner({
const [quizViewStore] = useState(createQuizViewStore); const [quizViewStore] = useState(createQuizViewStore);
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth); const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
const rootContainerRef = useRef<HTMLDivElement>(null); const rootContainerRef = useRef<HTMLDivElement>(null);
const { data, error, isLoading } = useSWR( const { data, error, isLoading } = useQuizData(quizId);
quizSettings ? null : ["quizData", quizId],
(params) => getQuizData(params[1]),
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
}
);
const vkMetrics = useVkMetricsGoals(quizSettings?.settings.cfg.vkMetricsNumber); const vkMetrics = useVkMetricsGoals(quizSettings?.settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(quizSettings?.settings.cfg.yandexMetricsNumber); const yandexMetrics = useYandexMetricsGoals(quizSettings?.settings.cfg.yandexMetricsNumber);
@ -67,6 +51,7 @@ function QuizAnswererInner({
vkMetrics.quizOpened(); vkMetrics.quizOpened();
yandexMetrics.quizOpened(); yandexMetrics.quizOpened();
}, 4000); }, 4000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useLayoutEffect(() => { useLayoutEffect(() => {
@ -88,6 +73,7 @@ function QuizAnswererInner({
if (isLoading) return <LoadingSkeleton />; if (isLoading) return <LoadingSkeleton />;
if (error) return <ApologyPage error={error} />; if (error) return <ApologyPage error={error} />;
if (!data) return <LoadingSkeleton />;
quizSettings ??= data; quizSettings ??= data;
if (!quizSettings) throw new Error("Quiz data is null"); if (!quizSettings) throw new Error("Quiz data is null");
@ -114,7 +100,7 @@ function QuizAnswererInner({
return ( return (
<QuizViewContext.Provider value={quizViewStore}> <QuizViewContext.Provider value={quizViewStore}>
<RootContainerWidthContext.Provider value={rootContainerWidth}> <RootContainerWidthContext.Provider value={rootContainerWidth}>
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}> <QuizSettingsContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
{disableGlobalCss ? ( {disableGlobalCss ? (
<ScopedCssBaseline <ScopedCssBaseline
sx={{ sx={{
@ -128,7 +114,7 @@ function QuizAnswererInner({
) : ( ) : (
<CssBaseline>{quizContainer}</CssBaseline> <CssBaseline>{quizContainer}</CssBaseline>
)} )}
</QuizDataContext.Provider> </QuizSettingsContext.Provider>
</RootContainerWidthContext.Provider> </RootContainerWidthContext.Provider>
</QuizViewContext.Provider> </QuizViewContext.Provider>
); );

@ -8,7 +8,7 @@ import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inpu
import { ContactTextBlock } from "./ContactTextBlock"; import { ContactTextBlock } from "./ContactTextBlock";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { sendFC, SendFCParams } from "@api/quizRelase"; import { sendFC, SendFCParams } from "@api/quizRelase";
@ -32,7 +32,7 @@ type Props = {
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const theme = useTheme(); const theme = useTheme();
const { settings, questions, quizId, show_badge, preview } = useQuizData(); const { settings, questions, quizId, show_badge, preview } = useQuizSettings();
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [name, setName] = useState(""); const [name, setName] = useState("");

@ -1,6 +1,6 @@
import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material"; import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
import { useQuizData } from "@contexts/QuizDataContext.ts"; import { useQuizSettings } from "@contexts/QuizDataContext.ts";
import { useIMask } from "react-imask"; import { useIMask } from "react-imask";
import { quizThemes } from "@utils/themes/Publication/themePublication.ts"; import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
import { FC, useState } from "react"; import { FC, useState } from "react";
@ -21,7 +21,7 @@ const TextField = MuiTextField as unknown as FC<TextFieldProps>;
export const CustomInput = ({ title, desc, Icon, onChange, isPhone }: InputProps) => { export const CustomInput = ({ title, desc, Icon, onChange, isPhone }: InputProps) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 600; const isMobile = useRootContainerSize() < 600;
const { settings } = useQuizData(); const { settings } = useQuizSettings();
const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]); const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]);
const { ref } = useIMask({ mask }); const { ref } = useIMask({ mask });
return ( return (

@ -1,4 +1,4 @@
import { useQuizData } from "@contexts/QuizDataContext.ts"; import { useQuizSettings } from "@contexts/QuizDataContext.ts";
import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx"; import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx"; import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx"; import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
@ -32,7 +32,7 @@ export const Inputs = ({
adress, adress,
setAdress, setAdress,
}: InputsProps) => { }: InputsProps) => {
const { settings } = useQuizData(); const { settings } = useQuizSettings();
const FC = settings.cfg.formContact.fields; const FC = settings.cfg.formContact.fields;
if (!FC) return null; if (!FC) return null;

@ -1,7 +1,7 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import Stepper from "@ui_kit/Stepper"; import Stepper from "@ui_kit/Stepper";
@ -13,7 +13,7 @@ type FooterProps = {
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => { export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme(); const theme = useTheme();
const { questions, settings } = useQuizData(); const { questions, settings } = useQuizSettings();
const questionsAmount = questions.filter(({ type }) => type !== "result").length; const questionsAmount = questions.filter(({ type }) => type !== "result").length;
return ( return (

@ -15,7 +15,7 @@ import { Varimg } from "./questions/Varimg";
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared"; import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ"; import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark"; import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { notReachable } from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
@ -40,7 +40,7 @@ export const Question = ({
questionSelect, questionSelect,
}: Props) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
const { settings, show_badge } = useQuizData(); const { settings, show_badge } = useQuizSettings();
return ( return (
<Box <Box

@ -1,4 +1,4 @@
import { useQuizData } from "@/contexts/QuizDataContext"; import { useQuizSettings } from "@/contexts/QuizDataContext";
import { AnyTypedQuizQuestion } from "@/model/questionTypes/shared"; import { AnyTypedQuizQuestion } from "@/model/questionTypes/shared";
import { Box, FormControl, MenuItem, Select as MuiSelect, useTheme } from "@mui/material"; import { Box, FormControl, MenuItem, Select as MuiSelect, useTheme } from "@mui/material";
@ -9,7 +9,7 @@ interface Props {
export default function QuestionSelect({ selectedQuestion, setQuestion }: Props) { export default function QuestionSelect({ selectedQuestion, setQuestion }: Props) {
const theme = useTheme(); const theme = useTheme();
const { questions, preview } = useQuizData(); const { questions, preview } = useQuizSettings();
if (!preview) return null; if (!preview) return null;

@ -4,7 +4,7 @@ import { Box, Button, Link, Typography, useTheme } from "@mui/material";
import { useQuizViewStore } from "@/stores/quizView"; import { useQuizViewStore } from "@/stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals"; import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals"; import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
@ -25,7 +25,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000; const isTablet = useRootContainerSize() < 1000;
const { settings, show_badge, quizId } = useQuizData(); const { settings, show_badge, quizId } = useQuizSettings();
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep); const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
const spec = settings.cfg.spec; const spec = settings.cfg.spec;
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber); const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);

@ -1,7 +1,7 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -22,7 +22,7 @@ type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => { const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
const size = useRootContainerSize(); const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100; const isTablet = size >= 700 && size < 1100;
const { settings } = useQuizData(); const { settings } = useQuizSettings();
return ( return (
<Box <Box
@ -169,7 +169,7 @@ const ExpandedLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundB
const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => { const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100; const isTablet = useRootContainerSize() < 1100;
const { settings } = useQuizData(); const { settings } = useQuizSettings();
return ( return (
<Box <Box
sx={{ sx={{

@ -1,6 +1,6 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -18,7 +18,7 @@ type StartPageMobileProps = {
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">; type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => { const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
const { settings } = useQuizData(); const { settings } = useQuizSettings();
return ( return (
<Box <Box
@ -161,7 +161,7 @@ const ExpandedMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
); );
const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => { const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
const { settings } = useQuizData(); const { settings } = useQuizSettings();
return ( return (
<Box <Box
sx={{ sx={{

@ -2,7 +2,7 @@ import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType"; import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useUADevice } from "@utils/hooks/useUADevice"; import { useUADevice } from "@utils/hooks/useUADevice";
@ -19,7 +19,7 @@ import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
export const StartPageViewPublication = () => { export const StartPageViewPublication = () => {
const theme = useTheme(); const theme = useTheme();
const { settings, show_badge, quizId, questions } = useQuizData(); const { settings, show_badge, quizId, questions } = useQuizSettings();
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep); const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);

@ -1,5 +1,5 @@
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { ThemeProvider, Typography } from "@mui/material"; import { ThemeProvider, Typography } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl"; import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
@ -18,7 +18,7 @@ import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx"; import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
export default function ViewPublicationPage() { export default function ViewPublicationPage() {
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizData(); const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep); let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
const { const {
@ -50,7 +50,7 @@ export default function ViewPublicationPage() {
[changeFaviconAndTitle, settings.cfg.startpage.favIcon, settings.name] [changeFaviconAndTitle, settings.cfg.startpage.favIcon, settings.name]
); );
if (recentlyCompleted) throw new Error("Quiz already completed"); if (settings.cfg.antifraud && recentlyCompleted) throw new Error("Quiz already completed");
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question"; if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
if (!currentQuestion) if (!currentQuestion)

@ -6,7 +6,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@/stores/quizView"; import { useQuizViewStore } from "@/stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -21,7 +21,7 @@ type DateProps = {
export const Date = ({ currentQuestion }: DateProps) => { export const Date = ({ currentQuestion }: DateProps) => {
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const { updateAnswer } = useQuizViewStore((state) => state); const { updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme(); const theme = useTheme();

@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
@ -25,7 +25,7 @@ type EmojiVariantProps = {
}; };
export const EmojiVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: EmojiVariantProps) => { export const EmojiVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: EmojiVariantProps) => {
const { quizId, settings, preview } = useQuizData(); const { quizId, settings, preview } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state); const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
const theme = useTheme(); const theme = useTheme();

@ -3,7 +3,7 @@ import { Box, ButtonBase, Skeleton, Typography, useTheme } from "@mui/material";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { sendAnswer, sendFile } from "@api/quizRelase"; import { sendAnswer, sendFile } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
@ -27,7 +27,7 @@ type UploadFileProps = {
}; };
export const UploadFile = ({ currentQuestion, setModalWarningType, isSending, setIsSending }: UploadFileProps) => { export const UploadFile = ({ currentQuestion, setModalWarningType, isSending, setIsSending }: UploadFileProps) => {
const { quizId, preview } = useQuizData(); const { quizId, preview } = useQuizSettings();
const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState<boolean>(false); const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState<boolean>(false);
const theme = useTheme(); const theme = useTheme();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);

@ -1,7 +1,7 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material"; import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import CloseBold from "@icons/CloseBold"; import CloseBold from "@icons/CloseBold";
@ -14,7 +14,7 @@ type UploadedFileProps = {
}; };
export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => { export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => {
const { quizId, preview } = useQuizData(); const { quizId, preview } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const { updateAnswer } = useQuizViewStore((state) => state); const { updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme(); const theme = useTheme();

@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
@ -22,8 +22,7 @@ type ImagesProps = {
}; };
export const ImageVariant = ({ currentQuestion, variant, isSending, setIsSending, index }: ImagesProps) => { export const ImageVariant = ({ currentQuestion, variant, isSending, setIsSending, index }: ImagesProps) => {
const { quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizSettings();
const { settings } = useQuizData();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state); const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme(); const theme = useTheme();

@ -11,7 +11,7 @@ import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import type { QuizQuestionNumber } from "@model/questionTypes/number"; import type { QuizQuestionNumber } from "@model/questionTypes/number";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { ChangeEvent, SyntheticEvent } from "react"; import type { ChangeEvent, SyntheticEvent } from "react";
@ -28,7 +28,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
const [reversedInputValue, setReversedInputValue] = useState<string>("0"); const [reversedInputValue, setReversedInputValue] = useState<string>("0");
const [reversedMinRange, setReversedMinRange] = useState<string>("0"); const [reversedMinRange, setReversedMinRange] = useState<string>("0");
const [reversedMaxRange, setReversedMaxRange] = useState<string>("100000000000"); const [reversedMaxRange, setReversedMaxRange] = useState<string>("100000000000");
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state); const { updateAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const theme = useTheme(); const theme = useTheme();

@ -5,7 +5,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import FlagIcon from "@icons/questionsPage/FlagIcon"; import FlagIcon from "@icons/questionsPage/FlagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini"; import StarIconMini from "@icons/questionsPage/StarIconMini";
@ -54,7 +54,7 @@ type RatingProps = {
export const Rating = ({ currentQuestion }: RatingProps) => { export const Rating = ({ currentQuestion }: RatingProps) => {
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { quizId, preview } = useQuizData(); const { quizId, preview } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state); const { updateAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const theme = useTheme(); const theme = useTheme();

@ -6,7 +6,7 @@ import { Select as SelectComponent } from "@/components/ViewPublicationPage/tool
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -18,7 +18,7 @@ type SelectProps = {
export const Select = ({ currentQuestion }: SelectProps) => { export const Select = ({ currentQuestion }: SelectProps) => {
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { quizId, settings, preview } = useQuizData(); const { quizId, settings, preview } = useQuizSettings();
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state); const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const theme = useTheme(); const theme = useTheme();

@ -3,7 +3,7 @@ import { Box, Typography, useTheme } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { Answer, useQuizViewStore } from "@stores/quizView"; import { Answer, useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -19,7 +19,7 @@ interface TextNormalProps {
} }
export const TextNormal = ({ currentQuestion, answer, inputHC }: TextNormalProps) => { export const TextNormal = ({ currentQuestion, answer, inputHC }: TextNormalProps) => {
const { settings } = useQuizData(); const { settings } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state); const { updateAnswer } = useQuizViewStore((state) => state);
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const theme = useTheme(); const theme = useTheme();

@ -1,7 +1,7 @@
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material"; import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { Answer, useQuizViewStore } from "@stores/quizView"; import { Answer, useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -46,7 +46,7 @@ interface TextSpecialProps {
} }
export const TextSpecial = ({ currentQuestion, answer, inputHC, stepNumber }: TextSpecialProps) => { export const TextSpecial = ({ currentQuestion, answer, inputHC, stepNumber }: TextSpecialProps) => {
const { settings } = useQuizData(); const { settings } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state); const { updateAnswer } = useQuizViewStore((state) => state);
const isHorizontal = ORIENTATION[Number(stepNumber) - 1].horizontal; const isHorizontal = ORIENTATION[Number(stepNumber) - 1].horizontal;
const theme = useTheme(); const theme = useTheme();

@ -7,7 +7,7 @@ import { TextNormal } from "./TextNormal";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import type { QuizQuestionText } from "@model/questionTypes/text"; import type { QuizQuestionText } from "@model/questionTypes/text";
@ -18,8 +18,7 @@ type TextProps = {
export const Text = ({ currentQuestion, stepNumber }: TextProps) => { export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { settings, preview } = useQuizData(); const { settings, preview, quizId } = useQuizSettings();
const { quizId } = useQuizData();
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};

@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -34,7 +34,7 @@ export const VariantItem = ({
isSending: boolean; isSending: boolean;
setIsSending: (a: boolean) => void; setIsSending: (a: boolean) => void;
}) => { }) => {
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizSettings();
const theme = useTheme(); const theme = useTheme();
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state); const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);

@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -24,7 +24,7 @@ type VarimgVariantProps = {
}; };
export const VarimgVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: VarimgVariantProps) => { export const VarimgVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: VarimgVariantProps) => {
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizSettings();
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state); const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers); const answers = useQuizViewStore((state) => state.answers);

@ -1,6 +1,6 @@
import { Button, useTheme } from "@mui/material"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { Button } from "@mui/material";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext";
interface Props { interface Props {
isNextButtonEnabled: boolean; isNextButtonEnabled: boolean;
@ -8,8 +8,8 @@ interface Props {
} }
export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) { export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
const theme = useTheme(); const { settings } = useQuizSettings();
const { settings } = useQuizData();
return ( return (
<Button <Button
disabled={!isNextButtonEnabled} disabled={!isNextButtonEnabled}

@ -1,7 +1,7 @@
import { Button, useTheme } from "@mui/material"; import { Button, useTheme } from "@mui/material";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext"; import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
interface Props { interface Props {
isPreviousButtonEnabled: boolean; isPreviousButtonEnabled: boolean;
@ -10,7 +10,7 @@ interface Props {
export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) { export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) {
const theme = useTheme(); const theme = useTheme();
const { settings } = useQuizData(); const { settings } = useQuizSettings();
const isMobileMini = useRootContainerSize() < 382; const isMobileMini = useRootContainerSize() < 382;
return ( return (
<Button <Button

@ -1,17 +1,18 @@
import { QuizSettings } from "@model/settingsData"; import { QuizSettings } from "@model/settingsData";
import { createContext, useContext } from "react"; import { createContext, useContext } from "react";
type QuizData = QuizSettings & { export const QuizSettingsContext = createContext<
quizId: string; | (QuizSettings & {
preview: boolean; quizId: string;
changeFaviconAndTitle: boolean; preview: boolean;
}; changeFaviconAndTitle: boolean;
})
export const QuizDataContext = createContext<QuizData | null>(null); | null
>(null);
export const useQuizData = () => {
const quizData = useContext(QuizDataContext); export const useQuizSettings = () => {
if (quizData === null) throw new Error("QuizData context is null"); const quizSettings = useContext(QuizSettingsContext);
if (quizSettings === null) throw new Error("QuizSettings context is null");
return quizData;
return quizSettings;
}; };

@ -110,6 +110,8 @@ export interface QuizConfig {
law?: string; law?: string;
}; };
meta: string; meta: string;
antifraud: boolean;
showfc: boolean;
yandexMetricsNumber: number | undefined; yandexMetricsNumber: number | undefined;
vkMetricsNumber: number | undefined; vkMetricsNumber: number | undefined;
} }

@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
import moment from "moment"; import moment from "moment";
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData"; import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizSettings } from "@contexts/QuizDataContext";
import { useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
@ -11,7 +11,7 @@ import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals"; import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
export function useQuestionFlowControl() { export function useQuestionFlowControl() {
const { settings, questions } = useQuizData(); const { settings, questions } = useQuizSettings();
const sortedQuestions = useMemo(() => { const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page); return [...questions].sort((a, b) => a.page - b.page);
}, [questions]); }, [questions]);

@ -1,3 +1,4 @@
import { useQuizData } from "@/api/hooks";
import { BannerWidgetComponentProps } from "@/model/widget/banner"; import { BannerWidgetComponentProps } from "@/model/widget/banner";
import lightTheme from "@/utils/themes/light"; import lightTheme from "@/utils/themes/light";
import { Box, Button, Fade, IconButton, ThemeProvider, Typography, useMediaQuery } from "@mui/material"; import { Box, Button, Fade, IconButton, ThemeProvider, Typography, useMediaQuery } from "@mui/material";
@ -6,7 +7,6 @@ import { createPortal } from "react-dom";
import BannerIcon from "../shared/BannerIcon"; import BannerIcon from "../shared/BannerIcon";
import QuizDialog from "../shared/QuizDialog"; import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe"; import RunningStripe from "../shared/RunningStripe";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer"; import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
const PADDING = 10; const PADDING = 10;
@ -35,7 +35,7 @@ export default function QuizBanner({
const [isQuizShown, setIsQuizShown] = useState<boolean>(false); const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash); const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime); const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
const isQuizCompleted = useQuizCompletionStatus(quizId); const { data: quizData } = useQuizData(quizId);
const preventQuizAutoShowRef = useRef<boolean>(false); const preventQuizAutoShowRef = useRef<boolean>(false);
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false); const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@ -81,6 +81,10 @@ export default function QuizBanner({
} }
if (hideOnMobile && isMobile) return null; if (hideOnMobile && isMobile) return null;
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
const showButtonFlash = isQuizCompleted && isFlashEnabled;
return createPortal( return createPortal(
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
@ -171,7 +175,7 @@ export default function QuizBanner({
{quizHeaderText} {quizHeaderText}
</Typography> </Typography>
</Box> </Box>
{!isQuizCompleted && isFlashEnabled && <RunningStripe />} {showButtonFlash && <RunningStripe />}
</Button> </Button>
<IconButton <IconButton
onClick={onWidgetClose} onClick={onWidgetClose}

@ -1,10 +1,10 @@
import { useQuizData } from "@/api/hooks";
import { ButtonWidgetComponentProps } from "@/model/widget/button"; import { ButtonWidgetComponentProps } from "@/model/widget/button";
import lightTheme from "@/utils/themes/light"; import lightTheme from "@/utils/themes/light";
import { Button, ThemeProvider, useMediaQuery } from "@mui/material"; import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import QuizDialog from "../shared/QuizDialog"; import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe"; import RunningStripe from "../shared/RunningStripe";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
export default function OpenQuizButton({ export default function OpenQuizButton({
quizId, quizId,
@ -23,7 +23,7 @@ export default function OpenQuizButton({
}: ButtonWidgetComponentProps) { }: ButtonWidgetComponentProps) {
const isMobile = useMediaQuery("(max-width: 600px)"); const isMobile = useMediaQuery("(max-width: 600px)");
const [isQuizShown, setIsQuizShown] = useState<boolean>(false); const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isQuizCompleted = useQuizCompletionStatus(quizId); const { data: quizData } = useQuizData(quizId);
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash); const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
const preventQuizAutoShowRef = useRef<boolean>(false); const preventQuizAutoShowRef = useRef<boolean>(false);
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false); const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@ -70,6 +70,10 @@ export default function OpenQuizButton({
} }
if (hideOnMobile && isMobile) return null; if (hideOnMobile && isMobile) return null;
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
const showButtonFlash = isQuizCompleted && isFlashEnabled;
return ( return (
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
@ -108,7 +112,7 @@ export default function OpenQuizButton({
]} ]}
> >
{buttonText} {buttonText}
{!isQuizCompleted && isFlashEnabled && <RunningStripe />} {showButtonFlash && <RunningStripe />}
</Button> </Button>
<QuizDialog <QuizDialog
open={isQuizShown} open={isQuizShown}

@ -1,8 +1,8 @@
import { useQuizData } from "@/api/hooks";
import { PopupWidgetComponentProps } from "@/model/widget/popup";
import { useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import QuizDialog from "../shared/QuizDialog"; import QuizDialog from "../shared/QuizDialog";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import { useMediaQuery } from "@mui/material";
import { PopupWidgetComponentProps } from "@/model/widget/popup";
export default function QuizPopup({ export default function QuizPopup({
quizId, quizId,
@ -14,8 +14,8 @@ export default function QuizPopup({
}: PopupWidgetComponentProps) { }: PopupWidgetComponentProps) {
const initialIsQuizShown = autoShowQuizTime !== null || openOnLeaveAttempt ? false : true; const initialIsQuizShown = autoShowQuizTime !== null || openOnLeaveAttempt ? false : true;
const { data: quizData } = useQuizData(quizId);
const [isQuizShown, setIsQuizShown] = useState<boolean>(initialIsQuizShown); const [isQuizShown, setIsQuizShown] = useState<boolean>(initialIsQuizShown);
const isQuizCompleted = useQuizCompletionStatus(quizId);
const isMobile = useMediaQuery("(max-width: 600px)"); const isMobile = useMediaQuery("(max-width: 600px)");
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false); const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@ -54,6 +54,9 @@ export default function QuizPopup({
[openOnLeaveAttempt] [openOnLeaveAttempt]
); );
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
if (isQuizCompleted) return null; if (isQuizCompleted) return null;
if (hideOnMobile && isMobile) return null; if (hideOnMobile && isMobile) return null;

@ -1,13 +0,0 @@
import { useMemo } from "react";
export function useQuizCompletionStatus(quizId: string): boolean {
return useMemo(() => {
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
if (typeof sessions[quizId] === "number" && Date.now() - sessions[quizId] < 86400000) {
return true;
}
return false;
}, [quizId]);
}

@ -1,3 +1,5 @@
import { useQuizData } from "@/api/hooks";
import { SideWidgetComponentProps } from "@/model/widget/side";
import lightTheme from "@/utils/themes/light"; import lightTheme from "@/utils/themes/light";
import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material"; import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
@ -5,8 +7,6 @@ import { createPortal } from "react-dom";
import QuizDialog from "../shared/QuizDialog"; import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe"; import RunningStripe from "../shared/RunningStripe";
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer"; import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import { SideWidgetComponentProps } from "@/model/widget/side";
const PADDING = 10; const PADDING = 10;
const WIDGET_DEFAULT_WIDTH = "600px"; const WIDGET_DEFAULT_WIDTH = "600px";
@ -26,7 +26,7 @@ export default function QuizSideButton({
}: SideWidgetComponentProps) { }: SideWidgetComponentProps) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false); const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isMobile = useMediaQuery("(max-width: 600px)"); const isMobile = useMediaQuery("(max-width: 600px)");
const isQuizCompleted = useQuizCompletionStatus(quizId); const { data: quizData } = useQuizData(quizId);
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash); const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime); const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
const preventQuizAutoShowRef = useRef<boolean>(false); const preventQuizAutoShowRef = useRef<boolean>(false);
@ -53,6 +53,10 @@ export default function QuizSideButton({
} }
if (hideOnMobile && isMobile) return null; if (hideOnMobile && isMobile) return null;
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
const showButtonFlash = isQuizCompleted && isFlashEnabled;
return createPortal( return createPortal(
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
@ -113,7 +117,7 @@ export default function QuizSideButton({
]} ]}
> >
Пройти квиз Пройти квиз
{!isQuizCompleted && isFlashEnabled && <RunningStripe />} {showButtonFlash && <RunningStripe />}
</Button> </Button>
</Fade> </Fade>
</ThemeProvider>, </ThemeProvider>,