страница тарифов красивее, умеет возвращать на лист и реактивно показывает баланс

src/pages/Tariffs/Tariffs.tsx

@@ -1,22 +1,32 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { makeRequest } from "@frontend/kitui";
 import { useEffect, useState } from "react";
 import type { GetTariffsResponse } from "@model/tariff";
+import { clearAuthToken } from "@frontend/kitui";
+import { logout } from "@api/auth";
+import ArrowDown from "../../assets/icons/ArrowDownIcon";
 
 import {
   Box,
   Button,
+  Container,
   Modal,
   Paper,
   Typography,
   useMediaQuery,
   useTheme,
+  IconButton
 } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
 import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
 import { withErrorBoundary } from "react-error-boundary";
 import { createTariffElements } from "./tariffsUtils/createTariffElements";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
+import { LogoutButton } from "@ui_kit/LogoutButton";
+import { clearUserData } from "@root/user";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import { currencyFormatter } from "./tariffsUtils/currencyFormatter";
 
 function TariffPage() {
   const theme = useTheme();
@@ -29,6 +39,7 @@ function TariffPage() {
   const [discounts, setDiscounts] = useState();
   const [cartTariffMap, setCartTariffMap] = useState();
   const [openModal, setOpenModal] = useState({});
+  const [cash, setCash] = useState("0");
 
   useEffect(() => {
     const get = async () => {
@@ -47,6 +58,8 @@ function TariffPage() {
       setUser(user);
       setTariffs(tariffs);
       setDiscounts(discounts.Discounts);
+      let c = currencyFormatter.format(Number(user.wallet.cash) / 100)
+      setCash(c)
     };
     get();
   }, []);
@@ -68,10 +81,13 @@ function TariffPage() {
     //Если нам хватает денежек - покупаем тариф
     if (price <= user.wallet.cash) {
       try {
-        await makeRequest({
+        const data = await makeRequest({
           method: "POST",
-          url: "https://suiz.pena.digital/customer/cart/pay",
+          url: "https://squiz.pena.digital/customer/cart/pay",
         });
+        setCash(currencyFormatter.format(Number(data.wallet.cash) / 100))
+        enqueueSnackbar("Тариф успешно приобретён");
+
       } catch (e) {
         enqueueSnackbar("Произошла ошибка. Попробуйте позже");
       }
@@ -82,9 +98,8 @@ function TariffPage() {
       // history.pushState({}, null, "https://hub.pena.digital/wallet?action=squizpay");
 
       var link = document.createElement("a");
-      link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${
+      link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${(price - Number(user.wallet.cash)) * 100
-        (price - Number(user.wallet.cash)) * 100
+        }`;
-      }`;
       document.body.appendChild(link);
       //   link.click();
     }
@@ -100,19 +115,72 @@ function TariffPage() {
     );
   });
 
+  async function handleLogoutClick() {
+    const [, logoutError] = await logout();
+
+    if (logoutError) {
+      return enqueueSnackbar(logoutError);
+    }
+
+    clearAuthToken();
+    clearUserData();
+    navigate("/");
+  }
   return (
     <>
-      <HeaderFull />
+      <Container
+        component="nav"
+        disableGutters
+        maxWidth={false}
+        sx={{
+          px: "16px",
+          display: "flex",
+          height: "80px",
+          alignItems: "center",
+          gap: isTablet ? "20px" : "60px",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          bgcolor: "white",
+          borderBottom: "1px solid #E3E3E3",
+        }}
+      >
+        <Link to="/">
+          <Logotip width={124} />
+        </Link>
+        <IconButton onClick={() => navigate("/list")}>
+          <ArrowLeft color="black" />
+        </IconButton>
+        <Box sx={{ display: "flex", ml: "auto" }}>
+          <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
+            <Typography
+              sx={{
+                fontSize: "12px",
+                lineHeight: "14px",
+                color: "gray",
+              }}
+            >
+              Мой баланс
+            </Typography>
+            <Typography variant="body2" color={"#7e2aea"}>
+              {cash}
+            </Typography>
+          </Box>
+          <LogoutButton
+            onClick={handleLogoutClick}
+            sx={{
+              ml: "20px",
+            }}
+          />
+        </Box>
+      </Container>
       <Box
         sx={{
           justifyContent: "left",
-          mt: "40px",
-          mb: "30px",
           display: "grid",
           gap: "40px",
-          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
+          p: "20px",
-            isTablet ? "436px" : "360px"
+          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${isTablet ? "436px" : "360px"
-          }))`,
+            }))`,
         }}
       >
         {createTariffElements(
@@ -163,7 +231,7 @@ export const Tariffs = withErrorBoundary(TariffPage, {
       Ошибка загрузки тарифов
     </Typography>
   ),
-  onError: () => {},
+  onError: () => { },
 });
 
 const LoadingPage = () => (
@@ -183,22 +251,26 @@ const LoadingPage = () => (
 
 export const inCart = () => {
   let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
-  saveCart.forEach(async (id: string) => {
+  if (Array.isArray(saveCart)) {
-    try {
+    saveCart.forEach(async (id: string) => {
-      await makeRequest({
+      try {
-        method: "PATCH",
+        await makeRequest({
-        url: `https://hub.pena.digital/customer/cart?id=${id}`,
+          method: "PATCH",
-      });
+          url: `https://hub.pena.digital/customer/cart?id=${id}`,
+        });
 
-      let index = saveCart.indexOf("green");
+        let index = saveCart.indexOf("green");
-      if (index !== -1) {
+        if (index !== -1) {
-        saveCart.splice(index, 1);
+          saveCart.splice(index, 1);
+        }
+        localStorage.setItem("saveCart", JSON.stringify(saveCart));
+      } catch (e) {
+        console.log("Я не смог добавить тариф в корзину :( " + id);
       }
-      localStorage.setItem("saveCart", JSON.stringify(saveCart));
+    });
-    } catch (e) {
+  } else {
-      console.log("Я не смог добавить тариф в корзину :( " + id);
+    localStorage.setItem("saveCart", "[]")
-    }
+  }
-  });
 };
 const outCart = (cart: string[]) => {
   //Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально
@@ -206,7 +278,7 @@ const outCart = (cart: string[]) => {
     try {
       await makeRequest({
         method: "DELETE",
-        url: `https://suiz.pena.digital/customer/cart?id=${id}`,
+        url: `https://squiz.pena.digital/customer/cart?id=${id}`,
       });
       let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
       saveCart = saveCart.push(id);

src/pages/createQuize/QuizCard.tsx

@@ -50,7 +50,7 @@ export default function QuizCard({
       try {
         await makeRequest({
           method: "POST",
-          url: "https://suiz.pena.digital/customer/cart/pay",
+          url: "https://squiz.pena.digital/customer/cart/pay",
         });
         inCart();
       } catch (e) {