Merge branch 'dev' into 'main'

Dev

See merge request frontend/marketplace!63

src/api/cart.ts

@@ -1,4 +1,5 @@
 import { UserAccount, makeRequest } from "@frontend/kitui";
+import  { AxiosError } from 'axios';
 
 import { parseAxiosError } from "@root/utils/parse-error";
 
@@ -19,7 +20,8 @@ export async function patchCart(
 
     return [patchCartResponse.cart];
   } catch (nativeError) {
-    const [error] = parseAxiosError(nativeError);
+    let [error, status] = parseAxiosError(nativeError);
+    if (status === 400 && error.indexOf("invalid id") !== -1) error = "Данный тариф более недоступен"
 
     return [[], `Не удалось добавить товар в корзину. ${error}`];
   }

src/api/history.ts

@@ -12,11 +12,12 @@ type HistoryRecord = {
   id: string;
   isDeleted: boolean;
   key: string;
-  rawDetails: KeyValue[][];
+  rawDetails: [RawDetails, KeyValue];
   updatedAt: string;
   userId: string;
 };
 
+type RawDetails = { Key: string; Value: KeyValue[][] }
 type KeyValue = { Key: string; Value: string | number };
 
 export async function getHistory(): Promise<[GetHistoryResponse | null, string?]> {

src/components/NumberInputWithUnitAdornment.tsx

@@ -32,7 +32,6 @@ export default function NumberInputWithUnitAdornment({ id, value, adornmentText,
 
         const newNumber = parseInt(target.value);
 
-        console.log(newNumber);
 
         if (!isFinite(newNumber) || newNumber < 0) {
           onChange(0);

src/components/icons/File.tsx

@@ -0,0 +1,30 @@
+import { Box } from "@mui/material";
+
+interface Props {
+  color?: string;
+  bgcolor?: string;
+  width?: string;
+  height?: string;
+}
+
+export default function CustomIcon() {
+  return (
+    <Box
+      sx={{
+        stroke: "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "6px"
+      }}
+      
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" stroke="inherit" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="3.2002" y="0.75" width="17.8" height="22.25" rx="4"  stroke-width="1.5"/>
+        <path d="M7.65039 6.3125H16.5504"  stroke-width="1.5" stroke-linecap="round"/>
+        <path d="M7.65039 11.875H16.5504"  stroke-width="1.5" stroke-linecap="round"/>
+        <path d="M7.65039 17.4375H12.1004"  stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </Box>
+  );
+}

src/components/templCardPhoneLight.tsx

@@ -5,7 +5,6 @@ export default function TemplCardPhoneLight() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
-  console.log("я узкий");
   return (
     <Box
       sx={{

src/pages/Cart/Cart.tsx

@@ -20,7 +20,6 @@ export default function Cart() {
 
   const handleCustomBackNavigation = usePrevLocation(location);
 
-  console.log(cart.services);
 
   return (
     <SectionWrapper

src/pages/Cart/CustomWrapper.tsx

@@ -135,7 +135,6 @@ export default function CustomWrapper({ serviceData, last, first }: Props) {
           serviceData.tariffs.map((tariff) => {
             const privilege = tariff.privileges[0];
 
-            console.log(tariff);
 
             return tariff.privileges.length > 1 ? (
               <CustomTariffAccordion key={tariff.id} tariffCartData={tariff} />

src/pages/History/AccordionWrapper.tsx

@@ -1,5 +1,10 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
 import CustomAccordion from "@components/CustomAccordion";
+import File from "@components/icons/File"
+import { getDeclension } from "@utils/declension"
+import { enqueueSnackbar } from "notistack";
+import { addTariffToCart } from "@root/stores/user";
+import { getMessageFromFetchError } from "@frontend/kitui";
 
 export type History = {
   title: string;
@@ -10,9 +15,10 @@ export type History = {
   expired?: boolean;
 };
 
+type RawDetails = { Key: string; Value: KeyValue[][] }
 type KeyValue = { Key: string; Value: string | number };
 interface AccordionWrapperProps {
-  content: KeyValue[];
+  content: [RawDetails, KeyValue];
   last?: boolean;
   first?: boolean;
   createdAt: string
@@ -26,8 +32,7 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
   const isMobile = useMediaQuery(theme.breakpoints.down(560));
 
   const valuesByKey: any = {};
-console.log(content)
+  content[0].Value[0].forEach((item) => {
-  content.forEach((item) => {
     valuesByKey[item.Key] = item.Value;
   });
   
@@ -36,6 +41,16 @@ console.log(content)
     return dateMatch ? dateMatch[0] : null;
   };
 
+
+  async function handleTariffItemClick(tariffId: string) {
+    const { patchCartError } = await addTariffToCart(tariffId)
+    if (patchCartError) {
+      enqueueSnackbar(patchCartError);
+    } else {
+      enqueueSnackbar("Тариф добавлен в корзину");
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -46,8 +61,15 @@ console.log(content)
         last={last}
         first={first}
         divide
-        text={"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем"}
+        text={valuesByKey.privileges.map((e:KeyValue[]) => (
+          <Typography
+           key={valuesByKey.id}
+          >
+            {e[1].Value} - {e[5].Value} {getDeclension(Number(e[5].Value), e[7].Value.toString())} 
+          </Typography>)
+        )}
         header={
+          <>
           <Box
             sx={{
               width: "100%",
@@ -68,7 +90,7 @@ console.log(content)
                 alignItems: upSm ? "center" : undefined,
                 justifyContent: "space-between",
                 flexDirection: upSm ? undefined : "column",
-                gap: upMd ? "40px" : "10px",
+                gap: upMd ? "51px" : "10px",
               }}
             >
               <Typography
@@ -86,62 +108,128 @@ console.log(content)
               </Typography>
 
               <Typography
+              title={valuesByKey.iscustom ? "Кастомный тариф" : valuesByKey.name}
                 sx={{
                   fontSize: upMd ? "18px" : "16px",
                   lineHeight: upMd ? undefined : "19px",
                   fontWeight: 500,
                   color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
                   px: 0,
+                  width: '200px',
+                  maxWidth: '200px',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis'
                 }}
               >
-                {valuesByKey.name}
+                {valuesByKey.iscustom ? "Кастомный тариф" : valuesByKey.name}
               </Typography>
             </Box>
             <Box
-              sx={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                flexFlow: "1",
-                flexBasis: "60%",
-              }}
-            >
-              <Typography
-                sx={{
-                  display: upMd ? undefined : "none",
-                  fontSize: upMd ? "18px" : "16px",
-                  lineHeight: upMd ? undefined : "19px",
-                  fontWeight: 400,
-                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                  px: 0,
-                }}
-              >
-                {valuesByKey.payMethod && <Typography>Способ оплаты: {valuesByKey.payMethod}</Typography>}
-              </Typography>
-              <Box
                 sx={{
                   display: "flex",
-                  height: "100%",
+                  justifyContent: "space-between",
                   alignItems: "center",
-                  gap: upSm ? "111px" : "17px",
+                  flexFlow: "1",
-                  width: "100%",
+                  flexBasis: "60%",
-                  maxWidth: isTablet ? null : "160px",
                 }}
               >
+              <Box display="flex" width="100%" justifyContent="space-between">
                 <Typography
                   sx={{
-                    marginLeft: isTablet ? (isMobile ? null : "auto") : null,
+                    display: upMd ? undefined : "none",
+                    fontSize: upMd ? "18px" : "16px",
+                    lineHeight: upMd ? undefined : "19px",
+                    fontWeight: 400,
                     color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                    fontSize: upSm ? "20px" : "16px",
+                    px: 0,
-                    fontWeight: 500,
+                  }}
-                    textAlign: "left",
+                  title={`>Способ оплаты: ${valuesByKey.payMethod}</Typography>}`}
+                >
+                  {valuesByKey.payMethod && <Typography 
+                  sx={{
+                    maxWidth: '300px',
+                    width: '300px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                  }}
+                  >Способ оплаты: {valuesByKey.payMethod}</Typography>}
+                </Typography>
+                <Box
+                  sx={{
+                    display: "flex",
+                    height: "100%",
+                    alignItems: "center",
+                    gap: upSm ? "111px" : "17px",
+                    width: "100%",
+                    maxWidth: isTablet ? null : "160px",
                   }}
                 >
-                  {valuesByKey.price} руб.
+                  <Typography
-                </Typography>
+                    sx={{
+                      marginLeft: isTablet ? (isMobile ? null : "auto") : null,
+                      color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                      fontSize: upSm ? "20px" : "16px",
+                      fontWeight: 500,
+                      textAlign: "left",
+                    }}
+                  >
+                    {Number(content[1].Value) / 100 ? Number(content[1].Value) / 100 : "nodata"} руб.
+                  </Typography>
+                </Box>
               </Box>
+          {!isMobile &&
+              <IconButton
+              title="Добавить в корзину тариф"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleTariffItemClick(valuesByKey.id)
+              }}
+                sx={{
+                  ml: "20px",
+                  bgcolor:"#EEE4FC",
+                  stroke: "#7E2AEA",
+                  borderRadius: 2,
+                  "&:hover": {
+                    bgcolor:"#7E2AEA",
+                    stroke: "white",
+                  },
+                  "&:active": {
+                    bgcolor:"black",
+                    stroke: "white",
+                  }
+                }}
+              >
+                <File></File>
+              </IconButton>
+          }
             </Box>
           </Box>
+          {isMobile &&
+              <IconButton
+              title="Добавить в корзину тариф"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleTariffItemClick(valuesByKey.id)
+              }}
+                sx={{
+                  mr: "10px",
+                  bgcolor:"#EEE4FC",
+                  stroke: "#7E2AEA",
+                  borderRadius: 2,
+                  "&:hover": {
+                    bgcolor:"#7E2AEA",
+                    stroke: "white",
+                  },
+                  "&:active": {
+                    bgcolor:"black",
+                    stroke: "white",
+                  }
+                }}
+              >
+                <File></File>
+              </IconButton>
+          }
+              </>
         }
       />
     </Box>

src/pages/History/index.tsx

@@ -10,6 +10,7 @@ import AccordionWrapper from "./AccordionWrapper";
 import { HISTORY } from "./historyMocks";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 import { useHistoryData } from "@root/utils/hooks/useHistoryData";
+import { isArray } from "cypress/types/lodash";
 
 const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];
 
@@ -24,10 +25,6 @@ export default function History() {
 
   const handleCustomBackNavigation = useHistoryTracker();
 
-  if (!error && historyData) {
-    console.log(historyData?.records[0].rawDetails[0].map(({ Key, Value }) => (Key == "id" ? console.log(Value) : "")));
-  }
-
   return (
     <SectionWrapper
       maxWidth="lg"
@@ -65,16 +62,19 @@ export default function History() {
       ) : (
         <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
       )}
-      {historyData?.records.map(( e, index) => (
+      {historyData?.records
+      .filter((e) => (e.key === "payCart" && Array.isArray(e.rawDetails[0].Value)))
+      .map(( e, index) => {
+        return (
         <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
           <AccordionWrapper
             first={index === 0}
             last={index === historyData?.records.length - 1}
-            content={e.rawDetails[0]}
+            content={e.rawDetails}
             createdAt={e.createdAt}
           />
         </Box>
-      ))}
+      )})}
     </SectionWrapper>
   );
 }

src/pages/Landing/Section3.tsx

@@ -17,8 +17,6 @@ export default function Section3() {
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
-  console.log(downXs);
-
   return (
     <SectionWrapper
       component="section"

src/pages/Tariffs/Tariffs.tsx

@@ -15,8 +15,6 @@ export default function Tariffs() {
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const navigate = useNavigate();
 
-  console.log(upMd);
-
   return (
     <SectionWrapper
       maxWidth="lg"

src/pages/Tariffs/TariffsPage.tsx

@@ -44,8 +44,6 @@ export default function TariffPage() {
   const unit: string = String(location.pathname).slice(9);
   const currentTariffs = Object.values(cartTariffMap).filter((tariff): tariff is Tariff => typeof tariff === "object");
 
-  console.log(currentTariffs);
-
   function handleTariffItemClick(tariffId: string) {
     addTariffToCart(tariffId)
       .then(() => {
@@ -73,8 +71,6 @@ export default function TariffPage() {
     );
   });
 
-  console.log(isCustomTariffs);
-
   const createTariffElements = (filteredTariffs: Tariff[]) => {
     const tariffElements = filteredTariffs
       .filter((tariff) => tariff.privileges.length > 0)

src/pages/Tariffs/slider/slider.tsx

@@ -33,8 +33,6 @@ export const Slider = ({ items }: SliderProps) => {
   const gridTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobileHeader = useMediaQuery(theme.breakpoints.down(900));
 
-  console.log(items.length);
-
   useEffect(() => {
     if (isTablet) {
       setRange(1);

src/stores/user.ts

@@ -277,11 +277,11 @@ export const sendUserData = async () => {
 
 export const addTariffToCart = async (tariffId: string) => {
   const [patchCartResponse, patchCartError] = await patchCart(tariffId);
-  console.log(patchCartResponse)
 
-  if (!patchCartError) {
+  if (patchCartError !== undefined) {
     setCart(patchCartResponse);
   }
+  return({patchCartResponse, patchCartError})
 };
 
 export const removeTariffFromCart = async (tariffId: string) => {

src/utils/declension.ts

@@ -9,7 +9,7 @@ function declension(number: number, declensions: string[], cases = [2, 0, 1, 1,
     ];
 }
 
-export function getDeclension(number: number, word: PrivilegeValueType | "месяц" | "год"): string {
+export function getDeclension(number: number, word: PrivilegeValueType | "месяц" | "год" | string): string {
     switch (word) {
         case "шаблон":
             return declension(number, ["шаблон", "шаблона", "шаблонов"]);
@@ -21,5 +21,7 @@ export function getDeclension(number: number, word: PrivilegeValueType | "мес
             return declension(number, ["год", "года", "лет"]);
         case "МБ":
             return "МБ";
+        default:
+            return "ед."
     }
 };

src/utils/hooks/handleCustomBackNavigation.ts

@@ -20,12 +20,10 @@ export const usePrevLocation = (location: RouteLocation | null) => {
   const handleCustomBackNavigation = () => {
     if (prevLocRef.current?.state?.previousUrl) {
       const prevUrl = prevLocRef.current.state.previousUrl;
-      console.log(prevUrl);
       if (prevUrl.includes("/support/")) {
         return navigate(-2);
       }
     }
-    console.log("yjy");
     return navigate(-1);
   };
 

src/utils/hooks/useCart.ts

@@ -26,7 +26,6 @@ export function useCart() {
         function addTariffsToCart() {
             const knownTariffs: Tariff[] = [];
 
-            console.log(cartTariffIds)
             cartTariffIds?.forEach(async (tariffId) => {
                 if (typeof cartTariffMap[tariffId] === "object") return;
 

src/utils/parse-error.ts

@@ -6,6 +6,17 @@ export type ServerError = {
   message: string;
 };
 
+const translateMessage: Record<string, string> = {
+  "user not found": "Пользователь не найден",
+  "invalid password": "Неправильный пароль",
+  "field <password> is empty": "Поле \"Пароль\" не заполнено",
+  "field <login> is empty": "Поле \"Логин\" не заполнено",
+  "field <email> is empty": "Поле \"E-mail\" не заполнено",
+  "field <phoneNumber> is empty": "Поле \"Номер телефона\" не заполнено",
+  "user with this email or login is exist": "Пользователь уже существует",
+  "user with this login is exist": "Пользователь с таким логином уже существует"
+};
+
 export const parseAxiosError = (nativeError: unknown): [string, number?] => {
   const error = nativeError as AxiosError;
 
@@ -14,7 +25,8 @@ export const parseAxiosError = (nativeError: unknown): [string, number?] => {
     "statusCode" in (error.response.data as ServerError)
   ) {
     const serverError = error.response.data as ServerError;
-
+    const translatedMessage = translateMessage[serverError.message]
+    if (translatedMessage !== undefined) serverError.message = translatedMessage
     return [serverError.message, serverError.statusCode];
   }