contentoh-components-library 21.5.85 → 21.5.87

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;

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

@@ -0,0 +1,85 @@
+"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;