contentoh-components-library 21.5.84 → 21.5.86

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

@@ -47,7 +47,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-pink-button {\n    background-color: #E33AA9;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.buttonFont;
 }, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.color_gray, _saveIconHover.default, _variables.GlobalColors.color_pink, _variables.GlobalColors.color_pink, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.color_purple, _variables.GlobalColors.color_purple, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
 

package/dist/components/atoms/GeneralInput/index.js

@@ -114,10 +114,12 @@ var GeneralInput = function GeneralInput(_ref) {
       setValueAccepted = _useState8[1];
 
   var updateParentData = function updateParentData(generalValue, isAiAccepted) {
+    var newBaseValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     setTextValue({
       value: generalValue
     });
-    var similarity = (0, _compareStrings.getTextSimilarityPercentage)(valueAccepted, generalValue);
+    var baseToCompare = newBaseValue !== null ? newBaseValue : valueAccepted;
+    var similarity = (0, _compareStrings.getTextSimilarityPercentage)(baseToCompare, generalValue);
     var generatedWithAi = (isAiAccepted || aiGenerated) && similarity >= 50;
 
     if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
@@ -230,7 +232,7 @@ var GeneralInput = function GeneralInput(_ref) {
     setValueAccepted(suggestionValue);
     setAiSuggestionAccepted(true);
     setIsAiActive(false);
-    updateParentData(suggestionValue, true);
+    updateParentData(suggestionValue, true, suggestionValue);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {

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

@@ -350,7 +350,7 @@ var TagAndInput = function TagAndInput(_ref) {
     }
 
     setInputsGeneratedWithAi(function (prev) {
-      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, "".concat(inputId, "-").concat(inputType, "-").concat(version !== null && version !== void 0 ? version : label), {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, "".concat(inputId, "-").concat(inputType, "-").concat(version), {
         inputType: inputType,
         inputId: inputId,
         version: version,
@@ -362,7 +362,7 @@ var TagAndInput = function TagAndInput(_ref) {
   (0, _react.useEffect)(function () {
     var _inputsGeneratedWithA;
 
-    setIsAiGenerated(!!((_inputsGeneratedWithA = inputsGeneratedWithAi["".concat(inputId, "-").concat(inputType, "-").concat(version !== null && version !== void 0 ? version : label)]) !== null && _inputsGeneratedWithA !== void 0 && _inputsGeneratedWithA.isAiGenerated));
+    setIsAiGenerated(!!((_inputsGeneratedWithA = inputsGeneratedWithAi["".concat(inputId, "-").concat(inputType, "-").concat(version)]) !== null && _inputsGeneratedWithA !== void 0 && _inputsGeneratedWithA.isAiGenerated));
   }, [inputsGeneratedWithAi]);
   (0, _react.useEffect)(function () {
     setInputsUsingAi(function (prev) {

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

@@ -0,0 +1,531 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
+
+var _BuildOutlined = _interopRequireDefault(require("@mui/icons-material/BuildOutlined"));
+
+var _ArrowForward = _interopRequireDefault(require("@mui/icons-material/ArrowForward"));
+
+var _Layers = _interopRequireDefault(require("@mui/icons-material/Layers"));
+
+var _ViewInArOutlined = _interopRequireDefault(require("@mui/icons-material/ViewInArOutlined"));
+
+var _iconsMaterial = require("@mui/icons-material");
+
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+
+var _RadioButtonUnchecked = _interopRequireDefault(require("@mui/icons-material/RadioButtonUnchecked"));
+
+var _statusDictionary = require("../../../global-files/statusDictionary");
+
+var _styles = require("./styles");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var statusOptions = [{
+  value: "PA",
+  label: "Por Asignar"
+}, {
+  value: "AS",
+  label: "Asignado"
+}, {
+  value: "AC",
+  label: "Aprobado Coordinador"
+}, {
+  value: "AP",
+  label: "Aprobado Proveedor"
+}, {
+  value: "R",
+  label: "Rechazado"
+}, {
+  value: "RP",
+  label: "Rechazo Pendiente"
+}];
+var availableServices = ["description", "datasheet", "images"];
+
+var ChangeStatusModal = function ChangeStatusModal(_ref) {
+  var _state$product9, _state$product10, _state$product10$cate, _state$product$servic, _state$product11, _state$product$servic2, _state$product12;
+
+  var state = _ref.state,
+      open = _ref.open,
+      onClose = _ref.onClose,
+      _ref$token = _ref.token,
+      token = _ref$token === void 0 ? "" : _ref$token,
+      _ref$reloadData = _ref.reloadData,
+      reloadData = _ref$reloadData === void 0 ? function () {} : _ref$reloadData;
+
+  var _useState = (0, _react.useState)("product"),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      scope = _useState2[0],
+      setScope = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(""),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      newStatus = _useState4[0],
+      setNewStatus = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      comment = _useState6[0],
+      setComment = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      availableRetailers = _useState8[0],
+      setAvailableRetailers = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      selectedChains = _useState10[0],
+      setSelectedChains = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      selectedServices = _useState12[0],
+      setSelectedServices = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isSubmitting = _useState14[0],
+      setIsSubmitting = _useState14[1];
+
+  var _useState15 = (0, _react.useState)({}),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      currentStatusObj = _useState16[0],
+      setCurrentStatusObj = _useState16[1];
+
+  var isStatusValid = newStatus !== "" && newStatus !== currentStatusObj.label;
+  var isCommentValid = comment.trim().length > 0;
+  var isScopeValid = false;
+  if (scope === "product") isScopeValid = true;
+  if (scope === "retailer") isScopeValid = selectedChains.length > 0;
+  if (scope === "service") isScopeValid = selectedChains.length > 0 && selectedServices.length > 0;
+  var canSubmit = isStatusValid && isCommentValid && isScopeValid;
+
+  var handleScopeChange = function handleScopeChange(newScope) {
+    setScope(newScope);
+    setSelectedChains([]);
+    setSelectedServices([]);
+  };
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _state$product, _state$product2, _state$product3, _state$product4, _availableRetailers$f, _state$product5;
+
+      var upc, article_id, order_id, version, retailers_selected, services_selected, old_status, new_status, commentary, payload, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(!canSubmit || isSubmitting)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              setIsSubmitting(true);
+              upc = state === null || state === void 0 ? void 0 : (_state$product = state.product) === null || _state$product === void 0 ? void 0 : _state$product.upc;
+              article_id = state === null || state === void 0 ? void 0 : (_state$product2 = state.product) === null || _state$product2 === void 0 ? void 0 : _state$product2.id_article;
+              order_id = state === null || state === void 0 ? void 0 : (_state$product3 = state.product) === null || _state$product3 === void 0 ? void 0 : _state$product3.id_order;
+              version = state === null || state === void 0 ? void 0 : (_state$product4 = state.product) === null || _state$product4 === void 0 ? void 0 : _state$product4.version;
+              retailers_selected = availableRetailers === null || availableRetailers === void 0 ? void 0 : (_availableRetailers$f = availableRetailers.filter(function (retailer) {
+                return selectedChains === null || selectedChains === void 0 ? void 0 : selectedChains.includes(retailer.id_retailer);
+              })) === null || _availableRetailers$f === void 0 ? void 0 : _availableRetailers$f.map(function (retailer) {
+                return {
+                  id: retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer,
+                  name: retailer === null || retailer === void 0 ? void 0 : retailer.name
+                };
+              });
+              services_selected = selectedServices;
+              old_status = state === null || state === void 0 ? void 0 : (_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.status;
+              new_status = Object.values(_statusDictionary.STATUS_DICTIONARY).find(function (status) {
+                return status.name === newStatus;
+              }).status;
+              commentary = comment;
+              payload = {
+                upc: upc,
+                articleId: article_id,
+                orderId: order_id,
+                version: version,
+                retailers: scope === "product" ? availableRetailers === null || availableRetailers === void 0 ? void 0 : availableRetailers.map(function (retailer) {
+                  return {
+                    id: retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer,
+                    name: retailer === null || retailer === void 0 ? void 0 : retailer.name
+                  };
+                }) : retailers_selected,
+                services: scope !== "service" ? Object.keys(state === null || state === void 0 ? void 0 : state.product.services).filter(function (service) {
+                  var _state$product6;
+
+                  return !!(state !== null && state !== void 0 && (_state$product6 = state.product) !== null && _state$product6 !== void 0 && _state$product6.services[service]);
+                }).map(function (service) {
+                  return service.replace("datasheets", "datasheet").replace("descriptions", "description");
+                }) : services_selected,
+                oldStatus: old_status,
+                newStatus: new_status,
+                commentary: commentary
+              };
+              _context.next = 15;
+              return _axios.default.post(process.env.REACT_APP_REQUEST_CHANGE_STATUS, payload, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 15:
+              response = _context.sent;
+              reloadData();
+              setIsSubmitting(false);
+              onClose();
+
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    var _state$product7, _state$product8;
+
+    if (!state) return;
+    setCurrentStatusObj(_statusDictionary.STATUS_DICTIONARY[state === null || state === void 0 ? void 0 : (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.status]);
+    setAvailableRetailers((state === null || state === void 0 ? void 0 : (_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.categoryRetailerInOrder) || []);
+  }, [state]);
+  var selectMenuProps = {
+    PaperProps: {
+      style: {
+        borderRadius: "5px",
+        marginTop: "5px",
+        boxShadow: "0px 4px 20px rgba(0,0,0,0.1)"
+      }
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledDialog, {
+    open: open,
+    onClose: onClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ModalHeader, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        className: "close-icon",
+        onClick: onClose,
+        size: "small",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BadgeCircle, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.CachedOutlined, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "title-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          children: "Cambio de Estatus"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: state === null || state === void 0 ? void 0 : (_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.name
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.MainSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SectionTitle, {
+          children: "Alcance del cambio:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ScopeButtonGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ScopeButton, {
+            active: scope === "product",
+            onClick: function onClick() {
+              return handleScopeChange("product");
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewInArOutlined.default, {}), " Producto completo"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ScopeButton, {
+            active: scope === "retailer",
+            onClick: function onClick() {
+              return handleScopeChange("retailer");
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {}), " Por Cadena"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ScopeButton, {
+            active: scope === "service",
+            onClick: function onClick() {
+              return handleScopeChange("service");
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BuildOutlined.default, {}), " Por Servicio"]
+          })]
+        }), scope === "product" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
+          children: "Se cambiar\xE1 el estatus de todos los servicios y cadenas"
+        }), scope === "retailer" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
+          children: "Afectar\xE1 todos los servicios de las cadenas seleccionadas"
+        }), scope === "service" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
+          children: "Afectar\xE1 \xFAnicamente los servicios de las cadenas seleccionadas"
+        })]
+      }), (scope === "retailer" || scope === "service") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Section, {
+        style: {
+          paddingTop: 10
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledFormControl, {
+          fullWidth: true,
+          size: "small",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+            id: "chain-label",
+            children: "Selecciona Cadena(s)"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledSelect, {
+            labelId: "chain-label",
+            multiple: true // 1. El value debe ser directamente tu estado (el arreglo de IDs)
+            ,
+            value: selectedChains // 2. onChange seguro para MUI
+            ,
+            onChange: function onChange(e) {
+              var value = e.target.value;
+              setSelectedChains(typeof value === "string" ? value.split(",") : value);
+            } // 3. renderValue traduce los IDs a los Nombres de las cadenas para mostrarlos separados por coma
+            ,
+            renderValue: function renderValue(selected) {
+              return availableRetailers.filter(function (retailer) {
+                return selected.includes(retailer.id_retailer);
+              }).map(function (retailer) {
+                return retailer.name;
+              }).join(", ");
+            },
+            MenuProps: selectMenuProps,
+            children: availableRetailers.map(function (retailer) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                value: retailer.id_retailer,
+                sx: {
+                  fontFamily: "Raleway",
+                  fontSize: "0.85rem",
+                  padding: "6px 12px",
+                  "&.Mui-selected": {
+                    backgroundColor: "".concat(_styles.colors.primary, "1A")
+                  },
+                  "&.Mui-selected:hover": {
+                    backgroundColor: "".concat(_styles.colors.primary, "33")
+                  }
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonUnchecked.default, {
+                    sx: {
+                      fontSize: 18
+                    }
+                  }),
+                  checkedIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+                    sx: {
+                      fontSize: 18
+                    }
+                  }),
+                  checked: selectedChains.indexOf(retailer.id_retailer) > -1,
+                  style: {
+                    color: _styles.colors.primary,
+                    padding: "4px 8px 4px 4px"
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: "https://content-management-images.s3.amazonaws.com/retailers/".concat(retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer, ".png"),
+                  alt: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+                  style: {
+                    width: "20px",
+                    height: "20px",
+                    objectFit: "contain",
+                    marginRight: "12px",
+                    borderRadius: "4px"
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                  primary: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+                  primaryTypographyProps: {
+                    style: {
+                      fontFamily: "Raleway",
+                      fontSize: "0.85rem"
+                    }
+                  }
+                })]
+              }, retailer.name);
+            })
+          })]
+        })
+      }), scope === "service" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Section, {
+        style: {
+          paddingTop: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledFormControl, {
+          fullWidth: true,
+          size: "small",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+            id: "service-label",
+            children: "Selecciona Servicio(s)"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledSelect, {
+            labelId: "service-label",
+            multiple: true,
+            value: selectedServices,
+            onChange: function onChange(e) {
+              var value = e.target.value;
+              setSelectedServices(typeof value === "string" ? value.split(",") : value);
+            },
+            renderValue: function renderValue(selected) {
+              return selected.map(function (service) {
+                return service === "description" ? "Descripciones" : service === "datasheet" ? "Ficha Técnica" : "Imágenes";
+              }).join(", ");
+            },
+            MenuProps: selectMenuProps,
+            children: availableServices.map(function (service) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                value: service,
+                sx: {
+                  fontFamily: "Raleway",
+                  fontSize: "0.85rem",
+                  padding: "6px 12px",
+                  "&.Mui-selected": {
+                    backgroundColor: "".concat(_styles.colors.primary, "1A")
+                  },
+                  "&.Mui-selected:hover": {
+                    backgroundColor: "".concat(_styles.colors.primary, "33")
+                  }
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonUnchecked.default, {
+                    sx: {
+                      fontSize: 18
+                    }
+                  }),
+                  checkedIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+                    sx: {
+                      fontSize: 18
+                    }
+                  }),
+                  checked: selectedServices.indexOf(service) > -1,
+                  style: {
+                    color: _styles.colors.primary,
+                    padding: "4px 8px 4px 4px"
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                  primary: service === "description" ? "Descripciones" : service === "datasheet" ? "Ficha Técnica" : "Imágenes",
+                  primaryTypographyProps: {
+                    style: {
+                      fontFamily: "Raleway",
+                      fontSize: "0.85rem"
+                    }
+                  }
+                })]
+              }, service);
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SectionTitle, {
+          children: "Estatus actual:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StatusPill, {
+          label: currentStatusObj.name,
+          selected: false,
+          disabled: true
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SectionTitle, {
+          children: "Nuevo estatus:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StatusGrid, {
+          children: Object.values(_statusDictionary.STATUS_DICTIONARY).map(function (status) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StatusPill, {
+              label: status.name,
+              disabled: status.name === currentStatusObj.name,
+              selected: status.name === newStatus,
+              onClick: function onClick() {
+                return status.name !== currentStatusObj.name && setNewStatus(status.name);
+              }
+            }, status.name);
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SectionTitle, {
+          children: "Comentario:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledTextArea, {
+          multiline: true,
+          rows: 3,
+          placeholder: "Explica el motivo del cambio de estatus...",
+          value: comment,
+          onChange: function onChange(e) {
+            if (e.target.value.length <= 255) {
+              setComment(e.target.value);
+            }
+          },
+          inputProps: {
+            maxLength: 255
+          },
+          helperText: "".concat(comment.length, "/255 caracteres"),
+          FormHelperTextProps: {
+            style: {
+              textAlign: "right"
+            }
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ImpactSummary, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "summary-title",
+          children: "Resumen de impacto:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "status-flow",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StatusPill, {
+            label: currentStatusObj.name,
+            selected: false,
+            disabled: true,
+            size: "small"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowForward.default, {
+            fontSize: "small",
+            sx: {
+              color: _styles.colors.textMuted
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StatusPill, {
+            label: newStatus || "Selecciona un estatus",
+            selected: !!newStatus,
+            size: "small"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "impact-counts",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+              fontSize: "small"
+            }), scope === "product" ? state === null || state === void 0 ? void 0 : (_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : (_state$product10$cate = _state$product10.categoryRetailerInOrder) === null || _state$product10$cate === void 0 ? void 0 : _state$product10$cate.length : selectedChains.length, " ", "cadena(s)"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BuildOutlined.default, {
+              fontSize: "small"
+            }), scope === "service" ? selectedServices.length : Object.values((_state$product$servic = state === null || state === void 0 ? void 0 : (_state$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : _state$product11.services) !== null && _state$product$servic !== void 0 ? _state$product$servic : {}) ? Object.values((_state$product$servic2 = state === null || state === void 0 ? void 0 : (_state$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.services) !== null && _state$product$servic2 !== void 0 ? _state$product$servic2 : {}).filter(function (service) {
+              return !!service;
+            }).length : "No es un array", "\xA0servicios"]
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.FooterActions, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ActionButton, {
+        className: "cancel",
+        onClick: onClose,
+        children: "Cancelar"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ActionButton, {
+        className: "submit",
+        disabled: !canSubmit || isSubmitting,
+        onClick: handleSubmit,
+        children: isSubmitting ? "Guardando..." : "Realizar cambio"
+      })]
+    })]
+  });
+};
+
+var _default = ChangeStatusModal;
+exports.default = _default;