contentoh-components-library 21.4.83 → 21.4.84

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

@@ -482,25 +482,30 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       compare = _useState82[0],
       setCompare = _useState82[1];
 
-  var _useState83 = (0, _react.useState)(false),
+  var _useState83 = (0, _react.useState)(),
       _useState84 = (0, _slicedToArray2.default)(_useState83, 2),
-      valRejAll = _useState84[0],
-      setValRejAll = _useState84[1];
+      observation = _useState84[0],
+      setObservation = _useState84[1];
 
-  var _useState85 = (0, _react.useState)([]),
+  var _useState85 = (0, _react.useState)(false),
       _useState86 = (0, _slicedToArray2.default)(_useState85, 2),
-      desc = _useState86[0],
-      setDesc = _useState86[1];
+      valRejAll = _useState86[0],
+      setValRejAll = _useState86[1];
 
   var _useState87 = (0, _react.useState)([]),
       _useState88 = (0, _slicedToArray2.default)(_useState87, 2),
-      fich = _useState88[0],
-      setFich = _useState88[1];
+      desc = _useState88[0],
+      setDesc = _useState88[1];
 
   var _useState89 = (0, _react.useState)([]),
       _useState90 = (0, _slicedToArray2.default)(_useState89, 2),
-      imag = _useState90[0],
-      setImag = _useState90[1];
+      fich = _useState90[0],
+      setFich = _useState90[1];
+
+  var _useState91 = (0, _react.useState)([]),
+      _useState92 = (0, _slicedToArray2.default)(_useState91, 2),
+      imag = _useState92[0],
+      setImag = _useState92[1];
 
   (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var _ref3, id_article;
@@ -573,7 +578,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
   var loadData = /*#__PURE__*/function () {
     var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-      var _product$article4, _product$article5, _product$article6, _services$, _services$$values, _services;
+      var _product$article4, _product$article5, _product$article6, _services$, _services$$values, _product$retailersAva, _services, data, headers;
 
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
@@ -598,26 +603,39 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
                 init: _services[2]
               });
               if (((_services$ = _services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
+              data = [{
+                id_article: product.article.id_article,
+                id_category: product.article.id_category,
+                version: product.version,
+                id_retailer_array: ((_product$retailersAva = product.retailersAvailable) !== null && _product$retailersAva !== void 0 ? _product$retailersAva : product.retailers).map(function (_ref6) {
+                  var id = _ref6.id;
+                  return id;
+                })
+              }];
+              headers = {
+                Authorization: token
+              };
               (0, _data2.getPercentage)({
-                data: [product]
+                data: data,
+                headers: headers
               }).then(function (res) {
-                return setPercentages(res[0]);
+                setPercentages(res[0]);
               });
               setLoading(false);
-              _context3.next = 16;
+              _context3.next = 18;
               break;
 
-            case 13:
-              _context3.prev = 13;
+            case 15:
+              _context3.prev = 15;
               _context3.t0 = _context3["catch"](0);
               console.log(_context3.t0);
 
-            case 16:
+            case 18:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 13]]);
+      }, _callee3, null, [[0, 15]]);
     }));
 
     return function loadData() {
@@ -626,7 +644,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }();
 
   var getServices = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
       var _product$article7, _product$article8, _servicesResponse$dat;
 
       var servicesResponse, parsedResponse, retailers, retailerResponse, active;
@@ -659,7 +677,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function getServices() {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
 
@@ -673,7 +691,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var getComments = /*#__PURE__*/function () {
-    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
       var _product$article9, _product$article10, _product$article11;
 
       var tab,
@@ -708,7 +726,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function getComments() {
-      return _ref7.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
 
@@ -825,7 +843,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     setActivePercentage((_retailers$ = retailers[0]) === null || _retailers$ === void 0 ? void 0 : _retailers$.percentage);
   }, [percentages]);
   (0, _react.useEffect)(function () {
-    (0, _utils.getInputsData)(services, activeRetailer, setDatasheets, setDescriptions);
+    //getInputsData(services, activeRetailer, setDatasheets, setDescriptions);
     auditableVersion && loadAuditableData();
     setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
     (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && setImages({
@@ -879,7 +897,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var saveDescriptions = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
       var dataClean, _product$article12, productTemp, articleId, dataObject, res, _JSON$parse2, newStatus, newArticleStatus;
 
       return _regenerator.default.wrap(function _callee7$(_context7) {
@@ -947,12 +965,12 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function saveDescriptions() {
-      return _ref9.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
 
   var saveDatasheets = /*#__PURE__*/function () {
-    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
       var dataClean, _product$article13, productTemp, articleId, dataObject, res, _JSON$parse3, newStatus, newArticleStatus;
 
       return _regenerator.default.wrap(function _callee8$(_context8) {
@@ -1020,7 +1038,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function saveDatasheets() {
-      return _ref10.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
 
@@ -1308,8 +1326,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         break;
     }
 
-    var services = servicesData.filter(function (_ref13) {
-      var service = _ref13.service;
+    var services = servicesData.filter(function (_ref14) {
+      var service = _ref14.service;
       return concepts.includes(service);
     });
     var adminFacilitatorCanEvaluate = services.every(function (srv) {
@@ -1343,83 +1361,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       default:
         break;
     }
-  }; // const sendToFacilitator = async (result) => {
-  //   setLoading(true);
-  //   try {
-  //     let concept = getConcept(activeTab);
-  //     const productTemp = { ...product };
-  //     const evalStatus = retailerStatus;
-  //     const articleId = product.article.id_article;
-  //     const orderId = product.orderId;
-  //     // const body = {
-  //     //   orderArticleRetailers: [
-  //     //     { orderId, articleId, retailersIds: [activeRetailer.id] },
-  //     //   ],
-  //     //   isAproved: false,
-  //     //   service: concept,
-  //     // };
-  //     const body = {
-  //       articleId: product.article.id_article,
-  //       orderId: product.orderId,
-  //       concept: concept,
-  //       result: result,
-  //       evalStatus: evalStatus,
-  //       retailerId: activeRetailer.id,
-  //     };
-  //     let res;
-  //     let message;
-  //     if (result) {
-  //       body.isAproved = result === "A";
-  //       res = await axios.put(
-  //         `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
-  //         body,
-  //         {
-  //           headers: {
-  //             Authorization: token,
-  //           },
-  //         }
-  //       );
-  //       console.log(JSON.parse(res.data.body), "res");
-  //       getServices();
-  //     } else {
-  //       const specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
-  //       if (specialistDone) {
-  //         message = `${activeTab} enviada a facilitador`;
-  //         getSectionIcon();
-  //       } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
-  //         message = "Evaluación enviada";
-  //         getSectionIcon();
-  //       }
-  //       res = await axios.put(
-  //         `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
-  //         body,
-  //         {
-  //           headers: {
-  //             Authorization: token,
-  //           },
-  //         }
-  //       );
-  //     }
-  //     if (res.data.statusCode === 200) {
-  //       const response = JSON.parse(res.data.body)?.successfulData;
-  //       const statusObject =
-  //         response[`${orderId}-${articleId}-${activeRetailer.id}`];
-  //       productTemp.status = statusObject["generalStatus"];
-  //       productTemp[`${concept}_status`] = statusObject[`${concept}Status`];
-  //       await loadData();
-  //       if (message) setMessage(message);
-  //       sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-  //       setProduct(productTemp);
-  //     }
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  //   setLoading(false);
-  // };
-
+  };
 
   var sendToFacilitator = /*#__PURE__*/function () {
-    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
+    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
       var concept, productTemp, evalStatus, articleId, orderId, data, res, _message, specialistDone, _JSON$parse5, newStatus, newOrderStatus, newArticleStatus, messageToChat, _data;
 
       return _regenerator.default.wrap(function _callee11$(_context11) {
@@ -1539,7 +1484,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function sendToFacilitator(_x) {
-      return _ref14.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }();
 
@@ -1570,7 +1515,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var createComment = /*#__PURE__*/function () {
-    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
+    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
       var messages,
           retailerId,
           data,
@@ -1605,7 +1550,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function createComment() {
-      return _ref15.apply(this, arguments);
+      return _ref16.apply(this, arguments);
     };
   }();
 
@@ -1683,7 +1628,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }, [activeTab]);
 
   var commentRevised = /*#__PURE__*/function () {
-    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13() {
+    var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13() {
       var data;
       return _regenerator.default.wrap(function _callee13$(_context13) {
         while (1) {
@@ -1713,12 +1658,12 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function commentRevised() {
-      return _ref16.apply(this, arguments);
+      return _ref17.apply(this, arguments);
     };
   }();
 
   var setAssignation = /*#__PURE__*/function () {
-    var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(assignationType, assignationId) {
+    var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(assignationType, assignationId) {
       var _product$article16;
 
       var concept, productTemp, data;
@@ -1777,7 +1722,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function setAssignation(_x2, _x3) {
-      return _ref17.apply(this, arguments);
+      return _ref18.apply(this, arguments);
     };
   }();
 
@@ -1887,67 +1832,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }, [services, servicesData, activeTab]);
   (0, _react.useEffect)(function () {
     setSaving(loading);
-  }, [loading]); // const validateAll = async (result) => {
-  //   try {
-  //     setLoading(true);
-  //     const evaluationArray = [];
-  //     let conceptArray = ["description", "datasheet", "images"];
-  //     switch (user.id_role) {
-  //       case 4:
-  //         conceptArray = ["description", "datasheet"];
-  //         break;
-  //       case 5:
-  //         conceptArray = ["images"];
-  //         break;
-  //       default:
-  //         conceptArray = ["description", "datasheet", "images"];
-  //         break;
-  //     }
-  //     const isAproved = result === "A";
-  //     const retailersIds = [];
-  //     servicesData?.forEach((ret) => {
-  //       if (!retailersIds.includes(ret.id_retailer))
-  //         retailersIds.push(ret.id_retailer);
-  //     });
-  //     const body = {
-  //       orderArticleRetailers: [
-  //         {
-  //           orderId: product.id_order ?? product.orderId,
-  //           articleId: product.article.id_article,
-  //           retailersIds,
-  //         },
-  //       ],
-  //       isAproved,
-  //     };
-  //     conceptArray.forEach((concept) => {
-  //       body.service = concept;
-  //       evaluationArray.push(
-  //         axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, body, {
-  //           headers: {
-  //             Authorization: token,
-  //           },
-  //         })
-  //       );
-  //     });
-  //     await Promise.all(evaluationArray);
-  //     const productTemp = product;
-  //     productTemp.status = `${result}A`;
-  //     productTemp.datasheet_status =
-  //       productTemp.datasheet_status === "NA" ? "NA" : `${result}A`;
-  //     productTemp.description_status =
-  //       productTemp.description_status === "NA" ? "NA" : `${result}A`;
-  //     productTemp.images_status =
-  //       productTemp.images_status === "NA" ? "NA" : `${result}A`;
-  //     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-  //     setProduct(productTemp);
-  //     await loadData();
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  // };
+  }, [loading]);
 
   var validateAll = /*#__PURE__*/function () {
-    var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(result) {
+    var _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(result) {
       var evaluationArray, conceptArray, messages, productTemp, messagesResponse;
       return _regenerator.default.wrap(function _callee15$(_context15) {
         while (1) {
@@ -2031,10 +1919,45 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }));
 
     return function validateAll(_x4) {
-      return _ref18.apply(this, arguments);
+      return _ref19.apply(this, arguments);
+    };
+  }();
+
+  var getObservation = /*#__PURE__*/function () {
+    var _ref20 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16() {
+      var response, parseData;
+      return _regenerator.default.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              _context16.next = 2;
+              return _axios.default.get("".concat(process.env.REACT_APP_READ_OBSERVATION, "?articleId=").concat(product.article.id_article, "&orderId=").concat(product === null || product === void 0 ? void 0 : product.orderId), {
+                headers: {
+                  Authorization: sessionStorage.getItem("jwt")
+                }
+              });
+
+            case 2:
+              response = _context16.sent;
+              parseData = JSON.parse(response.data.body).data[0];
+              setObservation(parseData.observations);
+
+            case 5:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    }));
+
+    return function getObservation() {
+      return _ref20.apply(this, arguments);
     };
   }();
 
+  (0, _react.useEffect)(function () {
+    getObservation();
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     headerTop: headerTop,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
@@ -2079,6 +2002,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         className: "product-information",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
           headerData: product,
+          productObservation: observation,
           percent: activePercentage,
           activeRetailer: activeRetailer,
           servicesData: servicesData,
@@ -2253,18 +2177,18 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         type: "pink",
         label: "Aceptar",
         size: 12,
-        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16() {
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17() {
           var body, messages;
-          return _regenerator.default.wrap(function _callee16$(_context16) {
+          return _regenerator.default.wrap(function _callee17$(_context17) {
             while (1) {
-              switch (_context16.prev = _context16.next) {
+              switch (_context17.prev = _context17.next) {
                 case 0:
                   body = document.querySelector("#modal-message-box .ql-container .ql-editor > p").innerHTML;
                   messages = [{
                     type: "message",
                     value: body === null || body === void 0 ? void 0 : body.replace(/<.*?\/?>/gm, "")
                   }];
-                  _context16.next = 4;
+                  _context17.next = 4;
                   return createComment(messages, activeRetailer.id);
 
                 case 4:
@@ -2274,10 +2198,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
                 case 7:
                 case "end":
-                  return _context16.stop();
+                  return _context17.stop();
               }
             }
-          }, _callee16);
+          }, _callee17);
         }))
       }, "btn-Aceptar")]
     })]

package/dist/global-files/data.js

@@ -134,46 +134,31 @@ var getPercentage = /*#__PURE__*/function () {
 
             func = /*#__PURE__*/function () {
               var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-                var dataToSend, arrayRetailers, retailers;
+                var _params$headers$Autho, _params$headers;
+
+                var headers;
                 return _regenerator.default.wrap(function _callee2$(_context2) {
                   while (1) {
                     switch (_context2.prev = _context2.next) {
                       case 0:
-                        dataToSend = [];
-                        arrayRetailers = [];
-                        retailers = params.data[0].retailers || params.data[0].retailersAvailable;
-                        params.data.forEach(function (product, i) {
-                          dataToSend.push(product.article ? {
-                            id_article: product.article.id_article,
-                            id_category: product.article.id_category,
-                            version: product.version
-                          } : {
-                            id_article: product.id_article,
-                            id_category: product.id_category,
-                            version: product.version
-                          });
-                          retailers.forEach(function (retailer) {
-                            arrayRetailers.push(retailer.id);
-                          });
-                          dataToSend[i].id_retailer_array = arrayRetailers;
-                        });
-                        _context2.next = 6;
+                        headers = {
+                          Authorization: (_params$headers$Autho = params === null || params === void 0 ? void 0 : (_params$headers = params.headers) === null || _params$headers === void 0 ? void 0 : _params$headers.Authorization) !== null && _params$headers$Autho !== void 0 ? _params$headers$Autho : sessionStorage.getItem("jwt")
+                        };
+                        _context2.next = 3;
                         return _axios.default.post(process.env.REACT_APP_VALID_EXPORT_ENDPOINT, {
-                          data: dataToSend
+                          data: params.data
                         }, {
-                          headers: {
-                            Authorization: sessionStorage.getItem("jwt")
-                          }
+                          headers: headers
                         }).then(function (response) {
                           return [response.data];
                         }).catch(function (err) {
                           return console.log(err, "Errror");
                         });
 
-                      case 6:
+                      case 3:
                         return _context2.abrupt("return", _context2.sent);
 
-                      case 7:
+                      case 4:
                       case "end":
                         return _context2.stop();
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.83",
+  "version": "21.4.84",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -27,6 +27,7 @@
     "babel-preset-react-app": "^10.0.1",
     "caniuse-lite": "^1.0.30001472",
     "chart.js": "^3.7.1",
+    "contentoh-components-library": "^21.4.75",
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
     "infinite-react-carousel": "^1.2.11",

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

@@ -232,3 +232,4 @@ export const Container = styled.button`
     cursor: pointer;
   }
 `;
+

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

@@ -0,0 +1,20 @@
+import { ObservationFlag } from "./index";
+
+export default {
+  title: "Components/atoms/ObservationFlag",
+  component: ObservationFlag,
+  argTypes: {
+    observation: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ObservationFlag {...args} />;
+
+export const PriorityFlagDefault = Template.bind({});
+
+PriorityFlagDefault.args = {
+  observation: "no observation",
+};

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

@@ -0,0 +1,33 @@
+import { Container } 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";
+
+export const ObservationFlag = ({ observation,contentObservation }) => {
+  const PriorityFlags = {
+    ["none"]: without,
+    ["low"]: low,
+    ["medium"]: medium,
+    ["high"]: high,
+  };
+  return (
+    <Tooltip
+    componentTooltip={
+      <>
+        <p>
+          <b>Observaciones del producto</b>
+        </p>
+        <p>{contentObservation} </p>
+      </>
+    }
+    children={
+      <Container>
+      <img src={PriorityFlags[observation]} alt={observation} />
+    </Container>
+    }
+    classNameTooltip={"container-tooltip"}
+    />
+  );
+};

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

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+
+export const Container = styled.div``;

package/src/components/atoms/TabSection/index.js

@@ -6,4 +6,4 @@ export const TabSection = ({ label, active, onClick}) => {
       <p>{label}</p>
     </Container>
   );
-};
+};

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

@@ -3,6 +3,7 @@ import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Status } from "../../atoms/Status/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
 import { PriorityFlag } from "../../atoms/PriorityFlag/index";
+import { ObservationFlag } from "../../atoms/ObservationFlag/index";
 
 export const ProductNameHeader = ({
   productName,
@@ -10,7 +11,9 @@ export const ProductNameHeader = ({
   priority,
   date,
   percentRequired,
+  productObservation
 }) => {
+  const typeFlag = productObservation!== null && productObservation !== "" ? "high" : "low";
   return (
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
@@ -20,7 +23,8 @@ export const ProductNameHeader = ({
         progressBarType={statusType}
         percentRequired={percentRequired}
       />
-      <PriorityFlag priority={priority} />
+      {/* <PriorityFlag priority={priority} /> */}
+      <ObservationFlag observation={typeFlag}contentObservation={productObservation}/>
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>
   );