contentoh-components-library 21.3.30 → 21.3.32

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

@@ -12,101 +12,142 @@ export const RetailerProductEditionDefault = Template.bind({});
 RetailerProductEditionDefault.args = {
   tabsSections: {
     Descripción: true,
-    "Ficha técnica": false,
-    Imágenes: false,
+    "Ficha técnica": true,
+    Imágenes: true,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjllNTRjMDc0LWFjNzktNGEwNC1iOGEzLWNhOWU2ZmQxNDE3ZiIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjc3NTQ1NzA2LCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjc3NTQ5MzA2LCJpYXQiOjE2Nzc1NDU3MDYsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.CS5zthG2PFlQIn5yCV64aadrBvh0ccEMlm8osN_BHTqqYARTiGJMnGUzD-FqmCB9JNeLn036eNHQ7TppqlvhBEe66-F7Aq3fSCMR2X31dWkASsg1E9kSmYS2V6NeG1G5WkfaIBOh7d7VH5Dnu6i5phne_BAu_fDbnBgsQUxQQMh-LMfv2heQ_MInJ6O2MrIzbYYMZYK7ioO5C7FvBnOCpDuk3DcgVFwuqBdVJAGkm-VYJbbnR6NYmYMnZfzrFJ8DjNE3O-L3ugVDOIfZOjuVBt2ZsfIB0-I7h_TBuIzwVE309f68AoDAujacOKvPORoN4ympPrAUSa7ZrM6ye2564g",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhY2FmNjhiOC00MmU1LTQ1NzAtYThiMC04YWY4NmY3MGU5YTEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3ODQ5NDYzNiwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY3ODQ5ODIzNiwiaWF0IjoxNjc4NDk0NjM2LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.WoO3h0tAsF_Z4f_6BLIOXaL__TzHUxZyQlDAULQ2cT1HkUs0EmTZXRzRZ4oce7rV5osco9gCWfhc03rQ-C12jmU-Yt7jq3vuuoHUz4JqkLpelZPS8jHSsCAUWu_ekOIgDzvNegiyKk2R4qnd7IRPzWOAx1houg-KKT7kxCxjkTyJJGtzb7pYDLSJSV871nS8MeXGf5VZG5rQ3Smfl8ANqypLUEQQ6gSOr30Ztt1lZaHRmhF8WKo_GWwY3jNScmX_o9QGOSvKVl8hTqz4gA9xbiNJ3zpoh_5PzY-N4Sl8pE3gt_9Zw_o5ItLNHpnXuav_0NENvhXDu7p7VTLEpG8DTA",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 130,
-    status: "PA",
-    datasheet_status: "PA",
+    orderId: 14606,
+    status: "AS",
+    datasheet_status: "CA",
     prio: "none",
-    version: 17,
-    description_status: "PA",
-    images_status: "PA",
+    version: 3,
+    description_status: "CA",
+    images_status: "AS",
     statusByRetailer: {
-      58: {
-        datasheet: "PA",
-        description: "PA",
-        images: "PA",
+      4: {
+        datasheet: "AC",
+        description: "CA",
+        images: "AS",
+      },
+      5: {
+        datasheet: "CA",
+        description: "CA",
+        images: "AS",
+      },
+      6: {
+        description: "CA",
+        images: "AS",
+        datasheet: "CA",
+      },
+      12: {
+        datasheet: "CA",
+        description: "CA",
+        images: "AS",
+      },
+      17: {
+        datasheet: "CA",
+        description: "AC",
+        images: "AS",
       },
     },
     article: {
-      id_article: 3,
-      id_category: "2032",
-      name: "CORTINA BLACKOUT DE POLIÉSTER CAFÉ 2.13 X 1.06 M",
-      upc: "161157",
-      timestamp: "2022-11-14T16:02:47.000Z",
+      id_article: 37317,
+      id_category: "157",
+      name: "Detergente lavatrastres líquido Axion Complete tricloro 1.1 l",
+      upc: "7509546078915",
+      timestamp: "2023-03-10T20:19:15.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
-      company_id: 1,
-      company_name: "GRUPO BRAHMA",
+      company_id: 1005,
+      SKU: null,
+      Descripcion: null,
+      Proveedor: null,
+      id_proveedor: 0,
+      company_name: "CRS Transformaciones",
       country: "México",
-      id_order: 130,
-      id_datasheet_especialist: null,
-      id_datasheet_facilitator: null,
-      id_description_especialist: null,
-      id_description_facilitator: null,
-      id_images_especialist: null,
-      id_images_facilitator: null,
-      id_auditor: null,
+      id_order: 14606,
+      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_auditor: 37,
       id_recepcionist: null,
-      category: "Decoración|Cortinas y Persianas|Cortinas",
+      category:
+        "Consumibles|Productos de Limpieza y Lavandería|Jabones y Lavatrastes",
       missingAttributes: 0,
       missingDescriptions: 0,
       missingImages: 0,
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot Golden",
+        id: 4,
+        name: "Walmart Super y Superama",
+      },
+      {
+        id: 5,
+        name: "Chedraui",
+      },
+      {
+        id: 6,
+        name: "HEB",
+      },
+      {
+        id: 12,
+        name: "La Comer",
+      },
+      {
+        id: 17,
+        name: "Genérico",
       },
     ],
     country: "México",
-    upc: "161157",
+    upc: "7509546078915",
   },
   location: {
-    product: { articleId: 109485, versionId: 3 },
+    product: { articleId: 354, versionId: 3 },
   },
   user: {
-    id_user: 30,
-    name: "Admin",
-    last_name: "Ulises",
-    email: "salmeron.5@hotmail.com",
-    position: "Admin",
+    id_user: 51,
+    name: "ADMIN PRUEBA",
+    last_name: "",
+    email: "etc@contentoh.com",
+    position: "",
     telephone: "",
-    country: "México",
+    country: "",
     id_company: 2,
-    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
+    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
     birth_Date: null,
     about_me: "",
     zip_code: "",
     address: "",
     job: "",
     id_stripe: "",
-    id_role: 6,
+    id_role: 1,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
-    is_user_tech: "ADMIN-AS",
+    is_user_tech: null,
     membership: {
-      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",
+      id: 750,
+      start_date: "2022-01-07T21:32:54.000Z",
+      end_date: "2023-01-07T21:32:54.000Z",
+      planID: 6,
+      plan: "prod_KvGd6YSTJyR3AP",
+      name: "Plan Small",
+      user_limit: "10",
+      products_limit: "1000",
+      type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1676494961913",
+    src: "https://content-management-profile.s3.amazonaws.com/id-51/51.png?1678494637588",
   },
 };

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

@@ -122,6 +122,7 @@ export const RetailerProductEdition = ({
   productSelected = {},
   user = {},
   token,
+  location,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -176,6 +177,7 @@ export const RetailerProductEdition = ({
   const [percentages, setPercentages] = useState(
     new Array(product?.retailers?.length).fill({ percentage: 0 })
   );
+  // const [percentages, setPercentages] = useState([{ retailers: {} }]);
   const [activePercentage, setActivePercentage] = useState(0);
   const [activeRetailer, setActiveRetailer] = useState({});
   const [services, setServices] = useState([]);
@@ -243,7 +245,9 @@ export const RetailerProductEdition = ({
   };
 
   useEffect(() => {
-    loadAuditableData();
+    if (auditableVersion) {
+      loadAuditableData();
+    }
   }, [auditableVersion]);
 
   useEffect(() => {
@@ -264,12 +268,9 @@ export const RetailerProductEdition = ({
       //Converts the data inside the datasheets object to array
       setServices(services);
       getServices();
-
-      // setActiveRetailer(product?.retailers[0]);
       setImages({ action: "init", init: services[2] });
       if (services[2]?.values?.length > 0) setActiveImage(0);
-
-      getPercentage({ data: [product] }).then((res) => setPercentages(res));
+      getPercentage({ data: [product] }).then((res) => setPercentages(res[0]));
       setLoading(false);
     } catch (error) {
       console.log(error);
@@ -410,25 +411,23 @@ export const RetailerProductEdition = ({
   }, [userGroups]);
 
   useEffect(() => {
-    product?.retailers?.forEach((retailer) => {
-      retailer["percentage"] = percentages.length
-        ? percentages?.filter(
-            (percent) => retailer?.id === percent?.id_retailer
-          )[0]?.percentage
-        : 0;
-    });
-    setActivePercentage(product?.retailers[0]?.percentage);
+    const retailers = product?.retailersAvailable || product?.retailers;
+    if (
+      Object.keys(percentages[product.article.id_article] ?? {})?.length > 0
+    ) {
+      retailers?.forEach((retailer, index) => {
+        retailer["percentage"] = Number(
+          percentages[product.article.id_article][retailer.id]
+            ?.percentageRequired
+        );
+      });
+    }
+    setActivePercentage(retailers[0]?.percentage);
   }, [percentages]);
 
   useEffect(() => {
     getInputsData(services, activeRetailer, setDatasheets, setDescriptions);
-    auditableVersion &&
-      getInputsData(
-        auditServices,
-        activeRetailer,
-        setAuditDatasheets,
-        setAuditDescriptions
-      );
+    auditableVersion && loadAuditableData();
     setActivePercentage(Math.round(activeRetailer?.percentage, 0));
     activeRetailer?.id &&
       setImages({ action: "orderImages", retailerId: activeRetailer.id });
@@ -1271,6 +1270,9 @@ export const RetailerProductEdition = ({
         auditableVersion={auditableVersion}
         setCompare={setCompare}
         isAuditor={[1, 6].includes(user.id_role)}
+        withChat={location?.state?.withChat}
+        productSelected={productSelected}
+        token={token}
       />
       <div className="data-container">
         <div className="image-data-panel">
@@ -1564,7 +1566,7 @@ export const RetailerProductEdition = ({
           images={images}
           setShowModal={setShowModal}
           sendToFacilitator={sendToFacilitator}
-          approveRejectButtons={approveRejectButtons}
+          approveRejectButtons={approveRejectButtons()}
         />
       )}
       {message.length > 0 && (

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

@@ -5,8 +5,9 @@ export const getAuditVersion = async (articleId, setState, token) => {
     `${process.env.REACT_APP_GET_AUDIT}?articleId=${articleId}`,
     { headers: { Authorization: token } }
   );
+
   if (auditResponse.status === 200) {
-    setState(JSON.parse(auditResponse.data.body).data);
+    setState(JSON.parse(auditResponse.data.body).data || "{}");
   }
 };
 

package/src/global-files/data.js

@@ -86,32 +86,27 @@ export const getImage = (imageGeneral, width = 250, height = 250) => {
 export const getPercentage = async (params = {}) => {
   const func = async () => {
     const dataToSend = [];
+    const arrayRetailers = [];
     let retailers =
       params.data[0].retailers || params.data[0].retailersAvailable;
-    params.data.forEach((product) => {
+    params.data.forEach((product, i) => {
+      dataToSend.push(
+        product.article
+          ? {
+              id_article: product.article.id_article,
+              id_category: product.article.id_category,
+              version: product.version,
+            }
+          : {
+              id_article: product.id_article,
+              id_category: product.id_category,
+              version: product.version,
+            }
+      );
       retailers.forEach((retailer) => {
-        dataToSend.push(
-          product.article
-            ? {
-                id_article: product.article.id_article,
-                id_category: product.article.id_category,
-                id_retailer: retailer.id,
-                version: product.version,
-                upc: product.article.upc,
-                name: product.article.name,
-                retailerName: retailer.name,
-              }
-            : {
-                id_article: product.id_article,
-                id_category: product.id_category,
-                id_retailer: retailer.id,
-                version: product.version,
-                upc: product.upc,
-                name: product.name,
-                retailerName: retailer.name,
-              }
-        );
+        arrayRetailers.push(retailer.id);
       });
+      dataToSend[i].id_retailer_array = arrayRetailers;
     });
 
     return await axios
@@ -125,7 +120,7 @@ export const getPercentage = async (params = {}) => {
         }
       )
       .then((response) => {
-        return response.data;
+        return [response.data];
       })
       .catch((err) => console.log(err, "Errror"));
   };

package/src/global-files/fonts.css

@@ -61,3 +61,9 @@
   src: url("../assets/fonts/roboto/Roboto-Regular.ttf");
   font-weight: 400;
 }
+
+.prueba {
+  color: #9e3e26;
+  color: #b42983;
+  color: #e7e7e7;
+}

package/src/global-files/handle_http.js

@@ -0,0 +1,225 @@
+import axios from "axios";
+
+//============================================================
+/**
+ *	funcion que realiza un axios GET
+ *	
+ *	Si <body> es undefined significa que hubo error
+
+ * @returns { Promise<{
+ * 	body: {} | undefined , 
+ * 	message: string, 
+ * 	errorDetail: string
+ * }> }
+ *  
+ */
+//============================================================
+export const fetchGET = (
+  endpoint = "",
+  paramsQuery = {},
+  paramsHeaders = {}
+) => {
+  return new Promise(async (response) => {
+    try {
+      let URL = endpoint;
+      const keysParamsQuery = Object.keys(paramsQuery);
+      // agregar cada param query a la URL
+      keysParamsQuery.forEach((key, index) => {
+        if (index == 0) {
+          URL += `?${key}=${paramsQuery[key]}`;
+        } else {
+          URL += `&${key}=${paramsQuery[key]}`;
+        }
+      });
+      const respHTTPjson = await axios.get(URL, { headers: paramsHeaders });
+      // verificar si existe un error en la peticion realizada
+      if (respHTTPjson.status !== 200) {
+        return response({
+          message: "No fue posible llevar a cabo la operación",
+          errorDetail: respHTTPjson.statusText,
+        });
+      }
+      // obtener body backend
+      const body = JSON.parse(respHTTPjson.data.body);
+
+      // verificar si existe error desde el backend
+      if (respHTTPjson.data.statusCode !== 200) {
+        return response({
+          message: body.message ?? "",
+          errorDetail: body.errorDetail ?? "",
+        });
+      }
+      // success
+      return response({ body });
+    } catch (err) {
+      return response({
+        message: "Error al obtener los datos",
+        errorDetail: err.message,
+      });
+    }
+  });
+};
+
+//============================================================
+/**
+ *	funcion que realiza un axios POST
+ *	
+ *	Si <body> es undefined significa que hubo error
+
+ * @returns { Promise<{
+ * 	body: {} | undefined , 
+ * 	message: string, 
+ * 	errorDetail: string
+ * }> }
+ *  
+ */
+//============================================================
+export const fetchPOST = (
+  endpoint = "",
+  paramsBody = {},
+  paramsHeaders = {}
+) => {
+  return new Promise(async (response) => {
+    try {
+      const respHTTPjson = await axios.post(endpoint, paramsBody, {
+        headers: paramsHeaders,
+      });
+
+      // verificar si existe un error en la peticion realizada
+      if (respHTTPjson.status !== 200) {
+        return response({
+          message: "No fue posible llevar a cabo la operación",
+          errorDetail: respHTTPjson.statusText,
+        });
+      }
+      // obtener body backend
+      const body = JSON.parse(respHTTPjson.data.body);
+
+      // verificar si existe error desde el backend
+      if (respHTTPjson.data.statusCode !== 200) {
+        return response({
+          message: body.message ?? "",
+          errorDetail: body.errorDetail ?? "",
+        });
+      }
+      // success
+      return response({ body });
+    } catch (err) {
+      return response({
+        message: "Error al guardar los datos",
+        errorDetail: err.message,
+      });
+    }
+  });
+};
+
+//============================================================
+/**
+ *	funcion que realiza un axios GET
+ *	
+ *	Si <body> es undefined significa que hubo error
+
+ * @returns { Promise<{
+ * 	body: {} | undefined , 
+ * 	message: string, 
+ * 	errorDetail: string
+ * }> }
+ *  
+ */
+//============================================================
+export const fetchPUT = (
+  endpoint = "",
+  paramsBody = {},
+  paramsHeaders = {}
+) => {
+  return new Promise(async (response) => {
+    try {
+      const respHTTPjson = await axios.put(endpoint, paramsBody, {
+        headers: paramsHeaders,
+      });
+
+      // verificar si existe un error en la peticion realizada
+      if (respHTTPjson.status !== 200) {
+        return response({
+          message: "No fue posible llevar a cabo la operación",
+          errorDetail: respHTTPjson.statusText,
+        });
+      }
+
+      // obtener body backend
+      const body = JSON.parse(respHTTPjson.data.body);
+
+      // verificar si existe error desde el backend
+      if (respHTTPjson.data.statusCode !== 200) {
+        return response({
+          message: body.message ?? "",
+          errorDetail: body.errorDetail ?? "",
+        });
+      }
+
+      // success
+      return response({ body });
+    } catch (err) {
+      return response({
+        message: "Error al actualizar los datos",
+        errorDetail: err.message,
+      });
+    }
+  });
+};
+
+//============================================================
+/**
+ *	funcion que realiza un axios GET
+ *	
+ *	Si <body> es undefined significa que hubo error
+
+ * @returns { Promise<{
+ * 	body: {} | undefined , 
+ * 	message: string, 
+ * 	errorDetail: string
+ * }> }
+ *  
+ */
+//============================================================
+export const fetchDELETE = (
+  endpoint = "",
+  paramsBody = {},
+  paramsHeaders = {}
+) => {
+  return new Promise(async (response) => {
+    try {
+      const respHTTPjson = await axios.delete(endpoint, {
+        data: paramsBody,
+        headers: paramsHeaders,
+      });
+
+      // verificar si existe un error en la peticion realizada
+      if (respHTTPjson.status !== 200) {
+        return response({
+          message: "No fue posible llevar a cabo la operación",
+          errorDetail: respHTTPjson.statusText,
+        });
+      }
+
+      // obtener body backend
+      const body = JSON.parse(respHTTPjson.data.body);
+
+      // verificar si existe error desde el backend
+      if (respHTTPjson.data.statusCode !== 200) {
+        return response({
+          message: body.message ?? "",
+          errorDetail: body.errorDetail ?? "",
+        });
+      }
+
+      // success
+      return response({ body });
+    } catch (err) {
+      return response({
+        message: "Error al actualizar los datos",
+        errorDetail: err.message,
+      });
+    }
+  });
+};

package/src/global-files/handle_userTech.js

@@ -0,0 +1,7 @@
+export const isUserTech = (value = "") => {
+  return ["AS", "ADMIN-AS", "ADMIN"].includes(value);
+};
+
+export const isUserAdminTech = (value = "") => {
+  return ["ADMIN-AS", "ADMIN"].includes(value);
+};