contentoh-components-library 21.0.79 → 21.0.82

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

@@ -36,7 +36,10 @@ var GeneralInput = function GeneralInput(_ref) {
       setUpdatedDescriptions = _ref.setUpdatedDescriptions,
       maxChar = _ref.maxChar,
       isRequired = _ref.isRequired,
-      version = _ref.version;
+      version = _ref.version,
+      _ref$optionList = _ref.optionList,
+      optionList = _ref$optionList === void 0 ? [] : _ref$optionList,
+      description = _ref.description;
 
   var _useState = (0, _react.useState)({
     value: inputValue
@@ -90,9 +93,27 @@ var GeneralInput = function GeneralInput(_ref) {
 
     setRequiredEmpty(isRequired && (((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0 || textValue.value === undefined));
   }, [textValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     isRequired: requiredEmpty,
-    children: inputType === "checkbox" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+    children: [(optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      id: "dropdown".concat(inputId) //disabled={!enableInputs}
+      ,
+      onChange: function onChange(e) {
+        return onHandleChange(e);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "",
+        selected: true,
+        disabled: true,
+        children: description
+      }), JSON.parse(optionList || "[]").map(function (element) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          value: element,
+          selected: element === textValue.value ? "selected" : "",
+          children: element
+        }, element);
+      })]
+    }, "dropdownK".concat(inputId)) : inputType === "checkbox" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
       id: inputId,
       onChange: function onChange(e) {
         return onHandleChange(e);
@@ -121,7 +142,9 @@ var GeneralInput = function GeneralInput(_ref) {
       setUpdatedDescriptions: setUpdatedDescriptions,
       maxChar: maxChar,
       isRequired: isRequired
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: description
+    })]
   });
 };
 

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

@@ -15,12 +15,15 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 11px;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "none";
 }, function (_ref2) {
   var isRequired = _ref2.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, function (_ref3) {
+  var isRequired = _ref3.isRequired;
+  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.s4);
 
 exports.Container = Container;

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n\n    &:last-child {\n      min-width: 50px;\n      text-align: center;\n    }\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n    min-width: 50px;\n    text-align: center;\n  }\n  &.header-and-paragraph {\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p {\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n  position: relative;\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    height: 19px;\n    max-width: 100%;\n    font-weight: 400;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n\n    &:last-child {\n      min-width: 50px;\n      text-align: center;\n    }\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n    min-width: 50px;\n    text-align: center;\n  }\n  &.header-and-paragraph {\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p {\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
   return props.fontFamily;
 }, function (props) {
   return props.color;

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

@@ -37,8 +37,7 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage() {
       trueBar = _useState2[0],
       setTrueBar = _useState2[1];
 
-  var active = function active() {
-    console.log(window.location.href); //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  var active = function active() {//document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {

package/dist/components/molecules/GalleryElement/index.js

@@ -34,7 +34,7 @@ var GalleryElement = function GalleryElement(_ref) {
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "chk-default" : _ref$id,
       label = _ref.label,
-      index = _ref.index,
+      number = _ref.number,
       imageInputs = _ref.imageInputs,
       imageType = _ref.imageType,
       imagePackagingType = _ref.imagePackagingType,
@@ -117,7 +117,7 @@ var GalleryElement = function GalleryElement(_ref) {
                 action: "changeImageInfo",
                 attribute: "image_id",
                 value: +e.target.value,
-                index: index
+                index: number
               });
             }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
@@ -130,7 +130,7 @@ var GalleryElement = function GalleryElement(_ref) {
                 action: "changeImageInfo",
                 attribute: "image_type",
                 value: +e.target.value,
-                index: index
+                index: number
               });
             }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
@@ -143,7 +143,7 @@ var GalleryElement = function GalleryElement(_ref) {
                 action: "changeImageInfo",
                 attribute: "packing_type",
                 value: +e.target.value,
-                index: index
+                index: number
               });
             }
           })]

package/dist/components/molecules/RegistrationSecondStep/index.js

@@ -62,7 +62,6 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
     !privacyCheck && (valid = false);
 
     if (valid) {
-      console.log(valid);
       nuevoUsuario.password = password;
       sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
       valid && props.setPaso(3);

package/dist/components/molecules/StatusAsignationInfo/index.js

@@ -75,7 +75,10 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
   }, [showAsignationPanel]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: id,
-    children: [showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+    children: [status !== "-" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
+      statusType: status,
+      ovalForm: true
+    }), showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
       buttonType: "circular-button save-button",
       onClick: onClickSave
     }), imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/components/molecules/TagAndInput/index.js

@@ -31,13 +31,21 @@ var TagAndInput = function TagAndInput(_ref) {
       inputCols = _ref.inputCols,
       inputRows = _ref.inputRows,
       maxChar = _ref.maxChar,
-      required = _ref.required;
+      required = _ref.required,
+      optionList = _ref.optionList,
+      description = _ref.description;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
-      text: label,
-      headerType: "input-name-header"
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "title-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+        text: label,
+        headerType: "input-name-header"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "tooltip",
+        children: label
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GeneralInput, {
       inputId: inputId,
       inputType: inputType,
@@ -55,7 +63,9 @@ var TagAndInput = function TagAndInput(_ref) {
       inputCols: inputCols,
       inputRows: inputRows,
       maxChar: maxChar,
-      required: required
+      required: required,
+      optionList: optionList,
+      description: description
     })]
   }, "generalTagInput-".concat(inputType));
 };

package/dist/components/molecules/TagAndInput/styles.js

@@ -11,11 +11,19 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _variables = require("../../../global-files/variables");
+
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n"])), function (_ref) {
-  var inputType = _ref.inputType;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n\n    .tooltip {\n      display: none;\n      position: absolute;\n      background-color: ", ";\n      color: ", ";\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      left: 0;\n      top: 0;\n      height: fit-content;\n      transition: display 2s;\n    }\n\n    &:hover {\n      .tooltip {\n        display: block;\n      }\n    }\n  }\n\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n  & + * {\n    margin-top: ", "px;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
+  var color = _ref.color;
+  return color ? color : _variables.GlobalColors.s5;
+}, _variables.FontFamily.Raleway, function (_ref2) {
+  var inputType = _ref2.inputType;
   return inputType !== "textarea" ? 4 : 15;
+}, function (_ref3) {
+  var inputType = _ref3.inputType;
+  return inputType !== "textarea" ? 0 : 10;
 });
 
 exports.Container = Container;

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

@@ -28,7 +28,6 @@ var InputGroup = function InputGroup(_ref) {
       articleId = _ref.articleId,
       version = _ref.version,
       dinamicHeight = _ref.dinamicHeight;
-  console.log(dataInputs, "dataInputs");
 
   var inputTypeValue = function inputTypeValue(type) {
     switch (type) {
@@ -51,7 +50,7 @@ var InputGroup = function InputGroup(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "inputs-container",
       children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10;
+        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12;
 
         return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
           inputId: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.id,
@@ -64,7 +63,9 @@ var InputGroup = function InputGroup(_ref) {
           isRequired: (_dataInputs$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.required,
           updatedDatasheets: updatedDatasheets,
           setUpdatedDatasheets: setUpdatedDatasheets,
-          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999
+          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999,
+          optionList: (_dataInputs$input11 = dataInputs[input]) === null || _dataInputs$input11 === void 0 ? void 0 : _dataInputs$input11.option_list,
+          description: (_dataInputs$input12 = dataInputs[input]) === null || _dataInputs$input12 === void 0 ? void 0 : _dataInputs$input12.description
         }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value) + "-" + ((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
           inputId: input.id,
           index: index,
@@ -78,7 +79,8 @@ var InputGroup = function InputGroup(_ref) {
           setUpdatedDescriptions: setUpdatedDescriptions,
           articleId: articleId,
           version: version,
-          dinamicHeight: dinamicHeight
+          dinamicHeight: dinamicHeight,
+          description: input === null || input === void 0 ? void 0 : input.description
         }, index + "-" + (input === null || input === void 0 ? void 0 : input.value));
       })
     })]

package/dist/components/organisms/InputGroup/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  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n      width: 100%;\n      gap: 5px;\n\n      .input-container {\n        flex: 1 1 20%;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

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

@@ -462,7 +462,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
               setImages({
                 action: "init",
-                init: services[2]
+                init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2]
               });
               if (((_services$ = services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
               setActiveRetailer(product.retailers ? product.retailers[0] : product.retailersAvailable[0]);
@@ -711,7 +711,8 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
         image: image,
         gridLayout: imageLayout,
         id: "gallery-element-" + index,
-        index: index,
+        index: index + "-" + image.name,
+        number: index,
         imageType: imageType,
         imagePackagingType: imagePackagingType,
         imageInputs: imageInputs,
@@ -950,7 +951,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
         switch (_context9.prev = _context9.next) {
           case 0:
             if (!imagesUploaded) {
-              _context9.next = 13;
+              _context9.next = 14;
               break;
             }
 
@@ -973,21 +974,22 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
           case 6:
             setMessage("Imágenes guardadas con éxito");
+            sessionStorage.removeItem("imagesList");
             loadData();
-            _context9.next = 13;
+            _context9.next = 14;
             break;
 
-          case 10:
-            _context9.prev = 10;
+          case 11:
+            _context9.prev = 11;
             _context9.t0 = _context9["catch"](3);
             console.log(_context9.t0);
 
-          case 13:
+          case 14:
           case "end":
             return _context9.stop();
         }
       }
-    }, _callee9, null, [[3, 10]]);
+    }, _callee9, null, [[3, 11]]);
   })), [dataImages, imagesUploaded]);
 
   var evaluationFinished = function evaluationFinished(userId, tab, statusArray) {// const srv = servicesData.filter((serv) => serv.service === getConcept(tab));
@@ -1422,24 +1424,39 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
   };
 
   var deleteImages = function deleteImages() {
-    var data = {
-      articleId: product.id_article,
-      deleteImages: selectedImages
-    };
+    setLoading(true);
+    var imagesTemp = images;
+    var values = images.values;
+    var imgsInBack = [];
+    selectedImages.forEach(function (selectedImg) {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+    var imgsLeft = values.filter(function (value) {
+      return selectedImages.indexOf(value) === -1;
+    });
+    imagesTemp.values = imgsLeft;
 
-    try {
-      _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
-        headers: {
-          Authorization: token
-        }
-      });
+    if (imgsInBack.length > 0) {
+      var data = {
+        articleId: product.article.id_article,
+        deleteImages: selectedImages
+      };
 
-      loadData();
-    } catch (err) {
-      console.log(err);
+      try {
+        _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
+          headers: {
+            Authorization: token
+          }
+        });
+      } catch (err) {
+        console.log(err);
+      }
     }
 
+    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
+    loadData();
     setMessage("");
+    setComponentsArray([]);
   };
 
   var askToDeleteImages = function askToDeleteImages() {
@@ -1459,7 +1476,8 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
         buttonType: "general-button-default",
         label: "Aceptar",
         onClick: function onClick() {
-          return deleteImages();
+          setMessage("");
+          deleteImages();
         }
       }, "3")]);
     }

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

@@ -41,26 +41,26 @@ RetailerProductEditionDefault.args = {
       descriptions: 1,
       images: 1
     },
-    orderId: 152,
-    status: "ASSIGNED",
+    orderId: 233,
+    status: "IN_PROGRESS",
     datasheet_status: "IN_PROGRESS",
     prio: "none",
-    version: 3,
-    description_status: "IN_PROGRESS",
-    images_status: "IN_PROGRESS",
+    version: 2,
+    description_status: "QF",
+    images_status: "QF",
     article: {
-      id_article: 343,
-      id_category: "2898",
-      name: "Producto prueba dos ",
-      upc: "2004202212",
-      timestamp: "2022-04-20T17:01:17.000Z",
+      id_article: 190965,
+      id_category: "697",
+      name: "Shampoo hidratante",
+      upc: "6545345",
+      timestamp: "2022-06-10T15:05:56.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
       company_name: "COMPANY DEV",
       country: "México",
-      id_order: 152,
+      id_order: 233,
       id_datasheet_especialist: 54,
       id_datasheet_facilitator: 52,
       id_description_especialist: 54,
@@ -69,20 +69,26 @@ RetailerProductEditionDefault.args = {
       id_images_facilitator: 53,
       id_auditor: 30,
       id_recepcionist: null,
-      category: "HALLOWEN|DECORACIÓN E INFLABLES|DECORACIÓN E INFLABLES",
+      category: "SALUD Y BELLEZA|CUIDADO DEL CABELLO|SHAMPOOS Y ACONDICIONADORES",
       missingAttributes: null,
       missingDescriptions: null,
       missingImages: null
     },
     retailers: [{
-      id: 58,
-      name: "The Home Depot",
+      id: 4,
+      name: "Walmart Super y Superama",
+      country: "México",
+      id_region: 1,
+      active: 1
+    }, {
+      id: 26,
+      name: "Mercado Libre",
       country: "México",
       id_region: 1,
       active: 1
     }],
     country: "México",
-    upc: "2004202212"
+    upc: "6545345"
   },
   location: {
     product: {

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

@@ -123,7 +123,7 @@ var myBucket = new _awsSdk.default.S3({
 });
 
 var RetailerProductEdition = function RetailerProductEdition(_ref) {
-  var _product$retailers, _product$services5, _datasheets$, _datasheets$$data, _product$article13;
+  var _product$retailers, _product$services2, _datasheets$, _datasheets$$data, _product$article13;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -390,7 +390,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
               setImages({
                 action: "init",
-                init: services[2]
+                init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2]
               });
               if (((_services$ = services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
               setActiveRetailer(product.retailers ? product.retailers[0] : product.retailersAvailable[0]);
@@ -424,7 +424,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           switch (_context3.prev = _context3.next) {
             case 0:
               _context3.next = 2;
-              return _axios.default.get("".concat(process.env.REACT_APP_SERVICES_ENDPOINT, "?articleId=").concat(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_article, "&orderId=").concat(product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_order, "&end=true"));
+              return _axios.default.get("".concat(process.env.REACT_APP_SERVICES_ENDPOINT, "?articleId=").concat(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_article, "&orderId=").concat((product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_order) || product.orderId, "&end=true"));
 
             case 2:
               servicesResponse = _context3.sent;
@@ -656,7 +656,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         image: image,
         gridLayout: imageLayout,
         id: "gallery-element-" + index,
-        index: index,
+        index: index + "-" + image.name,
+        number: index,
         imageType: imageType,
         imagePackagingType: imagePackagingType,
         imageInputs: imageInputs,
@@ -900,7 +901,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         switch (_context9.prev = _context9.next) {
           case 0:
             if (!imagesUploaded) {
-              _context9.next = 13;
+              _context9.next = 14;
               break;
             }
 
@@ -923,21 +924,22 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
           case 6:
             setMessage("Imágenes guardadas con éxito");
+            sessionStorage.removeItem("imagesList");
             loadData();
-            _context9.next = 13;
+            _context9.next = 14;
             break;
 
-          case 10:
-            _context9.prev = 10;
+          case 11:
+            _context9.prev = 11;
             _context9.t0 = _context9["catch"](3);
             console.log(_context9.t0);
 
-          case 13:
+          case 14:
           case "end":
             return _context9.stop();
         }
       }
-    }, _callee9, null, [[3, 10]]);
+    }, _callee9, null, [[3, 11]]);
   })), [dataImages, imagesUploaded]);
 
   var evaluationFinished = function evaluationFinished(userId, tab, statusArray) {
@@ -1458,24 +1460,39 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var deleteImages = function deleteImages() {
-    var data = {
-      articleId: product.article.id_article,
-      deleteImages: selectedImages
-    };
+    setLoading(true);
+    var imagesTemp = images;
+    var values = images.values;
+    var imgsInBack = [];
+    selectedImages.forEach(function (selectedImg) {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+    var imgsLeft = values.filter(function (value) {
+      return selectedImages.indexOf(value) === -1;
+    });
+    imagesTemp.values = imgsLeft;
 
-    try {
-      _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
-        headers: {
-          Authorization: token
-        }
-      });
+    if (imgsInBack.length > 0) {
+      var data = {
+        articleId: product.article.id_article,
+        deleteImages: selectedImages
+      };
 
-      loadData();
-    } catch (err) {
-      console.log(err);
+      try {
+        _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
+          headers: {
+            Authorization: token
+          }
+        });
+      } catch (err) {
+        console.log(err);
+      }
     }
 
+    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
+    loadData();
     setMessage("");
+    setComponentsArray([]);
   };
 
   var askToDeleteImages = function askToDeleteImages() {
@@ -1495,7 +1512,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         buttonType: "general-button-default",
         label: "Aceptar",
         onClick: function onClick() {
-          return deleteImages();
+          setMessage("");
+          deleteImages();
         }
       }, "3")]);
     }
@@ -1599,19 +1617,17 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           isRetailer: isRetailer,
           showSaveButton: true,
           onClickSave: function onClickSave() {
-            var _product$services2, _product$services3, _product$services4;
-
             switch (activeTab) {
               case "Descripción":
-                (product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.descriptions) === 1 && saveDescriptions();
+                (product === null || product === void 0 ? void 0 : product.description_status) !== "NS" && saveDescriptions();
                 break;
 
               case "Ficha técnica":
-                (product === null || product === void 0 ? void 0 : (_product$services3 = product.services) === null || _product$services3 === void 0 ? void 0 : _product$services3.datasheets) === 1 && saveDatasheets();
+                (product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" && saveDatasheets();
                 break;
 
               case "Imágenes":
-                (product === null || product === void 0 ? void 0 : (_product$services4 = product.services) === null || _product$services4 === void 0 ? void 0 : _product$services4.images) === 1 && updateImages();
+                (product === null || product === void 0 ? void 0 : product.images_status) !== "NS" && updateImages();
                 break;
 
               default:
@@ -1621,7 +1637,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : ""),
           children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [!imageLayout && activeTab === "Imágenes" && (product === null || product === void 0 ? void 0 : (_product$services5 = product.services) === null || _product$services5 === void 0 ? void 0 : _product$services5.images) === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+            children: [!imageLayout && activeTab === "Imágenes" && (product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.images) === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
               setSelectedImages: setSelectedImages,
               checkAll: checkAll,
               setCheckAll: setCheckAll

package/dist/global-files/data.js

@@ -271,7 +271,6 @@ var getNewStatus = function getNewStatus(statusArray) {
   statusArray.forEach(function (element) {
     return lookupString += element + "/";
   });
-  console.log(lookupString, "productTemp");
   if (lookupString.includes("RF")) return "RF";
   if (lookupString.includes("RA")) return "RA";
   if (lookupString.includes("RP")) return "RP";

package/package.json

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

package/src/components/molecules/GalleryElement/index.js

@@ -12,7 +12,7 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
-  index,
+  number,
   imageInputs,
   imageType,
   imagePackagingType,
@@ -83,7 +83,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "image_id",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -97,7 +97,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "image_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -111,7 +111,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "packing_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -40,6 +40,7 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
+      {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (
         <Button
           buttonType={"circular-button save-button"}

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

@@ -210,7 +210,7 @@ export const ProviderProductEdition = ({
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: services[2],
+      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
@@ -375,7 +375,8 @@ export const ProviderProductEdition = ({
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
-        index={index}
+        index={index + "-" + image.name}
+        number={index}
         imageType={imageType}
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
@@ -548,6 +549,7 @@ export const ProviderProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
         loadData();
       } catch (error) {
         console.log(error);
@@ -940,23 +942,42 @@ export const ProviderProductEdition = ({
   };
 
   const deleteImages = () => {
-    const data = {
-      articleId: product.id_article,
-      deleteImages: selectedImages,
-    };
-    try {
-      axios.put(
-        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-        data,
-        {
-          headers: { Authorization: token },
-        }
-      );
-      loadData();
-    } catch (err) {
-      console.log(err);
+    setLoading(true);
+    const imagesTemp = images;
+    const { values } = images;
+    const imgsInBack = [];
+
+    selectedImages.forEach((selectedImg) => {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+
+    const imgsLeft = values.filter(
+      (value) => selectedImages.indexOf(value) === -1
+    );
+
+    imagesTemp.values = imgsLeft;
+
+    if (imgsInBack.length > 0) {
+      const data = {
+        articleId: product.article.id_article,
+        deleteImages: selectedImages,
+      };
+      try {
+        axios.put(
+          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+          data,
+          {
+            headers: { Authorization: token },
+          }
+        );
+      } catch (err) {
+        console.log(err);
+      }
     }
+    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
+    loadData();
     setMessage("");
+    setComponentsArray([]);
   };
 
   const askToDeleteImages = () => {
@@ -979,7 +1000,10 @@ export const ProviderProductEdition = ({
           key={"3"}
           buttonType="general-button-default"
           label={"Aceptar"}
-          onClick={() => deleteImages()}
+          onClick={() => {
+            setMessage("");
+            deleteImages();
+          }}
         />,
       ]);
     }

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

@@ -21,50 +21,63 @@ RetailerProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    orderId: 132,
-    id_category: "612",
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    orderId: 233,
     status: "IN_PROGRESS",
-    datasheet_status: "QF",
+    datasheet_status: "IN_PROGRESS",
     prio: "none",
     version: 2,
-    description_status: "IN_PROGRESS",
-    images_status: "IN_PROGRESS",
-    brand: null,
-    missing: {
-      datasheet: 0,
-      descriptions: 0,
-      images: 0,
-    },
+    description_status: "QF",
+    images_status: "QF",
     article: {
-      category: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
+      id_article: 190965,
+      id_category: "697",
+      name: "Shampoo hidratante",
+      upc: "6545345",
+      timestamp: "2022-06-10T15:05:56.000Z",
+      id_user: 28,
+      status: "NULL",
+      active: 1,
+      company_id: 1,
       company_name: "COMPANY DEV",
-      id_category: "612",
-      id_article: 109490,
-      name: "Collar con dije letra ",
-      timestamp: "2022-05-05T16:45:49.000Z",
-      upc: "123434",
+      country: "México",
+      id_order: 233,
+      id_datasheet_especialist: 54,
+      id_datasheet_facilitator: 52,
+      id_description_especialist: 54,
+      id_description_facilitator: 52,
+      id_images_especialist: 55,
+      id_images_facilitator: 53,
+      id_auditor: 30,
+      id_recepcionist: null,
+      category:
+        "SALUD Y BELLEZA|CUIDADO DEL CABELLO|SHAMPOOS Y ACONDICIONADORES",
+      missingAttributes: null,
+      missingDescriptions: null,
+      missingImages: null,
     },
     retailers: [
       {
-        id: 2,
-        name: "Walmart Mercancías Generales",
+        id: 4,
+        name: "Walmart Super y Superama",
+        country: "México",
+        id_region: 1,
+        active: 1,
       },
-    ],
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1,
-    },
-    checked: false,
-    retailersAvailable: [
       {
-        id: 2,
-        name: "Walmart Mercancías Generales",
+        id: 26,
+        name: "Mercado Libre",
+        country: "México",
+        id_region: 1,
+        active: 1,
       },
     ],
-    id_article: 109490,
-    categoryName: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
-    version_status: "IN_PROGRESS",
+    country: "México",
+    upc: "6545345",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },

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

@@ -167,7 +167,7 @@ export const RetailerProductEdition = ({
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: services[2],
+      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
@@ -181,7 +181,9 @@ export const RetailerProductEdition = ({
 
   const getServices = async () => {
     const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${product?.article?.id_article}&orderId=${product?.article?.id_order}&end=true`
+      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${
+        product?.article?.id_article
+      }&orderId=${product?.article?.id_order || product.orderId}&end=true`
     );
     const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
     setServicesData(parsedResponse);
@@ -357,7 +359,8 @@ export const RetailerProductEdition = ({
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
-        index={index}
+        index={index + "-" + image.name}
+        number={index}
         imageType={imageType}
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
@@ -531,6 +534,7 @@ export const RetailerProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
         loadData();
       } catch (error) {
         console.log(error);
@@ -983,23 +987,42 @@ export const RetailerProductEdition = ({
   };
 
   const deleteImages = () => {
-    const data = {
-      articleId: product.article.id_article,
-      deleteImages: selectedImages,
-    };
-    try {
-      axios.put(
-        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-        data,
-        {
-          headers: { Authorization: token },
-        }
-      );
-      loadData();
-    } catch (err) {
-      console.log(err);
+    setLoading(true);
+    const imagesTemp = images;
+    const { values } = images;
+    const imgsInBack = [];
+
+    selectedImages.forEach((selectedImg) => {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+
+    const imgsLeft = values.filter(
+      (value) => selectedImages.indexOf(value) === -1
+    );
+
+    imagesTemp.values = imgsLeft;
+
+    if (imgsInBack.length > 0) {
+      const data = {
+        articleId: product.article.id_article,
+        deleteImages: selectedImages,
+      };
+      try {
+        axios.put(
+          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+          data,
+          {
+            headers: { Authorization: token },
+          }
+        );
+      } catch (err) {
+        console.log(err);
+      }
     }
+    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
+    loadData();
     setMessage("");
+    setComponentsArray([]);
   };
 
   const askToDeleteImages = () => {
@@ -1022,7 +1045,10 @@ export const RetailerProductEdition = ({
           key={"3"}
           buttonType="general-button-default"
           label={"Aceptar"}
-          onClick={() => deleteImages()}
+          onClick={() => {
+            setMessage("");
+            deleteImages();
+          }}
         />,
       ]);
     }
@@ -1127,13 +1153,13 @@ export const RetailerProductEdition = ({
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
-                  product?.services?.descriptions === 1 && saveDescriptions();
+                  product?.description_status !== "NS" && saveDescriptions();
                   break;
                 case "Ficha técnica":
-                  product?.services?.datasheets === 1 && saveDatasheets();
+                  product?.datasheet_status !== "NS" && saveDatasheets();
                   break;
                 case "Imágenes":
-                  product?.services?.images === 1 && updateImages();
+                  product?.images_status !== "NS" && updateImages();
                   break;
 
                 default: