contentoh-components-library 21.5.92 → 21.5.93

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

@@ -77,8 +77,6 @@ var _genericModalWarning = _interopRequireDefault(require("../../../assets/image
 
 var _styles = require("./styles");
 
-var _AiProductEdition = require("../../../contexts/AiProductEdition");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
@@ -239,13 +237,22 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
       try {
         var product = JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected;
         var productNormalized = (0, _utils.normalizeProduct)(product);
+        console.log({
+          productNormalized: productNormalized
+        });
         dispatch({
           type: "SET_PRODUCT",
           payload: productNormalized
         });
         dispatch({
           type: "SET_ACTIVE_RETAILER",
-          payload: productNormalized.categoryRetailer[0]
+          payload: productNormalized.categoryRetailerInOrder[0]
+        });
+        var firstRetailerStatus = productNormalized.statusByRetailer[productNormalized.categoryRetailerInOrder[0].id_retailer];
+        var initialTab = firstRetailerStatus.description ? "Descripción" : firstRetailerStatus.datasheet ? "Ficha técnica" : firstRetailerStatus.images ? "Imágenes" : "Imágenes";
+        dispatch({
+          type: "SET_ACTIVE_TAB",
+          payload: initialTab
         });
       } catch (error) {
         console.log("Error setting product data: ", error);
@@ -387,34 +394,43 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
     var updateInputsActiveRetailer = function updateInputsActiveRetailer() {
       if (!state.services) return;
-      var retailerDatasheets = state.services.datasheets[state.active_retailer.id_retailer];
-      var datasheetsActiveRetailer = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, retailerDatasheets), {}, {
-        data: Object.values(retailerDatasheets.data)
-      });
-      var descriptionsActiveRetailer = state.services.descriptions.filter(function (item) {
-        return item.id === state.active_retailer.id_retailer;
-      });
-      var filteredValues = state.services.images.values.filter(function (value) {
-        return state.services.images.inputsByRetailer.some(function (retailerInput) {
-          return retailerInput.some(function (input) {
-            return input.id_retailer === state.active_retailer.id_retailer && input.id_image === value.image_id;
+
+      if (state.services.datasheets) {
+        var retailerDatasheets = state.services.datasheets[state.active_retailer.id_retailer];
+        var datasheetsActiveRetailer = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, retailerDatasheets), {}, {
+          data: Object.values(retailerDatasheets.data)
+        });
+        dispatch({
+          type: "SET_DATASHEETS_INPUTS",
+          payload: [datasheetsActiveRetailer, state.services.datasheets.inputs]
+        });
+      }
+
+      if (state.services.descriptions) {
+        var descriptionsActiveRetailer = state.services.descriptions.filter(function (item) {
+          return item.id === state.active_retailer.id_retailer;
+        });
+        dispatch({
+          type: "SET_DESCRIPTIONS_INPUTS",
+          payload: descriptionsActiveRetailer
+        });
+      }
+
+      if (state.services.images) {
+        var filteredValues = state.services.images.values.filter(function (value) {
+          return state.services.images.inputsByRetailer.some(function (retailerInput) {
+            return retailerInput.some(function (input) {
+              return input.id_retailer === state.active_retailer.id_retailer && input.id_image === value.image_id;
+            });
           });
         });
-      });
-      dispatch({
-        type: "SET_DATASHEETS_INPUTS",
-        payload: [datasheetsActiveRetailer, state.services.datasheets.inputs]
-      });
-      dispatch({
-        type: "SET_DESCRIPTIONS_INPUTS",
-        payload: descriptionsActiveRetailer
-      });
-      dispatch({
-        type: "SET_IMAGES_VALUES",
-        payload: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.services.images), {}, {
-          values: filteredValues
-        })
-      });
+        dispatch({
+          type: "SET_IMAGES_VALUES",
+          payload: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.services.images), {}, {
+            values: filteredValues
+          })
+        });
+      }
     };
 
     updateInputsActiveRetailer();
@@ -439,13 +455,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
 
     var hasNoOrder = !state.product.id_order && !state.product.orderId;
-    console.log({
-      originTab: originTab,
-      currentStatus: currentStatus,
-      hasNoOrder: hasNoOrder
-    });
-    var condition = originTab === "RequestWithoutContentoh" && (["R", "CA"].includes(currentStatus) || currentStatus === "RCA" && hasNoOrder) || ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA";
-    return condition;
+    return originTab === "RequestWithoutContentoh" && (["R", "CA"].includes(currentStatus) || currentStatus === "RCA" && hasNoOrder) || ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA";
   };
 
   var canShowSaveButton = function canShowSaveButton(version_status) {
@@ -762,8 +772,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
     var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(result) {
       var _state$product$id_ord, _state$product4, _state$active_retaile2;
 
-      var concept, articleId, orderId, sectionStatusKey, evalStatus, data, retailerId, _newStatuses$newStatu, _state$services_data, res, newStatuses, serviceStatus, updatedProduct, updatedServicesData;
-
+      var concept, articleId, orderId, sectionStatusKey, evalStatus, data, retailerId, res, newStatuses, serviceStatus, updatedProduct;
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
@@ -787,7 +796,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               _context3.prev = 8;
 
               if (!result) {
-                _context3.next = 22;
+                _context3.next = 21;
                 break;
               }
 
@@ -803,25 +812,14 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
             case 14:
               res = _context3.sent;
               newStatuses = JSON.parse(res.data.body);
-              serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")];
-              console.log({
-                product: state.product,
-                newStatuses: newStatuses,
-                serviceStatus: serviceStatus,
-                servicesData: state.services_data
-              }); // Actualizar el producto con los nuevos estados
+              serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")]; // Actualizar el producto con los nuevos estados
 
               updatedProduct = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product), {}, {
-                statusByRetailer: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer), {}, (0, _defineProperty2.default)({}, retailerId, (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer[retailerId]), {}, (0, _defineProperty2.default)({}, concept, (_newStatuses$newStatu = newStatuses === null || newStatuses === void 0 ? void 0 : newStatuses.newStatus) !== null && _newStatuses$newStatu !== void 0 ? _newStatuses$newStatu : serviceStatus))))
+                statusByRetailer: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer), {}, (0, _defineProperty2.default)({}, retailerId, (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer[retailerId]), {}, (0, _defineProperty2.default)({}, concept, serviceStatus))))
+              });
+              console.log({
+                updatedProduct: updatedProduct
               });
-              updatedServicesData = (_state$services_data = state.services_data) === null || _state$services_data === void 0 ? void 0 : _state$services_data.map(function (service) {
-                var _newStatuses$newStatu2;
-
-                return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, service), {}, {
-                  status: (service === null || service === void 0 ? void 0 : service.id_retailer) === retailerId && (service === null || service === void 0 ? void 0 : service.service) === concept ? (_newStatuses$newStatu2 = newStatuses === null || newStatuses === void 0 ? void 0 : newStatuses.newStatus) !== null && _newStatuses$newStatu2 !== void 0 ? _newStatuses$newStatu2 : serviceStatus : service === null || service === void 0 ? void 0 : service.status
-                });
-              }); // console.log({ updatedProduct });
-
               dispatch({
                 type: "SET_PRODUCT",
                 payload: updatedProduct
@@ -837,12 +835,12 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }
               });
 
-            case 22:
-              _context3.next = 28;
+            case 21:
+              _context3.next = 27;
               break;
 
-            case 24:
-              _context3.prev = 24;
+            case 23:
+              _context3.prev = 23;
               _context3.t0 = _context3["catch"](8);
               console.error("Error sending evaluation:", _context3.t0);
               dispatch({
@@ -855,20 +853,20 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }
               });
 
-            case 28:
-              _context3.prev = 28;
+            case 27:
+              _context3.prev = 27;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context3.finish(28);
+              return _context3.finish(27);
 
-            case 31:
+            case 30:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[8, 24, 28, 31]]);
+      }, _callee3, null, [[8, 23, 27, 30]]);
     }));
 
     return function sendEvaluation(_x2) {
@@ -1090,7 +1088,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var handleOnEvaluateAll = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(result) {
-      var _state$product$id_ord2, _state$services_data2, evaluationArray, conceptArray, dataGeneral, userType, status, updatedStatusByRetailer, updatedProduct;
+      var _state$product$id_ord2, _state$services_data, evaluationArray, conceptArray, dataGeneral, userType, status, updatedStatusByRetailer, updatedProduct;
 
       return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
@@ -1110,7 +1108,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 isAproved: result === "A"
               }; // Crear todas las evaluaciones para cada servicio y retailer
 
-              (_state$services_data2 = state.services_data) === null || _state$services_data2 === void 0 ? void 0 : _state$services_data2.forEach(function (ret) {
+              (_state$services_data = state.services_data) === null || _state$services_data === void 0 ? void 0 : _state$services_data.forEach(function (ret) {
                 var service = ret.service,
                     id_retailer = ret.id_retailer;
                 var data = {};
@@ -1240,332 +1238,328 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   };
 
   if (state.loading || !state.services || !state.product) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiProductEdition.AiProductEditionProvider, {
-    isCreatorsEdition: false,
-    state: state,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-      headerTop: headerTop,
-      children: [showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
-        modalId: "version-selector",
-        articleId: state.product.id_article,
-        setVersion: handleOnChangeProductVersion,
-        companyName: company.company_name,
-        currentVersion: state.product.version,
-        setShowVersionSelector: setShowVersionSelector,
-        jwt: token
-      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
-        images: state.images_values,
-        setShowModal: setShowModal,
-        approveRejectButtons: canShowValidationButtons(),
-        sendToFacilitator: handleOnSendEvaluation
-      }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
-        componentsArray: [state.modal.image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: state.modal.image,
-          alt: "modal icon"
-        }, "1"), state.modal.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-          headerType: "retailer-name-header",
-          text: state.modal.title,
-          color: "white"
-        }, "2"), state.modal.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-          headerType: "retailer-name-header",
-          text: state.modal.message,
-          color: "white"
-        }, "3"), state.modal.buttons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            marginTop: "16px"
-          },
-          children: state.modal.buttons.map(function (button, index) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: button.buttonType,
-              label: button.text,
-              onClick: button.action
-            }, index);
-          })
-        }, "4")].filter(Boolean),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    headerTop: headerTop,
+    children: [showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
+      modalId: "version-selector",
+      articleId: state.product.id_article,
+      setVersion: handleOnChangeProductVersion,
+      companyName: company.company_name,
+      currentVersion: state.product.version,
+      setShowVersionSelector: setShowVersionSelector,
+      jwt: token
+    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
+      images: state.images_values,
+      setShowModal: setShowModal,
+      approveRejectButtons: canShowValidationButtons(),
+      sendToFacilitator: handleOnSendEvaluation
+    }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
+      componentsArray: [state.modal.image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: state.modal.image,
+        alt: "modal icon"
+      }, "1"), state.modal.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "retailer-name-header",
+        text: state.modal.title,
+        color: "white"
+      }, "2"), state.modal.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "retailer-name-header",
+        text: state.modal.message,
+        color: "white"
+      }, "3"), state.modal.buttons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: "16px"
+        },
+        children: state.modal.buttons.map(function (button, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            buttonType: button.buttonType,
+            label: button.text,
+            onClick: button.action
+          }, index);
+        })
+      }, "4")].filter(Boolean),
+      onClick: function onClick() {
+        return dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: false,
+            title: "",
+            message: "",
+            image: null
+          }
+        });
+      }
+    }), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
+      show: showRejectModal,
+      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
+        inputType: "textarea",
+        inputId: "modal-message-box",
+        index: 0,
+        color: "white"
+      }),
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "white",
+        label: "Cancelar",
+        size: 12,
         onClick: function onClick() {
-          return dispatch({
-            type: "SET_MODAL",
-            payload: {
-              show: false,
-              title: "",
-              message: "",
-              image: null
-            }
-          });
+          setShowRejectModal(false);
         }
-      }), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
-        title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
-        show: showRejectModal,
-        customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
-          inputType: "textarea",
-          inputId: "modal-message-box",
-          index: 0,
-          color: "white"
-        }),
-        buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-          type: "white",
-          label: "Cancelar",
-          size: 12,
-          onClick: function onClick() {
-            setShowRejectModal(false);
-          }
-        }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-          type: "pink",
-          label: "Aceptar",
-          size: 12,
-          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
-            var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
-            return _regenerator.default.wrap(function _callee6$(_context6) {
-              while (1) {
-                switch (_context6.prev = _context6.next) {
-                  case 0:
-                    elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
-
-                    if (!(!elements || elements.length === 0)) {
-                      _context6.next = 4;
-                      break;
-                    }
+      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Aceptar",
+        size: 12,
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+          var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
+          return _regenerator.default.wrap(function _callee6$(_context6) {
+            while (1) {
+              switch (_context6.prev = _context6.next) {
+                case 0:
+                  elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
+
+                  if (!(!elements || elements.length === 0)) {
+                    _context6.next = 4;
+                    break;
+                  }
 
-                    console.error("Elemento no encontrado");
-                    return _context6.abrupt("return");
+                  console.error("Elemento no encontrado");
+                  return _context6.abrupt("return");
 
-                  case 4:
-                    isMessageEmpty = Array.from(elements).every(function (el) {
-                      var body = el.innerHTML;
-                      return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
-                    });
+                case 4:
+                  isMessageEmpty = Array.from(elements).every(function (el) {
+                    var body = el.innerHTML;
+                    return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
+                  });
 
-                    if (!isMessageEmpty) {
-                      _context6.next = 10;
-                      break;
-                    }
+                  if (!isMessageEmpty) {
+                    _context6.next = 10;
+                    break;
+                  }
 
-                    container = document.querySelector(".container-customComponent");
-                    existingAlert = container.querySelector(".alert-error");
+                  container = document.querySelector(".container-customComponent");
+                  existingAlert = container.querySelector(".alert-error");
 
-                    if (!existingAlert) {
-                      alert = document.createElement("div");
-                      alert.className = "alert-error";
-                      alert.style.cssText = "\n                        color: #d32f2f;\n                        background-color: #ffebee;\n                        border: 1px solid #ef5350;\n                        border-radius: 4px;\n                        padding: 12px 16px;\n                        margin-top: 10px;\n                        font-size: 14px;\n                        display: flex;\n                        align-items: center;\n                        gap: 8px;\n                        font-family: 'Roboto', sans-serif;\n                        text-align: center;\n                      ";
-                      alert.innerHTML = "<span>El mensaje no puede estar vac\xEDo.</span>";
-                      container.appendChild(alert);
-                    }
+                  if (!existingAlert) {
+                    alert = document.createElement("div");
+                    alert.className = "alert-error";
+                    alert.style.cssText = "\n                      color: #d32f2f;\n                      background-color: #ffebee;\n                      border: 1px solid #ef5350;\n                      border-radius: 4px;\n                      padding: 12px 16px;\n                      margin-top: 10px;\n                      font-size: 14px;\n                      display: flex;\n                      align-items: center;\n                      gap: 8px;\n                      font-family: 'Roboto', sans-serif;\n                      text-align: center;\n                    ";
+                    alert.innerHTML = "<span>El mensaje no puede estar vac\xEDo.</span>";
+                    container.appendChild(alert);
+                  }
 
-                    return _context6.abrupt("return");
+                  return _context6.abrupt("return");
 
-                  case 10:
-                    fullMessage = Array.from(elements).map(function (element) {
-                      return element.innerHTML;
-                    }).join("").replace(/<br\s*\/?>/gi, "\n");
-                    _context6.next = 13;
-                    return createComment(fullMessage, token);
+                case 10:
+                  fullMessage = Array.from(elements).map(function (element) {
+                    return element.innerHTML;
+                  }).join("").replace(/<br\s*\/?>/gi, "\n");
+                  _context6.next = 13;
+                  return createComment(fullMessage);
 
-                  case 13:
-                    rejectAll ? handleOnEvaluateAll("R") : handleOnSendEvaluation("R");
-                    setShowRejectModal(false);
+                case 13:
+                  rejectAll ? handleOnEvaluateAll("R") : handleOnSendEvaluation("R");
+                  setShowRejectModal(false);
 
-                  case 15:
-                  case "end":
-                    return _context6.stop();
-                }
+                case 15:
+                case "end":
+                  return _context6.stop();
               }
-            }, _callee6);
-          }))
-        }, "btn-Aceptar")]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
-        setHeaderTop: setHeaderTop,
-        withChat: location === null || location === void 0 ? void 0 : (_location$state5 = location.state) === null || _location$state5 === void 0 ? void 0 : _location$state5.withChat,
-        chatType: location === null || location === void 0 ? void 0 : (_location$state6 = location.state) === null || _location$state6 === void 0 ? void 0 : _location$state6.chatType,
-        productSelected: state.product,
-        token: token,
-        activeRetailer: {
-          id: (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer,
-          name: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.retailer
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "data-container",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "image-data-panel",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewer.ImagePreviewer, {
-            activeImage: (_state$images_values$2 = state.images_values.values[state.current_image]) !== null && _state$images_values$2 !== void 0 ? _state$images_values$2 : {},
-            imagesArray: state.images_values || [],
-            setActiveImage: handleOnChangeCurrentImage,
-            setShowModal: handleOnShowModalGalery
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            lists: state.images_values || [],
-            activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
-            assignationsImages: assig,
-            retailerSelected: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.id_retailer,
-            imagesStatus: ((_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.images_status) || "-",
-            isRetailer: isRetailer,
-            setShowVersionSelector: setShowVersionSelector,
-            version: state.product.version,
-            setImages: handleOnChangeCurrentImage,
-            onClickSave: handleOnClickSaveImages,
-            setAssignation: handleOnChangeAssignations // No se usa?
+            }
+          }, _callee6);
+        }))
+      }, "btn-Aceptar")]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
+      setHeaderTop: setHeaderTop,
+      withChat: location === null || location === void 0 ? void 0 : (_location$state5 = location.state) === null || _location$state5 === void 0 ? void 0 : _location$state5.withChat,
+      chatType: location === null || location === void 0 ? void 0 : (_location$state6 = location.state) === null || _location$state6 === void 0 ? void 0 : _location$state6.chatType,
+      productSelected: state.product,
+      token: token,
+      activeRetailer: {
+        id: (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer,
+        name: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.retailer
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "data-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "image-data-panel",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewer.ImagePreviewer, {
+          activeImage: (_state$images_values$2 = state.images_values.values[state.current_image]) !== null && _state$images_values$2 !== void 0 ? _state$images_values$2 : {},
+          imagesArray: state.images_values || [],
+          setActiveImage: handleOnChangeCurrentImage,
+          setShowModal: handleOnShowModalGalery
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
+          lists: state.images_values || [],
+          activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
+          assignationsImages: assig,
+          retailerSelected: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.id_retailer,
+          imagesStatus: ((_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.images_status) || "-",
+          isRetailer: isRetailer,
+          setShowVersionSelector: setShowVersionSelector,
+          version: state.product.version,
+          setImages: handleOnChangeCurrentImage,
+          onClickSave: handleOnClickSaveImages,
+          setAssignation: handleOnChangeAssignations // No se usa?
 
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "product-information",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "product-information",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "product-information",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
-              headerData: state.product,
-              percent: state.active_percentage.percentagesGeneral.required,
-              activeRetailer: {
-                id: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
-                name: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.retailer,
-                image: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.image
-              },
-              showValidationButtons: canShowValidationButtons(),
-              showApproveRejectAll: canShowValidationButtons(),
-              servicesData: state.services_data ? state.services_data : null,
-              approveAll: handleOnApproveAll,
-              rejectAll: handleOnRejectAll,
-              approve: function approve() {
-                return handleOnSendEvaluation("A");
-              },
-              reject: handleOnReject,
-              setActiveRetailer: handleOnChangeActiveRetailer
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
-              tabsSections: tabsSections,
-              status: getStatusByCurrentServiceAndRetailer(),
-              activeTab: state.active_tab,
-              user: user,
-              isRetailer: isRetailer,
-              assig: assig,
-              version: state.product.version,
-              updatedDescriptions: state.updated_descriptions_inputs,
-              updatedDatasheets: state.updated_datasheets_inputs,
-              updatedImages: state.updated_images_values,
-              images: state.services.images // actions
-              ,
-              downloadImages: handleOnDownloadImages,
-              askToDeleteImages: handleOnAskToDeleteImages,
-              showSaveButton: canShowSaveButton(state.product.version_status),
-              onClickSave: handleOnClickSave // setters
-              ,
-              setActiveTab: handleOnChangeActiveTab,
-              setImageLayout: handleOnSetImageLayout,
-              setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
-              setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
-              setAssignation: handleOnSetAssignation // No se usa?
-              ,
-              setImages: handleOnSetImages // No se usa?
-              // setSelectedImages={handleOnSetSelectedImages} // Se pasa hasta TabsMenu, pero no se usa
-              ,
-              setShowVersionSelector: setShowVersionSelector
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
-              children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [state.active_tab === "Descripción" && (((_state$product6 = state.product) === null || _state$product6 === void 0 ? void 0 : _state$product6.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-                  activeSection: state.active_tab,
-                  inputGroup: state.descriptions_inputs[0],
-                  updatedDescriptions: state.updated_descriptions_inputs,
-                  articleId: (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.id_article,
-                  version: state.product.version,
-                  isShowbox: false,
-                  dinamicHeight: true,
-                  setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
-                  updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
-
-                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-                  text: "No cuentas con este servicio",
-                  headerType: "input-name-header"
-                })), state.active_tab === "Ficha técnica" && (((_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-                  children: (_state$datasheets_inp = state.datasheets_inputs[0]) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp.data) === null || _state$datasheets_inp2 === void 0 ? void 0 : _state$datasheets_inp2.map(function (dataGroup, index) {
-                    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-                      index: index,
-                      articleId: state.product.id_article,
-                      version: state.version,
-                      activeSection: state.active_tab,
-                      inputGroup: dataGroup,
-                      dataInputs: state.datasheets_inputs[1],
-                      activeRetailer: state.services.datasheets[state.active_retailer.id_retailer],
-                      groupData: state.services.datasheets[state.active_retailer.id_retailer].data,
-                      updatedDatasheets: state.updated_datasheets_inputs,
-                      setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
-                      isShowbox: true,
-                      setUpdatedBoxData: function setUpdatedBoxData(e) {
-                        setBoxData(e);
-                      },
-                      updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
-
-                    }, index + "-" + state.active_retailer.retailer);
-                  })
-                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-                  text: "No cuentas con este servicio",
-                  headerType: "input-name-header"
-                })), state.active_tab === "Imágenes" && (((_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                  children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-                    checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
-                    ,
-                    setCheckAll: handleOnSetCheckAll // Toggler de true o false para el checkbox "Seleccionar todo"
-                    ,
-                    setSelectedImages: handleOnSetSelectedImages
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
-                    className: "container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
+            headerData: state.product,
+            percent: state.active_percentage.percentagesGeneral.required,
+            activeRetailer: {
+              id: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
+              name: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.retailer,
+              image: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.image
+            },
+            showValidationButtons: canShowValidationButtons(),
+            showApproveRejectAll: canShowValidationButtons(),
+            servicesData: state.services_data ? state.services_data : null,
+            approveAll: handleOnApproveAll,
+            rejectAll: handleOnRejectAll,
+            approve: function approve() {
+              return handleOnSendEvaluation("A");
+            },
+            reject: handleOnReject,
+            setActiveRetailer: handleOnChangeActiveRetailer
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
+            tabsSections: tabsSections,
+            status: getStatusByCurrentServiceAndRetailer(),
+            activeTab: state.active_tab,
+            user: user,
+            isRetailer: isRetailer,
+            assig: assig,
+            version: state.product.version,
+            updatedDescriptions: state.updated_descriptions_inputs,
+            updatedDatasheets: state.updated_datasheets_inputs,
+            updatedImages: state.updated_images_values,
+            images: state.services.images // actions
+            ,
+            downloadImages: handleOnDownloadImages,
+            askToDeleteImages: handleOnAskToDeleteImages,
+            showSaveButton: canShowSaveButton(state.product.version_status),
+            onClickSave: handleOnClickSave // setters
+            ,
+            setActiveTab: handleOnChangeActiveTab,
+            setImageLayout: handleOnSetImageLayout,
+            setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+            setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+            setAssignation: handleOnSetAssignation // No se usa?
+            ,
+            setImages: handleOnSetImages // No se usa?
+            // setSelectedImages={handleOnSetSelectedImages} // Se pasa hasta TabsMenu, pero no se usa
+            ,
+            setShowVersionSelector: setShowVersionSelector
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
+            children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [state.active_tab === "Descripción" && (((_state$product6 = state.product) === null || _state$product6 === void 0 ? void 0 : _state$product6.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                activeSection: state.active_tab,
+                inputGroup: state.descriptions_inputs[0],
+                updatedDescriptions: state.updated_descriptions_inputs,
+                articleId: (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.id_article,
+                version: state.product.version,
+                isShowbox: false,
+                dinamicHeight: true,
+                setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+                updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
+
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                text: "No cuentas con este servicio",
+                headerType: "input-name-header"
+              })), state.active_tab === "Ficha técnica" && (((_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                children: (_state$datasheets_inp = state.datasheets_inputs[0]) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp.data) === null || _state$datasheets_inp2 === void 0 ? void 0 : _state$datasheets_inp2.map(function (dataGroup, index) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                    index: index,
+                    articleId: state.product.id_article,
+                    version: state.version,
+                    activeSection: state.active_tab,
+                    inputGroup: dataGroup,
+                    dataInputs: state.datasheets_inputs[1],
+                    activeRetailer: state.services.datasheets[state.active_retailer.id_retailer],
+                    groupData: state.services.datasheets[state.active_retailer.id_retailer].data,
+                    updatedDatasheets: state.updated_datasheets_inputs,
+                    setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+                    isShowbox: true,
+                    setUpdatedBoxData: function setUpdatedBoxData(e) {
+                      setBoxData(e);
+                    },
+                    updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
+
+                  }, index + "-" + state.active_retailer.retailer);
+                })
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                text: "No cuentas con este servicio",
+                headerType: "input-name-header"
+              })), state.active_tab === "Imágenes" && (((_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+                  checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
+                  ,
+                  setCheckAll: handleOnSetCheckAll // Toggler de true o false para el checkbox "Seleccionar todo"
+                  ,
+                  setSelectedImages: handleOnSetSelectedImages
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+                  className: "container",
+                  style: {
+                    position: "relative"
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread4.default)((0, _objectSpread4.default)({}, getRootProps({
+                    className: "dropzone ".concat(isDragActive ? "drag-active" : "")
+                  })), {}, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread4.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: "drag-overlay",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                        children: "Suelta las im\xE1genes aqu\xED"
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                      children: thumbs()
+                    })]
+                  })), ((_state$images_values12 = state.images_values) === null || _state$images_values12 === void 0 ? void 0 : _state$images_values12.values.length) === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                     style: {
-                      position: "relative"
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      textAlign: "center",
+                      padding: "40px",
+                      width: "80%",
+                      maxWidth: "500px",
+                      fontFamily: "Arial, sans-serif"
                     },
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread4.default)((0, _objectSpread4.default)({}, getRootProps({
-                      className: "dropzone ".concat(isDragActive ? "drag-active" : "")
-                    })), {}, {
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread4.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                        className: "drag-overlay",
-                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                          children: "Suelta las im\xE1genes aqu\xED"
-                        })
-                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
-                        children: thumbs()
-                      })]
-                    })), ((_state$images_values12 = state.images_values) === null || _state$images_values12 === void 0 ? void 0 : _state$images_values12.values.length) === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                       style: {
-                        position: "absolute",
-                        top: "50%",
-                        left: "50%",
-                        transform: "translate(-50%, -50%)",
-                        textAlign: "center",
-                        padding: "40px",
-                        width: "80%",
-                        maxWidth: "500px",
-                        fontFamily: "Arial, sans-serif"
+                        fontSize: "18px",
+                        color: "#666",
+                        marginBottom: "16px"
                       },
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                        style: {
-                          fontSize: "18px",
-                          color: "#666",
-                          marginBottom: "16px"
-                        },
-                        children: "Este producto no tiene im\xE1genes"
-                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                      children: "Este producto no tiene im\xE1genes"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                      style: {
+                        fontSize: "14px",
+                        color: "#999",
+                        marginBottom: "20px"
+                      },
+                      children: ["Arrastra las im\xE1genes aqu\xED o", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        onClick: open,
                         style: {
-                          fontSize: "14px",
-                          color: "#999",
-                          marginBottom: "20px"
+                          color: "#007bff",
+                          cursor: "pointer",
+                          textDecoration: "underline"
                         },
-                        children: ["Arrastra las im\xE1genes aqu\xED o", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                          onClick: open,
-                          style: {
-                            color: "#007bff",
-                            cursor: "pointer",
-                            textDecoration: "underline"
-                          },
-                          children: "haz clic para abrir el explorador de archivos"
-                        })]
+                        children: "haz clic para abrir el explorador de archivos"
                       })]
                     })]
                   })]
-                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-                  text: "No cuentas con este servicio",
-                  headerType: "input-name-header"
-                }))]
-              })
-            })]
-          })
-        })]
+                })]
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                text: "No cuentas con este servicio",
+                headerType: "input-name-header"
+              }))]
+            })
+          })]
+        })
       })]
-    })
+    })]
   });
 };