contentoh-components-library 21.4.90 → 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/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;

package/dist/components/molecules/ProductNameHeader/index.js

@@ -25,7 +25,8 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       priority = _ref.priority,
       date = _ref.date,
       percentRequired = _ref.percentRequired,
-      productObservation = _ref.productObservation;
+      productObservation = _ref.productObservation,
+      dataProduct = _ref.dataProduct;
   var typeFlag = productObservation !== null && productObservation !== "" ? "high" : "low";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
@@ -39,7 +40,8 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       percentRequired: percentRequired
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.ObservationFlag, {
       observation: typeFlag,
-      contentObservation: productObservation
+      contentObservation: productObservation,
+      dataProduct: dataProduct
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       headerType: "date-header",
       text: date

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

@@ -70,7 +70,8 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       percent: percent === null || percent === void 0 ? void 0 : percent.toFixed(0),
       priority: headerData === null || headerData === void 0 ? void 0 : headerData.prio,
       productObservation: productObservation,
-      date: getTime((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))
+      date: getTime((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)),
+      dataProduct: headerData
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeaturesBar.FeaturesBar, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.90",
+  "version": "21.4.91",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/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/src/components/atoms/ObservationFlag/index.js

@@ -1,33 +1,159 @@
-import { Container } from "./styles";
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import { Container, Observation, Content, ServTab, SaveButton } from "./styles";
 import { Tooltip } from "../Tooltip";
 import without from "../../../assets/images/flags/noPriority.svg";
 import high from "../../../assets/images/flags/highPriority.svg";
 import medium from "../../../assets/images/flags/mediumPriority.svg";
 import low from "../../../assets/images/flags/lowPriority.svg";
+import saveIconpink from "../../../assets/images/generalButton/saveIconpink.svg";
+import { Modal } from "../../organisms/Modal";
 
-export const ObservationFlag = ({ observation,contentObservation }) => {
+export const ObservationFlag = ({
+  observation,
+  contentObservation,
+  dataProduct,
+}) => {
   const PriorityFlags = {
     ["none"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,
   };
-  return (
-    <Tooltip
-    componentTooltip={
-      <>
-        <p>
-          <b>Observaciones del producto</b>
-        </p>
-        <p>{contentObservation} </p>
-      </>
+
+  const [isObservationVisible, setObservationVisible] = useState(false);
+  const [material, setMaterial] = useState(contentObservation || "");
+  const [currentObservation, setCurrentObservation] = useState(observation);
+
+  const [modalView, setModalView] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+  const [modalData, setModalData] = useState({});
+
+  const textareaRef = useRef(null);
+  const toggleObservation = () => {
+    setObservationVisible(!isObservationVisible);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        isObservationVisible &&
+        !event.target.closest(".Observation") &&
+        !event.target.closest(".Container")
+      ) {
+        setObservationVisible(false);
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible]);
+
+  useEffect(() => {
+    setMaterial(contentObservation || ""); // Establecer material después de montar el componente
+  }, [contentObservation]); // Volver a establecer material cuando contentObservation cambia
+
+  useEffect(() => {
+    setCurrentObservation(observation);
+  }, [observation]);
+
+  const saveRequest = async () => {
+    let dataToSend = {
+      orderId: parseInt(dataProduct.orderId),
+      articleId: dataProduct.article.id_article,
+      observation: textareaRef.current.value,
+    };
+
+    try {
+      const response = await axios.put(
+        process.env.REACT_APP_UPDATE_OBSERVATION,
+        dataToSend
+      );
+
+      const succesResponse = {
+        status: true,
+        message: "Información guardada correctamente",
+        detail: "",
+        img: true,
+      };
+      const 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 response;
+    } catch (err) {
+      console.log(err);
     }
-    children={
+  };
+  return (
+    <>
       <Container>
-      <img src={PriorityFlags[observation]} alt={observation} />
-    </Container>
-    }
-    classNameTooltip={"container-tooltip"}
-    />
+        <img
+          src={PriorityFlags[currentObservation]}
+          alt={observation}
+          style={{ cursor: "pointer" }}
+          onClick={toggleObservation}
+        />
+        {isObservationVisible && (
+          <Observation
+            onClick={(evt) => {
+              evt.stopPropagation();
+            }}
+            className="Observation"
+          >
+            <ServTab
+              onClick={(evt) => {
+                evt.stopPropagation();
+              }}
+              className="close-Container"
+            >
+              <div>
+                <span>Material completo</span>
+              </div>
+
+              <div className="flex">
+                <textarea
+                  ref={textareaRef}
+                  name="textarea"
+                  rows="10"
+                  cols="50"
+                  style={{ color: "black", padding: "5px" }}
+                  value={material}
+                  onChange={(e) => setMaterial(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+
+              <SaveButton
+                onClick={(evt) => {
+                  evt.stopPropagation();
+                  saveRequest();
+                }}
+              >
+                <img src={saveIconpink} alt="Guardar" />
+              </SaveButton>
+            </ServTab>
+          </Observation>
+        )}
+      </Container>
+
+      {showModal && (
+        <Modal
+          show={showModal}
+          title={modalData.title}
+          message={modalData.message}
+          onClickBtnDefault={(event) => setShowModal(false)}
+        />
+      )}
+    </>
   );
 };

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

@@ -1,3 +1,103 @@
 import styled from "styled-components";
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  /* position: relative;
+  height: 100%;
+  width: 100%; */
+`;
+export const Observation = styled.div`
+  position: relative;
+  /* height: 100%;
+  width: 100%; */
+`;
+
+export const Content = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  & > div {
+    width: 30px;
+    height: 20px;
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    border-radius: 3px;
+    color: ${({ cont }) =>
+      cont === "-" || cont === "Pt" ? "#817393" : "#FFF"};
+    background-color: ${({ cont }) => backgroundContent(cont)};
+  }
+`;
+
+export const ServTab = styled.div`
+  position: absolute;
+  top: 0;
+  right: 10%;
+  z-index: 2;
+  width: 300px;
+  max-height: 280px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: #281f33;
+  padding: 8px;
+  white-space: normal;
+  font-family: Avenir Next;
+  font-style: normal;
+  > div {
+    background-color: #503d66;
+    margin-bottom: 8px;
+    color: #f0eef2;
+    box-sizing: border-box;
+    padding: 8px;
+    text-align: left;
+    > span {
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 19px;
+    }
+    > p {
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+  .flex {
+    display: flex;
+    width: 100%;
+    background-color: #503d6644;
+    margin-left: 0px;
+    p {
+      width: 16%;
+      &:first-child {
+        width: 50%;
+      }
+    }
+  }
+  .title {
+    position: sticky;
+    top: -9px;
+    background-color: #503d66;
+  }
+  .ignore-background {
+    background-color: #1111;
+    margin: 0;
+  }
+`;
+
+export const SaveButton = styled.button`
+  position: sticky;
+  bottom: 0;
+  left: 100%;
+  background-color: #fbfbfb;
+  border: 2px solid #e33aa9;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  cursor: pointer;
+  min-height: initial;
+`;

package/src/components/molecules/ProductNameHeader/index.js

@@ -11,9 +11,11 @@ export const ProductNameHeader = ({
   priority,
   date,
   percentRequired,
-  productObservation
+  productObservation,
+  dataProduct,
 }) => {
-  const typeFlag = productObservation!== null && productObservation !== "" ? "high" : "low";
+  const typeFlag =
+    productObservation !== null && productObservation !== "" ? "high" : "low";
   return (
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
@@ -24,7 +26,11 @@ export const ProductNameHeader = ({
         percentRequired={percentRequired}
       />
       {/* <PriorityFlag priority={priority} /> */}
-      <ObservationFlag observation={typeFlag}contentObservation={productObservation}/>
+      <ObservationFlag
+        observation={typeFlag}
+        contentObservation={productObservation}
+        dataProduct={dataProduct}
+      />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>
   );

package/src/components/organisms/FullProductNameHeader/index.js

@@ -17,7 +17,7 @@ export const FullProductNameHeader = ({
   rejectAll,
   servicesData,
   showApproveRejectAll,
-  productObservation
+  productObservation,
 }) => {
   const [retailers, setRetailers] = useState([]);
 
@@ -55,6 +55,7 @@ export const FullProductNameHeader = ({
         priority={headerData?.prio}
         productObservation={productObservation}
         date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
+        dataProduct={headerData}
       />
       <div className="features-bar-container">
         <FeaturesBar

package/src/components/pages/RetailerProductEdition/index.js

@@ -1292,7 +1292,7 @@ export const RetailerProductEdition = ({
       }
     );
     const parseData = JSON.parse(response.data.body).data[0];
-    setObservation( parseData.observations);
+    setObservation(parseData.observations);
   };
   useEffect(() => {
     getObservation();
@@ -1339,7 +1339,7 @@ export const RetailerProductEdition = ({
         <div className="product-information">
           <FullProductNameHeader
             headerData={product}
-            productObservation= {observation}
+            productObservation={observation}
             percent={activePercentage}
             activeRetailer={activeRetailer}
             servicesData={servicesData}