contentoh-components-library 21.0.80 → 21.0.83

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

@@ -34,14 +34,15 @@ 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,
       changeImage = _ref.changeImage,
       selectedImages = _ref.selectedImages,
       setSelectedImages = _ref.setSelectedImages,
-      setCheckAll = _ref.setCheckAll;
+      setCheckAll = _ref.setCheckAll,
+      setSocketType = _ref.setSocketType;
 
   var _useState = (0, _react.useState)(validation),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -110,14 +111,16 @@ var GalleryElement = function GalleryElement(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
             width: "100%",
             placeholder: "Tipo de toma",
-            options: imageInputs,
+            options: imageInputs === null || imageInputs === void 0 ? void 0 : imageInputs.filter(function (img) {
+              return img.value === image.image_id || !img.active;
+            }),
             valueSelected: image.image_id,
             onChange: function onChange(e) {
               changeImage({
                 action: "changeImageInfo",
                 attribute: "image_id",
                 value: +e.target.value,
-                index: index
+                index: number
               });
             }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
@@ -130,7 +133,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 +146,7 @@ var GalleryElement = function GalleryElement(_ref) {
                 action: "changeImageInfo",
                 attribute: "packing_type",
                 value: +e.target.value,
-                index: index
+                index: number
               });
             }
           })]

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/TableHeader/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  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .input-name-header {\n    overflow: auto;\n    max-width: 40%;\n    white-space: nowrap;\n  }\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .input-name-header {\n    overflow-x: auto;\n    max-width: 40%;\n    white-space: nowrap;\n    height: 23px;\n    line-height: 23px;\n    text-overflow: initial;\n  }\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

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

@@ -439,6 +439,11 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       modalViewTextArea = _useState78[0],
       setModalViewTextArea = _useState78[1];
 
+  var _useState79 = (0, _react.useState)(null),
+      _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
+      socketType = _useState80[0],
+      setSocketType = _useState80[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -462,7 +467,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]);
@@ -684,15 +689,9 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
   }, [activeRetailer, services]);
 
   var thumbs = function thumbs() {
-    var _images$inputs, _images$imageType, _images$imagePackagin, _images$values;
+    var _images$imageType, _images$imagePackagin, _images$values;
 
-    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name,
-        required: e === null || e === void 0 ? void 0 : e.required
-      };
-    });
+    var imageInputs = socketType.slice();
     var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
       return {
         value: e === null || e === void 0 ? void 0 : e.id,
@@ -711,7 +710,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,
@@ -722,6 +722,22 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     });
   };
 
+  (0, _react.useEffect)(function () {
+    var _images$inputs;
+
+    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required,
+        active: images === null || images === void 0 ? void 0 : images.values.some(function (value) {
+          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+        })
+      };
+    });
+    setSocketType(imageInputs);
+  }, [images]);
+
   var saveDescriptions = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
       var productTemp, dataObject;
@@ -950,7 +966,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
         switch (_context9.prev = _context9.next) {
           case 0:
             if (!imagesUploaded) {
-              _context9.next = 13;
+              _context9.next = 14;
               break;
             }
 
@@ -973,21 +989,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 +1439,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 +1491,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

@@ -36,46 +36,61 @@ RetailerProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    orderId: 132,
-    id_category: "612",
-    status: "IN_PROGRESS",
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1
+    },
+    orderId: 233,
+    status: "QF",
     datasheet_status: "QF",
     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"
-    }],
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1
-    },
-    checked: false,
-    retailersAvailable: [{
-      id: 2,
-      name: "Walmart Mercancías Generales"
+      id: 4,
+      name: "Walmart Super y Superama",
+      country: "México",
+      id_region: 1,
+      active: 1,
+      percentage: 100
+    }, {
+      id: 26,
+      name: "Mercado Libre",
+      country: "México",
+      id_region: 1,
+      active: 1,
+      percentage: 100
     }],
-    id_article: 109490,
-    categoryName: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
-    version_status: "IN_PROGRESS"
+    country: "México",
+    upc: "6545345"
   },
   location: {
     product: {
@@ -84,22 +99,22 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 54,
-    name: "ESPECIALISTA TXTS PRUEBA",
+    id_user: 53,
+    name: "FACILITADOR ED PRUEBA",
     last_name: "",
-    email: "rlegorreta@contentoh.com",
+    email: "arojas@contentoh.com",
     position: null,
     telephone: null,
     country: null,
     id_company: 2,
-    id_cognito: "ca1d24ab-e992-4c19-b4e1-2fe6f720c16b",
+    id_cognito: "c106e141-e221-49e8-a382-ce99385c6d88",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 7,
+    id_role: 5,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -113,6 +128,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-54/54.png?1653425316222"
+    src: "https://content-management-profile.s3.amazonaws.com/id-53/53.png?1655161876316"
   }
 };

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,
@@ -367,6 +367,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       statusArray = _useState64[0],
       setStatusArray = _useState64[1];
 
+  var _useState65 = (0, _react.useState)(null),
+      _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
+      socketType = _useState66[0],
+      setSocketType = _useState66[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -390,7 +395,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 +429,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;
@@ -629,15 +634,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }, [activeRetailer, services]);
 
   var thumbs = function thumbs() {
-    var _images$inputs, _images$imageType, _images$imagePackagin, _images$values;
+    var _images$imageType, _images$imagePackagin, _images$values;
 
-    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name,
-        required: e === null || e === void 0 ? void 0 : e.required
-      };
-    });
+    var imageInputs = socketType.slice();
     var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
       return {
         value: e === null || e === void 0 ? void 0 : e.id,
@@ -656,10 +655,12 @@ 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,
+        setSocketType: setSocketType,
         changeImage: setImages,
         selectedImages: selectedImages,
         setSelectedImages: setSelectedImages
@@ -776,6 +777,21 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     };
   }();
 
+  (0, _react.useEffect)(function () {
+    var _images$inputs;
+
+    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required,
+        active: images === null || images === void 0 ? void 0 : images.values.some(function (value) {
+          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+        })
+      };
+    });
+    setSocketType(imageInputs);
+  }, [images]);
   var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
     var _images$values2, _product$article10, _data$articleData, _data$articleData2, _data$updateImages;
 
@@ -900,7 +916,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         switch (_context9.prev = _context9.next) {
           case 0:
             if (!imagesUploaded) {
-              _context9.next = 13;
+              _context9.next = 14;
               break;
             }
 
@@ -923,21 +939,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) {
@@ -990,8 +1007,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var approveRejectButtons = function approveRejectButtons(action) {
-    var concept = getConcept(activeTab);
-    concept = action ? action : concept;
+    var concept = getConcept(action || activeTab);
 
     var _servicesData$filter = servicesData.filter(function (srv) {
       return srv.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && srv.service === concept;
@@ -1150,24 +1166,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }();
 
   var userAssigned = function userAssigned(tab, rol) {
-    var concept = "";
-
-    switch (tab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-
+    var concept = getConcept(activeTab);
     var allowedRoles = [1, 4, 5, 6, 7, 8];
-    var validUser = allowedRoles.indexOf(user === null || user === void 0 ? void 0 : user.id_role) !== -1;
+    var validUser = allowedRoles.includes(user === null || user === void 0 ? void 0 : user.id_role);
 
     if (!rol) {
       switch (user.id_role) {
@@ -1458,24 +1459,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 +1511,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         buttonType: "general-button-default",
         label: "Aceptar",
         onClick: function onClick() {
-          return deleteImages();
+          setMessage("");
+          deleteImages();
         }
       }, "3")]);
     }
@@ -1599,19 +1616,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 +1636,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.80",
+  "version": "21.0.83",
   "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,
@@ -20,6 +20,7 @@ export const GalleryElement = ({
   selectedImages,
   setSelectedImages,
   setCheckAll,
+  setSocketType,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -76,14 +77,16 @@ export const GalleryElement = ({
               <Select
                 width="100%"
                 placeholder="Tipo de toma"
-                options={imageInputs}
+                options={imageInputs?.filter(
+                  (img) => img.value === image.image_id || !img.active
+                )}
                 valueSelected={image.image_id}
                 onChange={(e) => {
                   changeImage({
                     action: "changeImageInfo",
                     attribute: "image_id",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -97,7 +100,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "image_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -111,7 +114,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/molecules/TableHeader/styles.js

@@ -8,9 +8,12 @@ export const Container = styled.div`
   border-bottom: 1px solid ${GlobalColors.s2};
 
   .input-name-header {
-    overflow: auto;
+    overflow-x: auto;
     max-width: 40%;
     white-space: nowrap;
+    height: 23px;
+    line-height: 23px;
+    text-overflow: initial;
   }
   .status-asignation-info {
     display: flex;

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

@@ -192,6 +192,7 @@ export const ProviderProductEdition = ({
     img: face,
   });
   const [modalViewTextArea, setModalViewTextArea] = useState(false);
+  const [socketType, setSocketType] = useState(null);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -210,7 +211,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);
 
@@ -355,11 +356,7 @@ export const ProviderProductEdition = ({
   }, [activeRetailer, services]);
 
   const thumbs = () => {
-    const imageInputs = images?.inputs?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-      required: e?.required,
-    }));
+    const imageInputs = socketType.slice();
     const imageType = images?.imageType?.map((e) => ({
       value: e?.id,
       name: e?.name,
@@ -375,7 +372,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}
@@ -386,6 +384,16 @@ export const ProviderProductEdition = ({
     ));
   };
 
+  useEffect(() => {
+    const imageInputs = images?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+      required: e?.required,
+      active: images?.values.some((value) => value?.image_id === e?.id),
+    }));
+    setSocketType(imageInputs);
+  }, [images]);
+
   const saveDescriptions = async () => {
     setLoading(true);
     const productTemp = product;
@@ -548,6 +556,7 @@ export const ProviderProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
         loadData();
       } catch (error) {
         console.log(error);
@@ -940,23 +949,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 +1007,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,71 +21,86 @@ RetailerProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    orderId: 132,
-    id_category: "612",
-    status: "IN_PROGRESS",
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    orderId: 233,
+    status: "QF",
     datasheet_status: "QF",
     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,
+        percentage: 100,
       },
-    ],
-    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,
+        percentage: 100,
       },
     ],
-    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 },
   },
   user: {
-    id_user: 54,
-    name: "ESPECIALISTA TXTS PRUEBA",
+    id_user: 53,
+    name: "FACILITADOR ED PRUEBA",
     last_name: "",
-    email: "rlegorreta@contentoh.com",
+    email: "arojas@contentoh.com",
     position: null,
     telephone: null,
     country: null,
     id_company: 2,
-    id_cognito: "ca1d24ab-e992-4c19-b4e1-2fe6f720c16b",
+    id_cognito: "c106e141-e221-49e8-a382-ce99385c6d88",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 7,
+    id_role: 5,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -99,6 +114,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-54/54.png?1653425316222",
+    src: "https://content-management-profile.s3.amazonaws.com/id-53/53.png?1655161876316",
   },
 };

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

@@ -150,6 +150,7 @@ export const RetailerProductEdition = ({
   const [loading, setLoading] = useState(true);
   const [retailerStatus, setRetailerStatus] = useState("-");
   const [statusArray, setStatusArray] = useState([]);
+  const [socketType, setSocketType] = useState(null);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -167,7 +168,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 +182,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);
@@ -337,11 +340,7 @@ export const RetailerProductEdition = ({
   }, [activeRetailer, services]);
 
   const thumbs = () => {
-    const imageInputs = images?.inputs?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-      required: e?.required,
-    }));
+    const imageInputs = socketType.slice();
     const imageType = images?.imageType?.map((e) => ({
       value: e?.id,
       name: e?.name,
@@ -357,10 +356,12 @@ 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}
+        setSocketType={setSocketType}
         changeImage={setImages}
         selectedImages={selectedImages}
         setSelectedImages={setSelectedImages}
@@ -429,6 +430,16 @@ export const RetailerProductEdition = ({
     }
   };
 
+  useEffect(() => {
+    const imageInputs = images?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+      required: e?.required,
+      active: images?.values.some((value) => value?.image_id === e?.id),
+    }));
+    setSocketType(imageInputs);
+  }, [images]);
+
   const updateImages = useCallback(async () => {
     const imagesList = images?.values?.slice();
     const imagesListTemp = imagesList?.reduce((acc, image) => {
@@ -531,6 +542,7 @@ export const RetailerProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
         loadData();
       } catch (error) {
         console.log(error);
@@ -587,8 +599,7 @@ export const RetailerProductEdition = ({
   };
 
   const approveRejectButtons = (action) => {
-    let concept = getConcept(activeTab);
-    concept = action ? action : concept;
+    let concept = getConcept(action || activeTab);
 
     const [retailerStatus] = servicesData.filter(
       (srv) => srv.id_retailer === activeRetailer?.id && srv.service === concept
@@ -721,22 +732,10 @@ export const RetailerProductEdition = ({
   };
 
   const userAssigned = (tab, rol) => {
-    let concept = "";
-    switch (tab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
+    let concept = getConcept(activeTab);
 
     const allowedRoles = [1, 4, 5, 6, 7, 8];
-    const validUser = allowedRoles.indexOf(user?.id_role) !== -1;
+    const validUser = allowedRoles.includes(user?.id_role);
 
     if (!rol) {
       switch (user.id_role) {
@@ -983,23 +982,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 +1040,10 @@ export const RetailerProductEdition = ({
           key={"3"}
           buttonType="general-button-default"
           label={"Aceptar"}
-          onClick={() => deleteImages()}
+          onClick={() => {
+            setMessage("");
+            deleteImages();
+          }}
         />,
       ]);
     }
@@ -1127,13 +1148,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: