contentoh-components-library 21.3.55 → 21.3.56

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

@@ -19,9 +19,6 @@ 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";
@@ -42,7 +39,6 @@ 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;
@@ -134,6 +130,7 @@ export const ProviderProductEdition = ({
   setShowContentohRequestModal,
   showSurvey,
   company,
+  addToCart,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -205,7 +202,6 @@ 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("");
@@ -226,9 +222,6 @@ export const ProviderProductEdition = ({
     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: ` ${
@@ -238,7 +231,7 @@ export const ProviderProductEdition = ({
     }`,
     button1: {
       name: "Cerrar",
-      action: () => setModalViewTextArea(false),
+      action: closeGlobalModal,
     },
     button2: {
       name: "Continuar",
@@ -246,7 +239,6 @@ export const ProviderProductEdition = ({
     },
     img: face,
   });
-  const [modalViewTextArea, setModalViewTextArea] = useState(false);
   const [socketType, setSocketType] = useState(null);
   const [saving, setSaving] = useState(loading);
   const [retailerStatus, setRetailerStatus] = useState(
@@ -254,6 +246,227 @@ 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);
@@ -352,6 +565,8 @@ 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(() => {
@@ -618,22 +833,6 @@ 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) {
@@ -716,21 +915,6 @@ 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) => {
@@ -824,21 +1008,6 @@ 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);
@@ -937,23 +1106,24 @@ export const ProviderProductEdition = ({
           })
         );
       });
-      const evalResponse = await Promise.all(evaluationArray);
+      await Promise.all(evaluationArray);
       const userType = user.is_retailer === 1 ? "CA" : "P";
 
       const productTemp = product;
-      productTemp.article_status = `${result}${userType}`;
+      const status = `${result}${userType}`;
+      productTemp.article_status = status;
       productTemp.datasheet_status =
-        productTemp.datasheet_status === "NA" ? "NA" : `${result}${userType}`;
+        productTemp.datasheet_status === "NA" ? "NA" : status;
       productTemp.description_status =
-        productTemp.description_status === "NA" ? "NA" : `${result}${userType}`;
+        productTemp.description_status === "NA" ? "NA" : status;
       productTemp.images_status =
-        productTemp.images_status === "NA" ? "NA" : `${result}${userType}`;
+        productTemp.images_status === "NA" ? "NA" : status;
 
       const retailerStatusCopy = { ...retailerStatus };
       Object.keys(retailerStatusCopy).forEach((key) => {
         conceptArray.forEach((concept) => {
           if (retailerStatusCopy[key][concept]) {
-            retailerStatusCopy[key][concept] = `${result}${userType}`;
+            retailerStatusCopy[key][concept] = status;
           }
         });
       });
@@ -1004,7 +1174,7 @@ export const ProviderProductEdition = ({
     prod.product.services_status = `["${statusComplete}","${statusComplete}","${statusComplete}"]`;
     sessionStorage.setItem("productEdit", JSON.stringify(prod));
     setProduct(prod);
-    setShowGenericModal && setShowGenericModal(false);
+    showGlobalModal("generic");
     await loadData();
   };
 
@@ -1075,7 +1245,7 @@ export const ProviderProductEdition = ({
             action: () => evaluationToRetailer("A"),
           },
         }));
-        setShowGenericModal(true);
+        showGlobalModal("generic");
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
           sendEvaluation("A");
@@ -1087,7 +1257,7 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("A"),
             },
           }));
-          setShowGenericModal(true);
+          showGlobalModal("generic");
         }
       } else {
         sendEvaluation("A");
@@ -1102,7 +1272,7 @@ export const ProviderProductEdition = ({
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
           setValidatedAll(true);
-          setModalViewError(true);
+          showGlobalModal("error");
         } else {
           setDataGenericModal((prev) => ({
             ...prev,
@@ -1111,11 +1281,11 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("R"),
             },
           }));
-          setShowGenericModal(true);
+          showGlobalModal("generic");
         }
       } else {
         setValidatedAll(true);
-        setModalViewError(true);
+        showGlobalModal("error");
       }
     }
   };
@@ -1174,7 +1344,7 @@ export const ProviderProductEdition = ({
                     action: () => evaluationToRetailer("A"),
                   },
                 }));
-                setShowGenericModal(true);
+                showGlobalModal("generic");
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   validateAll("A");
@@ -1186,7 +1356,7 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("A"),
                     },
                   }));
-                  setShowGenericModal(true);
+                  showGlobalModal("generic");
                 }
               } else {
                 validateAll("A");
@@ -1202,7 +1372,7 @@ export const ProviderProductEdition = ({
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   setValidatedAll(true);
-                  setModalViewError(true);
+                  showGlobalModal("error");
                 } else {
                   setDataGenericModal((prev) => ({
                     ...prev,
@@ -1211,11 +1381,11 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("R"),
                     },
                   }));
-                  setShowGenericModal(true);
+                  showGlobalModal("generic");
                 }
               } else {
                 setValidatedAll(true);
-                setModalViewError(true);
+                showGlobalModal("error");
               }
             }}
             approve={() => sendToEvaluation("A")}
@@ -1442,64 +1612,7 @@ export const ProviderProductEdition = ({
           onClick={() => setMessage("")}
         />
       )}
-      {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}
-        />
-      )}
+      {globalModal && <GlobalModal close={closeGlobalModal} {...globalModal} />}
       {showVersionSelector && (
         <VersionSelector
           modalId={"version-selector"}