frontPanel/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx

import { Tariff, calcTariffPrice } from "@frontend/kitui";
import TariffCard from "./TariffCard";
import NumberIcon from "@icons/NumberIcon";
import { currencyFormatter } from "./currencyFormatter";
import FreeTariffCard from "./FreeTariffCard";
import { Typography } from "@mui/material";

export const createTariffElements = (
  filteredTariffs: Tariff[],
  addFreeTariff = false,
  user: any,
  discounts: any,
  onclick: any,
  cartTariffs: Tariff[],
) => {
  const tariffElements = filteredTariffs
    .filter((tariff) => tariff.privileges.length > 0)
    .map((tariff, index) => {
      const { priceBeforeDiscounts, priceAfterDiscounts } = calcTariffPrice(
        tariff,
        discounts,
        user.wallet.spent,
        cartTariffs,
        user.isUserNko,
        user.id,
      );

      return (
        <TariffCard
          key={tariff._id}
          discount={
            priceBeforeDiscounts - priceAfterDiscounts
              ? `${(
                  (priceBeforeDiscounts - priceAfterDiscounts) /
                  (priceBeforeDiscounts / 100)
                ).toFixed(0)}%`
              : ""
          }
          icon={
            <NumberIcon
              number={index + 1}
              color={"#7e2aea"}
              backgroundColor={"#EEE4FC"}
            />
          }
          buttonProps={{
            text: "Выбрать",
            onClick: () =>
              onclick({
                id: tariff._id,
                price: priceAfterDiscounts / 100,
              }),
          }}
          headerText={tariff.name}
          text={tariff.privileges.map((p) => `${p.name} - ${p.amount}`)}
          price={
            <>
              {priceBeforeDiscounts !== priceAfterDiscounts && (
                <Typography
                  sx={{
                    textDecorationLine: "line-through",
                    color: "#FB5607",
                    fontSize: "15px",
                    lineHeight: "21px",
                  }}
                >
                  {currencyFormatter.format(priceBeforeDiscounts / 100)}
                </Typography>
              )}
              <Typography
                sx={{
                  fontWeight: 500,
                  fontSize: "20px",
                  lineHeight: "24px",
                  color: "#4D4D4D",
                }}
              >
                {currencyFormatter.format(priceAfterDiscounts / 100)}
              </Typography>
            </>
          }
        />
      );
    });

  if (addFreeTariff) {
    if (tariffElements.length < 6)
      tariffElements.push(<FreeTariffCard key="free_tariff_card" />);
    else tariffElements.splice(5, 0, <FreeTariffCard key="free_tariff_card" />);
  }

  return tariffElements;
};