contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/organisms/Chatv2/Footer/styles.js

@@ -1,15 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerSecondary = exports.ContainerMain = exports.ContainerItemCarrousel = exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../../global-files/variables");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  //height: 100%; // modo dev\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  background: white;\n  padding: 15px 14px 14px 14px;\n  //border: 1px solid red;\n\n  .container-chatDisabled {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    background-color: #f7f7f7;\n    border-radius: 17px;\n    padding: 10px 15px;\n\n    .label-chatDisabled {\n      flex-grow: 2;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: center;\n      color: #a2a2a2;\n    }\n  }\n\n  .tooltipErrorUpdate {\n    > div {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 5px;\n\n      .label-title {\n        font-family: ", ", sans-serif;\n        font-size: 13px;\n        text-align: center;\n        color: #262626;\n      }\n\n      .label-detail {\n        font-family: ", ", sans-serif;\n        font-size: 11px;\n        text-align: center;\n        color: #262626;\n      }\n    }\n  }\n\n  .container-ErrorUpdate {\n    width: 20px;\n    height: 20px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    padding: 0px;\n  }\n\n  @media (max-width: 600px) { \n    width: 90%;\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
-const ContainerMain = exports.ContainerMain = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-end;\n  gap: 7px;\n  flex-wrap: nowrap;\n  background-color: #f7f7f7;\n  border-radius: 17px;\n  padding: 10px 7px 10px 15px;\n\n  .input-itemMessage {\n    flex-grow: 2;\n    min-width: 80px;\n    padding: 0px;\n  }\n\n  .btn-chooserFiles,\n  .btn-sendMessage {\n    width: 20px;\n    height: 20px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    padding: 0px;\n  }\n\n  .btn-chooserFiles {\n    .button {\n      .icon:hover {\n        color: #a2a2a2 !important;\n      }\n    }\n  }\n"])));
-const ContainerSecondary = exports.ContainerSecondary = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 5px;\n  flex-wrap: nowrap;\n  background-color: white;\n  border-radius: 0px;\n  padding: 0px;\n\n  // container del preview files\n  + .tooltip-previewFiles {\n    width: 100%;\n    padding: 15px 14px 0px 14px;\n    background-color: transparent;\n    z-index: 9;\n    /*\n    &[data-popper-placement*=\"bottom\"] > .MuiTooltip-tooltip {\n      margin-top: 5px;\n    }\n    &[data-popper-placement*=\"top\"] > .MuiTooltip-tooltip {\n      margin-bottom: 5px;\n    }\n    */\n\n    > .MuiTooltip-tooltip {\n      --background: #f7f7f7;\n      width: 100%;\n      background-color: var(--background);\n      padding: 5px;\n      border-radius: 15px;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: left;\n      color: #262626;\n      max-width: unset;\n      margin: 0px !important;\n\n      .MuiTooltip-arrow {\n        color: var(--background);\n      }\n\n      // container del carrusel de files\n      .container-carrouselFiles {\n        width: 100%;\n        //border: 1px solid blue;\n\n        // carrusel de files\n        .carrousel-files {\n          --sizePagination: 0px;\n          width: 100%;\n          padding-top: var(--sizePagination);\n          border-radius: inherit;\n\n          .swiper-pagination-progressbar {\n            height: var(--sizePagination);\n            border-radius: inherit;\n\n            span {\n              background-color: #e33aa9;\n            }\n          }\n\n          .item-carrousel {\n            width: 154px;\n            height: 154px;\n            background-color: white;\n            display: grid;\n            place-items: center;\n            border-radius: 10px;\n          }\n        }\n\n        // tooltip fileName\n        + .tooltip-previewFileName {\n          background-color: transparent;\n          //transform: none !important;\n          //inset: 0px auto auto auto !important;\n\n          > .MuiTooltip-tooltip {\n            --background: white;\n            background-color: var(--background);\n            padding: 5px;\n            border-radius: 15px;\n            font-family: ", ", sans-serif;\n            font-size: 12px;\n            text-align: left;\n            color: #262626;\n            max-width: 154px;\n          }\n\n          &[data-popper-placement*=\"bottom\"] .MuiTooltip-tooltip {\n            margin-top: 15px;\n          }\n          &[data-popper-placement*=\"top\"] .MuiTooltip-tooltip {\n            margin-bottom: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  .btn-chooserFiles {\n    width: 34px;\n    height: 34px;\n    display: grid;\n    place-items: center;\n    .button {\n      background-color: #f7f7f7 !important;\n      border: none !important;\n      &:hover {\n        background-color: #e7e7e7 !important;\n      }\n    }\n  }\n\n  .slide-btnSendFiles {\n    flex-grow: 2;\n\n    .btn-sendFiles {\n      width: 100%;\n      .button {\n        padding: 10px 15px;\n      }\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium);
-const ContainerItemCarrousel = exports.ContainerItemCarrousel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  border-radius: inherit;\n  background-color: inherit;\n\n  .container-img {\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n    background-color: inherit;\n    transition: all 0.25s;\n    z-index: 10;\n  }\n\n  .container-delete {\n    position: absolute;\n    border-radius: inherit;\n    top: 0px;\n    left: 0px;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    place-items: center;\n    background-color: inherit;\n    z-index: 11;\n    opacity: 0;\n    transition: all 0.3s;\n    background-color: rgba(0, 0, 0, 0.35);\n    overflow: hidden;\n\n    .btn-delete .button {\n      border: none;\n      padding: 4px 8px;\n      color: #262626 !important;\n      .icon {\n        font-size: 8px;\n      }\n    }\n  }\n\n  &:hover {\n    .container-delete {\n      opacity: 1;\n    }\n  }\n"])));
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  //height: 100%; // modo dev\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  background: white;\n  padding: 15px 14px 14px 14px;\n  //border: 1px solid red;\n\n  .container-chatDisabled {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    background-color: #f7f7f7;\n    border-radius: 17px;\n    padding: 10px 15px;\n\n    .label-chatDisabled {\n      flex-grow: 2;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: center;\n      color: #a2a2a2;\n    }\n  }\n\n  .tooltipErrorUpdate {\n    > div {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 5px;\n\n      .label-title {\n        font-family: ", ", sans-serif;\n        font-size: 13px;\n        text-align: center;\n        color: #262626;\n      }\n\n      .label-detail {\n        font-family: ", ", sans-serif;\n        font-size: 11px;\n        text-align: center;\n        color: #262626;\n      }\n    }\n  }\n\n  .container-ErrorUpdate {\n    width: 20px;\n    height: 20px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    padding: 0px;\n  }\n\n  @media (max-width: 600px) { \n    width: 90%;\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
+
+exports.Container = Container;
+
+var ContainerMain = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-end;\n  gap: 7px;\n  flex-wrap: nowrap;\n  background-color: #f7f7f7;\n  border-radius: 17px;\n  padding: 10px 7px 10px 15px;\n\n  .input-itemMessage {\n    flex-grow: 2;\n    min-width: 80px;\n    padding: 0px;\n  }\n\n  .btn-chooserFiles,\n  .btn-sendMessage {\n    width: 20px;\n    height: 20px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    padding: 0px;\n  }\n\n  .btn-chooserFiles {\n    .button {\n      .icon:hover {\n        color: #a2a2a2 !important;\n      }\n    }\n  }\n"])));
+
+exports.ContainerMain = ContainerMain;
+
+var ContainerSecondary = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 5px;\n  flex-wrap: nowrap;\n  background-color: white;\n  border-radius: 0px;\n  padding: 0px;\n\n  // container del preview files\n  + .tooltip-previewFiles {\n    width: 100%;\n    padding: 15px 14px 0px 14px;\n    background-color: transparent;\n    z-index: 9;\n    /*\n    &[data-popper-placement*=\"bottom\"] > .MuiTooltip-tooltip {\n      margin-top: 5px;\n    }\n    &[data-popper-placement*=\"top\"] > .MuiTooltip-tooltip {\n      margin-bottom: 5px;\n    }\n    */\n\n    > .MuiTooltip-tooltip {\n      --background: #f7f7f7;\n      width: 100%;\n      background-color: var(--background);\n      padding: 5px;\n      border-radius: 15px;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: left;\n      color: #262626;\n      max-width: unset;\n      margin: 0px !important;\n\n      .MuiTooltip-arrow {\n        color: var(--background);\n      }\n\n      // container del carrusel de files\n      .container-carrouselFiles {\n        width: 100%;\n        //border: 1px solid blue;\n\n        // carrusel de files\n        .carrousel-files {\n          --sizePagination: 0px;\n          width: 100%;\n          padding-top: var(--sizePagination);\n          border-radius: inherit;\n\n          .swiper-pagination-progressbar {\n            height: var(--sizePagination);\n            border-radius: inherit;\n\n            span {\n              background-color: #e33aa9;\n            }\n          }\n\n          .item-carrousel {\n            width: 154px;\n            height: 154px;\n            background-color: white;\n            display: grid;\n            place-items: center;\n            border-radius: 10px;\n          }\n        }\n\n        // tooltip fileName\n        + .tooltip-previewFileName {\n          background-color: transparent;\n          //transform: none !important;\n          //inset: 0px auto auto auto !important;\n\n          > .MuiTooltip-tooltip {\n            --background: white;\n            background-color: var(--background);\n            padding: 5px;\n            border-radius: 15px;\n            font-family: ", ", sans-serif;\n            font-size: 12px;\n            text-align: left;\n            color: #262626;\n            max-width: 154px;\n          }\n\n          &[data-popper-placement*=\"bottom\"] .MuiTooltip-tooltip {\n            margin-top: 15px;\n          }\n          &[data-popper-placement*=\"top\"] .MuiTooltip-tooltip {\n            margin-bottom: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  .btn-chooserFiles {\n    width: 34px;\n    height: 34px;\n    display: grid;\n    place-items: center;\n    .button {\n      background-color: #f7f7f7 !important;\n      border: none !important;\n      &:hover {\n        background-color: #e7e7e7 !important;\n      }\n    }\n  }\n\n  .slide-btnSendFiles {\n    flex-grow: 2;\n\n    .btn-sendFiles {\n      width: 100%;\n      .button {\n        padding: 10px 15px;\n      }\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium);
+
+exports.ContainerSecondary = ContainerSecondary;
+
+var ContainerItemCarrousel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  border-radius: inherit;\n  background-color: inherit;\n\n  .container-img {\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n    background-color: inherit;\n    transition: all 0.25s;\n    z-index: 10;\n  }\n\n  .container-delete {\n    position: absolute;\n    border-radius: inherit;\n    top: 0px;\n    left: 0px;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    place-items: center;\n    background-color: inherit;\n    z-index: 11;\n    opacity: 0;\n    transition: all 0.3s;\n    background-color: rgba(0, 0, 0, 0.35);\n    overflow: hidden;\n\n    .btn-delete .button {\n      border: none;\n      padding: 4px 8px;\n      color: #262626 !important;\n      .icon {\n        font-size: 8px;\n      }\n    }\n  }\n\n  &:hover {\n    .container-delete {\n      opacity: 1;\n    }\n  }\n"])));
+
+exports.ContainerItemCarrousel = ContainerItemCarrousel;

package/dist/components/organisms/Chatv2/Header/Header.stories.js

@@ -1,21 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.headerChatSimple = exports.headerChatMultiple = exports.headerChatEmpty = exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/organisms/Chat/Header",
   component: _index.Header
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Header, {
-  ...args
-});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Header, (0, _objectSpread2.default)({}, args));
+}; // companies de prueba multiple
+
 
-// companies de prueba multiple
-const multipleCompanies = {
+var multipleCompanies = {
   100: {
     name: "Fábrica",
     statusChat: "enabled"
@@ -29,7 +38,7 @@ const multipleCompanies = {
     statusChat: "disabled"
   }
 };
-const twoCompanies = {
+var twoCompanies = {
   100: {
     name: "Fábrica",
     statusChat: "enabled"
@@ -39,7 +48,8 @@ const twoCompanies = {
     statusChat: "current"
   }
 };
-const headerChatMultiple = exports.headerChatMultiple = Template.bind({});
+var headerChatMultiple = Template.bind({});
+exports.headerChatMultiple = headerChatMultiple;
 headerChatMultiple.args = {
   showChatsList: false,
   multipleCompanies: true,
@@ -48,14 +58,15 @@ headerChatMultiple.args = {
     name: "The Home Depot",
     src: ""
   },
-  onClickBtnChooseChat: () => {
+  onClickBtnChooseChat: function onClickBtnChooseChat() {
     console.log("showAllChats:", true);
   },
-  onClickBtnClose: () => {
+  onClickBtnClose: function onClickBtnClose() {
     console.log("click en boton X");
   }
 };
-const headerChatSimple = exports.headerChatSimple = Template.bind({});
+var headerChatSimple = Template.bind({});
+exports.headerChatSimple = headerChatSimple;
 headerChatSimple.args = {
   showChatsList: false,
   multipleCompanies: false,
@@ -64,21 +75,22 @@ headerChatSimple.args = {
     name: "The Home Depot",
     src: ""
   },
-  onClickBtnChooseChat: () => {
+  onClickBtnChooseChat: function onClickBtnChooseChat() {
     console.log("showAllChats:", true);
   },
-  onClickBtnClose: () => {
+  onClickBtnClose: function onClickBtnClose() {
     console.log("click en boton X");
   }
 };
-const headerChatEmpty = exports.headerChatEmpty = Template.bind({});
+var headerChatEmpty = Template.bind({});
+exports.headerChatEmpty = headerChatEmpty;
 headerChatEmpty.args = {
   showChatsList: false,
   multipleCompanies: true,
-  onClickBtnChooseChat: () => {
+  onClickBtnChooseChat: function onClickBtnChooseChat() {
     console.log("showAllChats:", true);
   },
-  onClickBtnClose: () => {
+  onClickBtnClose: function onClickBtnClose() {
     console.log("click en boton X");
   }
 };

package/dist/components/organisms/Chatv2/Header/index.js

@@ -4,26 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Header = void 0;
+
 var _styles = require("./styles");
+
 var _react = require("react");
+
 var _CustomIcon = require("../../../atoms/CustomIcon");
+
 var _ButtonV = require("../../../atoms/ButtonV2");
+
 var _Image = require("../../../atoms/Image");
+
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Header = props => {
-  const {
-    showBtnClose,
-    // boolean
-    showChatsList,
-    // boolean
-    chatCompany /* {id , name , src} */,
-    multipleCompanies,
-    // boolean
-    onClickBtnChooseChat,
-    // () => {}
-    onClickBtnClose // () => {}
-  } = props;
+
+var Header = function Header(props) {
+  var showBtnClose = props.showBtnClose,
+      showChatsList = props.showChatsList,
+      chatCompany = props.chatCompany,
+      multipleCompanies = props.multipleCompanies,
+      onClickBtnChooseChat = props.onClickBtnChooseChat,
+      onClickBtnClose = props.onClickBtnClose;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       children: [showChatsList ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -60,7 +62,9 @@ const Header = props => {
           size: 10,
           borderType: "circle",
           icon: _freeSolidSvgIcons.faComments,
-          onClick: event => onClickBtnChooseChat && onClickBtnChooseChat()
+          onClick: function onClick(event) {
+            return onClickBtnChooseChat && onClickBtnChooseChat();
+          }
         })]
       }), showBtnClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
         className: "btn-X",
@@ -68,9 +72,12 @@ const Header = props => {
         size: 11,
         borderType: "circle",
         icon: _freeSolidSvgIcons.faClose,
-        onClick: event => onClickBtnClose && onClickBtnClose()
+        onClick: function onClick(event) {
+          return onClickBtnClose && onClickBtnClose();
+        }
       })]
     })
   });
 };
+
 exports.Header = Header;

package/dist/components/organisms/Chatv2/Header/styles.js

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  background: #f9f9f9;\n  padding: 12px 15px;\n  //overflow: auto;\n  //border: 1px solid red;\n\n  .logoCompany {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    overflow: hidden;\n\n    .icon-logoCompany {\n      padding: 5px;\n    }\n  }\n\n  .title {\n    flex-grow: 2;\n    min-width: min-content;\n    text-align: left;\n    font-family: ", ", sans-serif;\n    font-size: 15px;\n    color: #262626;\n  }\n\n  .btn-chooseChat,\n  .icon-chooseChat {\n    width: 24px;\n    height: 24px;\n    padding: 0px;\n  }\n\n  .btn-X {\n    width: 24px;\n    height: 24px;\n    padding: 0px;\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  background: #f9f9f9;\n  padding: 12px 15px;\n  //overflow: auto;\n  //border: 1px solid red;\n\n  .logoCompany {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    overflow: hidden;\n\n    .icon-logoCompany {\n      padding: 5px;\n    }\n  }\n\n  .title {\n    flex-grow: 2;\n    min-width: min-content;\n    text-align: left;\n    font-family: ", ", sans-serif;\n    font-size: 15px;\n    color: #262626;\n  }\n\n  .btn-chooseChat,\n  .icon-chooseChat {\n    width: 24px;\n    height: 24px;\n    padding: 0px;\n  }\n\n  .btn-X {\n    width: 24px;\n    height: 24px;\n    padding: 0px;\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;

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

@@ -1,49 +1,73 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chatv2 = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _react = require("react");
+
 var _ButtonV = require("../../atoms/ButtonV2");
+
 var _ContentChat = require("./ContentChat");
+
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
 var _material = require("@mui/material");
+
 var _utils = require("../../../global-files/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Chatv2 = props => {
-  const {
-    chatType,
-    // "merchant_product" | "order_product" | "ticket"
-    chatContainerType,
-    // ("fixed") | ("popUp")
-    chatData = {},
-    // {} => aqui poner los datos requeridos segun el tipo de Chatv2
-    classNameContainerFixed,
-    // clases CSS del envoltoria Chatv2 fixed
-    size = 14 // tamaño del icono
-  } = props;
-  const [showPopUpChat, setShowPopUpChat] = (0, _react.useState)(false);
-  const [data, setData] = (0, _react.useState)();
-  const {
-    ticketCompany,
-    retailerId
-  } = chatData || {};
-  (0, _react.useEffect)(() => {
+
+var Chatv2 = function Chatv2(props) {
+  var chatType = props.chatType,
+      chatContainerType = props.chatContainerType,
+      _props$chatData = props.chatData,
+      chatData = _props$chatData === void 0 ? {} : _props$chatData,
+      classNameContainerFixed = props.classNameContainerFixed,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 14 : _props$size;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showPopUpChat = _useState2[0],
+      setShowPopUpChat = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var _ref = chatData || {},
+      ticketCompany = _ref.ticketCompany,
+      retailerId = _ref.retailerId;
+
+  (0, _react.useEffect)(function () {
     switch (chatType) {
       case "merchant_product":
         validateChatMerchantProduct();
         break;
+
       case "order_product":
         validateChatOrderProduct();
         break;
+
       case "ticket":
         validateChatTicket();
         break;
+
       case "product_status":
         validateProductStatus();
         break;
+
       default:
         setData({
           code: 404,
@@ -52,186 +76,178 @@ const Chatv2 = props => {
         });
     }
   }, [chatType]);
-  const validateProductStatus = () => {
-    const {
-      userToken,
-      // string
-      id,
-      // number
-      version,
-      retailerId,
-      // number
-      status,
-      orderId
-    } = chatData;
-    if (!isValidGeneral(userToken, id)) return;
-
-    // validar el ID de la cadena asociada al producto en la OT
+
+  var validateProductStatus = function validateProductStatus() {
+    var userToken = chatData.userToken,
+        id = chatData.id,
+        version = chatData.version,
+        retailerId = chatData.retailerId,
+        status = chatData.status,
+        orderId = chatData.orderId;
+    if (!isValidGeneral(userToken, id)) return; // validar el ID de la cadena asociada al producto en la OT
+
     if (!(0, _utils.isValidNaturalNumber)(retailerId)) {
       setDataError("La cadena relacionada al producto no es válida");
       return;
-    }
+    } // validar el ID de la version asociada al producto en la OT
+
 
-    // validar el ID de la version asociada al producto en la OT
     if (!(0, _utils.isValidNaturalNumber)(version)) {
       setDataError("La versión del producto no es válida");
       return;
     }
+
     if (orderId && !(0, _utils.isValidNaturalNumber)(orderId)) {
       setDataError("La orden del producto no es válida");
       return;
     }
+
     setData({
-      userToken,
-      id,
-      version,
-      retailerId,
-      orderId,
-      status
+      userToken: userToken,
+      id: id,
+      version: version,
+      retailerId: retailerId,
+      orderId: orderId,
+      status: status
     });
   };
-  const isValidGeneral = (userToken, id) => {
+
+  var isValidGeneral = function isValidGeneral(userToken, id) {
     // validar token del user
     if ((0, _utils.isStringEmpty)(userToken)) {
       setDataError("El token del usuario no es valido");
       return false;
-    }
-    // validar ID del producto
+    } // validar ID del producto
+
+
     if (!(0, _utils.isValidNaturalNumber)(id)) {
       setDataError("El ID del producto no es valido");
       return false;
     }
+
     return true;
-  };
+  }; // validar props que se requieren para el tipo de Chatv2 "order_product"
+
+
+  var validateChatOrderProduct = function validateChatOrderProduct() {
+    var userToken = chatData.userToken,
+        id = chatData.id,
+        orderId = chatData.orderId,
+        retailerId = chatData.retailerId;
+    if (!isValidGeneral(userToken, id)) return; // validar el ID de la OT en donde se encuentra el producto
 
-  // validar props que se requieren para el tipo de Chatv2 "order_product"
-  const validateChatOrderProduct = () => {
-    const {
-      userToken,
-      // string
-      id,
-      // number
-      orderId,
-      // number
-      retailerId // number
-    } = chatData;
-    if (!isValidGeneral(userToken, id)) return;
-
-    // validar el ID de la OT en donde se encuentra el producto
     if (!(0, _utils.isValidNaturalNumber)(orderId)) {
       setDataError("El ID de la orden del producto no es valido");
       return;
-    }
-    // validar el ID de la cadena asociada al producto en la OT
+    } // validar el ID de la cadena asociada al producto en la OT
+
+
     if (!(0, _utils.isValidNaturalNumber)(retailerId)) {
       setDataError("La cadena relacionada al producto no es valida");
       return;
     }
+
     setData({
-      userToken,
-      id,
-      orderId,
-      retailerId
+      userToken: userToken,
+      id: id,
+      orderId: orderId,
+      retailerId: retailerId
     });
-  };
+  }; // validar props que se requieren para el tipo de Chatv2 "merchants_product"
+
+
+  var validateChatMerchantProduct = function validateChatMerchantProduct() {
+    var userToken = chatData.userToken,
+        id = chatData.id,
+        version = chatData.version;
+    if (!isValidGeneral(userToken, id)) return; // validar la version del producto
 
-  // validar props que se requieren para el tipo de Chatv2 "merchants_product"
-  const validateChatMerchantProduct = () => {
-    const {
-      userToken,
-      // string
-      id,
-      // number
-      version // number
-    } = chatData;
-    if (!isValidGeneral(userToken, id)) return;
-
-    // validar la version del producto
     if (!(0, _utils.isValidNaturalNumber)(version)) {
       setDataError("La version del producto no es valida");
       return;
     }
+
     setData({
-      userToken,
-      id,
-      version
+      userToken: userToken,
+      id: id,
+      version: version
     });
-  };
+  }; // validar props que se requieren para el tipo de Chatv2 "ticket"
+
+
+  var validateChatTicket = function validateChatTicket() {
+    var currentUser = chatData.currentUser,
+        id = chatData.id,
+        statusTicket = chatData.statusTicket,
+        ticketOwnerUserId = chatData.ticketOwnerUserId; // validar el token del usuario conectado
 
-  // validar props que se requieren para el tipo de Chatv2 "ticket"
-  const validateChatTicket = () => {
-    const {
-      currentUser /* {
-                  token, // string
-                  id: number ,
-                  companyId: number , 
-                  isUserTech: boolean ,
-                  } */,
-      id,
-      // number
-      statusTicket,
-      // (string) "IN_PROGRESS" | "PENDING" | "COMPLETED"
-      ticketOwnerUserId // number
-    } = chatData;
-    // validar el token del usuario conectado
     if ((0, _utils.isStringEmpty)(currentUser === null || currentUser === void 0 ? void 0 : currentUser.token)) {
       setDataError("Tu identificación de usuario no fue especificado");
       return;
-    }
-    // validar si ID del usuario conectado
+    } // validar si ID del usuario conectado
+
+
     if (!(0, _utils.isValidNaturalNumber)(currentUser === null || currentUser === void 0 ? void 0 : currentUser.id)) {
       setDataError("Tu ID de usuario no fue especificado");
       return;
-    }
-    // validar si ID de la compañia del usuario conectado
+    } // validar si ID de la compañia del usuario conectado
+
+
     if (!(0, _utils.isValidNaturalNumber)(currentUser === null || currentUser === void 0 ? void 0 : currentUser.companyId)) {
       setDataError("El ID de tu compañia no fue especificado");
       return;
-    }
-    // validar si el usuario conectado es de tecnologia o no
+    } // validar si el usuario conectado es de tecnologia o no
+
+
     if (![false, true].includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser.isUserTech)) {
       setDataError("Tu tipo de usuario no fue especificado");
       return;
-    }
-    // validar ID del ticket
+    } // validar ID del ticket
+
+
     if (!(0, _utils.isValidNaturalNumber)(id)) {
       setDataError("El ID del ticket no es valido");
       return;
-    }
-    // validar ID del usuario que creó el ticket
+    } // validar ID del usuario que creó el ticket
+
+
     if (!(0, _utils.isValidNaturalNumber)(ticketOwnerUserId)) {
       setDataError("El ID del usuario al que le pertenece el ticket no es valido");
       return;
-    }
-    // validar el status del Chatv2
+    } // validar el status del Chatv2
+
+
     if (!["IN_PROGRESS", "PENDING", "COMPLETED"].includes(statusTicket)) {
       setDataError("El estatus del ticket no es valido");
       return;
     }
-    let statusChat = "open";
-    if (statusTicket === "COMPLETED") statusChat = "closed";
 
-    // convertir user TECH a NORMAL si es el propietario del ticket
-    let isUserTech = currentUser.isUserTech;
+    var statusChat = "open";
+    if (statusTicket === "COMPLETED") statusChat = "closed"; // convertir user TECH a NORMAL si es el propietario del ticket
+
+    var isUserTech = currentUser.isUserTech;
+
     if (isUserTech && currentUser.id === ticketOwnerUserId) {
       isUserTech = false;
     }
+
     setData({
-      currentUser: {
-        ...currentUser,
-        isUserTech
-      },
-      id,
-      statusChat
+      currentUser: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, currentUser), {}, {
+        isUserTech: isUserTech
+      }),
+      id: id,
+      statusChat: statusChat
     });
   };
-  const setDataError = errorDetail => {
+
+  var setDataError = function setDataError(errorDetail) {
     setData({
       code: 404,
       message: "No se especificaron algunos datos requeridos para el tipo de Chatv2 \"".concat(chatType, "\""),
-      errorDetail
+      errorDetail: errorDetail
     });
   };
+
   if ((chatContainerType === null || chatContainerType === void 0 ? void 0 : chatContainerType.toLowerCase()) === "fixed") {
     /* Chatv2 tipo fixed */
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerFixed, {
@@ -253,7 +269,7 @@ const Chatv2 = props => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
         borderType: "circle",
         className: "container-btn-popUpChat boton-ch",
-        onClick: () => {
+        onClick: function onClick() {
           setShowPopUpChat(!showPopUpChat);
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerBtnPopUpChat, {
@@ -274,7 +290,7 @@ const Chatv2 = props => {
             showPopUpChat: showPopUpChat,
             showBtnClose: true,
             ticketCompany: ticketCompany,
-            onClickBtnClose: () => {
+            onClickBtnClose: function onClickBtnClose() {
               setShowPopUpChat(false);
             },
             activeRetailer: props.activeRetailer || {
@@ -286,4 +302,5 @@ const Chatv2 = props => {
     });
   }
 };
+
 exports.Chatv2 = Chatv2;