contentoh-components-library 21.5.99 → 21.6.0

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

@@ -69,3 +69,243 @@ export const sendMessage = async (data) => {
     paramsHeader
   );
 };
+
+export const normalizeProduct = (product) => {
+  // Handle case where product might be wrapped in a product property
+  const productData = product.product || product;
+  const article = productData.article || {};
+
+  const categoryRetailer =
+    productData.categoryRetailer || article.categoryRetailer;
+
+  const categoryRetailerNormalized = categoryRetailer
+    ? categoryRetailer.map((rel) => ({
+        id_retailer: rel.id_retailer || rel.retailer_id,
+        retailer: rel.retailer_name || rel.retailerName,
+        name: rel.retailer_name || rel.retailerName,
+        id_category: rel.id_category,
+        category: rel.category_name || rel.categoryName,
+        image: `https://content-management-images.s3.amazonaws.com/retailers/${
+          rel.id_retailer || rel.retailer_id
+        }.png`,
+      }))
+    : null;
+
+  // extraer los retailer_id de statusByRetailer donde task_group_id no sea nulo
+  const retailersIdsInOrder = productData.statusByRetailer
+    ? productData.statusByRetailer.map((status) => status.retailer_id)
+    : [];
+
+  const categoryRetailerInOrder = categoryRetailerNormalized.filter((rel) =>
+    retailersIdsInOrder.includes(rel.id_retailer)
+  );
+
+  return {
+    id_article: productData.id_article || article.id_article || 0,
+    upc: productData.upc || article.upc || null,
+    sku: productData.sku || article.sku || null,
+    name: productData.name || article.name || null,
+    timestamp: productData.timestamp || article.timestamp || null,
+    id_user: productData.id_user || article.id_user || null,
+    categoryName: productData.category || article.category || null,
+    id_category: productData.id_category || article.id_category || null,
+    retailersAvailable: productData.retailersAvailable || null,
+    categoryRetailer: categoryRetailerNormalized || null,
+    percentages: productData.percentages || null,
+    summary: productData.summary || null,
+    version: productData.version || 0,
+    id_order: productData.orderId || 0,
+    status: productData.status || null,
+    datasheet_status: productData.datasheet_status || null,
+    description_status: productData.description_status || null,
+    images_status: productData.images_status || null,
+    brand: productData.brand || null,
+    services: productData.services || null,
+    country: article.country || null,
+    id_company: article.company_id || null,
+    company: article.company_name || null,
+    id_datasheet_especialist: article.id_datasheet_especialist || 0,
+    id_datasheet_facilitator: article.id_datasheet_facilitator || null,
+    id_description_especialist: article.id_description_especialist || 0,
+    id_description_facilitator: article.id_description_facilitator || null,
+    id_images_especialist: article.id_images_especialist || 0,
+    id_images_facilitator: article.id_images_facilitator || null,
+    id_auditor: article.id_auditor || 0,
+    statusByRetailer: productData.statusByRetailer || null,
+    categoryRetailerInOrder: categoryRetailerInOrder || null,
+  };
+};
+
+const TAB_TO_CONCEPT = {
+  Descripción: "description",
+  "Ficha técnica": "datasheet",
+  Imágenes: "images",
+};
+
+const CONCEPT_TO_TAB = {
+  description: "Descripción",
+  datasheet: "Ficha técnica",
+  images: "Imágenes",
+};
+
+export const getConceptByTab = (tab) => TAB_TO_CONCEPT[tab];
+
+export const translateConcept = (concept) => CONCEPT_TO_TAB[concept];
+
+export const getStatusArrayByRole = (idRole) => {
+  switch (idRole) {
+    case 7:
+    case 8:
+      return ["PA", "AS", "CA", "RC", "RA", "RP", "RCA"];
+    case 4:
+    case 5:
+      return ["RC", "AC", "AA", "AP", "ACA"];
+    case 6:
+      return ["RP", "RCA", "AC", "RA"];
+    default:
+      return [];
+  }
+};
+
+export const getConceptsByRole = (idRole) => {
+  switch (idRole) {
+    case 4:
+      return ["description", "datasheet"];
+    case 5:
+      return ["images"];
+    default:
+      return ["description", "datasheet", "images"];
+  }
+};
+
+export const buildCollaboratorAssignations = (product, users) => ({
+  Descripción: {
+    assignations: [
+      {
+        collaboratorType: "especialist",
+        id: product.id_description_especialist,
+      },
+      {
+        collaboratorType: "facilitator",
+        id: product.id_description_facilitator,
+      },
+    ],
+    collaborators: {
+      especialist: users[0] || [],
+      facilitator: users[2] || [],
+    },
+  },
+  "Ficha técnica": {
+    assignations: [
+      {
+        collaboratorType: "especialist",
+        id: product.id_datasheet_especialist,
+      },
+      {
+        collaboratorType: "facilitator",
+        id: product.id_datasheet_facilitator,
+      },
+    ],
+    collaborators: {
+      especialist: users[0] || [],
+      facilitator: users[2] || [],
+    },
+  },
+  Imágenes: {
+    assignations: [
+      {
+        collaboratorType: "especialist",
+        id: product.id_images_especialist,
+      },
+      {
+        collaboratorType: "facilitator",
+        id: product.id_images_facilitator,
+      },
+    ],
+    collaborators: {
+      especialist: users[1] || [],
+      facilitator: users[3] || [],
+    },
+  },
+});
+
+export const calculateRequiredNull = (services, servicesData, activeRetailerId) => {
+  const result = {
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0,
+  };
+
+  const isServiceRequested = (retailerId, concept) =>
+    servicesData?.some(
+      (srv) => srv.id_retailer === retailerId && srv.service === concept
+    );
+
+  // Ficha técnica: contar inputs requeridos sin valor
+  const datasheetInputs = services[0]?.inputs || {};
+  const datasheetsByRetailer = Object.values(services[0]).filter(
+    (item) => item?.retailer?.id === activeRetailerId
+  );
+
+  datasheetsByRetailer.forEach((datasheet) => {
+    if (!isServiceRequested(datasheet.retailer?.id, "datasheet")) return;
+
+    Object.values(datasheet.data || {}).forEach((dataGroup) => {
+      dataGroup.inputs?.forEach((inputId) => {
+        const input = datasheetInputs[inputId];
+        if (
+          input?.required &&
+          input?.id_retailer === activeRetailerId &&
+          !input?.value
+        ) {
+          result["Ficha técnica"]++;
+        }
+      });
+    });
+  });
+
+  // Descripción: contar inputs requeridos sin valor
+  const htmlTagsRegex = /(<\/?p>)|(<\/?strong>)|(<br>)/gm;
+  const descriptions = services[1]?.filter(
+    (desc) => desc.id === activeRetailerId
+  );
+
+  descriptions?.forEach((description) => {
+    if (!isServiceRequested(description.id, "description")) return;
+
+    description.inputs?.forEach((input) => {
+      const valueClean = input.value?.replace(htmlTagsRegex, "") || "";
+      if (input.required && !valueClean) {
+        result["Descripción"]++;
+      }
+    });
+  });
+
+  // Imágenes: contar imágenes requeridas sin valor
+  const retailerMandatories = services[2]?.retailerMandatories?.flat() || [];
+  const requestedRetailers = retailerMandatories.filter((rm) =>
+    servicesData?.some((srv) => srv.id_retailer === rm.id_retailer)
+  );
+
+  const requiredImageIds = new Set(
+    requestedRetailers
+      .filter((rm) =>
+        services[2]?.inputs?.some(
+          (input) => input.id === rm.id_image && input.required === 1
+        )
+      )
+      .map((rm) => rm.id_image)
+  );
+
+  const existingImageIds = new Set(
+    services[2]?.values?.map((img) => img.image_id) || []
+  );
+
+  requiredImageIds.forEach((imageId) => {
+    if (!existingImageIds.has(imageId)) {
+      result["Imágenes"]++;
+    }
+  });
+
+  return result;
+};

package/src/contexts/AiProductEdition.jsx

@@ -0,0 +1,347 @@
+import { useContext, useEffect, useState } from "react";
+import { createContext } from "react";
+import axios from "axios";
+
+export const AiProductEdition = createContext();
+
+export const useAiProductEdition = () => {
+  const context = useContext(AiProductEdition);
+
+  if (!context) return {};
+
+  return context;
+};
+
+export const AiProductEditionProvider = ({
+  children,
+  isCreatorsEdition = false,
+  user = {},
+  token = "",
+  state
+}) => {
+
+  const isCreators = isCreatorsEdition;
+
+  const productSelected = state.product;
+  const activeRetailer = state.active_retailer;
+  const datasheetInputs = state.datasheets_inputs?.[1];
+  const imagesData = state.images_values;
+
+  const [product, setProduct] = useState(null);
+
+  const [parsedDatasheet, setParsedDatasheet] = useState([]);
+  const [parsedImages, setParsedImages] = useState([]);
+
+  const [suggestions, setSuggestions] = useState({});
+  const [currentSuggestion, setCurrentSuggestion] = useState({});
+
+  const [isAiAvailable, setIsAiAvailable] = useState(false);
+
+  const [inputsGeneratedWithAi, setInputsGeneratedWithAi] = useState({});
+  const [inputsUsingAi, setInputsUsingAi] = useState({});
+
+  const MAX_CREDITS = 10;
+  const COOLDOWN_MS = 5 * 60 * 1000;
+  const RATE_LIMIT_KEY = "ai_generation_limit_data";
+
+  const checkAndManageRateLimit = (currentArticleId) => {
+    const now = Date.now();
+    const storedData = localStorage.getItem(RATE_LIMIT_KEY);
+
+    let allRateData = storedData ? JSON.parse(storedData) : {};
+
+    let productTimestamps = allRateData[currentArticleId] || [];
+
+    productTimestamps = productTimestamps.filter(timestamp => (now - timestamp) < COOLDOWN_MS);
+
+    if (productTimestamps.length >= MAX_CREDITS) {
+
+      allRateData[currentArticleId] = productTimestamps;
+      localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(allRateData));
+
+      return {
+        allowed: false,
+        message: "Has alcanzado el limite de intentos frecuentes para este producto. Por favor, espera unos minutos."
+      };
+    }
+
+
+    productTimestamps.push(now);
+    allRateData[currentArticleId] = productTimestamps;
+
+    localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(allRateData));
+
+    return { allowed: true };
+  };
+
+  function setCurrentSuggestionValue({
+    inputId,
+    index,
+    value
+  }) {
+    setCurrentSuggestion(prev => ({
+      ...prev,
+      [inputId]: {
+        index,
+        value
+      }
+    }));
+  }
+
+  function clearCurrentSuggestions() {
+    setCurrentSuggestion({});
+  }
+
+  async function regenerateProductSuggestions ({
+    inputName,
+    currentValue,
+    description,
+    maxChar,
+    type,
+
+    articleId,
+    versionId,
+    descriptionId,
+    attributeId
+  }) {
+
+    if(!description || !maxChar || !type) return console.log("Error: No se obtuvieron los parametros obligatorios");
+
+    const newSuggestions = await generateProductSuggestions({
+      inputName,
+      currentValue,
+      description,
+      maxChar,
+      type,
+
+      articleId,
+      versionId,
+      descriptionId,
+      attributeId
+    });
+
+    if(newSuggestions?.error) return {
+      error: newSuggestions.error
+    }
+
+    if(!Array.isArray(newSuggestions) || newSuggestions.length === 0)
+      return console.log("Error: No se obtuvieron nuevas sugerencias");
+
+    if(!newSuggestions) return console.log("Error: No exiten resultados nuevos");
+
+    return newSuggestions;
+
+  }
+
+  async function generateProductSuggestions ({
+    inputName = "",
+    currentValue = "",
+    description = "",
+    maxChar = 100,
+    type = 'description',
+
+    articleId,
+    versionId,
+    descriptionId,
+    attributeId
+  }) {
+
+    try {
+
+      if(!isAiAvailable) return;
+
+      const rateLimitStatus = checkAndManageRateLimit(articleId);
+
+      if (!rateLimitStatus.allowed) {
+        return {
+          error: rateLimitStatus.message,
+          isRateLimitInfo: true
+        };
+      }
+
+      if(!product)
+        throw new Error("El producto no está definido");
+
+      if(!Array.isArray(parsedDatasheet) || parsedDatasheet.length === 0)
+        throw new Error("No es encontró la ficha técnica");
+
+      if(!Array.isArray(parsedImages) || parsedImages.length === 0)
+        throw new Error("No se encontraron imágenes para la cadena seleccionada");
+
+      const {
+        upc,
+        productName,
+        retailer,
+        category
+      } = product;
+
+      const version = state?.product?.version;
+
+      if (!upc || !description || !productName || !category || !retailer || !articleId || !version || (!descriptionId && !attributeId))
+        throw new Error("Faltan parámetros obligatorios para generar sugerencias de IA");
+
+      const payload = {
+        upc,
+        attributeTitle: inputName,
+        attributeDescription: description,
+        productName,
+        currentValue,
+        categoryName: category,
+        retailerName: retailer,
+        datasheet: parsedDatasheet,
+        images: parsedImages,
+        maxChar: maxChar,
+
+        articleId,
+        retailerId: activeRetailer?.id_retailer,
+        versionId: version,
+        descriptionId,
+        attributeId
+      }
+
+      const { data } = await axios.post(process.env.REACT_APP_GENERATE_AI_ATTRIBUTES, payload, {
+        headers: {
+          Authorization: token
+        }
+      });
+
+      const errorsRaw = JSON.parse(data?.body)?.error;
+
+      const errorMessage = errorsRaw ? JSON.parse(errorsRaw)?.error?.message : null;
+
+      if(errorMessage) throw new Error(errorMessage ?? 'Error desconocido')
+
+      const results = JSON.parse(data?.body)?.data ?? [];
+
+      if(!results)
+        throw new Error("No se encontraron resultados");
+
+      return results;
+
+    } catch (error) {
+      console.log("Error generating AI suggestions:", error);
+      return {
+        error: error?.message ?? "Error generating AI suggestions"
+      }
+    }
+
+  }
+
+  // Verificamos si los servicios de ficha técnica e imágenes estan completos
+  useEffect(() => {
+
+    if (!productSelected || !isCreators) return;
+
+    const {
+      name: productName,
+      upc: upc,
+      categoryRetailer
+    } = productSelected;
+
+    if(!Array.isArray(categoryRetailer)) return console.log("Error: categoryRetailer no es un array");
+
+    const currentCategory = categoryRetailer.find(retailer => retailer?.id_retailer === activeRetailer?.id_retailer);
+
+    if(!currentCategory) return console.log("Error: No se encontro la categoría");
+
+    const {
+      retailer,
+      category
+    } = currentCategory;
+
+    //Checamos si el servicio de ficha técnica e imagenes esta completo
+
+    const currentRetailerPercentages = productSelected?.percentages?.find(retailer => retailer?.id_retailer === activeRetailer?.id_retailer);
+
+    if(!currentRetailerPercentages) return console.log("Error: No hay porcentajes disponibles");
+
+    const {
+      required: datasheetRequiredPercent,
+    } = currentRetailerPercentages?.datasheet;
+
+    const {
+      required: imagesRequiredPercent,
+    } = currentRetailerPercentages?.images;
+
+    const aiServiceAvailable = (datasheetRequiredPercent >= 100) && (imagesRequiredPercent >= 100) && [1,4,6,7].some(allowed => allowed = user?.id_role);
+
+    setIsAiAvailable(aiServiceAvailable);
+
+    setProduct({
+      upc,
+      productName,
+      retailer,
+      category,
+    });
+
+  }, [productSelected]);
+
+  // Inicializamos la ficha técnica con el objetivo de posteriormente pasarlo a la generación con IA
+  useEffect(() => {
+
+    if (!datasheetInputs || !isCreators) return;
+
+    const datasheetToArray = Object.values(datasheetInputs);
+
+    const normalizedDatasheet = datasheetToArray.map(attribute => ({
+      description: attribute?.description,
+      name: attribute?.name,
+      type: attribute?.type,
+      value: attribute?.value
+    }));
+
+    setParsedDatasheet(normalizedDatasheet);
+
+  }, [datasheetInputs]);
+
+  // Inicializamos las imágenes con el objetivo de posteriormente pasarlo a la generación con IA
+  useEffect(() => {
+
+    if(!isCreators) return;
+
+    const currentRetailerImageInputs = imagesData?.inputsByRetailer?.[0]?.filter(input => input?.id_retailer === activeRetailer?.id_retailer);
+
+    if(!Array.isArray(currentRetailerImageInputs) || currentRetailerImageInputs.length === 0) return console.log('No existen imágenes para la cadena seleccionada')
+
+    const allProductImages = imagesData?.values;
+
+    if(!Array.isArray(allProductImages) || allProductImages.length === 0) return console.log("No existen imágenes para el producto");
+
+    //Obtenemos las imágenes para el retailer seleccionado
+    const currentParsedImages = allProductImages.filter(image => {
+
+      const imageId = image?.image_id;
+      const foundedImage = currentRetailerImageInputs.some(retailerImage => retailerImage?.id_image === imageId);
+
+      return foundedImage;
+    });
+
+    setParsedImages(currentParsedImages);
+
+  }, [imagesData]);
+
+  return (
+    <AiProductEdition.Provider
+      value={{
+        isCreators: isCreators,
+        suggestions,
+        currentSuggestion,
+        isAiAvailable,
+        inputsGeneratedWithAi,
+        inputsUsingAi,
+
+        setInputsUsingAi,
+        setInputsGeneratedWithAi,
+        setSuggestions,
+        setCurrentSuggestionValue,
+        generateProductSuggestions,
+        regenerateProductSuggestions,
+        clearCurrentSuggestions,
+
+      }}
+    >
+      { children }
+    </AiProductEdition.Provider>
+  )
+
+}

package/src/global-files/statusDictionary.js

@@ -0,0 +1,103 @@
+const STATUS_DICTIONARY = {
+  // R: {
+  //   status: "R",
+  //   name: "Recepción",
+  //   weight: 1
+  // },
+  PA: {
+    status: "PA",
+    name: "Por Asignar",
+    weight: 2
+  },
+  AS: {
+    status: "AS",
+    name: "Asignado",
+    weight: 3
+  },
+  // CA: {
+  //   status: "CA",
+  //   name: "Capturando",
+  //   weight: 4
+  // },
+  // IE: {
+  //   status: "IE",
+  //   name: "Información Enviada",
+  //   weight: 5
+  // },
+  RCA: {
+    status: "RCA",
+    name: "Rechazado Cadena",
+    weight: 6
+  },
+  RP: {
+    status: "RP",
+    name: "Rechazado Proveedor",
+    weight: 7
+  },
+  RA: {
+    status: "RA",
+    name: "Rechazado Auditor",
+    weight: 8
+  },
+  RC: {
+    status: "RC",
+    name: "Rechazo Coordinador",
+    weight: 9
+  },
+  AC: {
+    status: "AC",
+    name: "Aprobado Coordinador",
+    weight: 10
+  },
+  AA: {
+    status: "AA",
+    name: "Aprobado Auditor",
+    weight: 11
+  },
+  AP: {
+    status: "AP",
+    name: "Aprobado Proveedor",
+    weight: 12
+  },
+  ACA: {
+    status: "ACA",
+    name: "Aprobado Cadena",
+    weight: 13
+  },
+  Ex: {
+    status: "Ex",
+    name: "Exportado",
+    weight: 14
+  },
+  // RAC: {
+  //   status: "RAC",
+  //   name: "Rechazo de Auditoría Content-oh!",
+  //   weight: 15
+  // },
+  // SAC: {
+  //   status: "SAC",
+  //   name: "Solicitud de Auditoría Content-oh!",
+  //   weight: 16
+  // },
+  // AAC: {
+  //   status: "AAC",
+  //   name: "Aprobado Auditoría Content-oh!",
+  //   weight: 17
+  // },
+  // FAP: {
+  //   status: "FAP",
+  //   name: "Finalización de Auditoría por Proveedor",
+  //   weight: 18
+  // },
+
+  //El status NS necesita ser el mayor de todos
+  NS: {
+    status: "NS",
+    name: "No Solicitado",
+    weight: 100
+  },
+};
+
+module.exports = {
+  STATUS_DICTIONARY
+}