contentoh-components-library 21.2.105 → 21.3.0

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

@@ -0,0 +1,984 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Footer = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _awsSdk = _interopRequireDefault(require("aws-sdk"));
+
+var _uuid = require("uuid");
+
+var _Image = require("../../../atoms/Image");
+
+var _ImageTooltip = require("../../../molecules/ImageTooltip");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _CustomIcon = require("../../../atoms/CustomIcon");
+
+var _ButtonV = require("../../../atoms/ButtonV2");
+
+var _IconFile = require("../../../atoms/IconFile");
+
+var _Modal = require("../../Modal");
+
+var _Tooltip = require("../../../atoms/Tooltip");
+
+var _material = require("@mui/material");
+
+var _ButtonFileChooser = require("../../../atoms/ButtonFileChooser");
+
+var _react2 = require("swiper/react");
+
+require("swiper/swiper.min.css");
+
+var _swiper = require("swiper");
+
+var _utils = require("../../../../global-files/utils");
+
+var _InputText = require("../../../atoms/InputText");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+// carrousel
+//import "swiper/modules/free-mode/free-mode.min.css";
+var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+var REGION = "us-east-1";
+
+_awsSdk.default.config.update({
+  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
+  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3
+});
+
+var myBucket = new _awsSdk.default.S3({
+  params: {
+    Bucket: S3_BUCKET
+  },
+  region: REGION
+});
+
+var Footer = function Footer(props) {
+  var chatType = props.chatType,
+      dataChat = props.dataChat,
+      statusChat = props.statusChat,
+      messageDisabled = props.messageDisabled,
+      createItemsChat = props.createItemsChat,
+      errorUpdate = props.errorUpdate;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      valueInputMessage = _useState2[0],
+      setValueInputMessage = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      filesPreview = _useState4[0],
+      setFilesPreview = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      filesJsxPreview = _useState6[0],
+      setFilesJsxPreview = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      btnSendFilesLoading = _useState8[0],
+      setBtnSendFilesLoading = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      btnSendMessageLoading = _useState10[0],
+      setBtnSendMessageLoading = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      btnChooserFileDisabled = _useState12[0],
+      setBtnChooserFileDisabled = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      inputMessageDisabled = _useState14[0],
+      setInputMessageDisabled = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      openPreview = _useState16[0],
+      setOpenPreview = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      toggleFocusInputMessage = _useState18[0],
+      setToggleFocusInputMessage = _useState18[1];
+
+  var _useState19 = (0, _react.useState)({
+    show: false,
+    fileName: ""
+  }),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      tooltipFileName = _useState20[0],
+      setTooltipFileName = _useState20[1];
+
+  var _useState21 = (0, _react.useState)({
+    show: false,
+    title: "",
+    message: "",
+    errorInputMessage: false
+  }),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      modalAlert = _useState22[0],
+      setModalAlert = _useState22[1];
+
+  var containerRef = (0, _react.useRef)();
+  var refInputTextMessage = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    //console.log("filesPreview: ", filesPreview.slice());
+    setTooltipFileName({
+      show: false,
+      fileName: ""
+    });
+    renderFilesPreview();
+  }, [filesPreview]);
+  (0, _react.useEffect)(function () {
+    if (filesJsxPreview.length) setOpenPreview(true);else setOpenPreview(false);
+  }, [filesJsxPreview]);
+  (0, _react.useEffect)(function () {
+    refInputTextMessage.current && refInputTextMessage.current.focus();
+  }, [toggleFocusInputMessage]);
+
+  var sendFilesPreview = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var files, customFiles, fileUploadRequests, _iterator, _step, file, errorMessage, fullBase64, dataBuffer, fileKey, today, paramsCreate, responseAWS, items, index, _file, valueItem, imgSize, responseError, failedFiles, errorDetailFiles;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!createItemsChat) {
+                _context.next = 89;
+                break;
+              }
+
+              files = filesPreview.slice();
+
+              if (files.length) {
+                _context.next = 5;
+                break;
+              }
+
+              setModalAlert({
+                show: true,
+                title: "No hay ningun archivo o imagen seleccionado para enviar",
+                message: "Por favor, cargue los archivos o imagenes que quiera enviar al chat",
+                errorInputMessage: false
+              });
+              return _context.abrupt("return");
+
+            case 5:
+              disableSecondaryContainer(true); // subir archivos a AWS
+
+              customFiles = [];
+              _context.prev = 7;
+              //console.log("files:", files);
+              fileUploadRequests = []; //console.log(dataChat);
+
+              _iterator = (0, _createForOfIteratorHelper2.default)(files);
+              _context.prev = 10;
+
+              _iterator.s();
+
+            case 12:
+              if ((_step = _iterator.n()).done) {
+                _context.next = 39;
+                break;
+              }
+
+              file = _step.value;
+              errorMessage = void 0; // obtener base64
+
+              _context.next = 17;
+              return (0, _utils.getBase64)(file);
+
+            case 17:
+              fullBase64 = _context.sent;
+
+              if (!fullBase64) {
+                errorMessage = "No se pudo decodificar el archivo o imagen";
+              } // obtener buffer
+
+
+              dataBuffer = void 0;
+              if (!errorMessage) dataBuffer = (0, _utils.getDataBuffer)((0, _utils.getDataBase64)(fullBase64));
+
+              if (!dataBuffer) {
+                errorMessage = "No se pudo decodificar el archivo o imagen";
+              } // obtener la key
+
+
+              fileKey = "chat/";
+              _context.t0 = chatType;
+              _context.next = _context.t0 === "merchant_product" ? 26 : _context.t0 === "order_product" ? 28 : _context.t0 === "ticket" ? 30 : 32;
+              break;
+
+            case 26:
+              if ((0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id) && (0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.version)) {
+                fileKey += "merchantArticle/".concat(dataChat.id, "-").concat(dataChat.version, "/");
+              } else {
+                errorMessage = "El ID o la version del producto no es valido";
+              }
+
+              return _context.abrupt("break", 33);
+
+            case 28:
+              if ((0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id) && (0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.version)) {
+                fileKey += "orderArticle/".concat(dataChat.id, "-").concat(dataChat.version, "/");
+              } else {
+                errorMessage = "El ID o la version del producto no es valido";
+              }
+
+              return _context.abrupt("break", 33);
+
+            case 30:
+              if ((0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id)) {
+                fileKey += "ticket/".concat(dataChat.id, "/");
+              } else {
+                errorMessage = "El ID del ticket no es valido";
+              }
+
+              return _context.abrupt("break", 33);
+
+            case 32:
+              errorMessage = "El tipo de chat no se especifico de manera correcta";
+
+            case 33:
+              if (!errorMessage) {
+                today = new Date();
+                fileKey += "".concat((0, _uuid.v4)(), "-").concat(today.getTime(), ".").concat((0, _utils.getFileExtension)(file.name));
+              } else {
+                fileKey = undefined;
+              } //console.log("fileKey: ", fileKey);
+              // enviar file a AWS
+
+
+              customFiles.push({
+                itemType: file.type.split("/")[0] == "image" ? "img" : "file",
+                key: fileKey,
+                errorOwn: errorMessage
+              });
+              paramsCreate = {
+                ACL: "public-read",
+                Body: dataBuffer,
+                Bucket: S3_BUCKET,
+                Key: fileKey
+              };
+              fileUploadRequests.push(myBucket.putObject(paramsCreate).promise());
+
+            case 37:
+              _context.next = 12;
+              break;
+
+            case 39:
+              _context.next = 44;
+              break;
+
+            case 41:
+              _context.prev = 41;
+              _context.t1 = _context["catch"](10);
+
+              _iterator.e(_context.t1);
+
+            case 44:
+              _context.prev = 44;
+
+              _iterator.f();
+
+              return _context.finish(44);
+
+            case 47:
+              _context.next = 49;
+              return Promise.allSettled(fileUploadRequests);
+
+            case 49:
+              responseAWS = _context.sent;
+              console.log("responseAWS:", responseAWS);
+              responseAWS.forEach(function (responseFile, index) {
+                if (responseFile.status === "rejected") {
+                  customFiles[index].errorAWS = responseFile.reason.message;
+                  customFiles[index].uploaded = false;
+                } else {
+                  customFiles[index].uploaded = true;
+                }
+              }); //console.log("customFiles:", customFiles);
+
+              _context.next = 59;
+              break;
+
+            case 54:
+              _context.prev = 54;
+              _context.t2 = _context["catch"](7);
+              disableSecondaryContainer(false);
+              setModalAlert({
+                show: true,
+                title: "hubo un problema al subir los archivos al chat",
+                message: "".concat(_context.t2.message, "\n          Reporta esto a TI"),
+                errorInputMessage: false
+              });
+              return _context.abrupt("return");
+
+            case 59:
+              // obtener las keys de los files subidos
+              items = [];
+              index = 0;
+
+            case 61:
+              if (!(index < customFiles.length)) {
+                _context.next = 75;
+                break;
+              }
+
+              _file = customFiles[index];
+
+              if (!_file.uploaded) {
+                _context.next = 72;
+                break;
+              }
+
+              valueItem = {
+                key: _file.key,
+                name: files[index].name
+              }; // caso imagen -> obtener width y height
+
+              if (!(_file.itemType === "img")) {
+                _context.next = 70;
+                break;
+              }
+
+              _context.next = 68;
+              return (0, _utils.getImageSize)(files[index]);
+
+            case 68:
+              imgSize = _context.sent;
+
+              if (imgSize) {
+                valueItem.width = imgSize.width;
+                valueItem.height = imgSize.height;
+              }
+
+            case 70:
+              console.log("valueItemFile:", valueItem);
+              items.push({
+                type: _file.itemType,
+                value: JSON.stringify(valueItem)
+              });
+
+            case 72:
+              index++;
+              _context.next = 61;
+              break;
+
+            case 75:
+              if (!items.length) {
+                _context.next = 83;
+                break;
+              }
+
+              _context.next = 78;
+              return createItemsChat(items);
+
+            case 78:
+              responseError = _context.sent;
+
+              if (!responseError) {
+                _context.next = 83;
+                break;
+              }
+
+              setModalAlert({
+                show: true,
+                title: responseError.message,
+                message: responseError.errorDetail,
+                errorInputMessage: false
+              });
+              disableSecondaryContainer(false);
+              return _context.abrupt("return");
+
+            case 83:
+              // obtener los errores de los files no subidos a AWS
+              failedFiles = [];
+              errorDetailFiles = "";
+              customFiles.forEach(function (file, index) {
+                if (!file.uploaded) {
+                  if (failedFiles.length === 0) {
+                    errorDetailFiles = "".concat(files[index].name, ":\n            Error: ").concat(file.errorOwn ? file.errorOwn : file.errorAWS);
+                  } else {
+                    errorDetailFiles += "\n\n".concat(files[index].name, ":\n            Error: ").concat(file.errorOwn ? file.errorOwn : file.errorAWS);
+                  }
+
+                  failedFiles.push(files[index]);
+                }
+              });
+
+              if (failedFiles.length) {
+                setModalAlert({
+                  show: true,
+                  title: "".concat(failedFiles.length, "/").concat(files.length, " archivos no fueron enviados al chat"),
+                  message: errorDetailFiles,
+                  errorInputMessage: false
+                });
+              } // actualizar filesPreview
+
+
+              disableSecondaryContainer(false);
+              setFilesPreview(failedFiles);
+
+            case 89:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[7, 54], [10, 41, 44, 47]]);
+    }));
+
+    return function sendFilesPreview() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var sendMessage = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var responseError;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!createItemsChat) {
+                _context2.next = 15;
+                break;
+              }
+
+              if (!(0, _utils.isStringEmpty)(valueInputMessage)) {
+                _context2.next = 5;
+                break;
+              }
+
+              setValueInputMessage("");
+              setModalAlert({
+                show: true,
+                title: "mensaje vacío",
+                message: "Por favor, especifica el mensaje que quieres enviar al chat",
+                errorInputMessage: true
+              });
+              return _context2.abrupt("return");
+
+            case 5:
+              setBtnSendMessageLoading(true);
+              setBtnChooserFileDisabled(true);
+              setInputMessageDisabled(true);
+              _context2.next = 10;
+              return createItemsChat([{
+                type: "message",
+                value: valueInputMessage.trim()
+              }]);
+
+            case 10:
+              responseError = _context2.sent;
+              setInputMessageDisabled(false);
+              setBtnSendMessageLoading(false);
+              setBtnChooserFileDisabled(false);
+
+              if (responseError) {
+                setModalAlert({
+                  show: true,
+                  title: responseError.message,
+                  message: responseError.errorDetail,
+                  errorInputMessage: true
+                });
+              } else {
+                setValueInputMessage("");
+                setToggleFocusInputMessage(function (prev) {
+                  return !prev;
+                });
+              }
+
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function sendMessage() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var disableSecondaryContainer = function disableSecondaryContainer() {
+    var disabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setBtnSendFilesLoading(disabled);
+    setBtnChooserFileDisabled(disabled);
+    setOpenPreview(!disabled);
+  };
+
+  var deleteFile = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(index) {
+      var newFiles;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              newFiles = filesPreview.slice();
+              newFiles.splice(index, 1);
+              setFilesPreview(newFiles);
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function deleteFile(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var renderFilesPreview = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var jsxFiles, _loop, index;
+
+      return _regenerator.default.wrap(function _callee5$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              jsxFiles = [];
+              _loop = /*#__PURE__*/_regenerator.default.mark(function _loop(index) {
+                var _file$type;
+
+                var file, fileType, base64;
+                return _regenerator.default.wrap(function _loop$(_context5) {
+                  while (1) {
+                    switch (_context5.prev = _context5.next) {
+                      case 0:
+                        file = filesPreview[index];
+                        fileType = (_file$type = file.type) === null || _file$type === void 0 ? void 0 : _file$type.split("/")[0];
+                        _context5.next = 4;
+                        return (0, _utils.getBase64)(file);
+
+                      case 4:
+                        base64 = _context5.sent;
+                        jsxFiles.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+                          className: "item-carrousel",
+                          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerItemCarrousel, {
+                            children: [fileType === "image" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
+                              width: "100%",
+                              className: "container-img",
+                              sizeLoading: 40,
+                              colorLoading: undefined,
+                              src: base64,
+                              componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+                                className: "icon-img",
+                                size: 60,
+                                icon: _freeSolidSvgIcons.faImage,
+                                type: "pink",
+                                transparent: true
+                              })
+                            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconFile.IconFile, {
+                              transparent: true,
+                              size: 60,
+                              ext: (0, _utils.getFileExtension)(file.name)
+                            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                              className: "container-delete",
+                              onMouseEnter: function onMouseEnter() {
+                                setTooltipFileName({
+                                  show: true,
+                                  fileName: file.name
+                                });
+                              },
+                              onMouseLeave: function onMouseLeave() {
+                                setTooltipFileName({
+                                  show: false,
+                                  fileName: ""
+                                });
+                              },
+                              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+                                className: "btn-delete",
+                                type: "white",
+                                label: "Eliminar",
+                                size: 8,
+                                borderType: "oval",
+                                icon: _freeSolidSvgIcons.faTrash,
+                                isLoading: undefined,
+                                onClick: /*#__PURE__*/function () {
+                                  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(event) {
+                                    return _regenerator.default.wrap(function _callee4$(_context4) {
+                                      while (1) {
+                                        switch (_context4.prev = _context4.next) {
+                                          case 0:
+                                            deleteFile(index);
+
+                                          case 1:
+                                          case "end":
+                                            return _context4.stop();
+                                        }
+                                      }
+                                    }, _callee4);
+                                  }));
+
+                                  return function (_x2) {
+                                    return _ref5.apply(this, arguments);
+                                  };
+                                }()
+                              })
+                            })]
+                          })
+                        }, "item-" + index));
+
+                      case 6:
+                      case "end":
+                        return _context5.stop();
+                    }
+                  }
+                }, _loop);
+              });
+              index = 0;
+
+            case 3:
+              if (!(index < filesPreview.length)) {
+                _context6.next = 8;
+                break;
+              }
+
+              return _context6.delegateYield(_loop(index), "t0", 5);
+
+            case 5:
+              index++;
+              _context6.next = 3;
+              break;
+
+            case 8:
+              setFilesJsxPreview(jsxFiles);
+
+            case 9:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee5);
+    }));
+
+    return function renderFilesPreview() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var onChangeFiles = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(selectedFiles) {
+      var newFiles;
+      return _regenerator.default.wrap(function _callee6$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              //console.log("selected files: ", selectedFiles);
+              newFiles = filesPreview.slice();
+              newFiles = newFiles.concat(selectedFiles);
+              setFilesPreview(newFiles);
+
+            case 3:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee6);
+    }));
+
+    return function onChangeFiles(_x3) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  var getErrorUpdate = function getErrorUpdate() {
+    if (errorUpdate !== null && errorUpdate !== void 0 && errorUpdate.startDate) {
+      var errorDetail = "Ultima actualización hace ";
+
+      if (errorUpdate !== null && errorUpdate !== void 0 && errorUpdate.lastDate) {
+        var msDif = errorUpdate.lastDate.getTime() - errorUpdate.startDate.getTime();
+        var minutes = Math.floor(msDif / 60000);
+        var hours = Math.floor(minutes / 60);
+
+        if (hours === 0) {
+          if (minutes === 0) errorDetail += "menos de 1 minuto";else if (minutes === 1) errorDetail += "1 minuto";else errorDetail += minutes + " minutos";
+        } else {
+          if (hours === 1) errorDetail += "1 hora con ";else errorDetail += hours + " horas con ";
+          if (minutes === 0) errorDetail += "menos de 1 minuto";else if (minutes === 1) errorDetail += "1 minuto";else errorDetail += minutes + " minutos";
+        }
+      } else {
+        errorDetail += "menos de 1 minuto";
+      } // retornar el icono
+
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "label-title",
+            children: "Chat desactualizado"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "label-detail",
+            children: errorDetail
+          })]
+        }),
+        className: "container-ErrorUpdate",
+        classNameTooltip: "tooltipErrorUpdate",
+        position: "topCenter",
+        addArrow: false,
+        transitionType: "zoom",
+        followCursor: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+          className: "icon-errorUpdate",
+          size: 15,
+          icon: _freeSolidSvgIcons.faExclamationTriangle,
+          type: "pink",
+          transparent: true
+        })
+      });
+    } else {
+      return null;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      ref: containerRef,
+      children: statusChat === "closed" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "container-chatDisabled",
+          children: [getErrorUpdate(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "label-chatDisabled",
+            children: messageDisabled
+          })]
+        })
+      }) : filesJsxPreview.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerMain, {
+          children: [getErrorUpdate(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputText.InputText, {
+            className: "input-itemMessage",
+            type: "gray",
+            transparent: true,
+            size: 13,
+            placeHolder: "Escribe aqu\xED...",
+            multiline: true,
+            maxRows: 5,
+            minRows: 1,
+            disabled: inputMessageDisabled,
+            text: valueInputMessage,
+            onChangeText: function onChangeText(newValue) {
+              return setValueInputMessage(newValue);
+            },
+            onEnter: /*#__PURE__*/function () {
+              var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(event) {
+                return _regenerator.default.wrap(function _callee7$(_context8) {
+                  while (1) {
+                    switch (_context8.prev = _context8.next) {
+                      case 0:
+                        _context8.next = 2;
+                        return sendMessage();
+
+                      case 2:
+                        return _context8.abrupt("return", _context8.sent);
+
+                      case 3:
+                      case "end":
+                        return _context8.stop();
+                    }
+                  }
+                }, _callee7);
+              }));
+
+              return function (_x4) {
+                return _ref7.apply(this, arguments);
+              };
+            }(),
+            refInputText: refInputTextMessage
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonFileChooser.ButtonFileChooser, {
+            className: "btn-chooserFiles",
+            type: "gray",
+            transparent: true,
+            size: 18,
+            disabled: btnChooserFileDisabled,
+            showIcon: true,
+            multipleFiles: true,
+            onChangeFiles: onChangeFiles
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+            className: "btn-sendMessage",
+            type: "pink",
+            size: 10,
+            borderType: "circle",
+            icon: _freeSolidSvgIcons.faArrowUp,
+            isLoading: btnSendMessageLoading,
+            onClick: /*#__PURE__*/function () {
+              var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(event) {
+                return _regenerator.default.wrap(function _callee8$(_context9) {
+                  while (1) {
+                    switch (_context9.prev = _context9.next) {
+                      case 0:
+                        _context9.next = 2;
+                        return sendMessage();
+
+                      case 2:
+                      case "end":
+                        return _context9.stop();
+                    }
+                  }
+                }, _callee8);
+              }));
+
+              return function (_x5) {
+                return _ref8.apply(this, arguments);
+              };
+            }()
+          })]
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          open: openPreview,
+          placement: "top-start",
+          arrow: false,
+          componentsProps: {
+            popper: {
+              className: "tooltip-previewFiles",
+              disablePortal: true
+            },
+            transition: {
+              timeout: 300
+            }
+          },
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            open: tooltipFileName.show,
+            placement: "top",
+            arrow: false,
+            followCursor: true,
+            TransitionComponent: _material.Fade,
+            componentsProps: {
+              popper: {
+                className: "tooltip-previewFileName",
+                disablePortal: true
+              },
+              transition: {
+                timeout: 300
+              }
+            },
+            title: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+              children: tooltipFileName.fileName
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "container-carrouselFiles",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+                spaceBetween: 5,
+                slidesPerView: "auto",
+                freeMode: true,
+                mousewheel: true,
+                keyboard: true,
+                modules: [_swiper.Mousewheel, _swiper.Keyboard, _swiper.FreeMode],
+                className: "carrousel-files",
+                children: filesJsxPreview
+              })
+            })
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerSecondary, {
+            children: [getErrorUpdate(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
+              direction: "left",
+              in: true,
+              timeout: 500,
+              container: containerRef.current,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonFileChooser.ButtonFileChooser, {
+                  className: "btn-chooserFiles",
+                  type: "gray",
+                  size: 17,
+                  borderType: "circle",
+                  showIcon: true,
+                  disabled: btnChooserFileDisabled,
+                  multipleFiles: true,
+                  onChangeFiles: onChangeFiles
+                })
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
+              direction: "up",
+              in: true,
+              timeout: 500,
+              container: containerRef.current,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "slide-btnSendFiles",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+                  className: "btn-sendFiles",
+                  type: "pink",
+                  label: "Enviar archivos",
+                  size: 12,
+                  borderType: "oval",
+                  loading: btnSendFilesLoading,
+                  isLoading: btnSendFilesLoading,
+                  onClick: /*#__PURE__*/function () {
+                    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(event) {
+                      return _regenerator.default.wrap(function _callee9$(_context10) {
+                        while (1) {
+                          switch (_context10.prev = _context10.next) {
+                            case 0:
+                              _context10.next = 2;
+                              return sendFilesPreview();
+
+                            case 2:
+                            case "end":
+                              return _context10.stop();
+                          }
+                        }
+                      }, _callee9);
+                    }));
+
+                    return function (_x6) {
+                      return _ref9.apply(this, arguments);
+                    };
+                  }()
+                })
+              })
+            })]
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      className: "container-modalAlert",
+      show: modalAlert.show,
+      title: modalAlert.title,
+      message: modalAlert.message,
+      icon: "info",
+      onClickBtnDefault: function onClickBtnDefault(event) {
+        setModalAlert(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false,
+            errorInputMessage: false
+          });
+        });
+        setToggleFocusInputMessage(function (prev) {
+          return !prev;
+        });
+      }
+    })]
+  });
+};
+
+exports.Footer = Footer;