contentoh-components-library 21.5.94 → 21.5.95

package/dist/components/molecules/TagAndInput/index.js

@@ -7,7 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TagAndInput = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread6 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
@@ -29,6 +37,10 @@ var _SliderToolTip = require("../../atoms/SliderToolTip");
 
 var _Tooltip = require("../../atoms/Tooltip");
 
+var _AiProductEdition = require("../../../contexts/AiProductEdition");
+
+var _iaIcon = _interopRequireDefault(require("../../../assets/images/Icons/ia-icon.png"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var TagAndInput = function TagAndInput(_ref) {
@@ -50,6 +62,7 @@ var TagAndInput = function TagAndInput(_ref) {
       inputRows = _ref.inputRows,
       maxChar = _ref.maxChar,
       required = _ref.required,
+      aiGenerated = _ref.aiGenerated,
       optionList = _ref.optionList,
       description = _ref.description,
       inputOnChange = _ref.inputOnChange,
@@ -68,15 +81,274 @@ var TagAndInput = function TagAndInput(_ref) {
       boxOnboardingList = _useState2[0],
       setBoxOnboardingList = _useState2[1];
 
+  var _useAiProductEdition = (0, _AiProductEdition.useAiProductEdition)(),
+      isCreators = _useAiProductEdition.isCreators,
+      generateProductSuggestions = _useAiProductEdition.generateProductSuggestions,
+      regenerateProductSuggestions = _useAiProductEdition.regenerateProductSuggestions,
+      suggestions = _useAiProductEdition.suggestions,
+      setSuggestions = _useAiProductEdition.setSuggestions,
+      currentSuggestion = _useAiProductEdition.currentSuggestion,
+      setCurrentSuggestionValue = _useAiProductEdition.setCurrentSuggestionValue,
+      isAiAvailable = _useAiProductEdition.isAiAvailable,
+      inputsGeneratedWithAi = _useAiProductEdition.inputsGeneratedWithAi,
+      setInputsGeneratedWithAi = _useAiProductEdition.setInputsGeneratedWithAi,
+      inputsUsingAi = _useAiProductEdition.inputsUsingAi,
+      setInputsUsingAi = _useAiProductEdition.setInputsUsingAi;
+
+  var isBenefitInput = label === null || label === void 0 ? void 0 : label.toLowerCase().includes("beneficios");
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isAiGenerationLoading = _useState4[0],
+      setIsAiGenerationLoading = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isAiActive = _useState6[0],
+      setIsAiActive = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isAiRegenerationLoading = _useState8[0],
+      setIsAiRegenerationLoading = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isAiGenerated = _useState10[0],
+      setIsAiGenerated = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(""),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      errorMessage = _useState12[0],
+      setErrorMessage = _useState12[1];
+
+  function handlerAiGeneration(_x) {
+    return _handlerAiGeneration.apply(this, arguments);
+  }
+
+  function _handlerAiGeneration() {
+    _handlerAiGeneration = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
+      var type, currentSuggestions, aiSuggestions, errorMsg;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              type = _ref2.type;
+
+              if (!(isAiGenerationLoading || !isAiAvailable)) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              if (!isAiActive) {
+                _context.next = 6;
+                break;
+              }
+
+              setIsAiActive(false);
+              return _context.abrupt("return");
+
+            case 6:
+              //Si ya tiene sugerencias generadas, se las mostramos
+              currentSuggestions = suggestions === null || suggestions === void 0 ? void 0 : suggestions[inputId];
+
+              if (!(Array.isArray(currentSuggestions) && currentSuggestions.length > 0)) {
+                _context.next = 9;
+                break;
+              }
+
+              return _context.abrupt("return", setIsAiActive(true));
+
+            case 9:
+              setErrorMessage("");
+              setIsAiGenerationLoading(true);
+              _context.next = 13;
+              return generateProductSuggestions({
+                inputName: label,
+                currentValue: value,
+                description: description,
+                maxChar: maxChar !== null && maxChar !== void 0 ? maxChar : 99,
+                type: type,
+                // Informacion del producto
+                articleId: articleId,
+                versionId: version,
+                descriptionId: !isBenefitInput ? inputId : null,
+                attributeId: isBenefitInput ? inputId : null
+              });
+
+            case 13:
+              aiSuggestions = _context.sent;
+
+              if (!(!aiSuggestions && aiSuggestions.length === 0)) {
+                _context.next = 19;
+                break;
+              }
+
+              errorMsg = "Error: No se recibieron sugerencias de IA";
+              console.log(errorMsg);
+              setIsAiGenerationLoading(false);
+              return _context.abrupt("return");
+
+            case 19:
+              if (!(aiSuggestions !== null && aiSuggestions !== void 0 && aiSuggestions.error)) {
+                _context.next = 24;
+                break;
+              }
+
+              console.log('Error: ', aiSuggestions.error);
+              setErrorMessage(aiSuggestions.error);
+              setIsAiGenerationLoading(false);
+              return _context.abrupt("return");
+
+            case 24:
+              setSuggestions(function (prev) {
+                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, inputId, aiSuggestions));
+              });
+              setIsAiActive(true);
+              setIsAiGenerationLoading(false);
+
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _handlerAiGeneration.apply(this, arguments);
+  }
+
+  function handlerRegenerateSuggestions(_x2) {
+    return _handlerRegenerateSuggestions.apply(this, arguments);
+  }
+
+  function _handlerRegenerateSuggestions() {
+    _handlerRegenerateSuggestions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
+      var _ref3$type, type, currentSuggestions, aiSuggestions, errorMsg;
+
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _ref3$type = _ref3.type, type = _ref3$type === void 0 ? "description" : _ref3$type;
+
+              if (!isAiRegenerationLoading) {
+                _context2.next = 3;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 3:
+              setErrorMessage("");
+              setIsAiRegenerationLoading(true);
+              currentSuggestions = suggestions === null || suggestions === void 0 ? void 0 : suggestions[inputId];
+              _context2.next = 8;
+              return regenerateProductSuggestions({
+                inputName: label,
+                currentValue: value,
+                description: description,
+                maxChar: maxChar !== null && maxChar !== void 0 ? maxChar : 99,
+                type: type,
+                //Información del producto
+                articleId: articleId,
+                versionId: version,
+                descriptionId: !isBenefitInput ? inputId : null,
+                attributeId: isBenefitInput ? inputId : null
+              });
+
+            case 8:
+              aiSuggestions = _context2.sent;
+
+              if (!(!aiSuggestions && aiSuggestions.length === 0)) {
+                _context2.next = 15;
+                break;
+              }
+
+              errorMsg = "Error: No se recibieron sugerencias de IA";
+              console.log(errorMsg);
+              setErrorMessage(errorMsg);
+              setIsAiRegenerationLoading(false);
+              return _context2.abrupt("return");
+
+            case 15:
+              console.log({
+                aiSuggestionsRenew: aiSuggestions
+              });
+
+              if (!(aiSuggestions !== null && aiSuggestions !== void 0 && aiSuggestions.error)) {
+                _context2.next = 21;
+                break;
+              }
+
+              console.log('Error: ', aiSuggestions.error);
+              setErrorMessage(aiSuggestions.error);
+              setIsAiRegenerationLoading(false);
+              return _context2.abrupt("return");
+
+            case 21:
+              setSuggestions(function (prev) {
+                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, inputId, [].concat((0, _toConsumableArray2.default)(currentSuggestions), (0, _toConsumableArray2.default)(aiSuggestions))));
+              });
+              setIsAiRegenerationLoading(false);
+
+            case 23:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _handlerRegenerateSuggestions.apply(this, arguments);
+  }
+
+  var handleChangeSuggestion = function handleChangeSuggestion(_ref4) {
+    var _currentSuggestion$in, _inputSuggestions$pre, _inputSuggestions$nex;
+
+    var _ref4$action = _ref4.action,
+        action = _ref4$action === void 0 ? "next" : _ref4$action;
+    var inputSuggestions = suggestions === null || suggestions === void 0 ? void 0 : suggestions[inputId];
+    if (!inputSuggestions || !Array.isArray(inputSuggestions)) return console.log("Error: No existe la sugerencia");
+    var currentIndex = currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in = currentSuggestion[inputId]) === null || _currentSuggestion$in === void 0 ? void 0 : _currentSuggestion$in.index;
+    if (!currentIndex && currentIndex != 0) return console.log("Error: No existe un indice en la sugerencia actual");
+
+    switch (action) {
+      case "prev":
+        if (currentIndex === 0) return;
+        var prevIndex = currentIndex - 1;
+        setCurrentSuggestionValue({
+          inputId: inputId,
+          index: prevIndex,
+          value: (_inputSuggestions$pre = inputSuggestions[prevIndex]) === null || _inputSuggestions$pre === void 0 ? void 0 : _inputSuggestions$pre.value
+        });
+        break;
+
+      case "next":
+        if (currentIndex === inputSuggestions.length - 1) return;
+        var nextIndex = currentIndex + 1;
+        setCurrentSuggestionValue({
+          inputId: inputId,
+          index: nextIndex,
+          value: (_inputSuggestions$nex = inputSuggestions[nextIndex]) === null || _inputSuggestions$nex === void 0 ? void 0 : _inputSuggestions$nex.value
+        });
+        break;
+
+      default:
+        break;
+    }
+  };
+
   (0, _react.useEffect)(function () {
     var temp = {};
     var maxBoxId = 0;
     inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.inputs.forEach(function (attrId) {
       if (!dataInputs[attrId].box) return;
-      Object.entries(dataInputs[attrId].box).forEach(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            boxId = _ref3[0],
-            value = _ref3[1];
+      Object.entries(dataInputs[attrId].box).forEach(function (_ref5) {
+        var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+            boxId = _ref6[0],
+            value = _ref6[1];
 
         if (boxId > maxBoxId) maxBoxId = boxId;
         if (!temp[boxId]) temp[boxId] = {};
@@ -98,28 +370,80 @@ var TagAndInput = function TagAndInput(_ref) {
   (0, _react.useEffect)(function () {
     onChange && onChange(boxOnboardingList);
   }, [boxOnboardingList]);
+  (0, _react.useEffect)(function () {
+    var currentDescriptionUpdate = Array.isArray(updatedDescriptions) ? updatedDescriptions.find(function (desc) {
+      return (desc === null || desc === void 0 ? void 0 : desc.attributeId) === inputId;
+    }) : null;
+    var currentDatasheetUpdate = Array.isArray(updatedDatasheets) ? updatedDatasheets.find(function (data) {
+      return (data === null || data === void 0 ? void 0 : data.attributeId) === inputId;
+    }) : null;
+    var calculatedIsAiGenerated = aiGenerated;
+
+    if (currentDescriptionUpdate) {
+      calculatedIsAiGenerated = currentDescriptionUpdate.aiSuggestionAccepted;
+    } else if (currentDatasheetUpdate) {
+      calculatedIsAiGenerated = currentDatasheetUpdate.aiSuggestionAccepted;
+    }
+
+    setInputsGeneratedWithAi(function (prev) {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, "".concat(inputId, "-").concat(inputType, "-").concat(version), {
+        inputType: inputType,
+        inputId: inputId,
+        version: version,
+        isAiGenerated: !!calculatedIsAiGenerated,
+        label: label
+      }));
+    });
+  }, [updatedDescriptions, updatedDatasheets, aiGenerated, inputId]);
+  (0, _react.useEffect)(function () {
+    var _inputsGeneratedWithA;
+
+    setIsAiGenerated(!!((_inputsGeneratedWithA = inputsGeneratedWithAi["".concat(inputId, "-").concat(inputType, "-").concat(version)]) !== null && _inputsGeneratedWithA !== void 0 && _inputsGeneratedWithA.isAiGenerated));
+  }, [inputsGeneratedWithAi]);
+  (0, _react.useEffect)(function () {
+    setInputsUsingAi(function (prev) {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, "".concat(inputId, "-").concat(inputType, "-").concat(version), {
+        using: isAiActive
+      }));
+    });
+  }, [isAiActive]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
     children: [(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "title-container",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
-        text: label,
-        headerType: "input-name-header",
-        color: color
-      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: description
-          })
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: _infoIcon.default,
-          alt: "info icon",
-          className: 'icon_information'
-        }),
-        classNameTooltip: "container-tooltip"
-      })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "titles",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+          text: label,
+          headerType: "input-name-header",
+          color: color
+        }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: description
+            })
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _infoIcon.default,
+            alt: "info icon",
+            className: 'icon_information'
+          }),
+          classNameTooltip: "container-tooltip"
+        })]
+      }), isCreators && isAiGenerated ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "ai-generated",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _iaIcon.default
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Atributo generado con IA"
+        })]
+      }) : null]
+    }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "error-message-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: errorMessage
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GeneralInput, {
       inputId: inputId,
       inputType: inputType,
@@ -143,7 +467,20 @@ var TagAndInput = function TagAndInput(_ref) {
       description: description,
       inputOnChange: inputOnChange,
       onKeyDown: onKeyDown,
-      auditClass: auditClass,
+      auditClass: auditClass // AI Generation
+      ,
+      hasAiGeneration: isCreators,
+      isBenefitInput: isBenefitInput,
+      isAiGenerationLoading: isAiGenerationLoading,
+      isAiRegenerationLoading: isAiRegenerationLoading,
+      isAiActive: isAiActive,
+      setIsAiActive: setIsAiActive,
+      isAiAvailable: isAiAvailable,
+      aiGenerated: aiGenerated // aiSuggestions={aiSuggestions}
+      ,
+      handlerAiGeneration: handlerAiGeneration,
+      handlerRegenerateSuggestions: handlerRegenerateSuggestions,
+      handleChangeSuggestion: handleChangeSuggestion,
       onChange: function onChange(e) {
         setBoxOnboardingList(function (prev) {
           return prev.map(function (box, i) {
@@ -151,7 +488,7 @@ var TagAndInput = function TagAndInput(_ref) {
               return box;
             }
 
-            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, box), {}, {
+            return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, box), {}, {
               value: e
             });
           });

package/dist/components/molecules/TagAndInput/styles.js

@@ -15,10 +15,10 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    gap: .5rem;\n\n    .icon_information{\n      width: 1.35rem;\n      height: 1.35rem;\n      filter: brightness(.35);\n    }\n\n    .tooltip {\n      display: none;\n      position: absolute;\n      background-color: ", ";\n      color: ", ";\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      left: 0;\n      top: 0;\n      height: fit-content;\n      transition: display 2s;\n    }\n\n    &:hover {\n      .tooltip {\n        display: block;\n      }\n    }\n  }\n\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n  & + * {\n    margin-top: ", "px;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    font-family: ", ";\n\n    .titles{\n      display: flex;\n      gap: .5rem;\n      align-items: center;\n    }\n\n      .icon_information{\n        width: 1.35rem;\n        height: 1.35rem;\n        filter: brightness(.35);\n        margin-top: 10px;\n      }\n\n      .tooltip {\n        display: none;\n        position: absolute;\n        background-color: ", ";\n        color: ", ";\n        font-size: 14px;\n        line-height: 19px;\n        left: 0;\n        top: 0;\n        height: fit-content;\n        transition: display 2s;\n      }\n\n    .ai-generated{\n\n      display: flex;\n      align-items: items-center;\n      gap: .5rem;\n      font-size: 11px;\n      background-color: rgba(224, 57, 167, 0.025);\n      border: 1px solid rgba(224, 57, 167, 0.1);\n      padding: .25rem .5rem;\n      border-radius: 5px;\n      margin-left: 0.5rem;\n      margin-top: 7px;\n      cursor: default;\n\n      > img {\n        width: 0.75rem;\n        height: 0.75rem;\n      }\n\n    }\n\n    &:hover {\n      .tooltip {\n        display: block;\n      }\n    }\n\n\n  }\n\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n  & + * {\n    margin-top: ", "px;\n  }\n\n  .error-message-container {\n\n    font-family: \"Raleway\";\n    font-size: 12px;\n    font-weight: 500;\n    color: #E1251B;\n    margin-bottom: 8px;\n    margin-top: 0;\n\n  }\n"])), _variables.FontFamily.Raleway, _variables.GlobalColors.white, function (_ref) {
   var color = _ref.color;
   return color ? color : _variables.GlobalColors.s5;
-}, _variables.FontFamily.Raleway, function (_ref2) {
+}, function (_ref2) {
   var inputType = _ref2.inputType;
   return inputType !== "textarea" ? 4 : 15;
 }, function (_ref3) {