contentoh-components-library 21.3.24 → 21.3.26

package/dist/components/molecules/GalleryElement/index.js

@@ -26,7 +26,7 @@ var _Select = _interopRequireDefault(require("../../atoms/Select"));
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GalleryElement = function GalleryElement(_ref) {
-  var _auditImages$values$n;
+  var _auditImages$values$n, _auditImages$values$n2;
 
   var _ref$validation = _ref.validation,
       validation = _ref$validation === void 0 ? "null-button" : _ref$validation,
@@ -92,7 +92,7 @@ var GalleryElement = function GalleryElement(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    className: "".concat(gridLayout ? "grid-gallery" : "row-gallery", " ").concat(!isEquals(image.uuid, auditImages === null || auditImages === void 0 ? void 0 : auditImages.values[number].uuid) && compare ? "audit-class" : ""),
+    className: "".concat(gridLayout ? "grid-gallery" : "row-gallery", " ").concat(compare && !isEquals(image === null || image === void 0 ? void 0 : image.uuid, auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n = auditImages.values[number]) === null || _auditImages$values$n === void 0 ? void 0 : _auditImages$values$n.uuid) ? "audit-class" : ""),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "buttons-container",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
@@ -105,7 +105,7 @@ var GalleryElement = function GalleryElement(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "image-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
-        img: compare ? auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n = auditImages.values[number]) === null || _auditImages$values$n === void 0 ? void 0 : _auditImages$values$n.src : image === null || image === void 0 ? void 0 : image.src,
+        img: compare ? auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n2 = auditImages.values[number]) === null || _auditImages$values$n2 === void 0 ? void 0 : _auditImages$values$n2.src : image === null || image === void 0 ? void 0 : image.src,
         altText: image === null || image === void 0 ? void 0 : image.altText,
         imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n<<<<<<< HEAD\n  .buttons-top {\n    display: flex;\n    align-items: center;\n=======\n  padding-top: 10px;\n\n  .buttons-container {\n    display: flex;\n\n    button {\n      width: 30px;\n      height: 30px;\n      border: 1px solid #f0f0f0;\n      background-size: 20px;\n      padding: 0;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n>>>>>>> versionManager\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  .buttons-top {\n    display: flex;\n    align-items: center;\n    padding-top: 10px;\n  }\n\n  .buttons-container {\n    display: flex;\n\n    button {\n      width: 30px;\n      height: 30px;\n      border: 1px solid #f0f0f0;\n      background-size: 20px;\n      padding: 0;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

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

@@ -132,6 +132,7 @@ chatTicket_userNORMAL.args = {
     id: 104,
     ticketOwnerUserId: 49,
     statusTicket: "IN_PROGRESS",
+    ticketCompany: 817,
     currentUser: {
       token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI2YmI0NzExMi03ZTNiLTRjYzUtYmVhZS02MzMxZjEwYjk3MzIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NTYxNjI0MSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjY1NjE5ODQxLCJpYXQiOjE2NjU2MTYyNDEsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.gi1Jiua_O175vHLy-CYXOR945IRcObIj5j1LNk4_EhcKPz-MzPnfWDLH7L3sTiNS-VUhIRtAhtUVPUSYv0oP1qfJwFHomerxJvYgJge8SLWPjL6yGBnTxAvHVbuLU8kcaoZup2eNMV6XOIAEBAHeCDm4vW0rYWwfrKADPyYGZQF2si14o3wtgSMX5a4ccxGwikT3to3HttWBhmJs_I1Xr_BvBxePc4WghjQr5GVGbq8vhr4HwdkTmlcJAnQsc_fmIdbJ_ACyTa1wr343KYYOQVwBjAmZDa6rU16y0yTr_J4IVWY3aS5UpBEBHy4XE0c76UaN-_DcGiVl4ayWQIUz8A",
       id: 59,
@@ -147,8 +148,9 @@ chatTicket_userTECH.args = {
   chatType: "ticket",
   chatContainerType: "fixed",
   chatData: {
-    id: 104,
+    id: 130,
     ticketOwnerUserId: 49,
+    ticketCompany: 817,
     statusTicket: "IN_PROGRESS",
     currentUser: {
       token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5M2FkOTM5Yy04MzJjLTQ4NWItOWUzMS0yN2MxNzBjMDk1NWEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTY2MjU5MiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2Njk2NjYxOTIsImlhdCI6MTY2OTY2MjU5MiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.hhdlQk-ljHpyZPRoG02YcvPow8jpm9coZfmEuZ29vIVX7bX5k05Ss3FkaT0dYNr2qEvqZHHqH61oJvx4xr2i6z2c3xEZxyJZFR-Cc_skhH0UwGXbCH9up5PW1aipY5rL45E42R7GKSGmB5Z-B7vxe2NcL-ZojYZkXNZ7Gx_lM8Vpq-XsFLJ4nCJlH7vx9D4SkREN3lLfYIIgqNrxJ_wqfqvcqexwRJfnr76ZqCuDR4dTWsES2Lf5D8Wa_wkQAjQNdzP7ai28l9fRyCSwkTxvamdJkx7p-tssOL5pAnCsKkD22UN-09c1bhuGrgfKWUV4awbptfjvHS7TSq0bWiv4gQ",

package/dist/components/organisms/Chat/ContainerItems/index.js

@@ -45,6 +45,8 @@ var _ImagePreview = require("../../../atoms/ImagePreview");
 
 var _handle_userTech = require("../../../../global-files/handle_userTech");
 
+var _awsAmplify = require("aws-amplify");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ContainerItems = function ContainerItems(props) {
@@ -54,7 +56,8 @@ var ContainerItems = function ContainerItems(props) {
       activeCompanyId = props.activeCompanyId,
       chatType = props.chatType,
       showBtnLoadMore = props.showBtnLoadMore,
-      onClickBtnLoadMore = props.onClickBtnLoadMore;
+      onClickBtnLoadMore = props.onClickBtnLoadMore,
+      ticketCompany = props.ticketCompany;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -81,10 +84,19 @@ var ContainerItems = function ContainerItems(props) {
       setModalAlert = _useState8[1];
 
   var containerList = (0, _react.useRef)(null);
+  var containerItems = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (!items) return;
     if (["merchant_product", "order_product"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
   }, [items]);
+  (0, _react.useEffect)(function () {
+    var containerScroll = document.getElementById("ulItems");
+    if (customItems.length) setTimeout(function () {
+      containerScroll.lastElementChild.scrollIntoView({
+        block: "start"
+      });
+    }, 1);
+  }, [customItems]);
 
   var updateScroll = function updateScroll() {
     var containerScroll = document.getElementById("containerItems");
@@ -163,9 +175,9 @@ var ContainerItems = function ContainerItems(props) {
     });
   };
 
-  var renderMessage = function renderMessage(item) {
+  var renderMessage = function renderMessage(item, differentCompany) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: "item-message",
+      className: "item-message ".concat(differentCompany ? "different-company" : ""),
       children: [" ", item.value, " "]
     });
   };
@@ -285,6 +297,7 @@ var ContainerItems = function ContainerItems(props) {
   };
 
   var getUserCreatedItem = function getUserCreatedItem(ownMessage, item, lastUserId) {
+    var differentCompany = currentUser.companyId !== users[item.userId].companyId;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
       id: "itemScroll-" + item.id,
       direction: ownMessage ? "left" : "right",
@@ -293,7 +306,7 @@ var ContainerItems = function ContainerItems(props) {
       container: containerList.current,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
         className: (ownMessage ? "own-message " : "") + (lastUserId === item.userId ? "sameUser" : ""),
-        children: [lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
+        children: [item.type !== "statusTicket" && lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
           className: "container-imgUser",
           sizeLoading: 25,
           colorLoading: undefined,
@@ -310,7 +323,7 @@ var ContainerItems = function ContainerItems(props) {
             className: "label-nameUser",
             children: users[item.userId].name
           })
-        }), item.type === "message" ? renderMessage(item) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        }), item.type === "message" ? renderMessage(item, differentCompany) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" && [ticketCompany, 254].includes(currentUser.companyId) ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
           className: "label-time",
           children: (0, _utils.getTime)(item.date)
         })]
@@ -369,21 +382,8 @@ var ContainerItems = function ContainerItems(props) {
 
         var ownMessage = false; // CHAT MERCHANT ARTICLE
 
-        if (chatType === "merchant_product") {
-          if (currentUser.companyId === users[item.userId].companyId) {
-            ownMessage = true;
-          }
-        } // CHAT ORDER ARTICLE
-        else if (chatType === "order_product") {
-          if (currentUser.companyId === users[item.userId].companyId) {
-            if (activeCompanyId && activeCompanyId === currentUser.companyId) {
-              if (item.userId === currentUser.id) {
-                ownMessage = true;
-              }
-            } else {
-              ownMessage = true;
-            }
-          }
+        if (currentUser.id === item.userId) {
+          ownMessage = true;
         } // renderizar tipo de item
 
 
@@ -409,7 +409,7 @@ var ContainerItems = function ContainerItems(props) {
 
       if (!date) {
         date = (0, _utils.getFullDate)(new Date(item.date));
-        jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
+        [ticketCompany, 254].includes(currentUser.companyId) && jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
         lastUserId = undefined;
       } else {
         var newDate = (0, _utils.getFullDate)(new Date(item.date));
@@ -432,23 +432,14 @@ var ContainerItems = function ContainerItems(props) {
       // acomodo del item (left o right)
 
 
-      var ownMessage = false; // user tech
+      var ownMessage = false;
 
-      if (currentUser.isUserTech) {
-        if ((0, _handle_userTech.isUserTech)(users[item.userId].isUserTech)) ownMessage = true;
-      } // user normal
-      else {
-        if (!(0, _handle_userTech.isUserTech)(users[item.userId].isUserTech)) {
-          if (currentUser.companyId === users[item.userId].companyId) {
-            ownMessage = true;
-          }
-        } else if (currentUser.id === item.userId) {
-          ownMessage = true;
-        }
+      if (currentUser.id === item.userId) {
+        ownMessage = true;
       } // renderizar tipo de item
 
 
-      jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId));
+      jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId, index === 0));
       lastUserId = item.userId;
     }
 
@@ -458,6 +449,7 @@ var ContainerItems = function ContainerItems(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       id: "containerItems",
+      ref: containerItems,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "btn-loadMore",
         children: showBtnLoadMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {

package/dist/components/organisms/Chat/ContainerItems/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: 100%;\n  flex-grow: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n  background: white;\n  padding: 15px 11px;\n  overflow: auto;\n  //border: 1px solid red;\n\n  .btn-loadMore {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    flex-grow: 2;\n\n    .container-btnLoadMore {\n      border-radius: 10px;\n      .button {\n        padding: 5px 10px;\n        border: none;\n        gap: 10px;\n        font-family: ", ";\n        .icon,\n        .iconLoading {\n          font-size: 10px;\n        }\n      }\n    }\n  }\n\n  // lista de items\n  > ul {\n    --marginUserValue: 10px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n\n    // items cambio de estatus general del article\n    // items cambio de estatus en servicio del article\n    .label-statusArticle,\n    .label-statusService {\n      width: 100%;\n      padding: 10px;\n      border-radius: 10px;\n      display: grid;\n      place-items: center;\n      cursor: default;\n\n      text-align: left;\n      font-family: ", ", sans-serif;\n      color: white;\n      font-size: 12px;\n\n      .label {\n        text-align: left;\n        font-family: ", ", sans-serif;\n        color: white;\n        font-size: 12px;\n        white-space: pre-wrap;\n        cursor: inherit;\n      }\n    }\n    .label-statusArticle {\n      background-color: #85bc5b;\n    }\n    .label-statusService {\n      background-color: #8a6caa;\n    }\n\n    // cada item dentro de la lista (fechas|message|img|file|status...)\n    li {\n      width: 90%;\n      padding: 0px;\n      margin: 16px 0px 0px 0px;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      flex-wrap: nowrap;\n      gap: var(--marginUserValue);\n      align-items: center;\n      align-self: flex-start;\n      //border: 1px solid blue;\n\n      &.sameUser {\n        margin: 2px 0px 0px 0px;\n        padding: 0px 0px 0px calc(34px + var(--marginUserValue));\n      }\n\n      // items gray label (para fechas)\n      &.label-gray {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n        .separator {\n          flex-grow: 2;\n          min-width: 35px;\n          border: 0.3px solid #f0f0f0;\n        }\n        label {\n          padding: 4px 15px;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: #b3b3b3;\n          font-size: 10px;\n        }\n      }\n\n      // container ImageTooltip del user de un item\n      .container-imgUser {\n        display: grid;\n        place-items: center;\n        width: 34px;\n        min-width: min-content;\n        border-radius: 50%;\n        overflow: hidden;\n        align-self: flex-start;\n      }\n      .icon-imgUser.fill {\n        padding: 0px;\n        width: 34px;\n        height: 34px;\n        color: #9d9d9d;\n        border-color: #9d9d9d;\n        border-width: 2px;\n      }\n      .tooltip-imgUser {\n        .label-nameUser {\n          font-family: ", ", sans-serif;\n          color: #262626;\n          font-size: 12px;\n          text-align: center;\n        }\n      }\n\n      // items de tipo message, comment y file\n      .item-message,\n      .item-comment,\n      .item-file,\n      .item-statusTicket {\n        border-radius: 10px;\n        padding: 10px;\n        font-family: ", ", sans-serif;\n        font-size: 12px;\n        text-align: left;\n        white-space: pre-line;\n        color: white;\n        margin: 0;\n      }\n      .item-message,\n      .item-comment,\n      .item-file {\n        background-color: #8386ee;\n      }\n      .item-statusTicket {\n        background-color: #85bc5b;\n      }\n      /*\n      .item-comment {\n        background-color: #5e61b2;\n      }\n      */\n\n      // items de tipo img\n      .item-img {\n        display: grid;\n        place-items: center;\n        background-color: #f7f7f7;\n        border-radius: 10px;\n        overflow: hidden;\n        max-width: 60%;\n        max-height: 300px;\n\n        .container-ImagePreview {\n          max-height: inherit;\n\n          > .img {\n            max-height: inherit;\n          }\n\n          .label-nameImg {\n            .iconDefaultImg {\n              border-radius: 0px;\n              border: none;\n              padding: 0px;\n              color: #8386ee;\n            }\n          }\n        }\n      }\n\n      // items de tipo file\n      .item-file {\n        width: auto;\n        max-width: 70%;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 6px;\n\n        .btnDownloadFileItem {\n          width: 28px;\n          min-width: 28px;\n          height: 28px;\n          min-height: 28px;\n        }\n\n        // nameFile solo 1 linea\n        .label-nameFileShort {\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          flex-grow: 2;\n          cursor: default;\n          font-family: ", ", sans-serif;\n          font-size: 12px;\n          text-align: center;\n          color: white;\n        }\n      }\n\n      // label hora del item\n      .label-time {\n        min-width: fit-content;\n        color: #c7c7c7;\n        font-family: ", ", sans-serif;\n        font-size: 9px;\n      }\n\n      // items del currentUser\n      &.own-message {\n        align-self: flex-end;\n        flex-direction: row-reverse;\n\n        &.sameUser {\n          padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n        }\n\n        .item-message,\n        .item-comment {\n          color: #262626;\n        }\n        .item-message,\n        .item-comment,\n        .item-file {\n          background-color: #f0f0f0;\n        }\n        /*\n        .item-comment {\n          background-color: #d7d7d7;\n        }\n        */\n\n        // items de tipo img\n        .item-img {\n          .container-ImagePreview {\n            .label-nameImg {\n              .iconDefaultImg {\n                color: #c9c7c7;\n              }\n            }\n          }\n        }\n\n        // items de tipo file\n        .item-file {\n          .btnDownloadFileItem {\n            .iconFile,\n            .container-btnDownload .buttonMUI .icon {\n              color: #262626;\n            }\n          }\n\n          // nameFile solo 1 linea\n          .label-nameFileShort {\n            color: #262626;\n          }\n        }\n      }\n\n      // items neutrales (center aligned)\n      &.itemNeutral {\n        width: 100%;\n\n        .itemStatus {\n          width: 100%;\n          padding: 10px;\n          border-radius: 10px;\n          display: grid;\n          place-items: center;\n          cursor: default;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: white;\n          font-size: 12px;\n          line-height: 1.2;\n          white-space: pre-wrap;\n\n          &.ticket {\n            color: white;\n            background-color: #85bc5b;\n          }\n        }\n      }\n    }\n  }\n\n  .content-chat {\n    ::-webkit-scrollbar {\n      width: 0;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: 100%;\n  flex-grow: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n  background: white;\n  padding: 15px 11px;\n  overflow: auto;\n  //border: 1px solid red;\n\n  .btn-loadMore {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    flex-grow: 2;\n\n    .container-btnLoadMore {\n      border-radius: 10px;\n      .button {\n        padding: 5px 10px;\n        border: none;\n        gap: 10px;\n        font-family: ", ";\n        .icon,\n        .iconLoading {\n          font-size: 10px;\n        }\n      }\n    }\n  }\n\n  // lista de items\n  > ul {\n    --marginUserValue: 10px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n\n    // items cambio de estatus general del article\n    // items cambio de estatus en servicio del article\n    .label-statusArticle,\n    .label-statusService {\n      width: 100%;\n      padding: 10px;\n      border-radius: 10px;\n      display: grid;\n      place-items: center;\n      cursor: default;\n\n      text-align: left;\n      font-family: ", ", sans-serif;\n      color: white;\n      font-size: 12px;\n\n      .label {\n        text-align: left;\n        font-family: ", ", sans-serif;\n        color: white;\n        font-size: 12px;\n        white-space: pre-wrap;\n        cursor: inherit;\n      }\n    }\n    .label-statusArticle {\n      background-color: #85bc5b;\n    }\n    .label-statusService {\n      background-color: #8a6caa;\n    }\n\n    // cada item dentro de la lista (fechas|message|img|file|status...)\n    li {\n      width: 90%;\n      padding: 0px;\n      margin: 16px 0px 0px 0px;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      flex-wrap: nowrap;\n      gap: var(--marginUserValue);\n      align-items: center;\n      align-self: flex-start;\n      //border: 1px solid blue;\n\n      & > label:first-child,\n      .item-img {\n        margin: 0px 0px 0px 44px;\n      }\n\n      &.sameUser {\n        margin: 2px 0px 0px 0px;\n        /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n      }\n\n      // items gray label (para fechas)\n      &.label-gray {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n        .separator {\n          flex-grow: 2;\n          min-width: 35px;\n          border: 0.3px solid #f0f0f0;\n        }\n        label {\n          padding: 4px 15px;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: #b3b3b3;\n          font-size: 10px;\n        }\n      }\n\n      // container ImageTooltip del user de un item\n      .container-imgUser {\n        display: grid;\n        place-items: center;\n        width: 34px;\n        min-width: min-content;\n        border-radius: 50%;\n        overflow: hidden;\n        align-self: flex-start;\n        margin: 0;\n      }\n      .icon-imgUser.fill {\n        padding: 0px;\n        width: 34px;\n        height: 34px;\n        color: #9d9d9d;\n        border-color: #9d9d9d;\n        border-width: 2px;\n      }\n      .tooltip-imgUser {\n        .label-nameUser {\n          font-family: ", ", sans-serif;\n          color: #262626;\n          font-size: 12px;\n          text-align: center;\n        }\n      }\n\n      // items de tipo message, comment y file\n      .item-message,\n      .item-comment,\n      .item-file,\n      .item-statusTicket {\n        border-radius: 10px;\n        padding: 10px;\n        font-family: ", ", sans-serif;\n        font-size: 12px;\n        text-align: left;\n        white-space: pre-line;\n        color: white;\n        word-break: break-word;\n      }\n      .item-message,\n      .item-comment,\n      .item-file {\n        background-color: #8386ee;\n      }\n      .item-statusTicket {\n        background-color: #85bc5b;\n      }\n\n      .item-message {\n        &.different-company {\n          border: 1px solid #e33aa9;\n        }\n      }\n      /*\n      .item-comment {\n        background-color: #5e61b2;\n      }\n      */\n\n      // items de tipo img\n      .item-img {\n        display: grid;\n        place-items: center;\n        background-color: #f7f7f7;\n        border-radius: 10px;\n        overflow: hidden;\n        max-width: 60%;\n        max-height: 300px;\n\n        .container-ImagePreview {\n          max-height: inherit;\n\n          > .img {\n            max-height: inherit;\n          }\n\n          .label-nameImg {\n            .iconDefaultImg {\n              border-radius: 0px;\n              border: none;\n              padding: 0px;\n              color: #8386ee;\n            }\n          }\n        }\n      }\n\n      // items de tipo file\n      .item-file {\n        width: auto;\n        max-width: 70%;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 6px;\n\n        .btnDownloadFileItem {\n          width: 28px;\n          min-width: 28px;\n          height: 28px;\n          min-height: 28px;\n        }\n\n        // nameFile solo 1 linea\n        .label-nameFileShort {\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          flex-grow: 2;\n          cursor: default;\n          font-family: ", ", sans-serif;\n          font-size: 12px;\n          text-align: center;\n          color: white;\n        }\n      }\n\n      // label hora del item\n      .label-time {\n        min-width: fit-content;\n        color: #c7c7c7;\n        font-family: ", ", sans-serif;\n        font-size: 9px;\n      }\n\n      & > .label-time:first-child {\n        display: none;\n      }\n\n      // items del currentUser\n      &.own-message {\n        align-self: flex-end;\n        flex-direction: row-reverse;\n\n        /* &.sameUser {\n          padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n        } */\n\n        .item-message,\n        .item-comment {\n          color: #262626;\n        }\n        .item-message,\n        .item-comment,\n        .item-file {\n          background-color: #f0f0f0;\n        }\n\n        & > .item-message:first-child {\n          margin: 0px 40px 0px 0px;\n        }\n        /*\n        .item-comment {\n          background-color: #d7d7d7;\n        }\n        */\n\n        // items de tipo img\n        .item-img {\n          .container-ImagePreview {\n            .label-nameImg {\n              .iconDefaultImg {\n                color: #c9c7c7;\n              }\n            }\n          }\n        }\n\n        // items de tipo file\n        .item-file {\n          .btnDownloadFileItem {\n            .iconFile,\n            .container-btnDownload .buttonMUI .icon {\n              color: #262626;\n            }\n          }\n\n          // nameFile solo 1 linea\n          .label-nameFileShort {\n            color: #262626;\n          }\n        }\n      }\n\n      // items neutrales (center aligned)\n      &.itemNeutral {\n        width: 100%;\n\n        .itemStatus {\n          width: 100%;\n          padding: 10px;\n          border-radius: 10px;\n          display: grid;\n          place-items: center;\n          cursor: default;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: white;\n          font-size: 12px;\n          line-height: 1.2;\n          white-space: pre-wrap;\n\n          &.ticket {\n            color: white;\n            background-color: #85bc5b;\n          }\n        }\n      }\n    }\n  }\n\n  .content-chat {\n    ::-webkit-scrollbar {\n      width: 0;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
 
 exports.Container = Container;

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

@@ -55,7 +55,8 @@ var ContentChat = function ContentChat(props) {
       dataChat = props.dataChat,
       showBtnClose = props.showBtnClose,
       onClickBtnClose = props.onClickBtnClose,
-      showPopUpChat = props.showPopUpChat;
+      showPopUpChat = props.showPopUpChat,
+      ticketCompany = props.ticketCompany;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -1410,6 +1411,7 @@ var ContentChat = function ContentChat(props) {
           showBtnLoadMore: enabledLoadMore,
           chatType: chatType,
           activeCompanyId: activeCompanyId,
+          ticketCompany: ticketCompany,
           currentUser: ["merchant_product", "order_product"].includes(chatType) ? currentUser : dataChat.currentUser,
           onClickBtnLoadMore: chatType === "merchant_product" ? getLoadMoreMerchantProduct : chatType === "order_product" ? getLoadMoreOrderProduct : getLoadMoreTicket
         });

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

@@ -45,6 +45,9 @@ var Chat = function Chat(props) {
       data = _useState4[0],
       setData = _useState4[1];
 
+  var _ref = chatData || {},
+      ticketCompany = _ref.ticketCompany;
+
   (0, _react.useEffect)(function () {
     switch (chatType) {
       case "merchant_product":
@@ -212,7 +215,8 @@ var Chat = function Chat(props) {
         chatType: chatType === null || chatType === void 0 ? void 0 : chatType.toLowerCase(),
         chatContainerType: "fixed",
         dataChat: data,
-        showBtnClose: false
+        showBtnClose: false,
+        ticketCompany: ticketCompany
       })
     });
   } else {
@@ -240,6 +244,7 @@ var Chat = function Chat(props) {
             dataChat: data,
             showPopUpChat: showPopUpChat,
             showBtnClose: true,
+            ticketCompany: ticketCompany,
             onClickBtnClose: function onClickBtnClose() {
               setShowPopUpChat(false);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.24",
+  "version": "21.3.26",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -64,7 +64,7 @@ export const GalleryElement = ({
   return (
     <Container
       className={`${gridLayout ? "grid-gallery" : "row-gallery"} ${
-        !isEquals(image.uuid, auditImages?.values[number].uuid) && compare
+        compare && !isEquals(image?.uuid, auditImages?.values[number]?.uuid)
           ? "audit-class"
           : ""
       }`}

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

@@ -3,12 +3,11 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
-<<<<<<< HEAD
   .buttons-top {
     display: flex;
     align-items: center;
-=======
-  padding-top: 10px;
+    padding-top: 10px;
+  }
 
   .buttons-container {
     display: flex;
@@ -24,6 +23,5 @@ export const Container = styled.div`
         margin-left: 10px;
       }
     }
->>>>>>> versionManager
   }
 `;

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

@@ -117,6 +117,7 @@ chatTicket_userNORMAL.args = {
     id: 104,
     ticketOwnerUserId: 49,
     statusTicket: "IN_PROGRESS",
+    ticketCompany: 817,
     currentUser: {
       token:
         "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI2YmI0NzExMi03ZTNiLTRjYzUtYmVhZS02MzMxZjEwYjk3MzIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NTYxNjI0MSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjY1NjE5ODQxLCJpYXQiOjE2NjU2MTYyNDEsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.gi1Jiua_O175vHLy-CYXOR945IRcObIj5j1LNk4_EhcKPz-MzPnfWDLH7L3sTiNS-VUhIRtAhtUVPUSYv0oP1qfJwFHomerxJvYgJge8SLWPjL6yGBnTxAvHVbuLU8kcaoZup2eNMV6XOIAEBAHeCDm4vW0rYWwfrKADPyYGZQF2si14o3wtgSMX5a4ccxGwikT3to3HttWBhmJs_I1Xr_BvBxePc4WghjQr5GVGbq8vhr4HwdkTmlcJAnQsc_fmIdbJ_ACyTa1wr343KYYOQVwBjAmZDa6rU16y0yTr_J4IVWY3aS5UpBEBHy4XE0c76UaN-_DcGiVl4ayWQIUz8A",
@@ -133,8 +134,9 @@ chatTicket_userTECH.args = {
   chatType: "ticket",
   chatContainerType: "fixed",
   chatData: {
-    id: 104,
+    id: 130,
     ticketOwnerUserId: 49,
+    ticketCompany: 817,
     statusTicket: "IN_PROGRESS",
     currentUser: {
       token:

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

@@ -23,6 +23,7 @@ import { Slide, Zoom } from "@mui/material";
 import { useRef } from "react";
 import { ImagePreview } from "../../../atoms/ImagePreview";
 import { isUserTech } from "../../../../global-files/handle_userTech";
+import { container } from "aws-amplify";
 
 export const ContainerItems = (props) => {
   const {
@@ -39,6 +40,7 @@ export const ContainerItems = (props) => {
     chatType, // string
     showBtnLoadMore, // boolean
     onClickBtnLoadMore, // () => {}
+    ticketCompany, // id de la comañía que creó el ticket
   } = props;
   const [scrollHeight, setScrollHeight] = useState(0);
   const [btnLoadMoreLoading, setBtnLoadMoreLoading] = useState(false);
@@ -49,7 +51,7 @@ export const ContainerItems = (props) => {
     message: "",
   });
   const containerList = useRef(null);
-
+  const containerItems = useRef(null);
 
   useEffect(() => {
     if (!items) return;
@@ -58,6 +60,16 @@ export const ContainerItems = (props) => {
     else setCustomItems([]);
   }, [items]);
 
+  useEffect(() => {
+    const containerScroll = document.getElementById("ulItems");
+    if (customItems.length)
+      setTimeout(() => {
+        containerScroll.lastElementChild.scrollIntoView({
+          block: "start",
+        });
+      }, 1);
+  }, [customItems]);
+
   const updateScroll = () => {
     const containerScroll = document.getElementById("containerItems");
     if (containerScroll) {
@@ -133,8 +145,17 @@ export const ContainerItems = (props) => {
     );
   };
 
-  const renderMessage = (item) => {
-    return <label className="item-message"> {item.value} </label>;
+  const renderMessage = (item, differentCompany) => {
+    return (
+      <label
+        className={`item-message ${
+          differentCompany ? "different-company" : ""
+        }`}
+      >
+        {" "}
+        {item.value}{" "}
+      </label>
+    );
   };
 
   const renderComment = (item) => {
@@ -270,6 +291,8 @@ export const ContainerItems = (props) => {
   };
 
   const getUserCreatedItem = (ownMessage, item, lastUserId) => {
+    const differentCompany =
+      currentUser.companyId !== users[item.userId].companyId;
     return (
       <Slide
         id={"itemScroll-" + item.id}
@@ -286,7 +309,7 @@ export const ContainerItems = (props) => {
           }
         >
           {/* img del user */}
-          {lastUserId !== item.userId && (
+          {item.type !== "statusTicket" && lastUserId !== item.userId && (
             <ImageTooltip
               className={"container-imgUser"}
               sizeLoading={25}
@@ -311,14 +334,15 @@ export const ContainerItems = (props) => {
           )}
 
           {item.type === "message"
-            ? renderMessage(item)
+            ? renderMessage(item, differentCompany)
             : item.type === "comment"
             ? renderComment(item)
             : item.type === "img"
             ? renderImg(item)
             : item.type === "file"
             ? renderFile(item, ownMessage)
-            : item.type === "statusTicket"
+            : item.type === "statusTicket" &&
+              [ticketCompany, 254].includes(currentUser.companyId)
             ? renderStatusTicket(item)
             : null}
 
@@ -375,22 +399,8 @@ export const ContainerItems = (props) => {
       // acomodo del item (left o right)
       let ownMessage = false;
       // CHAT MERCHANT ARTICLE
-      if (chatType === "merchant_product") {
-        if (currentUser.companyId === users[item.userId].companyId) {
-          ownMessage = true;
-        }
-      }
-      // CHAT ORDER ARTICLE
-      else if (chatType === "order_product") {
-        if (currentUser.companyId === users[item.userId].companyId) {
-          if (activeCompanyId && activeCompanyId === currentUser.companyId) {
-            if (item.userId === currentUser.id) {
-              ownMessage = true;
-            }
-          } else {
-            ownMessage = true;
-          }
-        }
+      if (currentUser.id === item.userId) {
+        ownMessage = true;
       }
 
       // renderizar tipo de item
@@ -405,14 +415,14 @@ export const ContainerItems = (props) => {
     let countDate = 1;
     let lastUserId = undefined;
 
-
     // recorrido de los items (del mas viejo al mas reciente)
     for (let index = items.length - 1; index >= 0; index--) {
       const item = items[index];
       // manejo de las etiquetas fechas
       if (!date) {
         date = getFullDate(new Date(item.date));
-        jsxItems.push(renderGrayLabel(date, `itemDate-${countDate++}`));
+        [ticketCompany, 254].includes(currentUser.companyId) &&
+          jsxItems.push(renderGrayLabel(date, `itemDate-${countDate++}`));
         lastUserId = undefined;
       } else {
         let newDate = getFullDate(new Date(item.date));
@@ -435,23 +445,14 @@ export const ContainerItems = (props) => {
 
       // acomodo del item (left o right)
       let ownMessage = false;
-      // user tech
-      if (currentUser.isUserTech) {
-        if (isUserTech(users[item.userId].isUserTech)) ownMessage = true;
-      }
-      // user normal
-      else {
-        if (!isUserTech(users[item.userId].isUserTech)) {
-          if (currentUser.companyId === users[item.userId].companyId) {
-            ownMessage = true;
-          }
-        } else if (currentUser.id === item.userId) {
-          ownMessage = true;
-        }
+      if (currentUser.id === item.userId) {
+        ownMessage = true;
       }
 
       // renderizar tipo de item
-      jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId));
+      jsxItems.push(
+        getUserCreatedItem(ownMessage, item, lastUserId, index === 0)
+      );
       lastUserId = item.userId;
     }
 
@@ -460,7 +461,7 @@ export const ContainerItems = (props) => {
 
   return (
     <>
-      <Container id="containerItems">
+      <Container id="containerItems" ref={containerItems}>
         <div className="btn-loadMore">
           {showBtnLoadMore && (
             <ButtonV2

package/src/components/organisms/Chat/ContainerItems/styles.js

@@ -93,9 +93,14 @@ export const Container = styled.div`
       align-self: flex-start;
       //border: 1px solid blue;
 
+      & > label:first-child,
+      .item-img {
+        margin: 0px 0px 0px 44px;
+      }
+
       &.sameUser {
         margin: 2px 0px 0px 0px;
-        padding: 0px 0px 0px calc(34px + var(--marginUserValue));
+        /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */
       }
 
       // items gray label (para fechas)
@@ -130,6 +135,7 @@ export const Container = styled.div`
         border-radius: 50%;
         overflow: hidden;
         align-self: flex-start;
+        margin: 0;
       }
       .icon-imgUser.fill {
         padding: 0px;
@@ -160,7 +166,7 @@ export const Container = styled.div`
         text-align: left;
         white-space: pre-line;
         color: white;
-        margin: 0;
+        word-break: break-word;
       }
       .item-message,
       .item-comment,
@@ -170,6 +176,12 @@ export const Container = styled.div`
       .item-statusTicket {
         background-color: #85bc5b;
       }
+
+      .item-message {
+        &.different-company {
+          border: 1px solid #e33aa9;
+        }
+      }
       /*
       .item-comment {
         background-color: #5e61b2;
@@ -242,14 +254,18 @@ export const Container = styled.div`
         font-size: 9px;
       }
 
+      & > .label-time:first-child {
+        display: none;
+      }
+
       // items del currentUser
       &.own-message {
         align-self: flex-end;
         flex-direction: row-reverse;
 
-        &.sameUser {
+        /* &.sameUser {
           padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;
-        }
+        } */
 
         .item-message,
         .item-comment {
@@ -260,6 +276,10 @@ export const Container = styled.div`
         .item-file {
           background-color: #f0f0f0;
         }
+
+        & > .item-message:first-child {
+          margin: 0px 40px 0px 0px;
+        }
         /*
         .item-comment {
           background-color: #d7d7d7;

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

@@ -1,4 +1,4 @@
-import ReactHowler from 'react-howler'
+import ReactHowler from "react-howler";
 import { Container } from "./styles";
 import { useEffect, useState } from "react";
 import { NotFound } from "../../../atoms/NotFound";
@@ -15,7 +15,7 @@ import {
   isStringEmpty,
   isValidNaturalNumber,
 } from "../../../../global-files/utils";
-import newMessage from "../../../../assets/sounds/newMessage.mp3"
+import newMessage from "../../../../assets/sounds/newMessage.mp3";
 
 export const ContentChat = (props) => {
   const {
@@ -25,6 +25,7 @@ export const ContentChat = (props) => {
     showBtnClose, // boolean
     onClickBtnClose, // () => {}
     showPopUpChat, // boolean
+    ticketCompany, // id de la compañía que creó el ticket
   } = props;
   const [companies, setCompanies] = useState({}); /* {
     companyId: {
@@ -539,7 +540,7 @@ export const ContentChat = (props) => {
     newSingleChat.items = addNewItemsChat(
       newSingleChat.items,
       response.body.items,
-      fromUpdate,
+      fromUpdate
     );
     newSingleChat.statusChat = response.body.data.statusChat;
 
@@ -715,7 +716,11 @@ export const ContentChat = (props) => {
     return items;
   };
 
-  const addNewItemsChat = (currentItems = [], newItems = [], fromUpdate = false) => {
+  const addNewItemsChat = (
+    currentItems = [],
+    newItems = [],
+    fromUpdate = false
+  ) => {
     let itemsId = {};
     currentItems.forEach((item) => {
       itemsId[item.id] = item;
@@ -824,6 +829,7 @@ export const ContentChat = (props) => {
             showBtnLoadMore={enabledLoadMore}
             chatType={chatType}
             activeCompanyId={activeCompanyId}
+            ticketCompany={ticketCompany}
             currentUser={
               ["merchant_product", "order_product"].includes(chatType)
                 ? currentUser
@@ -910,10 +916,7 @@ export const ContentChat = (props) => {
         {/* body */}
         {renderBodyChat()}
       </Container>
-      <ReactHowler
-        src={newMessage}
-        playing={playSound}
-      />
+      <ReactHowler src={newMessage} playing={playSound} />
     </>
   );
 };

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

@@ -24,6 +24,8 @@ export const Chat = (props) => {
   const [showPopUpChat, setShowPopUpChat] = useState(false);
   const [data, setData] = useState();
 
+  const { ticketCompany } = chatData || {};
+
   useEffect(() => {
     switch (chatType) {
       case "merchant_product":
@@ -122,7 +124,6 @@ export const Chat = (props) => {
       statusTicket, // (string) "IN_PROGRESS" | "PENDING" | "COMPLETED"
       ticketOwnerUserId, // number
     } = chatData;
-
     // validar el token del usuario conectado
     if (isStringEmpty(currentUser?.token)) {
       setDataError("Tu identificación de usuario no fue especificado");
@@ -195,6 +196,7 @@ export const Chat = (props) => {
           chatContainerType="fixed"
           dataChat={data}
           showBtnClose={false}
+          ticketCompany={ticketCompany}
         />
       </ContainerFixed>
     );
@@ -223,6 +225,7 @@ export const Chat = (props) => {
               dataChat={data}
               showPopUpChat={showPopUpChat}
               showBtnClose={true}
+              ticketCompany={ticketCompany}
               onClickBtnClose={() => {
                 setShowPopUpChat(false);
               }}