contentoh-components-library 21.5.85 → 21.5.87

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

@@ -47,7 +47,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-pink-button {\n    background-color: #E33AA9;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.buttonFont;
 }, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.color_gray, _saveIconHover.default, _variables.GlobalColors.color_pink, _variables.GlobalColors.color_pink, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.color_purple, _variables.GlobalColors.color_purple, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
 

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

@@ -117,13 +117,18 @@ var TagAndInput = function TagAndInput(_ref) {
       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;
+      var type, currentSuggestions, aiSuggestions, errorMsg;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -158,8 +163,9 @@ var TagAndInput = function TagAndInput(_ref) {
               return _context.abrupt("return", setIsAiActive(true));
 
             case 9:
+              setErrorMessage("");
               setIsAiGenerationLoading(true);
-              _context.next = 12;
+              _context.next = 13;
               return generateProductSuggestions({
                 inputName: label,
                 currentValue: value,
@@ -173,26 +179,38 @@ var TagAndInput = function TagAndInput(_ref) {
                 attributeId: isBenefitInput ? inputId : null
               });
 
-            case 12:
+            case 13:
               aiSuggestions = _context.sent;
 
               if (!(!aiSuggestions && aiSuggestions.length === 0)) {
-                _context.next = 17;
+                _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: No se recibieron sugerencias de IA");
+              console.log('Error: ', aiSuggestions.error);
+              setErrorMessage(aiSuggestions.error);
               setIsAiGenerationLoading(false);
               return _context.abrupt("return");
 
-            case 17:
+            case 24:
               setSuggestions(function (prev) {
                 return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, inputId, aiSuggestions));
               });
               setIsAiActive(true);
               setIsAiGenerationLoading(false);
 
-            case 20:
+            case 27:
             case "end":
               return _context.stop();
           }
@@ -208,7 +226,7 @@ var TagAndInput = function TagAndInput(_ref) {
 
   function _handlerRegenerateSuggestions() {
     _handlerRegenerateSuggestions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
-      var _ref3$type, type, currentSuggestions, aiSuggestions;
+      var _ref3$type, type, currentSuggestions, aiSuggestions, errorMsg;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -224,9 +242,10 @@ var TagAndInput = function TagAndInput(_ref) {
               return _context2.abrupt("return");
 
             case 3:
+              setErrorMessage("");
               setIsAiRegenerationLoading(true);
               currentSuggestions = suggestions === null || suggestions === void 0 ? void 0 : suggestions[inputId];
-              _context2.next = 7;
+              _context2.next = 8;
               return regenerateProductSuggestions({
                 inputName: label,
                 currentValue: value,
@@ -240,25 +259,42 @@ var TagAndInput = function TagAndInput(_ref) {
                 attributeId: isBenefitInput ? inputId : null
               });
 
-            case 7:
+            case 8:
               aiSuggestions = _context2.sent;
 
               if (!(!aiSuggestions && aiSuggestions.length === 0)) {
-                _context2.next = 12;
+                _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: No se recibieron sugerencias de IA");
+              console.log('Error: ', aiSuggestions.error);
+              setErrorMessage(aiSuggestions.error);
               setIsAiRegenerationLoading(false);
               return _context2.abrupt("return");
 
-            case 12:
+            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 14:
+            case 23:
             case "end":
               return _context2.stop();
           }
@@ -403,6 +439,11 @@ var TagAndInput = function TagAndInput(_ref) {
           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,

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

@@ -15,7 +15,7 @@ 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    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"])), _variables.FontFamily.Raleway, _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;
 }, function (_ref2) {