contentoh-components-library 21.2.65 → 21.2.66

package/src/components/molecules/CustomSelect/index.js

@@ -4,7 +4,7 @@ import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
 import { useCloseModal } from "../../../global-files/customHooks";
 import { SelecItem } from "./SelectItem";
 import { Calendar } from "../../organisms/Calendar";
-import { formatDate } from "../../pages/Dashboard/dashboardUtils";
+import { CustomSelectItem } from "../../atoms/CustomSelectItem";
 
 export const CustomSelect = ({
   options,
@@ -13,6 +13,7 @@ export const CustomSelect = ({
   selectLabel = "",
   customSelectId = "defaultSelectId",
   defaultOption,
+  parameterArray,
   setParameterArray,
   onClickItem,
   icon,
@@ -84,7 +85,7 @@ export const CustomSelect = ({
     setFilters(filteredArray);
   }, [text]);
 
-  useEffect(() => {
+  useEffect(async () => {
     let newFiltersString = selectLabel;
     let counter = 0;
     const filtersArray = Object.keys(activeFilters);
@@ -164,14 +165,18 @@ export const CustomSelect = ({
                     <p>{option.name}</p>
                   </div>
                 ) : (
-                  <SelecItem
+                  <CustomSelectItem
+                    className={"main-option"}
                     key={customSelectId + option.id}
                     option={option}
                     customSelectId={customSelectId}
                     setParameterArray={setParameterArray}
                     activeFilters={activeFilters}
+                    globalFilters={activeFilters}
+                    parameterArray={parameterArray}
                     setActiveFilters={setActiveFilters}
                     onClickItem={onClickItem}
+                    route={option.name}
                   />
                 )
               )}

package/src/components/molecules/CustomSelect/styles.js

@@ -11,8 +11,6 @@ export const Container = styled.div`
     font-size: 13px;
     display: flex;
     padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
-    //padding: 10px 15px;
-    //padding: 5px 5px;
     justify-content: space-between;
     border-radius: 50px;
     background-color: ${({ filterActive }) =>

package/src/components/molecules/HeaderTop/index.js

@@ -2,6 +2,7 @@ import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
+import { ChatPopUp } from "../../atoms/ChatPopUp/index";
 
 export const HeaderTop = ({ setHeaderTop }) => {
   const headerTop = useRef();
@@ -13,12 +14,15 @@ export const HeaderTop = ({ setHeaderTop }) => {
   return (
     <Container ref={headerTop}>
       <ScreenHeader text="Edición de producto" />
-      <Button
-        buttonType="close-button"
-        onClick={() => {
-          window.location.href = `/products`;
-        }}
-      />
+      <div className="buttons-top">
+        {/* <ChatPopUp /> */}
+        <Button
+          buttonType="close-button"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+        />
+      </div>
     </Container>
   );
 };

package/src/components/molecules/HeaderTop/styles.js

@@ -3,4 +3,8 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
+  .buttons-top {
+    display: flex;
+    align-items: center;
+  }
 `;

package/src/components/pages/Dashboard/dashboardUtils.js

@@ -39,28 +39,8 @@ export const getCategories = async (user, company) => {
   const response = await axios.get(
     `${process.env.REACT_APP_CATEGORY_ENDPOINT}${query}`
   );
-  const categories = JSON.parse(response.data.body)?.data;
-  const categoriesKeys = Object.keys(categories || {});
-  const subCategories = categoriesKeys?.map(
-    (key) => categories[key].sub_category
-  );
-  const finalArray = [];
-  let index = 0;
-  subCategories?.forEach((element) => {
-    element &&
-      Object.keys(element || {}).forEach((key) => {
-        const subCategory = element[key]?.sub_category || {};
-        const subOptions = [];
-        Object.keys(subCategory)?.forEach((subKey) => {
-          subOptions.push({
-            id: subCategory[subKey].id_category,
-            name: subKey,
-          });
-        });
-        finalArray.push({ id: index++, name: key, subOptions });
-      });
-  });
-  finalArray.sort((a, b) => a.name.localeCompare(b.name));
+  const categories = JSON.parse(response.data.body)?.data || {};
+  const finalArray = getCategoriesRecursive(categories);
   return finalArray;
 };
 
@@ -71,3 +51,19 @@ export const formatDate = (date) => {
   const day = newDate.getDate();
   return `${year}/${month}/${day}`;
 };
+
+const getCategoriesRecursive = (object) => {
+  const keys = Object.keys(object);
+  return keys.map((key, index) => {
+    const { sub_category } = object[key];
+    if (sub_category) {
+      return {
+        id: index,
+        name: key,
+        subOptions: getCategoriesRecursive(sub_category),
+      };
+    } else {
+      return { id: object[key].id_category, name: key };
+    }
+  });
+};