contentoh-components-library 21.3.53 → 21.3.54

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,9 @@ 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";
+import { createMessage, sendMessage } from "../RetailerProductEdition/utils";
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../../atoms/ButtonV2";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -134,6 +133,7 @@ export const ProviderProductEdition = ({
   setShowContentohRequestModal,
   showSurvey,
   company,
+  addToCart,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -205,7 +205,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("");
@@ -218,6 +217,7 @@ 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,9 +226,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 +235,7 @@ export const ProviderProductEdition = ({
     }`,
     button1: {
       name: "Cerrar",
-      action: () => setModalViewTextArea(false),
+      action: closeGlobalModal,
     },
     button2: {
       name: "Continuar",
@@ -246,7 +243,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 +250,205 @@ 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);
@@ -303,7 +498,9 @@ export const ProviderProductEdition = ({
       );
       setServicesData(parsedResponse);
     }
-    !activeRetailer.id && setActiveRetailer(active ? active : retailers[0]);
+    retailers &&
+      !activeRetailer.id &&
+      setActiveRetailer(active ? active : retailers[0]);
   };
 
   const isRevision = () => {
@@ -352,6 +549,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(() => {
@@ -377,7 +576,7 @@ export const ProviderProductEdition = ({
       });
     }
     setProduct(productTemp);
-    setActivePercentage(retailers[0]?.percentage);
+    retailers && setActivePercentage(retailers[0]?.percentage);
   }, [percentages]);
 
   const loadInputs = () => {
@@ -618,48 +817,19 @@ 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) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
+  const createComment = async (messages = [], retailerId) => {
     const data = {
-      articleId: product?.id_article,
-      orderId: product?.orderId,
-      message: body,
-      concept: concept,
-      version: version,
-    };
-    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
-      headers: {
-        Authorization: token,
+      paramsBody: {
+        id: product.article.id_article || productEdit.ArticleId,
+        version: version,
+        items: messages,
+        retailerId: retailerId,
+        status: product.status || productEdit.product.status,
       },
-    });
+      paramsHeader: { Authorization: token },
+    };
+    setMessage("");
+    return sendMessage(data);
   };
 
   useEffect(() => {
@@ -716,21 +886,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 +979,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);
@@ -889,6 +1029,27 @@ 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;
@@ -920,6 +1081,7 @@ export const ProviderProductEdition = ({
         result,
         isAproved: result === "A",
       };
+      const messages = [];
       servicesData?.forEach((ret) => {
         const { service, id_retailer } = ret;
         let data = {};
@@ -936,24 +1098,37 @@ 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)
+          );
+        }
       });
-      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;
           }
         });
       });
@@ -974,6 +1149,7 @@ export const ProviderProductEdition = ({
           product: productTemp,
         })
       );
+      await Promise.all(messages);
 
       await loadData();
     } catch (error) {
@@ -1004,7 +1180,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 +1251,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 +1263,7 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("A"),
             },
           }));
-          setShowGenericModal(true);
+          showGlobalModal("generic");
         }
       } else {
         sendEvaluation("A");
@@ -1101,8 +1277,7 @@ export const ProviderProductEdition = ({
         return;
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
-          setValidatedAll(true);
-          setModalViewError(true);
+          sendEvaluation("R");
         } else {
           setDataGenericModal((prev) => ({
             ...prev,
@@ -1111,11 +1286,10 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("R"),
             },
           }));
-          setShowGenericModal(true);
+          showGlobalModal("generic");
         }
       } else {
-        setValidatedAll(true);
-        setModalViewError(true);
+        sendEvaluation("R");
       }
     }
   };
@@ -1124,6 +1298,7 @@ export const ProviderProductEdition = ({
       <HeaderTop
         setHeaderTop={setHeaderTop}
         withChat={location?.state?.withChat}
+        chatType={location?.state?.chatType}
         productSelected={productSelected}
         token={token}
         activeRetailer={activeRetailer}
@@ -1174,7 +1349,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 +1361,7 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("A"),
                     },
                   }));
-                  setShowGenericModal(true);
+                  showGlobalModal("generic");
                 }
               } else {
                 validateAll("A");
@@ -1202,7 +1377,7 @@ export const ProviderProductEdition = ({
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   setValidatedAll(true);
-                  setModalViewError(true);
+                  setShowRejectModal(true);
                 } else {
                   setDataGenericModal((prev) => ({
                     ...prev,
@@ -1211,15 +1386,17 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("R"),
                     },
                   }));
-                  setShowGenericModal(true);
+                  showGlobalModal("generic");
                 }
               } else {
+                setShowRejectModal(true);
                 setValidatedAll(true);
-                setModalViewError(true);
               }
             }}
             approve={() => sendToEvaluation("A")}
-            reject={() => sendToEvaluation("R")}
+            reject={() => {
+              setShowRejectModal(true);
+            }}
           />
           <FullTabsMenu
             tabsSections={tabsSections}
@@ -1442,64 +1619,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"}
@@ -1511,6 +1631,49 @@ 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>
   );
 };