contentoh-components-library 21.1.88 → 21.1.91

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.91",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -22,10 +22,8 @@ export const InputFormatter = ({
   const maxLength = maxChar ? maxChar : 999;
 
   const getValue = (value) => {
-    let temp = value
-      .replace(/\n/gm, "<br>")
-      .replace(/&/gm, "&amp;")
-      .replace(/&nbsp;/gm, " ");
+    console.log(value);
+    let temp = value.replace(/\n/gm, "<br>").replace(/\&(nbsp;|amp;)/gm, " ");
     return temp;
   };
 
@@ -40,8 +38,7 @@ export const InputFormatter = ({
     return value
       .replace(/<\/p><p>/gm, "\n")
       .replace(/<\/?br>|<\/?p>/gm, "")
-      .replace(/&amp;/gm, "&")
-      .replace(/&nbsp;/gm, " ");
+      .replace(/\&(nbsp;|amp;)/gm, " ");
   };
 
   const onChange = (valueInput, delta, user, h) => {
@@ -53,7 +50,7 @@ export const InputFormatter = ({
           .replace(/<\/li>/gm, "\n")
           .replace(/<\/p><p>/gm, "\n")
           .replaceAll(/<\/?(?!\/?strong).*?>/gm, "")
-          .replace(/&nbsp;/gm, " ");
+          .replace(/\&(nbsp;|amp;)/gm, " ");
         setInputValue(valueInput);
         value = unformattedText;
       } else {

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/ProviderProductEdition.stories.js

@@ -16,98 +16,133 @@ ProviderProductEditionDefault.args = {
     Imágenes: true,
   },
   token:
-    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZTQ0OGMwZS0xOGVkLTRlYWYtOWY4OC0zYjMxOTdkNGEyZmQiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjllNDQ4YzBlLTE4ZWQtNGVhZi05Zjg4LTNiMzE5N2Q0YTJmZCIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI5ODg5YTFhYi1mMTljLTRiNzQtYjQ5Ni0xZDM3YzZjY2U3YmQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1NjQzMTQ5OCwibmFtZSI6IkdlcnNvbiBNYXJ0w61uZXoiLCJwaG9uZV9udW1iZXIiOiIrNTIxMjMxMjMxMjMiLCJleHAiOjE2NTY0MzUwOTgsImlhdCI6MTY1NjQzMTQ5OCwiZW1haWwiOiJnbWFydGluZXpAY29udGVudG9oLmNvbSJ9.qMBMYKxcaQrXT-3373y3K4eX73vgRApuFsT9-FVl9AuP_BKy51nHReEvwWHO4SMVpFxf3eHoQhUHG2PTl8qlvnoXlLqfCdgJEnq5DMFIOqcs_WzUHfb3k4r3y66DMzPwQI0aEk35ZYsAvkxd9m6Ax9fwJBuMCpb3jf7Az0SBpDvUgT7iRvS2b09UTwkW3ZIxfnaUE4uoqacoTUm7239AjuNe5Qh3UZl0rVvZ-mnh3SmAcNpxl-RtUEdcw4gO0MbIch39gIJ_1CcvBxXR2tVSUILZWfbpXI2ubA_sQZ0VJy5kWpe4pYF5beJISZ7sZ0Fzrv2ftE7poEtueYloftRfng",
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhYmUxODhlMi0yNWIxLTRhMTktODY3Mi0wZDRiYzExYTliZjIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImFiZTE4OGUyLTI1YjEtNGExOS04NjcyLTBkNGJjMTFhOWJmMiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJiZTE5OWE0ZS1lYTYwLTQwYTktODIwNC02ODZlOWI1ODczMGQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1OTUzOTczMiwibmFtZSI6IlJldGFpbGVyIEFjYyIsInBob25lX251bWJlciI6Iis1MjMxMTExMTExMTEiLCJleHAiOjE2NTk1NDMzMzIsImlhdCI6MTY1OTUzOTczMiwiZW1haWwiOiJyZXRhaWxlclRoZEBBbGxGcmVlTWFpbC5uZXQifQ.HSIFFKD5jkoRPzh9uxNUnXkkp6IX7iKeOqRePrzin-XlG7KauuoHvv7M-dWGJB_xRg-C1uGIG7gKOFP7oM3BGuVqrlIzs-z3uKNSBz0raq3-tRUHRMKo30HGwdh9Q8X8F9RAEZ0-lpIoTCoMS4ua6OJVG_qPRGJHVF2_mzAxof81oHHj5tv-SC6lrJYc5UqDj97y_e-rGakVyVV7VXeKAJlnmw4y52_WDlbOq3W2e_wI8NuNiiEBYXgWSm5j_rzB4-BuF3nUNheKpimZEn1wTULHLo-Izj_WPdPS1l5yTi9oF09QZht_Te0o3SZliBPKgVcH8cycReoACukbY2BPPQ",
   articleId: 238,
   category: 846,
   version: 2,
   productSelected: {
-    id_article: 76145,
-    id_category: "700",
-    name: "prod 8 LCR",
-    upc: "8484161",
-    timestamp: "2022-07-11T15:28:44.000Z",
-    status: "NULL",
-    categoryName:
-      "Salud y Belleza|Cuidado Facial|Cremas, Mascarillas y Tratamientos",
-    asignations: [],
+    orderId: 1936,
+    article_status: "AP",
+    datasheet_status: "NS",
+    description_status: "NS",
+    images_status: "AP",
+    prio: "none",
     version: 3,
-    version_status: "R",
+    brand: null,
+    article: {
+      category: "Herramientas|Herramientas Manuales|Espátulas y Llanas",
+      company_name: "TRUPER SA DE CV",
+      id_company: 301,
+      country: null,
+      id_category: "2125",
+      id_article: 28099,
+      name: 'Espátula flexible, mango de madera, 6"',
+      upc: "90364",
+    },
+    retailers: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
+      },
+    ],
+    services: {
+      datasheets: 0,
+      descriptions: 0,
+      images: 1,
+    },
+    statusByRetailer: {
+      59: {
+        images: "AP",
+      },
+    },
+    retailersWithService: ["59"],
+    checked: false,
+    id_article: 28099,
     retailersAvailable: [
       {
-        id: 12,
-        name: "La Comer",
-        country: "México",
-        id_region: 1,
-        active: 1,
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
       },
     ],
-    missing: {},
   },
   productToEdit: {
-    idCategory: "2999",
-    ArticleId: 69031,
-    product: [
-      {
-        orderId: 1829,
-        id_category: "2999",
-        status: "AC",
-        datasheet_status: "NS",
-        prio: "none",
-        version: 2,
-        description_status: "NS",
-        images_status: "AC",
-        brand: null,
-        missing: {
-          datasheet: 0,
-          descriptions: 0,
-          images: 0,
+    ArticleId: 28099,
+    idCategory: "2125",
+    product: {
+      orderId: 1936,
+      article_status: "AP",
+      datasheet_status: "NS",
+      description_status: "NS",
+      images_status: "AP",
+      prio: "none",
+      version: 3,
+      brand: null,
+      article: {
+        category: "Herramientas|Herramientas Manuales|Espátulas y Llanas",
+        company_name: "TRUPER SA DE CV",
+        id_company: 301,
+        country: null,
+        id_category: "2125",
+        id_article: 28099,
+        name: 'Espátula flexible, mango de madera, 6"',
+        upc: "90364",
+      },
+      retailers: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
         },
-        article: {
-          category: "RESIZING|RESIZING|RESIZING",
-          company_name: "The Home Depot Resize",
-          id_category: "2999",
-          id_article: 69031,
-          name: "RESIZING",
-          timestamp: "2022-06-23T15:53:54.000Z",
-          upc: "130994",
+        {
+          id: 59,
+          name: "The Home Depot Platinum",
         },
-        retailers: [
-          {
-            id: 60,
-            name: "The Home Depot Resizing",
-          },
-        ],
-        services: {
-          datasheets: 0,
-          descriptions: 0,
-          images: 1,
+      ],
+      services: {
+        datasheets: 0,
+        descriptions: 0,
+        images: 1,
+      },
+      statusByRetailer: {
+        59: {
+          images: "AP",
         },
-        checked: false,
-        retailersAvailable: [
-          {
-            id: 60,
-            name: "The Home Depot Resizing",
-          },
-        ],
-        id_article: 69031,
-        categoryName: "RESIZING|RESIZING|RESIZING",
-        version_status: "AC",
       },
-    ],
+      retailersWithService: ["59"],
+      checked: false,
+      id_article: 28099,
+      retailersAvailable: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 59,
+          name: "The Home Depot Platinum",
+        },
+      ],
+    },
   },
   location: {
     state: { origin: "Contentoh" },
   },
   user: {
-    id_user: 1287,
-    name: "Gerson",
-    last_name: "Martinez",
-    email: "gmartinez@contentoh.com",
-    position: "Cuenta financiada",
-    telephone: "+525551234567",
+    id_user: 1237,
+    name: "The Home",
+    last_name: "Depot",
+    email: "retailerThd@AllFreeMail.net",
+    position: "Retailer",
+    telephone: "+523111111111",
     country: "México",
-    id_company: 819,
-    id_cognito: "9e448c0e-18ed-4eaf-9f88-3b3197d4a2fd",
+    id_company: 817,
+    id_cognito: "abe188e2-25b1-4a19-8672-0d4bc11a9bf2",
     birth_Date: null,
     about_me: null,
     zip_code: null,
@@ -116,12 +151,12 @@ ProviderProductEditionDefault.args = {
     id_stripe: null,
     id_role: 0,
     active: 1,
-    is_retailer: 0,
+    is_retailer: 1,
     email_notify: 1,
     membership: {
-      id: 799,
-      start_date: "2022-06-19T15:48:09.000Z",
-      end_date: "2023-06-19T15:48:09.000Z",
+      id: 798,
+      start_date: "2022-06-19T04:25:07.000Z",
+      end_date: "2023-06-19T04:25:07.000Z",
       planID: 6,
       plan: "prod_KvGd6YSTJyR3AP",
       name: "Plan Small",
@@ -129,20 +164,42 @@ ProviderProductEditionDefault.args = {
       products_limit: "1000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-1287/1287.png?1656431499310",
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-1237/1237.png?1659539733360",
   },
   company: {
-    id_company: 1,
-    trade_name: "COMPANY DEV",
-    company_name: "COMPANY DEV",
-    rfc: null,
-    adress: "",
-    about_company: "...",
-    telephone: "",
-    web_site: "",
-    zip_code: "",
+    id_company: 817,
+    trade_name: "Retailer acc",
+    company_name: "Retailer acc",
+    rfc: "ASER12345",
+    adress: "Av. Insurgentes",
+    about_company: null,
+    telephone: null,
+    web_site: null,
+    zip_code: null,
     email: null,
-    social_link: "",
-    is_retailer: 0,
+    social_link: null,
+    is_retailer: 1,
+    retailers: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+        country: "México",
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
+        country: "México",
+      },
+      {
+        id: 60,
+        name: "The Home Depot Resizing",
+        country: "México",
+      },
+      {
+        id: 61,
+        name: "Home Depot TAB",
+        country: "México",
+      },
+    ],
   },
 };

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">
@@ -1170,7 +1209,9 @@ export const ProviderProductEdition = ({
           <FullTabsMenu
             tabsSections={tabsSections}
             status={
-              activeRetailer.id && retailerStatus
+              activeRetailer?.id &&
+              retailerStatus &&
+              retailerStatus[activeRetailer.id]
                 ? retailerStatus[activeRetailer?.id][getConcept(activeTab)] ||
                   "NS"
                 : "-"