create history

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@frontend/kitui": "1.0.47",
+    "@frontend/kitui": "1.0.52",
     "@mui/icons-material": "^5.10.14",
     "@mui/material": "^5.10.14",
     "@popperjs/core": "^2.11.8",

src/api/history.ts

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

src/components/CustomAccordion.tsx

@@ -8,9 +8,11 @@ interface Props {
   text: string;
   divide?: boolean;
   price?: number;
+  last?: boolean;
+  first?: boolean;
 }
 
-export default function CustomAccordion({ header, text, divide = false, price }: Props) {
+export default function CustomAccordion({ header, text, divide = false, price, last, first }: Props) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const upXs = useMediaQuery(theme.breakpoints.up("xs"));
@@ -20,17 +22,13 @@ export default function CustomAccordion({ header, text, divide = false, price }:
     <Box
       sx={{
         backgroundColor: "white",
-        "&:first-of-type": {
+        borderTopLeftRadius: first ? "12px" : "0",
-          borderTopLeftRadius: "12px",
+        borderTopRightRadius: first ? "12px" : "0",
-          borderTopRightRadius: "12px",
+        borderBottomLeftRadius: last ? "12px" : "0",
-        },
+        borderBottomRightRadius: last ? "12px" : "0",
-        "&:last-of-type": {
-          borderBottomLeftRadius: "12px",
-          borderBottomRightRadius: "12px",
-        },
-        "&:not(:last-of-type)": {
         borderBottom: `1px solid ${theme.palette.gray.main}`,
-        },
+
+        ...(last && { borderBottom: "none" }),
       }}
     >
       <Box

src/pages/History/AccordionWrapper.tsx

@@ -1,6 +1,5 @@
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import CustomAccordion from "@components/CustomAccordion";
-import { cardShadow } from "@root/utils/theme";
 
 export type History = {
   title: string;
@@ -11,30 +10,43 @@ export type History = {
   expired?: boolean;
 };
 
+type KeyValue = { Key: string; Value: string | number };
 interface AccordionWrapperProps {
-  content: History[];
+  content: KeyValue[];
+  last?: boolean;
+  first?: boolean;
 }
 
-export default function AccordionWrapper({ content }: AccordionWrapperProps) {
+export default function AccordionWrapper({ content, last, first }: AccordionWrapperProps) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const upSm = useMediaQuery(theme.breakpoints.up("sm"));
   const isTablet = useMediaQuery(theme.breakpoints.down(900));
   const isMobile = useMediaQuery(theme.breakpoints.down(560));
 
+  const valuesByKey: any = {};
+
+  content.forEach((item) => {
+    valuesByKey[item.Key] = item.Value;
+  });
+
+  const extractDateFromString = (tariffName: string) => {
+    const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
+    return dateMatch ? dateMatch[0] : null;
+  };
+
   return (
     <Box
       sx={{
         overflow: "hidden",
         borderRadius: "12px",
-        boxShadow: cardShadow,
       }}
     >
-      {content.map((accordionItem, index) => (
       <CustomAccordion
-          key={index}
+        last={last}
+        first={first}
         divide
-          text={accordionItem.description}
+        text={"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем"}
         header={
           <Box
             sx={{
@@ -65,11 +77,12 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                   fontSize: upMd ? "20px" : "18px",
                   lineHeight: upMd ? undefined : "19px",
                   fontWeight: 500,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
                   px: 0,
+                  whiteSpace: "nowrap",
                 }}
               >
-                  {accordionItem.date}
+                {extractDateFromString(valuesByKey.createdat)}
               </Typography>
 
               <Typography
@@ -77,11 +90,11 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                   fontSize: upMd ? "18px" : "16px",
                   lineHeight: upMd ? undefined : "19px",
                   fontWeight: 500,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
                   px: 0,
                 }}
               >
-                  {accordionItem.title}
+                {valuesByKey.name}
               </Typography>
             </Box>
             <Box
@@ -99,11 +112,11 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                   fontSize: upMd ? "18px" : "16px",
                   lineHeight: upMd ? undefined : "19px",
                   fontWeight: 400,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
                   px: 0,
                 }}
               >
-                  {accordionItem.payMethod && <Typography>Способ оплаты: {accordionItem.payMethod}</Typography>}
+                {valuesByKey.payMethod && <Typography>Способ оплаты: {valuesByKey.payMethod}</Typography>}
               </Typography>
               <Box
                 sx={{
@@ -118,20 +131,19 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                 <Typography
                   sx={{
                     marginLeft: isTablet ? (isMobile ? null : "auto") : null,
-                      color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                    color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
                     fontSize: upSm ? "20px" : "16px",
                     fontWeight: 500,
                     textAlign: "left",
                   }}
                 >
-                    {accordionItem.info}
+                  {valuesByKey.price} руб.
                 </Typography>
               </Box>
             </Box>
           </Box>
         }
       />
-      ))}
     </Box>
   );
 }

src/pages/History/index.tsx

@@ -9,9 +9,6 @@ import { Tabs } from "@root/components/Tabs";
 import AccordionWrapper from "./AccordionWrapper";
 import { HISTORY } from "./historyMocks";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
-import { makeRequest, useToken } from "@frontend/kitui";
-import axios from "axios";
-import { getHistory } from "@root/api/history";
 import { useHistoryData } from "@root/utils/hooks/useHistoryData";
 
 const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];
@@ -28,7 +25,7 @@ export default function History() {
   const handleCustomBackNavigation = useHistoryTracker();
 
   if (!error && historyData) {
-    console.log(historyData?.records[0].rawDetails.map((rawDetails) => console.log(rawDetails.Key)));
+    console.log(historyData?.records[0].rawDetails[0].map(({ Key, Value }) => (Key == "id" ? console.log(Value) : "")));
   }
 
   return (
@@ -68,9 +65,13 @@ export default function History() {
       ) : (
         <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
       )}
-      {HISTORY.map((history, index) => (
+      {historyData?.records.map(({ rawDetails }, index) => (
-        <Box key={index} hidden={selectedItem !== index} sx={{ mt: upMd ? "27px" : "10px" }}>
+        <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
-          <AccordionWrapper content={history} />
+          <AccordionWrapper
+            first={index === 0}
+            last={index === historyData?.records.length - 1}
+            content={rawDetails[0]}
+          />
         </Box>
       ))}
     </SectionWrapper>

src/utils/calcTariffPrices.ts

@@ -1,22 +1,22 @@
 import { Discount, Tariff, findDiscountFactor } from "@frontend/kitui";
 import { calcCart } from "./calcCart/calcCart";
 
-
 export function calcIndividualTariffPrices(
   tariff: Tariff,
   discounts: Discount[],
   purchasesAmount: number,
-    currentTariffs: Tariff[],
+  currentTariffs: Tariff[]
 ): {
   priceBeforeDiscounts: number;
   priceAfterDiscounts: number;
 } {
-    const priceBeforeDiscounts = tariff.price || tariff.privileges.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
+  const priceBeforeDiscounts =
+    tariff.price || tariff.privileges.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
   let priceAfterDiscounts = priceBeforeDiscounts;
 
   const cart = calcCart([...currentTariffs, tariff], discounts, purchasesAmount);
 
-    cart.allAppliedDiscounts.forEach(discount => {
+  cart.allAppliedDiscounts.forEach((discount) => {
     priceAfterDiscounts *= findDiscountFactor(discount);
   });
 

yarn.lock

@@ -1532,10 +1532,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@frontend/kitui@1.0.47":
+"@frontend/kitui@1.0.52":
-  version "1.0.47"
+  version "1.0.52"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.47.tgz#d71c945f36c7436cd59191922335a3b6a1c545fa"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.52.tgz#3b1c28f889da80ab325ab2b511108632fa925f1c"
-  integrity sha1-1xyUXzbHQ2zVkZGSIzWjtqHFRfo=
+  integrity sha1-Oxwo+InagKsyWrK1ERCGMvqSXxw=
   dependencies:
     immer "^10.0.2"
     reconnecting-eventsource "^1.6.2"