SaveTariffs update

2023-08-27 16:04:26 +03:00 · 2023-08-27 16:04:26 +03:00 · 3eb201c5e8
commit 3eb201c5e8
parent 6fbb73002d
10 changed files with 69 additions and 201 deletions
--- a/src/components/Drawers.tsx
+++ b/src/components/Drawers.tsx
@ -1,13 +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 } 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 {
-  closeCartDrawer,
-  openCartDrawer,
-  useCartStore,
-} from "@root/stores/cart";
+import { closeCartDrawer, openCartDrawer, useCartStore } from "@root/stores/cart";
 import { useUserStore } from "@root/stores/user";
-import {
-  updateTickets,
-  setTicketCount,
-  useTicketStore,
-} from "@root/stores/tickets";
+import { 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] =
-    useState<boolean>(false);
+  const [openNotificationsModal, setOpenNotificationsModal] = 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_id && top_message.shown.me !== 1
+    ({ user, top_message }) => 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
-            ? theme.palette.purple.dark
-            : theme.palette.background.default,
+          background: openNotificationsModal ? theme.palette.purple.dark : theme.palette.background.default,
          "& .MuiBadge-badge": {
-            background: openNotificationsModal
-              ? theme.palette.background.default
-              : theme.palette.purple.dark,
-            color: openNotificationsModal
-              ? theme.palette.purple.dark
-              : theme.palette.background.default,
+            background: openNotificationsModal ? 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:
-              ticket.user === ticket.top_message.user_id ||
-              ticket.top_message.shown.me === 1,
+            watched: 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
-        anchor={"right"}
-        open={isDrawerOpen}
-        onClose={closeCartDrawer}
-        sx={{ background: "rgba(0, 0, 0, 0.55)" }}
-      >
+      <Drawer 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
-                key={serviceData.serviceKey}
-                serviceData={serviceData}
-              />
+              <CustomWrapperDrawer key={serviceData.serviceKey} serviceData={serviceData} />
            ))}
            <Box
              sx={{
                mt: "40px",
                pt: upMd ? "30px" : undefined,
-                borderTop: upMd
-                  ? `1px solid ${theme.palette.gray.main}`
-                  : undefined,
+                borderTop: upMd ? `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>
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@ -57,11 +57,7 @@ export default function Menu() {
              state={{ previousUrl: location.pathname }}
            >
              <Typography
-                color={
-                  location.pathname === url
-                    ? theme.palette.purple.dark
-                    : color
-                }
+                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={
-                location.pathname === url
-                  ? theme.palette.purple.dark
-                  : color
-              }
+              key={index}
+              color={location.pathname === url ? 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={
-                  location.pathname === url
-                    ? theme.palette.purple.dark
-                    : color
-                }
+                color={location.pathname === url ? theme.palette.purple.dark : color}
                variant="body2"
                sx={{
                  padding: "15px",
--- a/src/pages/Faq/Faq.tsx
+++ b/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 = [
-  "Pena hub",
-  "Шаблоны",
-  "Опросы",
-  "Ссылки",
-  "Финансовые",
-  "Юридические",
-  "Юридические лица",
-];
+const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];

 export default function Faq() {
  const theme = useTheme();
@ -46,10 +36,7 @@ export default function Faq() {
        }}
      >
        {isMobile && (
-          <IconButton
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
@ -62,11 +49,7 @@ export default function Faq() {
          Вопросы и ответы
        </Typography>
      </Box>
-      <Tabs
-        items={subPages}
-        selectedItem={tabIndex}
-        setSelectedItem={setTabIndex}
-      />
+      <Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
      <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
        <AccordionWrapper
          content={[
--- a/src/pages/History/index.tsx
+++ b/src/pages/History/index.tsx
@ -1,11 +1,5 @@
 import { useState } from "react";
-import {
-  Box,
-  IconButton,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { 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
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
+          <IconButton 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
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
+        <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
      ) : (
-        <Tabs
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
+        <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
      )}
      {HISTORY.map((history, index) => (
-        <Box
-          hidden={selectedItem !== index}
-          sx={{ mt: upMd ? "27px" : "10px" }}
-        >
+        <Box key={index} hidden={selectedItem !== index} sx={{ mt: upMd ? "27px" : "10px" }}>
          <AccordionWrapper content={history} />
        </Box>
      ))}
--- a/src/pages/SavedTariffs/SaveWrapper.tsx
+++ b/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 {
--- a/src/pages/SavedTariffs/index.tsx
+++ b/src/pages/SavedTariffs/index.tsx
@ -1,16 +1,12 @@
-import {
-  IconButton,
-  Box,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { 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 type { Tariff } from "@frontend/kitui";
+import { useTariffStore, updateTariffs } from "@root/stores/tariffs";
+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
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
--- a/src/pages/Support/Support.tsx
+++ b/src/pages/Support/Support.tsx
@ -1,26 +1,15 @@
-import {
-  Typography,
-  Box,
-  useTheme,
-  useMediaQuery,
-  IconButton,
-} from "@mui/material";
+import { 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 {
-  updateTickets,
-  setTicketCount,
-  useTicketStore,
-} from "@root/stores/tickets";
+import { 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
-          onClick={handleCustomBackNavigation}
-          sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-        >
+        <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
          <ArrowBackIcon />
        </IconButton>
        <Typography
--- a/src/pages/TariffConstructor/TariffConstructor.tsx
+++ b/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",
--- a/src/pages/Tariffs/TariffsPage.tsx
+++ b/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 =
-    useUserStore((state) => state.userAccount?.wallet.purchasesAmount) ?? 0;
+  const purchasesAmount = 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(
-    (tariff): tariff is Tariff => typeof tariff === "object"
-  );
+  const currentTariffs = Object.values(cartTariffMap).filter((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") ===
-        (unit === "time") &&
+      tariff.privilegies.map((p) => p.type).includes("day") === (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") ===
-        (unit === "time") &&
+      tariff.privilegies.map((p) => p.type).includes("day") === (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 } =
-          calcIndividualTariffPrices(
-            tariff,
-            discounts,
-            purchasesAmount,
-            currentTariffs
-          );
+        const { priceBeforeDiscounts, priceAfterDiscounts } = calcIndividualTariffPrices(
+          tariff,
+          discounts,
+          purchasesAmount,
+          currentTariffs
+        );

        return (
          <TariffCard
@ -116,21 +110,16 @@ export default function TariffPage() {
            price={
              <>
                {priceBeforeDiscounts !== priceAfterDiscounts && (
-                  <Typography variant="oldPrice">
-                    {currencyFormatter.format(priceBeforeDiscounts / 100)}
-                  </Typography>
+                  <Typography variant="oldPrice">{currencyFormatter.format(priceBeforeDiscounts / 100)}</Typography>
                )}
-                <Typography variant="price">
-                  {currencyFormatter.format(priceAfterDiscounts / 100)}
-                </Typography>
+                <Typography variant="price">{currencyFormatter.format(priceAfterDiscounts / 100)}</Typography>
              </>
            }
          />
        );
      });

-    if (tariffElements.length < 6)
-      tariffElements.push(<FreeTariffCard key="free_tariff_card" />);
+    if (tariffElements.length < 6) 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
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
+        <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
      ) : (
-        <Tabs
-          items={subPages}
-          selectedItem={selectedItem}
-          setSelectedItem={setSelectedItem}
-        />
+        <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
      )}
      <Box
        sx={{
--- a/src/stores/cart.ts
+++ b/src/stores/cart.ts
@ -34,10 +34,7 @@ export const useCartStore = create<CartStore>()(
  )
 );

-export const setCartTariffStatus = (
-  tariffId: string,
-  status: "loading" | "not found"
-) =>
+export const setCartTariffStatus = (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 = (
-  tariffs: Tariff[],
-  discounts: Discount[],
-  purchasesAmount: number
-) =>
+export const addCartTariffs = (tariffs: Tariff[], discounts: Discount[], purchasesAmount: number) =>
  useCartStore.setState(
    produce<CartStore>((state) => {
      tariffs.forEach((tariff) => {
@ -76,11 +69,7 @@ export const addCartTariffs = (
    }
  );

-export const removeMissingCartTariffs = (
-  tariffIds: string[],
-  discounts: Discount[],
-  purchasesAmount: number
-) =>
+export const removeMissingCartTariffs = (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 = () =>
-  useCartStore.setState({ isDrawerOpen: true });
+export const openCartDrawer = () => useCartStore.setState({ isDrawerOpen: true });

-export const closeCartDrawer = () =>
-  useCartStore.setState({ isDrawerOpen: false });
+export const closeCartDrawer = () => useCartStore.setState({ isDrawerOpen: false });