contentoh-components-library 21.5.92 → 21.5.93

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

@@ -1,531 +0,0 @@
-"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 === null || currentStatusObj === void 0 ? void 0 : 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 === null || currentStatusObj === void 0 ? void 0 : currentStatusObj.name),
-              selected: status.name === newStatus,
-              onClick: function onClick() {
-                return status.name !== (currentStatusObj === null || currentStatusObj === void 0 ? void 0 : 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 === null || currentStatusObj === void 0 ? void 0 : 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;

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

@@ -1,85 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.colors = exports.StyledTextArea = exports.StyledSelect = exports.StyledFormControl = exports.StyledDialog = exports.StatusPill = exports.StatusGrid = exports.SectionTitle = exports.Section = exports.ScopeButtonGroup = exports.ScopeButton = exports.ModalHeader = exports.MainSection = exports.ImpactSummary = exports.HelperText = exports.FooterActions = exports.BadgeCircle = exports.ActionButton = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _material = require("@mui/material");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-
-var colors = {
-  background: 'rgba(0, 0, 0, 0.4)',
-  paper: '#FFFFFF',
-  primary: '#E039A7',
-  primaryHover: '#C82A91',
-  textMain: '#121212',
-  textMuted: '#666666',
-  border: '#E0E0E0',
-  inputBg: '#FFFFFF',
-  summaryBg: '#F9F9F9'
-};
-exports.colors = colors;
-var StyledDialog = (0, _styledComponents.default)(_material.Dialog)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .MuiDialog-container {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .MuiDialog-paper {\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px;\n    padding: 0;\n    max-width: 38.5rem;\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    width: 100%;\n    box-shadow: 0 8px 32px rgba(0,0,0,0.15);\n    font-family: \"Raleway\", sans-serif;\n  }\n"])), colors.paper, colors.textMain);
-exports.StyledDialog = StyledDialog;
-var ModalHeader = (0, _styledComponents.default)(_material.Box)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-shrink: 0;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 20px 24px 16px;\n  gap: 1rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  margin-bottom: 0.5rem;\n\n  .close-icon {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    color: ", ";\n  }\n\n  h2 {\n    font-size: 1.35rem;\n    font-weight: 600;\n  }\n\n  p {\n    margin: 0;\n    color: ", ";\n    font-size: 0.8rem;\n  }\n"])), colors.primary, colors.textMuted);
-exports.ModalHeader = ModalHeader;
-var BadgeCircle = (0, _styledComponents.default)(_material.Box)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    font-size: 1.5rem;\n  }\n"])), colors.primary, colors.paper, colors.primary);
-exports.BadgeCircle = BadgeCircle;
-var MainSection = (0, _styledComponents.default)(_material.Box)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  overflow-y: auto;\n  padding-bottom: 20px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: #CCCCCC;\n    border-radius: 4px;\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: #999999;\n  }\n"])));
-exports.MainSection = MainSection;
-var Section = (0, _styledComponents.default)(_material.Box)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px 32px;\n"])));
-exports.Section = Section;
-
-var SectionTitle = _styledComponents.default.h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.9rem;\n  font-family: \"Raleway-500\", \"Raleway\", sans-serif;\n  color: ", ";\n  margin-bottom: 12px;\n"])), colors.textMuted);
-
-exports.SectionTitle = SectionTitle;
-var ScopeButtonGroup = (0, _styledComponents.default)(_material.Box)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n  margin-bottom: 8px;\n"])));
-exports.ScopeButtonGroup = ScopeButtonGroup;
-var ScopeButton = (0, _styledComponents.default)(_material.Button)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    border-radius: 5px;\n    text-transform: none;\n    text-wrap: nowrap;\n    font-weight: 600;\n    font-size: 12px;\n    padding: 0.4rem 1rem;\n    background-color: ", ";\n    color: ", ";\n    border: 1px solid ", ";\n    font-family: \"Raleway-500\", \"Raleway\", sans-serif;\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    svg {\n      margin-right: 8px;\n      font-size: 18px;\n    }\n  }\n"])), function (props) {
-  return props.active ? colors.primary : 'transparent';
-}, function (props) {
-  return props.active ? '#FFFFFF' : colors.textMuted;
-}, function (props) {
-  return props.active ? colors.primary : colors.border;
-}, function (props) {
-  return props.active ? colors.primaryHover : colors.summaryBg;
-});
-exports.ScopeButton = ScopeButton;
-
-var HelperText = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.8rem;\n  color: ", ";\n  margin: 8px 0 0;\n  font-family: \"Raleway\", sans-serif;\n"])), colors.textMuted);
-
-exports.HelperText = HelperText;
-var StatusPill = (0, _styledComponents.default)(_material.Chip)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    background-color: ", ";\n    color: ", ";\n    border: 1px solid ", ";\n    font-weight: 600;\n    border-radius: 5px;\n    opacity: 1 !important;\n    cursor: ", ";\n    font-family: \"Raleway\", sans-serif;\n\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.selected ? colors.primary : props.disabled ? '#603888' : 'transparent';
-}, function (props) {
-  return props.selected ? '#FFFFFF' : props.disabled ? 'white' : 'rgba(0, 0, 0, 0.45)';
-}, function (props) {
-  return props.selected ? colors.primary : 'rgba(0, 0, 0, 0.25)';
-}, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props.disabled ? 'transparent' : props.selected ? colors.primaryHover : 'rgba(0, 0, 0, 0.05)';
-});
-exports.StatusPill = StatusPill;
-var StatusGrid = (0, _styledComponents.default)(_material.Box)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n"])));
-exports.StatusGrid = StatusGrid;
-var StyledTextArea = (0, _styledComponents.default)(_material.TextField)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    width: 100%;\n    background-color: ", ";\n    border-radius: 8px;\n\n    .MuiOutlinedInput-root {\n      font-size: 14px;\n      font-family: \"Raleway\", sans-serif;\n      color: ", ";\n      fieldset {\n        border-color: ", ";\n      }\n      &:hover fieldset {\n        border-color: #BDBDBD;\n      }\n      &.Mui-focused fieldset {\n        border-color: ", ";\n      }\n    }\n  }\n"])), colors.inputBg, colors.textMain, colors.border, colors.primary);
-exports.StyledTextArea = StyledTextArea;
-var StyledSelect = (0, _styledComponents.default)(_material.Select)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    width: 100%;\n    background-color: ", ";\n    border-radius: 5px;\n    font-family: \"Raleway\", sans-serif;\n    font-size: 0.85rem;\n    margin-bottom: 12px;\n\n    .MuiSelect-select {\n      padding: 8px 12px;\n      display: flex;\n      align-items: center;\n      min-height: auto !important;\n    }\n\n    .MuiOutlinedInput-notchedOutline {\n      border-color: ", ";\n    }\n    &:hover .MuiOutlinedInput-notchedOutline {\n      border-color: #BDBDBD;\n    }\n    &.Mui-focused .MuiOutlinedInput-notchedOutline {\n      border-color: ", ";\n    }\n\n    .MuiSvgIcon-root {\n      color: ", ";\n      font-size: 1.2rem;\n    }\n  }\n"])), colors.inputBg, colors.border, colors.primary, colors.textMuted);
-exports.StyledSelect = StyledSelect;
-var StyledFormControl = (0, _styledComponents.default)(_material.FormControl)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    .MuiInputLabel-root {\n      font-family: \"Raleway\", sans-serif;\n      font-size: 0.85rem;\n      color: ", ";\n      transform: translate(14px, 10px) scale(1);\n\n      &.MuiInputLabel-shrink {\n        transform: translate(14px, -8px) scale(0.75);\n        color: ", ";\n        background-color: #fff;\n        padding: 0 6px;\n      }\n    }\n  }\n"])), colors.textMuted, colors.primary);
-exports.StyledFormControl = StyledFormControl;
-var FooterActions = (0, _styledComponents.default)(_material.Box)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex-shrink: 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 32px;\n  background-color: ", ";\n  border-top: 1px solid ", ";\n"])), colors.paper, colors.border);
-exports.FooterActions = FooterActions;
-var ActionButton = (0, _styledComponents.default)(_material.Button)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    text-transform: none;\n    font-family: \"Raleway-500\", \"Raleway\", sans-serif;\n    padding: 4px 16px;\n    border-radius: 5px;\n\n    &.cancel {\n      color: ", ";\n      border: 1px solid ", ";\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.submit {\n      background-color: ", ";\n      color: #FFFFFF;\n      &:hover {\n        background-color: ", ";\n      }\n      &:disabled {\n        opacity: 0.5;\n        background-color: #CCCCCC;\n        color: #888888;\n      }\n    }\n  }\n"])), colors.textMain, colors.border, colors.summaryBg, colors.primary, colors.primaryHover);
-exports.ActionButton = ActionButton;
-var ImpactSummary = (0, _styledComponents.default)(_material.Box)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 32px 32px;\n  padding: 20px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 12px;\n\n  .summary-title {\n    font-family: \"Raleway-500\", \"Raleway\", sans-serif;\n    font-size: 0.9rem;\n    color: ", ";\n    margin-bottom: 16px;\n    display: block;\n  }\n\n  .status-flow {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n    color: ", ";\n  }\n\n  .impact-counts {\n    display: flex;\n    gap: 24px;\n    color: ", ";\n    font-size: 0.85rem;\n\n    div {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n"])), colors.summaryBg, colors.border, colors.textMuted, colors.textMain, colors.textMuted);
-exports.ImpactSummary = ImpactSummary;