postmerge fixes

src/components/Drawers.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback } from "react";
-import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, Badge } from "@mui/material";
+import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, Badge, Button } from "@mui/material";
 import { useTickets, useSSESubscription, useToken, getMessageFromFetchError } from "@frontend/kitui";
 import SectionWrapper from "./SectionWrapper";
 import CustomWrapperDrawer from "./CustomWrapperDrawer";
@@ -18,6 +18,7 @@ import type { Ticket } from "@frontend/kitui";
 import { payCart } from "@root/api/cart";
 import { isAxiosError } from "axios";
 import { enqueueSnackbar } from "notistack";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function Drawers() {
   const [openNotificationsModal, setOpenNotificationsModal] = useState<boolean>(false);

src/components/Navbar/DialogMenu.tsx

@@ -5,17 +5,12 @@ import { useUserStore } from "@root/stores/user";
 import { currencyFormatter } from "@root/utils/currencyFormatter";
 import { cardShadow } from "@root/utils/theme";
 import { AvatarButton, getInitials } from "@frontend/kitui";
-import { cardShadow } from "@root/utils/theme";
-import { AvatarButton, getInitials } from "@frontend/kitui";
 
 
 type MenuItem = {
     name: string;
     url: string;
     subMenu?: MenuItem[];
-    name: string;
-    url: string;
-    subMenu?: MenuItem[];
 };
 
 const arrayMenu: MenuItem[] = [
@@ -33,25 +28,10 @@ const arrayMenu: MenuItem[] = [
     { name: "Корзина", url: "/cart" },
     { name: "Поддержка", url: "/support" },
     { name: "История", url: "/history" },
-    {
-        name: "Тарифы",
-        url: "/tariffs",
-        subMenu: [
-            { name: "Тарифы на время", url: "/tariffs/time" },
-            { name: "Тарифы на объём", url: "/tariffs/volume" },
-            { name: "Кастомный тариф", url: "/tariffconstructor" },
-        ],
-    },
-    { name: "Профиль", url: "/settings" },
-    { name: "Вопросы и ответы", url: "/faq" },
-    { name: "Корзина", url: "/cart" },
-    { name: "Поддержка", url: "/support" },
-    { name: "История", url: "/history" },
 ];
 
 interface DialogMenuProps {
     handleClose: () => void;
-    handleClose: () => void;
 }
 
 export default function DialogMenu({ handleClose }: DialogMenuProps) {
@@ -71,145 +51,151 @@ export default function DialogMenu({ handleClose }: DialogMenuProps) {
         handleClose();
     };
 
-  const handleSubMenu = (index: number) => setActiveSubMenuIndex((activeIndex) => (activeIndex !== index ? index : -1));
+    const handleSubMenu = (index: number) => setActiveSubMenuIndex((activeIndex) => (activeIndex !== index ? index : -1));
 
-  return (
-    <Box sx={{ height: "100%", maxHeight: "calc(100vh - 51px)" }}>
-      <List
-        sx={{
-          maxWidth: "250px",
-          background: location.pathname === "/" ? "#333647" : "#FFFFFF",
-          height: "100%",
-        }}
-      >
-        <ListItem
-          sx={{
-            pl: 0,
-            pr: 0,
-            flexDirection: "column",
-            alignItems: isMobile ? "start" : "end",
-          }}
-        >
-          {arrayMenu.map(({ name, url, subMenu = [] }, index) => (
-            <Box sx={{ width: "100%" }} key={name + index}>
-              <Button
-                key={index}
-                component={Link}
-                to={url}
-                state={{ previousUrl: location.pathname }}
-                disableRipple
-                variant="text"
-                onClick={() => (!subMenu.length ? closeDialogMenu() : handleSubMenu(index))}
+    const initials = getInitials(firstname.value, secondname.value);
+
+    return (
+        <Box sx={{ height: "100%", maxHeight: "calc(100vh - 51px)" }}>
+            <List
                 sx={{
-                  padding: "10px 10px 10px 20px",
-                  display: "block",
-                  fontWeight: 500,
-                  color: location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
-                  textTransform: "none",
-                  fontSize: "16px",
-                  borderRadius: 0,
-                  "&:hover, &:active": {
-                    color: "#7E2AEA",
-                    background: index === activeSubMenuIndex ? theme.palette.background.default : "none",
-                  },
+                    maxWidth: "250px",
+                    background: location.pathname === "/" ? "#333647" : "#FFFFFF",
+                    height: "100%",
                 }}
-              >
-                <Box>{name}</Box>
-              </Button>
-              {subMenu.length ? (
-                <Box
-                  sx={{
-                    backgroundColor: theme.palette.background.paper,
-                    width: "100%",
-                    boxShadow: !isTablet ? cardShadow : null,
-                  }}
+            >
+                <ListItem
+                    sx={{
+                        pl: 0,
+                        pr: 0,
+                        flexDirection: "column",
+                        alignItems: isMobile ? "start" : "end",
+                    }}
                 >
-                  {index === activeSubMenuIndex &&
-                    subMenu.map(({ name, url }) => (
-                      <Link
-                        key={name + url}
-                        style={{
-                          paddingLeft: "30px",
-                          display: "block",
-                          textDecoration: "none",
-                        }}
-                        to={url}
-                        onClick={closeDialogMenu}
-                        state={{ previousUrl: location.pathname }}
-                      >
-                        <Typography
-                          variant="body2"
-                          sx={{
-                            padding: "12px",
-                            whiteSpace: "nowrap",
-                            fontWeight: 400,
-                            color:
-                              location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
-                          }}
-                        >
-                          {name}
-                        </Typography>
-                      </Link>
+                    {arrayMenu.map(({ name, url, subMenu = [] }, index) => (
+                        <Box sx={{ width: "100%" }} key={name + index}>
+                            <Button
+                                key={index}
+                                component={Link}
+                                to={url}
+                                state={{ previousUrl: location.pathname }}
+                                disableRipple
+                                variant="text"
+                                onClick={() => (!subMenu.length ? closeDialogMenu() : handleSubMenu(index))}
+                                sx={{
+                                    padding: "10px 10px 10px 20px",
+                                    display: "block",
+                                    fontWeight: 500,
+                                    color: location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
+                                    textTransform: "none",
+                                    fontSize: "16px",
+                                    borderRadius: 0,
+                                    "&:hover, &:active": {
+                                        color: "#7E2AEA",
+                                        background: index === activeSubMenuIndex ? theme.palette.background.default : "none",
+                                    },
+                                }}
+                            >
+                                <Box>{name}</Box>
+                            </Button>
+                            {subMenu.length ? (
+                                <Box
+                                    sx={{
+                                        backgroundColor: theme.palette.background.paper,
+                                        width: "100%",
+                                        boxShadow: !isTablet ? cardShadow : null,
+                                    }}
+                                >
+                                    {index === activeSubMenuIndex &&
+                                        subMenu.map(({ name, url }) => (
+                                            <Link
+                                                key={name + url}
+                                                style={{
+                                                    paddingLeft: "30px",
+                                                    display: "block",
+                                                    textDecoration: "none",
+                                                }}
+                                                to={url}
+                                                onClick={closeDialogMenu}
+                                                state={{ previousUrl: location.pathname }}
+                                            >
+                                                <Typography
+                                                    variant="body2"
+                                                    sx={{
+                                                        padding: "12px",
+                                                        whiteSpace: "nowrap",
+                                                        fontWeight: 400,
+                                                        color:
+                                                            location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
+                                                    }}
+                                                >
+                                                    {name}
+                                                </Typography>
+                                            </Link>
+                                        ))}
+                                </Box>
+                            ) : (
+                                <></>
+                            )}
+                        </Box>
                     ))}
-                </Box>
-              ) : (
-                <></>
-              )}
-            </Box>
-          ))}
-        </ListItem>
-        {location.pathname === "/" ? (
-          <Button
-            component={Link}
-            to={user ? "/tariffs" : "/signin"}
-            state={user ? undefined : { backgroundLocation: location }}
-            variant="outlined"
-            sx={{
-              width: "188px",
-              color: "white",
-              border: "1px solid white",
-              ml: "40px",
-              mt: "35px",
-              textTransform: "none",
-              fontWeight: "400",
-              fontSize: "18px",
-              lineHeight: "24px",
-              borderRadius: "8px",
-              padding: "8px 17px",
-            }}
-          >
-            Личный кабинет
-          </Button>
-        ) : (
-          <Box
-            sx={{
-              width: "100%",
-              height: "72px",
-              background: "#F2F3F7",
-              display: "flex",
-              alignItems: "center",
-              position: "absolute",
-              bottom: "0",
-            }}
-          >
-            <CustomAvatar />
-            <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
-              <Typography
-                sx={{
-                  fontSize: "12px",
-                  lineHeight: "14px",
-                  color: theme.palette.grey3.main,
-                }}
-              >
-                Мой баланс
-              </Typography>
-              <Typography variant="body2" color={theme.palette.brightPurple.main}>
-                {currencyFormatter.format(cash / 100)}
-              </Typography>
-            </Box>
-          </Box>
-        )}
-      </List>
-    </Box>
-  );
+                </ListItem>
+                {location.pathname === "/" ? (
+                    <Button
+                        component={Link}
+                        to={user ? "/tariffs" : "/signin"}
+                        state={user ? undefined : { backgroundLocation: location }}
+                        variant="outlined"
+                        sx={{
+                            width: "188px",
+                            color: "white",
+                            border: "1px solid white",
+                            ml: "40px",
+                            mt: "35px",
+                            textTransform: "none",
+                            fontWeight: "400",
+                            fontSize: "18px",
+                            lineHeight: "24px",
+                            borderRadius: "8px",
+                            padding: "8px 17px",
+                        }}
+                    >
+                        Личный кабинет
+                    </Button>
+                ) : (
+                    <Box
+                        sx={{
+                            width: "100%",
+                            height: "72px",
+                            background: "#F2F3F7",
+                            display: "flex",
+                            alignItems: "center",
+                            position: "absolute",
+                            bottom: "0",
+                        }}
+                    >
+                        <AvatarButton
+                            component={Link}
+                            to="/settings"
+                            sx={{ ml: "27px" }}
+                        >{initials}</AvatarButton>
+                        <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
+                            <Typography
+                                sx={{
+                                    fontSize: "12px",
+                                    lineHeight: "14px",
+                                    color: theme.palette.gray.dark,
+                                }}
+                            >
+                                Мой баланс
+                            </Typography>
+                            <Typography variant="body2" color={theme.palette.purple.main}>
+                                {currencyFormatter.format(cash / 100)}
+                            </Typography>
+                        </Box>
+                    </Box>
+                )}
+            </List>
+        </Box>
+    );
 }

src/components/Navbar/NavbarCollapsed.tsx

@@ -8,7 +8,7 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import { Link } from "react-router-dom";
-import { BurgerButton, CloseButton, useTickets, useSSESubscription, useToken } from "@frontend/kitui";
+import { useTickets, useSSESubscription, useToken } from "@frontend/kitui";
 
 import SectionWrapper from "../SectionWrapper";
 import { NotificationsModal } from "../NotificationsModal";
@@ -16,9 +16,9 @@ import { NavbarPanel } from "./NavbarPanel";
 
 import { useUserStore } from "@root/stores/user";
 import {
-    updateTickets,
-    setTicketCount,
-    useTicketStore,
+  updateTickets,
+  setTicketCount,
+  useTicketStore,
 } from "@root/stores/tickets";
 
 import { ReactComponent as CartIcon } from "@root/assets/Icons/cart.svg";
@@ -26,6 +26,7 @@ import { ReactComponent as BellIcon } from "@root/assets/Icons/bell.svg";
 
 import DialogMenu from "./DialogMenu";
 import PenaLogo from "../PenaLogo";
+import CloseIcon from "../icons/CloseIcons";
 import MenuIcon from "@mui/icons-material/Menu";
 
 import type { ReactNode } from "react";
@@ -46,16 +47,16 @@ export default function NavbarCollapsed({ children }: Props) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(550));
 
-    useTickets({
-        url: "https://hub.pena.digital/heruvym/getTickets",
-        ticketsPerPage,
-        ticketApiPage: apiPage,
-        onNewTickets: useCallback((result) => {
-            if (result.data) updateTickets(result.data);
-            setTicketCount(result.count);
-        }, []),
-        onError: () => { },
-    });
+  useTickets({
+    url: "https://hub.pena.digital/heruvym/getTickets",
+    ticketsPerPage,
+    ticketApiPage: apiPage,
+    onNewTickets: useCallback((result) => {
+      if (result.data) updateTickets(result.data);
+      setTicketCount(result.count);
+    }, []),
+    onError: () => {},
+  });
 
   useSSESubscription<Ticket>({
     enabled: Boolean(token),
@@ -67,24 +68,24 @@ export default function NavbarCollapsed({ children }: Props) {
     onDisconnect: () => {},
   });
 
-    const handleClose = () => {
-        setOpen(false);
-    };
+  const handleClose = () => {
+    setOpen(false);
+  };
 
-    const notificationsCount = tickets.filter(
-        ({ user, top_message }) =>
-            user !== top_message.user_id && top_message.shown.me !== 1
-    ).length;
+  const notificationsCount = tickets.filter(
+    ({ user, top_message }) =>
+      user !== top_message.user_id && top_message.shown.me !== 1
+  ).length;
 
-    useEffect(() => {
-        if (open) {
-            document.body.style.overflow = "hidden";
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
 
-            return;
-        }
+      return;
+    }
 
-        document.body.style.overflow = "unset";
-    }, [open]);
+    document.body.style.overflow = "unset";
+  }, [open]);
 
   return (
     <SectionWrapper

src/components/TotalPrice.tsx

@@ -6,6 +6,7 @@ import { isAxiosError } from "axios";
 import { enqueueSnackbar } from "notistack";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
+import { getMessageFromFetchError } from "@frontend/kitui";
 
 interface Props {
   priceBeforeDiscounts: number;

src/pages/Landing/Section1.tsx

@@ -4,22 +4,22 @@ import mainShapeVideo from "../../assets/animations/main.webm";
 import previewMain from "../../assets/animations/preview_main.png";
 
 declare module "react" {
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    pip?: string;
-  }
+    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+        pip?: string;
+    }
 }
 
 export default function Section1() {
-  const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const isTablet = useMediaQuery(theme.breakpoints.up(1000));
+    const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+    const isTablet = useMediaQuery(theme.breakpoints.up(1000));
 
     return (
         <SectionWrapper
             component="section"
             maxWidth="lg"
             outerContainerSx={{
-                backgroundColor: theme.palette.lightPurple.main,
+                backgroundColor: theme.palette.bg.main,
             }}
             sx={{
                 display: "flex",
@@ -28,40 +28,43 @@ export default function Section1() {
                 flexDirection: upMd ? "row" : "column",
             }}
         >
-            <Box sx={{
-                display: "flex",
-                flexDirection: "column",
-                flexGrow: 1,
-                order: upMd ? 1 : 2,
-                maxWidth: "700px",
-                mt: upMd ? "85px" : "40px",
-                mb: upMd ? "101px" : "70px",
-            }}>
-                <Typography variant="h2">Сервисы прокачки маркетинга</Typography>
-                <Typography mt="35px" maxWidth="560px">Покажут эффективность рекламы. Соберут все обращения клиентов. Повысят конверсию сайта</Typography>
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                    order: upMd ? 1 : 2,
+                    maxWidth: "700px",
+                    mt: upMd ? "85px" : "40px",
+                    mb: upMd ? "101px" : "70px",
+                    alignItems: "start",
+                }}
+            >
+                <Typography sx={{ maxWidth: !isTablet ? "500px" : "100%" }} variant="h2">
+                    Сервисы прокачки маркетинга
+                </Typography>
+
+                <Typography mt="35px" maxWidth="560px">
+                    Покажут эффективность рекламы. Соберут все обращения клиентов. Повысят конверсию сайта
+                </Typography>
                 <Typography mt="11.5px">И все это в едином кабинете</Typography>
-                <CustomButton
-                    variant="contained"
-                    sx={{
-                        backgroundColor: theme.palette.brightPurple.main,
-                        color: theme.palette.primary.main,
-                        mt: "40px",
-                    }}
-                >
+                <Button variant="pena-contained-dark" sx={{ mt: "40px" }}>
                     Подробнее
-                </CustomButton>
+                </Button>
             </Box>
-            <Box sx={{
-                ml: upMd ? "-100px" : undefined,
-                mb: "-40px",
-                flexShrink: 1,
-                textAlign: "center",
-                order: upMd ? 2 : 1,
-                alignSelf: "center",
-                aspectRatio: "1 / 1",
-                width: upMd ? undefined : "100%",
-                maxHeight: upMd ? "550px" : "300px",
-            }}>
+            <Box
+                sx={{
+                    ml: upMd ? "-100px" : undefined,
+                    mb: "-40px",
+                    flexShrink: 1,
+                    textAlign: "center",
+                    order: upMd ? 2 : 1,
+                    alignSelf: "center",
+                    aspectRatio: "1 / 1",
+                    width: upMd ? undefined : "100%",
+                    maxHeight: upMd ? "550px" : "300px",
+                }}
+            >
                 <video
                     autoPlay
                     loop

src/pages/Landing/Section2.tsx

@@ -2,6 +2,8 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import WideTemplCard from "@components/wideTemplCard";
 import TemplCardPhonePink from "@components/templCardPhonePink";
 import SectionWrapper from "@components/SectionWrapper";
+import { PenaLink } from "@frontend/kitui";
+import { Link as RouterLink } from "react-router-dom";
 
 export default function Section2() {
   const theme = useTheme();