contentoh-components-library 21.2.63 → 21.2.66

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

@@ -7,6 +7,7 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
+  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -17,6 +18,9 @@ export const SelecItem = ({
           id={"main-item-" + option.id}
           label={option.name}
           onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
             const subOptions = option.subOptions;
             const filtersCopy = { ...activeFilters };
             if (subOptions) {
@@ -77,6 +81,9 @@ export const SelecItem = ({
                   activeFilters[option.name][sub.name]
                 }
                 onChange={(e) => {
+                  if (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
                   if (e.target.checked) {
                     setParameterArray((current) =>
                       [...current, sub.id].sort((a, b) => a - b)

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/GalleryHeader/index.js

@@ -13,7 +13,7 @@ export const GalleryHeader = ({ setCheckAll, setSelectedImages, shotThd }) => {
       <div>
         <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
       </div>
-      <p className="image-header">Image</p>
+      <p className="image-header">Imagen</p>
       <p className="image-name">Nombre</p>
       <p className="image-size">Tamaño</p>
       <p className="image-format">Formato</p>

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/molecules/TagAndInput/styles.js

@@ -3,8 +3,7 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   .title-container {
-    position: relative;
-
+    //position: relative;
     .tooltip {
       display: none;
       position: absolute;

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

@@ -18,7 +18,7 @@ export const VersionItem = ({
   let textExportedDate = "";
   if (timestamp !== null) {
     const exportedDate = new Date(timestamp).toLocaleDateString();
-    textExportedDate = `Ùltima vez exportado: ${exportedDate}`;
+    textExportedDate = `Última vez exportado: ${exportedDate}`;
   }
 
   return (
@@ -36,19 +36,19 @@ export const VersionItem = ({
       </div>
       <div className="version-info">
         <ScreenHeader
-          text={"Version " + version}
+          text={"Versión " + version}
           headerType={"input-name-header"}
           color={GlobalColors.magenta_s2}
         />
         <p>{textExportedDate}</p>
         <p>
           {currentVersion
-            ? "Version actual"
+            ? "Versión actual"
             : articleStatus
-            ? "Edición Content-oh!"
-            : "Version de " + productOwner}
+            ? "Edición Content-Oh!"
+            : "Versión de " + productOwner}
         </p>
-        <p>{articleStatus ? "Content-oh! Digital" : productOwner}</p>
+        <p>{articleStatus ? "Content-Oh! digital" : productOwner}</p>
       </div>
     </Container>
   );

package/src/components/organisms/VersionSelector/index.js

@@ -47,7 +47,7 @@ export const VersionSelector = ({
     <Container id={modalId}>
       <div className="versions-header">
         <ScreenHeader
-          text={"Version del producto"}
+          text={"Versión del producto"}
           headerType={"input-name-header"}
           color={GlobalColors.white}
           fontFamily={FontFamily.Lato}

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 };
+    }
+  });
+};

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

@@ -235,7 +235,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           showFilterString={true}
           options={dateOptions}
           selectLabel="Todo el tiempo"
-          placeHolder="Buscar Fecha"
+          placeHolder="Buscar fecha"
           customSelectId="dates-select"
           parameterArray={datesRange}
           setParameterArray={setDatesRange}
@@ -245,7 +245,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           showSearchBar={true}
           options={providers}
           selectLabel="Todos los proveedores"
-          placeHolder="Buscar Proveedor"
+          placeHolder="Buscar proveedor"
           customSelectId="providers-select"
           parameterArray={companyId}
           setParameterArray={setCompanyId}
@@ -256,7 +256,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           showSearchBar={true}
           options={categories}
           selectLabel="Todas las categorías"
-          placeHolder="Buscar Departamento"
+          placeHolder="Buscar categoría"
           customSelectId="category-select"
           parameterArray={categoryId}
           setParameterArray={setCategoryId}
@@ -266,12 +266,12 @@ export const Dashboard = ({ jwt, user, company }) => {
           showFilterString={true}
           showSearchBar={true}
           options={retailers}
-          selectLabel="Todos los alcances"
-          placeHolder="Buscar Cadena"
+          selectLabel="Todas las cadenas"
+          placeHolder="Buscar cadena"
           customSelectId="retailers-select"
           parameterArray={retailerId}
           setParameterArray={setRetailerId}
-          defaultOption={"Todos los alcances"}
+          defaultOption={"Todas las cadenas"}
         />
         {user.is_retailer === 1 && (
           <CustomSelect