contentoh-components-library 21.3.32 → 21.3.34

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

@@ -7,7 +7,6 @@ import { Tooltip } from "../../atoms/Tooltip";
 export const ImageTooltip = (props) => {
   const {
     className, // string
-    width, // string
     sizeLoading, // number
     colorLoading, // string
     classNameLoading, // string
@@ -19,15 +18,6 @@ export const ImageTooltip = (props) => {
     position, // (string) posicion del contenedor tooltip (values en object positions)
   } = props;
   const [imgLoad, setImgLoad] = useState();
-  const [loading, setLoading] = useState(false);
-
-  /* solo para hacer pruebas en modo dev
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []);
-  */
 
   return (
     <Tooltip
@@ -37,9 +27,9 @@ export const ImageTooltip = (props) => {
       followCursor={false}
       className={className}
       classNameTooltip={classNameTooltip}
-      componentTooltip={imgLoad !== undefined && !loading && componentTooltip}
+      componentTooltip={imgLoad !== undefined && componentTooltip}
     >
-      {src && (imgLoad === undefined || loading) && (
+      {src && imgLoad === undefined && (
         <ContainerLoading
           className={classNameLoading}
           sizeLoading={sizeLoading}
@@ -49,14 +39,14 @@ export const ImageTooltip = (props) => {
         </ContainerLoading>
       )}
 
-      {(!src || (imgLoad === false && !loading)) && componentDefault}
+      {(!src || imgLoad === false) && componentDefault}
 
       <Img
         className={classNameImg}
-        src={src}
-        onLoad={(event) => setImgLoad(true)}
-        onError={(event) => setImgLoad(false)}
-        show={imgLoad === true && !loading}
+        src={`${src}?${new Date().getMilliseconds()}`}
+        onLoad={() => setImgLoad(true)}
+        onError={() => setImgLoad(false)}
+        show={imgLoad === true}
       />
     </Tooltip>
   );

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

@@ -7,7 +7,6 @@ import { PriorityFlag } from "../../atoms/PriorityFlag/index";
 export const ProductNameHeader = ({
   productName,
   statusType,
-  percent,
   priority,
   date,
   percentRequired,

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

@@ -142,7 +142,7 @@ export const SelectV2 = (props) => {
     } else if (selectedItemsCopy.length === 1) {
       let labelItem = undefined;
       for (const item of items) {
-        if (item.value == selectedItemsCopy[0]) {
+        if (item.value === selectedItemsCopy[0]) {
           labelItem = item.label;
           break;
         }

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

@@ -135,15 +135,16 @@ chatTicket_userTECH.args = {
   chatContainerType: "fixed",
   chatData: {
     id: 130,
-    ticketOwnerUserId: 49,
-    ticketCompany: 817,
-    statusTicket: "IN_PROGRESS",
+    ticketOwnerUserId: 194,
+    ticketCompany: undefined,
+    statusTicket: "PENDING",
     currentUser: {
       token:
-        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5M2FkOTM5Yy04MzJjLTQ4NWItOWUzMS0yN2MxNzBjMDk1NWEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTY2MjU5MiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2Njk2NjYxOTIsImlhdCI6MTY2OTY2MjU5MiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.hhdlQk-ljHpyZPRoG02YcvPow8jpm9coZfmEuZ29vIVX7bX5k05Ss3FkaT0dYNr2qEvqZHHqH61oJvx4xr2i6z2c3xEZxyJZFR-Cc_skhH0UwGXbCH9up5PW1aipY5rL45E42R7GKSGmB5Z-B7vxe2NcL-ZojYZkXNZ7Gx_lM8Vpq-XsFLJ4nCJlH7vx9D4SkREN3lLfYIIgqNrxJ_wqfqvcqexwRJfnr76ZqCuDR4dTWsES2Lf5D8Wa_wkQAjQNdzP7ai28l9fRyCSwkTxvamdJkx7p-tssOL5pAnCsKkD22UN-09c1bhuGrgfKWUV4awbptfjvHS7TSq0bWiv4gQ",
+        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJlYTRlZmQ1Zi1mYTg4LTRjNDEtYTM3Ny02MWVkNmY0YTMyOTciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MDA1Njg2NSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODAwNjA0NjUsImlhdCI6MTY4MDA1Njg2NSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.oRuv3LkdvctEMUjmeGw0-XefzV_Aoh1O2hFMik4RxpkkCUeP1O7AjA7lJI6sgoqa9Nwa2fCPRXk6ufi84UbgxGEgkupQmAvXTHQCw_uwCUVAZitlNGXSBl-VSisMuXSnckxdZQ1MvLV5BgLmiw4mu6HxKDN-Uw0xc7yL_yDtGu3NWxoO0Cm2zbej8jYLE9DV9wG297bjfzVQ7hzpEfEcB52I5Tg6nF2VDTx-8_m4mVVrpisbV5uBoYokbFyyOFVLZzUU7Je5uHukscHS5dje9IMTY8DE5S8xUWJubHjf_ktcy7Y2-F2cG5dI5oSdrBNU-wNNW5-OtRLgclSJLmbPCw",
       id: 28,
       companyId: 1,
       isUserTech: true,
     },
   },
+  classNameContainerFixed: "chatTicket",
 };

package/src/components/organisms/Chat/ChatLists/index.js

@@ -68,7 +68,7 @@ export const ChatLists = (props) => {
 
           {/* label interno */}
           <div className="container-indicators">
-            {currentCompanyId == companyId && (
+            {currentCompanyId === companyId && (
               <div className="label-ownCompany">Interno</div>
             )}
           </div>
@@ -76,7 +76,7 @@ export const ChatLists = (props) => {
       );
 
       // checar si es chat abierto
-      if (company.statusChat == "closed") jsxClosedChats.push(itemChat);
+      if (company.statusChat === "closed") jsxClosedChats.push(itemChat);
       else jsxOpenChats.push(itemChat);
     }
     setOpenChats(jsxOpenChats);

package/src/components/organisms/Chat/ContentChat/index.js

@@ -97,8 +97,8 @@ export const ContentChat = (props) => {
 
   // comenzar temporizador del update de 20s
   useEffect(() => {
-    //return;   -- descomentarizar para hacer pruebas sin update
-    if (startUpdate == 0) return;
+    // return; // -- descomentarizar para hacer pruebas sin update
+    if (startUpdate === 0) return;
     const processID = setTimeout(() => {
       setRunUpdate((prev) => prev + 1);
     }, 15000);
@@ -109,10 +109,10 @@ export const ContentChat = (props) => {
   // ejecutar update
   useEffect(() => {
     if (chatType === "merchant_product") {
-      if (singleChat.items) getUpdateLatestMerchantProduct();
+      if (singleChat.items) getUpdateLatestMerchantProduct(true);
       else getInitialMerchantProduct();
     } else if (chatType === "order_product") {
-      if (companies) getUpdateLatestOrderProduct();
+      if (companies) getUpdateLatestOrderProduct(true);
       else getInitialOrderProduct();
     } else {
       if (singleChat.items) getUpdateLatestTicket(true);
@@ -146,6 +146,7 @@ export const ContentChat = (props) => {
       return;
     }
     // success
+    setStartUpdate((prev) => prev + 1);
     setCurrentUser({
       id: response.body.data.currentUserId,
       companyId: response.body.data.currentCompanyId,
@@ -379,16 +380,18 @@ export const ContentChat = (props) => {
   /*=======================================================================
                 PETICION GET UPDATE_LATEST SEGUN EL TIPO DE CHAT
   ======================================================================= */
-  const getUpdateLatestMerchantProduct = async () => {
+  const getUpdateLatestMerchantProduct = async (fromUpdate = false) => {
     const paramsQuery = {
       getType: "updateLatest",
       id: JSON.stringify(dataChat.id),
       version: JSON.stringify(dataChat.version),
       date: encodeURIComponent(lastUpdateDate),
     };
+    const paramsHeaders = { Authorization: dataChat.userToken };
     const response = await fetchGET(
       process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
-      paramsQuery
+      paramsQuery,
+      paramsHeaders
     );
     if (!response.body) {
       console.log("ERROR updateLatest:", {
@@ -398,6 +401,7 @@ export const ContentChat = (props) => {
       return;
     }
     // success
+    setStartUpdate((prev) => prev + 1);
     setLastUpdateDate(response.body.data.lastUpdateDate);
     // actualizar la lista de los users
     updateAllUsers(response.body.users);
@@ -405,12 +409,13 @@ export const ContentChat = (props) => {
     let newSingleChat = { ...singleChat };
     newSingleChat.items = addNewItemsChat(
       newSingleChat.items,
-      response.body.items
+      response.body.items,
+      fromUpdate
     );
     setSingleChat(newSingleChat);
   };
 
-  const getUpdateLatestOrderProduct = async () => {
+  const getUpdateLatestOrderProduct = async (fromUpdate = false) => {
     const paramsQuery = {
       getType: "updateLatest",
       id: JSON.stringify(dataChat.id),
@@ -436,7 +441,7 @@ export const ContentChat = (props) => {
       return;
     }
     // success
-
+    setStartUpdate((prev) => prev + 1);
     // cuando cambie la lista de chats por un cambio de version o estatus
     if (response.body.data.status) {
       setIsLoading(true);
@@ -481,7 +486,8 @@ export const ContentChat = (props) => {
       Object.keys(response.body.companies).forEach((companyId) => {
         companiesList[companyId].items = addNewItemsChat(
           companiesList[companyId].items,
-          response.body.companies[companyId].items
+          response.body.companies[companyId].items,
+          fromUpdate
         );
       });
       setCompanies(companiesList);
@@ -609,15 +615,13 @@ export const ContentChat = (props) => {
   };
 
   const createItemsMerchantProduct = async (items = []) => {
-    const paramsBody = {
-      id: JSON.stringify(dataChat.id),
-      version: JSON.stringify(dataChat.version),
-      userId: JSON.stringify(currentUser.id),
-      items: JSON.stringify(items),
-    };
+    const { id, version } = dataChat;
+    const paramsBody = { id, version, items };
+    const paramsHeaders = { Authorization: dataChat.userToken };
     const response = await fetchPOST(
       process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
-      paramsBody
+      paramsBody,
+      paramsHeaders
     );
     if (!response.body) {
       return {
@@ -629,17 +633,18 @@ export const ContentChat = (props) => {
 
   const createItemsOrderProduct = async (items = []) => {
     const paramsBody = {
-      id: JSON.stringify(dataChat.id),
-      version: JSON.stringify(currentArticle.version),
-      userId: JSON.stringify(currentUser.id),
-      items: JSON.stringify(items),
-      orderId: JSON.stringify(dataChat.orderId),
-      sentCompanyId: JSON.stringify(currentUser.companyId),
-      receivedCompanyId: JSON.stringify(activeCompanyId),
+      id: dataChat.id,
+      version: currentArticle.version,
+      items,
+      orderId: dataChat.orderId,
+      sentCompanyId: currentUser.companyId,
+      receivedCompanyId: activeCompanyId,
     };
+    const paramsHeaders = { Authorization: dataChat.userToken };
     const response = await fetchPOST(
       process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
-      paramsBody
+      paramsBody,
+      paramsHeaders
     );
     if (!response.body) {
       return {
@@ -655,9 +660,11 @@ export const ContentChat = (props) => {
       userId: JSON.stringify(dataChat.currentUser.id),
       items: JSON.stringify(items),
     };
+    const paramsHeaders = { Authorization: dataChat.userToken };
     const response = await fetchPOST(
       process.env.REACT_APP_TICKETS_CHAT_ENDPOINT,
-      paramsBody
+      paramsBody,
+      paramsHeaders
     );
     if (!response.body) {
       return {
@@ -739,8 +746,8 @@ export const ContentChat = (props) => {
       }, 5000);
     }
     return Object.values(itemsId).sort((a, b) => {
-      if (a.id < b.id) return 1;
-      if (a.id > b.id) return -1;
+      if (a.id > b.id) return 1;
+      if (a.id < b.id) return -1;
       return 0;
     });
   };

package/src/components/organisms/Chat/Footer/index.js

@@ -3,13 +3,11 @@ import {
   ContainerItemCarrousel,
   ContainerMain,
   ContainerSecondary,
-  ContainerTooltipFileName,
 } from "./styles";
 import { useEffect, useState, useRef } from "react";
 import AWS from "aws-sdk";
 import { v4 as uuidv4 } from "uuid";
 import { Image as CustomImage } from "../../../atoms/Image";
-import { ImageTooltip } from "../../../molecules/ImageTooltip";
 import {
   faArrowUp as IconSend,
   faImage as IconImage,
@@ -21,7 +19,7 @@ import { ButtonV2 } from "../../../atoms/ButtonV2";
 import { IconFile } from "../../../atoms/IconFile";
 import { Modal } from "../../Modal";
 import { Tooltip } from "../../../atoms/Tooltip";
-import { Fade, Tooltip as TooltipMUI, Zoom } from "@mui/material";
+import { Fade, Tooltip as TooltipMUI } from "@mui/material";
 import { ButtonFileChooser } from "../../../atoms/ButtonFileChooser";
 import { Slide } from "@mui/material";
 // carrousel
@@ -186,7 +184,7 @@ export const Footer = (props) => {
           }
           // enviar file a AWS
           customFiles.push({
-            itemType: file.type.split("/")[0] == "image" ? "img" : "file",
+            itemType: file.type.split("/")[0] === "image" ? "img" : "file",
             key: fileKey,
             errorOwn: errorMessage,
           });
@@ -208,6 +206,7 @@ export const Footer = (props) => {
           }
         });
       } catch (err) {
+        console.log(err);
         disableSecondaryContainer(false);
         setModalAlert({
           show: true,
@@ -236,10 +235,7 @@ export const Footer = (props) => {
               valueItem.height = imgSize.height;
             }
           }
-          items.push({
-            type: file.itemType,
-            value: JSON.stringify(valueItem),
-          });
+          items.push({ type: file.itemType, value: JSON.stringify(valueItem) });
         }
       }
 

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

@@ -166,7 +166,7 @@ export const Chat = (props) => {
 
     // convertir user TECH a NORMAL si es el propietario del ticket
     let isUserTech = currentUser.isUserTech;
-    if (isUserTech && currentUser.id == ticketOwnerUserId) {
+    if (isUserTech && currentUser.id === ticketOwnerUserId) {
       isUserTech = false;
     }
     setData({

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

@@ -19,6 +19,7 @@ export const FullProductNameHeader = ({
   showApproveRejectAll,
 }) => {
   const [retailers, setRetailers] = useState([]);
+
   useEffect(() => {
     const rtls = headerData?.retailers || headerData?.retailersAvailable;
     servicesData &&
@@ -33,6 +34,12 @@ export const FullProductNameHeader = ({
       });
     setRetailers(rtls);
   }, [servicesData]);
+
+  const getTime = (date) => {
+    if (!date) return "";
+    return new Date(date).toLocaleDateString();
+  };
+
   return (
     <Container>
       <ProductNameHeader
@@ -45,9 +52,7 @@ export const FullProductNameHeader = ({
         percentRequired={percent}
         percent={percent?.toFixed(0)}
         priority={headerData?.prio}
-        date={new Date(
-          headerData?.article?.timestamp || headerData?.timestamp
-        ).toLocaleDateString()}
+        date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
       />
       <div className="features-bar-container">
         <FeaturesBar