contentoh-components-library 21.3.54 → 21.3.55

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,9 +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 { createMessage, sendMessage } from "../RetailerProductEdition/utils";
-import { Modal } from "../../organisms/Modal";
-import { ButtonV2 } from "../../atoms/ButtonV2";
+import { number } from "prop-types";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -133,7 +134,6 @@ export const ProviderProductEdition = ({
   setShowContentohRequestModal,
   showSurvey,
   company,
-  addToCart,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -205,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("");
@@ -217,7 +218,6 @@ export const ProviderProductEdition = ({
   const isRetailer = user?.is_retailer;
   const [loading, setLoading] = useState(true);
   const [validatedAll, setValidatedAll] = useState(false);
-  const [showRejectModal, setShowRejectModal] = useState(false);
 
   const originProp = location?.state?.origin;
   const [origin, setOrigin] = useState({
@@ -226,6 +226,9 @@ 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: ` ${
@@ -235,7 +238,7 @@ export const ProviderProductEdition = ({
     }`,
     button1: {
       name: "Cerrar",
-      action: closeGlobalModal,
+      action: () => setModalViewTextArea(false),
     },
     button2: {
       name: "Continuar",
@@ -243,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(
@@ -250,205 +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 "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);
@@ -498,9 +303,7 @@ export const ProviderProductEdition = ({
       );
       setServicesData(parsedResponse);
     }
-    retailers &&
-      !activeRetailer.id &&
-      setActiveRetailer(active ? active : retailers[0]);
+    !activeRetailer.id && setActiveRetailer(active ? active : retailers[0]);
   };
 
   const isRevision = () => {
@@ -549,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(() => {
@@ -576,7 +377,7 @@ export const ProviderProductEdition = ({
       });
     }
     setProduct(productTemp);
-    retailers && setActivePercentage(retailers[0]?.percentage);
+    setActivePercentage(retailers[0]?.percentage);
   }, [percentages]);
 
   const loadInputs = () => {
@@ -817,19 +618,48 @@ export const ProviderProductEdition = ({
     }
   };
 
-  const createComment = async (messages = [], retailerId) => {
+  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) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
     const data = {
-      paramsBody: {
-        id: product.article.id_article || productEdit.ArticleId,
-        version: version,
-        items: messages,
-        retailerId: retailerId,
-        status: product.status || productEdit.product.status,
-      },
-      paramsHeader: { Authorization: token },
+      articleId: product?.id_article,
+      orderId: product?.orderId,
+      message: body,
+      concept: concept,
+      version: version,
     };
-    setMessage("");
-    return sendMessage(data);
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
   };
 
   useEffect(() => {
@@ -886,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) => {
@@ -979,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);
@@ -1029,27 +889,6 @@ export const ProviderProductEdition = ({
         const { newArticleStatus, newServiceStatus, newStatus } = JSON.parse(
           res.data.body
         );
-
-        const message = createMessage(
-          product.retailers || product.retailersAvailable,
-          activeRetailer.id,
-          product[sectionStatusKey],
-          newStatus,
-          activeTab
-        );
-
-        const messageData = {
-          paramsBody: {
-            id: product.article.id_article || productEdit.ArticleId,
-            version: version,
-            items: [{ type: "status", value: message }],
-            retailerId: activeRetailer.id,
-            status: product.status || productEdit.product.status,
-          },
-          paramsHeader: { Authorization: token },
-        };
-        await sendMessage(messageData);
-
         if (newArticleStatus) productTemp.status = newArticleStatus[articleId];
         const retailerStatusCopy = { ...retailerStatus };
         retailerStatusCopy[activeRetailer.id][concept] = newStatus;
@@ -1081,7 +920,6 @@ export const ProviderProductEdition = ({
         result,
         isAproved: result === "A",
       };
-      const messages = [];
       servicesData?.forEach((ret) => {
         const { service, id_retailer } = ret;
         let data = {};
@@ -1098,37 +936,24 @@ export const ProviderProductEdition = ({
             },
           })
         );
-        if (product[`${ret.service}_status`] !== "NS") {
-          const message = createMessage(
-            product.retailers,
-            ret.id_retailer,
-            product[`${ret.service}_status`],
-            `${result}A`,
-            ret.service
-          );
-          messages.push(
-            createComment([{ type: "status", value: message }], ret.id_retailer)
-          );
-        }
       });
-      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}`;
           }
         });
       });
@@ -1149,7 +974,6 @@ export const ProviderProductEdition = ({
           product: productTemp,
         })
       );
-      await Promise.all(messages);
 
       await loadData();
     } catch (error) {
@@ -1180,7 +1004,7 @@ 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();
   };
 
@@ -1251,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");
@@ -1263,7 +1087,7 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("A"),
             },
           }));
-          showGlobalModal("generic");
+          setShowGenericModal(true);
         }
       } else {
         sendEvaluation("A");
@@ -1277,7 +1101,8 @@ export const ProviderProductEdition = ({
         return;
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
-          sendEvaluation("R");
+          setValidatedAll(true);
+          setModalViewError(true);
         } else {
           setDataGenericModal((prev) => ({
             ...prev,
@@ -1286,10 +1111,11 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("R"),
             },
           }));
-          showGlobalModal("generic");
+          setShowGenericModal(true);
         }
       } else {
-        sendEvaluation("R");
+        setValidatedAll(true);
+        setModalViewError(true);
       }
     }
   };
@@ -1298,7 +1124,6 @@ export const ProviderProductEdition = ({
       <HeaderTop
         setHeaderTop={setHeaderTop}
         withChat={location?.state?.withChat}
-        chatType={location?.state?.chatType}
         productSelected={productSelected}
         token={token}
         activeRetailer={activeRetailer}
@@ -1349,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");
@@ -1361,7 +1186,7 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("A"),
                     },
                   }));
-                  showGlobalModal("generic");
+                  setShowGenericModal(true);
                 }
               } else {
                 validateAll("A");
@@ -1377,7 +1202,7 @@ export const ProviderProductEdition = ({
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   setValidatedAll(true);
-                  setShowRejectModal(true);
+                  setModalViewError(true);
                 } else {
                   setDataGenericModal((prev) => ({
                     ...prev,
@@ -1386,17 +1211,15 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("R"),
                     },
                   }));
-                  showGlobalModal("generic");
+                  setShowGenericModal(true);
                 }
               } else {
-                setShowRejectModal(true);
                 setValidatedAll(true);
+                setModalViewError(true);
               }
             }}
             approve={() => sendToEvaluation("A")}
-            reject={() => {
-              setShowRejectModal(true);
-            }}
+            reject={() => sendToEvaluation("R")}
           />
           <FullTabsMenu
             tabsSections={tabsSections}
@@ -1619,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"}
@@ -1631,49 +1511,6 @@ export const ProviderProductEdition = ({
           jwt={token}
         />
       )}
-      {showRejectModal && (
-        <Modal
-          title={"Agregar mensaje de rechazo"}
-          show={showRejectModal}
-          customComponent={
-            <TagAndInput
-              label={"Caja de Comentario"}
-              inputType={"textarea"}
-              inputId={"modal-message-box"}
-              index={0}
-              color={"white"}
-            />
-          }
-          buttons={[
-            <ButtonV2
-              key={"btn-Cancelar"}
-              type={"white"}
-              label={"Cancelar"}
-              size={12}
-              onClick={() => {
-                setShowRejectModal(false);
-              }}
-            />,
-            <ButtonV2
-              key={"btn-Aceptar"}
-              type={"pink"}
-              label={"Aceptar"}
-              size={12}
-              onClick={async () => {
-                const body = document.querySelector(
-                  "#modal-message-box .ql-container .ql-editor > p"
-                ).innerHTML;
-                const messages = [
-                  { type: "message", value: body?.replace(/<.*?\/?>/gm, "") },
-                ];
-                await createComment(messages, activeRetailer.id);
-                validatedAll ? validateAll("R") : sendToEvaluation("R");
-                setShowRejectModal(false);
-              }}
-            />,
-          ]}
-        />
-      )}
     </Container>
   );
 };