contentoh-components-library 21.3.52 → 21.3.53

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

@@ -19,6 +19,9 @@ import { useDropzone } from "react-dropzone";
 import axios from "axios";
 import { v4 as uuidv4 } from "uuid";
 import AWS from "aws-sdk";
+import attributesSent from "../../../assets/images/modalsSVGs/attributesSent.svg";
+import descriptionSent from "../../../assets/images/modalsSVGs/descriptionSent.svg";
+import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
 import { TagAndInput } from "../../molecules/TagAndInput/index";
 import { Button } from "../../atoms/GeneralButton";
 import { Commentary } from "../../atoms/Commentary";
@@ -39,6 +42,7 @@ import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
 import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.svg";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { useCloseModal } from "../../../global-files/customHooks";
+import { number } from "prop-types";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -130,7 +134,6 @@ export const ProviderProductEdition = ({
   setShowContentohRequestModal,
   showSurvey,
   company,
-  addToCart,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -202,6 +205,7 @@ export const ProviderProductEdition = ({
       ? JSON.parse(sessionStorage.getItem("productEdit"))
       : productToEdit
   );
+  const [icon, setIcon] = useState(null);
   const [version, setVersion] = useState(product?.version);
   const [comments] = useState({});
   const [comment, setComment] = useState("");
@@ -215,12 +219,16 @@ export const ProviderProductEdition = ({
   const [loading, setLoading] = useState(true);
   const [validatedAll, setValidatedAll] = useState(false);
 
+  const originProp = location?.state?.origin;
   const [origin, setOrigin] = useState({
-    "Ficha técnica": null,
-    Descripción: null,
-    Imágenes: null,
+    "Ficha técnica": originProp,
+    Descripción: originProp,
+    Imágenes: originProp,
   });
   const [inCart, setInCart] = useState(false);
+  const [modalSent, setModalSent] = useState(false);
+  const [modalViewError, setModalViewError] = useState(false);
+  const [showGenericModal, setShowGenericModal] = useState(false);
   const [dataGenericModal, setDataGenericModal] = useState({
     message: "¿Estás seguro de continuar?",
     detail: ` ${
@@ -230,7 +238,7 @@ export const ProviderProductEdition = ({
     }`,
     button1: {
       name: "Cerrar",
-      action: closeGlobalModal,
+      action: () => setModalViewTextArea(false),
     },
     button2: {
       name: "Continuar",
@@ -238,6 +246,7 @@ export const ProviderProductEdition = ({
     },
     img: face,
   });
+  const [modalViewTextArea, setModalViewTextArea] = useState(false);
   const [socketType, setSocketType] = useState(null);
   const [saving, setSaving] = useState(loading);
   const [retailerStatus, setRetailerStatus] = useState(
@@ -245,227 +254,6 @@ export const ProviderProductEdition = ({
   );
   const [showVersionSelector, setShowVersionSelector] =
     useCloseModal("version-selector");
-  const [globalModal, setGlobalModal] = useState();
-
-  const updateAuditStatus = async (status) => {
-    const productTemp = product;
-    productTemp.article_status = status;
-    productTemp.datasheet_status = status;
-    productTemp.description_status = status;
-    productTemp.images_status = status;
-
-    const retailerStatusCopy = { ...retailerStatus };
-    const conceptArray = ["description", "datasheet", "images"];
-    Object.keys(retailerStatusCopy).forEach((key) => {
-      conceptArray.forEach((concept) => {
-        if (retailerStatusCopy[key][concept]) {
-          retailerStatusCopy[key][concept] = status;
-        }
-      });
-    });
-    setRetailerStatus(retailerStatusCopy);
-    productTemp.statusByRetailer = retailerStatusCopy;
-    setProduct(productTemp);
-    sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-    setProductEdit({
-      ArticleId: productTemp.id_article,
-      idCategory: productTemp.article.id_category,
-      product: productTemp,
-    });
-    sessionStorage.setItem(
-      "productEdit",
-      JSON.stringify({
-        ArticleId: productTemp.id_article,
-        idCategory: productTemp.article.id_category,
-        product: productTemp,
-      })
-    );
-    await loadData();
-  };
-
-  const addCart = async (retailers) => {
-    const { article, version } = product;
-    const articleToOrder = [
-      {
-        articleId: article.id_article,
-        version,
-        userId: user.id_user,
-        discount: 0,
-        subtotal: 0,
-        companyId: user.id_company,
-        datasheet: retailers,
-        description: retailers,
-        image: retailers,
-        attributeTranslations: false,
-        descriptionTranslations: false,
-        build: "[]",
-        manual: "[]",
-        userCreated: user.id_user,
-      },
-    ];
-    let modatlType = "addedToCartError";
-    if (addToCart) {
-      const resCart = await addToCart({ data: articleToOrder });
-      if (resCart.data.statusCode === 200) {
-        modatlType = "addedToCart";
-      }
-    }
-    showGlobalModal(modatlType);
-  };
-
-  const closeGlobalModal = () => setGlobalModal();
-
-  const seenByProvider = async () => {
-    const productTemp = product;
-    const articleId = productTemp.id_article;
-    const orderId = productTemp.id_order ?? productTemp.orderId;
-    const promises = [];
-    const conceptArray = ["description", "datasheet", "images"];
-    conceptArray.forEach((concept) => {
-      const sectionStatusKey = `${concept}_status`;
-      const evalStatus = product[sectionStatusKey] || product?.version_status;
-      const data = { articleId, orderId, concept, evalStatus };
-      promises.push(
-        axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
-          headers: {
-            Authorization: token,
-          },
-        })
-      );
-    });
-    await Promise.all(promises);
-    closeGlobalModal();
-    await updateAuditStatus("FAP");
-  };
-
-  const showGlobalModal = useCallback(
-    (type) => {
-      const formatter = new Intl.ListFormat("es", { type: "conjunction" });
-      switch (type) {
-        case "error":
-          setGlobalModal({
-            message: `${activeTab} rechazada`,
-            detail: "Agrega tu comentarios para enviar el rechazo",
-            img: errorModal,
-            textArea: true,
-            button1: {
-              name: "Enviar",
-              action: (e) => {
-                const textArea = document.querySelector("#area");
-                if (textArea.value) {
-                  textArea.style.border = "none";
-                  createComment(e, textArea.value);
-                  showGlobalModal("commentsSent");
-                  validatedAll ? validateAll("R") : sendEvaluation("R");
-                } else {
-                  textArea.style.border = "2px solid red";
-                }
-              },
-            },
-          });
-          break;
-        case "generic":
-          setGlobalModal(dataGenericModal);
-          break;
-        case "commentsSent":
-          setGlobalModal({
-            message: "Gracias, tus comentarios fueron entregados.",
-            detail: "Trabajaremos en conjunto para resolverlo.",
-            button1: {
-              name: "Cerrar",
-              action: closeGlobalModal,
-            },
-            img: face,
-            textArea: false,
-          });
-          break;
-        case "RAC":
-          const servicesRejected = [];
-          const translateServices = {
-            datasheet: "ficha técnica",
-            description: "descripción",
-            images: "imágenes",
-          };
-          Object.keys(translateServices).forEach((service) => {
-            if (product[`${service}_status`] === "RAC") {
-              servicesRejected.push(translateServices[service]);
-            }
-          });
-          const plural = ["Los servicios", "cumplen"];
-          const singular = ["El servicio", "cumple"];
-          const grammar = servicesRejected.length > 1 ? plural : singular;
-          const formatted = formatter.format(servicesRejected);
-          const text1 = `${grammar[0]} de ${formatted} no ${grammar[1]} con lo que la cadena necesita.`;
-          const text2 = `¡Solicita el servicio de Content-oh! para completarlo!`;
-          const retailers = product.retailersWithService.map((retailer) =>
-            Number(retailer)
-          );
-          setGlobalModal({
-            message:
-              "Tu producto no cumple con los requerimientos de la cadena",
-            customComponent: (
-              <>
-                <p className="generic-text">
-                  {text1}
-                  <br />
-                  <br />
-                  {text2}
-                </p>
-              </>
-            ),
-            button1: {
-              name: "Continuar",
-              action: async () => await seenByProvider(),
-            },
-            button2: {
-              name: "Solicitar a Content-oh!",
-              action: async () => {
-                await addCart(retailers);
-                await seenByProvider();
-              },
-            },
-            img: errorModal,
-          });
-          break;
-        case "AAC":
-          setGlobalModal({
-            message: "Felicidades",
-            detail: "Tu producto cumple con los requerimientos de la cadena.",
-            button1: {
-              name: "Continuar",
-              action: async () => await seenByProvider(),
-            },
-            img: face,
-          });
-          break;
-        case "addedToCartError":
-          setGlobalModal({
-            detail:
-              "Parece que algo salió mal al intentar añadir tu producto a tu carrito.",
-            button1: {
-              name: "Continuar",
-              action: closeGlobalModal,
-            },
-          });
-          break;
-        case "addedToCart":
-          setGlobalModal({
-            message: "Producto añadido",
-            detail: "Tu producto se añadió al carrito de compras.",
-            button1: {
-              name: "Continuar",
-              action: closeGlobalModal,
-            },
-            img: face,
-          });
-          break;
-        default:
-          closeGlobalModal();
-          break;
-      }
-    },
-    [activeTab, dataGenericModal, product]
-  );
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -477,15 +265,6 @@ export const ProviderProductEdition = ({
     }
   }, [showModal]);
 
-  useEffect(() => {
-    console.log({ location });
-    setOrigin({
-      "Ficha técnica": location?.state?.origin,
-      Descripción: location?.state?.origin,
-      Imágenes: location?.state?.origin,
-    });
-  }, [location?.state?.origin]);
-
   const loadData = async () => {
     const services = await getRetailerServices(
       product?.id_article || product?.article?.id_article,
@@ -539,13 +318,6 @@ export const ProviderProductEdition = ({
         "Contentoh",
       ].includes(orgn);
       if (isRetailer) {
-        console.log({
-          origin: origin[activeTab],
-          concept,
-          orgn,
-          revision,
-          currentService,
-        });
         if (revision && currentService === "AP") return true;
       } else {
         const { product } = productEdit;
@@ -580,8 +352,6 @@ export const ProviderProductEdition = ({
     getCart();
     fetchUsers(token).then((res) => setUserGroups(res));
     setImages({ action: "orderImages", retailerId: activeRetailer.id });
-    if (["RAC", "AAC"].includes(product.article_status))
-      showGlobalModal(product.article_status);
   }, [product, version]);
 
   useEffect(() => {
@@ -848,6 +618,22 @@ export const ProviderProductEdition = ({
     }
   };
 
+  const getSectionIcon = () => {
+    switch (activeTab) {
+      case "Ficha técnica":
+        setIcon(attributesSent);
+        break;
+      case "Descripción":
+        setIcon(descriptionSent);
+        break;
+      case "Imágenes0,,":
+        setIcon(imagesSent);
+        break;
+      default:
+        break;
+    }
+  };
+
   const createComment = async (e, body, tab) => {
     let concept = "";
     switch (activeTab) {
@@ -930,6 +716,21 @@ export const ProviderProductEdition = ({
     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
   };
 
+  const evaluationComplete = (tab) => {
+    const concept = getConcept(tab);
+    let serv = servicesData.filter((item) => item.service === concept);
+    if (
+      ["RequestWithContentoh", "RequestWithoutContentoh"].includes(origin[tab])
+    ) {
+      serv = serv.filter((f) => f.id_retailer === activeRetailer.id);
+    }
+    const statusArray =
+      user.is_retailer === 1 ? ["ACA", "RCA"] : ["AP", "RP", "ACA"];
+    return (
+      serv.length > 0 && serv.every((item) => statusArray.includes(item.status))
+    );
+  };
+
   const downloadImages = () => {
     selectedImages.length > 0
       ? selectedImages.forEach((e) => {
@@ -1023,6 +824,21 @@ export const ProviderProductEdition = ({
     }
   };
 
+  const confirmStatusComplete = () => {
+    const { datasheet_status, description_status, images_status } = product;
+    const completionStates =
+      user.is_retailer === 1
+        ? ["ACA", "Evaluated", "NS"]
+        : ["AP", "Evaluated", "NS"];
+    const dsEvaluated = completionStates.includes(datasheet_status);
+    const descsEvaluated = completionStates.includes(description_status);
+    const imgsEvaluated = completionStates.includes(images_status);
+
+    const AllEvaluated = dsEvaluated && descsEvaluated && imgsEvaluated;
+
+    return AllEvaluated;
+  };
+
   const sendEvaluation = async (result) => {
     setLoading(true);
     const concept = getConcept(activeTab);
@@ -1121,24 +937,23 @@ export const ProviderProductEdition = ({
           })
         );
       });
-      await Promise.all(evaluationArray);
+      const evalResponse = await Promise.all(evaluationArray);
       const userType = user.is_retailer === 1 ? "CA" : "P";
 
       const productTemp = product;
-      const status = `${result}${userType}`;
-      productTemp.article_status = status;
+      productTemp.article_status = `${result}${userType}`;
       productTemp.datasheet_status =
-        productTemp.datasheet_status === "NA" ? "NA" : status;
+        productTemp.datasheet_status === "NA" ? "NA" : `${result}${userType}`;
       productTemp.description_status =
-        productTemp.description_status === "NA" ? "NA" : status;
+        productTemp.description_status === "NA" ? "NA" : `${result}${userType}`;
       productTemp.images_status =
-        productTemp.images_status === "NA" ? "NA" : status;
+        productTemp.images_status === "NA" ? "NA" : `${result}${userType}`;
 
       const retailerStatusCopy = { ...retailerStatus };
       Object.keys(retailerStatusCopy).forEach((key) => {
         conceptArray.forEach((concept) => {
           if (retailerStatusCopy[key][concept]) {
-            retailerStatusCopy[key][concept] = status;
+            retailerStatusCopy[key][concept] = `${result}${userType}`;
           }
         });
       });
@@ -1189,13 +1004,12 @@ export const ProviderProductEdition = ({
     prod.product.services_status = `["${statusComplete}","${statusComplete}","${statusComplete}"]`;
     sessionStorage.setItem("productEdit", JSON.stringify(prod));
     setProduct(prod);
-    showGlobalModal("generic");
+    setShowGenericModal && setShowGenericModal(false);
     await loadData();
   };
 
   const getSectionStatus = () => {
     const concept = getConcept(activeTab);
-    console.log("getSectionStatus", productEdit.product[`${concept}_status`]);
     return ["AA", "AP", "R", "CA", "RCA"].includes(
       productEdit.product[`${concept}_status`]
     );
@@ -1261,7 +1075,7 @@ export const ProviderProductEdition = ({
             action: () => evaluationToRetailer("A"),
           },
         }));
-        showGlobalModal("generic");
+        setShowGenericModal(true);
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
           sendEvaluation("A");
@@ -1273,7 +1087,7 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("A"),
             },
           }));
-          showGlobalModal("generic");
+          setShowGenericModal(true);
         }
       } else {
         sendEvaluation("A");
@@ -1288,7 +1102,7 @@ export const ProviderProductEdition = ({
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
           setValidatedAll(true);
-          showGlobalModal("error");
+          setModalViewError(true);
         } else {
           setDataGenericModal((prev) => ({
             ...prev,
@@ -1297,11 +1111,11 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("R"),
             },
           }));
-          showGlobalModal("generic");
+          setShowGenericModal(true);
         }
       } else {
         setValidatedAll(true);
-        showGlobalModal("error");
+        setModalViewError(true);
       }
     }
   };
@@ -1360,7 +1174,7 @@ export const ProviderProductEdition = ({
                     action: () => evaluationToRetailer("A"),
                   },
                 }));
-                showGlobalModal("generic");
+                setShowGenericModal(true);
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   validateAll("A");
@@ -1372,7 +1186,7 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("A"),
                     },
                   }));
-                  showGlobalModal("generic");
+                  setShowGenericModal(true);
                 }
               } else {
                 validateAll("A");
@@ -1388,7 +1202,7 @@ export const ProviderProductEdition = ({
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   setValidatedAll(true);
-                  showGlobalModal("error");
+                  setModalViewError(true);
                 } else {
                   setDataGenericModal((prev) => ({
                     ...prev,
@@ -1397,11 +1211,11 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("R"),
                     },
                   }));
-                  showGlobalModal("generic");
+                  setShowGenericModal(true);
                 }
               } else {
                 setValidatedAll(true);
-                showGlobalModal("error");
+                setModalViewError(true);
               }
             }}
             approve={() => sendToEvaluation("A")}
@@ -1628,7 +1442,64 @@ export const ProviderProductEdition = ({
           onClick={() => setMessage("")}
         />
       )}
-      {globalModal && <GlobalModal close={closeGlobalModal} {...globalModal} />}
+      {modalSent && (
+        <GlobalModal
+          close={() => setModalSent(false)}
+          message={message}
+          detail={""}
+          bold={!evaluationComplete(activeTab) && "Aprueba / Rechaza"}
+          widthImg={!evaluationComplete(activeTab) ? "160px" : "354px"}
+          heightImg={!evaluationComplete(activeTab) ? "84px" : "354px"}
+          img={getSectionIcon()}
+        />
+      )}
+      {modalViewError && (
+        <GlobalModal
+          close={() => setModalViewError(false)}
+          message={`${activeTab} rechazada`}
+          detail={"Agrega tu comentarios para enviar el rechazo"}
+          button1={{
+            name: "Enviar",
+            action: (e) => {
+              const textArea = document.querySelector("#area");
+              if (textArea.value) {
+                textArea.style.border = "none";
+                createComment(e, textArea.value);
+                setModalViewError(false);
+                setModalViewTextArea(true);
+                validatedAll ? validateAll("R") : sendEvaluation("R");
+              } else {
+                textArea.style.border = "2px solid red";
+              }
+            },
+          }}
+          img={errorModal}
+          textArea={true}
+        />
+      )}
+      {showGenericModal && (
+        <GlobalModal
+          close={() => setShowGenericModal(false)}
+          message={dataGenericModal.message}
+          detail={dataGenericModal.detail}
+          button1={dataGenericModal.button1}
+          button2={dataGenericModal.button2}
+          img={dataGenericModal.img}
+        />
+      )}
+      {modalViewTextArea && (
+        <GlobalModal
+          close={() => setModalViewTextArea(false)}
+          message={`Gracias, tus comentarios fueron entregados.`}
+          detail={"Trabajaremos en conjunto para resolverlo."}
+          button1={{
+            name: "Cerrar",
+            action: () => setModalViewTextArea(false),
+          }}
+          img={face}
+          textArea={false}
+        />
+      )}
       {showVersionSelector && (
         <VersionSelector
           modalId={"version-selector"}