contentoh-components-library 21.5.99 → 21.6.0

package/dist/components/pages/RetailerProductEdition/styles.js

@@ -11,11 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _variables = require("../../../global-files/variables");
+
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: calc(100% - 341px);\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .action-buttons{\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
-});
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white);
 
 exports.Container = Container;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.translateService = exports.sendMessage = exports.getInputsData = exports.getAuditVersion = exports.createMessage = void 0;
+exports.translateService = exports.translateConcept = exports.sendMessage = exports.normalizeProduct = exports.getStatusArrayByRole = exports.getInputsData = exports.getConceptsByRole = exports.getConceptByTab = exports.getAuditVersion = exports.createMessage = exports.calculateRequiredNull = exports.buildCollaboratorAssignations = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -123,4 +123,253 @@ var sendMessage = /*#__PURE__*/function () {
   };
 }();
 
-exports.sendMessage = sendMessage;
+exports.sendMessage = sendMessage;
+
+var normalizeProduct = function normalizeProduct(product) {
+  // Handle case where product might be wrapped in a product property
+  var productData = product.product || product;
+  var article = productData.article || {};
+  var categoryRetailer = productData.categoryRetailer || article.categoryRetailer;
+  var categoryRetailerNormalized = categoryRetailer ? categoryRetailer.map(function (rel) {
+    return {
+      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/".concat(rel.id_retailer || rel.retailer_id, ".png")
+    };
+  }) : null; // extraer los retailer_id de statusByRetailer donde task_group_id no sea nulo
+
+  var retailersIdsInOrder = productData.statusByRetailer ? productData.statusByRetailer.map(function (status) {
+    return status.retailer_id;
+  }) : [];
+  var categoryRetailerInOrder = categoryRetailerNormalized.filter(function (rel) {
+    return 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
+  };
+};
+
+exports.normalizeProduct = normalizeProduct;
+var TAB_TO_CONCEPT = {
+  Descripción: "description",
+  "Ficha técnica": "datasheet",
+  Imágenes: "images"
+};
+var CONCEPT_TO_TAB = {
+  description: "Descripción",
+  datasheet: "Ficha técnica",
+  images: "Imágenes"
+};
+
+var getConceptByTab = function getConceptByTab(tab) {
+  return TAB_TO_CONCEPT[tab];
+};
+
+exports.getConceptByTab = getConceptByTab;
+
+var translateConcept = function translateConcept(concept) {
+  return CONCEPT_TO_TAB[concept];
+};
+
+exports.translateConcept = translateConcept;
+
+var getStatusArrayByRole = function 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 [];
+  }
+};
+
+exports.getStatusArrayByRole = getStatusArrayByRole;
+
+var getConceptsByRole = function getConceptsByRole(idRole) {
+  switch (idRole) {
+    case 4:
+      return ["description", "datasheet"];
+
+    case 5:
+      return ["images"];
+
+    default:
+      return ["description", "datasheet", "images"];
+  }
+};
+
+exports.getConceptsByRole = getConceptsByRole;
+
+var buildCollaboratorAssignations = function buildCollaboratorAssignations(product, users) {
+  return {
+    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] || []
+      }
+    }
+  };
+};
+
+exports.buildCollaboratorAssignations = buildCollaboratorAssignations;
+
+var calculateRequiredNull = function calculateRequiredNull(services, servicesData, activeRetailerId) {
+  var _services$3, _services$4, _services$5, _services$5$retailerM, _services$7, _services$7$values;
+
+  var result = {
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0
+  };
+
+  var isServiceRequested = function isServiceRequested(retailerId, concept) {
+    return servicesData === null || servicesData === void 0 ? void 0 : servicesData.some(function (srv) {
+      return srv.id_retailer === retailerId && srv.service === concept;
+    });
+  }; // Ficha técnica: contar inputs requeridos sin valor
+
+
+  var datasheetInputs = ((_services$3 = services[0]) === null || _services$3 === void 0 ? void 0 : _services$3.inputs) || {};
+  var datasheetsByRetailer = Object.values(services[0]).filter(function (item) {
+    var _item$retailer;
+
+    return (item === null || item === void 0 ? void 0 : (_item$retailer = item.retailer) === null || _item$retailer === void 0 ? void 0 : _item$retailer.id) === activeRetailerId;
+  });
+  datasheetsByRetailer.forEach(function (datasheet) {
+    var _datasheet$retailer;
+
+    if (!isServiceRequested((_datasheet$retailer = datasheet.retailer) === null || _datasheet$retailer === void 0 ? void 0 : _datasheet$retailer.id, "datasheet")) return;
+    Object.values(datasheet.data || {}).forEach(function (dataGroup) {
+      var _dataGroup$inputs;
+
+      (_dataGroup$inputs = dataGroup.inputs) === null || _dataGroup$inputs === void 0 ? void 0 : _dataGroup$inputs.forEach(function (inputId) {
+        var input = datasheetInputs[inputId];
+
+        if (input !== null && input !== void 0 && input.required && (input === null || input === void 0 ? void 0 : input.id_retailer) === activeRetailerId && !(input !== null && input !== void 0 && input.value)) {
+          result["Ficha técnica"]++;
+        }
+      });
+    });
+  }); // Descripción: contar inputs requeridos sin valor
+
+  var htmlTagsRegex = /(<\/?p>)|(<\/?strong>)|(<br>)/gm;
+  var descriptions = (_services$4 = services[1]) === null || _services$4 === void 0 ? void 0 : _services$4.filter(function (desc) {
+    return desc.id === activeRetailerId;
+  });
+  descriptions === null || descriptions === void 0 ? void 0 : descriptions.forEach(function (description) {
+    var _description$inputs;
+
+    if (!isServiceRequested(description.id, "description")) return;
+    (_description$inputs = description.inputs) === null || _description$inputs === void 0 ? void 0 : _description$inputs.forEach(function (input) {
+      var _input$value;
+
+      var valueClean = ((_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.replace(htmlTagsRegex, "")) || "";
+
+      if (input.required && !valueClean) {
+        result["Descripción"]++;
+      }
+    });
+  }); // Imágenes: contar imágenes requeridas sin valor
+
+  var retailerMandatories = ((_services$5 = services[2]) === null || _services$5 === void 0 ? void 0 : (_services$5$retailerM = _services$5.retailerMandatories) === null || _services$5$retailerM === void 0 ? void 0 : _services$5$retailerM.flat()) || [];
+  var requestedRetailers = retailerMandatories.filter(function (rm) {
+    return servicesData === null || servicesData === void 0 ? void 0 : servicesData.some(function (srv) {
+      return srv.id_retailer === rm.id_retailer;
+    });
+  });
+  var requiredImageIds = new Set(requestedRetailers.filter(function (rm) {
+    var _services$6, _services$6$inputs;
+
+    return (_services$6 = services[2]) === null || _services$6 === void 0 ? void 0 : (_services$6$inputs = _services$6.inputs) === null || _services$6$inputs === void 0 ? void 0 : _services$6$inputs.some(function (input) {
+      return input.id === rm.id_image && input.required === 1;
+    });
+  }).map(function (rm) {
+    return rm.id_image;
+  }));
+  var existingImageIds = new Set(((_services$7 = services[2]) === null || _services$7 === void 0 ? void 0 : (_services$7$values = _services$7.values) === null || _services$7$values === void 0 ? void 0 : _services$7$values.map(function (img) {
+    return img.image_id;
+  })) || []);
+  requiredImageIds.forEach(function (imageId) {
+    if (!existingImageIds.has(imageId)) {
+      result["Imágenes"]++;
+    }
+  });
+  return result;
+};
+
+exports.calculateRequiredNull = calculateRequiredNull;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.99",
+  "version": "21.6.0",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -12,6 +12,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@google/genai": "^1.35.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
@@ -51,7 +52,8 @@
     "styled-components": "^5.3.9",
     "swiper": "^8.4.4",
     "uuid": "^8.3.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "zod": "^4.3.5"
   },
   "scripts": {
     "start": "start-storybook  -p 6006",

package/src/ai/utils/compare-strings.js

@@ -0,0 +1,45 @@
+
+//Calcula el porcentaje de similitud entre la descripción generada por IA y la versión editada por el usuario.
+
+export function getTextSimilarityPercentage(originalText, candidateText) {
+
+  if(!originalText || !candidateText) return;
+
+  const normalize = (text) => {
+    return text
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, ' ');
+  };
+
+  const source = normalize(originalText);
+  const target = normalize(candidateText);
+
+  if (source === target) return 100;
+  if (source.length === 0 || target.length === 0) return 0;
+
+  const sourceLength = source.length;
+  const targetLength = target.length;
+  const distanceMatrix = Array(targetLength + 1).fill(null).map(() => []);
+
+  for (let i = 0; i <= sourceLength; i++) distanceMatrix[0][i] = i;
+  for (let j = 0; j <= targetLength; j++) distanceMatrix[j][0] = j;
+
+  for (let j = 1; j <= targetLength; j++) {
+    for (let i = 1; i <= sourceLength; i++) {
+      const substitutionCost = (source[i - 1] === target[j - 1]) ? 0 : 1;
+
+      distanceMatrix[j][i] = Math.min(
+        distanceMatrix[j - 1][i] + 1,
+        distanceMatrix[j][i - 1] + 1,
+        distanceMatrix[j - 1][i - 1] + substitutionCost
+      );
+    }
+  }
+
+  const editDistance = distanceMatrix[targetLength][sourceLength];
+  const maxLength = Math.max(sourceLength, targetLength);
+  const similarityScore = 1 - (editDistance / maxLength);
+
+  return similarityScore * 100;
+}

package/src/assets/images/Icons/loading.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="283" height="283" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g>
+  <path stroke-width="10" stroke="#e13aa7" fill="none" d="M50 27A23 23 0 1 0 69.9785248320784 38.604450626054636"></path>
+  <path fill="#e13aa7" d="M49 15L49 39L61 27L49 15"></path>
+  <animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="0.9803921568627451s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform>
+</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>

package/src/components/atoms/GeneralButton/styles.js

@@ -38,6 +38,10 @@ export const Container = styled.button`
     background-color: #603888;
   }
 
+  &.general-pink-button {
+    background-color: #E33AA9;
+  }
+
   &.general-transparent-button {
     background-color: transparent;
     border: 1px solid #503d66;