contentoh-components-library 21.2.84 → 21.2.85

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

@@ -59,7 +59,7 @@ export const Dashboard = ({ jwt, user, company }) => {
   };
 
   const getRetailers = async () => {
-    const isTHDUser = user.is_retailer && company.retailers;
+    const isTHDUser = [657, 818, 819].includes(user.id_company);
     const retailersResponse = await axios.get(
       `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
       {
@@ -78,21 +78,13 @@ export const Dashboard = ({ jwt, user, company }) => {
   };
 
   const loadProductsByStatus = async (orderByStatus, filter) => {
-    const isTHDUser = user.is_retailer && company.retailers;
-    const isProvider = !user.is_retailer && user.id_role === 0;
-    const isCollaborator = user.id_role > 0;
     const { ordersBydate, ordersByStatus } =
       (await loadProductVersions(orderByStatus)) || {};
 
-    const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
-    let productsFinished = 0;
-    if (isTHDUser) productsFinished = Ex;
-    if (isProvider) productsFinished = ACA;
-    if (isCollaborator) productsFinished = Ex + ACA;
-
+    const { total = 0, R = 0, PA = 0, Ex = 0 } = ordersByStatus;
     const inProcess = Object.keys(ordersByStatus).reduce(
       (prev, curr) =>
-        !["total", "PA", "R", "Ex", "ACA"].includes(curr)
+        !["total", "PA", "R", "Ex"].includes(curr)
           ? prev + ordersByStatus[curr]
           : prev,
       0
@@ -102,12 +94,11 @@ export const Dashboard = ({ jwt, user, company }) => {
         ? metricsData[0]
         : { label: "Productos totales", value: total },
     ];
-
     metricsArray.push(
       { label: "Productos filtrados", value: total },
       { label: "Productos sin asignar", value: PA + R },
       { label: "Productos en proceso", value: inProcess },
-      { label: "Productos terminados", value: productsFinished }
+      { label: "Productos terminados", value: Ex }
     );
     setMetricsData(metricsArray);
     setTotalCount(total);

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

@@ -45,7 +45,7 @@ import { useCloseModal } from "../../../global-files/customHooks";
 import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
-  let { values, attrForImgs, inputsByRetailer } = state;
+  let { values = [], attrForImgs, inputsByRetailer } = state;
   switch (action.action) {
     case "init":
       const newInputsByRetailer = {};
@@ -100,7 +100,7 @@ const reducerImages = (state, action) => {
           imageIdArray.includes(input.id)
         );
 
-        values = orderedImages.length > 0 ? orderedImages : [];
+        if (orderedImages.length > 0) values = orderedImages;
       } catch (error) {
         console.log(error);
       }
@@ -877,11 +877,10 @@ export const ProviderProductEdition = ({
         const newProductEdit = productEdit;
         newProductEdit.product[sectionStatusKey] = serviceStatus;
         setProductEdit(newProductEdit);
-        const showSurveyByProvider =
-          !user.is_retailer && orderStatus[orderId] === "AP";
-        const showSurveyByRetailer =
-          user.is_retailer && orderStatus[orderId] === "ACA";
-        showSurvey && showSurvey(showSurveyByProvider || showSurveyByRetailer);
+        const showSurveyByProvider = !user.is_retailer && orderStatus[orderId] === "AP";
+        const showSurveyByRetailer = user.is_retailer && orderStatus[orderId] === "ACA";
+        showSurvey && 
+          showSurvey(showSurveyByProvider || showSurveyByRetailer);
       } else {
         res = await axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
           headers: {

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

@@ -35,7 +35,7 @@ import { useCloseModal } from "../../../global-files/customHooks";
 import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
-  let { values, attrForImgs, inputsByRetailer } = state;
+  let { values = [], attrForImgs, inputsByRetailer } = state;
   switch (action.action) {
     case "init":
       const newInputsByRetailer = {};
@@ -80,9 +80,8 @@ const reducerImages = (state, action) => {
       try {
         const orderedImages = [];
         const imageIdArray = [];
-        if (action?.retailerId && !inputsByRetailer[action.retailerId]) {
+        if (action?.retailerId && !inputsByRetailer[action.retailerId])
           inputsByRetailer[action.retailerId] = [];
-        }
         action.retailerId &&
           inputsByRetailer[action.retailerId]?.filter((input) => {
             imageIdArray.push(input.id_image);
@@ -90,10 +89,12 @@ const reducerImages = (state, action) => {
               if (value.image_id === input.id_image) orderedImages.push(value);
             });
           });
+
         inputs = inputsInitial?.filter((input) =>
           imageIdArray.includes(input.id)
         );
-        values = orderedImages.length > 0 ? orderedImages : [];
+
+        if (orderedImages.length > 0) values = orderedImages;
       } catch (error) {
         console.log(error);
       }

package/src/global-files/fonts.css

@@ -43,3 +43,21 @@
   src: url("../assets/fonts/raleway/Raleway-Black.ttf");
   font-weight: 900;
 }
+
+@font-face {
+  font-family: "RobotoMedium";
+  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "RobotoRegular";
+  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,231 @@
+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) => {
+    //console.log("======= fetchGET =========");
+    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]}`;
+        }
+      });
+      //console.log("URL:", URL);
+      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) => {
+    //console.log("======= fetchPOST =========");
+    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) {
+        console.log(body);
+        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) => {
+    //console.log("======= fetchPUT =========");
+    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) => {
+    //console.log("======= fetchDELETE =========");
+    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/utils.js

@@ -0,0 +1,300 @@
+import { Base64 } from "js-base64";
+import moment from "moment";
+
+/*====================================================================
+            UTILERIAS PARA EL MANEJO DE ARCHIVOS
+======================================================================*/
+/*------------------------
+devolver el base64 
+completo de un file
+--------------------------*/
+export const getBase64 = async (file) => {
+  return new Promise((success) => {
+    const reader = new FileReader();
+    reader.addEventListener("loadend", () => {
+      success(reader.result);
+    });
+    reader.readAsDataURL(file);
+  });
+};
+
+/*------------------------
+devolver la data de un string base64
+--------------------------*/
+export const getDataBase64 = (base64Full) => {
+  //const base64 = reader.result.replace(/^data:\w+\/\w+.*;base64,/, "");
+  try {
+    const base64 = base64Full.split("base64,");
+    return base64.length ? base64[1] : undefined;
+  } catch (err) {
+    return undefined;
+  }
+};
+
+/*------------------------
+devolver un data Buffer a partir
+de un data base64
+--------------------------*/
+export const getDataBuffer = (dataBase64) => {
+  try {
+    const dataBuffer = Buffer.from(dataBase64, "base64");
+    return dataBuffer;
+  } catch (err) {
+    return undefined;
+  }
+};
+
+/*------------------------
+devolver la extension de un file
+a partir de un string: "name.ext"
+--------------------------*/
+export const getFileExtension = (fileName = "") => {
+  const nameParts = fileName.split(".");
+  let ext = "";
+  nameParts.forEach((part, index) => {
+    if (index !== 0) {
+      if (index + 1 === nameParts.length) ext += part;
+      else ext += part + ".";
+    }
+  });
+  return ext === "" ? undefined : ext;
+};
+
+/*------------------------
+devolver el nombre de un file
+a partir de un string: "name.ext"
+--------------------------*/
+export const getFileName = (fileName = "") => {
+  const nameParts = fileName.split(".");
+  if (nameParts.length) return nameParts[0];
+  return undefined;
+};
+
+/*------------------------
+obtener la URL de una imagen
+con un peso mas pequeño al 
+peso original pasando como
+parametros:
+=> bucket: <string> bucket en donde se ecuentra la img 
+=> key: <string> ruta y nombre completa de la img (keyS3)
+=> width: <number> largo de la img en px
+=> height: <number> altura de la img en px
+--------------------------*/
+export const getImageURL = (bucket, key, width, height) => {
+  try {
+    const configAWS = {
+      bucket: bucket,
+      key: key,
+      edits: {
+        resize: {
+          width: width,
+          height: height,
+          fit: "contain",
+          background: { r: 255, g: 255, b: 255, alpha: 0 },
+        },
+      },
+    };
+    let url = "https://d24s337exbt5zr.cloudfront.net/";
+    url += Base64.encode(JSON.stringify(configAWS));
+    return url;
+  } catch (err) {
+    console.log(`ERROR al obtener la URL de la imagen (${key})`, err.message);
+    return undefined;
+  }
+};
+
+/*------------------------
+obtener la dimension de una imagen 
+a partir de un objeto <File>
+retorno: {
+=> width: <number> largo de la img en px
+=> height: <number> altura de la img en px
+} 
+NOTA regresa <undefined> si no se pudo 
+obtener la dimension de la imagen
+--------------------------*/
+export const getImageSize = (file) => {
+  return new Promise(async (response) => {
+    const img = new Image();
+    img.onload = () => response({ width: img.width, height: img.height });
+    img.onerror = () => response(undefined);
+    const base64 = await getBase64(file);
+    img.src = base64;
+  });
+};
+
+/*------------------------
+obtener una redimension (height) proporcional 
+a la dimension original (height) a partir de
+un width deseado
+retorno:
+=> newHeight: <number> altura de la img en px
+NOTA regresa <undefined> si no se pudo 
+obtener el nuevo <height> de la imagen
+--------------------------*/
+export const getResizeImgHeight = (originalWidth, originalHeight, newWidth) => {
+  /*
+  console.log(`==================
+  original width: ${originalWidth}
+  original height: ${originalHeight}
+  newWidth: ${newWidth}`);
+  */
+  const scale = (newWidth * 100) / originalWidth / 100;
+  //console.log("scale:", scale);
+  return Math.ceil(originalHeight * scale);
+};
+
+/*====================================================================
+            UTILERIAS PARA EL MANEJO DE FECHAS
+======================================================================*/
+/*------------------------
+nombres de los dias de la semana
+--------------------------*/
+const weekdayName = {
+  1: { short: "Dom", full: "Domingo" },
+  2: { short: "Lun", full: "Lunes" },
+  3: { short: "Mar", full: "Martes" },
+  4: { short: "Mié", full: "Miércoles" },
+  5: { short: "Jue", full: "Jueves" },
+  6: { short: "Vie", full: "Viernes" },
+  7: { short: "Sab", full: "Sabado" },
+};
+/*------------------------
+nombres de los meses
+--------------------------*/
+const monthName = {
+  1: { short: "Ene", full: "Enero" },
+  2: { short: "Feb", full: "Febrero" },
+  3: { short: "Mar", full: "Marzo" },
+  4: { short: "Abr", full: "Abril" },
+  5: { short: "May", full: "Mayo" },
+  6: { short: "Jun", full: "Junio" },
+  7: { short: "Jul", full: "Julio" },
+  8: { short: "Ago", full: "Agosto" },
+  9: { short: "Sep", full: "Septiembre" },
+  10: { short: "Oct", full: "Octubre" },
+  11: { short: "Nov", full: "Noviembre" },
+  12: { short: "Dic", full: "Diciembre" },
+};
+
+/*------------------------
+Obtener una fecha a partir de 
+un objeto Date() en formato: 
+'DDD dd MMM aaaa'
+ejemplo: 'Ene 12 Jul 2022'
+--------------------------*/
+export const getFullDate = (date = new Date()) => {
+  if (isNaN(date)) return undefined;
+  let dateString = `${weekdayName[date.getDay() + 1].short} `;
+  dateString += date.getDate() + " ";
+  dateString += `${monthName[date.getMonth() + 1].short} `;
+  dateString += date.getFullYear();
+  return dateString;
+};
+
+/*------------------------
+Obtener una fecha a partir de 
+un objeto Date() en formato: 
+'dd de MMMM del aaaa'
+ejemplo: '12 de octubre del 2022'
+=> si es la fecha del dia actual:
+devolvera 'Hoy'
+=> si es la fecha del dia de ayer:
+devolvera 'Ayer'
+=> si es fecha del mismo año:
+devolvera '12 de octubre'
+--------------------------*/
+export const getCustomDate = (date = new Date()) => {
+  if (isNaN(date)) return "";
+  let dateString = date.getDate() + " de ";
+  dateString += `${monthName[date.getMonth() + 1].full}`;
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+
+  // fecha de Hoy
+  if (
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+  ) {
+    return "Hoy";
+  }
+  // fecha de Ayer
+  if (
+    date.getDate() === yesterday.getDate() &&
+    date.getMonth() === yesterday.getMonth() &&
+    date.getFullYear() === yesterday.getFullYear()
+  ) {
+    return "Ayer";
+  }
+  // fechas del mismo año
+  if (date.getFullYear() === today.getFullYear()) return dateString;
+  // fechas de diferente año
+  return dateString + " del " + date.getFullYear();
+};
+
+/*------------------------
+Obtener una hora a partir de 
+una fecha string (current_timestamp)
+en formato: 'hh:mm PM/AM'
+ejemplo: '12:34 PM'
+--------------------------*/
+export const getTime = (time = "") => {
+  if ([undefined, null, ""].includes(time))
+    return moment(new Date()).format("LT");
+  else return moment(time).format("LT");
+};
+
+/*====================================================================
+            UTILERIAS PARA EL MANEJO DE VALIDACIONES
+======================================================================*/
+/*------------------------
+recibe un number o string
+y determina si es numero natural
+0,1,2,...
+--------------------------*/
+export const isValidNaturalNumber = (number) => {
+  if ([undefined, null, ""].includes(number)) return false;
+  if (!["string", "number"].includes(typeof number)) return false;
+  try {
+    const numberString = number + "";
+    for (let i = 0; i < numberString.length; i++) {
+      if ("0123456789".indexOf(numberString.charAt(i)) === -1) return false;
+    }
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+
+/*------------------------
+recibe un array y determina si 
+el array esta vacio []
+--------------------------*/
+export const isArrayEmpty = (array) => {
+  if (Array.isArray(array) && array.length) return false;
+  return true;
+};
+
+/*------------------------
+recibe un string y determina si 
+esta vacio ""
+--------------------------*/
+export const isStringEmpty = (cad) => {
+  if (cad && typeof cad === "string" && cad.trim().length !== 0) return false;
+  return true;
+};
+
+/*------------------------
+recibe un string JSON y lo
+decodifica a su valor original
+--------------------------*/
+export const decodeJSON = (valueJSON) => {
+  try {
+    const decodeValue = JSON.parse(valueJSON);
+    return decodeValue;
+  } catch (err) {
+    return valueJSON;
+  }
+};

package/src/global-files/variables.js

@@ -26,6 +26,8 @@ export const FontFamily = {
   Raleway_700: "Raleway-700",
   Raleway_800: "Raleway-800",
   Raleway_900: "Raleway-900",
+  RobotoMedium: "RobotoMedium",
+  RobotoRegular: "RobotoRegular",
 };
 
 export const GlobalStatus = [