contentoh-components-library 21.0.80 → 21.0.81

package/package.json

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

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

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

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

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

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

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

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

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

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

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