contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +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;
+
+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

@@ -0,0 +1,96 @@
+"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 = {
+  title: "Components/organisms/Chat/Header",
+  component: _index.Header
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Header, (0, _objectSpread2.default)({}, args));
+}; // companies de prueba multiple
+
+
+var multipleCompanies = {
+  100: {
+    name: "Fábrica",
+    statusChat: "enabled"
+  },
+  200: {
+    name: "Proveedor",
+    statusChat: "current"
+  },
+  300: {
+    name: "Cadena",
+    statusChat: "disabled"
+  }
+};
+var twoCompanies = {
+  100: {
+    name: "Fábrica",
+    statusChat: "enabled"
+  },
+  200: {
+    name: "Proveedor",
+    statusChat: "current"
+  }
+};
+var headerChatMultiple = Template.bind({});
+exports.headerChatMultiple = headerChatMultiple;
+headerChatMultiple.args = {
+  showChatsList: false,
+  multipleCompanies: true,
+  chatCompany: {
+    id: 101,
+    name: "The Home Depot",
+    src: ""
+  },
+  onClickBtnChooseChat: function onClickBtnChooseChat() {
+    console.log("showAllChats:", true);
+  },
+  onClickBtnClose: function onClickBtnClose() {
+    console.log("click en boton X");
+  }
+};
+var headerChatSimple = Template.bind({});
+exports.headerChatSimple = headerChatSimple;
+headerChatSimple.args = {
+  showChatsList: false,
+  multipleCompanies: false,
+  chatCompany: {
+    id: 101,
+    name: "The Home Depot",
+    src: ""
+  },
+  onClickBtnChooseChat: function onClickBtnChooseChat() {
+    console.log("showAllChats:", true);
+  },
+  onClickBtnClose: function onClickBtnClose() {
+    console.log("click en boton X");
+  }
+};
+var headerChatEmpty = Template.bind({});
+exports.headerChatEmpty = headerChatEmpty;
+headerChatEmpty.args = {
+  showChatsList: false,
+  multipleCompanies: true,
+  onClickBtnChooseChat: function onClickBtnChooseChat() {
+    console.log("showAllChats:", true);
+  },
+  onClickBtnClose: function onClickBtnClose() {
+    console.log("click en boton X");
+  }
+};

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

@@ -0,0 +1,83 @@
+"use strict";
+
+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");
+
+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, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+          className: "icon-chooseChat",
+          type: "pink",
+          borderType: "circle",
+          size: 10,
+          icon: _freeSolidSvgIcons.faComments
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "title",
+          children: " Todos los chats "
+        })]
+      }) : chatCompany && chatCompany.id && chatCompany.name && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
+          className: "logoCompany",
+          width: "24px",
+          sizeLoading: 20,
+          colorLoading: undefined,
+          src: chatCompany.src,
+          componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "icon-logoCompany",
+            type: "white",
+            borderType: "circle",
+            size: 12,
+            icon: _freeSolidSvgIcons.faImage
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+          className: "title",
+          children: [" ", chatCompany.name, " "]
+        }), multipleCompanies && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          className: "btn-chooseChat",
+          type: "pink",
+          size: 10,
+          borderType: "circle",
+          icon: _freeSolidSvgIcons.faComments,
+          onClick: function onClick(event) {
+            return onClickBtnChooseChat && onClickBtnChooseChat();
+          }
+        })]
+      }), showBtnClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        className: "btn-X",
+        type: "white",
+        size: 11,
+        borderType: "circle",
+        icon: _freeSolidSvgIcons.faClose,
+        onClick: function onClick(event) {
+          return onClickBtnClose && onClickBtnClose();
+        }
+      })]
+    })
+  });
+};
+
+exports.Header = Header;

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

@@ -0,0 +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;
+
+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

@@ -0,0 +1,306 @@
+"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");
+
+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,
+          message: "El tipo de Chatv2 especificado \"".concat(chatType, "\" no es valido"),
+          errorDetail: ""
+        });
+    }
+  }, [chatType]);
+
+  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
+
+
+    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: userToken,
+      id: id,
+      version: version,
+      retailerId: retailerId,
+      orderId: orderId,
+      status: status
+    });
+  };
+
+  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
+
+
+    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
+
+    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
+
+
+    if (!(0, _utils.isValidNaturalNumber)(retailerId)) {
+      setDataError("La cadena relacionada al producto no es valida");
+      return;
+    }
+
+    setData({
+      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
+
+    if (!(0, _utils.isValidNaturalNumber)(version)) {
+      setDataError("La version del producto no es valida");
+      return;
+    }
+
+    setData({
+      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
+
+    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
+
+
+    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
+
+
+    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
+
+
+    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
+
+
+    if (!(0, _utils.isValidNaturalNumber)(id)) {
+      setDataError("El ID del ticket no es valido");
+      return;
+    } // 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
+
+
+    if (!["IN_PROGRESS", "PENDING", "COMPLETED"].includes(statusTicket)) {
+      setDataError("El estatus del ticket no es valido");
+      return;
+    }
+
+    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: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, currentUser), {}, {
+        isUserTech: isUserTech
+      }),
+      id: id,
+      statusChat: statusChat
+    });
+  };
+
+  var setDataError = function setDataError(errorDetail) {
+    setData({
+      code: 404,
+      message: "No se especificaron algunos datos requeridos para el tipo de Chatv2 \"".concat(chatType, "\""),
+      errorDetail: errorDetail
+    });
+  };
+
+  if ((chatContainerType === null || chatContainerType === void 0 ? void 0 : chatContainerType.toLowerCase()) === "fixed") {
+    /* Chatv2 tipo fixed */
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerFixed, {
+      className: classNameContainerFixed,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentChat.ContentChat, {
+        chatType: chatType === null || chatType === void 0 ? void 0 : chatType.toLowerCase(),
+        chatContainerType: "fixed",
+        dataChat: data,
+        showBtnClose: false,
+        ticketCompany: ticketCompany,
+        activeRetailer: props.activeRetailer || {
+          id: retailerId
+        }
+      })
+    });
+  } else {
+    /* Chatv2 tipo popUp */
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        borderType: "circle",
+        className: "container-btn-popUpChat boton-ch",
+        onClick: function onClick() {
+          setShowPopUpChat(!showPopUpChat);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerBtnPopUpChat, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            class: "iconos-out iconos-grises",
+            children: "forum"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
+        direction: "left",
+        in: showPopUpChat,
+        timeout: 400,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerPopUp, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentChat.ContentChat, {
+            chatType: chatType === null || chatType === void 0 ? void 0 : chatType.toLowerCase(),
+            chatContainerType: "popUp",
+            dataChat: data,
+            showPopUpChat: showPopUpChat,
+            showBtnClose: true,
+            ticketCompany: ticketCompany,
+            onClickBtnClose: function onClickBtnClose() {
+              setShowPopUpChat(false);
+            },
+            activeRetailer: props.activeRetailer || {
+              id: retailerId
+            }
+          })
+        })
+      })]
+    });
+  }
+};
+
+exports.Chatv2 = Chatv2;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerPopUp = exports.ContainerFixed = exports.ContainerBtnPopUpChat = 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;
+
+// Container para chat fixed
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .boton-ch{\n    min-width: 34px;\n    min-height: 34px;\n    padding:0;\n  }\n"]))); // Container para chat fixed
+
+
+exports.Container = Container;
+
+var ContainerFixed = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  max-width: 550px;\n  min-width: 325px;\n  height: 100%;\n  flex-grow: 2;\n  background-color: white;\n  border: 1px solid #f0f0f0;\n  z-index: 1000;\n  padding: 0px;\n  @media (max-width: 1024px) {\n    width: auto;\n    max-width: 100%;\n  }\n  @media (max-width: 600px) {\n    width: 90%;\n    min-width: 300px;\n  }\n"])));
+
+exports.ContainerFixed = ContainerFixed;
+
+var ContainerBtnPopUpChat = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n  height: 34px;\n  width: 34px;\n  border:1px solid ", ";\n\n  .container-btn-popUpChat {\n    height: inherit;\n    width: inherit;\n    overflow: hidden;\n    min-width: 34px;\n  min-height:34px;\n  }\n  cursor: pointer;\n@font-face {\n  font-family: \"Material Symbols Outlined\";\n  font-style: normal;\n  font-weight: 100 700;\n  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n    format(\"woff2\");\n}\n\n.iconos-out {\n  font-family: \"Material Symbols Outlined\";\n  font-size: 18px;\n  //line-height: 1;\n  margin-top: 10px;\n}\n.iconos-out {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  #B64545;\n}\n.iconos-grises {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  ", ";\n}\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray);
+
+exports.ContainerBtnPopUpChat = ContainerBtnPopUpChat;
+
+var ContainerPopUp = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 20px;\n  right: 23px;\n  bottom: 20px;\n  box-shadow: 0px 2px 10px 0px #00000073;\n  z-index: 1000;\n  width: calc(100% - 50px);\n  max-width: 550px;\n  min-width: 325px;\n  border-radius: 10px;\n  background: white;\n  padding: 0px;\n"])));
+
+exports.ContainerPopUp = ContainerPopUp;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CompleteServicesDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/CompleteServices",
+  component: _index.CompleteServices
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CompleteServices, (0, _objectSpread2.default)({}, args));
+};
+
+var CompleteServicesDefault = Template.bind({});
+exports.CompleteServicesDefault = CompleteServicesDefault;
+CompleteServicesDefault.args = {
+  activeRetailer: {
+    id: 34,
+    image: "https://content-management-images.s3.amazonaws.com/retailers/34.png",
+    name: "San Pablo",
+    services: ["AA", "AP", "AA"]
+  },
+  headerData: {
+    "orderId": 15275,
+    "status": "AA",
+    "datasheet_status": "AA",
+    "prio": "none",
+    "version": 3,
+    "description_status": "AA",
+    "images_status": "AA",
+    "brand": null,
+    "retailerOrder": 0,
+    "missing": {
+      "datasheet": null,
+      "descriptions": null,
+      "images": null
+    },
+    "services": {
+      "datasheets": 1,
+      "descriptions": 1,
+      "images": 1
+    },
+    "article": {
+      "category": "Abarrotes|Abarrotes Secos|Frutos Secos",
+      "company_name": "GRUPO BRAHMA",
+      "country": "México",
+      "id_category": "11",
+      "id_datasheet_especialist": 54,
+      "id_datasheet_facilitator": 52,
+      "id_description_especialist": 54,
+      "id_description_facilitator": 52,
+      "id_images_especialist": 55,
+      "id_images_facilitator": 53,
+      "id_order": 15275,
+      "id_article": 39485,
+      "id_auditor": 37,
+      "name": "Mix de nueces",
+      "timestamp": "2023-07-14T21:03:19.000Z",
+      "upc": "7543453453"
+    },
+    "retailers": [{
+      "id": 34,
+      "name": "San Pablo",
+      "services": ["AA", "AP", "AA"],
+      "image": "https://content-management-images.s3.amazonaws.com/retailers/34.png"
+    }],
+    "statusByRetailer": {
+      "34": {
+        "datasheet": "AA",
+        "description": "AA",
+        "images": "AA"
+      }
+    },
+    "retailersAvailable": [{
+      "id": 34,
+      "name": "San Pablo"
+    }],
+    "categoryName": "Abarrotes|Abarrotes Secos|Frutos Secos",
+    "upc": "7543453453",
+    "id_article": 39485,
+    "id_order": 15275
+  },
+  showApproveRejectAll: true,
+  showValidationButtons: true,
+  text: "Descripción",
+  showValidation: true,
+  missingData: 1
+};