contentoh-components-library 21.6.60 → 21.6.61

package/dist/components/pages/ProductEdition/ProductEditionView.js

@@ -0,0 +1,1355 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductEditionView = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+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 _react = require("react");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _material = require("@mui/material");
+
+var _utils = require("../RetailerProductEdition/utils");
+
+var _assets = require("../../../global-files/digital-assets/assets.reducer");
+
+var _GalleryTrayTabs = require("../../molecules/GalleryTrayTabs");
+
+var _InputGroup = require("../../organisms/InputGroup");
+
+var _LinkVariantsModal = require("../../organisms/LinkVariantsModal");
+
+var _UnlinkVariantModal = require("../../organisms/UnlinkVariantModal");
+
+var _VariantGroupModal = require("../../organisms/VariantGroupModal");
+
+var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
+
+var _ChangeStatusModal = _interopRequireDefault(require("../../organisms/ChangeStatusModal"));
+
+var _AiProductEdition = require("../../../contexts/AiProductEdition");
+
+var _errorModal = _interopRequireDefault(require("../../../assets/images/genericModal/errorModal.svg"));
+
+var _useCreatorsProductEdition = require("../CreatorsProductEdition/hooks/useCreatorsProductEdition");
+
+var _constants = require("../CreatorsProductEdition/constants");
+
+var _styles = require("../CreatorsProductEdition/styles");
+
+var _ProductHeader = require("../CreatorsProductEdition/sections/ProductHeader");
+
+var _ImagePanel = require("./sections/ImagePanel");
+
+var _EditionTopBar = require("./sections/EditionTopBar");
+
+var _ServiceTeam = require("./sections/ServiceTeam");
+
+var _ServiceTools = require("./sections/ServiceTools");
+
+var _CatalogServicePanel = require("./sections/CatalogServicePanel");
+
+var _ImagesSection = require("../CreatorsProductEdition/sections/ImagesSection");
+
+var _VariantsPanel = require("../CreatorsProductEdition/sections/VariantsPanel");
+
+var _CommentBox = require("../CreatorsProductEdition/sections/CommentBox");
+
+var _NoticeDialog = require("../CreatorsProductEdition/sections/NoticeDialog");
+
+var _RejectDialog = require("../CreatorsProductEdition/sections/RejectDialog");
+
+var _ImageGallery = require("../CreatorsProductEdition/sections/ImageGallery");
+
+var _VersionDrawer = require("../CreatorsProductEdition/sections/VersionDrawer");
+
+var _tokens = require("../CreatorsProductEdition/sections/tokens");
+
+var _ServicesRail = require("../../organisms/ServicesNavigation/ServicesRail");
+
+var _views = require("../../organisms/ServicesNavigation/views");
+
+var _model = require("../../organisms/ServicesNavigation/model");
+
+var _ServiceHeader = require("./ServiceHeader");
+
+var _services = require("./services");
+
+var _api = require("./api");
+
+var _permissions = require("./permissions");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["attributes"];
+// Lado de la lista de servicios; en celular, el panel sale del mismo lado.
+var RAIL_SIDE = "right"; // Aviso cuando el producto no tiene contratado el servicio de la pestaña.
+
+var NoService = function NoService() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: {
+      fontFamily: _tokens.FONTS.Raleway,
+      fontSize: 14,
+      color: _tokens.COLORS.s5,
+      py: 1
+    },
+    children: "No cuentas con este servicio"
+  });
+};
+
+var ProductEditionView = function ProductEditionView(_ref) {
+  var _state$product, _state$product2, _services$find, _catalogService$api, _catalogService$api$a, _state$errors, _pendingPropagation$k, _family$variants, _variantGroup$members, _variantGroup$group, _state$product3, _state$product4, _state$product5, _state$active_retaile3, _state$product6, _state$product7, _state$product8, _variantGroup$group2, _location$state, _location$state2, _state$active_retaile4, _state$active_retaile5, _state$images_values$, _state$images_values, _state$images_values$2, _state$product9, _state$active_retaile6, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile7, _state$active_retaile8, _state$active_retaile9, _state$collaborator_a, _state$active_retaile10, _state$product10, _state$services2, _state$services2$data, _state$product11, _state$product12, _state$datasheets_inp, _state$datasheets_inp2, _state$product13;
+
+  var _ref$app = _ref.app,
+      app = _ref$app === void 0 ? "creators" : _ref$app,
+      demoServices = _ref.demoServices,
+      tabsSections = _ref.tabsSections,
+      _ref$productSelected = _ref.productSelected,
+      productSelected = _ref$productSelected === void 0 ? {} : _ref$productSelected,
+      _ref$user = _ref.user,
+      user = _ref$user === void 0 ? {} : _ref$user,
+      token = _ref.token,
+      location = _ref.location,
+      _ref$enableDigitalAss = _ref.enableDigitalAssets,
+      enableDigitalAssets = _ref$enableDigitalAss === void 0 ? false : _ref$enableDigitalAss;
+
+  var _useCreatorsProductEd = (0, _useCreatorsProductEdition.useCreatorsProductEdition)({
+    tabsSections: tabsSections,
+    productSelected: productSelected,
+    user: user,
+    token: token,
+    location: location,
+    enableDigitalAssets: enableDigitalAssets
+  }),
+      isRetailer = _useCreatorsProductEd.isRetailer,
+      digitalAssets = _useCreatorsProductEd.digitalAssets,
+      currentTray = _useCreatorsProductEd.currentTray,
+      assetsLoadedFor = _useCreatorsProductEd.assetsLoadedFor,
+      handleOnSetSelectedAssets = _useCreatorsProductEd.handleOnSetSelectedAssets,
+      handleOnSetAllAssetsChecked = _useCreatorsProductEd.handleOnSetAllAssetsChecked,
+      initializeProduct = _useCreatorsProductEd.initializeProduct,
+      loadAuditableData = _useCreatorsProductEd.loadAuditableData,
+      loadData = _useCreatorsProductEd.loadData,
+      handleOnChangeCurrentImage = _useCreatorsProductEd.handleOnChangeCurrentImage,
+      handleOnShowModalGallery = _useCreatorsProductEd.handleOnShowModalGallery,
+      handleOnChangeActiveRetailer = _useCreatorsProductEd.handleOnChangeActiveRetailer,
+      handleOnChangeActiveTab = _useCreatorsProductEd.handleOnChangeActiveTab,
+      handleOnToggleImageLayout = _useCreatorsProductEd.handleOnToggleImageLayout,
+      handleOnToggleObservation = _useCreatorsProductEd.handleOnToggleObservation,
+      handleOnHideObservation = _useCreatorsProductEd.handleOnHideObservation,
+      isAuditorAssigned = _useCreatorsProductEd.isAuditorAssigned,
+      isAssignedAs = _useCreatorsProductEd.isAssignedAs,
+      isUserAssignedToService = _useCreatorsProductEd.isUserAssignedToService,
+      canShowSingleEvaluationButtons = _useCreatorsProductEd.canShowSingleEvaluationButtons,
+      canShowBulkEvaluationButtons = _useCreatorsProductEd.canShowBulkEvaluationButtons,
+      getStatusByCurrentServiceAndRetailer = _useCreatorsProductEd.getStatusByCurrentServiceAndRetailer,
+      handleOnSaveAssets = _useCreatorsProductEd.handleOnSaveAssets,
+      handleOnClickSaveImages = _useCreatorsProductEd.handleOnClickSaveImages,
+      loadFamily = _useCreatorsProductEd.loadFamily,
+      hijosDelProducto = _useCreatorsProductEd.hijosDelProducto,
+      esHijoDeOtro = _useCreatorsProductEd.esHijoDeOtro,
+      puedeAgruparse = _useCreatorsProductEd.puedeAgruparse,
+      handleOnUnlinked = _useCreatorsProductEd.handleOnUnlinked,
+      loadVariantGroup = _useCreatorsProductEd.loadVariantGroup,
+      handleOnLeaveGroup = _useCreatorsProductEd.handleOnLeaveGroup,
+      openFamilyMember = _useCreatorsProductEd.openFamilyMember,
+      handleOnLinkedVariants = _useCreatorsProductEd.handleOnLinkedVariants,
+      handleOnRestoreInheritance = _useCreatorsProductEd.handleOnRestoreInheritance,
+      cambiosDeFichaTecnica = _useCreatorsProductEd.cambiosDeFichaTecnica,
+      cambiosDeDescripciones = _useCreatorsProductEd.cambiosDeDescripciones,
+      handleOnClickSave = _useCreatorsProductEd.handleOnClickSave,
+      handleOnSetUpdatedDescriptions = _useCreatorsProductEd.handleOnSetUpdatedDescriptions,
+      handleOnSetUpdatedDatasheets = _useCreatorsProductEd.handleOnSetUpdatedDatasheets,
+      handleOnDownloadAssets = _useCreatorsProductEd.handleOnDownloadAssets,
+      handleOnAskToDeleteAssets = _useCreatorsProductEd.handleOnAskToDeleteAssets,
+      handleOnAskToDeleteImages = _useCreatorsProductEd.handleOnAskToDeleteImages,
+      handleOnApproveSingleService = _useCreatorsProductEd.handleOnApproveSingleService,
+      handleOnRejectSingleService = _useCreatorsProductEd.handleOnRejectSingleService,
+      sendSingleEvaluation = _useCreatorsProductEd.sendSingleEvaluation,
+      handleOnApproveAllServices = _useCreatorsProductEd.handleOnApproveAllServices,
+      handleOnRejectAllServices = _useCreatorsProductEd.handleOnRejectAllServices,
+      sendBulkEvaluation = _useCreatorsProductEd.sendBulkEvaluation,
+      handleOnChangeAssignations = _useCreatorsProductEd.handleOnChangeAssignations,
+      handleOnSetAssignation = _useCreatorsProductEd.handleOnSetAssignation,
+      handleOnSetImages = _useCreatorsProductEd.handleOnSetImages,
+      handleOnSetCheckAll = _useCreatorsProductEd.handleOnSetCheckAll,
+      handleOnSetSelectedImages = _useCreatorsProductEd.handleOnSetSelectedImages,
+      handleOnSubmitComment = _useCreatorsProductEd.handleOnSubmitComment,
+      handleOnSendEvaluationToFacilitator = _useCreatorsProductEd.handleOnSendEvaluationToFacilitator,
+      isEvaluationFinished = _useCreatorsProductEd.isEvaluationFinished,
+      handleOnChangeProductVersion = _useCreatorsProductEd.handleOnChangeProductVersion,
+      handleRetryLoad = _useCreatorsProductEd.handleRetryLoad,
+      showVersionSelector = _useCreatorsProductEd.showVersionSelector,
+      setShowVersionSelector = _useCreatorsProductEd.setShowVersionSelector,
+      auditableVersion = _useCreatorsProductEd.auditableVersion,
+      setAuditableVersion = _useCreatorsProductEd.setAuditableVersion,
+      headerTop = _useCreatorsProductEd.headerTop,
+      setHeaderTop = _useCreatorsProductEd.setHeaderTop,
+      shotThd = _useCreatorsProductEd.shotThd,
+      setShotThd = _useCreatorsProductEd.setShotThd,
+      observation = _useCreatorsProductEd.observation,
+      setObservation = _useCreatorsProductEd.setObservation,
+      showRejectModal = _useCreatorsProductEd.showRejectModal,
+      setShowRejectModal = _useCreatorsProductEd.setShowRejectModal,
+      isObservationVisible = _useCreatorsProductEd.isObservationVisible,
+      setObservationVisible = _useCreatorsProductEd.setObservationVisible,
+      imageLayout = _useCreatorsProductEd.imageLayout,
+      setImageLayout = _useCreatorsProductEd.setImageLayout,
+      crossComment = _useCreatorsProductEd.crossComment,
+      setCrossComment = _useCreatorsProductEd.setCrossComment,
+      statusArray = _useCreatorsProductEd.statusArray,
+      setStatusArray = _useCreatorsProductEd.setStatusArray,
+      rejectAll = _useCreatorsProductEd.rejectAll,
+      setRejectAll = _useCreatorsProductEd.setRejectAll,
+      showLinkVariants = _useCreatorsProductEd.showLinkVariants,
+      setShowLinkVariants = _useCreatorsProductEd.setShowLinkVariants,
+      family = _useCreatorsProductEd.family,
+      setFamily = _useCreatorsProductEd.setFamily,
+      showFamily = _useCreatorsProductEd.showFamily,
+      setShowFamily = _useCreatorsProductEd.setShowFamily,
+      loadingVariant = _useCreatorsProductEd.loadingVariant,
+      setLoadingVariant = _useCreatorsProductEd.setLoadingVariant,
+      variantGroup = _useCreatorsProductEd.variantGroup,
+      setVariantGroup = _useCreatorsProductEd.setVariantGroup,
+      showGroup = _useCreatorsProductEd.showGroup,
+      setShowGroup = _useCreatorsProductEd.setShowGroup,
+      showGroupModal = _useCreatorsProductEd.showGroupModal,
+      setShowGroupModal = _useCreatorsProductEd.setShowGroupModal,
+      porDesvincular = _useCreatorsProductEd.porDesvincular,
+      setPorDesvincular = _useCreatorsProductEd.setPorDesvincular,
+      avisoFamilia = _useCreatorsProductEd.avisoFamilia,
+      setAvisoFamilia = _useCreatorsProductEd.setAvisoFamilia,
+      pendingPropagation = _useCreatorsProductEd.pendingPropagation,
+      setPendingPropagation = _useCreatorsProductEd.setPendingPropagation,
+      preparandoPropagacion = _useCreatorsProductEd.preparandoPropagacion,
+      setPreparandoPropagacion = _useCreatorsProductEd.setPreparandoPropagacion,
+      auditServices = _useCreatorsProductEd.auditServices,
+      setAuditServices = _useCreatorsProductEd.setAuditServices,
+      auditDatasheets = _useCreatorsProductEd.auditDatasheets,
+      setAuditDatasheets = _useCreatorsProductEd.setAuditDatasheets,
+      auditDescriptions = _useCreatorsProductEd.auditDescriptions,
+      setAuditDescriptions = _useCreatorsProductEd.setAuditDescriptions,
+      showModal = _useCreatorsProductEd.showModal,
+      setShowModal = _useCreatorsProductEd.setShowModal,
+      compare = _useCreatorsProductEd.compare,
+      setCompare = _useCreatorsProductEd.setCompare,
+      openChangeStatusModal = _useCreatorsProductEd.openChangeStatusModal,
+      setOpenChangeStatusModal = _useCreatorsProductEd.setOpenChangeStatusModal,
+      assetNotices = _useCreatorsProductEd.assetNotices,
+      setAssetNotices = _useCreatorsProductEd.setAssetNotices,
+      activeTray = _useCreatorsProductEd.activeTray,
+      setActiveTray = _useCreatorsProductEd.setActiveTray,
+      state = _useCreatorsProductEd.state,
+      dispatch = _useCreatorsProductEd.dispatch,
+      saveDatasheets = _useCreatorsProductEd.saveDatasheets,
+      saveDescriptions = _useCreatorsProductEd.saveDescriptions,
+      updateImages = _useCreatorsProductEd.updateImages,
+      deleteImages = _useCreatorsProductEd.deleteImages,
+      saveAssets = _useCreatorsProductEd.saveAssets,
+      registerUploadedAssets = _useCreatorsProductEd.registerUploadedAssets,
+      handleOnDownloadImages = _useCreatorsProductEd.handleOnDownloadImages,
+      createComment = _useCreatorsProductEd.createComment,
+      getRootProps = _useCreatorsProductEd.getRootProps,
+      getInputProps = _useCreatorsProductEd.getInputProps,
+      isDragActive = _useCreatorsProductEd.isDragActive,
+      open = _useCreatorsProductEd.open;
+  /* ---------------------------------------------------------------------- */
+
+  /* Navegación por servicios                                                */
+
+  /* ---------------------------------------------------------------------- */
+
+
+  (0, _react.useEffect)(function () {
+    if (app !== "creators") {
+      console.warn("[ProductEdition] app \xAB".concat(app, "\xBB: los permisos de Content Management llegan en la fase 2; por ahora se usan los de Creators."));
+    }
+  }, [app]);
+  var isDesktop = (0, _material.useMediaQuery)("(min-width:900px)"); // Auditores, para poner nombre al auditor del producto en el equipo del
+  // servicio (`collaborator_assignations` solo trae especialistas y
+  // coordinadores). Es la misma consulta que hace `fetchUsers` para el rol 6.
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      auditors = _useState2[0],
+      setAuditors = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!token) return undefined;
+    var alive = true;
+
+    _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=6"), {
+      headers: {
+        Authorization: token
+      }
+    }).then(function (response) {
+      var _response$data$data, _response$data;
+
+      return alive && setAuditors((_response$data$data = (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.data) !== null && _response$data$data !== void 0 ? _response$data$data : []);
+    }).catch(function () {});
+
+    return function () {
+      alive = false;
+    };
+  }, [token]);
+  /*
+    Servicios del producto desde el backend (GET /product-services), leídos de
+    las columnas del catálogo de rel_order_services: los de siempre y los
+    nuevos, con su estatus, su equipo y lo que la persona puede hacer.
+     Se vuelven a pedir cuando el flujo actual cambia el producto o sus estatus
+    (evaluar, asignar, guardar), para que la lista no se quede atrás. Si el
+    endpoint no responde, la lista se arma como antes, con los campos del
+    producto (buildEditionServices). Las historias usan `demoServices`.
+  */
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      productServices = _useState4[0],
+      setProductServices = _useState4[1];
+
+  var productServicesRequest = (0, _react.useRef)(0);
+  var articleId = (_state$product = state.product) === null || _state$product === void 0 ? void 0 : _state$product.id_article;
+  var orderId = (_state$product2 = state.product) === null || _state$product2 === void 0 ? void 0 : _state$product2.id_order;
+  var refreshProductServices = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var request, data;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!token || !articleId || !orderId || demoServices)) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 2:
+            productServicesRequest.current += 1;
+            request = productServicesRequest.current;
+            _context.prev = 4;
+            _context.next = 7;
+            return (0, _api.fetchProductServices)({
+              articleId: articleId,
+              orderId: orderId,
+              token: token
+            });
+
+          case 7:
+            data = _context.sent;
+
+            // Solo la respuesta más reciente (un producto que se abrió después gana),
+            // y solo si trae la lista: si no, se queda la que arma el producto.
+            if (request === productServicesRequest.current && Array.isArray(data === null || data === void 0 ? void 0 : data.services)) {
+              setProductServices(data);
+            }
+
+            _context.next = 14;
+            break;
+
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](4);
+            console.warn("[ProductEdition] servicios del producto:", _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[4, 11]]);
+  })), [token, articleId, orderId, demoServices]);
+  (0, _react.useEffect)(function () {
+    setProductServices(null);
+  }, [articleId, orderId]);
+  (0, _react.useEffect)(function () {
+    refreshProductServices();
+  }, [refreshProductServices, state.product, state.services_data]);
+  var services = (0, _react.useMemo)(function () {
+    var _state$active_retaile, _state$active_retaile2;
+
+    return productServices ? (0, _services.buildServicesFromApi)({
+      productServices: productServices,
+      user: user,
+      activeRetailerId: (_state$active_retaile = state.active_retailer) === null || _state$active_retaile === void 0 ? void 0 : _state$active_retaile.id_retailer
+    }) : (0, _services.buildEditionServices)({
+      product: state.product,
+      user: user,
+      servicesData: state.services_data,
+      activeRetailerId: (_state$active_retaile2 = state.active_retailer) === null || _state$active_retaile2 === void 0 ? void 0 : _state$active_retaile2.id_retailer,
+      collaboratorAssignations: state.collaborator_assignations,
+      auditors: auditors,
+      demoServices: demoServices
+    });
+  }, [productServices, state.product, user, state.services_data, state.active_retailer, state.collaborator_assignations, auditors, demoServices]);
+  var single = services.length === 1;
+  var showFilter = (0, _model.hasUsefulFilter)(services, user === null || user === void 0 ? void 0 : user.id_user); // `null` hasta que cargan los servicios; después, el servicio abierto o SUMMARY.
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selected = _useState6[0],
+      setSelected = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("all"),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      filter = _useState8[0],
+      setFilter = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      railCollapsed = _useState10[0],
+      setRailCollapsed = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      railOpen = _useState12[0],
+      setRailOpen = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      pendingSelection = _useState14[0],
+      setPendingSelection = _useState14[1];
+  /*
+    Al cargar se abre, en este orden:
+      1. el único servicio, si solo hay uno;
+      2. lo primero que le toca a la persona;
+      3. su primer servicio, si trabaja solo algunos (un especialista);
+      4. el Resumen (quien ve todo: administración, coordinación, auditoría).
+  */
+
+
+  (0, _react.useEffect)(function () {
+    // Se espera a `services_data`: antes, los estatus son los generales del
+    // producto y no los de la cadena activa, y se elegiría con datos viejos.
+    if (selected !== null || services.length === 0 || !state.services_data) return;
+    var first = (0, _model.initialSelection)(services, user === null || user === void 0 ? void 0 : user.id_user);
+    var mine = services.filter(function (item) {
+      return item.mine;
+    });
+
+    if (first === _model.SUMMARY && mine.length > 0 && mine.length < services.length) {
+      first = mine[0].service_name;
+    }
+
+    setFilter((0, _model.defaultFilter)(services, user === null || user === void 0 ? void 0 : user.id_user));
+    openService(first); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [services, state.services_data]); // Si el hook cambia de pestaña por su cuenta, la lista lo sigue.
+
+  (0, _react.useEffect)(function () {
+    var current = services.find(function (item) {
+      return item.service_name === selected;
+    });
+    var fromTab = (0, _permissions.serviceOfTab)(state.active_tab);
+    if (current !== null && current !== void 0 && current.tab && fromTab && fromTab !== selected) setSelected(fromTab); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.active_tab]);
+  var selectedService = (_services$find = services.find(function (item) {
+    return item.service_name === selected;
+  })) !== null && _services$find !== void 0 ? _services$find : null;
+  var isSummary = selected === _model.SUMMARY;
+  var isClassic = Boolean(selectedService === null || selectedService === void 0 ? void 0 : selectedService.tab); // Servicio del catálogo (o de siempre sin editor) que llegó del backend.
+
+  var catalogService = !isClassic && !isSummary && selectedService !== null && selectedService !== void 0 && selectedService.api ? selectedService : null; // A quién se puede asignar en el servicio del catálogo abierto (view=assignables).
+
+  var _useState15 = (0, _react.useState)({}),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      assignables = _useState16[0],
+      setAssignables = _useState16[1];
+
+  var catalogServiceName = catalogService === null || catalogService === void 0 ? void 0 : catalogService.service_name;
+  var catalogCanAssign = Boolean(catalogService === null || catalogService === void 0 ? void 0 : (_catalogService$api = catalogService.api) === null || _catalogService$api === void 0 ? void 0 : (_catalogService$api$a = _catalogService$api.actions) === null || _catalogService$api$a === void 0 ? void 0 : _catalogService$api$a.assign);
+  (0, _react.useEffect)(function () {
+    var _catalogService$api$r;
+
+    setAssignables({});
+    if (!catalogServiceName || !catalogCanAssign || !token) return undefined;
+    var alive = true;
+    var roles = ((_catalogService$api$r = catalogService.api.roles) !== null && _catalogService$api$r !== void 0 ? _catalogService$api$r : []).filter(function (role) {
+      return role === "especialist" || role === "facilitator";
+    });
+    Promise.all(roles.map(function (role) {
+      return (0, _api.fetchAssignables)({
+        serviceName: catalogServiceName,
+        role: role,
+        token: token
+      }).then(function (users) {
+        return [role, users];
+      }).catch(function () {
+        return [role, []];
+      });
+    })).then(function (entries) {
+      return alive && setAssignables(Object.fromEntries(entries));
+    });
+    return function () {
+      alive = false;
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [catalogServiceName, catalogCanAssign, token]);
+
+  var handleOnSetCatalogStatus = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(statusName, retailerIds) {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return (0, _api.setServiceStatus)({
+                articleId: articleId,
+                orderId: orderId,
+                serviceName: catalogServiceName,
+                statusName: statusName,
+                retailerIds: retailerIds,
+                token: token
+              });
+
+            case 2:
+              _context2.next = 4;
+              return refreshProductServices();
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function handleOnSetCatalogStatus(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var handleOnAssignCatalogService = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(role, userId) {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return (0, _api.assignService)({
+                articleId: articleId,
+                orderId: orderId,
+                serviceName: catalogServiceName,
+                role: role,
+                userId: userId,
+                token: token
+              });
+
+            case 3:
+              _context3.next = 8;
+              break;
+
+            case 5:
+              _context3.prev = 5;
+              _context3.t0 = _context3["catch"](0);
+              console.warn("[ProductEdition] asignar servicio:", _context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.message);
+
+            case 8:
+              _context3.next = 10;
+              return refreshProductServices();
+
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 5]]);
+    }));
+
+    return function handleOnAssignCatalogService(_x3, _x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var activeConcept = (0, _permissions.serviceOfTab)(state.active_tab); // Permisos del servicio abierto (ver permissions.js).
+
+  var userCanSave = (0, _permissions.canSave)(state.product, user, activeConcept);
+  var userCanEvaluate = Boolean(state.product && state.services_data) && (0, _permissions.canEvaluate)(state.product, user, activeConcept, getStatusByCurrentServiceAndRetailer());
+
+  var hasUnsavedChanges = function hasUnsavedChanges() {
+    var _state$updated_descri, _state$updated_datash, _state$updated_images, _state$services, _state$services$image, _state$services$image2, _state$services$image3;
+
+    return ((_state$updated_descri = state.updated_descriptions_inputs) === null || _state$updated_descri === void 0 ? void 0 : _state$updated_descri.length) > 0 || ((_state$updated_datash = state.updated_datasheets_inputs) === null || _state$updated_datash === void 0 ? void 0 : _state$updated_datash.length) > 0 || ((_state$updated_images = state.updated_images_values) === null || _state$updated_images === void 0 ? void 0 : _state$updated_images.length) > 0 || ((_state$services = state.services) === null || _state$services === void 0 ? void 0 : (_state$services$image = _state$services.images) === null || _state$services$image === void 0 ? void 0 : (_state$services$image2 = _state$services$image.values) === null || _state$services$image2 === void 0 ? void 0 : (_state$services$image3 = _state$services$image2.filter(function (file) {
+      return !file.id;
+    })) === null || _state$services$image3 === void 0 ? void 0 : _state$services$image3.length) > 0;
+  };
+
+  function openService(name) {
+    var target = services.find(function (item) {
+      return item.service_name === name;
+    });
+    if (target !== null && target !== void 0 && target.tab && target.tab !== state.active_tab) handleOnChangeActiveTab(target.tab);
+    setSelected(name);
+    setRailOpen(false);
+  } // Igual que la barra de pestañas: cambiar con cambios sin guardar pregunta.
+
+
+  var requestService = function requestService(name) {
+    if (name === selected) return;
+    if (hasUnsavedChanges()) setPendingSelection(name);else openService(name);
+  };
+
+  var confirmServiceChange = function confirmServiceChange() {
+    handleOnSetUpdatedDescriptions && handleOnSetUpdatedDescriptions([]);
+    handleOnSetUpdatedDatasheets && handleOnSetUpdatedDatasheets([]);
+    handleOnSetImages && handleOnSetImages({});
+    openService(pendingSelection);
+    setPendingSelection(null);
+  };
+
+  var pendingCount = services.filter(function (item) {
+    return (0, _model.isPendingFor)(item, user === null || user === void 0 ? void 0 : user.id_user);
+  }).length;
+
+  var renderRail = function renderRail(variant) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServicesRail.ServicesRail, {
+      variant: variant,
+      services: services,
+      selected: selected !== null && selected !== void 0 ? selected : _model.SUMMARY,
+      onSelect: requestService,
+      userId: user === null || user === void 0 ? void 0 : user.id_user,
+      filter: filter,
+      onFilterChange: setFilter,
+      showFilter: showFilter,
+      collapsed: railCollapsed,
+      onToggleCollapsed: function onToggleCollapsed() {
+        return setRailCollapsed(function (value) {
+          return !value;
+        });
+      },
+      onClose: variant === "drawer" ? function () {
+        return setRailOpen(false);
+      } : undefined,
+      side: RAIL_SIDE
+    });
+  };
+
+  var ProductEditionSkeleton = function ProductEditionSkeleton() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      headerTop: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        px: 1.5,
+        py: 1,
+        pb: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "text",
+          width: "min(300px, 60%)",
+          height: 40
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
+          spacing: 2,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "circular",
+            width: 32,
+            height: 32
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "data-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "image-data-panel",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "rounded",
+            width: "100%",
+            height: 320
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+            direction: "row",
+            spacing: 2,
+            justifyContent: "center",
+            children: [1, 2, 3, 4].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 60,
+                height: 80
+              }, item);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            mt: 2,
+            children: [1, 2, 3, 4].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
+                justifyContent: "space-between",
+                py: 1,
+                borderBottom: "1px solid #f0f0f0",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "text",
+                  width: "40%"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "text",
+                  width: "20%"
+                })]
+              }, item);
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "product-information",
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: "80%",
+              height: 50
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: "30%",
+                height: 24
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: "45%",
+                height: 24
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            gap: 4,
+            pb: 1,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: "28%",
+              height: 45
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: "28%",
+              height: 45
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: "28%",
+              height: 45
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            children: [1, 2, 3].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 1,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "text",
+                    width: "30%",
+                    height: 24
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "rounded",
+                    width: "min(175px, 35%)",
+                    height: 25,
+                    sx: {
+                      borderRadius: "7.5px"
+                    }
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "rounded",
+                  width: "100%",
+                  height: 70
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  mt: 0.5,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "text",
+                    width: 60
+                  })
+                })]
+              }, item);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            mt: "auto",
+            pt: 4,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "rounded",
+              width: "100%",
+              height: 120
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 2,
+              mt: 2,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: "min(180px, 45%)",
+                height: 45,
+                sx: {
+                  borderRadius: "24px"
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: "min(180px, 45%)",
+                height: 45,
+                sx: {
+                  borderRadius: "24px"
+                }
+              })]
+            })]
+          })]
+        })]
+      })]
+    });
+  }; // Si la carga falló y no tenemos servicios, mostramos un estado de error con
+  // opción de reintentar en vez de quedarnos colgados en el skeleton.
+
+
+  if (!state.loading && ((_state$errors = state.errors) === null || _state$errors === void 0 ? void 0 : _state$errors.length) > 0 && !state.services) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    headerTop: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 2,
+      sx: {
+        minHeight: "60vh",
+        textAlign: "center",
+        padding: "40px"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _errorModal.default,
+        alt: "error",
+        width: 64,
+        height: 64
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway,
+          fontSize: 16,
+          color: _tokens.COLORS.s5
+        },
+        children: "No pudimos cargar el producto"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "#666",
+          maxWidth: 420,
+          fontSize: 14
+        },
+        children: state.errors[0] || "Ocurrió un error al cargar la información del producto."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        disableElevation: true,
+        onClick: handleRetryLoad,
+        sx: {
+          textTransform: "none",
+          borderRadius: "20px",
+          px: 4,
+          bgcolor: _tokens.COLORS.magenta_s2,
+          "&:hover": {
+            bgcolor: _tokens.COLORS.secondary_magenta
+          }
+        },
+        children: "Reintentar"
+      })]
+    })
+  });
+  /*
+    `images_values` entra al guard junto a `services` y `product`.
+     React 17 no agrupa los dispatch que van después de un `await`: cada uno
+    re-renderiza al instante. En `loadData` el orden es SET_SERVICES →
+    …_INPUTS → SET_IMAGES_VALUES, así que había renders intermedios con
+    `services` ya puesto —el guard los dejaba pasar— y el resto todavía en null.
+    El cuerpo de abajo lee `datasheets_inputs[1]`, `descriptions_inputs[0]` y
+    `images_values.values` sin protección, y tumbaba la pantalla entera.
+     Se comprueba `images_values` y no cada uno: es el ÚLTIMO que `loadData`
+    despacha, así que si ya está, los anteriores también.
+  */
+
+  if (state.loading || !state.services || !state.product || !state.images_values) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductEditionSkeleton, {})
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AiProductEdition.AiProductEditionProvider, {
+    isCreatorsEdition: true,
+    user: user,
+    token: token,
+    state: state,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        flex: 1,
+        minWidth: 0,
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+        headerTop: headerTop,
+        children: [pendingPropagation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PropagateChangesModal.PropagateChangesModal, {
+          changedAttributes: pendingPropagation.cambios,
+          kind: (_pendingPropagation$k = pendingPropagation.kind) !== null && _pendingPropagation$k !== void 0 ? _pendingPropagation$k : "datasheet",
+          variants: esHijoDeOtro ? [] : ((_family$variants = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants !== void 0 ? _family$variants : []).filter(function (v) {
+            return !v.isCurrent;
+          }),
+          groupMembers: ((_variantGroup$members = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.members) !== null && _variantGroup$members !== void 0 ? _variantGroup$members : []).filter(function (m) {
+            return !m.isCurrent;
+          }),
+          groupCode: (_variantGroup$group = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) !== null && _variantGroup$group !== void 0 ? _variantGroup$group : null,
+          saving: state.saving,
+          onCancel: function onCancel() {
+            return setPendingPropagation(null);
+          },
+          onConfirm: function onConfirm(propagation) {
+            var esDescripcion = pendingPropagation.kind === "description";
+            setPendingPropagation(null);
+
+            if (!propagation) {
+              if (esDescripcion) saveDescriptions(token);else saveDatasheets(token);
+              return;
+            }
+            /*
+              El diálogo habla de «atributos» porque es el mismo componente
+              para las dos pestañas. Al guardar hay que ponerlo en la lista
+              que corresponde: el servidor recibe `attributes` o
+              `descriptions`, nunca una por la otra.
+            */
+
+
+            var attributes = propagation.attributes,
+                destinos = (0, _objectWithoutProperties2.default)(propagation, _excluded);
+
+            if (esDescripcion) {
+              saveDescriptions(token, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, destinos), {}, {
+                descriptions: attributes
+              }));
+            } else {
+              saveDatasheets(token, propagation);
+            }
+          }
+        }), showLinkVariants && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkVariantsModal.LinkVariantsModal, {
+          articleId: (_state$product3 = state.product) === null || _state$product3 === void 0 ? void 0 : _state$product3.id_article,
+          articleName: (_state$product4 = state.product) === null || _state$product4 === void 0 ? void 0 : _state$product4.name,
+          articleUpc: (_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.upc,
+          activeRetailerId: (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer,
+          token: token,
+          onClose: function onClose() {
+            return setShowLinkVariants(false);
+          },
+          onLinked: handleOnLinkedVariants
+        }), showGroupModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VariantGroupModal.VariantGroupModal, {
+          articleId: (_state$product6 = state.product) === null || _state$product6 === void 0 ? void 0 : _state$product6.id_article,
+          articleName: (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.name,
+          articleUpc: (_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.upc,
+          currentGroup: (_variantGroup$group2 = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) !== null && _variantGroup$group2 !== void 0 ? _variantGroup$group2 : null,
+          token: token,
+          onClose: function onClose() {
+            return setShowGroupModal(false);
+          },
+          onSaved: function onSaved(result) {
+            setVariantGroup(result);
+            setShowGroup(true);
+          }
+        }), porDesvincular && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UnlinkVariantModal.UnlinkVariantModal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, porDesvincular), {}, {
+          token: token,
+          onClose: function onClose() {
+            return setPorDesvincular(null);
+          },
+          onUnlinked: handleOnUnlinked
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RejectDialog.RejectDialog, {
+          open: showRejectModal,
+          rejectAll: rejectAll,
+          onCancel: function onCancel() {
+            return setShowRejectModal(false);
+          },
+          onConfirm: /*#__PURE__*/function () {
+            var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(message) {
+              return _regenerator.default.wrap(function _callee4$(_context4) {
+                while (1) {
+                  switch (_context4.prev = _context4.next) {
+                    case 0:
+                      _context4.next = 2;
+                      return createComment(message, token);
+
+                    case 2:
+                      rejectAll ? sendBulkEvaluation("R") : sendSingleEvaluation("R");
+                      setShowRejectModal(false);
+
+                    case 4:
+                    case "end":
+                      return _context4.stop();
+                  }
+                }
+              }, _callee4);
+            }));
+
+            return function (_x5) {
+              return _ref5.apply(this, arguments);
+            };
+          }()
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoticeDialog.NoticeDialog, {
+          modal: state.modal,
+          onClose: function onClose() {
+            return dispatch({
+              type: "SET_MODAL",
+              payload: {
+                show: false,
+                title: "",
+                message: "",
+                image: null
+              }
+            });
+          }
+        }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGallery.ImageGallery, {
+          images: state.images_values,
+          initialIndex: state.current_image,
+          setShowModal: setShowModal,
+          approveRejectButtons: canShowSingleEvaluationButtons(),
+          sendToFacilitator: handleOnSendEvaluationToFacilitator
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionDrawer.VersionDrawer, {
+          open: showVersionSelector,
+          modalId: "version-selector",
+          articleId: state.product.id_article,
+          setVersion: handleOnChangeProductVersion,
+          companyName: state.product.company,
+          currentVersion: state.product.version,
+          setShowVersionSelector: setShowVersionSelector,
+          jwt: token
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionTopBar.EditionTopBar, {
+          setHeaderTop: setHeaderTop,
+          auditableVersion: auditableVersion,
+          setCompare: setCompare,
+          isAuditor: [1, 6].includes(user.id_role),
+          withChat: location === null || location === void 0 ? void 0 : (_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.withChat,
+          chatType: location === null || location === void 0 ? void 0 : (_location$state2 = location.state) === null || _location$state2 === void 0 ? void 0 : _location$state2.chatType,
+          productSelected: state.product,
+          token: token,
+          activeRetailer: {
+            id: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.id_retailer,
+            name: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.retailer
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "data-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "image-data-panel",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePanel.ImagePanel
+            /*
+              `images_values` puede ser null en pleno render: React 17 no
+              agrupa los dispatch que van después de un `await` y hay un render
+              con `services` puesto y las imágenes todavía no (ver el guard de
+              arriba). Por eso las interrogaciones.
+            */
+            , {
+              imagesArray: state.images_values || [],
+              activeImage: (_state$images_values$ = (_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : (_state$images_values$2 = _state$images_values.values) === null || _state$images_values$2 === void 0 ? void 0 : _state$images_values$2[state.current_image]) !== null && _state$images_values$ !== void 0 ? _state$images_values$ : {},
+              currentIndex: state.current_image,
+              setActiveImage: handleOnChangeCurrentImage,
+              setShowModal: handleOnShowModalGallery // datos de la imagen
+              ,
+              lists: state.images_values || [],
+              assignationsImages: state.collaborator_assignations["Imágenes"],
+              imagesStatus: ((_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.images_status) || "-",
+              retailerSelected: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
+              isRetailer: isRetailer,
+              version: state.product.version,
+              shotThd: shotThd,
+              setShowVersionSelector: setShowVersionSelector,
+              setImages: handleOnChangeCurrentImage,
+              setAssignation: handleOnChangeAssignations,
+              onClickSave: handleOnClickSaveImages,
+              showSaveButton: userCanSave
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "product-information",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductHeader.ProductHeader // states
+            , {
+              headerData: state.product,
+              productObservation: observation,
+              percent: (_state$active_percent = (_state$active_percent2 = state.active_percentage) === null || _state$active_percent2 === void 0 ? void 0 : (_state$active_percent3 = _state$active_percent2.percentagesGeneral) === null || _state$active_percent3 === void 0 ? void 0 : _state$active_percent3.required) !== null && _state$active_percent !== void 0 ? _state$active_percent : 0,
+              activeRetailer: {
+                id: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.id_retailer,
+                name: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.retailer,
+                image: (_state$active_retaile9 = state.active_retailer) === null || _state$active_retaile9 === void 0 ? void 0 : _state$active_retaile9.image
+              },
+              servicesData: state.services_data ? state.services_data : null,
+              isObservationVisible: isObservationVisible // actions
+              ,
+              setActiveRetailer: handleOnChangeActiveRetailer,
+              approve: handleOnApproveSingleService,
+              approveAll: handleOnApproveAllServices,
+              reject: handleOnRejectSingleService,
+              rejectAll: handleOnRejectAllServices,
+              toggleObservation: handleOnToggleObservation,
+              hideObservation: handleOnHideObservation // sendToFacilitator={handleOnSendEvaluationToFacilitator} // No se usa?
+              // validations
+              // La evaluación de todos los servicios a la vez sigue en el hook
+              // (canShowBulkEvaluationButtons); pasa a permissions.js en la fase 2.
+              ,
+              showApproveRejectAll: canShowBulkEvaluationButtons() || userCanSave // Validar o rechazar aplica al servicio abierto con editor: no en
+              // el Resumen ni en los servicios sin editor.
+              ,
+              showValidationButtons: isClassic && userCanEvaluate && userCanSave
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VariantsPanel.VariantsPanel, {
+              product: state.product,
+              esHijoDeOtro: esHijoDeOtro,
+              hijosDelProducto: hijosDelProducto,
+              family: family,
+              showFamily: showFamily,
+              setShowFamily: setShowFamily,
+              loadFamily: loadFamily,
+              loadingVariant: loadingVariant,
+              avisoFamilia: avisoFamilia,
+              openFamilyMember: openFamilyMember,
+              setPorDesvincular: setPorDesvincular,
+              setShowLinkVariants: setShowLinkVariants,
+              puedeAgruparse: puedeAgruparse,
+              variantGroup: variantGroup,
+              showGroup: showGroup,
+              setShowGroup: setShowGroup,
+              setShowGroupModal: setShowGroupModal,
+              handleOnLeaveGroup: handleOnLeaveGroup
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceHeader.ServiceHeader, {
+              service: selectedService,
+              isSummary: isSummary,
+              subtitle: isSummary ? "".concat(services.length, " servicios \xB7 ").concat(pendingCount, " te ").concat(pendingCount === 1 ? "toca" : "tocan", " a ti") : null,
+              onOpenRail: !single && !isDesktop ? function () {
+                return setRailOpen(true);
+              } : undefined,
+              team: isClassic ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceTeam.ServiceTeam, {
+                assignees: selectedService.assignees,
+                userId: user === null || user === void 0 ? void 0 : user.id_user,
+                canAssign: (0, _permissions.canAssign)(user),
+                assig: (_state$collaborator_a = state.collaborator_assignations) === null || _state$collaborator_a === void 0 ? void 0 : _state$collaborator_a[state.active_tab] // La que sí asigna (POST a asignaciones y actualiza el
+                // producto). La barra de pestañas usaba `handleOnSetAssignation`,
+                // que en el hook está vacía: asignar desde ahí no hacía nada.
+                ,
+                setAssignation: handleOnChangeAssignations,
+                resetKey: state.active_tab
+              }) : catalogService ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceTeam.ServiceTeam, {
+                assignees: catalogService.assignees,
+                userId: user === null || user === void 0 ? void 0 : user.id_user,
+                roles: catalogService.api.roles,
+                canAssign: catalogCanAssign,
+                assig: {
+                  collaborators: assignables
+                },
+                setAssignation: handleOnAssignCatalogService,
+                resetKey: catalogService.service_name
+              }) : null,
+              children: isClassic && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceTools.ServiceTools, {
+                imagesSection: state.active_tab === "Imágenes",
+                imageLayout: imageLayout,
+                setImageLayout: handleOnToggleImageLayout // El botón actúa sobre la bandeja visible: en activos descargaba
+                // las imágenes del producto, que no es lo que el usuario pidió.
+                ,
+                downloadImages: currentTray === _GalleryTrayTabs.TRAYS.ASSETS ? handleOnDownloadAssets : handleOnDownloadImages,
+                askToDeleteImages: handleOnAskToDeleteImages,
+                onClickSave: handleOnClickSave,
+                showSaveButton: userCanSave,
+                version: state.product.version,
+                setShowVersionSelector: setShowVersionSelector
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "services-information-container",
+              id: "services-information-container",
+              children: selected !== null && !isClassic ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  pb: 2
+                },
+                children: catalogService ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CatalogServicePanel.CatalogServicePanel, {
+                  service: catalogService,
+                  onSetStatus: handleOnSetCatalogStatus
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_views.ServiceView, {
+                  selected: isSummary ? _model.SUMMARY : selected,
+                  service: selectedService,
+                  services: services,
+                  userId: user === null || user === void 0 ? void 0 : user.id_user,
+                  onSelect: requestService,
+                  retailerName: (_state$active_retaile10 = state.active_retailer) === null || _state$active_retaile10 === void 0 ? void 0 : _state$active_retaile10.retailer
+                })
+              }) : state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+                alignItems: "center",
+                justifyContent: "center",
+                sx: {
+                  py: 6
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+                  size: 32,
+                  sx: {
+                    color: _tokens.COLORS.magenta_s2
+                  }
+                })
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [state.active_tab === "Descripción" && (((_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                  activeSection: state.active_tab,
+                  inputGroup: state.descriptions_inputs[0],
+                  updatedDescriptions: state.updated_descriptions_inputs
+                  /* El parentesco es del producto, no del servicio: los
+                     dos endpoints lo devuelven igual. */
+                  ,
+                  variant: (_state$services2 = state.services) === null || _state$services2 === void 0 ? void 0 : (_state$services2$data = _state$services2.datasheets) === null || _state$services2$data === void 0 ? void 0 : _state$services2$data.variant,
+                  onRestoreInheritance: handleOnRestoreInheritance,
+                  articleId: (_state$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : _state$product11.id_article,
+                  version: state.product.version,
+                  auditInputGroup: auditDescriptions[0],
+                  setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+                  dinamicHeight: true,
+                  compare: compare
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NoService, {})), state.active_tab === "Ficha técnica" && (((_state$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.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) {
+                    var _state$services3, _state$services3$data;
+
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                      articleId: state.product.id_article,
+                      version: state.version,
+                      activeSection: state.active_tab,
+                      inputGroup: dataGroup,
+                      dataInputs: state.datasheets_inputs[1],
+                      variant: (_state$services3 = state.services) === null || _state$services3 === void 0 ? void 0 : (_state$services3$data = _state$services3.datasheets) === null || _state$services3$data === void 0 ? void 0 : _state$services3$data.variant,
+                      onRestoreInheritance: handleOnRestoreInheritance,
+                      auditInputs: auditDatasheets[1],
+                      updatedDatasheets: state.updated_datasheets_inputs,
+                      setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+                      compare: compare
+                    }, index + "-" + state.active_retailer.retailer);
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NoService, {})), state.active_tab === "Imágenes" && (((_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagesSection.ImagesSection, {
+                  imagesValues: state.images_values,
+                  selectedImages: state.selected_images,
+                  imageLayout: imageLayout,
+                  enableDigitalAssets: enableDigitalAssets,
+                  currentTray: currentTray,
+                  setActiveTray: setActiveTray,
+                  digitalAssets: digitalAssets,
+                  unsavedAssets: (0, _assets.countUnsavedAssets)(state),
+                  selectedAssets: state.selected_assets,
+                  setSelectedAssets: handleOnSetSelectedAssets,
+                  setAllAssetsChecked: handleOnSetAllAssetsChecked,
+                  canEdit: userCanSave,
+                  setCheckAll: handleOnSetCheckAll,
+                  setSelectedImages: handleOnSetSelectedImages,
+                  onChangeCurrentImage: handleOnChangeCurrentImage,
+                  onUpdateImage: function onUpdateImage(item) {
+                    return dispatch({
+                      type: "UPDATE_IMAGE_VALUE",
+                      payload: item
+                    });
+                  },
+                  onSelectImage: function onSelectImage(item) {
+                    return dispatch({
+                      type: "SET_SELECTED_IMAGE",
+                      payload: item
+                    });
+                  },
+                  getRootProps: getRootProps,
+                  getInputProps: getInputProps,
+                  isDragActive: isDragActive,
+                  openFilePicker: open
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NoService, {}))]
+              })
+            }), isClassic && userCanSave && state.product["".concat((0, _utils.getConceptByTab)(state.active_tab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommentBox.CommentBox, {
+              comment: state.comment,
+              crossComment: crossComment,
+              createComment: createComment,
+              token: token,
+              dispatch: dispatch,
+              showChangeStatus: (0, _permissions.canChangeStatus)(user, _constants.allowedAccountsToViewChangeStatus),
+              onOpenChangeStatus: function onOpenChangeStatus() {
+                return setOpenChangeStatusModal(true);
+              },
+              showSendEvaluation: (0, _permissions.canSendToFacilitator)(user) // Solo para los roles 7 y 8, como en la vista original: para
+              // el rol 6, `isEvaluationFinished` usa un `srv` que no existe
+              // (defecto heredado) y tumbaría la pantalla.
+              ,
+              canSendEvaluation: (0, _permissions.canSendToFacilitator)(user) && isEvaluationFinished(user.id_role, state.active_tab, statusArray) && state.missing_required_fields[state.active_tab] === 0,
+              onSendEvaluation: handleOnSendEvaluationToFacilitator
+            })]
+          })]
+        })]
+      }), !single && isDesktop && renderRail("rail")]
+    }), !single && !isDesktop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Drawer, {
+      anchor: RAIL_SIDE,
+      open: railOpen,
+      onClose: function onClose() {
+        return setRailOpen(false);
+      },
+      PaperProps: {
+        sx: {
+          width: "min(320px, 88vw)"
+        }
+      },
+      children: renderRail("drawer")
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: Boolean(pendingSelection),
+      onClose: function onClose() {
+        return setPendingSelection(null);
+      },
+      maxWidth: "xs",
+      fullWidth: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogTitle, {
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway_600,
+          color: _tokens.COLORS.s5
+        },
+        children: "Cambios sin Guardar"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
+          sx: {
+            fontFamily: _tokens.FONTS.AvenirNext
+          },
+          children: "Est\xE1s cambiando de servicio y aun no guardas cambios \xBFEst\xE1s seguro?"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+        sx: {
+          px: 3,
+          pb: 2
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: function onClick() {
+            return setPendingSelection(null);
+          },
+          sx: {
+            color: _tokens.COLORS.s5,
+            textTransform: "none"
+          },
+          children: "Cancelar"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          disableElevation: true,
+          onClick: confirmServiceChange,
+          sx: {
+            textTransform: "none",
+            borderRadius: "20px",
+            bgcolor: _tokens.COLORS.magenta_s2,
+            "&:hover": {
+              bgcolor: _tokens.COLORS.secondary_magenta
+            }
+          },
+          children: "Aceptar"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ReusedModalsStyles, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChangeStatusModal.default, {
+      state: state,
+      open: openChangeStatusModal,
+      onClose: function onClose() {
+        setOpenChangeStatusModal(false);
+      },
+      reloadData: loadData,
+      token: token
+    })]
+  });
+};
+
+exports.ProductEditionView = ProductEditionView;