contentoh-components-library 21.2.102 → 21.2.104

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

@@ -1,5 +1,4 @@
 import { CustomSelect } from "./index";
-import iconStar from "../../../assets/images/customSelect/starIcon.svg";
 
 export default {
   title: "Components/molecules/CustomSelect",
@@ -9,27 +8,20 @@ export default {
 const Template = (args) => <CustomSelect {...args} />;
 export const CustomSelectDefault = Template.bind({});
 CustomSelectDefault.args = {
-  // selectLabel: "Todos los departamentos",
+  selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
   options: [
-    {
-      id: 47,
-      name: "Enero 2023",
-      isSelected: true,
-    },
-    {
-      id: 49,
-      name: "Mis Favoritos",
+      {
+      id: 1,
+      value: "Decoración",
+      subOptions: [
+        { id: 1, value: "Espejos" },
+        { id: 2, value: "Persianas" },
+  ],
     },
+    { id: 2, value: "Eléctrico" },
+    { id: 3, value: "Ferretería" },
+    { id: 4, value: "Herramientas" },
+    { id: 5, value: "Iluminación" },
   ],
-  onClickItem: (v, id) => {
-    if (v) {
-      console.log("Agregar a la lista", id);
-    } else {
-      console.log("Eliminar a la lista", id);
-    }
-  },
-  icon: iconStar,
-  showSearchBar: true,
-  customOptions: <p>Esto es un customOptions</p>
 };

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

@@ -7,7 +7,6 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
-  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -18,9 +17,6 @@ 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) {
@@ -81,9 +77,6 @@ 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/HeaderTop/index.js

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

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

@@ -3,8 +3,4 @@ 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/organisms/CreateVersion/RenderChilds.js

@@ -21,27 +21,25 @@ export const Children = (
           <img src={createVersionImg} alt="create version icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"product-name-header"}
+            headerType="product-name-header"
             color={GlobalColors.white}
-            text={"Crea una nueva versión"}
+            text="Crea una nueva versión"
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={
-              "Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
-            }
+            text="Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
           />
           <div className="buttons-container">
             <Button
-              label={"Versión desde cero"}
-              buttonType={"general-transparent-button"}
+              label="Versión desde cero"
+              buttonType="general-transparent-button"
               onClick={() => setStep("empty-version")}
             />
             <Button
-              label={"Versión personalizada"}
-              buttonType={"general-default-button"}
+              label="Versión personalizada"
+              buttonType="general-default-button"
               onClick={() => setStep("create-version")}
             />
           </div>
@@ -53,27 +51,25 @@ export const Children = (
           <img src={genericModalWarning} alt="warning icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"product-name-header"}
+            headerType="product-name-header"
             color={GlobalColors.white}
-            text={
-              "Si creas una versión desde cero perderas la información actual"
-            }
+            text="Si creas una versión desde cero perderas la información actual"
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={"¿Deseas Continuar?"}
+            text="¿Deseas Continuar?"
           />
           <div className="buttons-container">
             <Button
-              label={"Atrás"}
-              buttonType={"general-transparent-button"}
+              label="Atrás"
+              buttonType="general-transparent-button"
               onClick={() => setStep("version-options")}
             />
             <Button
-              label={"Continuar"}
-              buttonType={"general-default-button"}
+              label="Continuar"
+              buttonType="general-default-button"
               onClick={() => createVersion(true)}
             />
           </div>
@@ -84,18 +80,16 @@ export const Children = (
         <CreateVersion>
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={
-              "Elige el contenido que deseas utilizar de versiones anteriores"
-            }
+            text="Elige el contenido que deseas utilizar de versiones anteriores"
           />
           <div className="version-selector">
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Ficha técnica"}
-                id={"datasheet"}
+                label="Ficha técnica"
+                id="datasheet"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -103,8 +97,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Descripción"}
-                id={"description"}
+                label="Descripción"
+                id="description"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -112,8 +106,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Imágenes"}
-                id={"image"}
+                label="Imágenes"
+                id="image"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -121,13 +115,13 @@ export const Children = (
           </div>
           <div className="buttons-container">
             <Button
-              label={"Atrás"}
-              buttonType={"general-transparent-button"}
+              label="Atrás"
+              buttonType="general-transparent-button"
               onClick={() => setStep("version-options")}
             />
             <Button
-              label={"Continuar"}
-              buttonType={"general-default-button"}
+              label="Continuar"
+              buttonType="general-default-button"
               onClick={() => createVersion()}
             />
           </div>

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

@@ -5,48 +5,32 @@ import { useEffect, useState } from "react";
 import { Children } from "./RenderChilds";
 import axios from "axios";
 
-export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
+export const CreateVersion = ({
+  articleId,
+  version,
+  setShowCreateVersion,
+  versionsList,
+  realoadVersion,
+  jwt,
+}) => {
   const [step, setStep] = useState("version-options");
-  const [versions, setVersions] = useState([]);
   const [selectedVersions, setSelectedVersions] = useState({
     datasheet: version,
     description: version,
     image: version,
   });
 
-  const getVersions = async () => {
-    try {
-      const response = await axios({
-        method: "get",
-        url: `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${idArticle}&provider=true`,
-        headers: {
-          Authorization: sessionStorage.getItem("jwt"),
-        },
-      });
-      setVersions(JSON.parse(response.data.body).data);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   const createVersion = async (isEmpty) => {
     try {
-      let data = {
-        articleId: idArticle,
-        isEmpty,
-      };
+      let data = { articleId, isEmpty };
 
-      isEmpty && (data["version"] = selectedVersions);
+      if (!isEmpty) data["version"] = selectedVersions;
 
-      await axios({
-        method: "post",
-        url: process.env.REACT_APP_VERSIONS_ENDPOINT,
-        data: data,
-        headers: {
-          Authorization: sessionStorage.getItem("jwt"),
-        },
+      await axios.post(process.env.REACT_APP_VERSIONS_ENDPOINT, data, {
+        headers: { Authorization: jwt },
       });
       setShowCreateVersion(false);
+      realoadVersion && realoadVersion();
     } catch (error) {
       console.log(error);
     }
@@ -55,17 +39,13 @@ export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
   const onChange = (e) => {
     setSelectedVersions({
       ...selectedVersions,
-      [e.target.name]: parseInt(e.target.value.slice(-1)),
+      [e.target.name]: parseInt(e.target.value),
     });
   };
 
-  useEffect(async () => {
-    await getVersions();
-  }, []);
-
   return (
     <Container>
-      <div className="modal-container">
+      <div id="create-version" className="modal-container">
         <div className="button-container">
           <Button
             image={closeIcon}
@@ -77,7 +57,7 @@ export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
         {Children(
           step,
           setStep,
-          versions,
+          versionsList,
           selectedVersions,
           onChange,
           createVersion

package/src/components/organisms/OrderDetail/OrderDetail.stories.js

@@ -58,7 +58,7 @@ OrderDetailDefault.args = {
     company_name: "GRUPO BRAHMA",
     date: "2022-11-12T00:00:00.000Z",
     type: "En oficina",
-    id_order: 1,
+    id_order: 5,
     status: "PA",
     total: 731.2639770507812,
     timestamp: "2022-11-12T22:48:23.000Z",

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Status } from "../../atoms/Status/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
+import { Loading } from "../../atoms/Loading/index";
 import moment from "moment";
 import "moment/locale/es";
 import {
@@ -18,6 +19,7 @@ moment.locale("es");
 
 export const OrderDetail = (props) => {
   const { order } = props;
+  const [isLoading, setIsLoading] = useState(true);
   const [showPaymentButton, setShowPaymentButton] = useState(
     order.payment !== "pagado"
   );
@@ -51,6 +53,7 @@ export const OrderDetail = (props) => {
 
   useEffect(() => {
     const ac = new AbortController();
+    setIsLoading(true);
     props.getOrderDetail &&
       props
         .getOrderDetail({ query: { orderId: order.id_order } })
@@ -75,6 +78,7 @@ export const OrderDetail = (props) => {
           });
           setOrderData(obj);
           setDataGeneral({ ...countArticles, totalArticles });
+          setIsLoading(false);
         });
     return () => ac.abort(); // Abort both fetches on unmount
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -155,18 +159,21 @@ export const OrderDetail = (props) => {
         </div>
       </Details>
       <div className="body">
-        <Table
-          headers={[
-            { width: 140, name: "UPC" },
-            { width: 210, name: "Nombre" },
-            { width: 100, name: "Cadena", type: "groupImages" },
-            { width: 130, name: "Servicios", type: "services" },
-            { width: 70, name: "Estatus", type: "status" },
-            { width: 65, name: "Fact.", type: "checkout" },
-          ]}
-          data={orderData}
-          isProvider={props.isProvider}
-        />
+        {isLoading
+          ? <Loading />
+          : <Table
+              headers={[
+                { width: 140, name: "UPC" },
+                { width: 210, name: "Nombre" },
+                { width: 100, name: "Cadena", type: "groupImages" },
+                { width: 130, name: "Servicios", type: "services" },
+                { width: 70, name: "Estatus", type: "status" },
+                { width: 65, name: "Fact.", type: "checkout" },
+              ]}
+              data={orderData}
+              isProvider={props.isProvider}
+            />
+        }
       </div>
       <div className="footer">
         <h2 className="headerTitle">Totales</h2>

package/src/components/organisms/OrderDetail/styles.js

@@ -14,6 +14,7 @@ export const MainContainer = styled.div`
   & > * {
     padding: 0 30px;
   }
+  box-shadow: -4px 0px 8px 0px rgba(0,0,0,0.1);
   .headerTitle {
     font-weight: bold;
     font-size: 25px;

package/src/components/organisms/OrderDetail/utils/Table/styles.js

@@ -36,6 +36,36 @@ export const Column = styled.div`
   &:nth-child(2) {
     overflow: hidden;
   }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  }
+
+  /* Tooltip text */
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    background-color: #fff;
+    color: black;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 3px;
+  
+    /* Position the tooltip text - see examples below! */
+    position: absolute;
+    z-index: 1;
+    top: -8px;
+    left: 3px;
+    font-family: Roboto;
+    font-size: 10px;
+    padding: 2px 5px;
+  }
+  
+  /* Show the tooltip text when you mouse over the tooltip container */
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+  }
 `;
 
 export const Rows = styled.div`

package/src/components/organisms/OrderDetail/utils/Table/utils.js

@@ -1,27 +1,42 @@
 export const servicesCodeIcon = {
   datasheet: (
-    <span key="datasheet" className="material-icons small">
-      &#xf8ee;
-    </span>
+    <div key="datasheet" className="tooltip">
+      <span className="material-icons small">
+        &#xf8ee;
+      </span>
+      <span className="tooltiptext">Ficha Técnica</span>
+    </div>
   ),
   description: (
-    <span key="description" className="material-icons small">
-      &#xe873;
-    </span>
+    <div key="description" className="tooltip">
+      <span className="material-icons small">
+          &#xe873;
+        </span>
+      <span className="tooltiptext">Descripción</span>
+    </div>
   ),
   image: (
-    <span key="image" className="material-icons small">
-      &#xe3f4;
-    </span>
+    <div key="image" className="tooltip">
+      <span className="material-icons small">
+        &#xe3f4;
+      </span>
+      <span className="tooltiptext">Imagen</span>
+    </div>
   ),
   translate: (
-    <span key="translate" className="material-icons small">
-      &#xe8e2;
-    </span>
+    <div key="translate" className="tooltip">
+      <span className="material-icons small">
+        &#xe8e2;
+      </span>
+      <span className="tooltiptext">Traducción</span>
+    </div>
   ),
   build: (
-    <span key="build" className="material-icons small">
-      &#xe1bd;
-    </span>
+    <div key="build"  className="tooltip">
+      <span className="material-icons small">
+        &#xe1bd;
+      </span>
+      <span className="tooltiptext">Construcción</span>
+    </div>
   ),
 };

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

@@ -8,7 +8,8 @@ import closeIcon from "../../../assets/images/versionSelector/closeVersionSelect
 import { GlobalColors } from "contentoh-components-library/dist/global-files/variables";
 import { FontFamily } from "../../../global-files/variables";
 import { VersionItem } from "../../molecules/VersionItem";
-import { version } from "react";
+import { CreateVersion } from "../../organisms/CreateVersion";
+import { useCloseModal } from "../../../global-files/customHooks";
 
 export const VersionSelector = ({
   modalId,
@@ -16,11 +17,13 @@ export const VersionSelector = ({
   setVersion,
   companyName,
   currentVersion,
-  setShowCreateVersion,
   setShowVersionSelector,
   jwt,
 }) => {
   const [versions, setVersions] = useState([]);
+  const [showCreateVersion, setShowCreateVersion] =
+    useCloseModal("create-version");
+  const [reload, setReload] = useState(false);
 
   const loadProductVersions = async (articleId) => {
     try {
@@ -41,13 +44,15 @@ export const VersionSelector = ({
   };
 
   useEffect(() => {
+    const ac = new AbortController();
     loadProductVersions(articleId);
 
     return () => {
       setVersions([]);
       setShowCreateVersion(false);
+      return () => ac.abort(); // Abort both fetches on unmount
     };
-  }, []);
+  }, [reload]);
 
   return (
     <Container id={modalId}>
@@ -86,6 +91,16 @@ export const VersionSelector = ({
           />
         ))}
       </div>
+      {showCreateVersion && (
+        <CreateVersion
+          articleId={articleId}
+          version={currentVersion}
+          versionsList={versions}
+          setShowCreateVersion={setShowCreateVersion}
+          realoadVersion={() => setReload(!reload)}
+          jwt={jwt}
+        />
+      )}
     </Container>
   );
 };