contentoh-components-library 21.4.124 → 21.4.126

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

@@ -0,0 +1,536 @@
+"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.EditGroup = 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _material = require("@mui/material");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _trash = _interopRequireDefault(require("../../../assets/images/Icons/trash.svg"));
+
+var _edit = _interopRequireDefault(require("../../../assets/images/Icons/edit.svg"));
+
+var _close = _interopRequireDefault(require("../../../assets/images/Icons/close.svg"));
+
+var _save = _interopRequireDefault(require("../../../assets/images/Icons/save.svg"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var reducerGroups = function reducerGroups(state, action) {
+  var values = state.values;
+
+  switch (action.type) {
+    case "init":
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: action.payload
+      });
+
+    case "addGroup":
+      values = [].concat((0, _toConsumableArray2.default)(values), [action.group]);
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    case "updateGroup":
+      values[action.payload.index][action.payload.property] = action.payload.value;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    case "deleteGroup":
+      values = values.map(function (item) {
+        return item.groupId !== action.payload.id ? item : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          isDeleted: true
+        });
+      });
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    default:
+      return state;
+  }
+};
+
+var EditGroup = function EditGroup(_ref) {
+  var token = _ref.token,
+      show = _ref.show,
+      onClose = _ref.onClose;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      groups = _useState2[0],
+      setGroups = _useState2[1];
+
+  var _useReducer = (0, _react.useReducer)(reducerGroups, {}),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isMoreThanTenGroups = _useState4[0],
+      setIsMoreThanTenGroups = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      editingIndex = _useState6[0],
+      setEditingIndex = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      deletingIndex = _useState8[0],
+      setDeletingIndex = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      hoveredIndex = _useState10[0],
+      setHoveredIndex = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      isEditingList = _useState12[0],
+      setIsEditingList = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      newGroup = _useState14[0],
+      setNewGroup = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      currentEditIndex = _useState16[0],
+      setCurrentEditIndex = _useState16[1];
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      inputValue = _useState18[0],
+      setInputValue = _useState18[1];
+
+  (0, _react.useEffect)(function () {}, [groups]);
+  (0, _react.useEffect)(function () {
+    loadData();
+  }, []);
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var response, receivedGroups, groupsArray;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_GROUPS_ENDPOINT, "/get"), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context.sent;
+              receivedGroups = JSON.parse(response.data.body).groups;
+              groupsArray = [];
+              receivedGroups.forEach(function (_ref3) {
+                var id = _ref3.id,
+                    name = _ref3.name,
+                    retailer_id = _ref3.retailer_id;
+                groupsArray.push({
+                  groupId: id,
+                  groupName: name || null,
+                  retailerId: retailer_id || null
+                });
+              });
+              setGroups(groupsArray);
+              dispatch({
+                type: "init",
+                payload: groupsArray
+              });
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              console.error("Error al obtener grupos:", _context.t0);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 11]]);
+    }));
+
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var AddGroup = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(index, concatenatedValue) {
+      var response, createdGroup;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_GROUPS_ENDPOINT, "/create"), {
+                groupName: concatenatedValue
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context2.sent;
+              createdGroup = response.data.body;
+              dispatch({
+                type: "addGroup",
+                payload: createdGroup
+              });
+              setEditingIndex(null);
+              setInputValue([]);
+              setIsEditingList(function (prevList) {
+                var newList = (0, _toConsumableArray2.default)(prevList);
+                newList[index] = false;
+                return newList;
+              });
+              setCurrentEditIndex(null);
+              loadData();
+              _context2.next = 16;
+              break;
+
+            case 13:
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](0);
+              console.error("Error al agregar grupo:", _context2.t0);
+
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 13]]);
+    }));
+
+    return function AddGroup(_x, _x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var handleUpdateGroup = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(index, groupId, updatedGroupName) {
+      var response, updatedData;
+      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_GROUPS_ENDPOINT, "/update?id=").concat(groupId, "&groupName=").concat(updatedGroupName), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context3.sent;
+              updatedData = response.data.body;
+              dispatch({
+                type: "updateGroup",
+                payload: {
+                  index: index,
+                  property: "groupName",
+                  value: updatedData.groupName
+                }
+              });
+              setEditingIndex(null);
+              setInputValue([]);
+              setIsEditingList(function (prevList) {
+                var newList = (0, _toConsumableArray2.default)(prevList);
+                newList[index] = false;
+                return newList;
+              });
+              setCurrentEditIndex(null);
+              loadData();
+              _context3.next = 16;
+              break;
+
+            case 13:
+              _context3.prev = 13;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al actualizar grupo:", _context3.t0);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 13]]);
+    }));
+
+    return function handleUpdateGroup(_x3, _x4, _x5) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var deleteGroup = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(groupId) {
+      var response;
+      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_GROUPS_ENDPOINT, "/delete?id=").concat(groupId), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context4.sent;
+              dispatch({
+                type: "deleteGroup",
+                payload: {
+                  id: groupId
+                }
+              });
+              loadData();
+              _context4.next = 11;
+              break;
+
+            case 8:
+              _context4.prev = 8;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al borrar grupo:", _context4.t0);
+
+            case 11:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[0, 8]]);
+    }));
+
+    return function deleteGroup(_x6) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  var handleEditButtonClick = function handleEditButtonClick(index) {
+    if (isEditingList[index]) {
+      handleSaveChanges(index);
+    } else {
+      setIsEditingList(function (prevList) {
+        var newList = (0, _toConsumableArray2.default)(prevList);
+        newList[index] = true;
+        return newList;
+      });
+      setEditingIndex(index);
+      setInputValue(groups[index].groupName);
+      setNewGroup(groups[index].groupId);
+      setCurrentEditIndex(index);
+    }
+  };
+
+  var handleDeleteButtonClick = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(groupId) {
+      return _regenerator.default.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return deleteGroup(groupId);
+
+            case 2:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+
+    return function handleDeleteButtonClick(_x7) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+
+  var handleInputChange = function handleInputChange(value, index) {
+    setInputValue(function (prevInputValue) {
+      return prevInputValue + value;
+    });
+    setGroups(function (prevGroups) {
+      var updatedGroups = (0, _toConsumableArray2.default)(prevGroups);
+
+      if (index !== undefined) {
+        updatedGroups[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, updatedGroups[index]), {}, {
+          groupName: value
+        });
+      }
+
+      return updatedGroups;
+    });
+  };
+
+  var handleAddButtonClick = function handleAddButtonClick() {
+    var isAnyGroupEditing = isEditingList.some(function (editing) {
+      return editing;
+    });
+
+    if (!isAnyGroupEditing && groups.length < 20) {
+      setIsEditingList(function (prevList) {
+        var newList = (0, _toConsumableArray2.default)(prevList);
+        newList[groups.length] = true;
+        return newList;
+      });
+      setEditingIndex(groups.length);
+      var nuevoGrupo = {
+        groupName: inputValue,
+        isEditing: true
+      };
+      setGroups([].concat((0, _toConsumableArray2.default)(groups), [nuevoGrupo]));
+      setIsMoreThanTenGroups(groups.length + 1 > 10);
+      setNewGroup(undefined);
+      setCurrentEditIndex(groups.length);
+    }
+  };
+
+  var handleSaveChanges = function handleSaveChanges(index) {
+    var concatenatedValue = groups[index].groupName;
+
+    if (newGroup !== undefined) {
+      handleUpdateGroup(index, newGroup, concatenatedValue);
+    } else {
+      AddGroup(index, concatenatedValue);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+    open: show,
+    className: "container-backgroundModal",
+    timeout: 400,
+    style: {
+      backgroundColor: "transparent",
+      zIndex: show ? 10 : -1
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: show,
+      timeout: 400,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "Modal-edit-group",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "header",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: "title-edit",
+              children: "Editar grupos"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              className: "circular-button close-edit-button",
+              onClick: onClose,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _close.default,
+                alt: "close icon"
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "details-edit",
+            children: "Agrega, edita y borra. Luego guarda los cambios."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"),
+            children: groups.map(function (group, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.GroupRow, {
+                editing: editingIndex === index,
+                deleting: deletingIndex === index,
+                onMouseEnter: function onMouseEnter() {
+                  return setHoveredIndex(index);
+                },
+                onMouseLeave: function onMouseLeave() {
+                  return setHoveredIndex(null);
+                },
+                className: "group-row ".concat(isEditingList[index] ? "editing" : ""),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  className: "input-group",
+                  placeholder: "Escribe el nombre del grupo",
+                  value: index !== undefined ? group.groupName : inputValue,
+                  onChange: function onChange(e) {
+                    return handleInputChange(e.target.value, index);
+                  },
+                  disabled: !isEditingList[index],
+                  autoFocus: isEditingList[index] && editingIndex === index
+                }, index), currentEditIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                  className: "circular-button save-group-button visible",
+                  onClick: function onClick() {
+                    return handleSaveChanges(index);
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: _save.default,
+                    alt: "save update icon"
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                    className: "circular-button edit-group-button ".concat(hoveredIndex === index ? "visible" : ""),
+                    onClick: function onClick() {
+                      return handleEditButtonClick(index);
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      src: _edit.default,
+                      alt: "edit icon"
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                    className: "circular-button delete-group-button ".concat(hoveredIndex === index ? "visible" : ""),
+                    onClick: function onClick() {
+                      return handleDeleteButtonClick(group.groupId);
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      src: _trash.default,
+                      alt: "trash icon"
+                    })
+                  })]
+                })]
+              }, group.groupId);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "container-save-add",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              className: "button-group-add",
+              onClick: function onClick() {
+                return handleAddButtonClick();
+              },
+              children: "+ Agregar Grupo"
+            })
+          })]
+        })
+      })
+    })
+  });
+};
+
+exports.EditGroup = EditGroup;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupRow = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  .header {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n  .close-edit-button {\n    min-width: 24px;\n    height: 24px;\n    background-color: transparent;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.3s ease, opacity 0.3s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    -webkit-filter: grayscale(100%);\n    filter: grayscale(100%);\n    opacity:0.4;\n    img {\n      width: 10px;\n      height: 10px;\n    }\n\n    &:hover {\n      background-color: ", ";\n      -webkit-filter: grayscale(0);\n      filter: grayscale(0);\n      opacity:1;\n    }\n  }\n  .Modal-edit-group {\n    position: absolute;\n    top: 10%;\n    z-index: 20;\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 100%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    border: 1px solid ", ";\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n  }\n\n  .title-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n  }\n\n  .details-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    margin: 5px 0 10px;\n  }\n  .container-save-add {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .button-group-add {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    text-transform: capitalize;\n    border: none;\n    background: transparent;\n    border-radius: 20px;\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  .table-groups-edit {\n    width: 100%;\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  .table-groups-max {\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .modal-save {\n    .contentModal {\n      width: 25%;\n    }\n  }\n"])), _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
+
+exports.Container = Container;
+
+var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 34px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px;\n  letter-spacing: 0em;\n  text-align: left;\n  text-decoration: none;\n  border-bottom: 1px solid ", ";\n  padding: 0 8px 0 0;\n  input {\n    width:100%;\n    min-width: 215px;\n    background: transparent;\n    color: ", ";\n    border: 0;\n    font-size: 12px;\n    font-family:", ", sans-serif;\n    padding: 5px 20px;\n    ::placeholder {\n      color: #CBCBCB;\n    }\n  }\n\n  input:focus {\n    border: 0;\n  }\n  &.editing {\n    background-color: ", "; \n    color: black;\n    input{\n      color: ", ";\n    }\n  }\n\n  .save-group-button,\n  .edit-group-button,\n  .delete-group-button {\n    min-width: 24px;\n    height: 24px;\n    background-color: transparent;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.3s ease, opacity 0.3s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  \n    img {\n      width: 12px;\n      height: 12px;\n    }\n  \n    &:hover {\n      background-color: ", ";\n    }\n  }\n  .edit-group-button,\n  .delete-group-button {\n    display: none;\n  }\n\n  .visible {\n    display: flex;\n    animation: ", " 0.3s ease-in-out forwards;\n  }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
+
+exports.GroupRow = GroupRow;

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

@@ -34,7 +34,11 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       approveAll = _ref.approveAll,
       rejectAll = _ref.rejectAll,
       servicesData = _ref.servicesData,
-      showApproveRejectAll = _ref.showApproveRejectAll;
+      showApproveRejectAll = _ref.showApproveRejectAll,
+      productObservation = _ref.productObservation,
+      isObservationVisible = _ref.isObservationVisible,
+      toggleObservation = _ref.toggleObservation,
+      hideObservation = _ref.hideObservation;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -43,7 +47,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
 
   (0, _react.useEffect)(function () {
     var rtls = (headerData === null || headerData === void 0 ? void 0 : headerData.retailers) || (headerData === null || headerData === void 0 ? void 0 : headerData.retailersAvailable);
-    servicesData && rtls.forEach(function (rt) {
+    servicesData && (rtls === null || rtls === void 0 ? void 0 : rtls.forEach(function (rt) {
       var element = [];
       servicesData.forEach(function (sd) {
         if (sd.id_retailer === rt.id) {
@@ -52,7 +56,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
 
         rt["services"] = element;
       });
-    });
+    }));
     setRetailers(rtls);
   }, [servicesData]);
 
@@ -68,7 +72,13 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       percentRequired: percent,
       percent: percent === null || percent === void 0 ? void 0 : percent.toFixed(0),
       priority: headerData === null || headerData === void 0 ? void 0 : headerData.prio,
-      date: getTime((headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.timestamp) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp))
+      productObservation: productObservation,
+      date: getTime((headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.timestamp) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp)),
+      dataProduct: headerData,
+      isObservationVisible: isObservationVisible,
+      toggleObservation: toggleObservation // handleClickOutside ={handleClickOutside}
+      ,
+      hideObservation: hideObservation
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeaturesBar.FeaturesBar, {

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FullProductNamev2Default = 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/FullProductNamev2",
+  component: _index.FullProductNamev2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FullProductNamev2, (0, _objectSpread2.default)({}, args));
+};
+
+var FullProductNamev2Default = Template.bind({});
+exports.FullProductNamev2Default = FullProductNamev2Default;
+FullProductNamev2Default.args = {
+  headerData: {
+    name: "Nombre del producto",
+    status: "P",
+    percent: 20,
+    backgroundColor: "in_progress",
+    priority: "low",
+    date: new Date().toLocaleDateString(),
+    features: [{
+      feature: "Prov",
+      value: "Unilever"
+    }, {
+      feature: "Vendor",
+      value: "1234567890"
+    }, {
+      feature: "SKU",
+      value: "1234567890"
+    }, {
+      feature: "UPC",
+      value: "1234567890"
+    }, {
+      feature: "Categoría",
+      value: "Desodorantes Caballero y Dama"
+    }],
+    validation: "null-button"
+  }
+};