contentoh-components-library 21.3.5 → 21.3.7

package/dist/components/organisms/Chat/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"])), _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/Chat/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/Chat/Header/index.js

@@ -0,0 +1,84 @@
+"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; //console.log(chatCompany);
+
+  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/Chat/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/Chat/index.js

@@ -0,0 +1,327 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chat = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+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 Chat = function Chat(props) {
+  var chatType = props.chatType,
+      chatContainerType = props.chatContainerType,
+      chatData = props.chatData,
+      classNameContainerFixed = props.classNameContainerFixed;
+
+  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];
+
+  (0, _react.useEffect)(function () {
+    switch (chatType) {
+      case "merchant_product":
+        validateChatMerchantProduct();
+        break;
+
+      case "order_product":
+        validateChatOrderProduct();
+        break;
+
+      case "ticket":
+        validateChatTicket();
+        break;
+
+      default:
+        setData({
+          code: 404,
+          message: "El tipo de chat especificado \"".concat(chatType, "\" no es valido"),
+          errorDetail: ""
+        });
+    }
+  }, [chatType]); // validar props que se requieren para el tipo de chat "order_product"
+
+  var validateChatOrderProduct = function validateChatOrderProduct() {
+    var userToken = chatData.userToken,
+        id = chatData.id,
+        orderId = chatData.orderId,
+        retailerId = chatData.retailerId; // validar token del user
+
+    if ((0, _utils.isStringEmpty)(userToken)) {
+      setDataError("El token del usuario no es valido");
+      return;
+    } // validar ID del producto
+
+
+    if (!(0, _utils.isValidNaturalNumber)(id)) {
+      setDataError("El ID del producto no es valido");
+      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 chat "merchants_product"
+
+
+  var validateChatMerchantProduct = function validateChatMerchantProduct() {
+    var userToken = chatData.userToken,
+        id = chatData.id,
+        version = chatData.version; // validar token del user
+
+    if ((0, _utils.isStringEmpty)(userToken)) {
+      setDataError("El token del usuario no es valido");
+      return;
+    } // validar ID del producto
+
+
+    if (!(0, _utils.isValidNaturalNumber)(id)) {
+      setDataError("El ID del producto no es valido");
+      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 chat "ticket"
+
+
+  var validateChatTicket = function validateChatTicket() {
+    var currentUser = chatData.currentUser,
+        id = chatData.id,
+        statusTicket = chatData.statusTicket,
+        ticketOwnerUserId = chatData.ticketOwnerUserId; // 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 ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.isUserTech) === undefined || typeof currentUser.isUserTech !== "boolean") {
+      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 chat
+
+
+    if ((0, _utils.isStringEmpty)(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 chat \"".concat(chatType, "\""),
+      errorDetail: errorDetail
+    });
+  };
+  /*
+  const createItem = async (valueType, valueInput) => {
+    clearTimeout(processUpdateID);
+    let currentItems = items.slice();
+    let paramsBody = {};
+    let paramsHeaders = {};
+    switch (chatType.toLowerCase()) {
+      case "order_product": //------------------------------------------
+        paramsBody = {
+          articleId: articleId,
+          valueType: valueType,
+          value: valueInput,
+          isOrderProduct: "1",
+          orderId: orderId,
+          retailerId: retailerId,
+        };
+        paramsHeaders = { Authorization: userToken };
+        break;
+       default:
+        // merchants_products--------------------------------------
+        paramsBody = {
+          articleId: articleId,
+          articleVersion: articleVersion,
+          valueType: valueType,
+          value: valueInput,
+          isOrderProduct: "0",
+        };
+        paramsHeaders = { Authorization: userToken };
+    }
+    const response = await fetchPOST(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsBody,
+      paramsHeaders
+    );
+    if (!response.body) {
+      let itemType =
+        valueType === "txt"
+          ? "el mensaje"
+          : valueType === "img"
+          ? "la imagen"
+          : "el archivo";
+      showModalAlert(
+        `No fue posible agregar ${itemType} en el chat`,
+        response.errorDetail,
+        "error"
+      );
+      setItems(currentItems);
+    } else {
+      if (currentItems?.length == 0) {
+        // console.log("NUEVO ITEM <> NUEVO INITIAL");
+        await getInitial();
+      } else {
+        // console.log("NUEVO ITEM <> NUEVO UPDATE");
+        await getUpdate();
+      }
+    }
+  };
+  */
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (chatContainerType === null || chatContainerType === void 0 ? void 0 : chatContainerType.toLowerCase()) === "fixed" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__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
+        })
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerBtnPopUpChat, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          className: "container-btn-popUpChat",
+          type: "whiteS2",
+          size: 14,
+          borderType: "circle",
+          icon: _freeSolidSvgIcons.faComments,
+          onClick: /*#__PURE__*/function () {
+            var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      setShowPopUpChat(!showPopUpChat);
+
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            }));
+
+            return function (_x) {
+              return _ref.apply(this, arguments);
+            };
+          }()
+        })
+      }), /*#__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,
+            showBtnClose: true,
+            onClickBtnClose: function onClickBtnClose() {
+              setShowPopUpChat(false);
+            }
+          })
+        })
+      })]
+    })
+  });
+};
+
+exports.Chat = Chat;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerPopUp = exports.ContainerFixed = exports.ContainerBtnPopUpChat = 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;
+
+// Container para chat fixed
+var ContainerFixed = _styledComponents.default.div(_templateObject || (_templateObject = (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"])));
+
+exports.ContainerFixed = ContainerFixed;
+
+var ContainerBtnPopUpChat = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n  height: 34px;\n  width: 34px;\n\n  .container-btn-popUpChat {\n    height: inherit;\n    width: inherit;\n    overflow: hidden;\n  }\n"])));
+
+exports.ContainerBtnPopUpChat = ContainerBtnPopUpChat;
+
+var ContainerPopUp = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (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/FullProductNameHeader/index.js

@@ -59,6 +59,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductNameHeader.ProductNameHeader, {
       productName: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article = headerData.article) === null || _headerData$article === void 0 ? void 0 : _headerData$article.name) || (headerData === null || headerData === void 0 ? void 0 : headerData.name),
       statusType: (headerData === null || headerData === void 0 ? void 0 : headerData.version_status) || (headerData === null || headerData === void 0 ? void 0 : headerData.status) || (headerData === null || headerData === void 0 ? void 0 : headerData.article_status),
+      percentRequired: percent,
       percent: percent === null || percent === void 0 ? void 0 : percent.toFixed(0),
       priority: headerData === null || headerData === void 0 ? void 0 : headerData.prio,
       date: new Date((headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.timestamp) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp)).toLocaleDateString()

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalWithButtons = exports.modalDefault = exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Modal",
+  component: _index.Modal,
+  argTypes: {
+    icon: {
+      options: [undefined, "error", "warning", "success", "info"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Modal, (0, _objectSpread2.default)({}, args));
+};
+
+var modalDefault = Template.bind({});
+exports.modalDefault = modalDefault;
+modalDefault.args = {
+  show: false,
+  title: "Titulo del modal",
+  icon: undefined,
+  message: "descripcion amplia sobre el componente \n\tmodal white para saber como se ven varias lineas\n\tde codigo"
+};
+var modalWithButtons = Template.bind({});
+exports.modalWithButtons = modalWithButtons;
+modalWithButtons.args = {
+  show: false,
+  title: "Titulo del modal",
+  icon: undefined,
+  message: "descripcion amplia sobre el componente \n\tmodal white para saber como se ven varias lineas\n\tde codigo",
+  buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+    type: "white",
+    label: "Cancelar",
+    size: 12,
+    onClick: function onClick(event) {
+      alert("cancelar");
+    }
+  }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+    type: "pink",
+    label: "Aceptar",
+    size: 12,
+    onClick: function onClick(event) {
+      alert("aceptar");
+    }
+  }, "btn-Aceptar")]
+};