contentoh-components-library 21.0.92 → 21.0.97

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

@@ -21,147 +21,62 @@ ProviderProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    orderId: 7,
-    id_category: "684",
-    status: "RECEPTION",
-    datasheet_status: null,
-    prio: "none",
-    version: 4,
-    description_status: null,
-    images_status: null,
-    brand: null,
-    missing: {
-      datasheet: 33,
-      descriptions: 14,
-      images: 3,
-    },
-    article: {
-      category: "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
-      company_name: "COMPANY DEV",
-      id_category: "684",
-      id_article: 33249,
-      name: "Crema dental ",
-      timestamp: "2022-06-14T23:24:08.000Z",
-      upc: "232435",
-    },
-    retailers: [
-      {
-        id: 4,
-        name: "Walmart Super y Superama",
-      },
-      {
-        id: 9,
-        name: "Amazon",
-      },
-      {
-        id: 1013,
-        name: "Cencosud Colombia",
-      },
-      {
-        id: 2005,
-        name: "ClubCo",
-      },
-    ],
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1,
-    },
+    id_article: 35319,
+    id_category: "2146",
+    name: "FOCO LED A19 (60W) LUZ AMARILLA",
+    upc: "120873",
+    timestamp: "2022-06-14T15:31:50.000Z",
+    status: "NULL",
+    categoryName: "ILUMINACIÓN|FOCOS|LEDS",
+    asignations: [],
+    version: 2,
+    version_status: "AA",
     retailersAvailable: [
       {
-        id: 4,
-        name: "Walmart Super y Superama",
-      },
-      {
-        id: 9,
-        name: "Amazon",
-      },
-      {
-        id: 1013,
-        name: "Cencosud Colombia",
-      },
-      {
-        id: 2005,
-        name: "ClubCo",
+        id: 58,
+        name: "The Home Depot Golden",
+        country: "México",
+        id_region: 1,
+        active: 1,
       },
     ],
-    id_article: 33249,
-    categoryName: "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
-    version_status: "RECEPTION",
+    missing: {
+      datasheet: 33,
+      description: 0,
+      image: 23,
+    },
   },
   productToEdit: {
-    ArticleId: 33249,
-    idCategory: "684",
-    product: {
-      orderId: 7,
-      id_category: "684",
-      status: "RECEPTION",
-      datasheet_status: null,
-      prio: "none",
-      version: 4,
-      description_status: null,
-      images_status: null,
-      brand: null,
-      missing: {
-        datasheet: 33,
-        descriptions: 14,
-        images: 3,
-      },
-      article: {
-        category: "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
-        company_name: "COMPANY DEV",
-        id_category: "684",
-        id_article: 33249,
-        name: "Crema dental ",
-        timestamp: "2022-06-14T23:24:08.000Z",
-        upc: "232435",
-      },
-      retailers: [
-        {
-          id: 4,
-          name: "Walmart Super y Superama",
-        },
-        {
-          id: 9,
-          name: "Amazon",
-        },
-        {
-          id: 1013,
-          name: "Cencosud Colombia",
-        },
-        {
-          id: 2005,
-          name: "ClubCo",
+    idCategory: "2146",
+    ArticleId: 35319,
+    product: [
+      {
+        id_article: 35319,
+        id_category: "2146",
+        name: "FOCO LED A19 (60W) LUZ AMARILLA",
+        upc: "120873",
+        timestamp: "2022-06-14T15:31:50.000Z",
+        status: "NULL",
+        categoryName: "ILUMINACIÓN|FOCOS|LEDS",
+        asignations: [],
+        version: 2,
+        version_status: "AA",
+        retailersAvailable: [
+          {
+            id: 58,
+            name: "The Home Depot Golden",
+            country: "México",
+            id_region: 1,
+            active: 1,
+          },
+        ],
+        missing: {
+          datasheet: 33,
+          description: 0,
+          image: 23,
         },
-      ],
-      services: {
-        datasheets: 1,
-        descriptions: 1,
-        images: 1,
       },
-      retailersAvailable: [
-        {
-          id: 4,
-          name: "Walmart Super y Superama",
-        },
-        {
-          id: 9,
-          name: "Amazon",
-        },
-        {
-          id: 1013,
-          name: "Cencosud Colombia",
-        },
-        {
-          id: 2005,
-          name: "ClubCo",
-        },
-      ],
-      id_article: 33249,
-      categoryName:
-        "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
-      version_status: "RECEPTION",
-    },
+    ],
   },
   location: {
     product: { articleId: 109485, versionId: 3 },

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

@@ -48,6 +48,11 @@ const reducerImages = (state, action) => {
     case "changeAttrValue":
       attrForImgs[action.retailer][action.index].value = action.value;
       return { ...state, attrForImgs, values };
+    case "deleteImage":
+      values = values.filter(
+        (value) => action.selectedImages.indexOf(value) === -1
+      );
+      return { ...state, values };
     default:
       return state;
   }
@@ -195,6 +200,7 @@ export const ProviderProductEdition = ({
   });
   const [modalViewTextArea, setModalViewTextArea] = useState(false);
   const [socketType, setSocketType] = useState(null);
+  const [saving, setSaving] = useState(loading);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -213,7 +219,7 @@ export const ProviderProductEdition = ({
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
+      init: services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
@@ -361,7 +367,7 @@ export const ProviderProductEdition = ({
   }, [activeRetailer, services]);
 
   const thumbs = () => {
-    const imageInputs = socketType.slice();
+    const imageInputs = socketType?.slice();
     const imageType = images?.imageType?.map((e) => ({
       value: e?.id,
       name: e?.name,
@@ -500,6 +506,7 @@ export const ProviderProductEdition = ({
       });
     }
     if (valid && duplicated?.length === 0) {
+      setLoading(true);
       try {
         data?.articleData?.forEach((e) => {
           e.uuid = uuidv4();
@@ -541,7 +548,6 @@ export const ProviderProductEdition = ({
 
   useEffect(async () => {
     if (imagesUploaded) {
-      setLoading(true);
       dataImages.articleData = dataImages?.articleData.map((e) => {
         delete e.src;
         e.imageID = e.image_id;
@@ -858,7 +864,21 @@ export const ProviderProductEdition = ({
     });
 
     objetcTemp["Descripción"] = desInputsRequired;
-    const requiredImages = services[2]?.inputs?.filter((e) => e.required);
+    const retailersRequested = [];
+    services[2]?.retailerMandatories?.forEach((retMan) =>
+      retMan.forEach((rm) => retailersRequested.push(rm))
+    );
+    const requiredImages = services[2]?.inputs?.filter(
+      (e) =>
+        e.required === 1 &&
+        retailersRequested.filter(
+          (ret) =>
+            ret.id_image === e.id &&
+            servicesData.filter((srv) => srv.id_retailer === ret.id_retailer)
+              .length > 0
+        ).length > 0
+    );
+
     let requiredCounter = 0;
     requiredImages?.forEach(
       (req) =>
@@ -955,7 +975,6 @@ export const ProviderProductEdition = ({
 
   const deleteImages = () => {
     setLoading(true);
-    const imagesTemp = images;
     const { values } = images;
     const imgsInBack = [];
 
@@ -967,12 +986,10 @@ export const ProviderProductEdition = ({
       (value) => selectedImages.indexOf(value) === -1
     );
 
-    imagesTemp.values = imgsLeft;
-
     if (imgsInBack.length > 0) {
       const data = {
-        articleId: product.article.id_article,
-        deleteImages: selectedImages,
+        articleId: product?.id_article || product?.article?.id_article,
+        deleteImages: imgsInBack,
       };
       try {
         axios.put(
@@ -986,8 +1003,16 @@ export const ProviderProductEdition = ({
         console.log(err);
       }
     }
-    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
-    loadData();
+
+    setImages({
+      action: "deleteImage",
+      selectedImages,
+    });
+
+    setTimeout(() => {
+      setLoading(false);
+    }, 500);
+
     setMessage("");
     setComponentsArray([]);
   };
@@ -1166,6 +1191,10 @@ export const ProviderProductEdition = ({
     return true;
   };
 
+  useEffect(() => {
+    setSaving(loading);
+  }, [loading]);
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -1278,13 +1307,13 @@ export const ProviderProductEdition = ({
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
-                  saveDescriptions();
+                  !saving && saveDescriptions();
                   break;
                 case "Ficha técnica":
-                  saveDatasheets();
+                  !saving && saveDatasheets();
                   break;
                 case "Imágenes":
-                  updateImages();
+                  !saving && updateImages();
                   break;
                 default:
                   break;
@@ -1301,15 +1330,13 @@ export const ProviderProductEdition = ({
               <Loading />
             ) : (
               <>
-                {!imageLayout &&
-                  activeTab === "Imágenes" &&
-                  product?.services?.images === 1 && (
-                    <GalleryHeader
-                      setSelectedImages={setSelectedImages}
-                      checkAll={checkAll}
-                      setCheckAll={setCheckAll}
-                    />
-                  )}
+                {!imageLayout && activeTab === "Imágenes" && (
+                  <GalleryHeader
+                    setSelectedImages={setSelectedImages}
+                    checkAll={checkAll}
+                    setCheckAll={setCheckAll}
+                  />
+                )}
                 {activeTab === "Ficha técnica" &&
                   (product?.datasheet_status !== "NS" ? (
                     datasheets[0]?.data?.map((dataGroup, index) => (

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

@@ -26,92 +26,92 @@ RetailerProductEditionDefault.args = {
       descriptions: 1,
       images: 1,
     },
-    orderId: 9,
-    status: "QF",
-    datasheet_status: "QF",
+    orderId: 4,
+    status: "ASSIGNED",
+    datasheet_status: null,
     prio: "none",
-    version: 2,
-    description_status: "QF",
-    images_status: "QF",
+    version: 3,
+    description_status: null,
+    images_status: null,
     article: {
-      id_article: 35698,
-      id_category: "2143",
-      name: "FOCO LED A19 (60W) LUZ AMARILLA",
-      upc: "12087311",
-      timestamp: "2022-06-15T14:35:46.000Z",
-      id_user: 59,
+      id_article: 33249,
+      id_category: "684",
+      name: "Crema dental ",
+      upc: "232435",
+      timestamp: "2022-06-14T14:52:51.000Z",
+      id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
-      company_name: "Cadena Ismael",
+      company_name: "COMPANY DEV",
       country: "México",
-      id_order: 9,
-      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_order: 4,
+      id_datasheet_especialist: null,
+      id_datasheet_facilitator: null,
+      id_description_especialist: null,
+      id_description_facilitator: null,
+      id_images_especialist: null,
+      id_images_facilitator: null,
+      id_auditor: 37,
       id_recepcionist: null,
-      category: "ILUMINACIÓN|FOCOS|FOCOS",
-      missingAttributes: 0,
-      missingDescriptions: 0,
-      missingImages: -1,
+      category: "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
+      missingAttributes: 13,
+      missingDescriptions: 4,
+      missingImages: 3,
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot Golden",
+        id: 4,
+        name: "Walmart Super y Superama",
         country: "México",
         id_region: 1,
         active: 1,
       },
       {
-        id: 59,
-        name: "The Home Depot Platinum",
+        id: 9,
+        name: "Amazon",
         country: "México",
         id_region: 1,
         active: 1,
       },
       {
-        id: 60,
-        name: "The Home Depot Resizing",
-        country: "México",
-        id_region: 1,
+        id: 1013,
+        name: "Cencosud Colombia",
+        country: "Colombia",
+        id_region: 2,
         active: 1,
       },
       {
-        id: 61,
-        name: "Home Depot TAB",
-        country: "México",
-        id_region: 1,
+        id: 2005,
+        name: "ClubCo",
+        country: "Costa Rica",
+        id_region: 3,
         active: 1,
       },
     ],
     country: "México",
-    upc: "12087311",
+    upc: "232435",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },
   },
   user: {
-    id_user: 52,
-    name: "FACILITADOR TXT PRUEBA",
+    id_user: 54,
+    name: "ESPECIALISTA TXTS PRUEBA",
     last_name: "",
-    email: "azarate@contentoh.com",
+    email: "rlegorreta@contentoh.com",
     position: null,
     telephone: null,
     country: null,
     id_company: 2,
-    id_cognito: "b2ce5b2a-609c-4e79-9ea9-2f74cff43889",
+    id_cognito: "ca1d24ab-e992-4c19-b4e1-2fe6f720c16b",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 4,
+    id_role: 7,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -125,6 +125,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-52/52.png?1655320339846",
+    src: "https://content-management-profile.s3.amazonaws.com/id-54/54.png?1655433250522",
   },
 };

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

@@ -45,6 +45,11 @@ const reducerImages = (state, action) => {
     case "changeAttrValue":
       attrForImgs[action.retailer][action.index].value = action.value;
       return { ...state, attrForImgs, values };
+    case "deleteImage":
+      values = values.filter(
+        (value) => action.selectedImages.indexOf(value) === -1
+      );
+      return { ...state, values };
     default:
       return state;
   }
@@ -153,6 +158,8 @@ export const RetailerProductEdition = ({
   const [retailerStatus, setRetailerStatus] = useState("-");
   const [statusArray, setStatusArray] = useState([]);
   const [socketType, setSocketType] = useState(null);
+  const [servicesStatus, setServicesStatus] = useState([]);
+  const [saving, setSaving] = useState(loading);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -166,18 +173,15 @@ export const RetailerProductEdition = ({
     );
     //Converts the data inside the datasheets object to array
     setServices(services);
+    getServices();
 
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
+      init: services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
-    setActiveRetailer(
-      product.retailers ? product.retailers[0] : product.retailersAvailable[0]
-    );
-
     getPercentage({ data: [product] }).then((res) => setPercentages(res));
     setLoading(false);
   };
@@ -234,7 +238,9 @@ export const RetailerProductEdition = ({
     // getPercentage({ data: [product] }).then((res) =>
     //   setPercentages(res)
     // );
-    getServices();
+    setActiveRetailer(
+      product.retailers ? product.retailers[0] : product.retailersAvailable[0]
+    );
     getComments();
     setUserGroups(await fetchUsers(token));
     let arr = [];
@@ -483,6 +489,7 @@ export const RetailerProductEdition = ({
       });
     }
     if (valid && duplicated?.length === 0) {
+      setLoading(true);
       try {
         data?.articleData?.forEach((e) => {
           e.uuid = uuidv4();
@@ -524,7 +531,6 @@ export const RetailerProductEdition = ({
 
   useEffect(async () => {
     if (imagesUploaded) {
-      setLoading(true);
       dataImages.articleData = dataImages?.articleData.map((e) => {
         delete e.src;
         e.imageID = e.image_id;
@@ -836,7 +842,22 @@ export const RetailerProductEdition = ({
     });
 
     objetcTemp["Descripción"] = desInputsRequired;
-    const requiredImages = services[2]?.inputs?.filter((e) => e.required);
+
+    const retailersRequested = [];
+    services[2]?.retailerMandatories?.forEach((retMan) =>
+      retMan.forEach((rm) => retailersRequested.push(rm))
+    );
+    const requiredImages = services[2]?.inputs?.filter(
+      (e) =>
+        e.required === 1 &&
+        retailersRequested.filter(
+          (ret) =>
+            ret.id_image === e.id &&
+            servicesData.filter((srv) => srv.id_retailer === ret.id_retailer)
+              .length > 0
+        ).length > 0
+    );
+
     let requiredCounter = 0;
     requiredImages?.forEach(
       (req) =>
@@ -985,7 +1006,6 @@ export const RetailerProductEdition = ({
 
   const deleteImages = () => {
     setLoading(true);
-    const imagesTemp = images;
     const { values } = images;
     const imgsInBack = [];
 
@@ -997,12 +1017,10 @@ export const RetailerProductEdition = ({
       (value) => selectedImages.indexOf(value) === -1
     );
 
-    imagesTemp.values = imgsLeft;
-
     if (imgsInBack.length > 0) {
       const data = {
         articleId: product.article.id_article,
-        deleteImages: selectedImages,
+        deleteImages: imgsInBack,
       };
       try {
         axios.put(
@@ -1016,8 +1034,22 @@ export const RetailerProductEdition = ({
         console.log(err);
       }
     }
-    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
-    loadData();
+
+    setImages({
+      action: "deleteImage",
+      selectedImages,
+    });
+
+    getRequired([
+      services[0],
+      services[1],
+      { ...services[2], values: imgsLeft },
+    ]);
+
+    setTimeout(() => {
+      setLoading(false);
+    }, 500);
+
     setMessage("");
     setComponentsArray([]);
   };
@@ -1081,7 +1113,7 @@ export const RetailerProductEdition = ({
         service.id_retailer === activeRetailer?.id &&
         service.service === concept
     );
-    return retailerService ? retailerService.status : "NA";
+    return retailerService ? retailerService.status : "NS";
   };
 
   useEffect(() => {
@@ -1093,6 +1125,10 @@ export const RetailerProductEdition = ({
     services.length > 0 && getRequired(services);
   }, [services, servicesData, activeTab]);
 
+  useEffect(() => {
+    setSaving(loading);
+  }, [loading]);
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -1123,6 +1159,7 @@ export const RetailerProductEdition = ({
             headerData={product}
             percent={activePercentage}
             activeRetailer={activeRetailer}
+            servicesData={servicesData}
             setActiveRetailer={setActiveRetailer}
             sendToFacilitator={sendToFacilitator}
             approve={() => {
@@ -1146,17 +1183,21 @@ export const RetailerProductEdition = ({
             assig={assig[activeTab]}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
-            showSaveButton={true}
+            showSaveButton={userAssigned()}
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
-                  product?.description_status !== "NS" && saveDescriptions();
+                  !saving &&
+                    product?.description_status !== "NS" &&
+                    saveDescriptions();
                   break;
                 case "Ficha técnica":
-                  product?.datasheet_status !== "NS" && saveDatasheets();
+                  !saving &&
+                    product?.datasheet_status !== "NS" &&
+                    saveDatasheets();
                   break;
                 case "Imágenes":
-                  product?.images_status !== "NS" && updateImages();
+                  !saving && product?.images_status !== "NS" && updateImages();
                   break;
 
                 default: