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";
import moment from "moment";

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");
      }
    },
  });
  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;

  //Где дни - amount - это на сколько дней выдан безлимит. т.е. не сколько осталось, а на сколько дней выдано
  function getCramps (amount: number, created_at: string) {
    if (created_at.length === 0) return 0
  const currentDate = moment()

    return Number((moment(currentDate.add(amount, "days").diff(created_at)).unix() / 86400).toFixed(1))
  }
  const quizUnlimDays = getCramps(quizUnlimTime, userPrivileges?.quizUnlimTime?.created_at || "")
  const squizBadgeDays = getCramps(squizHideBadge, userPrivileges?.squizHideBadge?.created_at || "")

  console.log(quizUnlimDays)

  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>
          {
            quizUnlimDays > 0 && quizUnlimDays < 1 ?
            "последний день"
            :
            `${quizUnlimTime} ${declOfNum(Math.trunc(quizUnlimDays), 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>
          {
            squizBadgeDays > 0 && squizBadgeDays < 1 ?
            "последний день"
            :
            `${squizHideBadge} ${declOfNum(Math.trunc(squizBadgeDays), DayForm)}`
          }
          </strong>
        </Typography>
      )}
    </Box>
  );
}