Merge branch 'dev' into 'staging'

Dev

See merge request frontend/squiz!259

src/pages/createQuize/AvailablePrivilege.tsx

@@ -0,0 +1,62 @@
+import { Box, Typography } from "@mui/material";
+import { useUserStore } from "@root/user";
+
+export default function AvailablePrivilege() {
+  const user = useUserStore();
+  const userPrivileges = user.userAccount?.privileges;
+  console.log("это доступные привелегии", userPrivileges);
+  const DayForm = ["день", "дня", "дней"];
+  function declOfNum(n: number, text_forms: string[]) {
+    n = Math.abs(n) % 100;
+    var n1 = n % 10;
+    if (n > 10 && n < 20) {
+      return text_forms[2];
+    }
+    if (n1 > 1 && n1 < 5) {
+      return text_forms[1];
+    }
+    if (n1 == 1) {
+      return text_forms[0];
+    }
+    return text_forms[2];
+  }
+  const quizUnlimTime = userPrivileges?.["Безлимит Опросов"]?.amount || 0;
+  const quizCnt = userPrivileges?.["Количество Заявок"]?.amount || 0;
+  const squizHideBadge = userPrivileges?.squizHideBadge?.amount || 0;
+  return (
+    <Box
+      sx={{
+        padding: "20px",
+        backgroundColor: "#9A9AAF17",
+        width: "100%",
+        borderRadius: "12px",
+        display: "flex",
+        gap: "20px",
+        flexWrap: "wrap",
+      }}
+    >
+      <Typography variant={"body1"} sx={{ color: "#9A9AAF" }}>
+        Вам доступно:
+      </Typography>
+      <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
+        Безлимитные заявки:{" "}
+        <strong>
+          {quizUnlimTime} {declOfNum(quizUnlimTime, DayForm)}
+        </strong>
+      </Typography>
+      {quizCnt !== 0 && (
+        <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
+          Заявки: <strong>{quizCnt} шт.</strong>
+        </Typography>
+      )}
+      {squizHideBadge !== 0 && (
+        <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
+          Скрытие логотипа PenaQuiz:{" "}
+          <strong>
+            {squizHideBadge} {declOfNum(squizHideBadge, DayForm)}
+          </strong>
+        </Typography>
+      )}
+    </Box>
+  );
+}

src/pages/createQuize/FirstQuiz.tsx

@@ -4,6 +4,8 @@ import ComplexNavText from "./ComplexNavText";
 import { createQuiz } from "@root/quizes/actions";
 import { useNavigate } from "react-router-dom";
 import { resetEditConfig } from "@root/quizes/actions";
+import AvailablePrivilege from "./AvailablePrivilege";
+import React from "react";
 
 export default function FirstQuiz() {
   const navigate = useNavigate();
@@ -13,7 +15,7 @@ export default function FirstQuiz() {
       maxWidth="lg"
       sx={{
         mt: "25px",
-        mb: "70px",
+        mb: "40px",
         padding: "10px",
       }}
     >
@@ -26,9 +28,11 @@ export default function FirstQuiz() {
       >
         Создайте свой первый quiz
       </Typography>
+      <AvailablePrivilege />
       <Button
         variant="contained"
         data-cy="create-quiz"
+        sx={{ mt: "20px" }}
         onClick={() => {
           resetEditConfig();
           createQuiz(navigate);

src/pages/createQuize/MyQuizzesFull.tsx

@@ -21,6 +21,7 @@ import FirstQuiz from "./FirstQuiz";
 import QuizCard from "./QuizCard";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
 import QuizgenegationName from "@utils/quizgenegationName";
+import AvailablePrivilege from "./AvailablePrivilege";
 
 interface Props {
   outerContainerSx?: SxProps<Theme>;
@@ -89,6 +90,7 @@ export default function MyQuizzesFull({
               width: isMobile ? "100%" : undefined,
             }}
           >
+            <AvailablePrivilege />
             {quizes.map((quiz) => {
               if (quiz.name.length === 0 || quiz.name === " ") {
                 updateQuiz(quiz.id, (quiz) => {