contentoh-components-library 21.1.88 → 21.1.91

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

@@ -16,50 +16,49 @@ RetailerProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmZTM3NjZmNS0zY2E0LTQ2N2MtOTIxMS0yM2Y0NWQ1ZWU4NjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1ODk5MTc2NSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1ODk5NTM2NSwiaWF0IjoxNjU4OTkxNzY1LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.bQDE_eVpwSBWXqgbX2bicpPTgAoG8mfeA_P0l92vBWV0Q7m7llCNOmLvaaZn-EtYNf3xjVH8pGivJGT5KMOLl9adBl8TnUxD0IS2BJp0wB3m3l79BFAswLbfCAFb-x0XJw4LznnnrlN12ZF-9sPcE4s8RXRxw2cSX3Lt4pdJqi8sOG_DNu3BvxmML3Ckv23aK82zWzskXQb_gNdTM2mqi7SvxvE87yb4X_5cfvP6QtA6hEh1jezbHWdzPDxKkme0ZdVOpqEb3c1JMSIP06EQ9NfnXVt0S19hz6kfppC2laFEwrK2M8tO8EH06k2qlSk3Hp5b6Ga3BACvKAWnfOnC1A",
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIyM2EzZjQ5Ni00ZTM4LTRlMTItOWJmNS03ZjkwYjc3YTJmMzUiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjIzYTNmNDk2LTRlMzgtNGUxMi05YmY1LTdmOTBiNzdhMmYzNSIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJiYjY1ODZhYS02MzQ5LTQ2ZDgtOTk1Ni00ZGQ3NGEzY2FmODYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1OTY0OTAyOCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1OTY1MjYyOCwiaWF0IjoxNjU5NjQ5MDI4LCJlbWFpbCI6ImxhZGlib2g3ODVAbWkxNjYuY29tIn0.OWVf7QX5rQpQAPmqhwGG14kDJhuG051MjYdv6TVMoEi5LrwmamTk8RJiDqgLTOZOgadlQoAHq27w5LnbYqDfQRqJYfj0kh0qTg2lA7xIZCCd-ljvvMtW6XGmd2_XoEhGkrjnZkniBiOaYSpNW_qTV0FiuWNh4enI7k4kl3x48QEPG9Jd7-4q4I21xVEBD1hy_TYhKQzS7H0FP487W89qOMZhOfmyVQkEQjjuzfedJTunm5SmF1AVA7Dvt2bcBMQOPrcB3c5veUtsxf7ta9yS9wGlb8vfcizczNaN5OLATNjdfHMnEUdOYiEBmnOXzcsnnz4mykearBqYEwp3-3XijA",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 2426,
-    status: "AS",
-    datasheet_status: "AS",
+    orderId: 2012,
+    status: "ACA",
+    datasheet_status: "ACA",
     prio: "none",
     version: 2,
-    description_status: "AS",
-    images_status: "AS",
+    description_status: "ACA",
+    images_status: "ACA",
     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: 77106,
+      id_category: "2898",
+      name: "INFLABLE CATRINA 2.13M HALLOWEEN",
+      upc: "163556",
+      timestamp: "2022-07-07T17:01:17.000Z",
+      id_user: 1195,
       status: "NULL",
       active: 1,
-      company_id: 388,
+      company_id: 657,
       SKU: null,
       Descripcion: null,
       Proveedor: null,
       id_proveedor: 0,
       company_name: "",
       country: null,
-      id_order: 2426,
+      id_order: 2012,
       id_datasheet_especialist: 1248,
       id_datasheet_facilitator: 1252,
-      id_description_especialist: 1248,
+      id_description_especialist: 334,
       id_description_facilitator: 1252,
-      id_images_especialist: 1251,
+      id_images_especialist: 1250,
       id_images_facilitator: 1286,
       id_auditor: 1254,
       id_recepcionist: null,
-      category:
-        "Eléctrico|Centros de Carga e Interruptores|Interruptores de Seguridad",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null,
+      category: "Hallowen|Decoración e Inflables|Decoración e Inflables",
+      missingAttributes: 3,
+      missingDescriptions: 0,
+      missingImages: -2,
     },
     retailers: [
       {
@@ -71,22 +70,22 @@ RetailerProductEditionDefault.args = {
       },
     ],
     country: null,
-    upc: "157126",
+    upc: "163556",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },
   },
   user: {
-    id_user: 460,
-    name: "Ismael",
-    last_name: "López",
-    email: "ilopez@contentoh.com",
-    position: "Desarrollador",
+    id_user: 425,
+    name: "Auditor QA",
+    last_name: " ",
+    email: "ladiboh785@mi166.com",
+    position: "Tester",
     telephone: null,
-    country: "México",
+    country: null,
     id_company: 254,
-    id_cognito: "9d0cc5c8-a89e-4bdd-9e2d-358a01cc9a62",
-    birth_Date: "1997-08-15T00:00:00.000Z",
+    id_cognito: "23a3f496-4e38-4e12-9bf5-7f90b77a2f35",
+    birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
@@ -107,6 +106,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "1000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-460/460.png?1659463389000",
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-425/425.png?1659649029658",
   },
 };

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">