SaveTariffs update

src/components/Drawers.tsx

@@ -1,13 +1,5 @@
 import { useState, useRef, useCallback } from "react";
-import {
+import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, Badge } from "@mui/material";
-  Typography,
-  Drawer,
-  useMediaQuery,
-  useTheme,
-  Box,
-  IconButton,
-  Badge,
-} from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useTickets, useSSESubscription, useToken } from "@frontend/kitui";
 import SectionWrapper from "./SectionWrapper";
@@ -17,17 +9,9 @@ import { NotificationsModal } from "./NotificationsModal";
 import { useNavigate } from "react-router";
 import { useCart } from "@root/utils/hooks/useCart";
 import { currencyFormatter } from "@root/utils/currencyFormatter";
-import {
+import { closeCartDrawer, openCartDrawer, useCartStore } from "@root/stores/cart";
-  closeCartDrawer,
-  openCartDrawer,
-  useCartStore,
-} from "@root/stores/cart";
 import { useUserStore } from "@root/stores/user";
-import {
+import { updateTickets, setTicketCount, useTicketStore } from "@root/stores/tickets";
-  updateTickets,
-  setTicketCount,
-  useTicketStore,
-} from "@root/stores/tickets";
 
 import { ReactComponent as BellIcon } from "@root/assets/Icons/bell.svg";
 import { ReactComponent as CartIcon } from "@root/assets/Icons/cart.svg";
@@ -36,8 +20,7 @@ import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
 import type { Ticket } from "@frontend/kitui";
 
 export default function Drawers() {
-  const [openNotificationsModal, setOpenNotificationsModal] =
+  const [openNotificationsModal, setOpenNotificationsModal] = useState<boolean>(false);
-    useState<boolean>(false);
   const bellRef = useRef<HTMLButtonElement | null>(null);
   const navigate = useNavigate();
   const theme = useTheme();
@@ -71,8 +54,7 @@ export default function Drawers() {
   });
 
   const notificationsCount = tickets.filter(
-    ({ user, top_message }) =>
+    ({ user, top_message }) => user !== top_message.user_id && top_message.shown.me !== 1
-      user !== top_message.user_id && top_message.shown.me !== 1
   ).length;
 
   const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts;
@@ -87,16 +69,10 @@ export default function Drawers() {
         sx={{
           cursor: "pointer",
           borderRadius: "6px",
-          background: openNotificationsModal
+          background: openNotificationsModal ? theme.palette.purple.dark : theme.palette.background.default,
-            ? theme.palette.purple.dark
-            : theme.palette.background.default,
           "& .MuiBadge-badge": {
-            background: openNotificationsModal
+            background: openNotificationsModal ? theme.palette.background.default : theme.palette.purple.dark,
-              ? theme.palette.background.default
+            color: openNotificationsModal ? theme.palette.purple.dark : theme.palette.background.default,
-              : theme.palette.purple.dark,
-            color: openNotificationsModal
-              ? theme.palette.purple.dark
-              : theme.palette.background.default,
           },
           "& svg > path:first-child": {
             fill: openNotificationsModal ? "#FFFFFF" : "#9A9AAF",
@@ -145,9 +121,7 @@ export default function Drawers() {
             text: "У вас новое сообщение от техподдержки",
             date: new Date(ticket.updated_at).toLocaleDateString(),
             url: `/support/${ticket.id}`,
-            watched:
+            watched: ticket.user === ticket.top_message.user_id || ticket.top_message.shown.me === 1,
-              ticket.user === ticket.top_message.user_id ||
-              ticket.top_message.shown.me === 1,
           }))}
       />
       <IconButton
@@ -189,12 +163,7 @@ export default function Drawers() {
           <CartIcon />
         </Badge>
       </IconButton>
-      <Drawer
+      <Drawer anchor={"right"} open={isDrawerOpen} onClose={closeCartDrawer} sx={{ background: "rgba(0, 0, 0, 0.55)" }}>
-        anchor={"right"}
-        open={isDrawerOpen}
-        onClose={closeCartDrawer}
-        sx={{ background: "rgba(0, 0, 0, 0.55)" }}
-      >
         <SectionWrapper
           maxWidth="lg"
           sx={{
@@ -232,18 +201,13 @@ export default function Drawers() {
           </Box>
           <Box sx={{ pl: "20px", pr: "20px" }}>
             {cart.services.map((serviceData) => (
-              <CustomWrapperDrawer
+              <CustomWrapperDrawer key={serviceData.serviceKey} serviceData={serviceData} />
-                key={serviceData.serviceKey}
-                serviceData={serviceData}
-              />
             ))}
             <Box
               sx={{
                 mt: "40px",
                 pt: upMd ? "30px" : undefined,
-                borderTop: upMd
+                borderTop: upMd ? `1px solid ${theme.palette.gray.main}` : undefined,
-                  ? `1px solid ${theme.palette.gray.main}`
-                  : undefined,
               }}
             >
               <Box
@@ -258,9 +222,8 @@ export default function Drawers() {
                   Итоговая цена
                 </Typography>
                 <Typography color={theme.palette.gray.dark}>
-                  Текст-заполнитель — это текст, который имеет Текст-заполнитель
+                  Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
-                  — это текст, который имеет Текст-заполнитель — это текст,
+                  Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
-                  который имеет Текст-заполнитель — это текст, который имеет
                   Текст-заполнитель
                 </Typography>
               </Box>

src/components/Menu.tsx

@@ -57,11 +57,7 @@ export default function Menu() {
               state={{ previousUrl: location.pathname }}
             >
               <Typography
-                color={
+                color={location.pathname === url ? theme.palette.purple.dark : color}
-                  location.pathname === url
-                    ? theme.palette.purple.dark
-                    : color
-                }
                 variant="body2"
                 sx={{
                   whiteSpace: "nowrap",
@@ -71,13 +67,10 @@ export default function Menu() {
               </Typography>
             </Link>
           ))
-        : arrayMenu.map(({ name, url, subMenu = [] }) => (
+        : arrayMenu.map(({ name, url, subMenu = [] }, index) => (
             <Typography
-              color={
+              key={index}
-                location.pathname === url
+              color={location.pathname === url ? theme.palette.purple.dark : color}
-                  ? theme.palette.purple.dark
-                  : color
-              }
               variant="body2"
               sx={{
                 whiteSpace: "nowrap",
@@ -101,11 +94,7 @@ export default function Menu() {
           activeSubMenu.map(({ name, url }) => (
             <Link key={name} style={{ textDecoration: "none" }} to={url}>
               <Typography
-                color={
+                color={location.pathname === url ? theme.palette.purple.dark : color}
-                  location.pathname === url
-                    ? theme.palette.purple.dark
-                    : color
-                }
                 variant="body2"
                 sx={{
                   padding: "15px",

src/pages/Faq/Faq.tsx

@@ -6,19 +6,9 @@ import SectionWrapper from "../../components/SectionWrapper";
 import AccordionWrapper from "./AccordionWrapper";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { Tabs } from "@root/components/Tabs";
-import { useLocation } from "react-router-dom";
-import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 
-const subPages = [
+const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];
-  "Pena hub",
-  "Шаблоны",
-  "Опросы",
-  "Ссылки",
-  "Финансовые",
-  "Юридические",
-  "Юридические лица",
-];
 
 export default function Faq() {
   const theme = useTheme();
@@ -46,10 +36,7 @@ export default function Faq() {
         }}
       >
         {isMobile && (
-          <IconButton
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
             <ArrowBackIcon />
           </IconButton>
         )}
@@ -62,11 +49,7 @@ export default function Faq() {
           Вопросы и ответы
         </Typography>
       </Box>
-      <Tabs
+      <Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
-        items={subPages}
-        selectedItem={tabIndex}
-        setSelectedItem={setTabIndex}
-      />
       <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
         <AccordionWrapper
           content={[

src/pages/History/index.tsx

@@ -1,11 +1,5 @@
 import { useState } from "react";
-import {
+import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  IconButton,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 import SectionWrapper from "@root/components/SectionWrapper";
@@ -45,10 +39,7 @@ export default function History() {
         }}
       >
         {isMobile && (
-          <IconButton
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
             <ArrowBackIcon />
           </IconButton>
         )}
@@ -62,23 +53,12 @@ export default function History() {
         </Typography>
       </Box>
       {isMobile ? (
-        <Select
+        <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
       ) : (
-        <Tabs
+        <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
       )}
       {HISTORY.map((history, index) => (
-        <Box
+        <Box key={index} hidden={selectedItem !== index} sx={{ mt: upMd ? "27px" : "10px" }}>
-          hidden={selectedItem !== index}
-          sx={{ mt: upMd ? "27px" : "10px" }}
-        >
           <AccordionWrapper content={history} />
         </Box>
       ))}

src/pages/SavedTariffs/SaveWrapper.tsx

@@ -6,7 +6,7 @@ import CustomButton from "@root/components/CustomButton";
 
 import { addTariffToCart } from "@root/stores/user";
 import { cardShadow } from "@root/utils/theme";
-import { PrivilegeWithAmount, TariffCartData, getMessageFromFetchError } from "@frontend/kitui";
+import { PrivilegeWithAmount, getMessageFromFetchError } from "@frontend/kitui";
 import CustomSaveAccordion from "../../components/CustomSaveAccordion";
 
 interface Props {

src/pages/SavedTariffs/index.tsx

@@ -1,16 +1,12 @@
-import {
+import { IconButton, Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-  IconButton,
-  Box,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import SectionWrapper from "../../components/SectionWrapper";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 import SaveWrapper from "./SaveWrapper";
-import { useTariffStore } from "@root/stores/tariffs";
+import { useTariffStore, updateTariffs } from "@root/stores/tariffs";
-import type { Tariff } from "@frontend/kitui";
+import { getMessageFromFetchError, type Tariff } from "@frontend/kitui";
+import { useAllTariffsFetcher } from "@root/utils/hooks/useAllTariffsFetcher";
+import { enqueueSnackbar } from "notistack";
 
 export default function Faq() {
   const theme = useTheme();
@@ -19,6 +15,14 @@ export default function Faq() {
 
   const tariffs: Tariff[] = useTariffStore((state) => state.tariffs);
 
+  useAllTariffsFetcher({
+    onSuccess: updateTariffs,
+    onError: (error) => {
+      const errorMessage = getMessageFromFetchError(error);
+      if (errorMessage) enqueueSnackbar(errorMessage);
+    },
+  });
+
   console.log(tariffs);
 
   const handleCustomBackNavigation = useHistoryTracker();
@@ -41,10 +45,7 @@ export default function Faq() {
         }}
       >
         {!upMd && (
-          <IconButton
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
             <ArrowBackIcon />
           </IconButton>
         )}

src/pages/Support/Support.tsx

@@ -1,26 +1,15 @@
-import {
+import { Typography, Box, useTheme, useMediaQuery, IconButton } from "@mui/material";
-  Typography,
-  Box,
-  useTheme,
-  useMediaQuery,
-  IconButton,
-} from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { Link, useParams, useLocation } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import SectionWrapper from "@components/SectionWrapper";
 import SupportChat from "./SupportChat";
 import CreateTicket from "./CreateTicket";
 import TicketList from "./TicketList/TicketList";
-import { useState, useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import { Ticket, getMessageFromFetchError, useToken } from "@frontend/kitui";
-import {
+import { updateTickets, setTicketCount, useTicketStore } from "@root/stores/tickets";
-  updateTickets,
-  setTicketCount,
-  useTicketStore,
-} from "@root/stores/tickets";
 import { enqueueSnackbar } from "notistack";
 import { useSSESubscription, useTickets } from "@frontend/kitui";
-import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 
 export default function Support() {
@@ -31,7 +20,6 @@ export default function Support() {
   const ticketApiPage = useTicketStore((state) => state.apiPage);
   const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);
   const token = useToken();
-  const location = useLocation();
 
   const fetchState = useTickets({
     url: "https://hub.pena.digital/heruvym/getTickets",
@@ -75,10 +63,7 @@ export default function Support() {
           gap: "10px",
         }}
       >
-        <IconButton
+        <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-          onClick={handleCustomBackNavigation}
-          sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-        >
           <ArrowBackIcon />
         </IconButton>
         <Typography

src/pages/TariffConstructor/TariffConstructor.tsx

@@ -1,5 +1,5 @@
 import { Box, IconButton, useMediaQuery, useTheme } from "@mui/material";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import SectionWrapper from "@components/SectionWrapper";
 import { useCustomTariffsStore } from "@root/stores/customTariffs";
 import ComplexHeader from "@root/components/ComplexHeader";
@@ -11,7 +11,6 @@ import { useAllTariffsFetcher } from "@root/utils/hooks/useAllTariffsFetcher";
 import { updateTariffs } from "@root/stores/tariffs";
 import { getMessageFromFetchError } from "@frontend/kitui";
 import { enqueueSnackbar } from "notistack";
-import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 
 export default function TariffConstructor() {
@@ -51,7 +50,7 @@ export default function TariffConstructor() {
         }}
       >
         {Object.entries(customTariffs).map(([serviceKey, privileges], index) => (
-          <Box key={serviceKey}>
+          <Box key={index}>
             <Box
               sx={{
                 mb: "40px",

src/pages/Tariffs/TariffsPage.tsx

@@ -33,14 +33,11 @@ export default function TariffPage() {
   const tariffs = useTariffStore((state) => state.tariffs);
   const [selectedItem, setSelectedItem] = useState<number>(0);
   const discounts = useDiscountStore((state) => state.discounts);
-  const purchasesAmount =
+  const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.purchasesAmount) ?? 0;
-    useUserStore((state) => state.userAccount?.wallet.purchasesAmount) ?? 0;
   const cartTariffMap = useCartStore((state) => state.cartTariffMap);
 
   const unit: string = String(location.pathname).slice(9);
-  const currentTariffs = Object.values(cartTariffMap).filter(
+  const currentTariffs = Object.values(cartTariffMap).filter((tariff): tariff is Tariff => typeof tariff === "object");
-    (tariff): tariff is Tariff => typeof tariff === "object"
-  );
 
   console.log(currentTariffs);
 
@@ -67,8 +64,7 @@ export default function TariffPage() {
 
   const filteredTariffs = tariffs.filter((tariff) => {
     return (
-      tariff.privilegies.map((p) => p.type).includes("day") ===
+      tariff.privilegies.map((p) => p.type).includes("day") === (unit === "time") &&
-        (unit === "time") &&
       !tariff.isDeleted &&
       !tariff.isCustom
     );
@@ -76,8 +72,7 @@ export default function TariffPage() {
 
   const isCustomTariffs = tariffs.filter((tariff) => {
     return (
-      tariff.privilegies.map((p) => p.type).includes("day") ===
+      tariff.privilegies.map((p) => p.type).includes("day") === (unit === "time") &&
-        (unit === "time") &&
       !tariff.isDeleted &&
       tariff.isCustom
     );
@@ -89,13 +84,12 @@ export default function TariffPage() {
     const tariffElements = filteredTariffs
       .filter((tariff) => tariff.privilegies.length > 0)
       .map((tariff, index) => {
-        const { priceBeforeDiscounts, priceAfterDiscounts } =
+        const { priceBeforeDiscounts, priceAfterDiscounts } = calcIndividualTariffPrices(
-          calcIndividualTariffPrices(
+          tariff,
-            tariff,
+          discounts,
-            discounts,
+          purchasesAmount,
-            purchasesAmount,
+          currentTariffs
-            currentTariffs
+        );
-          );
 
         return (
           <TariffCard
@@ -116,21 +110,16 @@ export default function TariffPage() {
             price={
               <>
                 {priceBeforeDiscounts !== priceAfterDiscounts && (
-                  <Typography variant="oldPrice">
+                  <Typography variant="oldPrice">{currencyFormatter.format(priceBeforeDiscounts / 100)}</Typography>
-                    {currencyFormatter.format(priceBeforeDiscounts / 100)}
-                  </Typography>
                 )}
-                <Typography variant="price">
+                <Typography variant="price">{currencyFormatter.format(priceAfterDiscounts / 100)}</Typography>
-                  {currencyFormatter.format(priceAfterDiscounts / 100)}
-                </Typography>
               </>
             }
           />
         );
       });
 
-    if (tariffElements.length < 6)
+    if (tariffElements.length < 6) tariffElements.push(<FreeTariffCard key="free_tariff_card" />);
-      tariffElements.push(<FreeTariffCard key="free_tariff_card" />);
     else tariffElements.splice(5, 0, <FreeTariffCard key="free_tariff_card" />);
 
     return tariffElements;
@@ -157,17 +146,9 @@ export default function TariffPage() {
         {StepperText[unit]}
       </Typography>
       {isMobile ? (
-        <Select
+        <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
       ) : (
-        <Tabs
+        <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
       )}
       <Box
         sx={{

src/stores/cart.ts

@@ -34,10 +34,7 @@ export const useCartStore = create<CartStore>()(
   )
 );
 
-export const setCartTariffStatus = (
+export const setCartTariffStatus = (tariffId: string, status: "loading" | "not found") =>
-  tariffId: string,
-  status: "loading" | "not found"
-) =>
   useCartStore.setState(
     produce<CartStore>((state) => {
       state.cartTariffMap[tariffId] = status;
@@ -50,11 +47,7 @@ export const setCartTariffStatus = (
     }
   );
 
-export const addCartTariffs = (
+export const addCartTariffs = (tariffs: Tariff[], discounts: Discount[], purchasesAmount: number) =>
-  tariffs: Tariff[],
-  discounts: Discount[],
-  purchasesAmount: number
-) =>
   useCartStore.setState(
     produce<CartStore>((state) => {
       tariffs.forEach((tariff) => {
@@ -76,11 +69,7 @@ export const addCartTariffs = (
     }
   );
 
-export const removeMissingCartTariffs = (
+export const removeMissingCartTariffs = (tariffIds: string[], discounts: Discount[], purchasesAmount: number) =>
-  tariffIds: string[],
-  discounts: Discount[],
-  purchasesAmount: number
-) =>
   useCartStore.setState(
     produce<CartStore>((state) => {
       for (const key in state.cartTariffMap) {
@@ -97,8 +86,6 @@ export const removeMissingCartTariffs = (
     }
   );
 
-export const openCartDrawer = () =>
+export const openCartDrawer = () => useCartStore.setState({ isDrawerOpen: true });
-  useCartStore.setState({ isDrawerOpen: true });
 
-export const closeCartDrawer = () =>
+export const closeCartDrawer = () => useCartStore.setState({ isDrawerOpen: false });
-  useCartStore.setState({ isDrawerOpen: false });