contentoh-components-library 21.1.88 → 21.1.89

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

@@ -16,7 +16,7 @@ function Select(props) {
       id: props.id,
       width: props.width,
       onChange: props.onChange,
-      defaultValue: props.valueSelected ? props.valueSelected : "",
+      value: props.valueSelected ? props.valueSelected : "",
       className: props.className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
         value: "",

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

@@ -22,7 +22,9 @@ var TableHeader = function TableHeader(_ref) {
       setAssignation = _ref.setAssignation,
       isRetailer = _ref.isRetailer,
       onClickSave = _ref.onClickSave,
-      showSaveButton = _ref.showSaveButton;
+      showSaveButton = _ref.showSaveButton,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.name) || "-",
@@ -34,7 +36,9 @@ var TableHeader = function TableHeader(_ref) {
       setAssignation: setAssignation,
       isRetailer: isRetailer,
       onClickSave: onClickSave,
-      showSaveButton: showSaveButton
+      showSaveButton: showSaveButton,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector
     })]
   });
 };

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

@@ -32,7 +32,9 @@ var ImageDataTable = function ImageDataTable(_ref) {
       setAssignation = _ref.setAssignation,
       isRetailer = _ref.isRetailer,
       onClickSave = _ref.onClickSave,
-      showSaveButton = _ref.showSaveButton;
+      showSaveButton = _ref.showSaveButton,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     darkMode: darkMode,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
@@ -42,7 +44,9 @@ var ImageDataTable = function ImageDataTable(_ref) {
       setAssignation: setAssignation,
       isRetailer: isRetailer,
       showSaveButton: showSaveButton,
-      onClickSave: onClickSave
+      onClickSave: onClickSave,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text",

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

@@ -15,10 +15,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _styles = require("./styles");
 
 var _HeaderTop = require("../../molecules/HeaderTop");
@@ -104,12 +104,27 @@ var _CreateVersion = require("../../organisms/CreateVersion");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
+  var _action$init, _action$init$inputsBy;
+
   var values = state.values,
-      attrForImgs = state.attrForImgs;
+      attrForImgs = state.attrForImgs,
+      inputsByRetailer = state.inputsByRetailer;
 
   switch (action.action) {
     case "init":
-      return action.init;
+      var newInputsByRetailer = {};
+      action === null || action === void 0 ? void 0 : (_action$init = action.init) === null || _action$init === void 0 ? void 0 : (_action$init$inputsBy = _action$init.inputsByRetailer) === null || _action$init$inputsBy === void 0 ? void 0 : _action$init$inputsBy.forEach(function (inputs) {
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach(function (input) {
+          if (!newInputsByRetailer["".concat(input.id_retailer)]) newInputsByRetailer["".concat(input.id_retailer)] = [];
+          newInputsByRetailer["".concat(input.id_retailer)].push(input);
+        });
+      });
+      inputsByRetailer = newInputsByRetailer;
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, action.init), {}, {
+        inputsByRetailer: inputsByRetailer,
+        valuesInitial: action.init.values,
+        inputsInitial: action.init.inputs
+      });
 
     case "addImg":
       values = [].concat((0, _toConsumableArray2.default)(values), [action.img]);
@@ -124,7 +139,14 @@ var reducerImages = function reducerImages(state, action) {
       });
 
     case "changeAttrValue":
-      attrForImgs[action.retailer][action.index].value = action.value;
+      var index = attrForImgs.general.findIndex(function (f) {
+        return f.id = action.id;
+      });
+
+      if (index !== -1) {
+        attrForImgs.general[index].value = action.value;
+      }
+
       return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
         attrForImgs: attrForImgs,
         values: values
@@ -138,6 +160,32 @@ var reducerImages = function reducerImages(state, action) {
         values: values
       });
 
+    case "orderImages":
+      {
+        var _inputsByRetailer$act;
+
+        var _inputsByRetailer = state.inputsByRetailer,
+            valuesInitial = state.valuesInitial,
+            inputsInitial = state.inputsInitial,
+            inputs = state.inputs;
+        var orderedImages = [];
+        var imageIdArray = [];
+        action.retailerId && ((_inputsByRetailer$act = _inputsByRetailer[action.retailerId]) === null || _inputsByRetailer$act === void 0 ? void 0 : _inputsByRetailer$act.filter(function (input) {
+          imageIdArray.push(input.id_image);
+          valuesInitial.forEach(function (value) {
+            if (value.image_id === input.id_image) orderedImages.push(value);
+          });
+        }));
+        inputs = inputsInitial === null || inputsInitial === void 0 ? void 0 : inputsInitial.filter(function (input) {
+          return imageIdArray.includes(input.id);
+        });
+        values = orderedImages.length > 0 ? orderedImages : valuesInitial;
+        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+          values: values,
+          inputs: inputs
+        });
+      }
+
     default:
       return state;
   }
@@ -692,6 +740,10 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
   (0, _react.useEffect)(function () {
     loadInputs();
+    setImages({
+      action: "orderImages",
+      retailerId: activeRetailer.id
+    });
   }, [servicesData, activeRetailer, services]);
 
   var thumbs = function thumbs() {
@@ -1636,7 +1688,9 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
             var _product$services;
 
             return (product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.images) === 1 && updateImages();
-          }
+          },
+          setShowVersionSelector: setShowVersionSelector,
+          version: version
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "product-information",

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

@@ -31,59 +31,85 @@ RetailerProductEditionDefault.args = {
     "Ficha técnica": false,
     Imágenes: false
   },
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmZTM3NjZmNS0zY2E0LTQ2N2MtOTIxMS0yM2Y0NWQ1ZWU4NjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1ODk5MTc2NSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1ODk5NTM2NSwiaWF0IjoxNjU4OTkxNzY1LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.bQDE_eVpwSBWXqgbX2bicpPTgAoG8mfeA_P0l92vBWV0Q7m7llCNOmLvaaZn-EtYNf3xjVH8pGivJGT5KMOLl9adBl8TnUxD0IS2BJp0wB3m3l79BFAswLbfCAFb-x0XJw4LznnnrlN12ZF-9sPcE4s8RXRxw2cSX3Lt4pdJqi8sOG_DNu3BvxmML3Ckv23aK82zWzskXQb_gNdTM2mqi7SvxvE87yb4X_5cfvP6QtA6hEh1jezbHWdzPDxKkme0ZdVOpqEb3c1JMSIP06EQ9NfnXVt0S19hz6kfppC2laFEwrK2M8tO8EH06k2qlSk3Hp5b6Ga3BACvKAWnfOnC1A",
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjFmODVjYTI2LTFiZTItNGRmOC04ZDVlLWNkYzdlYzhhNWY5MyIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjU5NDk3MDMyLCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjU5NTAwNjMyLCJpYXQiOjE2NTk0OTcwMzIsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.YMnbVYuC12JcOT0E1FRioMGyUol_eyu9RCfwa0fwB-K9oGTkrOSLbz8jK4sNI4QRgkr5eGqwF2KASmo1DGxOUwgV2s_-BM_tJpKHEcVuQ7z0X46C5EPahSxNPLuzs22WUnf97uoGYj9IrToWfoxV_6zi1Z1jshXwZ-1Kc9zeZvlFnyGeVyLS6uavMxcD06KNLKdWenQVFGcj6LZRjB-Oy-APMF29M1oggGqrsVdY3N8E9otUkws2yYA35dpHd1zHZNEbsX6cgOemGxog7h2f6NQmNXPrnmH4ZQTLS8sLtD_UOEu9_HAdsXLZizBDKQ95cC6be2p4w_sXj22AUw5BKg",
   productSelected: {
     services: {
-      datasheets: 1,
-      descriptions: 1,
+      datasheets: 0,
+      descriptions: 0,
       images: 1
     },
-    orderId: 2426,
-    status: "AS",
-    datasheet_status: "AS",
+    orderId: 82,
+    status: "AA",
+    datasheet_status: "NS",
     prio: "none",
     version: 2,
-    description_status: "AS",
-    images_status: "AS",
+    description_status: "NS",
+    images_status: "AA",
     article: {
-      id_article: 78738,
-      id_category: "2427",
-      name: "INTERRUPTOR TERMOMAGNETICO IUSA 2P 15A",
-      upc: "157126",
-      timestamp: "2022-08-01T18:28:05.000Z",
-      id_user: 651,
+      id_article: 55147,
+      id_category: "157",
+      name: "Lavatrastes Axion ",
+      upc: "977358",
+      timestamp: "2022-06-21T17:37:05.000Z",
+      id_user: 28,
       status: "NULL",
       active: 1,
-      company_id: 388,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "",
-      country: null,
-      id_order: 2426,
-      id_datasheet_especialist: 1248,
-      id_datasheet_facilitator: 1252,
-      id_description_especialist: 1248,
-      id_description_facilitator: 1252,
-      id_images_especialist: 1251,
-      id_images_facilitator: 1286,
-      id_auditor: 1254,
+      company_id: 1,
+      company_name: "COMPANY DEV",
+      country: "México",
+      id_order: 82,
+      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: "Eléctrico|Centros de Carga e Interruptores|Interruptores de Seguridad",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null
+      category: "Consumibles|Productos de Limpieza y Lavandería|Jabones y Lavatrastes",
+      missingAttributes: 0,
+      missingDescriptions: 0,
+      missingImages: 0
     },
     retailers: [{
-      id: 58,
-      name: "The Home Depot Golden",
-      country: "México",
-      id_region: 1,
-      active: 1
+      id: 3,
+      name: "Sam´s Club"
+    }, {
+      id: 4,
+      name: "Walmart Super y Superama"
+    }, {
+      id: 5,
+      name: "Chedraui"
+    }, {
+      id: 6,
+      name: "HEB"
+    }, {
+      id: 12,
+      name: "La Comer"
+    }, {
+      id: 13,
+      name: "Soriana"
+    }, {
+      id: 17,
+      name: "Genérico"
+    }, {
+      id: 20,
+      name: "Cornershop"
+    }, {
+      id: 26,
+      name: "Mercado Libre"
+    }, {
+      id: 34,
+      name: "San Pablo"
+    }, {
+      id: 38,
+      name: "Del Sol"
+    }, {
+      id: 64,
+      name: "Cali"
     }],
-    country: null,
-    upc: "157126"
+    country: "México",
+    upc: "977358"
   },
   location: {
     product: {
@@ -92,16 +118,16 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 460,
-    name: "Ismael",
-    last_name: "López",
-    email: "ilopez@contentoh.com",
-    position: "Desarrollador",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
+    position: "Admin",
     telephone: null,
     country: "México",
-    id_company: 254,
-    id_cognito: "9d0cc5c8-a89e-4bdd-9e2d-358a01cc9a62",
-    birth_Date: "1997-08-15T00:00:00.000Z",
+    id_company: 2,
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
+    birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
@@ -110,18 +136,18 @@ RetailerProductEditionDefault.args = {
     id_role: 1,
     active: 1,
     is_retailer: 0,
-    email_notify: null,
+    email_notify: 0,
     membership: {
-      id: 750,
-      start_date: "2022-01-07T21:32:54.000Z",
-      end_date: "2023-01-07T21:32:54.000Z",
-      planID: 6,
-      plan: "prod_KvGd6YSTJyR3AP",
-      name: "Plan Small",
-      user_limit: "10",
-      products_limit: "1000",
-      type: "Enterprise"
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES"
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-460/460.png?1659463389000"
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1659497033479"
   }
 };

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

@@ -13,10 +13,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _styles = require("./styles");
 
 var _HeaderTop = require("../../molecules/HeaderTop");
@@ -82,12 +82,27 @@ var _CreateVersion = require("../../organisms/CreateVersion");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
+  var _action$init, _action$init$inputsBy;
+
   var values = state.values,
-      attrForImgs = state.attrForImgs;
+      attrForImgs = state.attrForImgs,
+      inputsByRetailer = state.inputsByRetailer;
 
   switch (action.action) {
     case "init":
-      return action.init;
+      var newInputsByRetailer = {};
+      action === null || action === void 0 ? void 0 : (_action$init = action.init) === null || _action$init === void 0 ? void 0 : (_action$init$inputsBy = _action$init.inputsByRetailer) === null || _action$init$inputsBy === void 0 ? void 0 : _action$init$inputsBy.forEach(function (inputs) {
+        inputs === null || inputs === void 0 ? void 0 : inputs.forEach(function (input) {
+          if (!newInputsByRetailer["".concat(input.id_retailer)]) newInputsByRetailer["".concat(input.id_retailer)] = [];
+          newInputsByRetailer["".concat(input.id_retailer)].push(input);
+        });
+      });
+      inputsByRetailer = newInputsByRetailer;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, action.init), {}, {
+        inputsByRetailer: inputsByRetailer,
+        valuesInitial: action.init.values,
+        inputsInitial: action.init.inputs
+      });
 
     case "addImg":
       values = [].concat((0, _toConsumableArray2.default)(values), [action.img]);
@@ -123,6 +138,32 @@ var reducerImages = function reducerImages(state, action) {
         values: values
       });
 
+    case "orderImages":
+      {
+        var _inputsByRetailer$act;
+
+        var _inputsByRetailer = state.inputsByRetailer,
+            valuesInitial = state.valuesInitial,
+            inputsInitial = state.inputsInitial,
+            inputs = state.inputs;
+        var orderedImages = [];
+        var imageIdArray = [];
+        action.retailerId && ((_inputsByRetailer$act = _inputsByRetailer[action.retailerId]) === null || _inputsByRetailer$act === void 0 ? void 0 : _inputsByRetailer$act.filter(function (input) {
+          imageIdArray.push(input.id_image);
+          valuesInitial.forEach(function (value) {
+            if (value.image_id === input.id_image) orderedImages.push(value);
+          });
+        }));
+        inputs = inputsInitial === null || inputsInitial === void 0 ? void 0 : inputsInitial.filter(function (input) {
+          return imageIdArray.includes(input.id);
+        });
+        values = orderedImages.length > 0 ? orderedImages : valuesInitial;
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+          values: values,
+          inputs: inputs
+        });
+      }
+
     default:
       return state;
   }
@@ -663,6 +704,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setDatasheets([datagroups, inputs]);
       setDescriptions(_descriptions);
     }
+
+    setImages({
+      action: "orderImages",
+      retailerId: activeRetailer.id
+    });
   }, [activeRetailer, services]);
 
   var thumbs = function thumbs() {
@@ -696,7 +742,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         changeImage: setImages,
         selectedImages: selectedImages,
         setSelectedImages: setSelectedImages
-      }, index);
+      }, index + "-" + imageType.name);
     });
   };
 
@@ -834,11 +880,13 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     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) {
+      var _images$values2;
+
       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) {
+        active: images === null || images === void 0 ? void 0 : (_images$values2 = images.values) === null || _images$values2 === void 0 ? void 0 : _images$values2.some(function (value) {
           return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
         })
       };
@@ -846,7 +894,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     setSocketType(imageInputs);
   }, [images]);
   var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
-    var _images$values2, _product$article11, _data$articleData, _data$articleData2, _data$updateImages;
+    var _images$values3, _product$article11, _data$articleData, _data$articleData2, _data$updateImages;
 
     var imagesList, imagesListTemp, duplicated, attrForImgs, data, valid, _data$updateImages2, _data$articleData3, _data$articleData4, _data$articleData5, promiseArray;
 
@@ -854,7 +902,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       while (1) {
         switch (_context7.prev = _context7.next) {
           case 0:
-            imagesList = images === null || images === void 0 ? void 0 : (_images$values2 = images.values) === null || _images$values2 === void 0 ? void 0 : _images$values2.slice();
+            imagesList = images === null || images === void 0 ? void 0 : (_images$values3 = images.values) === null || _images$values3 === void 0 ? void 0 : _images$values3.slice();
             imagesListTemp = imagesList === null || imagesList === void 0 ? void 0 : imagesList.reduce(function (acc, image) {
               acc[image === null || image === void 0 ? void 0 : image.image_id] = ++acc[image === null || image === void 0 ? void 0 : image.image_id] || 0;
               return acc;
@@ -1476,13 +1524,13 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }();
 
   var downloadImages = function downloadImages() {
-    var _images$values3;
+    var _images$values4;
 
     selectedImages.length > 0 ? selectedImages.forEach(function (e) {
       if (e.id) {
         (0, _fileSaver.saveAs)("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(product.article.upc, "_").concat(e.name, ".").concat(e.ext));
       }
-    }) : images === null || images === void 0 ? void 0 : (_images$values3 = images.values) === null || _images$values3 === void 0 ? void 0 : _images$values3.forEach(function (e) {
+    }) : images === null || images === void 0 ? void 0 : (_images$values4 = images.values) === null || _images$values4 === void 0 ? void 0 : _images$values4.forEach(function (e) {
       if (e.id) {
         (0, _fileSaver.saveAs)("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(product.article.upc, "_").concat(e.name, ".").concat(e.ext));
       }
@@ -1693,7 +1741,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
             return (product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.images) === 1 && updateImages();
           },
-          showSaveButton: auditorAssigned() || userAssigned()
+          showSaveButton: auditorAssigned() || userAssigned(),
+          setShowVersionSelector: setShowVersionSelector,
+          version: version
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "product-information",

package/package.json

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

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

@@ -7,7 +7,7 @@ export default function Select(props) {
         id={props.id}
         width={props.width}
         onChange={props.onChange}
-        defaultValue={props.valueSelected ? props.valueSelected : ""}
+        value={props.valueSelected ? props.valueSelected : ""}
         className={props.className}
       >
         <option value="" disabled>

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

@@ -11,6 +11,8 @@ export const TableHeader = ({
   isRetailer,
   onClickSave,
   showSaveButton,
+  version,
+  setShowVersionSelector,
 }) => {
   return (
     <Container>
@@ -26,6 +28,8 @@ export const TableHeader = ({
         isRetailer={isRetailer}
         onClickSave={onClickSave}
         showSaveButton={showSaveButton}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
       />
     </Container>
   );

package/src/components/organisms/ImageDataTable/index.js

@@ -16,6 +16,8 @@ export const ImageDataTable = ({
   isRetailer,
   onClickSave,
   showSaveButton,
+  version,
+  setShowVersionSelector,
 }) => {
   return (
     <Container darkMode={darkMode}>
@@ -27,6 +29,8 @@ export const ImageDataTable = ({
         isRetailer={isRetailer}
         showSaveButton={showSaveButton}
         onClickSave={onClickSave}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
       />
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />

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

@@ -45,10 +45,24 @@ import { useCloseModal } from "../../../global-files/customHooks";
 import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
-  let { values, attrForImgs } = state;
+  let { values, attrForImgs, inputsByRetailer } = state;
   switch (action.action) {
     case "init":
-      return action.init;
+      const newInputsByRetailer = {};
+      action?.init?.inputsByRetailer?.forEach((inputs) => {
+        inputs?.forEach((input) => {
+          if (!newInputsByRetailer[`${input.id_retailer}`])
+            newInputsByRetailer[`${input.id_retailer}`] = [];
+          newInputsByRetailer[`${input.id_retailer}`].push(input);
+        });
+      });
+      inputsByRetailer = newInputsByRetailer;
+      return {
+        ...action.init,
+        inputsByRetailer,
+        valuesInitial: action.init.values,
+        inputsInitial: action.init.inputs,
+      };
     case "addImg":
       values = [...values, action.img];
       return { ...state, values };
@@ -56,18 +70,40 @@ const reducerImages = (state, action) => {
       values[action.index][action.attribute] = action.value;
       return { ...state, values };
     case "changeAttrValue":
-      attrForImgs[action.retailer][action.index].value = action.value;
+      const index = attrForImgs.general.findIndex((f) => (f.id = action.id));
+      if (index !== -1) {
+        attrForImgs.general[index].value = action.value;
+      }
+
       return { ...state, attrForImgs, values };
     case "deleteImage":
       values = values.filter(
         (value) => action.selectedImages.indexOf(value) === -1
       );
       return { ...state, values };
+    case "orderImages": {
+      let { inputsByRetailer, valuesInitial, inputsInitial, inputs } = state;
+      const orderedImages = [];
+      const imageIdArray = [];
+      action.retailerId &&
+        inputsByRetailer[action.retailerId]?.filter((input) => {
+          imageIdArray.push(input.id_image);
+          valuesInitial.forEach((value) => {
+            if (value.image_id === input.id_image) orderedImages.push(value);
+          });
+        });
+
+      inputs = inputsInitial?.filter((input) =>
+        imageIdArray.includes(input.id)
+      );
+
+      values = orderedImages.length > 0 ? orderedImages : valuesInitial;
+      return { ...state, values, inputs };
+    }
     default:
       return state;
   }
 };
-
 const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
 const REGION = "us-east-1";
 
@@ -355,6 +391,7 @@ export const ProviderProductEdition = ({
 
   useEffect(() => {
     loadInputs();
+    setImages({ action: "orderImages", retailerId: activeRetailer.id });
   }, [servicesData, activeRetailer, services]);
 
   const thumbs = () => {
@@ -1041,6 +1078,8 @@ export const ProviderProductEdition = ({
             onClickSave={() =>
               product?.services?.images === 1 && updateImages()
             }
+            setShowVersionSelector={setShowVersionSelector}
+            version={version}
           />
         </div>
         <div className="product-information">

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

@@ -16,77 +16,114 @@ RetailerProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmZTM3NjZmNS0zY2E0LTQ2N2MtOTIxMS0yM2Y0NWQ1ZWU4NjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1ODk5MTc2NSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1ODk5NTM2NSwiaWF0IjoxNjU4OTkxNzY1LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.bQDE_eVpwSBWXqgbX2bicpPTgAoG8mfeA_P0l92vBWV0Q7m7llCNOmLvaaZn-EtYNf3xjVH8pGivJGT5KMOLl9adBl8TnUxD0IS2BJp0wB3m3l79BFAswLbfCAFb-x0XJw4LznnnrlN12ZF-9sPcE4s8RXRxw2cSX3Lt4pdJqi8sOG_DNu3BvxmML3Ckv23aK82zWzskXQb_gNdTM2mqi7SvxvE87yb4X_5cfvP6QtA6hEh1jezbHWdzPDxKkme0ZdVOpqEb3c1JMSIP06EQ9NfnXVt0S19hz6kfppC2laFEwrK2M8tO8EH06k2qlSk3Hp5b6Ga3BACvKAWnfOnC1A",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjFmODVjYTI2LTFiZTItNGRmOC04ZDVlLWNkYzdlYzhhNWY5MyIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjU5NDk3MDMyLCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjU5NTAwNjMyLCJpYXQiOjE2NTk0OTcwMzIsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.YMnbVYuC12JcOT0E1FRioMGyUol_eyu9RCfwa0fwB-K9oGTkrOSLbz8jK4sNI4QRgkr5eGqwF2KASmo1DGxOUwgV2s_-BM_tJpKHEcVuQ7z0X46C5EPahSxNPLuzs22WUnf97uoGYj9IrToWfoxV_6zi1Z1jshXwZ-1Kc9zeZvlFnyGeVyLS6uavMxcD06KNLKdWenQVFGcj6LZRjB-Oy-APMF29M1oggGqrsVdY3N8E9otUkws2yYA35dpHd1zHZNEbsX6cgOemGxog7h2f6NQmNXPrnmH4ZQTLS8sLtD_UOEu9_HAdsXLZizBDKQ95cC6be2p4w_sXj22AUw5BKg",
   productSelected: {
     services: {
-      datasheets: 1,
-      descriptions: 1,
+      datasheets: 0,
+      descriptions: 0,
       images: 1,
     },
-    orderId: 2426,
-    status: "AS",
-    datasheet_status: "AS",
+    orderId: 82,
+    status: "AA",
+    datasheet_status: "NS",
     prio: "none",
     version: 2,
-    description_status: "AS",
-    images_status: "AS",
+    description_status: "NS",
+    images_status: "AA",
     article: {
-      id_article: 78738,
-      id_category: "2427",
-      name: "INTERRUPTOR TERMOMAGNETICO IUSA 2P 15A",
-      upc: "157126",
-      timestamp: "2022-08-01T18:28:05.000Z",
-      id_user: 651,
+      id_article: 55147,
+      id_category: "157",
+      name: "Lavatrastes Axion ",
+      upc: "977358",
+      timestamp: "2022-06-21T17:37:05.000Z",
+      id_user: 28,
       status: "NULL",
       active: 1,
-      company_id: 388,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "",
-      country: null,
-      id_order: 2426,
-      id_datasheet_especialist: 1248,
-      id_datasheet_facilitator: 1252,
-      id_description_especialist: 1248,
-      id_description_facilitator: 1252,
-      id_images_especialist: 1251,
-      id_images_facilitator: 1286,
-      id_auditor: 1254,
+      company_id: 1,
+      company_name: "COMPANY DEV",
+      country: "México",
+      id_order: 82,
+      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:
-        "Eléctrico|Centros de Carga e Interruptores|Interruptores de Seguridad",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null,
+        "Consumibles|Productos de Limpieza y Lavandería|Jabones y Lavatrastes",
+      missingAttributes: 0,
+      missingDescriptions: 0,
+      missingImages: 0,
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1,
+        id: 3,
+        name: "Sam´s Club",
+      },
+      {
+        id: 4,
+        name: "Walmart Super y Superama",
+      },
+      {
+        id: 5,
+        name: "Chedraui",
+      },
+      {
+        id: 6,
+        name: "HEB",
+      },
+      {
+        id: 12,
+        name: "La Comer",
+      },
+      {
+        id: 13,
+        name: "Soriana",
+      },
+      {
+        id: 17,
+        name: "Genérico",
+      },
+      {
+        id: 20,
+        name: "Cornershop",
+      },
+      {
+        id: 26,
+        name: "Mercado Libre",
+      },
+      {
+        id: 34,
+        name: "San Pablo",
+      },
+      {
+        id: 38,
+        name: "Del Sol",
+      },
+      {
+        id: 64,
+        name: "Cali",
       },
     ],
-    country: null,
-    upc: "157126",
+    country: "México",
+    upc: "977358",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },
   },
   user: {
-    id_user: 460,
-    name: "Ismael",
-    last_name: "López",
-    email: "ilopez@contentoh.com",
-    position: "Desarrollador",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
+    position: "Admin",
     telephone: null,
     country: "México",
-    id_company: 254,
-    id_cognito: "9d0cc5c8-a89e-4bdd-9e2d-358a01cc9a62",
-    birth_Date: "1997-08-15T00:00:00.000Z",
+    id_company: 2,
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
+    birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
@@ -95,18 +132,18 @@ RetailerProductEditionDefault.args = {
     id_role: 1,
     active: 1,
     is_retailer: 0,
-    email_notify: null,
+    email_notify: 0,
     membership: {
-      id: 750,
-      start_date: "2022-01-07T21:32:54.000Z",
-      end_date: "2023-01-07T21:32:54.000Z",
-      planID: 6,
-      plan: "prod_KvGd6YSTJyR3AP",
-      name: "Plan Small",
-      user_limit: "10",
-      products_limit: "1000",
-      type: "Enterprise",
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES",
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-460/460.png?1659463389000",
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1659497033479",
   },
 };

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

@@ -35,10 +35,24 @@ import { useCloseModal } from "../../../global-files/customHooks";
 import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
-  let { values, attrForImgs } = state;
+  let { values, attrForImgs, inputsByRetailer } = state;
   switch (action.action) {
     case "init":
-      return action.init;
+      const newInputsByRetailer = {};
+      action?.init?.inputsByRetailer?.forEach((inputs) => {
+        inputs?.forEach((input) => {
+          if (!newInputsByRetailer[`${input.id_retailer}`])
+            newInputsByRetailer[`${input.id_retailer}`] = [];
+          newInputsByRetailer[`${input.id_retailer}`].push(input);
+        });
+      });
+      inputsByRetailer = newInputsByRetailer;
+      return {
+        ...action.init,
+        inputsByRetailer,
+        valuesInitial: action.init.values,
+        inputsInitial: action.init.inputs,
+      };
     case "addImg":
       values = [...values, action.img];
       return { ...state, values };
@@ -57,6 +71,25 @@ const reducerImages = (state, action) => {
         (value) => action.selectedImages.indexOf(value) === -1
       );
       return { ...state, values };
+    case "orderImages": {
+      let { inputsByRetailer, valuesInitial, inputsInitial, inputs } = state;
+      const orderedImages = [];
+      const imageIdArray = [];
+      action.retailerId &&
+        inputsByRetailer[action.retailerId]?.filter((input) => {
+          imageIdArray.push(input.id_image);
+          valuesInitial.forEach((value) => {
+            if (value.image_id === input.id_image) orderedImages.push(value);
+          });
+        });
+
+      inputs = inputsInitial?.filter((input) =>
+        imageIdArray.includes(input.id)
+      );
+
+      values = orderedImages.length > 0 ? orderedImages : valuesInitial;
+      return { ...state, values, inputs };
+    }
     default:
       return state;
   }
@@ -356,6 +389,7 @@ export const RetailerProductEdition = ({
       setDatasheets([datagroups, inputs]);
       setDescriptions(descriptions);
     }
+    setImages({ action: "orderImages", retailerId: activeRetailer.id });
   }, [activeRetailer, services]);
 
   const thumbs = () => {
@@ -371,7 +405,7 @@ export const RetailerProductEdition = ({
     return images?.values?.map((image, index) => (
       <GalleryElement
         setCheckAll={setCheckAll}
-        key={index}
+        key={index + "-" + imageType.name}
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
@@ -461,7 +495,7 @@ export const RetailerProductEdition = ({
       value: e?.id,
       name: e?.name,
       required: e?.required,
-      active: images?.values.some((value) => value?.image_id === e?.id),
+      active: images?.values?.some((value) => value?.image_id === e?.id),
     }));
     setSocketType(imageInputs);
   }, [images]);
@@ -1143,6 +1177,8 @@ export const RetailerProductEdition = ({
               product?.services?.images === 1 && updateImages()
             }
             showSaveButton={auditorAssigned() || userAssigned()}
+            setShowVersionSelector={setShowVersionSelector}
+            version={version}
           />
         </div>
         <div className="product-information">