contentoh-components-library 21.3.52 → 21.3.54

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

@@ -39,6 +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 { createMessage, sendMessage } from "../RetailerProductEdition/utils";
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../../atoms/ButtonV2";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -214,11 +217,13 @@ 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({
-    "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 [dataGenericModal, setDataGenericModal] = useState({
@@ -342,28 +347,6 @@ export const ProviderProductEdition = ({
     (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;
@@ -477,15 +460,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,
@@ -524,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 = () => {
@@ -539,13 +515,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;
@@ -607,7 +576,7 @@ export const ProviderProductEdition = ({
       });
     }
     setProduct(productTemp);
-    setActivePercentage(retailers[0]?.percentage);
+    retailers && setActivePercentage(retailers[0]?.percentage);
   }, [percentages]);
 
   const loadInputs = () => {
@@ -848,32 +817,19 @@ export const ProviderProductEdition = ({
     }
   };
 
-  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(() => {
@@ -1073,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;
@@ -1104,6 +1081,7 @@ export const ProviderProductEdition = ({
         result,
         isAproved: result === "A",
       };
+      const messages = [];
       servicesData?.forEach((ret) => {
         const { service, id_retailer } = ret;
         let data = {};
@@ -1120,6 +1098,18 @@ 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 userType = user.is_retailer === 1 ? "CA" : "P";
@@ -1159,6 +1149,7 @@ export const ProviderProductEdition = ({
           product: productTemp,
         })
       );
+      await Promise.all(messages);
 
       await loadData();
     } catch (error) {
@@ -1195,7 +1186,6 @@ export const ProviderProductEdition = ({
 
   const getSectionStatus = () => {
     const concept = getConcept(activeTab);
-    console.log("getSectionStatus", productEdit.product[`${concept}_status`]);
     return ["AA", "AP", "R", "CA", "RCA"].includes(
       productEdit.product[`${concept}_status`]
     );
@@ -1287,8 +1277,7 @@ export const ProviderProductEdition = ({
         return;
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
-          setValidatedAll(true);
-          showGlobalModal("error");
+          sendEvaluation("R");
         } else {
           setDataGenericModal((prev) => ({
             ...prev,
@@ -1300,8 +1289,7 @@ export const ProviderProductEdition = ({
           showGlobalModal("generic");
         }
       } else {
-        setValidatedAll(true);
-        showGlobalModal("error");
+        sendEvaluation("R");
       }
     }
   };
@@ -1310,6 +1298,7 @@ export const ProviderProductEdition = ({
       <HeaderTop
         setHeaderTop={setHeaderTop}
         withChat={location?.state?.withChat}
+        chatType={location?.state?.chatType}
         productSelected={productSelected}
         token={token}
         activeRetailer={activeRetailer}
@@ -1388,7 +1377,7 @@ export const ProviderProductEdition = ({
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   setValidatedAll(true);
-                  showGlobalModal("error");
+                  setShowRejectModal(true);
                 } else {
                   setDataGenericModal((prev) => ({
                     ...prev,
@@ -1400,12 +1389,14 @@ export const ProviderProductEdition = ({
                   showGlobalModal("generic");
                 }
               } else {
+                setShowRejectModal(true);
                 setValidatedAll(true);
-                showGlobalModal("error");
               }
             }}
             approve={() => sendToEvaluation("A")}
-            reject={() => sendToEvaluation("R")}
+            reject={() => {
+              setShowRejectModal(true);
+            }}
           />
           <FullTabsMenu
             tabsSections={tabsSections}
@@ -1640,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>
   );
 };

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

@@ -107,6 +107,10 @@ export const Container = styled.div`
       }
     }
   }
+  #modal-message-box {
+    width: 400px;
+    height: 100px;
+  }
   .container {
     width: 100%;
     height: 100%;
@@ -115,4 +119,4 @@ export const Container = styled.div`
       width: 100%;
     }
   }
-`;
+`;

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

@@ -16,88 +16,122 @@ RetailerProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmYjIzMDRlZi1lMWEyLTRjMmItODg3NC1lYjc1NGU0ZjYzMzIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImZiMjMwNGVmLWUxYTItNGMyYi04ODc0LWViNzU0ZTRmNjMzMiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4MGFmMGIwNi1iMGYyLTQ5YjgtYjczYy1lMzQ5MTFmMGVkNmEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzkxOTkxMSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MzkyMzUxMSwiaWF0IjoxNjgzOTE5OTExLCJlbWFpbCI6ImNhZGVuYWJvZGVnYUBhbGxmcmVlbWFpbC5uZXQifQ.h8rhLTIPMxhCs85K5JIn1efY4yZ5TAvzaBbLItby8W7HdLnNjK4Cv39mTCprrk0yjmKhOGIA1gyVeXcm18n5LqSLmOyz85uwTRwZ91s2on49rX3cO9FZp5S3tg4MseNKePBBetwycXttVm_aJZOLGvt2XoAfdxXHTUk2uDu7IphAdz746qrgXxSFyq_cWX9SdWrYhAn_XjHbNOqOuvcmbD7FquvUq-RYWqTAyeT9qeZUjA8oJvENkpohybxc6OoKaPOcdxWvZsvNcFxpEzjHQja3dAQnlA-Pc9_iJf9S4fzf3d3aqXIIDQuozJiixnT6-kK29p4MVbEJ2r4Pd2Ox2A",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5OGE0NzYxMy04ZGIyLTRlZjUtYjA0Mi01ZDU3MWRkZjIwMWIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4Mzg3NTIyNiwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4Mzg3ODgyNiwiaWF0IjoxNjgzODc1MjI2LCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.EtgmT_THMx-Zy_zB5yZK4gz6TXNTVVJEKFt5X0JK2UkGVrp_q_92YCEuejS4n976fyTez0jkwOee6IkVHLV71uZWRBDFt-3Yw4ZxfsZYPNJWhoHXGNxhMU8MCkSntfu597esBTk-VsUpstT5R7L-WJfN8viE7R-qVo-42RlPTG0TFrWA9q0oTcqjv8vbxLpOBUjiEpjmqRhg4blJZwgkGNta6MOlw1vfmisOVbo9wMvqwnCZ9xx9KMKoH9U4uNObK_JomjbvPmTmkcUXsE-wGSD7XcoSwtuhBngLC7-jiu1u8MvL_ff5Z0Qp70sSpLdUglcSS8d1Xf7j_fcZuJ5jKA",
   productSelected: {
-    orderId: 15104,
-    article_status: "AP",
-    datasheet_status: "AC",
-    description_status: "AC",
-    images_status: "AC",
+    orderId: 15142,
+    status: "CA",
+    datasheet_status: "CA",
     prio: "none",
     version: 3,
-    brand: null,
-    article: {
-      category: "Juguetes|Juguetes|Juguetes",
-      company_name: "Financiado Bodega",
-      id_company: 912,
-      country: "México",
-      id_category: "4208",
-      id_article: 37569,
-      name: "BB HORA DEL BANO SET MENTA",
-      upc: "93905444796",
+    description_status: "AC",
+    images_status: "CA",
+    brand: "Garnier",
+    retailerOrder: 0,
+    missing: {
+      datasheet: null,
+      descriptions: null,
+      images: null,
     },
-    retailers: [
-      {
-        id: 70,
-        name: "Bodega Aurrera",
-      },
-    ],
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    statusByRetailer: {
-      70: {
-        datasheet: "AP",
-        description: "AP",
-        images: "AP",
-      },
+    article: {
+      category:
+        "Salud y Belleza|Cuidado del Cabello|Shampoos y Acondicionadores",
+      company_name: "GRUPO BRAHMA",
+      country: "México",
+      id_category: "697",
+      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_order: 15142,
+      id_article: 39270,
+      id_auditor: 37,
+      name: "Acondicionador Garnier Fructis 650 ml",
+      timestamp: "2023-03-27T18:37:48.000Z",
+      upc: "750955287656712",
     },
-    retailersWithService: ["70"],
-    id_article: 37569,
-    retailersAvailable: [
+    retailers: [
+      {
+        id: 12,
+        name: "La Comer",
+        image:
+          "https://content-management-images.s3.amazonaws.com/retailers/12.png",
+        services: ["CA", "CA", "AC", "NA", "NA", "NA", "NA", "NA", "NA"],
+        percentage: 100,
+      },
+      {
+        id: 29,
+        name: "Farmacias del Ahorro",
+        image:
+          "https://content-management-images.s3.amazonaws.com/retailers/29.png",
+        services: ["NA", "NA", "NA", "CA", "CA", "CA", "NA", "NA", "NA"],
+        percentage: 100,
+      },
       {
-        id: 70,
-        name: "Bodega Aurrera",
+        id: 63,
+        name: "DAX",
+        image:
+          "https://content-management-images.s3.amazonaws.com/retailers/63.png",
+        services: ["NA", "NA", "NA", "NA", "NA", "NA", "AC", "AC", "CA"],
+        percentage: 83,
       },
     ],
+    statusByRetailer: {
+      12: {
+        datasheet: "CA",
+        description: "CA",
+      },
+      29: {
+        datasheet: "CA",
+        description: "CA",
+      },
+    },
   },
   location: {
-    product: { articleId: 37569, versionId: 3 },
+    product: { articleId: 354, versionId: 3 },
+    state: {
+      withChat: true,
+      chatType: "product_status",
+    },
   },
   user: {
-    id_user: 132,
-    name: "Bodega",
-    last_name: "Aurrera",
-    email: "cadenabodega@allfreemail.net",
-    position: "TI",
-    telephone: "+529999999999",
+    id_user: 37,
+    name: "José",
+    last_name: "Castañeda",
+    email: "ismael97lopez@gmail.com",
+    position: "Auditor",
+    telephone: "",
     country: "México",
-    id_company: 912,
-    id_cognito: "fb2304ef-e1a2-4c2b-8874-eb754e4f6332",
+    id_company: 2,
+    id_cognito: "9a213128-6482-4c16-a4b6-6e64f225b1bd",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
-    id_role: 0,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "",
+    id_role: 6,
     active: 1,
-    is_retailer: 1,
+    is_retailer: 0,
     email_notify: 1,
     is_user_tech: null,
     membership: {
-      id: 101,
-      start_date: "2022-12-22T19:16:53.000Z",
-      end_date: "2023-12-22T19:16:53.000Z",
-      planID: 8,
-      plan: "prod_KtlhECVSFG2iro",
-      name: "Plan Pro",
-      user_limit: "20",
-      products_limit: "5000",
-      type: "Enterprise",
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-132/132.png?1683919912271",
+    src: "https://content-management-profile.s3.amazonaws.com/id-37/37.png?1683875228327",
   },
 };