contentoh-components-library 21.4.75 → 21.4.78

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,28 +11,18 @@ exports.GroupRow = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _variables = require("../../../global-files/variables");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
+
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    border: 1px solid ", ";\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n  }\n\n  .title-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n  }\n\n  .details-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    margin: 5px 0 10px;\n  }\n  .container-save-add {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .button-add {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    text-transform: capitalize;\n    border: none;\n  }\n  .table-groups-edit {\n    width: 100%;\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  .table-groups-max{\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n    display:grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .modal-save {\n    .contentModal {\n      width: 25%;\n    }\n  }\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  .header {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n  .close-button {\n    min-width: 24px;\n    height: 24px;\n    background-color: transparent;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.3s ease, opacity 0.3s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    -webkit-filter: grayscale(100%);\n    filter: grayscale(100%);\n    opacity:0.4;\n    img {\n      width: 10px;\n      height: 10px;\n    }\n\n    &:hover {\n      background-color: ", ";\n      -webkit-filter: grayscale(0);\n      filter: grayscale(0);\n      opacity:1;\n    }\n  }\n  .contentModal {\n    position: absolute;\n    top: 10%;\n    z-index: 20;\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 100%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    border: 1px solid ", ";\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n  }\n\n  .title-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n  }\n\n  .details-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    margin: 5px 0 10px;\n  }\n  .container-save-add {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .button-add {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    text-transform: capitalize;\n    border: none;\n    background: transparent;\n    border-radius: 20px;\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  .table-groups-edit {\n    width: 100%;\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  .table-groups-max {\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .modal-save {\n    .contentModal {\n      width: 25%;\n    }\n  }\n"])), _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
 
 exports.Container = Container;
 
-var GroupRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 34px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px;\n  letter-spacing: 0em;\n  text-align: left;\n  text-decoration: none;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  input {\n    background: ", ";\n    color: ", ";\n    text-decoration: ", ";\n    border: 0;\n    padding: 5px 20px;\n  }\n\n  input:focus {\n    border: 0;\n  }\n"])), function (_ref) {
-  var isDeleted = _ref.isDeleted;
-  return isDeleted ? "#FF7373" : "transparent";
-}, _variables.GlobalColors.gray_light, function (_ref2) {
-  var isDeleted = _ref2.isDeleted;
-  return isDeleted ? "#FF7373" : "transparent";
-}, function (_ref3) {
-  var isDeleted = _ref3.isDeleted;
-  return isDeleted ? _variables.GlobalColors.white : _variables.GlobalColors.gray;
-}, function (_ref4) {
-  var isDeleted = _ref4.isDeleted;
-  return isDeleted ? "line-through" : "none";
-});
+var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 34px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px;\n  letter-spacing: 0em;\n  text-align: left;\n  text-decoration: none;\n  border-bottom: 1px solid ", ";\n  padding: 0 8px 0 0;\n  input {\n    width:100%;\n    min-width: 215px;\n    background: transparent;\n    color: ", ";\n    border: 0;\n    font-size: 12px;\n    font-family:", ", sans-serif;\n    padding: 5px 20px;\n    ::placeholder {\n      color: #CBCBCB;\n    }\n  }\n\n  input:focus {\n    border: 0;\n  }\n  &.editing {\n    background-color: ", "; \n    color: black;\n    input{\n      color: ", ";\n    }\n  }\n\n  .save-button,\n  .edit-button,\n  .delete-button {\n    min-width: 24px;\n    height: 24px;\n    background-color: transparent;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.3s ease, opacity 0.3s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  \n    img {\n      width: 12px;\n      height: 12px;\n    }\n  \n    &:hover {\n      background-color: ", ";\n    }\n  }\n  .edit-button,\n  .delete-button {\n    display: none;\n  }\n\n  .visible {\n    display: flex;\n    animation: ", " 0.3s ease-in-out forwards;\n  }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
 
 exports.GroupRow = GroupRow;

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

@@ -34,7 +34,8 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       approveAll = _ref.approveAll,
       rejectAll = _ref.rejectAll,
       servicesData = _ref.servicesData,
-      showApproveRejectAll = _ref.showApproveRejectAll;
+      showApproveRejectAll = _ref.showApproveRejectAll,
+      productObservation = _ref.productObservation;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -68,6 +69,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       percentRequired: percent,
       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))
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",

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

@@ -1,167 +1,101 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VersionSelector = 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 _styles = require("./styles");
-
-var _axios = _interopRequireDefault(require("axios"));
-
-var _react = require("react");
-
-var _ScreenHeader = require("../../atoms/ScreenHeader");
-
-var _GeneralButton = require("../../atoms/GeneralButton");
-
-var _addVersion = _interopRequireDefault(require("../../../assets/images/versionSelector/addVersion.svg"));
-
-var _closeVersionSelector = _interopRequireDefault(require("../../../assets/images/versionSelector/closeVersionSelector.svg"));
-
-var _variables = require("../../../global-files/variables");
-
-var _VersionItem = require("../../molecules/VersionItem");
-
-var _CreateVersion = require("../../organisms/CreateVersion");
-
-var _customHooks = require("../../../global-files/customHooks");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var VersionSelector = function VersionSelector(_ref) {
-  var modalId = _ref.modalId,
-      articleId = _ref.articleId,
-      setVersion = _ref.setVersion,
-      companyName = _ref.companyName,
-      currentVersion = _ref.currentVersion,
-      setShowVersionSelector = _ref.setShowVersionSelector,
-      jwt = _ref.jwt;
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      versions = _useState2[0],
-      setVersions = _useState2[1];
-
-  var _useCloseModal = (0, _customHooks.useCloseModal)("create-version"),
-      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
-      showCreateVersion = _useCloseModal2[0],
-      setShowCreateVersion = _useCloseModal2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      reload = _useState4[0],
-      setReload = _useState4[1];
-
-  var loadProductVersions = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId) {
-      var response, versionList;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return _axios.default.get("".concat(process.env.REACT_APP_VERSIONS_ENDPOINT, "?articleId=").concat(articleId, "&provider=true"), {
-                headers: {
-                  Authorization: jwt
-                }
-              });
-
-            case 3:
-              response = _context.sent;
-              versionList = JSON.parse(response.data.body).data;
-              setVersions(versionList);
-              _context.next = 11;
-              break;
-
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](0);
-              console.log(_context.t0);
-
-            case 11:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 8]]);
-    }));
-
-    return function loadProductVersions(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  (0, _react.useEffect)(function () {
-    var ac = new AbortController();
-    loadProductVersions(articleId);
-    return function () {
-      setVersions([]);
-      setShowCreateVersion(false);
-      return function () {
-        return ac.abort();
-      }; // Abort both fetches on unmount
-    };
-  }, [reload]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    id: modalId,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "versions-header",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        text: "Versión del producto",
-        headerType: "input-name-header",
-        color: _variables.GlobalColors.white,
-        fontFamily: _variables.FontFamily.Lato
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "buttons-container",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-          image: _addVersion.default,
-          buttonType: "circular-button",
-          onClick: function onClick() {
-            return setShowCreateVersion(true);
-          },
-          id: "add-version"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-          image: _closeVersionSelector.default,
-          buttonType: "circular-button",
-          onClick: function onClick() {
-            return setShowVersionSelector(false);
-          },
-          id: "close-button"
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "versions-container",
-      children: versions === null || versions === void 0 ? void 0 : versions.map(function (item) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionItem.VersionItem, {
-          version: item.version,
-          articleStatus: item.article_status,
-          currentVersion: item.version === currentVersion,
-          productOwner: companyName,
-          setVersion: setVersion,
-          timestamp: item.timestamp
-        }, item.version);
-      })
-    }), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
-      articleId: articleId,
-      version: currentVersion,
-      versionsList: versions,
-      setShowCreateVersion: setShowCreateVersion,
-      realoadVersion: function realoadVersion() {
-        return setReload(!reload);
-      },
-      jwt: jwt
-    })]
-  });
-};
-
-exports.VersionSelector = VersionSelector;
+// import { Container } from "./styles";
+// import axios from "axios";
+// import { useEffect, useState } from "react";
+// import { ScreenHeader } from "../../atoms/ScreenHeader";
+// import { Button } from "../../atoms/GeneralButton";
+// import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+// import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+// import { GlobalColors } from "../../../../dist/global-files/variables";
+// import { FontFamily } from "../../../global-files/variables";
+// import { VersionItem } from "../../molecules/VersionItem";
+// import { CreateVersion } from "../../organisms/CreateVersion";
+// import { useCloseModal } from "../../../global-files/customHooks";
+// export const VersionSelector = ({
+//   modalId,
+//   articleId,
+//   setVersion,
+//   companyName,
+//   currentVersion,
+//   setShowVersionSelector,
+//   jwt,
+// }) => {
+//   const [versions, setVersions] = useState([]);
+//   const [showCreateVersion, setShowCreateVersion] =
+//     useCloseModal("create-version");
+//   const [reload, setReload] = useState(false);
+//   const loadProductVersions = async (articleId) => {
+//     try {
+//       const response = await axios.get(
+//         `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+//         {
+//           headers: {
+//             Authorization: jwt,
+//           },
+//         }
+//       );
+//       const versionList = JSON.parse(response.data.body).data;
+//       setVersions(versionList);
+//     } catch (error) {
+//       console.log(error);
+//     }
+//   };
+//   useEffect(() => {
+//     const ac = new AbortController();
+//     loadProductVersions(articleId);
+//     return () => {
+//       setVersions([]);
+//       setShowCreateVersion(false);
+//       return () => ac.abort(); // Abort both fetches on unmount
+//     };
+//   }, [reload]);
+//   return (
+//     <Container id={modalId}>
+//       <div className="versions-header">
+//         <ScreenHeader
+//           text={"Versión del producto"}
+//           headerType={"input-name-header"}
+//           color={GlobalColors.white}
+//           fontFamily={FontFamily.Lato}
+//         />
+//         <div className="buttons-container">
+//           <Button
+//             image={addVersion}
+//             buttonType={"circular-button"}
+//             onClick={() => setShowCreateVersion(true)}
+//             id="add-version"
+//           />
+//           <Button
+//             image={closeIcon}
+//             buttonType={"circular-button"}
+//             onClick={() => setShowVersionSelector(false)}
+//             id="close-button"
+//           />
+//         </div>
+//       </div>
+//       <div className="versions-container">
+//         {versions?.map((item) => (
+//           <VersionItem
+//             key={item.version}
+//             version={item.version}
+//             articleStatus={item.article_status}
+//             currentVersion={item.version === currentVersion}
+//             productOwner={companyName}
+//             setVersion={setVersion}
+//             timestamp={item.timestamp}
+//           />
+//         ))}
+//       </div>
+//       {showCreateVersion && (
+//         <CreateVersion
+//           articleId={articleId}
+//           version={currentVersion}
+//           versionsList={versions}
+//           setShowCreateVersion={setShowCreateVersion}
+//           realoadVersion={() => setReload(!reload)}
+//           jwt={jwt}
+//         />
+//       )}
+//     </Container>
+//   );
+// };
+"use strict";

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;
@@ -838,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({
@@ -1356,80 +1361,7 @@ 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 _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
@@ -1900,64 +1832,7 @@ 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 _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(result) {
@@ -2048,6 +1923,41 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     };
   }();
 
+  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, {
@@ -2092,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,
@@ -2266,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:
@@ -2287,10 +2198,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
                 case 7:
                 case "end":
-                  return _context16.stop();
+                  return _context17.stop();
               }
             }
-          }, _callee16);
+          }, _callee17);
         }))
       }, "btn-Aceptar")]
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.75",
+  "version": "21.4.78",
   "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/assets/images/Icons/close.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
+<rect width="10" height="10" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2487)">
+<path d="M0.769231 10L0 9.23077L4.23077 5L0 0.769231L0.769231 0L5 4.23077L9.23077 0L10 0.769231L5.76923 5L10 9.23077L9.23077 10L5 5.76923L0.769231 10Z" fill="#B64545"/>
+</g>
+</svg>