start of custom

.idea/workspace.xml

@@ -2,10 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="3a23e62a-21bd-4f51-a89e-05a6cca5b71f" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/src/model/cutsomTariffs.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/stores/customTariffs.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/CardWithLink.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/CardWithLink.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/Landing/Section1.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Landing/Section1.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/Landing/Section2.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Landing/Section2.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/wideTemplCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/wideTemplCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/CustomTariff/CustomTariff.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/CustomTariff/CustomTariff.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/CustomTariff/TariffConstructorCard.tsx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Tariffs/TariffCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Tariffs/TariffCard.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/Tariffs/Tariffs.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Tariffs/Tariffs.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -16,6 +19,14 @@
   <component name="ComposerSettings">
     <execution />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="TypeScript JSX File" />
+        <option value="TypeScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
@@ -28,10 +39,11 @@
     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../admin" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.selected.package.eslint" value="(autodetect)" />
     <property name="nodejs_package_manager_path" value="yarn" />
+    <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
     <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
     <property name="vue.rearranger.settings.migration" value="true" />
   </component>
@@ -50,7 +62,12 @@
       <workItem from="1679318207973" duration="698000" />
       <workItem from="1683901452721" duration="478000" />
       <workItem from="1684324070902" duration="369000" />
-      <workItem from="1684341374308" duration="1605000" />
+      <workItem from="1684341374308" duration="1926000" />
+      <workItem from="1684401006003" duration="187000" />
+      <workItem from="1684651257079" duration="618000" />
+      <workItem from="1684926135796" duration="805000" />
+      <workItem from="1684930825263" duration="6998000" />
+      <workItem from="1685010713277" duration="2445000" />
     </task>
     <servers />
   </component>

src/components/wideTemplCard.tsx

@@ -16,7 +16,6 @@ interface Props {
 export default function ({light = true, sx}: Props) {
     const theme = useTheme();
     const upMd = useMediaQuery(theme.breakpoints.up("md"));
-    console.log("я широкий")
 
     return  <Box sx={{
         position: "relative",

src/model/cutsomTariffs.ts

@@ -0,0 +1,13 @@
+export interface SourceTariff {
+    _id: string;
+    name: string;
+    privilegeId: string;
+    serviceKey: string;
+    description: string;
+    type: string;
+    value: string;
+    price: number;
+    updatedAt: string;
+    isDeleted: boolean;
+    createdAt: string;
+};

src/pages/CustomTariff/CustomTariff.tsx

@@ -3,13 +3,35 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 import CustomButton from "@components/CustomButton";
 import SectionWrapper from "@components/SectionWrapper";
-import TariffConstructorCard from "./TariffConstructorCard";
 import ComplexHeader from "@components/ComplexHeader";
 import ComplexNavText from "@root/components/ComplexNavText";
+import GeneralSettingsPanel from "./generalSettingsPanel";
+import axios from "axios";
+import { enqueueSnackbar } from "notistack";
+import { useCustomTariffsStore } from "@root/stores/customTariffs";
+import {useTicketStore} from "@stores/tickets";
+import React from "react";
+import {SourceTariff} from "@root/model/cutsomTariffs"
 
 export default function TariffConstructor() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+    const customTariffsValues = useCustomTariffsStore(state => state.values);
+    const [customTariffs, setCustomTariffs] = React.useState< Record<string, SourceTariff[]> | {}>({});
+//     const putPrivilegies = () => {
+//         axios({
+//             method: "get",
+//             url: "https://admin.pena.digital/strator/privilege/service"
+//         })
+//         .then((e) => {
+//             setCustomTariffs(e.data)
+// console.log(e.data)
+//         })
+//         .catch(() => {
+//             enqueueSnackbar("произошла ошибка")
+//         })
+//     };
+    // putPrivilegies()
 
   return (
     <SectionWrapper
@@ -35,21 +57,24 @@ export default function TariffConstructor() {
         )}
         <ComplexHeader text1="Кастомный тариф " text2="Шаблонизатор" />
       </Box>
-      <TariffConstructorCard
-        time="9 месяцев"
-        quantity="1000 шаблонов"
-        discountText="-60%"
-        totalText="3 190 руб."
-        totalWithoutDiscountText="10 190 руб."
-      />
+        {/*{*/}
+        {/*    Object.keys(customTariffs).map((e:string, i:number) => {*/}
+        {/*        return*/}
+        {/*        <GeneralSettingsPanel*/}
+        {/*            header={e}*/}
+        {/*            values={customTariffs[e]}*/}
+        {/*            key={i}*/}
+        {/*        />*/}
+        {/*    })*/}
+        {/*}*/}
       <ComplexHeader sx={{ mt: upMd ? "80px" : "70px", mb: "40px" }} text1="Кастомный тариф " text2="Опросник" />
-      <TariffConstructorCard
-        time="9 месяцев"
-        quantity="1000 шаблонов"
-        discountText="-60%"
-        totalText="3 190 руб."
-        totalWithoutDiscountText="10 190 руб."
-      />
+      {/*<GeneralSettingsPanel*/}
+      {/*  time="9 месяцев"*/}
+      {/*  quantity="1000 шаблонов"*/}
+      {/*  discountText="-60%"*/}
+      {/*  totalText="3 190 руб."*/}
+      {/*  totalWithoutDiscountText="10 190 руб."*/}
+      {/*/>*/}
       <Box
         sx={{
           display: "flex",

src/pages/CustomTariff/TariffConstructorCard.tsx

@@ -1,189 +0,0 @@
-import { Box, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
-import CustomButton from "../../components/CustomButton";
-import CustomSlider from "../../components/CustomSlider";
-import CalendarIcon from "../../components/icons/CalendarIcon";
-
-interface Props {
-  time: string;
-  quantity: string;
-  discountText?: string;
-  totalText: string;
-  totalWithoutDiscountText: string;
-}
-
-export default function TariffConstructorCard({
-  time,
-  quantity,
-  discountText,
-  totalText,
-  totalWithoutDiscountText,
-}: Props) {
-  const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-
-  const timeLabel = (
-    <Typography variant="p1" color={theme.palette.brightPurple.main} mt={upMd ? undefined : "12px"}>
-      {time}
-    </Typography>
-  );
-  const quantityLabel = (
-    <Typography variant="p1" color={theme.palette.brightPurple.main} mt={upMd ? undefined : "12px"}>
-      {quantity}
-    </Typography>
-  );
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: "white",
-        width: "100%",
-        display: "flex",
-        flexDirection: upMd ? "row" : "column",
-        borderRadius: "12px",
-        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
-                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
-                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
-                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
-                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
-                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
-      }}
-    >
-      <Box
-        sx={{
-          width: upMd ? "68.5%" : undefined,
-          p: "20px",
-          pr: upMd ? "35px" : undefined,
-          display: "flex",
-          flexWrap: "wrap",
-          flexDirection: "column",
-        }}
-      >
-        <Typography sx={{ color: theme.palette.grey3.main, mb: "auto" }}>
-          Текст-заполнитель — это текст, который имеет{" "}
-        </Typography>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            mt: "40px",
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              mb: "8px",
-              justifyContent: "space-between",
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                gap: "22px",
-              }}
-            >
-              <CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
-              <Typography variant="h5">Время</Typography>
-            </Box>
-            {upMd && timeLabel}
-          </Box>
-          <CustomSlider />
-          {!upMd && timeLabel}
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
-            mt: "29px",
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                gap: "22px",
-              }}
-            >
-              <CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
-              <Typography variant="h5">Объем</Typography>
-            </Box>
-            {upMd && quantityLabel}
-          </Box>
-          <CustomSlider />
-          {!upMd && quantityLabel}
-        </Box>
-      </Box>
-      {!upMd && <Divider sx={{ mx: "20px", my: "10px", borderColor: "#9A9AAF" }} />}
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          alignItems: "start",
-          color: theme.palette.grey3.main,
-          width: upMd ? "31.5%" : undefined,
-          p: "20px",
-          pl: upMd ? "33px" : undefined,
-          borderLeft: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            gap: "15%",
-            mb: "auto",
-            width: "100%",
-          }}
-        >
-          <Typography>Чем больше пакеты, тем дешевле подписки и опции </Typography>
-          <Box
-            sx={{
-              px: "6.7px",
-              height: "36px",
-              color: "white",
-              backgroundColor: theme.palette.orange.main,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              borderRadius: "8px",
-            }}
-          >
-            {discountText}
-          </Box>
-        </Box>
-        <Typography mb="20px" mt="18px">
-          Сумма с учетом скидки
-        </Typography>
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: "20px",
-            mb: "30px",
-          }}
-        >
-          <Typography variant="p1">{totalText}</Typography>
-          <Typography color={theme.palette.orange.main} pt="3px" sx={{ textDecoration: "line-through" }}>
-            {totalWithoutDiscountText}
-          </Typography>
-        </Box>
-        <CustomButton
-          variant="contained"
-          sx={{
-            backgroundColor: theme.palette.brightPurple.main,
-          }}
-        >
-          Выбрать
-        </CustomButton>
-      </Box>
-    </Box>
-  );
-}

src/pages/CustomTariff/generalSettingsPanel.tsx

@@ -0,0 +1,52 @@
+import {Box, Divider, IconButton, Typography, useMediaQuery, useTheme} from "@mui/material";
+import CalendarIcon from "@components/icons/CalendarIcon";
+import CustomSlider from "@components/CustomSlider";
+import CustomButton from "@components/CustomButton";
+import TariffConstructorCard from "./tariffConstructorCard";
+import ComplexHeader from "@components/ComplexHeader";
+import {SourceTariff} from "@root/model/cutsomTariffs";
+
+interface Props {
+    header: string
+    values: SourceTariff[]
+}
+
+export default function ({
+header,
+values
+}: Props) {
+    const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+console.log(values)
+    return (
+        <>
+            <ComplexHeader sx={{mt: upMd ? "80px" : "70px", mb: "40px"}} text1="Кастомный тариф " text2="Опросник"/>
+            <Box
+                sx={{
+                    backgroundColor: "white",
+                    width: "100%",
+                    display: "flex",
+                    flexDirection: upMd ? "row" : "column",
+                    borderRadius: "12px",
+                    boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
+                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
+                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
+                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
+                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
+                }}
+            >
+                {
+                    values.map((e:SourceTariff, i:number) => {
+                        return <TariffConstructorCard
+                            name={e.name}
+                            desc={e.description}
+                            key={i}
+                        />
+                    })
+                }
+
+            </Box>
+        </>
+    )
+}

src/pages/CustomTariff/tariffConstructorCard.tsx

@@ -0,0 +1,74 @@
+import {Box, Divider, Typography, useMediaQuery, useTheme} from "@mui/material";
+import CustomButton from "../../components/CustomButton";
+import CustomSlider from "../../components/CustomSlider";
+import CalendarIcon from "../../components/icons/CalendarIcon";
+
+interface Props {
+    name: string,
+    desc: string
+}
+
+export default function TariffConstructorCard({
+    name,
+    desc
+}: Props) {
+    const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
+    const timeLabel = (
+        <Typography variant="p1" color={theme.palette.brightPurple.main} mt={upMd ? undefined : "12px"}>
+           s
+        </Typography>
+    );
+    const quantityLabel = (
+        <Typography variant="p1" color={theme.palette.brightPurple.main} mt={upMd ? undefined : "12px"}>
+            w
+        </Typography>
+    );
+
+    return (
+        <Box
+            sx={{
+                width: upMd ? "68.5%" : undefined,
+                p: "20px",
+                pr: upMd ? "35px" : undefined,
+                display: "flex",
+                flexWrap: "wrap",
+                flexDirection: "column",
+            }}
+        >
+        <Typography sx={{color: theme.palette.grey3.main, mb: "auto"}}>
+            {desc}
+        </Typography>
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                mt: "40px",
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    mb: "8px",
+                    justifyContent: "space-between",
+                }}
+            >
+                <Box
+                    sx={{
+                        display: "flex",
+                        gap: "22px",
+                    }}
+                >
+                    <CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0"/>
+                    <Typography variant="h5">{name}</Typography>
+                </Box>
+                {upMd && timeLabel}
+            </Box>
+            <CustomSlider onChange={(i, e)=>console.log(e)}/>
+            {!upMd && timeLabel}
+        </Box>
+        </Box>
+    );
+}

src/pages/Tariffs/TariffCard.tsx

@@ -1,54 +1,55 @@
-import { Box, SxProps, Theme, useTheme } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import {Box, SxProps, Theme, useTheme} from "@mui/material";
+import {useNavigate} from "react-router-dom";
 import Typography from "@mui/material/Typography";
 
 import CustomButton from "@components/CustomButton";
 
 interface Props {
-  icon: React.ReactNode;
-  headerText: string;
-  text: string;
-  sx?: SxProps<Theme>;
-  href: string;
+    icon: React.ReactNode;
+    headerText: string;
+    text: string;
+    sx?: SxProps<Theme>;
+    href: string;
 }
 
-export default function TariffCard({ icon, headerText, text, sx, href }: Props) {
-  const theme = useTheme();
-  const navigate = useNavigate();
+export default function TariffCard({icon, headerText, text, sx, href}: Props) {
+    const theme = useTheme();
+    const navigate = useNavigate();
 
-  return (
-    <Box
-      sx={{
-        maxWidth: "360px",
-        width: "100%",
-        bgcolor: "white",
-        borderRadius: "12px",
-        display: "flex",
-        flexGrow: 1,
-        flexBasis: "300px",
-        flexDirection: "column",
-        alignItems: "start",
-        p: "20px",
-        ...sx,
-      }}
-    >
-      {icon}
-      <Typography variant="h5" sx={{ mt: "14px", mb: "10px" }}>
-        {headerText}
-      </Typography>
-      <Typography sx={{ minHeight: "calc(1.185*2em)" }}>{text}</Typography>
+    return (
+        <Box
+            sx={{
+                maxWidth: "360px",
+                width: "100%",
+                bgcolor: "white",
+                borderRadius: "12px",
+                display: "flex",
+                flexGrow: 1,
+                flexBasis: "300px",
+                flexDirection: "column",
+                alignItems: "start",
+                p: "20px",
+                ...sx,
+            }}
+        >
+            {icon}
+            <Typography variant="h5" sx={{mt: "14px", mb: "10px"}}>
+                {headerText}
+            </Typography>
+            <Typography sx={{minHeight: "calc(1.185*2em)"}}>{text}</Typography>
 
-      <CustomButton
-        onClick={() => navigate(href)}
-        variant="outlined"
-        sx={{
-          color: theme.palette.brightPurple.main,
-          borderColor: theme.palette.brightPurple.main,
-          mt: "33px",
-        }}
-      >
-        Подробнее
-      </CustomButton>
-    </Box>
-  );
+
+                    <CustomButton
+                        onClick={() => navigate(href)}
+                        variant="outlined"
+                        sx={{
+                            color: theme.palette.brightPurple.main,
+                            borderColor: theme.palette.brightPurple.main,
+                            mt: "33px",
+                        }}
+                    >
+                        Подробнее
+                    </CustomButton>
+        </Box>
+    );
 }

src/pages/Tariffs/Tariffs.tsx

@@ -54,7 +54,7 @@ export default function Tariffs() {
                     icon={<CustomIcon color="white" bgcolor={theme.palette.brightPurple.main}/>}
                     headerText="Кастом"
                     text="Текст-заполнитель — это текст, который имеет "
-                    href="#"
+                    href="/tariffconstructor"
                 />
             </Box>
             <Typography component="div">

src/stores/customTariffs.tsx

@@ -0,0 +1,37 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+
+interface CustomTariffsStore {
+    values: {string: {
+        value: number
+    }} | {}
+}
+
+export const useCustomTariffsStore = create<CustomTariffsStore>()(
+    persist(
+        (set, get) => ({
+            values: {}
+        }),
+        {
+            name: "customTariffs"
+        }
+    )
+);
+
+// export const setTicketCount = (ticketCount: number) => useTicketStore.setState({ ticketCount });
+//
+// export const setTicketsFetchState = (fetchState: TicketStore["fetchState"]) => useTicketStore.setState({ fetchState });
+//
+// export const setTicketApiPage = (apiPage: number) => useTicketStore.setState({ apiPage: apiPage });
+//
+// export const updateTickets = (receivedTickets: Ticket[]) => {
+//     const state = useTicketStore.getState();
+//     const ticketIdToTicketMap: { [ticketId: string]: Ticket; } = {};
+//
+//     [...state.tickets, ...receivedTickets].forEach(ticket => ticketIdToTicketMap[ticket.id] = ticket);
+//
+//     useTicketStore.setState({ tickets: Object.values(ticketIdToTicketMap) });
+// };
+//
+// export const clearTickets = () => useTicketStore.setState({ tickets: [] });