contentoh-components-library 21.4.124 → 21.4.126

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompleteServices = void 0;
+
+var _styles = require("./styles");
+
+var _variables = require("../../../global-files/variables");
+
+var _react = require("react");
+
+var _ServiceDataValidator = require("../../molecules/ServiceDataValidator");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CompleteServices = function CompleteServices(_ref) {
+  var headerData = _ref.headerData,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer,
+      showValidationButtons = _ref.showValidationButtons,
+      showApproveRejectAll = _ref.showApproveRejectAll,
+      approveAll = _ref.approveAll,
+      rejectAll = _ref.rejectAll,
+      approve = _ref.approve,
+      reject = _ref.reject,
+      _ref$complete = _ref.complete,
+      complete = _ref$complete === void 0 ? false : _ref$complete,
+      _ref$missingData = _ref.missingData,
+      missingData = _ref$missingData === void 0 ? 1 : _ref$missingData,
+      onClick = _ref.onClick;
+  var headerTop = (0, _react.useRef)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    fontFamily: _variables.FontFamily.Raleway,
+    color: _variables.GlobalColors.original_magenta,
+    ref: headerTop,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "service-cont",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceDataValidator.ServiceDataValidator, {
+        headerData: headerData,
+        activeRetailer: activeRetailer,
+        setActiveRetailer: setActiveRetailer,
+        showValidationButtons: showValidationButtons,
+        showApproveRejectAll: showApproveRejectAll,
+        approveAll: approveAll,
+        rejectAll: rejectAll,
+        approve: approve,
+        reject: reject,
+        text: "Descripción",
+        showValidation: true,
+        complete: complete,
+        missingData: missingData
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceDataValidator.ServiceDataValidator, {
+        headerData: headerData,
+        activeRetailer: activeRetailer,
+        setActiveRetailer: setActiveRetailer,
+        showValidationButtons: showValidationButtons,
+        showApproveRejectAll: showApproveRejectAll,
+        approveAll: approveAll,
+        rejectAll: rejectAll,
+        approve: approve,
+        reject: reject,
+        text: "Ficha Técnica",
+        showValidation: false,
+        complete: complete,
+        missingData: missingData
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceDataValidator.ServiceDataValidator, {
+        headerData: headerData,
+        activeRetailer: activeRetailer,
+        setActiveRetailer: setActiveRetailer,
+        showValidationButtons: showValidationButtons,
+        showApproveRejectAll: showApproveRejectAll,
+        approveAll: approveAll,
+        rejectAll: rejectAll,
+        approve: approve,
+        reject: reject,
+        text: "Imágenes",
+        showValidation: false,
+        complete: complete,
+        missingData: missingData
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      onClick: onClick,
+      buttonType: "general-button-sol",
+      label: "Solicitar a Content-oh!"
+    })]
+  });
+};
+
+exports.CompleteServices = CompleteServices;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay:flex;\npadding: 15px 15px;\nborder:0.6px solid ", ";\nwidth: 100%;\nalign-items: center;\njustify-content: space-between;\n\n  * + * {\n    margin-left: 10px;\n  }\n\n  .btn-gral{\n    min-width: 34px;\n    min-height:34px;\n  }\n  .images-buttons{\n    display:flex;\n  }\n  .service-cont{\n    display:flex;\n  }\n  .service-text{\n    font-family:", ", sans-serif;\n    font-size:12px;\n    font-weight: 500;\n    color:", ";\n  }\n  .service-complete {\n    color:", "!important;\n  }\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.GlobalColors.black);
+
+exports.Container = Container;

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

@@ -9,6 +9,8 @@ exports.DashboardMetric = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
 
 var _Graphic = require("../../atoms/Graphic");
@@ -39,8 +41,12 @@ var DashboardMetric = function DashboardMetric(_ref) {
       borderColor = _ref.borderColor,
       total = _ref.total,
       totalFiltered = _ref.totalFiltered;
-  var labels = type === "doughnut" ? Object.keys(dataObject).map(function (key) {
-    return key !== "NS" && (0, _dashboardMetricUtils.getFullStatus)(key);
+  var labels = type === "doughnut" ? Object.entries(dataObject).map(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+
+    return key !== "NS" && "".concat((0, _dashboardMetricUtils.getFullStatus)(key), " (").concat(value, ")");
   }) : Object.keys(dataObject);
   var newObject = type === "doughnut" ? (0, _dashboardMetricUtils.removeOldStatus)(dataObject) : dataObject;
   var values = (_Object$values = Object.values(newObject)) !== null && _Object$values !== void 0 && _Object$values.length ? Object.values(newObject) : [0];
@@ -68,17 +74,17 @@ var DashboardMetric = function DashboardMetric(_ref) {
     plugins: {
       tooltip: {
         callbacks: {
-          label: function label(_ref2) {
+          label: function label(_ref4) {
             var _dataset$data;
 
-            var dataset = _ref2.dataset,
-                element = _ref2.element;
+            var dataset = _ref4.dataset,
+                element = _ref4.element;
             var sum = dataset === null || dataset === void 0 ? void 0 : (_dataset$data = dataset.data) === null || _dataset$data === void 0 ? void 0 : _dataset$data.reduce(function (accumulator, value) {
               return accumulator + value;
             }, 0);
             var raw = element.$context.raw;
             var operation = 100 * (raw / sum);
-            var percent = ((operation + "").includes(".") ? (100 * (raw / sum)).toFixed(2) : 100 * (raw / sum)) + "%";
+            var percent = "".concat(((operation + "").includes(".") ? (100 * (raw / sum)).toFixed(2) : 100 * (raw / sum)) + "%", " - ").concat(raw);
             return showPercent ? percent : raw;
           }
         }

package/dist/components/organisms/DragAndDropPhases/DragAndDropPhases.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DragAndDropPhasesDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/DragAndDropPhases",
+  component: _index.DragAndDropPhases
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DragAndDropPhases, (0, _objectSpread2.default)({}, args));
+};
+
+var DragAndDropPhasesDefault = Template.bind({});
+exports.DragAndDropPhasesDefault = DragAndDropPhasesDefault;
+DragAndDropPhasesDefault.args = {
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwZjQyNDdkZi1mMDJmLTRjYjgtOTA5YS1lNjI2NDlkMzQ3ODIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBmNDI0N2RmLWYwMmYtNGNiOC05MDlhLWU2MjY0OWQzNDc4MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIzMTJjMzkzOC0yODFlLTRjZTMtOGQwMC1lNDJmMDJhMjliNDkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMTgwNDA2MywibmFtZSI6IlByb3ZlZWRvciBVbm8gUmFkaW9zaGFjayIsInBob25lX251bWJlciI6Iis1MjEyMzQ1Njc4OTgiLCJleHAiOjE3MDE4MDc2NjIsImlhdCI6MTcwMTgwNDA2MywiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrdW5vQGFsbGZyZWVtYWlsLm5ldCJ9.TlytxDFcBq6dMXaDGqIQ2Dr3P81JQgIJ2k8DgfVKvHmmJAyfj5hZcdaWPBCW_qXT_93HtXje2fmQuyTJeN4pL_AXkEEQJsi6Ye-8ipteb616OFLLm8AkMV7NmxyYn59yfY9bPoWmanTjicONFNtL_SOACebXUI4c1uZtFmMWMvAR29l_89uj3e5J-ZrS1PQn36Eid66LYtV7lBsKAn3JJeftDiXx750AHERXjoXdzHwjJttm4jmMZ4LJPk8efuvZWdPhcgXJ-4CuvWNbjxCmFiDkxSjFK_qLix73HtoCLWee-FJElqxW2ZjTflOiRZknmt2M-7kQj4FzhgEK3n6jyg"
+};

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

@@ -0,0 +1,495 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragAndDropPhases = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _Phase = require("../../molecules/Phase");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _Modal = require("../Modal");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var DragAndDropPhases = function DragAndDropPhases(_ref) {
+  var token = _ref.token;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      draggedItem = _useState2[0],
+      setDraggedItem = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      listPhases = _useState4[0],
+      setListPhases = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      tempListPhases = _useState6[0],
+      setTempListPhases = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      search = _useState8[0],
+      setSearch = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      newPhaseName = _useState10[0],
+      setNewPhaseName = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(""),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      inputValue = _useState12[0],
+      setInputValue = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success"
+  }),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalData = _useState14[0],
+      setModalData = _useState14[1];
+
+  var newPhaseNameRef = (0, _react.useRef)("");
+  (0, _react.useEffect)(function () {
+    return loadData();
+  }, []);
+  (0, _react.useEffect)(function () {
+    setNewPhaseName(function (prev) {
+      return prev + inputValue;
+    });
+  }, [inputValue]);
+  (0, _react.useEffect)(function () {
+    newPhaseNameRef.current = search;
+  }, [newPhaseName]);
+
+  var handleInputChange = function handleInputChange(e) {
+    setInputValue(e.target.value);
+  };
+
+  var onDragStart = function onDragStart(e, id) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(id);
+  };
+
+  var onDragOver = function onDragOver(index) {
+    var draggedIdx = tempListPhases.findIndex(function (phase) {
+      return phase.phaseId === draggedItem;
+    });
+    var draggedItemData = tempListPhases[draggedIdx];
+    var targetIdx = index;
+    var newTempListPhases = (0, _toConsumableArray2.default)(tempListPhases);
+    newTempListPhases.splice(draggedIdx, 1);
+    newTempListPhases.splice(targetIdx, 0, draggedItemData);
+    setTempListPhases(newTempListPhases);
+  };
+
+  var onDragEnd = function onDragEnd() {
+    setDraggedItem(null);
+  };
+
+  var updatePhases = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var updateData, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              updateData = {
+                updateReferencesOfNodes: listPhases.map(function (phase) {
+                  return {
+                    name: phase.phaseName,
+                    isInitialPhase: phase.isInitialPhase,
+                    phaseId: phase.phaseId,
+                    nextPhaseIfApproved: phase.nextPhaseIfApproved
+                  };
+                })
+              };
+              _context.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), updateData, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context.sent;
+              console.log("Update response:", response.body.data);
+              loadData();
+              _context.next = 12;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              console.error("Error al actualizar fases", _context.t0);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+
+    return function updatePhases() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var addPhase = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(search) {
+      var body, response, createdPhase;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              body = {
+                name: search,
+                retailerGroupsIds: [],
+                nextPhaseId: null
+              };
+              _context2.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/create"), body, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context2.sent;
+              createdPhase = response.data.body;
+              console.log(createdPhase);
+              setSearch();
+              setInputValue("");
+              loadData();
+              _context2.next = 15;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+              console.error("Error al agregar fase:", _context2.t0);
+
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 12]]);
+    }));
+
+    return function addPhase(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var deletePhase = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(id, phases) {
+      var response;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
+                updateReferencesOfNodes: phases,
+                deletePhase: id
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context3.sent;
+              loadData();
+              _context3.next = 10;
+              break;
+
+            case 7:
+              _context3.prev = 7;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al eliminar fase:", _context3.t0);
+
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 7]]);
+    }));
+
+    return function deletePhase(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var handleAddPhaseButton = function handleAddPhaseButton() {
+    setModalData({
+      show: true,
+      className: "modal-add-phase",
+      title: "Agregar fase de revisión",
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "white",
+        label: "Cancelar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+        }
+      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Guardar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+          handleSavePhase(search);
+        }
+      }, "btn-Guardar")],
+      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "container-input-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["Las fases nuevas siempre se agregan al final.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Puedes ordenar las fases arrastr\xE1ndolas."]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          className: "input-phases",
+          onChange: function onChange(e) {
+            setSearch(e.target.value);
+            handleInputChange(e);
+          },
+          value: search,
+          placeholder: "Nombre de fase"
+        })]
+      })
+    });
+  };
+
+  var handleSavePhase = function handleSavePhase() {
+    addPhase(newPhaseNameRef.current);
+    setInputValue("");
+  };
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var response, phasesData, phasesDataArray;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.prev = 0;
+              _context4.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/get"), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context4.sent;
+              phasesData = JSON.parse(response.data.body).data;
+              phasesDataArray = [];
+              phasesData.forEach(function (_ref6) {
+                var phaseId = _ref6.phaseId,
+                    phaseName = _ref6.phaseName,
+                    isInitialPhase = _ref6.isInitialPhase,
+                    nextPhaseIfApproved = _ref6.nextPhaseIfApproved,
+                    groups = _ref6.groups;
+                var groupsAssigned = groups.map(function (_ref7) {
+                  var id = _ref7.id,
+                      name = _ref7.name,
+                      active = _ref7.active;
+                  return {
+                    groupId: id,
+                    groupName: name,
+                    groupActive: active
+                  };
+                });
+                phasesDataArray.push({
+                  phaseId: phaseId,
+                  phaseName: phaseName,
+                  isInitialPhase: isInitialPhase,
+                  nextPhaseIfApproved: nextPhaseIfApproved,
+                  groupsAssigned: groupsAssigned
+                });
+              });
+              setListPhases(phasesDataArray);
+              setTempListPhases(phasesDataArray);
+              _context4.next = 14;
+              break;
+
+            case 11:
+              _context4.prev = 11;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al obtener fases:", _context4.t0);
+
+            case 14:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[0, 11]]);
+    }));
+
+    return function loadData() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var handleDeletePhase = function handleDeletePhase(id) {
+    var updatedListPhases = (0, _toConsumableArray2.default)(listPhases);
+    var filteredPhases = updatedListPhases.filter(function (phase) {
+      return phase.phaseId !== id;
+    });
+    setListPhases(filteredPhases);
+    setModalData({
+      show: true,
+      className: "modal-delete-phase",
+      message: "Fase eliminada correctamente.",
+      icon: "successv2",
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Aceptar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+        }
+      }, "btn-Aceptar")]
+    });
+    deletePhase(id, filteredPhases);
+  };
+
+  var renderPhase = function renderPhase(phase, idx) {
+    if (phase.isInitialPhase === 1) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+        id: idx,
+        phaseId: phase.phaseId,
+        phases: listPhases,
+        phaseName: phase.phaseName,
+        nextPhase: phase.nextPhaseIfApproved,
+        groups: phase.groupsAssigned,
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        },
+        token: token,
+        showMenu: false,
+        showButtonChip: false
+      }, phase.phaseId);
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+        id: idx,
+        phaseId: phase.phaseId,
+        phases: listPhases,
+        phaseName: phase.phaseName,
+        nextPhase: phase.nextPhaseIfApproved,
+        groups: phase.groupsAssigned,
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        } // onDragStart={(e) => onDragStart(e, idx)}
+        // onDragOver={() => onDragOver(idx)}
+        // onDragEnd={onDragEnd}
+        ,
+        token: token
+      }, phase.phaseId);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "button-phase",
+        onClick: handleAddPhaseButton,
+        children: "Agregar fase de revisi\xF3n"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        className: "button-save",
+        type: "pink",
+        label: "Guardar Cambios",
+        size: 12,
+        onClick: function onClick() {
+          setListPhases(tempListPhases);
+          updatePhases();
+          setModalData({
+            show: true,
+            className: "modal-save",
+            message: "Cambios aplicados correctamente.",
+            icon: "successv2",
+            buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+              type: "pink",
+              label: "Aceptar",
+              size: 12,
+              onClick: function onClick() {
+                setModalData(function (prev) {
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                    show: false
+                  });
+                });
+              }
+            }, "btn-Aceptar")]
+          });
+          loadData();
+        }
+      }, "btn-Guardar")]
+    }), listPhases.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: listPhases.map(function (phase, idx) {
+        return renderPhase(phase, idx);
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "no-phases-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Parece que aun no tienes fases disponibles."
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
+      onClickBtnDefault: function onClickBtnDefault() {
+        return setModalData(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
+    }))]
+  });
+};
+
+exports.DragAndDropPhases = DragAndDropPhases;