create history

2023-09-16 15:24:19 +03:00 · 2023-09-16 15:24:19 +03:00 · 188cd79897
commit 188cd79897
parent 9939912ca6
7 changed files with 134 additions and 121 deletions
--- a/package.json
+++ b/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",
--- a/src/api/history.ts
+++ b/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>({
--- a/src/components/CustomAccordion.tsx
+++ b/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: "12px",
-          borderTopRightRadius: "12px",
-        },
-        "&:last-of-type": {
-          borderBottomLeftRadius: "12px",
-          borderBottomRightRadius: "12px",
-        },
-        "&:not(:last-of-type)": {
-          borderBottom: `1px solid ${theme.palette.gray.main}`,
-        },
+        borderTopLeftRadius: first ? "12px" : "0",
+        borderTopRightRadius: first ? "12px" : "0",
+        borderBottomLeftRadius: last ? "12px" : "0",
+        borderBottomRightRadius: last ? "12px" : "0",
+        borderBottom: `1px solid ${theme.palette.gray.main}`,
+
+        ...(last && { borderBottom: "none" }),
      }}
    >
      <Box
--- a/src/pages/History/AccordionWrapper.tsx
+++ b/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,127 +10,140 @@ 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}
-          divide
-          text={accordionItem.description}
-          header={
+      <CustomAccordion
+        last={last}
+        first={first}
+        divide
+        text={"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем"}
+        header={
+          <Box
+            sx={{
+              width: "100%",
+              height: upMd ? "72px" : undefined,
+              padding: "20px 20px 20px 0",
+              display: "flex",
+              justifyContent: "space-between",
+              cursor: "pointer",
+              userSelect: "none",
+              gap: "20px",
+              alignItems: upSm ? "center" : undefined,
+              flexDirection: upSm ? undefined : "column",
+            }}
+          >
            <Box
              sx={{
-                width: "100%",
-                height: upMd ? "72px" : undefined,
-                padding: "20px 20px 20px 0",
                display: "flex",
-                justifyContent: "space-between",
-                cursor: "pointer",
-                userSelect: "none",
-                gap: "20px",
                alignItems: upSm ? "center" : undefined,
+                justifyContent: "space-between",
                flexDirection: upSm ? undefined : "column",
+                gap: upMd ? "40px" : "10px",
              }}
            >
-              <Box
+              <Typography
                sx={{
-                  display: "flex",
-                  alignItems: upSm ? "center" : undefined,
-                  justifyContent: "space-between",
-                  flexDirection: upSm ? undefined : "column",
-                  gap: upMd ? "40px" : "10px",
+                  width: "110px",
+                  fontSize: upMd ? "20px" : "18px",
+                  lineHeight: upMd ? undefined : "19px",
+                  fontWeight: 500,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
+                  px: 0,
+                  whiteSpace: "nowrap",
                }}
              >
-                <Typography
-                  sx={{
-                    width: "110px",
-                    fontSize: upMd ? "20px" : "18px",
-                    lineHeight: upMd ? undefined : "19px",
-                    fontWeight: 500,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
-                    px: 0,
-                  }}
-                >
-                  {accordionItem.date}
-                </Typography>
+                {extractDateFromString(valuesByKey.createdat)}
+              </Typography>

-                <Typography
-                  sx={{
-                    fontSize: upMd ? "18px" : "16px",
-                    lineHeight: upMd ? undefined : "19px",
-                    fontWeight: 500,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                    px: 0,
-                  }}
-                >
-                  {accordionItem.title}
-                </Typography>
-              </Box>
+              <Typography
+                sx={{
+                  fontSize: upMd ? "18px" : "16px",
+                  lineHeight: upMd ? undefined : "19px",
+                  fontWeight: 500,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                  px: 0,
+                }}
+              >
+                {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",
-                  justifyContent: "space-between",
+                  height: "100%",
                  alignItems: "center",
-                  flexFlow: "1",
-                  flexBasis: "60%",
+                  gap: upSm ? "111px" : "17px",
+                  width: "100%",
+                  maxWidth: isTablet ? null : "160px",
                }}
              >
                <Typography
                  sx={{
-                    display: upMd ? undefined : "none",
-                    fontSize: upMd ? "18px" : "16px",
-                    lineHeight: upMd ? undefined : "19px",
-                    fontWeight: 400,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                    px: 0,
+                    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",
                  }}
                >
-                  {accordionItem.payMethod && <Typography>Способ оплаты: {accordionItem.payMethod}</Typography>}
+                  {valuesByKey.price} руб.
                </Typography>
-                <Box
-                  sx={{
-                    display: "flex",
-                    height: "100%",
-                    alignItems: "center",
-                    gap: upSm ? "111px" : "17px",
-                    width: "100%",
-                    maxWidth: isTablet ? null : "160px",
-                  }}
-                >
-                  <Typography
-                    sx={{
-                      marginLeft: isTablet ? (isMobile ? null : "auto") : null,
-                      color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                      fontSize: upSm ? "20px" : "16px",
-                      fontWeight: 500,
-                      textAlign: "left",
-                    }}
-                  >
-                    {accordionItem.info}
-                  </Typography>
-                </Box>
              </Box>
            </Box>
-          }
-        />
-      ))}
+          </Box>
+        }
+      />
    </Box>
  );
 }
--- a/src/pages/History/index.tsx
+++ b/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) => (
-        <Box key={index} hidden={selectedItem !== index} sx={{ mt: upMd ? "27px" : "10px" }}>
-          <AccordionWrapper content={history} />
+      {historyData?.records.map(({ rawDetails }, index) => (
+        <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
+          <AccordionWrapper
+            first={index === 0}
+            last={index === historyData?.records.length - 1}
+            content={rawDetails[0]}
+          />
        </Box>
      ))}
    </SectionWrapper>
--- a/src/utils/calcTariffPrices.ts
+++ b/src/utils/calcTariffPrices.ts
@ -1,24 +1,24 @@
 import { Discount, Tariff, findDiscountFactor } from "@frontend/kitui";
 import { calcCart } from "./calcCart/calcCart";

-
 export function calcIndividualTariffPrices(
-    tariff: Tariff,
-    discounts: Discount[],
-    purchasesAmount: number,
-    currentTariffs: Tariff[],
+  tariff: Tariff,
+  discounts: Discount[],
+  purchasesAmount: number,
+  currentTariffs: Tariff[]
 ): {
-    priceBeforeDiscounts: number;
-    priceAfterDiscounts: number;
+  priceBeforeDiscounts: number;
+  priceAfterDiscounts: number;
 } {
-    const priceBeforeDiscounts = tariff.price || tariff.privileges.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
-    let priceAfterDiscounts = priceBeforeDiscounts;
+  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);
+  const cart = calcCart([...currentTariffs, tariff], discounts, purchasesAmount);

-    cart.allAppliedDiscounts.forEach(discount => {
-        priceAfterDiscounts *= findDiscountFactor(discount);
-    });
+  cart.allAppliedDiscounts.forEach((discount) => {
+    priceAfterDiscounts *= findDiscountFactor(discount);
+  });

-    return { priceBeforeDiscounts, priceAfterDiscounts };
+  return { priceBeforeDiscounts, priceAfterDiscounts };
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1532,10 +1532,10 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

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