create TariffsPage

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

src/__mocks__/CustomRadioButtonsMocks.ts

@@ -0,0 +1,5 @@
+export const _mocsk_ = [
+  { name: "Шаблонизатор", type: "templ" },
+  { name: "Опросник", type: "squiz" },
+  { name: "Сокращатель ссылок", type: "reduce" },
+];

src/__mocks__/StepperSampleMocsk.ts

@@ -1,5 +0,0 @@
-export const _mocsk_ = [
-  { name: "Шаблонизатор", url: "" },
-  { name: "Опросник", url: "" },
-  { name: "Сокращатель ссылок", url: "" },
-];

src/__mocks__/showCaseObject.ts

@@ -0,0 +1,24 @@
+import { showCaseTime } from "./showCaseTime";
+import { showCaseVolume } from "./showCaseVolume";
+
+export const showCaseObject: Record<
+  string,
+  Record<
+    string,
+    {
+      name: string;
+      desc: string;
+      style: {
+        icon: string;
+        bgcolor: string;
+      };
+      id: string;
+      amount: number;
+      price: number;
+    }[]
+  >
+> = {
+  templ: { volume: showCaseVolume, time: showCaseTime },
+  squiz: { volume: showCaseVolume, time: showCaseTime },
+  reduce: { volume: showCaseVolume, time: showCaseTime },
+};

src/__mocks__/showCaseTime.ts

@@ -0,0 +1,48 @@
+import Infinity from "../assets/Icons/tariffs-time/Infinity.svg";
+import OneIcons from "../assets/Icons/tariffs-time/OneIcons.svg";
+import ThreeIcons from "../assets/Icons/tariffs-time/ThreeIcons.svg";
+import SixIcons from "../assets/Icons/tariffs-time/SixIcons.svg";
+import NineIcons from "../assets/Icons/tariffs-time/NineIcons.svg";
+
+export const showCaseTime = [
+  {
+    name: "Безлимит",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: Infinity, bgcolor: "#D6F3E9" },
+    id: "id1",
+    amount: 10,
+    price: 100,
+  },
+  {
+    name: "1 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: OneIcons, bgcolor: "#EEE4FC" },
+    id: "id2",
+    amount: 10,
+    price: 1000,
+  },
+  {
+    name: "3 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: ThreeIcons, bgcolor: "#EEE4FC" },
+    id: "id3",
+    amount: 10,
+    price: 1000,
+  },
+  {
+    name: "6 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: SixIcons, bgcolor: "#EEE4FC" },
+    id: "id4",
+    amount: 10,
+    price: 1000,
+  },
+  {
+    name: "9 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: NineIcons, bgcolor: "#EEE4FC" },
+    id: "id5",
+    amount: 10,
+    price: 1000,
+  },
+];

src/__mocks__/showCaseVolume.ts

@@ -0,0 +1,48 @@
+import OneIcons from "../assets/Icons/tariffs-volume/OneIcons.svg";
+import TwoIcons from "../assets/Icons/tariffs-volume/TwoIcons.svg";
+import ThreeIcons from "../assets/Icons/tariffs-volume/ThreeIcons.svg";
+import FourIcons from "../assets/Icons/tariffs-volume/FourIcons.svg";
+import FiveIcons from "../assets/Icons/tariffs-volume/FiveIcons.svg";
+
+export const showCaseVolume = [
+  {
+    name: "Безлимит",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: OneIcons, bgcolor: "#FEDFD0" },
+    id: "id1",
+    amount: 10,
+    price: 100,
+  },
+  {
+    name: "1 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: TwoIcons, bgcolor: "#FEDFD0" },
+    id: "id2",
+    amount: 10,
+    price: 1000,
+  },
+  {
+    name: "3 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: ThreeIcons, bgcolor: "#FEDFD0" },
+    id: "id3",
+    amount: 10,
+    price: 1000,
+  },
+  {
+    name: "6 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: FourIcons, bgcolor: "#FEDFD0" },
+    id: "id4",
+    amount: 10,
+    price: 1000,
+  },
+  {
+    name: "9 месяц",
+    desc: "Текст-заполнитель — это текст, который имеет",
+    style: { icon: FiveIcons, bgcolor: "#FEDFD0" },
+    id: "id5",
+    amount: 10,
+    price: 1000,
+  },
+];

src/components/CustomRadioButtons.tsx

@@ -2,11 +2,17 @@ import { List, ListItem, Typography } from "@mui/material";
 import { useState } from "react";
 
 type Props = {
-  _mocsk_: { name: string; url: string }[];
+  setType: React.Dispatch<React.SetStateAction<string>>;
+  _mocsk_: { name: string; type: string }[];
 };
 
-export const StepperSample: React.FC<Props> = ({ _mocsk_ }) => {
-  const [active, setActive] = useState<number>();
+export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
+  const [active, setActive] = useState<number>(0);
+
+  const onkl = (index: number, type: string) => {
+    setActive(index);
+    setType(type);
+  };
 
   return (
     <List
@@ -19,15 +25,15 @@ export const StepperSample: React.FC<Props> = ({ _mocsk_ }) => {
         whiteSpace: "nowrap",
       }}
     >
-      {_mocsk_.map(({ name, url }, index) =>
+      {_mocsk_.map(({ name, type }, index) =>
         active === index ? (
-          <ListItem onClick={() => setActive(index)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
+          <ListItem onClick={() => onkl(index, type)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
             <Typography component="span" sx={{ borderBottom: "1px solid #7E2AEA", fontSize: " 16px" }}>
               {name}
             </Typography>
           </ListItem>
         ) : (
-          <ListItem onClick={() => setActive(index)} sx={{ cursor: "pointer" }}>
+          <ListItem onClick={() => onkl(index, type)} sx={{ cursor: "pointer" }}>
             {name}
           </ListItem>
         )

src/components/Navbar/NavbarFull.tsx

@@ -31,7 +31,6 @@ export default function NavbarFull({ isLoggedIn }: Props) {
   useEffect(() => {
     setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
   });
-  console.log(templ);
 
   async function handleLogoutClick() {
     clearToken();

src/index.tsx

@@ -10,15 +10,14 @@ import Wallet from "./pages/Wallet";
 import Payment from "./pages/Payment/Payment";
 import Support from "./pages/Support/Support";
 import CustomTariff from "./pages/CustomTariff/CustomTariff";
-import { TariffsVolume } from "./pages/Tariffs/TariffsVolume";
 import { AccountSetup } from "./pages/AccountSetup";
 import Landing from "./pages/Landing/Landing";
 import Tariffs from "./pages/Tariffs/Tariffs";
-import { TariffsTime } from "./pages/Tariffs/TariffsTime";
 import Signin from "./pages/auth/Signin";
 import Signup from "./pages/auth/Signup";
 import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
 import { Basket } from "./pages/Basket/Basket";
+import { TariffPage } from "./pages/Tariffs/TariffsPage";
 
 import Footer from "@components/Footer";
 import Navbar from "@components/Navbar/Navbar";
@@ -76,12 +75,12 @@ const App = () => {
                 </>
               }
             >
-              <Route path="time" element={<TariffsTime />} />
+              <Route path="time" element={<TariffPage />} />
               <Route
                 path="volume"
                 element={
                   <PublicRoute>
-                    <TariffsVolume />
+                    <TariffPage />
                   </PublicRoute>
                 }
               />

src/pages/Tariffs/Tariffs.tsx

@@ -1,18 +1,17 @@
-import { useMediaQuery, useTheme, Box, Link, Typography } from "@mui/material";
 import { Outlet, Route, Routes } from "react-router-dom";
+import { useMediaQuery, useTheme, Box, Link, Typography } from "@mui/material";
 
 import CardWithLink from "@components/CardWithLink";
 import SectionWrapper from "@components/SectionWrapper";
 import CustomIcon from "@components/icons/CustomIcon";
+import CalendarIcon from "@components/icons/CalendarIcon";
+import PieChartIcon from "@components/icons/PieChartIcon";
 import TariffCard from "./TariffCard";
 
 import video1 from "../../assets/animations/Icon_1.webm";
 import video2 from "../../assets/animations/Icon_2.webm";
 import video3 from "../../assets/animations/Icon_3.webm";
 
-import CalendarIcon from "../../components/icons/CalendarIcon";
-import PieChartIcon from "../../components/icons/PieChartIcon";
-
 export default function Tariffs() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));

src/pages/Tariffs/TariffsPage.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useLocation } from "react-router-dom";
+
+import SectionWrapper from "@components/SectionWrapper";
+import { CustomRadioButtons } from "@root/components/CustomRadioButtons";
+import { StepperSquiz } from "@components/StepperSquiz";
+import { FreeTariffCard } from "./FreeTariffCard";
+import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
+
+import { basketStore } from "@root/stores/BasketStore";
+
+import { _mocsk_ } from "@root/__mocks__/CustomRadioButtonsMocks";
+import { showCaseObject } from "@root/__mocks__/showCaseObject";
+
+import { IconsCreate } from "@root/lib/IconsCreate";
+
+export const TariffPage = () => {
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const { add } = basketStore();
+  const location = useLocation();
+  const [type, setType] = useState<string>("templ");
+  const unit: string = String(location.pathname).slice(9);
+
+  const StepperText: Record<string, string> = { volume: "Тарифы на объём", time: "Тарифы на время" };
+
+  console.log(type);
+  return (
+    <SectionWrapper
+      maxWidth="lg"
+      sx={{
+        mt: "20px",
+        mb: upMd ? "90px" : "63px",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <StepperSquiz text={StepperText[unit]} />
+      <Typography variant="h4" sx={{ marginBottom: "28px" }}>
+        {StepperText[unit]}
+      </Typography>
+      <CustomRadioButtons setType={setType} _mocsk_={_mocsk_} />
+      <Box
+        sx={{
+          width: upMd ? "100%" : undefined,
+          mt: "40px",
+          mb: "30px",
+          display: "flex",
+          flexDirection: upMd ? "row" : "column",
+          gap: upMd ? "3.5%" : "30px",
+          alignSelf: "center",
+          flexWrap: "wrap",
+        }}
+      >
+        {showCaseObject[type][unit].map((element, index) => (
+          <TariffCardTimeAndVolume
+            key={index}
+            sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
+            icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
+            headerText={element.name}
+            text={element.desc}
+            money={element.price}
+            href=""
+            onclick={() => {
+              add({ id: element.id, type: type, obj: element });
+            }}
+            textButton="выбрать"
+          />
+        ))}
+
+        <FreeTariffCard
+          sx={{
+            width: upMd ? "31%" : undefined,
+            marginBottom: "40px",
+            backgroundColor: "#7E2AEA",
+            color: "white",
+          }}
+          headerText="бесплатно"
+          text="Текст-заполнитель — это текст, который имеет "
+          href=""
+        />
+      </Box>
+    </SectionWrapper>
+  );
+};

src/pages/Tariffs/TariffsTime.tsx

@@ -1,126 +0,0 @@
-import { useMediaQuery, useTheme, Box, Typography } from "@mui/material";
-
-import SectionWrapper from "@components/SectionWrapper";
-import { StepperSample } from "@components/StepperSample";
-import { StepperSquiz } from "@root/components/StepperSquiz";
-import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
-import { FreeTariffCard } from "./FreeTariffCard";
-import { basketStore } from "@root/stores/BasketStore";
-
-import { IconsCreate } from "../../lib/IconsCreate";
-
-import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk";
-
-import Infinity from "../../assets/Icons/tariffs-time/Infinity.svg";
-import OneIcons from "../../assets/Icons/tariffs-time/OneIcons.svg";
-import ThreeIcons from "../../assets/Icons/tariffs-time/ThreeIcons.svg";
-import SixIcons from "../../assets/Icons/tariffs-time/SixIcons.svg";
-import NineIcons from "../../assets/Icons/tariffs-time/NineIcons.svg";
-
-const showcaseTime = [
-  {
-    name: "Безлимит",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: Infinity, bgcolor: "#D6F3E9" },
-    id: 1,
-    amount: 10,
-    price: 100,
-  },
-  {
-    name: "1 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: OneIcons, bgcolor: "#EEE4FC" },
-    id: 2,
-    amount: 10,
-    price: 1000,
-  },
-  {
-    name: "3 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: ThreeIcons, bgcolor: "#EEE4FC" },
-    id: 3,
-    amount: 10,
-    price: 1000,
-  },
-  {
-    name: "6 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: SixIcons, bgcolor: "#EEE4FC" },
-    id: 4,
-    amount: 10,
-    price: 1000,
-  },
-  {
-    name: "9 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: NineIcons, bgcolor: "#EEE4FC" },
-    id: 1,
-    amount: 10,
-    price: 1000,
-  },
-];
-export const TariffsTime = () => {
-  const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-
-  const { add, templ } = basketStore();
-
-  return (
-    <SectionWrapper
-      maxWidth="lg"
-      sx={{
-        mt: "20px",
-        mb: upMd ? "90px" : "63px",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <StepperSquiz text="Тарифы на время" />
-      <Typography variant="h4" sx={{ marginBottom: "28px" }}>
-        Тарифы на время
-      </Typography>
-      <StepperSample _mocsk_={_mocsk_} />
-      <Box
-        sx={{
-          width: upMd ? "100%" : undefined,
-          mt: "40px",
-          mb: "30px",
-          display: "flex",
-          flexDirection: upMd ? "row" : "column",
-          gap: upMd ? "3.5%" : "30px",
-          alignSelf: "center",
-          flexWrap: "wrap",
-        }}
-      >
-        {showcaseTime.map((element, index) => (
-          <TariffCardTimeAndVolume
-            key={index}
-            sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
-            icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
-            headerText={element.name}
-            text={element.desc}
-            money={element.price}
-            href=""
-            onclick={() => {
-              add({ id: element.id, type: "templ", obj: element });
-              console.log(templ);
-            }}
-            textButton="выбрать"
-          />
-        ))}
-
-        <FreeTariffCard
-          sx={{
-            width: upMd ? "31%" : undefined,
-            marginBottom: "40px",
-            backgroundColor: "#7E2AEA",
-            color: "white",
-          }}
-          headerText="бесплатно"
-          text="Текст-заполнитель — это текст, который имеет "
-          href=""
-        />
-      </Box>
-    </SectionWrapper>
-  );
-};

src/pages/Tariffs/TariffsVolume.tsx

@@ -1,123 +0,0 @@
-import { useMediaQuery, useTheme, Box, Typography } from "@mui/material";
-
-import SectionWrapper from "@components/SectionWrapper";
-import { StepperSquiz } from "@components/StepperSquiz";
-import { StepperSample } from "@components/StepperSample";
-import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
-import { FreeTariffCard } from "./FreeTariffCard";
-import { basketStore } from "@root/stores/BasketStore";
-
-import { IconsCreate } from "../../lib/IconsCreate";
-
-import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk";
-
-import OneIcons from "../../assets/Icons/tariffs-volume/OneIcons.svg";
-import TwoIcons from "../../assets/Icons/tariffs-volume/TwoIcons.svg";
-import ThreeIcons from "../../assets/Icons/tariffs-volume/ThreeIcons.svg";
-import FourIcons from "../../assets/Icons/tariffs-volume/FourIcons.svg";
-import FiveIcons from "../../assets/Icons/tariffs-volume/FiveIcons.svg";
-const showcaseVolume = [
-  {
-    name: "Безлимит",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: OneIcons, bgcolor: "#FEDFD0" },
-    id: 1,
-    amount: 10,
-    price: 100,
-  },
-  {
-    name: "1 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: TwoIcons, bgcolor: "#FEDFD0" },
-    id: 1,
-    amount: 10,
-    price: 1000,
-  },
-  {
-    name: "3 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: ThreeIcons, bgcolor: "#FEDFD0" },
-    id: 1,
-    amount: 10,
-    price: 1000,
-  },
-  {
-    name: "6 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: FourIcons, bgcolor: "#FEDFD0" },
-    id: 1,
-    amount: 10,
-    price: 1000,
-  },
-  {
-    name: "9 месяц",
-    desc: "Текст-заполнитель — это текст, который имеет",
-    style: { icon: FiveIcons, bgcolor: "#FEDFD0" },
-    id: 1,
-    amount: 10,
-    price: 1000,
-  },
-];
-export const TariffsVolume = () => {
-  const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const { add } = basketStore();
-
-  return (
-    <SectionWrapper
-      maxWidth="lg"
-      sx={{
-        mt: "20px",
-        mb: upMd ? "90px" : "63px",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <StepperSquiz text="Тарифы на объем" />
-      <Typography variant="h4" sx={{ marginBottom: "28px" }}>
-        Тарифы на объем
-      </Typography>
-
-      <StepperSample _mocsk_={_mocsk_} />
-      <Box
-        sx={{
-          width: upMd ? "100%" : undefined,
-          mt: "40px",
-          mb: "30px",
-          display: "flex",
-          flexDirection: upMd ? "row" : "column",
-          gap: upMd ? "3.5%" : "30px",
-          alignSelf: "center",
-          flexWrap: "wrap",
-        }}
-      >
-        {showcaseVolume.map((element, index) => (
-          <TariffCardTimeAndVolume
-            key={index}
-            sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
-            icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
-            headerText={element.name}
-            text={element.desc}
-            money={element.price}
-            href=""
-            onclick={() => {
-              add({ id: element.id, type: "templ", obj: element });
-            }}
-            textButton="выбрать"
-          />
-        ))}
-        <FreeTariffCard
-          sx={{
-            width: upMd ? "31%" : undefined,
-            marginBottom: "40px",
-            backgroundColor: "#7E2AEA",
-            color: "white",
-          }}
-          headerText="бесплатно"
-          text="Текст-заполнитель — это текст, который имеет "
-          href=""
-        />
-      </Box>
-    </SectionWrapper>
-  );
-};

src/stores/BasketStore.ts

@@ -49,7 +49,7 @@ export const basketStore = create<any>()((set, get) => ({
     };
     set(() => newStore);
   },
-  remove: (type: any, id: string) => {
+  remove: (type: string, id: string) => {
     const store: any = get()[type] || {};
 
     const newStore = Object.entries(store).reduce<any>((accamulator, [key, value], index, array) => {

src/stores/test/method-remove.test.ts

@@ -0,0 +1,10 @@
+import { basketStore } from "../BasketStore";
+
+describe("remove method tests", () => {
+  const key = ["templ", "squiz"];
+  const remove = basketStore((state) => state.remove);
+
+  test("test remove for the correct execution", () => {
+    remove("templ", "id1");
+  });
+});