frontPanel/src/pages/createQuize/AvailablePrivilege.tsx

import { Box, Typography } from "@mui/material";
import {
  clearUserData,
  OriginalUserAccount,
  setUserAccount,
  useUserStore,
} from "@root/user";
import { clearAuthToken, getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { useUserAccountFetcher } from "../../App";
import { useNavigate } from "react-router-dom";

export default function AvailablePrivilege() {
  const user = useUserStore();
  const userPrivileges = user.userAccount?.privileges;
  const userId = useUserStore((state) => state.userId);
  const navigate = useNavigate();
  useUserAccountFetcher<OriginalUserAccount>({
    url: process.env.REACT_APP_DOMAIN + "/squiz/account/get",
    userId,
    onNewUserAccount: setUserAccount,
    onError: (error) => {
      const errorMessage = getMessageFromFetchError(error);
      if (errorMessage) {
        enqueueSnackbar(errorMessage);
        clearUserData();
        clearAuthToken();
        navigate("/signin");
      }
    },
  });
  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?.quizUnlimTime?.amount || 0;
  const quizCnt = userPrivileges?.quizCnt?.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>
  );
}