contentoh-components-library 21.4.89 → 21.4.91

package/dist/assets/images/generalButton/saveIconpink.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.76419 1.25748L8.05551 0.488358C7.76757 0.1754 7.37713 0 6.96975 0H1.05581C0.472617 0 0 0.512924 0 1.14586V8.85414C0 9.48708 0.472617 10 1.05581 10H8.15836C8.74156 10 9.21417 9.48708 9.21417 8.85414V2.43584C9.21417 1.99371 9.05256 1.56998 8.76419 1.25748ZM1.53567 2.60414V1.5625C1.53567 1.39 1.66467 1.25 1.82361 1.25H5.85482C6.01376 1.25 6.14276 1.39 6.14276 1.5625V2.60414C6.14276 2.77664 6.01376 2.91664 5.85482 2.91664H1.82361C1.66467 2.91664 1.53567 2.77664 1.53567 2.60414ZM4.60709 8.33336C3.65306 8.33336 2.87943 7.49374 2.87943 6.45836C2.87943 5.4229 3.65306 4.58336 4.60709 4.58336C5.56111 4.58336 6.33474 5.4229 6.33474 6.45836C6.33474 7.49374 5.56111 8.33336 4.60709 8.33336Z" fill="#E33AA9"/>
+</svg>

package/dist/components/atoms/CustomChip/CustomChip.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomChipDefault = 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/atoms/CustomChip",
+  component: _index.CustomChip,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomChip, (0, _objectSpread2.default)({}, args));
+};
+
+var CustomChipDefault = Template.bind({});
+exports.CustomChipDefault = CustomChipDefault;
+CustomChipDefault.args = {
+  name: "legal"
+};

package/dist/components/atoms/CustomChip/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomChip = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+
+var _DeleteForeverOutlined = _interopRequireDefault(require("@mui/icons-material/DeleteForeverOutlined"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CustomChip = function CustomChip(_ref) {
+  var label = _ref.label,
+      onDelete = _ref.onDelete;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsHovered(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsHovered(false);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    label: label,
+    onDelete: onDelete,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteForeverOutlined.default, {
+      sx: {
+        color: "#B64545!important",
+        fontSize: "14px!important",
+        cursor: "pointer"
+      }
+    }),
+    style: {
+      height: "30px",
+      borderRadius: "5px",
+      background: "transparent",
+      border: "1px solid ".concat(isHovered ? "#B64545" : "#F0F0F0"),
+      color: "".concat(isHovered ? "#B64545" : "#707070")
+    }
+  });
+};
+
+exports.CustomChip = CustomChip;

package/dist/components/atoms/CustomChip/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\n"])));
+
+exports.Container = Container;

package/dist/components/atoms/Multiselect/index.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Multiselect = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
@@ -17,6 +21,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _axios = _interopRequireDefault(require("axios"));
+
 var _styles = require("./styles");
 
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
@@ -31,6 +37,10 @@ var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput
 
 var _EditGroup = require("../../organisms/EditGroup");
 
+var _Modal = require("../../organisms/Modal");
+
+var _ButtonV = require("../ButtonV2");
+
 var _search = _interopRequireDefault(require("../../../assets/images/Icons/search.svg"));
 
 var _settings = _interopRequireDefault(require("../../../assets/images/Icons/settings.svg"));
@@ -52,23 +62,28 @@ var Multiselect = function Multiselect(_ref) {
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      selectValues = _useState2[0],
-      setSelectValues = _useState2[1];
+      filters = _useState2[0],
+      setFilters = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      text = _useState4[0],
-      setText = _useState4[1];
+      selectValues = _useState4[0],
+      setSelectValues = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(""),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isEditGroupVisible = _useState6[0],
-      setIsEditGroupVisible = _useState6[1];
+      text = _useState6[0],
+      setText = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(true),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      isItemListVisible = _useState8[0],
-      setIsItemListVisible = _useState8[1];
+      isEditGroupVisible = _useState8[0],
+      setIsEditGroupVisible = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(true),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isItemListVisible = _useState10[0],
+      setIsItemListVisible = _useState10[1];
 
   var currentUser = arrayData.find(function (user) {
     return user.idUser === userId;
@@ -78,6 +93,21 @@ var Multiselect = function Multiselect(_ref) {
       idUser = _ref2.idUser,
       groups = _ref2.groups;
 
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      selectedItems = _useState12[0],
+      setSelectedItems = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success"
+  }),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalData = _useState14[0],
+      setModalData = _useState14[1];
+
   (0, _react.useEffect)(function () {
     var hasUserContentGroup1 = groups.some(function (group) {
       return group.userContentGroup === 1;
@@ -97,7 +127,14 @@ var Multiselect = function Multiselect(_ref) {
         return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, idUser, ["Sin grupos asignados"]));
       });
     }
+
+    setFilters(groups ? groups : []);
   }, [idUser, groups]);
+  (0, _react.useEffect)(function () {
+    if (selectValues[userId]) {
+      setSelectedItems(selectValues[userId]);
+    }
+  }, [selectValues, userId]);
 
   var onChange = function onChange(evt) {
     setText(evt.target.value);
@@ -106,27 +143,105 @@ var Multiselect = function Multiselect(_ref) {
   var handleChange = function handleChange(userId) {
     return function (event) {
       var value = event.target.value;
-      var updatedValues = value.filter(function (groupName) {
+      var updatedValues = value.map(function (groupName) {
         var groupInfo = groups.find(function (g) {
           return g.groupName === groupName;
         });
-        return groupInfo;
+        return groupInfo ? groupInfo.groupName : null;
+      });
+      setSelectedItems(function (prevItems) {
+        updateGroup(value.map(function (groupName) {
+          var groupInfo = groups.find(function (g) {
+            return g.groupName === groupName;
+          });
+          return groupInfo ? groupInfo.groupId : null;
+        }).filter(function (groupId) {
+          return groupId !== null;
+        }));
+        return updatedValues;
       });
       setSelectValues(function (prevValues) {
         return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
       });
     };
-  };
+  }; //actualiza los grupos seleccionados
+
+
+  var updateGroup = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(groupsIds) {
+      var body, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              body = {
+                userId: userId,
+                groupsIds: groupsIds
+              };
+              _context.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_USERS_ONBOARDING_ENDPOINT, "/update"), body, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context.sent;
+              setModalData({
+                show: true,
+                className: "modal-save",
+                title: "",
+                message: "El cambio de grupo fue aplicado correctamente.",
+                icon: "successv2",
+                buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+                  type: "pink",
+                  label: "Aceptar",
+                  size: 12,
+                  onClick: function onClick() {
+                    setModalData(false);
+                  }
+                }, "btn-Aceptar-guardar")]
+              });
+              console.log("grupo actualizado correctamente", response.data.body);
+              console.log("body", body);
+              _context.next = 13;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+              console.error("Error al cambiar grupos de usuarios:", _context.t0);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+
+    return function updateGroup(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
   (0, _react.useEffect)(function () {}, [selectValues]);
   (0, _react.useEffect)(function () {
     var filteredArray = (groups === null || groups === void 0 ? void 0 : groups.slice()) || [];
+    var normalizedText = text.trim().toLowerCase();
 
-    if (text.length > 0) {
+    if (normalizedText.length > 0) {
       filteredArray = filteredArray.filter(function (option) {
-        return option === null || option === void 0 ? void 0 : option.name.toLowerCase().includes(text.toLocaleLowerCase());
+        var _option$groupName;
+
+        return option === null || option === void 0 ? void 0 : (_option$groupName = option.groupName) === null || _option$groupName === void 0 ? void 0 : _option$groupName.toLowerCase().includes(normalizedText);
       });
     }
+
+    setFilters(filteredArray);
+    console.log("text:", normalizedText);
+    console.log("filteredArray:", filteredArray);
   }, [text]);
   var ITEM_HEIGHT = 48;
   var ITEM_PADDING_TOP = 8;
@@ -151,9 +266,7 @@ var Multiselect = function Multiselect(_ref) {
         sx: {
           width: "80%",
           height: "34px",
-          paddingBottom: "1px solid #F0F0F0",
-          color: "#707070",
-          fontSize: "12px"
+          paddingBottom: "1px solid #F0F0F0"
         }
       }),
       renderValue: function renderValue(selected) {
@@ -162,9 +275,13 @@ var Multiselect = function Multiselect(_ref) {
       MenuProps: MenuProps,
       sx: {
         width: "80%",
-        height: "24px"
+        height: "24px",
+        "& div": {
+          color: "#707070",
+          fontSize: "12px"
+        }
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+      children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
         sx: {
           maxHeight: "34px",
           paddingLeft: "10px",
@@ -189,7 +306,7 @@ var Multiselect = function Multiselect(_ref) {
             }
           }
         },
-        children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "search-bar-filter",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
             src: _search.default,
@@ -277,7 +394,15 @@ var Multiselect = function Multiselect(_ref) {
         setIsEditGroupVisible(false);
         setIsItemListVisible(true);
       }
-    })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread5.default)((0, _objectSpread5.default)({}, modalData), {}, {
+      onClickBtnDefault: function onClickBtnDefault() {
+        return setModalData(function (prev) {
+          return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
+    }))]
   });
 };
 

package/dist/components/atoms/Multiselect/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    min-width:200px;\n    max-height:34px;\n    .search-bar-filter {\n        display: flex;\n        align-items: center;\n        border: 1px solid #f0f0f0;\n        padding-left: 10px;\n  \n        img {\n          width: 15px;\n          height: 15px;\n        }\n  \n        input {\n          background-color: transparent;\n          padding: 10px 10px;\n          outline: none;\n          border: none;\n        }\n      }\n\n      img.icon{\n        width: 15px;\n          height: 15px;\n      }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    min-width:200px;\n    max-height:34px;\n    .search-bar-filter {\n        display: flex;\n        align-items: center;\n        border: 1px solid #f0f0f0;\n        padding-left: 10px;\n  \n        img {\n          width: 15px;\n          height: 15px;\n        }\n  \n        input {\n          background-color: transparent;\n          padding: 10px 10px;\n          outline: none;\n          border: none;\n        }\n      }\n\n      img.icon{\n        width: 15px;\n          height: 15px;\n      }\n\n      .modal-save .contentModal {\n        max-width:200px;\n      }\n"])));
 
 exports.Container = Container;

package/dist/components/atoms/ObservationFlag/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,8 +9,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObservationFlag = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _react = _interopRequireWildcard(require("react"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
 var _styles = require("./styles");
 
 var _Tooltip = require("../Tooltip");
@@ -21,31 +33,192 @@ var _mediumPriority = _interopRequireDefault(require("../../../assets/images/fla
 
 var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
 
+var _saveIconpink = _interopRequireDefault(require("../../../assets/images/generalButton/saveIconpink.svg"));
+
+var _Modal = require("../../organisms/Modal");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ObservationFlag = function ObservationFlag(_ref) {
   var _PriorityFlags;
 
   var observation = _ref.observation,
-      contentObservation = _ref.contentObservation;
+      contentObservation = _ref.contentObservation,
+      dataProduct = _ref.dataProduct;
   var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-    componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-          children: "Observaciones del producto"
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isObservationVisible = _useState2[0],
+      setObservationVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(contentObservation || ""),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      material = _useState4[0],
+      setMaterial = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(observation),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      currentObservation = _useState6[0],
+      setCurrentObservation = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      modalView = _useState8[0],
+      setModalView = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      showModal = _useState10[0],
+      setShowModal = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({}),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      modalData = _useState12[0],
+      setModalData = _useState12[1];
+
+  var textareaRef = (0, _react.useRef)(null);
+
+  var toggleObservation = function toggleObservation() {
+    setObservationVisible(!isObservationVisible);
+  };
+
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
+        setObservationVisible(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+    return function () {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible]);
+  (0, _react.useEffect)(function () {
+    setMaterial(contentObservation || ""); // Establecer material después de montar el componente
+  }, [contentObservation]); // Volver a establecer material cuando contentObservation cambia
+
+  (0, _react.useEffect)(function () {
+    setCurrentObservation(observation);
+  }, [observation]);
+
+  var saveRequest = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var dataToSend, response, succesResponse, errorResponse;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              dataToSend = {
+                orderId: parseInt(dataProduct.orderId),
+                articleId: dataProduct.article.id_article,
+                observation: textareaRef.current.value
+              };
+              _context.prev = 1;
+              _context.next = 4;
+              return _axios.default.put(process.env.REACT_APP_UPDATE_OBSERVATION, dataToSend);
+
+            case 4:
+              response = _context.sent;
+              succesResponse = {
+                status: true,
+                message: "Información guardada correctamente",
+                detail: "",
+                img: true
+              };
+              errorResponse = {
+                status: false,
+                message: "Error al guardar la información",
+                detail: "",
+                img: false
+              };
+              setShowModal(true);
+              setModalData(response.data.statusCode === 200 ? succesResponse : errorResponse);
+              setCurrentObservation(material !== "" ? "high" : "low");
+              setObservationVisible(false);
+              return _context.abrupt("return", response);
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](1);
+              console.log(_context.t0);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 14]]);
+    }));
+
+    return function saveRequest() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: PriorityFlags[currentObservation],
+        alt: observation,
+        style: {
+          cursor: "pointer"
+        },
+        onClick: toggleObservation
+      }), isObservationVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Observation, {
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+        },
+        className: "Observation",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ServTab, {
+          onClick: function onClick(evt) {
+            evt.stopPropagation();
+          },
+          className: "close-Container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "Material completo"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "flex",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+              ref: textareaRef,
+              name: "textarea",
+              rows: "10",
+              cols: "50",
+              style: {
+                color: "black",
+                padding: "5px"
+              },
+              value: material,
+              onChange: function onChange(e) {
+                return setMaterial(e.target.value);
+              },
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SaveButton, {
+            onClick: function onClick(evt) {
+              evt.stopPropagation();
+              saveRequest();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: _saveIconpink.default,
+              alt: "Guardar"
+            })
+          })]
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-        children: [contentObservation, " "]
       })]
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: PriorityFlags[observation],
-        alt: observation
-      })
-    }),
-    classNameTooltip: "container-tooltip"
+    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      show: showModal,
+      title: modalData.title,
+      message: modalData.message,
+      onClickBtnDefault: function onClickBtnDefault(event) {
+        return setShowModal(false);
+      }
+    })]
   });
 };
 

package/dist/components/atoms/ObservationFlag/styles.js

@@ -5,14 +5,36 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.ServTab = exports.SaveButton = exports.Observation = exports.Content = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* position: relative;\n  height: 100%;\n  width: 100%; */\n"])));
 
-exports.Container = Container;
+exports.Container = Container;
+
+var Observation = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* height: 100%;\n  width: 100%; */\n"])));
+
+exports.Observation = Observation;
+
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  & > div {\n    width: 30px;\n    height: 20px;\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    border-radius: 3px;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_ref) {
+  var cont = _ref.cont;
+  return cont === "-" || cont === "Pt" ? "#817393" : "#FFF";
+}, function (_ref2) {
+  var cont = _ref2.cont;
+  return backgroundContent(cont);
+});
+
+exports.Content = Content;
+
+var ServTab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 10%;\n  z-index: 2;\n  width: 300px;\n  max-height: 280px;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: #281f33;\n  padding: 8px;\n  white-space: normal;\n  font-family: Avenir Next;\n  font-style: normal;\n  > div {\n    background-color: #503d66;\n    margin-bottom: 8px;\n    color: #f0eef2;\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    > span {\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 19px;\n    }\n    > p {\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 16px;\n    }\n  }\n  .flex {\n    display: flex;\n    width: 100%;\n    background-color: #503d6644;\n    margin-left: 0px;\n    p {\n      width: 16%;\n      &:first-child {\n        width: 50%;\n      }\n    }\n  }\n  .title {\n    position: sticky;\n    top: -9px;\n    background-color: #503d66;\n  }\n  .ignore-background {\n    background-color: #1111;\n    margin: 0;\n  }\n"])));
+
+exports.ServTab = ServTab;
+
+var SaveButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: sticky;\n  bottom: 0;\n  left: 100%;\n  background-color: #fbfbfb;\n  border: 2px solid #e33aa9;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  cursor: pointer;\n  min-height: initial;\n"])));
+
+exports.SaveButton = SaveButton;