overtime

CHANGELOG.md

@@ -1,3 +1,4 @@
+1.0.3 Добавлена функция отсчёта до конца жизни квиза
 1.0.2 Страничка результатов способна показать историю и правильность ответов для балловго квиза
 1.0.1 Отображение для баллового квиза на страничке результатов списка
 1.0.0 Добавлены фичи "мультиответ", "перенос строки в своём ответе", "свой ответ", "плейсхолдер своего ответа"

lib/components/ViewPublicationPage/StartPageViewPublication/OverTime.tsx

@@ -0,0 +1,213 @@
+import { Box, Typography, useTheme, SxProps, Theme } from "@mui/material";
+import { useQuizStore } from "@stores/useQuizStore";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+type OverTimeProps = {
+  sx?: SxProps<Theme>;
+};
+
+export const OverTime = ({ sx }: OverTimeProps) => {
+  const theme = useTheme();
+  const { settings } = useQuizStore();
+  const { t } = useTranslation();
+  const [currentTime, setCurrentTime] = React.useState(moment());
+
+  // Реактивный таймер с useEffect
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(moment());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Проверяем, включен ли overTime
+  const overTimeConfig = settings?.cfg?.overTime;
+  const isEnabled = overTimeConfig?.enabled;
+
+  // Если не включен, не показываем карточку
+  if (!isEnabled) {
+    return null;
+  }
+
+  // Функция для расчета времени до окончания
+  const calculateTimeLeft = (now: moment.Moment) => {
+    // Для тестирования: добавляем 2 часа к текущему времени
+    const testEndsAt = moment().add(2, "hours");
+    const endsAt = overTimeConfig?.endsAt ? moment(overTimeConfig.endsAt) : testEndsAt;
+
+    if (endsAt.isBefore(now) || endsAt.isSame(now)) {
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    }
+
+    const duration = moment.duration(endsAt.diff(now));
+
+    return {
+      days: Math.floor(duration.asDays()),
+      hours: duration.hours(),
+      minutes: duration.minutes(),
+      seconds: duration.seconds(),
+    };
+  };
+
+  const { days, hours, minutes, seconds } = calculateTimeLeft(currentTime);
+
+  return (
+    <Box
+      sx={{
+        width: "225px",
+        backgroundColor: theme.palette.paperBackground,
+        boxShadow: "1px 1px 4px 0px rgba(51, 54, 71, 0.29)",
+        borderRadius: "8px",
+        p: "10px",
+        ...sx,
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: "12px",
+          color: theme.palette.paperText,
+          textAlign: "center",
+        }}
+      >
+        {overTimeConfig?.description || t("Quiz will become unavailable in")}
+      </Typography>
+      <Box
+        sx={{
+          display: "inline-flex",
+          justifyContent: "space-around",
+          alignItems: "center",
+          width: "100%",
+          mt: "8px",
+          color: theme.palette.paperSecondaryText,
+        }}
+      >
+        <Box
+          sx={{
+            bgcolor: theme.palette.paperBlockBackground,
+            width: "42px",
+            height: "45px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            borderRadius: "8px",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "16px",
+              color: theme.palette.paperText,
+              lineHeight: 1.2,
+            }}
+          >
+            {days}
+          </Typography>
+          <Typography
+            sx={{
+              fontSize: "10px",
+              lineHeight: 1.2,
+            }}
+          >
+            {t("days")}
+          </Typography>
+        </Box>
+        :
+        <Box
+          sx={{
+            bgcolor: theme.palette.paperBlockBackground,
+            width: "42px",
+            height: "45px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            borderRadius: "8px",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "16px",
+              color: theme.palette.paperText,
+              lineHeight: 1.2,
+            }}
+          >
+            {hours}
+          </Typography>
+          <Typography
+            sx={{
+              fontSize: "10px",
+              lineHeight: 1.2,
+            }}
+          >
+            {t("hours")}
+          </Typography>
+        </Box>
+        :
+        <Box
+          sx={{
+            bgcolor: theme.palette.paperBlockBackground,
+            width: "42px",
+            height: "45px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            borderRadius: "8px",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "16px",
+              color: theme.palette.paperText,
+              lineHeight: 1.2,
+            }}
+          >
+            {minutes}
+          </Typography>
+          <Typography
+            sx={{
+              fontSize: "10px",
+              lineHeight: 1.2,
+            }}
+          >
+            {t("minutes")}
+          </Typography>
+        </Box>
+        :
+        <Box
+          sx={{
+            bgcolor: theme.palette.paperBlockBackground,
+            width: "42px",
+            height: "45px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            borderRadius: "8px",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "16px",
+              color: theme.palette.paperText,
+              lineHeight: 1.2,
+            }}
+          >
+            {seconds}
+          </Typography>
+          <Typography
+            sx={{
+              fontSize: "10px",
+              lineHeight: 1.2,
+            }}
+          >
+            {t("seconds")}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -18,6 +18,9 @@ import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoa
 import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe";
 
 import { isProduction } from "@/utils/defineDomain";
+import { useEffect, useState } from "react";
+import moment from "moment";
+import { OverTime } from "./OverTime";
 
 export const StartPageViewPublication = () => {
   const theme = useTheme();
@@ -32,6 +35,17 @@ export const StartPageViewPublication = () => {
   const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
   const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
 
+  const [currentTime, setCurrentTime] = useState(moment());
+
+  // Реактивный таймер для обновления времени
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(moment());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   const handleCopyNumber = () => {
     navigator.clipboard.writeText(settings.cfg.info.phonenumber);
 
@@ -39,15 +53,6 @@ export const StartPageViewPublication = () => {
     yandexMetrics.phoneNumberOpened();
   };
 
-  console.log("------------------------------------------------");
-  console.log("Background type:", settings.cfg.startpage.background.type);
-  console.log("Is image type:", settings.cfg.startpage.background.type === "image");
-  console.log("Is video type:", settings.cfg.startpage.background.type === "video");
-  console.log("Video URL:", settings.cfg.startpage.background.video);
-  console.log("Desktop background:", settings.cfg.startpage.background.desktop);
-  console.log("Startpage type:", settings.cfg.startpageType);
-  console.log("------------------------------------------------");
-
   const background =
     settings.cfg.startpage.background.type === "image" ? (
       <img
@@ -96,6 +101,12 @@ export const StartPageViewPublication = () => {
     <Box
       sx={{
         margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
+        display:
+          isMobile && settings.cfg.startpage.position === "center" && settings.cfg.startpageType === "expanded"
+            ? "flex"
+            : "block",
+        flexDirection: "column",
+        alignItems: "center",
       }}
     >
       <Box
@@ -146,6 +157,8 @@ export const StartPageViewPublication = () => {
           {settings.cfg.info.orgname}
         </Typography>
       </Box>
+      {((settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position !== "center") ||
+        (isMobile && settings.cfg.startpageType === "expanded")) && <OverTime />}
     </Box>
   );
 
@@ -159,13 +172,6 @@ export const StartPageViewPublication = () => {
         alignItems: "center",
         gap: "7px",
         textDecoration: "none",
-        marginLeft:
-          settings.cfg.startpageType === "expanded" &&
-          settings.cfg.startpage.position === "center" &&
-          !isTablet &&
-          !isMobile
-            ? "61px"
-            : undefined,
       }}
     >
       {settings.cfg.startpageType === "expanded" ? (
@@ -182,6 +188,14 @@ export const StartPageViewPublication = () => {
     (question) => question.type !== null && question.type !== "result"
   ).length;
 
+  // Проверяем, истекло ли время для overTime
+  const overTimeConfig = settings?.cfg?.overTime;
+  const isOverTimeEnabled = overTimeConfig?.enabled;
+  const isTimeExpired =
+    isOverTimeEnabled && overTimeConfig?.endsAt
+      ? currentTime.isAfter(moment(overTimeConfig.endsAt)) || currentTime.isSame(moment(overTimeConfig.endsAt))
+      : false;
+
   const onQuizStart = () => {
     setCurrentQuizStep("question");
 
@@ -289,7 +303,7 @@ export const StartPageViewPublication = () => {
               <Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
                 <Button
                   variant="contained"
-                  disabled={realQuestionsCount === 0}
+                  disabled={realQuestionsCount === 0 || isTimeExpired}
                   sx={{
                     fontSize: "18px",
                     padding: "10px 20px",
@@ -304,8 +318,13 @@ export const StartPageViewPublication = () => {
               </Box>
             </Box>
             <Box
+              id="here"
               sx={{
-                display: "flex",
+                display:
+                  settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile
+                    ? "grid"
+                    : "flex",
+                gridTemplateColumns: "1fr auto 1fr",
                 flexGrow: settings.cfg.startpageType === "centered" ? (isMobile ? 0 : 1) : 0,
                 gap: isMobile ? "30px" : "40px",
                 alignItems: "flex-end",
@@ -345,8 +364,18 @@ export const StartPageViewPublication = () => {
                     settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"
                       ? "2"
                       : "0",
+                  justifySelf: "end",
                 }}
               >
+                {((isMobile && settings.cfg.startpageType === "centered") ||
+                  settings.cfg.startpageType === "standard") && (
+                  <OverTime
+                    sx={{
+                      m: isMobile && settings.cfg.startpageType === "centered" ? "54px 0 20px" : "0",
+                      ml: settings.cfg.startpageType === "standard" && !isMobile ? "100%" : "0",
+                    }}
+                  />
+                )}
                 {settings.cfg.info.site && (
                   <ButtonBase
                     onClick={onSiteClick}
@@ -478,7 +507,25 @@ export const StartPageViewPublication = () => {
                 </Typography>
               </Box>
 
-              {show_badge && PenaBadge}
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "16px",
+                  alignItems:
+                    isMobile ||
+                    (settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center")
+                      ? "center"
+                      : "end",
+                }}
+              >
+                {((!isMobile && settings.cfg.startpageType === "centered") ||
+                  (!isMobile &&
+                    settings.cfg.startpageType === "expanded" &&
+                    settings.cfg.startpage.position === "center")) && <OverTime />}
+
+                {show_badge && PenaBadge}
+              </Box>
             </Box>
           </>
         }
@@ -489,3 +536,10 @@ export const StartPageViewPublication = () => {
     </Paper>
   );
 };
+
+/*
+
+display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+*/

lib/model/settingsData.ts

@@ -123,6 +123,11 @@ export interface QuizConfig {
   yandexMetricsNumber?: number;
   vkMetricsNumber?: number;
   backBlocked?: boolean;
+  overTime?: {
+    enabled: boolean;
+    endsAt: number;
+    description: string;
+  };
 }
 
 export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";

lib/utils/themes/Publication/themePublication.ts

@@ -4,6 +4,23 @@ import themePublic from "./genericPublication";
 import type { Theme } from "@mui/material";
 import type { QuizTheme } from "@model/settingsData";
 
+// Расширение интерфейса палитры Material-UI для добавления кастомных полей
+declare module "@mui/material/styles" {
+  interface Palette {
+    paperBackground: string;
+    paperText: string;
+    paperSecondaryText: string;
+    paperBlockBackground: string;
+  }
+
+  interface PaletteOptions {
+    paperBackground?: string;
+    paperText?: string;
+    paperSecondaryText?: string;
+    paperBlockBackground?: string;
+  }
+}
+
 const StandardTheme = createTheme({
   ...themePublic,
   palette: {
@@ -22,6 +39,10 @@ const StandardTheme = createTheme({
     background: {
       default: "#FFFFFF",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -43,6 +64,10 @@ const StandardDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -64,6 +89,10 @@ const PinkTheme = createTheme({
     background: {
       default: "#FFF9FC",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -85,6 +114,10 @@ const PinkDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -106,6 +139,10 @@ const BlackWhiteTheme = createTheme({
     background: {
       default: "#FFFFFF",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -127,6 +164,10 @@ const OliveTheme = createTheme({
     background: {
       default: "#F9FBF1",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -148,6 +189,10 @@ const PurpleTheme = createTheme({
     background: {
       default: "#FBF8FF",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -169,6 +214,10 @@ const YellowTheme = createTheme({
     background: {
       default: "#FFFCF6",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -190,6 +239,10 @@ const GoldDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -211,6 +264,10 @@ const BlueTheme = createTheme({
     background: {
       default: "#F5F7FF",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -232,6 +289,10 @@ const BlueDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -253,6 +314,10 @@ const crutch_FurnitureABC = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -274,6 +339,10 @@ const Design1 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -295,6 +364,10 @@ const Design2 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -316,6 +389,10 @@ const Design3 = createTheme({
     background: {
       default: "#F5F7FF",
     },
+    paperBackground: "#F2F3F7",
+    paperText: "#333647",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#FFFFFF",
   },
 });
 
@@ -337,6 +414,10 @@ const Design4 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -358,6 +439,10 @@ const Design5 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -379,6 +464,10 @@ const Design6 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -400,6 +489,10 @@ const Design7 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -421,6 +514,10 @@ const Design8 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -442,6 +539,10 @@ const Design9 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 
@@ -463,6 +564,10 @@ const Design10 = createTheme({
     background: {
       default: "#333647",
     },
+    paperBackground: "#262835",
+    paperText: "#ffffff",
+    paperSecondaryText: "#9A9AAF",
+    paperBlockBackground: "#31333f",
   },
 });
 

lib/utils/themes/generic.ts

@@ -1,6 +1,8 @@
 import { createTheme } from "@mui/material";
 import { fontFaces } from "./fontFace";
 
+import "@mui/material/styles";
+
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     main: true;

public/locales/en.json

@@ -56,5 +56,11 @@
   "Step": "Step",
   "questions are not ready yet": "There are no questions for the audience yet. Please wait",
   "Add your image": "Add your image",
-  "select emoji": "select emoji"
+  "select emoji": "select emoji",
+  "quiz time expired": "Quiz time has expired",
+  "Quiz will become unavailable in": "Quiz will become unavailable in",
+  "days": "days",
+  "hours": "hours",
+  "minutes": "min.",
+  "seconds": "sec."
 }

public/locales/ru.json

@@ -59,5 +59,11 @@
   "select emoji": "выберите смайлик",
   "Please complete the phone number": "Пожалуйста, завершите номер телефона",
   "Please enter a valid email": "Пожалуйста, введите корректную почту",
-  "Please enter a valid phone number": "Пожалуйста, введите корректный номер телефона"
+  "Please enter a valid phone number": "Пожалуйста, введите корректный номер телефона",
+  "quiz time expired": "Время квиза истекло",
+  "Quiz will become unavailable in": "Квиз станет недоступен через",
+  "days": "дней",
+  "hours": "часов",
+  "minutes": "мин.",
+  "seconds": "сек."
 }

public/locales/uz.json

@@ -56,5 +56,11 @@
   "Step": "Qadam",
   "questions are not ready yet": "Tomoshabinlar uchun hozircha savollar yo'q. Iltimos kuting",
   "Add your image": "Rasmingizni qo'shing",
-  "select emoji": "emoji tanlang"
+  "select emoji": "emoji tanlang",
+  "quiz time expired": "Test vaqti tugadi",
+  "Quiz will become unavailable in": "Test quyidagi vaqtda mavjud bo'lmaydi",
+  "days": "kun",
+  "hours": "soat",
+  "minutes": "daq.",
+  "seconds": "son."
 }

src/i18n/i18nWidget.ts

@@ -73,6 +73,12 @@ const r = {
       "Add your image": "Добавьте своё изображение",
       "select emoji": "выберите смайлик",
       "Please complete the phone number": "Пожалуйста, заполните номер телефона до конца",
+      "quiz time expired": "Время квиза истекло",
+      "Quiz will become unavailable in": "Квиз станет недоступен через",
+      days: "дней",
+      hours: "часов",
+      minutes: "мин.",
+      seconds: "сек.",
       "": "", // Пустой ключ для fallback
     },
   },
@@ -137,6 +143,12 @@ const r = {
       "Add your image": "Add your image",
       "select emoji": "select emoji",
       "Please complete the phone number": "Please complete the phone number",
+      "quiz time expired": "Quiz time has expired",
+      "Quiz will become unavailable in": "Quiz will become unavailable in",
+      days: "days",
+      hours: "hours",
+      minutes: "min.",
+      seconds: "sec.",
       "": "", // Пустой ключ для fallback
     },
   },
@@ -201,6 +213,12 @@ const r = {
       "Add your image": "Rasmingizni qo'shing",
       "select emoji": "emoji tanlang",
       "Please complete the phone number": "Iltimos, telefon raqamini to'liq kiriting",
+      "quiz time expired": "Test vaqti tugadi",
+      "Quiz will become unavailable in": "Test quyidagi vaqtda mavjud bo'lmaydi",
+      days: "kun",
+      hours: "soat",
+      minutes: "daq.",
+      seconds: "son.",
       "": "", // Пустой ключ для fallback
     },
   },