contentoh-components-library 21.4.84 → 21.4.86

package/dist/assets/images/Icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2667 12L6.88333 7.61667C6.55 7.90556 6.16134 8.13056 5.71735 8.29167C5.27336 8.45278 4.80091 8.53333 4.3 8.53333C3.0982 8.53333 2.08108 8.11667 1.24865 7.28333C0.416217 6.45 0 5.44444 0 4.26667C0 3.08889 0.416667 2.08333 1.25 1.25C2.08333 0.416667 3.09167 0 4.275 0C5.45833 0 6.46389 0.416667 7.29167 1.25C8.11944 2.08333 8.53333 3.08972 8.53333 4.26917C8.53333 4.74528 8.45556 5.20556 8.3 5.65C8.14444 6.09444 7.91111 6.51111 7.6 6.9L12 11.2667L11.2667 12ZM4.28333 7.53333C5.18611 7.53333 5.95347 7.21389 6.58542 6.575C7.21736 5.93611 7.53333 5.16667 7.53333 4.26667C7.53333 3.36667 7.21736 2.59722 6.58542 1.95833C5.95347 1.31944 5.18611 1 4.28333 1C3.3713 1 2.59607 1.31944 1.95763 1.95833C1.31921 2.59722 1 3.36667 1 4.26667C1 5.16667 1.31921 5.93611 1.95763 6.575C2.59607 7.21389 3.3713 7.53333 4.28333 7.53333Z" fill="#707070"/>
+</svg>

package/dist/assets/images/Icons/settings.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_801_1360)">
+<path d="M4.62 12L4.32 10.11C4.13 10.04 3.93 9.945 3.72 9.825C3.51 9.705 3.325 9.58 3.165 9.45L1.395 10.26L0 7.8L1.62 6.615C1.6 6.525 1.5875 6.4225 1.5825 6.3075C1.5775 6.1925 1.575 6.09 1.575 6C1.575 5.91 1.5775 5.8075 1.5825 5.6925C1.5875 5.5775 1.6 5.475 1.62 5.385L0 4.2L1.395 1.74L3.165 2.55C3.325 2.42 3.51 2.295 3.72 2.175C3.93 2.055 4.13 1.965 4.32 1.905L4.62 0H7.38L7.68 1.89C7.87 1.96 8.0725 2.0525 8.2875 2.1675C8.5025 2.2825 8.685 2.41 8.835 2.55L10.605 1.74L12 4.2L10.38 5.355C10.4 5.455 10.4125 5.5625 10.4175 5.6775C10.4225 5.7925 10.425 5.9 10.425 6C10.425 6.1 10.4225 6.205 10.4175 6.315C10.4125 6.425 10.4 6.53 10.38 6.63L12 7.8L10.605 10.26L8.835 9.45C8.675 9.58 8.4925 9.7075 8.2875 9.8325C8.0825 9.9575 7.88 10.05 7.68 10.11L7.38 12H4.62ZM5.34 11.1H6.66L6.87 9.42C7.2 9.34 7.5125 9.215 7.8075 9.045C8.1025 8.875 8.37 8.67 8.61 8.43L10.2 9.12L10.8 8.04L9.39 7.005C9.43 6.835 9.4625 6.6675 9.4875 6.5025C9.5125 6.3375 9.525 6.17 9.525 6C9.525 5.83 9.515 5.6625 9.495 5.4975C9.475 5.3325 9.44 5.165 9.39 4.995L10.8 3.96L10.2 2.88L8.61 3.57C8.38 3.31 8.12 3.0925 7.83 2.9175C7.54 2.7425 7.22 2.63 6.87 2.58L6.66 0.9H5.34L5.13 2.58C4.79 2.65 4.4725 2.77 4.1775 2.94C3.8825 3.11 3.62 3.32 3.39 3.57L1.8 2.88L1.2 3.96L2.61 4.995C2.57 5.165 2.5375 5.3325 2.5125 5.4975C2.4875 5.6625 2.475 5.83 2.475 6C2.475 6.17 2.4875 6.3375 2.5125 6.5025C2.5375 6.6675 2.57 6.835 2.61 7.005L1.2 8.04L1.8 9.12L3.39 8.43C3.63 8.67 3.8975 8.875 4.1925 9.045C4.4875 9.215 4.8 9.34 5.13 9.42L5.34 11.1ZM6 7.95C6.54 7.95 7 7.76 7.38 7.38C7.76 7 7.95 6.54 7.95 6C7.95 5.46 7.76 5 7.38 4.62C7 4.24 6.54 4.05 6 4.05C5.46 4.05 5 4.24 4.62 4.62C4.24 5 4.05 5.46 4.05 6C4.05 6.54 4.24 7 4.62 7.38C5 7.76 5.46 7.95 6 7.95Z" fill="#E33AA9"/>
+</g>
+</svg>

package/dist/components/atoms/Multiselect/Multiselect.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultiselectDefault = 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/atoms/Multiselect",
+  component: _index.Multiselect,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Multiselect, (0, _objectSpread2.default)({}, args));
+};
+
+var MultiselectDefault = Template.bind({});
+exports.MultiselectDefault = MultiselectDefault;
+MultiselectDefault.args = {
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg"
+};

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

@@ -0,0 +1,275 @@
+"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.Multiselect = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+
+var _EditGroup = require("../../organisms/EditGroup");
+
+var _search = _interopRequireDefault(require("../../../assets/images/Icons/search.svg"));
+
+var _settings = _interopRequireDefault(require("../../../assets/images/Icons/settings.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+//styles
+//components
+//svg
+var Multiselect = function Multiselect(_ref) {
+  var arrayData = _ref.arrayData,
+      token = _ref.token,
+      showSearchBar = _ref.showSearchBar,
+      _ref$placeHolder = _ref.placeHolder,
+      placeHolder = _ref$placeHolder === void 0 ? "Buscar grupo" : _ref$placeHolder,
+      _ref$textButton = _ref.textButton,
+      textButton = _ref$textButton === void 0 ? "Editar grupos" : _ref$textButton;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      userData = _useState2[0],
+      setUserData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      groups = _useState4[0],
+      setGroups = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selectValues = _useState6[0],
+      setSelectValues = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      text = _useState8[0],
+      setText = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isEditGroupVisible = _useState10[0],
+      setIsEditGroupVisible = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(true),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      isItemListVisible = _useState12[0],
+      setIsItemListVisible = _useState12[1];
+
+  var onChange = function onChange(evt) {
+    setText(evt.target.value);
+  };
+
+  var handleChange = function handleChange(userId) {
+    return function (event) {
+      var value = event.target.value;
+      var updatedValues = value.filter(function (group) {
+        var groupInfo = groups.find(function (g) {
+          return g.groupName === group;
+        });
+        return groupInfo && groupInfo.userContentGroup === 1;
+      });
+      setSelectValues(function (prevValues) {
+        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
+      });
+      setIsCheckboxChecked(updatedValues.length > 0);
+    };
+  };
+
+  (0, _react.useEffect)(function () {
+    var filteredArray = (groups === null || groups === void 0 ? void 0 : groups.slice()) || [];
+
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter(function (option) {
+        return option === null || option === void 0 ? void 0 : option.name.toLowerCase().includes(text.toLocaleLowerCase());
+      });
+    }
+  }, [text]);
+  (0, _react.useEffect)(function () {
+    console.log("userData", userData);
+  }, [userData]);
+  (0, _react.useEffect)(function () {
+    console.log("groups", groups);
+  }, [groups]);
+  var ITEM_HEIGHT = 48;
+  var ITEM_PADDING_TOP = 8;
+  var MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+        display: isItemListVisible ? "block" : "none"
+      }
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [arrayData.map(function (user) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: user.idUser
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: user.userName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
+          labelId: "demo-multiple-checkbox-label-".concat(user.idUser),
+          id: "demo-multiple-checkbox-".concat(user.idUser),
+          multiple: true,
+          value: selectValues[user.idUser] || [],
+          onChange: handleChange(user.idUser),
+          input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+            sx: {
+              width: "80%",
+              height: "34px",
+              paddingBottom: "1px solid #F0F0F0"
+            }
+          }),
+          renderValue: function renderValue(selected) {
+            return selected.join(", ");
+          },
+          MenuProps: MenuProps,
+          sx: {
+            width: "80%",
+            height: "24px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            sx: {
+              maxHeight: "34px",
+              paddingLeft: "10px",
+              "& .search-bar-filter": {
+                display: "flex",
+                gap: "10px",
+                input: {
+                  border: "none",
+                  background: "transparent",
+                  "::placeholder": {
+                    fontSize: "12px",
+                    color: "#CBCBCB"
+                  },
+                  ":focus-visible, :hover": {
+                    border: "none",
+                    background: "transparent",
+                    outline: "none"
+                  }
+                },
+                ":focus-visible, :hover": {
+                  background: "transparent"
+                }
+              }
+            },
+            children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "search-bar-filter",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _search.default,
+                alt: "search icon"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "text",
+                placeholder: placeHolder,
+                value: text,
+                onChange: onChange
+              })]
+            })
+          }), console.log("usuario", user.idUser, "grupos", user.groups), user.groups && user.groups.filter(function (group) {
+            return group.groupId !== "Sin id";
+          }).map(function (group) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+              value: group.groupName,
+              sx: {
+                paddingLeft: "0px",
+                maxHeight: "34px",
+                ":focus-visible, :hover": {
+                  border: "none",
+                  background: "transparent"
+                }
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                checked: (selectValues[user.idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
+                sx: {
+                  maxHeight: "34px",
+                  "&.Mui-checked": {
+                    color: "#85BC5B"
+                  },
+                  "input, svg": {
+                    maxWidth: "12px",
+                    maxHeight: "12px"
+                  }
+                }
+              }), console.log("nombre grupo", group.groupName), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+                primary: group.groupName,
+                sx: {
+                  span: {
+                    fontSize: "12px",
+                    color: "#000000"
+                  },
+                  "input, svg": {
+                    maxWidth: "12px",
+                    maxHeight: "12px"
+                  }
+                }
+              })]
+            }, group.groupId);
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            sx: {
+              minHeight: "34px",
+              paddingLeft: "10px",
+              ".btn-edit": {
+                color: "#E33AA9",
+                border: "none",
+                background: "transparent",
+                display: "flex",
+                gap: "10px",
+                alignItems: "center"
+              },
+              ":focus-visible, :hover": {
+                border: "none",
+                background: "transparent"
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              className: "btn-edit",
+              onClick: function onClick() {
+                setIsItemListVisible(false);
+                setIsEditGroupVisible(true);
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _settings.default,
+                className: "icon",
+                alt: "search icon"
+              }), textButton]
+            })
+          })]
+        })]
+      });
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditGroup.EditGroup, {
+      token: token,
+      show: isEditGroupVisible,
+      onClose: function onClose() {
+        setIsEditGroupVisible(false);
+        setIsItemListVisible(true);
+      }
+    })]
+  });
+};
+
+exports.Multiselect = Multiselect;

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

@@ -0,0 +1,18 @@
+"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 _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width:100%;\n    height:auto;\n    .search-bar-filter {\n        display: flex;\n        align-items: center;\n        border: 1px solid #f0f0f0;\n        padding-left: 10px;\n  \n        img {\n          width: 15px;\n          height: 15px;\n        }\n  \n        input {\n          background-color: transparent;\n          padding: 10px 10px;\n          outline: none;\n          border: none;\n        }\n      }\n\n      img.icon{\n        width: 15px;\n          height: 15px;\n      }\n"])));
+
+exports.Container = Container;

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  border-bottom: 2px solid ", ";\n  width: 149px;\n  padding-bottom: 5px;\n  transition: 0.1s all;\n  cursor: pointer;\n\n  &.active {\n    font-size: 18px;\n    border-bottom: 2px solid ", ";\n  }\n\n  & + * {\n    margin-left: 10px;\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  border-bottom: 2px solid ", ";\n  width: 149px;\n  padding-bottom: 5px;\n  transition: 0.1s all;\n  cursor: pointer;\n  &.active {\n    font-size: 18px;\n    border-bottom: 2px solid ", ";\n  }\n  & + * {\n    margin-left: 10px;\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -27,8 +27,8 @@ var ProviderProductEditionDefault = Template.bind({});
 exports.ProviderProductEditionDefault = ProviderProductEditionDefault;
 ProviderProductEditionDefault.args = {
   tabsSections: {
-    Descripción: true,
-    "Ficha técnica": false,
+    Descripción: false,
+    "Ficha técnica": true,
     Imágenes: false
   },
   token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyM2Q1NTlmYi1jMzIwLTRhMjItYjJmNy1lOThhYTFhZGEyNmYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzkyNjgyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODM5MzA0MjEsImlhdCI6MTY4MzkyNjgyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.TvCoaKoctj5mypXWMz3NyV1Vm1ToBV0vJmpVyZSQw4-ikTChkxcZ5tFYvqhk1GdvNCFttfSQIqM-14dAYYBc28YwwKP86gqOuzB1fG41rN5x1Yx3tkJq6hiVRgiBbSHWtThA9c8VnxNQbrJiaRTvvkDiM5KNTEst1oxQHL5Ct9_iKQMJMRFie7Xv0xnyS0qZ6QHK4Q2A9OHsnDkAuumALZJcE19Zh6VgSitgWrZiz3x5Text4Q-U-R48NUAzUFirAzYZzJN_fCme5pGf1AnUaZjeUjPsmrV5TBVzPEYwXO0KG8lYjL8id80D7tbGs28ZIK6B4rf3-eqI_ngmBB4CjQ",
@@ -36,45 +36,38 @@ ProviderProductEditionDefault.args = {
   category: 287,
   version: 1,
   productSelected: {
-    category: "Accesorios Decorativos|Accesorios Decorativos",
-    company_name: "Demo",
-    company_id: 923,
-    id_category: "2028",
-    id_article: 118465,
-    name: "VELA AROMA 18 OZ MAN/CAN",
-    upc: "Modelo6",
-    isVisible: 1,
-    retailers: [{
-      id: 68,
-      name: "The Home Depot Onboarding"
-    }],
+    id_article: 121067,
+    upc: "2342341",
+    name: "asd",
+    timestamp: "2024-01-03T19:42:59.000Z",
+    categoryName: "Abarrotes|Abarrotes Secos|Alimentos Deshidratados",
+    id_category: 4,
     version: 1,
+    value: null,
     retailersAvailable: [{
-      id: 68,
-      name: "The Home Depot Onboarding"
-    }]
+      "name": "Walmart Marketplace",
+      "id": 75
+    }],
+    percentage: 1.33
   },
   productToEdit: {
-    idCategory: "2028",
-    ArticleId: 118465,
+    idCategory: 4,
+    ArticleId: 121067,
     product: [{
-      category: "Accesorios Decorativos|Accesorios Decorativos",
-      company_name: "Demo",
-      company_id: 923,
-      id_category: "2028",
-      id_article: 118465,
-      name: "VELA AROMA 18 OZ MAN/CAN",
-      upc: "Modelo6",
-      isVisible: 1,
-      retailers: [{
-        id: 68,
-        name: "The Home Depot Onboarding"
-      }],
+      id_article: 121067,
+      upc: "2342341",
+      name: "asd",
+      timestamp: "2024-01-03T19:42:59.000Z",
+      categoryName: "Abarrotes|Abarrotes Secos|Alimentos Deshidratados",
+      id_category: 4,
       version: 1,
+      value: null,
       retailersAvailable: [{
-        id: 68,
-        name: "The Home Depot Onboarding"
-      }]
+        name: "Walmart Marketplace",
+        id: 75,
+        percentage: 1.33
+      }],
+      percentage: 1.33
     }]
   },
   location: {
@@ -89,30 +82,30 @@ ProviderProductEditionDefault.args = {
     key: "24vwut"
   },
   user: {
-    id_user: 191,
-    name: "Demo",
-    last_name: "Demo",
-    email: "merchants24feb@allfreemail.net",
-    position: "Test",
-    telephone: "+52123456789",
+    id_user: 28,
+    name: "Ismael",
+    last_name: "López",
+    email: "ilopez@contentoh.com",
+    position: "Test States",
+    telephone: "+523111366336",
     country: "México",
-    id_company: 923,
-    id_cognito: "c3cd160c-76c2-497c-9357-5ef949307e1e",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
     id_role: 0,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
-    is_user_tech: null,
+    is_user_tech: "ADMIN-AS",
     membership: {
-      id: 114,
-      start_date: "2023-02-24T18:14:43.000Z",
-      end_date: "2024-02-24T18:14:43.000Z",
+      id: 76,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
       planID: 8,
       plan: "prod_KtlhECVSFG2iro",
       name: "Plan Pro",
@@ -120,31 +113,23 @@ ProviderProductEditionDefault.args = {
       products_limit: "5000",
       type: "Enterprise"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-191/191.png?1701729602068"
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1704310718113"
   },
   company: {
-    id_company: 923,
-    trade_name: "Demo",
-    company_name: "Demo",
-    rfc: "Demo",
-    adress: "Demo",
-    about_company: null,
-    telephone: null,
-    web_site: null,
-    zip_code: null,
+    id_company: 1,
+    trade_name: "GRUPO BRAHMA",
+    company_name: "GRUPO BRAHMA",
+    rfc: "XAXX010101000",
+    adress: "AA",
+    about_company: "",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
     email: null,
-    social_link: null,
+    social_link: "",
     is_retailer: 0,
-    financedRetailers: [{
-      id: 68,
-      name: "The Home Depot Onboarding",
-      country: "México"
-    }],
-    retailers: [{
-      id: 68,
-      name: "The Home Depot Onboarding",
-      country: "México"
-    }]
+    financedRetailers: [],
+    retailers: []
   },
   showSurvey: function showSurvey(v) {
     return v && alert("se muestra");

package/dist/components/pages/ProviderProductEdition/index.js

@@ -280,7 +280,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       showModal = _useState14[0],
       setShowModal = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(),
+  var _useState15 = (0, _react.useState)({}),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
       boxData = _useState16[0],
       setBoxData = _useState16[1];
@@ -1271,43 +1271,47 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               }, parseBoxData.length > 0 && {
                 boxData: parseBoxData
               });
+              console.log({
+                dataObject: dataObject
+              });
+              console.log(product === null || product === void 0 ? void 0 : product.orderId);
               if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-              _context12.prev = 4;
-              _context12.next = 7;
+              _context12.prev = 6;
+              _context12.next = 9;
               return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 7:
+            case 9:
               res = _context12.sent;
 
               if (!(res.data.statusCode === 200)) {
-                _context12.next = 13;
+                _context12.next = 15;
                 break;
               }
 
               setUpdatedDatasheets([]);
               setMessage("Fichas técnicas guardadas");
-              _context12.next = 13;
+              _context12.next = 15;
               return loadData();
 
-            case 13:
-              _context12.next = 18;
+            case 15:
+              _context12.next = 20;
               break;
 
-            case 15:
-              _context12.prev = 15;
-              _context12.t0 = _context12["catch"](4);
+            case 17:
+              _context12.prev = 17;
+              _context12.t0 = _context12["catch"](6);
               console.log(_context12.t0);
 
-            case 18:
+            case 20:
             case "end":
               return _context12.stop();
           }
         }
-      }, _callee12, null, [[4, 15]]);
+      }, _callee12, null, [[6, 17]]);
     }));
 
     return function saveDatasheets() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.84",
+  "version": "21.4.86",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/assets/images/Icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2667 12L6.88333 7.61667C6.55 7.90556 6.16134 8.13056 5.71735 8.29167C5.27336 8.45278 4.80091 8.53333 4.3 8.53333C3.0982 8.53333 2.08108 8.11667 1.24865 7.28333C0.416217 6.45 0 5.44444 0 4.26667C0 3.08889 0.416667 2.08333 1.25 1.25C2.08333 0.416667 3.09167 0 4.275 0C5.45833 0 6.46389 0.416667 7.29167 1.25C8.11944 2.08333 8.53333 3.08972 8.53333 4.26917C8.53333 4.74528 8.45556 5.20556 8.3 5.65C8.14444 6.09444 7.91111 6.51111 7.6 6.9L12 11.2667L11.2667 12ZM4.28333 7.53333C5.18611 7.53333 5.95347 7.21389 6.58542 6.575C7.21736 5.93611 7.53333 5.16667 7.53333 4.26667C7.53333 3.36667 7.21736 2.59722 6.58542 1.95833C5.95347 1.31944 5.18611 1 4.28333 1C3.3713 1 2.59607 1.31944 1.95763 1.95833C1.31921 2.59722 1 3.36667 1 4.26667C1 5.16667 1.31921 5.93611 1.95763 6.575C2.59607 7.21389 3.3713 7.53333 4.28333 7.53333Z" fill="#707070"/>
+</svg>

package/src/assets/images/Icons/settings.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_801_1360)">
+<path d="M4.62 12L4.32 10.11C4.13 10.04 3.93 9.945 3.72 9.825C3.51 9.705 3.325 9.58 3.165 9.45L1.395 10.26L0 7.8L1.62 6.615C1.6 6.525 1.5875 6.4225 1.5825 6.3075C1.5775 6.1925 1.575 6.09 1.575 6C1.575 5.91 1.5775 5.8075 1.5825 5.6925C1.5875 5.5775 1.6 5.475 1.62 5.385L0 4.2L1.395 1.74L3.165 2.55C3.325 2.42 3.51 2.295 3.72 2.175C3.93 2.055 4.13 1.965 4.32 1.905L4.62 0H7.38L7.68 1.89C7.87 1.96 8.0725 2.0525 8.2875 2.1675C8.5025 2.2825 8.685 2.41 8.835 2.55L10.605 1.74L12 4.2L10.38 5.355C10.4 5.455 10.4125 5.5625 10.4175 5.6775C10.4225 5.7925 10.425 5.9 10.425 6C10.425 6.1 10.4225 6.205 10.4175 6.315C10.4125 6.425 10.4 6.53 10.38 6.63L12 7.8L10.605 10.26L8.835 9.45C8.675 9.58 8.4925 9.7075 8.2875 9.8325C8.0825 9.9575 7.88 10.05 7.68 10.11L7.38 12H4.62ZM5.34 11.1H6.66L6.87 9.42C7.2 9.34 7.5125 9.215 7.8075 9.045C8.1025 8.875 8.37 8.67 8.61 8.43L10.2 9.12L10.8 8.04L9.39 7.005C9.43 6.835 9.4625 6.6675 9.4875 6.5025C9.5125 6.3375 9.525 6.17 9.525 6C9.525 5.83 9.515 5.6625 9.495 5.4975C9.475 5.3325 9.44 5.165 9.39 4.995L10.8 3.96L10.2 2.88L8.61 3.57C8.38 3.31 8.12 3.0925 7.83 2.9175C7.54 2.7425 7.22 2.63 6.87 2.58L6.66 0.9H5.34L5.13 2.58C4.79 2.65 4.4725 2.77 4.1775 2.94C3.8825 3.11 3.62 3.32 3.39 3.57L1.8 2.88L1.2 3.96L2.61 4.995C2.57 5.165 2.5375 5.3325 2.5125 5.4975C2.4875 5.6625 2.475 5.83 2.475 6C2.475 6.17 2.4875 6.3375 2.5125 6.5025C2.5375 6.6675 2.57 6.835 2.61 7.005L1.2 8.04L1.8 9.12L3.39 8.43C3.63 8.67 3.8975 8.875 4.1925 9.045C4.4875 9.215 4.8 9.34 5.13 9.42L5.34 11.1ZM6 7.95C6.54 7.95 7 7.76 7.38 7.38C7.76 7 7.95 6.54 7.95 6C7.95 5.46 7.76 5 7.38 4.62C7 4.24 6.54 4.05 6 4.05C5.46 4.05 5 4.24 4.62 4.62C4.24 5 4.05 5.46 4.05 6C4.05 6.54 4.24 7 4.62 7.38C5 7.76 5.46 7.95 6 7.95Z" fill="#E33AA9"/>
+</g>
+</svg>

package/src/components/atoms/Multiselect/Multiselect.stories.js

@@ -0,0 +1,17 @@
+import { Multiselect } from "./index";
+
+export default {
+  title: "Components/atoms/Multiselect",
+  component: Multiselect,
+  argTypes: {
+   
+  },
+};
+
+const Template = (args) => <Multiselect {...args} />;
+
+export const MultiselectDefault = Template.bind({});
+
+MultiselectDefault.args = {
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg",
+};

package/src/components/atoms/Multiselect/index.js

@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from "react";
+//styles
+import { Container } from "./styles";
+//components
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Checkbox from "@mui/material/Checkbox";
+import ListItemText from "@mui/material/ListItemText";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import { EditGroup } from "../../organisms/EditGroup";
+
+//svg
+import searchIcon from "../../../assets/images/Icons/search.svg";
+import settings from "../../../assets/images/Icons/settings.svg";
+
+export const Multiselect = ({
+  arrayData,
+  token,
+  showSearchBar,
+  placeHolder = "Buscar grupo",
+  textButton = "Editar grupos",
+}) => {
+  const [userData, setUserData] = useState(null);
+  const [groups, setGroups] = useState(null);
+  const [selectValues, setSelectValues] = useState([]);
+  const [text, setText] = useState("");
+  const [isEditGroupVisible, setIsEditGroupVisible] = useState(false);
+  const [isItemListVisible, setIsItemListVisible] = useState(true);
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+
+
+  const handleChange = (userId) => (event) => {
+    const {
+      target: { value },
+    } = event;
+
+    const updatedValues = value.filter((group) => {
+      const groupInfo = groups.find((g) => g.groupName === group);
+      return groupInfo && groupInfo.userContentGroup === 1;
+    });
+
+    setSelectValues((prevValues) => ({
+      ...prevValues,
+      [userId]: updatedValues,
+    }));
+
+    setIsCheckboxChecked(updatedValues.length > 0);
+  };
+
+  useEffect(() => {
+    let filteredArray = groups?.slice() || [];
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+      );
+    }
+  }, [text]);
+
+  useEffect(() => {
+    console.log("userData", userData);
+  }, [userData]);
+
+  useEffect(() => {
+    console.log("groups", groups);
+  }, [groups]);
+
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+        display: isItemListVisible ? "block" : "none",
+      },
+    },
+  };
+
+  return (
+    <Container>
+      {arrayData.map((user) => (
+        <>
+          <p>{user.idUser}</p>
+          <p>{user.userName}</p>
+          <Select
+            labelId={`demo-multiple-checkbox-label-${user.idUser}`}
+            id={`demo-multiple-checkbox-${user.idUser}`}
+            multiple
+            value={selectValues[user.idUser] || []}
+            onChange={handleChange(user.idUser)}
+            input={
+              <OutlinedInput
+                sx={{
+                  width: "80%",
+                  height: "34px",
+                  paddingBottom: "1px solid #F0F0F0",
+                }}
+              />
+            }
+            renderValue={(selected) => selected.join(", ")}
+            MenuProps={MenuProps}
+            sx={{ width: "80%", height: "24px" }}
+          >
+            <MenuItem
+              sx={{
+                maxHeight: "34px",
+                paddingLeft: "10px",
+                "& .search-bar-filter": {
+                  display: "flex",
+                  gap: "10px",
+                  input: {
+                    border: "none",
+                    background: "transparent",
+                    "::placeholder": {
+                      fontSize: "12px",
+                      color: "#CBCBCB",
+                    },
+                    ":focus-visible, :hover": {
+                      border: "none",
+                      background: "transparent",
+                      outline: "none",
+                    },
+                  },
+                  ":focus-visible, :hover": {
+                    background: "transparent",
+                  },
+                },
+              }}
+            >
+              {showSearchBar && (
+                <div className="search-bar-filter">
+                  <img src={searchIcon} alt="search icon" />
+                  <input
+                    type="text"
+                    placeholder={placeHolder}
+                    value={text}
+                    onChange={onChange}
+                  />
+                </div>
+              )}
+            </MenuItem>
+            {console.log("usuario", user.idUser, "grupos", user.groups)}
+            {user.groups &&
+              user.groups
+                .filter((group) => group.groupId !== "Sin id")
+                .map((group) => (
+                  <MenuItem
+                    key={group.groupId}
+                    value={group.groupName}
+                    sx={{
+                      paddingLeft: "0px",
+                      maxHeight: "34px",
+                      ":focus-visible, :hover": {
+                        border: "none",
+                        background: "transparent",
+                      },
+                    }}
+                  >
+                    <Checkbox
+                      checked={
+                        (selectValues[user.idUser] || []).indexOf(
+                          group.groupName
+                        ) > -1 && group.userContentGroup === 1
+                      }
+                      sx={{
+                        maxHeight: "34px",
+                        "&.Mui-checked": {
+                          color: "#85BC5B",
+                        },
+                        "input, svg": {
+                          maxWidth: "12px",
+                          maxHeight: "12px",
+                        },
+                      }}
+                    />
+                    {console.log("nombre grupo", group.groupName)}
+                    <ListItemText
+                      primary={group.groupName}
+                      sx={{
+                        span: { fontSize: "12px", color: "#000000" },
+                        "input, svg": {
+                          maxWidth: "12px",
+                          maxHeight: "12px",
+                        },
+                      }}
+                    />
+                  </MenuItem>
+                ))}
+            <MenuItem
+              sx={{
+                minHeight: "34px",
+                paddingLeft: "10px",
+                ".btn-edit": {
+                  color: "#E33AA9",
+                  border: "none",
+                  background: "transparent",
+                  display: "flex",
+                  gap: "10px",
+                  alignItems: "center",
+                },
+                ":focus-visible, :hover": {
+                  border: "none",
+                  background: "transparent",
+                },
+              }}
+            >
+              <button
+                className="btn-edit"
+                onClick={() => {
+                  setIsItemListVisible(false);
+                  setIsEditGroupVisible(true);
+                }}
+              >
+                <img src={settings} className="icon" alt="search icon" />
+                {textButton}
+              </button>
+            </MenuItem>
+          </Select>
+        </>
+      ))}
+      <EditGroup
+        token={token}
+        show={isEditGroupVisible}
+        onClose={() => {
+          setIsEditGroupVisible(false);
+          setIsItemListVisible(true);
+        }}
+      />
+    </Container>
+  );
+};

package/src/components/atoms/Multiselect/styles.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    width:100%;
+    height:auto;
+    .search-bar-filter {
+        display: flex;
+        align-items: center;
+        border: 1px solid #f0f0f0;
+        padding-left: 10px;
+  
+        img {
+          width: 15px;
+          height: 15px;
+        }
+  
+        input {
+          background-color: transparent;
+          padding: 10px 10px;
+          outline: none;
+          border: none;
+        }
+      }
+
+      img.icon{
+        width: 15px;
+          height: 15px;
+      }
+`;

package/src/components/atoms/TabSection/styles.js

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
 export const Container = styled.div`
   font-family: ${FontFamily.Raleway_500};
   color: ${GlobalColors.s5};
@@ -11,13 +10,11 @@ export const Container = styled.div`
   padding-bottom: 5px;
   transition: 0.1s all;
   cursor: pointer;
-
   &.active {
     font-size: 18px;
     border-bottom: 2px solid ${GlobalColors.magenta_s2};
   }
-
   & + * {
     margin-left: 10px;
   }
-`;
+`;

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -11,8 +11,8 @@ export const ProviderProductEditionDefault = Template.bind({});
 
 ProviderProductEditionDefault.args = {
   tabsSections: {
-    Descripción: true,
-    "Ficha técnica": false,
+    Descripción: false,
+    "Ficha técnica": true,
     Imágenes: false,
   },
   token:
@@ -21,57 +21,46 @@ ProviderProductEditionDefault.args = {
   category: 287,
   version: 1,
   productSelected: {
-    category: "Accesorios Decorativos|Accesorios Decorativos",
-    company_name: "Demo",
-    company_id: 923,
-    id_category: "2028",
-    id_article: 118465,
-    name: "VELA AROMA 18 OZ MAN/CAN",
-    upc: "Modelo6",
-    isVisible: 1,
-    retailers: [
-      {
-        id: 68,
-        name: "The Home Depot Onboarding",
-      },
-    ],
+    id_article: 121067,
+    upc: "2342341",
+    name: "asd",
+    timestamp: "2024-01-03T19:42:59.000Z",
+    categoryName: "Abarrotes|Abarrotes Secos|Alimentos Deshidratados",
+    id_category: 4,
     version: 1,
+    value: null,
     retailersAvailable: [
       {
-        id: 68,
-        name: "The Home Depot Onboarding",
-      },
+        "name": "Walmart Marketplace",
+        "id": 75
+      }
     ],
+    percentage: 1.33
   },
   productToEdit: {
-    idCategory: "2028",
-    ArticleId: 118465,
+    idCategory: 4,
+    ArticleId: 121067,
     product: [
-      {
-        category: "Accesorios Decorativos|Accesorios Decorativos",
-        company_name: "Demo",
-        company_id: 923,
-        id_category: "2028",
-        id_article: 118465,
-        name: "VELA AROMA 18 OZ MAN/CAN",
-        upc: "Modelo6",
-        isVisible: 1,
-        retailers: [
-          {
-            id: 68,
-            name: "The Home Depot Onboarding",
-          },
-        ],
-        version: 1,
-        retailersAvailable: [
-          {
-            id: 68,
-            name: "The Home Depot Onboarding",
-          },
-        ],
-      },
-    ],
-  },
+        {
+            id_article: 121067,
+            upc: "2342341",
+            name: "asd",
+            timestamp: "2024-01-03T19:42:59.000Z",
+            categoryName: "Abarrotes|Abarrotes Secos|Alimentos Deshidratados",
+            id_category: 4,
+            version: 1,
+            value: null,
+            retailersAvailable: [
+                {
+                    name: "Walmart Marketplace",
+                    id: 75,
+                    percentage: 1.33
+                }
+            ],
+            percentage: 1.33
+        }
+    ]
+},
   location: {
     pathname: "/EditProducts",
     search: "",
@@ -84,66 +73,54 @@ ProviderProductEditionDefault.args = {
     key: "24vwut",
   },
   user: {
-    id_user: 191,
-    name: "Demo",
-    last_name: "Demo",
-    email: "merchants24feb@allfreemail.net",
-    position: "Test",
-    telephone: "+52123456789",
+    id_user: 28,
+    name: "Ismael",
+    last_name: "López",
+    email: "ilopez@contentoh.com",
+    position: "Test States",
+    telephone: "+523111366336",
     country: "México",
-    id_company: 923,
-    id_cognito: "c3cd160c-76c2-497c-9357-5ef949307e1e",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
     id_role: 0,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
-    is_user_tech: null,
+    is_user_tech: "ADMIN-AS",
     membership: {
-      id: 114,
-      start_date: "2023-02-24T18:14:43.000Z",
-      end_date: "2024-02-24T18:14:43.000Z",
-      planID: 8,
-      plan: "prod_KtlhECVSFG2iro",
-      name: "Plan Pro",
-      user_limit: "50",
-      products_limit: "5000",
-      type: "Enterprise",
+        id: 76,
+        start_date: "2022-01-18T17:25:35.000Z",
+        end_date: "2023-01-18T17:25:35.000Z",
+        planID: 8,
+        plan: "prod_KtlhECVSFG2iro",
+        name: "Plan Pro",
+        user_limit: "50",
+        products_limit: "5000",
+        type: "Enterprise"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-191/191.png?1701729602068",
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1704310718113"
   },
   company: {
-    id_company: 923,
-    trade_name: "Demo",
-    company_name: "Demo",
-    rfc: "Demo",
-    adress: "Demo",
-    about_company: null,
-    telephone: null,
-    web_site: null,
-    zip_code: null,
+    id_company: 1,
+    trade_name: "GRUPO BRAHMA",
+    company_name: "GRUPO BRAHMA",
+    rfc: "XAXX010101000",
+    adress: "AA",
+    about_company: "",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
     email: null,
-    social_link: null,
+    social_link: "",
     is_retailer: 0,
-    financedRetailers: [
-      {
-        id: 68,
-        name: "The Home Depot Onboarding",
-        country: "México",
-      },
-    ],
-    retailers: [
-      {
-        id: 68,
-        name: "The Home Depot Onboarding",
-        country: "México",
-      },
-    ],
-  },
+    financedRetailers: [],
+    retailers: []
+},
   showSurvey: (v) => v && alert("se muestra"),
 };

package/src/components/pages/ProviderProductEdition/index.js

@@ -151,7 +151,7 @@ export const ProviderProductEdition = ({
   const [datasheets, setDatasheets] = useState([]);
   const [images, setImages] = useReducer(reducerImages, {});
   const [showModal, setShowModal] = useState(false);
-  const [boxData, setBoxData] = useState();
+  const [boxData, setBoxData] = useState({});
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     noKeyboard: true,
@@ -674,7 +674,7 @@ export const ProviderProductEdition = ({
     }));
     setSocketType(imageInputs);
   }, [images]);
-
+  
   const saveDescriptions = async () => {
     setLoading(true);
     const dataObject = {
@@ -724,6 +724,8 @@ export const ProviderProductEdition = ({
       ...(parseBoxData.length > 0 && { boxData: parseBoxData }),
     };
 
+    console.log({dataObject});
+    console.log(product?.orderId);
     if (product?.orderId) dataObject["orderId"] = product?.orderId;
     try {
       const res = await axios.put(