contentoh-components-library 21.5.98 → 21.5.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/components/atoms/GeneralButton/styles.js +1 -1
  2. package/dist/components/atoms/GeneralInput/index.js +54 -249
  3. package/dist/components/atoms/GeneralInput/styles.js +3 -7
  4. package/dist/components/atoms/InputFormatter/index.js +68 -223
  5. package/dist/components/atoms/InputFormatter/styles.js +4 -20
  6. package/dist/components/molecules/StatusAsignationInfo/index.js +1 -11
  7. package/dist/components/molecules/TabsMenu/index.js +1 -13
  8. package/dist/components/molecules/TagAndInput/index.js +24 -364
  9. package/dist/components/molecules/TagAndInput/styles.js +2 -2
  10. package/dist/components/organisms/FullProductNameHeader/index.js +22 -6
  11. package/dist/components/organisms/InputGroup/index.js +18 -22
  12. package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +337 -150
  13. package/dist/components/pages/ProviderProductEdition/context/provider-product-edition.context.js +15 -15
  14. package/dist/components/pages/ProviderProductEdition/index.js +377 -413
  15. package/dist/components/pages/ProviderProductEdition/utils.js +0 -1
  16. package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +211 -125
  17. package/dist/components/pages/RetailerProductEdition/index.js +2236 -1738
  18. package/dist/components/pages/RetailerProductEdition/styles.js +2 -4
  19. package/dist/components/pages/RetailerProductEdition/utils.js +2 -251
  20. package/package.json +2 -4
  21. package/src/components/atoms/GeneralButton/styles.js +0 -4
  22. package/src/components/atoms/GeneralInput/index.js +60 -241
  23. package/src/components/atoms/GeneralInput/styles.js +0 -81
  24. package/src/components/atoms/InputFormatter/index.js +51 -200
  25. package/src/components/atoms/InputFormatter/styles.js +0 -284
  26. package/src/components/molecules/StatusAsignationInfo/index.js +1 -9
  27. package/src/components/molecules/TabsMenu/index.js +0 -12
  28. package/src/components/molecules/TagAndInput/index.js +21 -294
  29. package/src/components/molecules/TagAndInput/styles.js +17 -59
  30. package/src/components/organisms/FullProductNameHeader/index.js +28 -4
  31. package/src/components/organisms/FullTabsMenu/index.js +1 -1
  32. package/src/components/organisms/InputGroup/index.js +4 -12
  33. package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +202 -174
  34. package/src/components/pages/ProviderProductEdition/context/provider-product-edition.context.jsx +14 -14
  35. package/src/components/pages/ProviderProductEdition/index.js +418 -486
  36. package/src/components/pages/ProviderProductEdition/utils.js +2 -2
  37. package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +243 -136
  38. package/src/components/pages/RetailerProductEdition/index.js +1717 -1563
  39. package/src/components/pages/RetailerProductEdition/styles.js +2 -67
  40. package/src/components/pages/RetailerProductEdition/utils.js +0 -240
  41. package/src/ai/utils/compare-strings.js +0 -45
  42. package/src/assets/images/Icons/arrow.png +0 -0
  43. package/src/assets/images/Icons/cancel.png +0 -0
  44. package/src/assets/images/Icons/ia-icon.png +0 -0
  45. package/src/assets/images/Icons/loading.svg +0 -5
  46. package/src/assets/images/Icons/reload.png +0 -0
  47. package/src/components/atoms/RetailerSelector/RetailerSelector.stories.js +0 -10
  48. package/src/components/atoms/RetailerSelector/index.js +0 -3
  49. package/src/components/atoms/RetailerSelector/styles.js +0 -0
  50. package/src/components/organisms/ChangeStatusModal/index.jsx +0 -488
  51. package/src/components/organisms/ChangeStatusModal/styles.js +0 -333
  52. package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx +0 -575
  53. package/src/components/pages/RetailerProductEdition/context/provider-product-edition.reducer.js +0 -62
  54. package/src/components/pages/RetailerProductEdition/context/reducers/active-state.js +0 -344
  55. package/src/components/pages/RetailerProductEdition/context/reducers/inputs.js +0 -155
  56. package/src/components/pages/RetailerProductEdition/context/reducers/product.js +0 -114
  57. package/src/components/pages/RetailerProductEdition/context/reducers/system.js +0 -60
  58. package/src/components/pages/RetailerProductEdition/index_old.js +0 -1979
  59. package/src/components/pages/RetailerProductEdition/stories/Auditor.stories.js +0 -101
  60. package/src/components/pages/RetailerProductEdition/stories/ImageEditor.stories.js +0 -115
  61. package/src/components/pages/RetailerProductEdition/stories/TextEditor.stories.js +0 -174
  62. package/src/contexts/AiProductEdition.jsx +0 -347
  63. package/src/global-files/statusDictionary.js +0 -103
@@ -47,7 +47,7 @@ var _variables = require("../../../global-files/variables");
47
47
 
48
48
  var _templateObject;
49
49
 
50
- 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) {
50
+ 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) {
51
51
  return props.buttonFont;
52
52
  }, _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);
53
53
 
@@ -17,27 +17,9 @@ var _InputFormatter = require("../InputFormatter");
17
17
 
18
18
  var _CheckBox = require("../CheckBox");
19
19
 
20
- var _iaIcon = _interopRequireDefault(require("../../../assets/images/Icons/ia-icon.png"));
21
-
22
- var _loading = _interopRequireDefault(require("../../../assets/images/Icons/loading.svg"));
23
-
24
- var _arrow = _interopRequireDefault(require("../../../assets/images/Icons/arrow.png"));
25
-
26
- var _cancel = _interopRequireDefault(require("../../../assets/images/Icons/cancel.png"));
27
-
28
- var _reload = _interopRequireDefault(require("../../../assets/images/Icons/reload.png"));
29
-
30
- var _AiProductEdition = require("../../../contexts/AiProductEdition");
31
-
32
- var _styles2 = require("../InputFormatter/styles");
33
-
34
- var _compareStrings = require("../../../ai/utils/compare-strings");
35
-
36
20
  var _jsxRuntime = require("react/jsx-runtime");
37
21
 
38
22
  var GeneralInput = function GeneralInput(_ref) {
39
- var _currentSuggestion$in, _currentSuggestion$in2, _currentSuggestion$in3, _suggestions$inputId2, _currentSuggestion$in4, _suggestions$inputId3;
40
-
41
23
  var inputType = _ref.inputType,
42
24
  inputId = _ref.inputId,
43
25
  inputName = _ref.inputName,
@@ -62,35 +44,7 @@ var GeneralInput = function GeneralInput(_ref) {
62
44
  inputOnChange = _ref.inputOnChange,
63
45
  disabled = _ref.disabled,
64
46
  onKeyDown = _ref.onKeyDown,
65
- auditClass = _ref.auditClass,
66
- _ref$hasAiGeneration = _ref.hasAiGeneration,
67
- hasAiGeneration = _ref$hasAiGeneration === void 0 ? false : _ref$hasAiGeneration,
68
- _ref$isBenefitInput = _ref.isBenefitInput,
69
- isBenefitInput = _ref$isBenefitInput === void 0 ? false : _ref$isBenefitInput,
70
- _ref$isAiGenerationLo = _ref.isAiGenerationLoading,
71
- isAiGenerationLoading = _ref$isAiGenerationLo === void 0 ? false : _ref$isAiGenerationLo,
72
- _ref$isAiRegeneration = _ref.isAiRegenerationLoading,
73
- isAiRegenerationLoading = _ref$isAiRegeneration === void 0 ? false : _ref$isAiRegeneration,
74
- _ref$isAiActive = _ref.isAiActive,
75
- isAiActive = _ref$isAiActive === void 0 ? false : _ref$isAiActive,
76
- _ref$isAiAvailable = _ref.isAiAvailable,
77
- isAiAvailable = _ref$isAiAvailable === void 0 ? false : _ref$isAiAvailable,
78
- _ref$aiGenerated = _ref.aiGenerated,
79
- aiGenerated = _ref$aiGenerated === void 0 ? false : _ref$aiGenerated,
80
- _ref$setIsAiActive = _ref.setIsAiActive,
81
- setIsAiActive = _ref$setIsAiActive === void 0 ? function () {} : _ref$setIsAiActive,
82
- _ref$handlerAiGenerat = _ref.handlerAiGeneration,
83
- _handlerAiGeneration = _ref$handlerAiGenerat === void 0 ? function () {} : _ref$handlerAiGenerat,
84
- _ref$handlerRegenerat = _ref.handlerRegenerateSuggestions,
85
- _handlerRegenerateSuggestions = _ref$handlerRegenerat === void 0 ? function () {} : _ref$handlerRegenerat,
86
- _ref$handleChangeSugg = _ref.handleChangeSuggestion,
87
- handleChangeSuggestion = _ref$handleChangeSugg === void 0 ? function () {} : _ref$handleChangeSugg;
88
-
89
- var _useAiProductEdition = (0, _AiProductEdition.useAiProductEdition)(),
90
- isCreators = _useAiProductEdition.isCreators,
91
- suggestions = _useAiProductEdition.suggestions,
92
- currentSuggestion = _useAiProductEdition.currentSuggestion,
93
- setCurrentSuggestionValue = _useAiProductEdition.setCurrentSuggestionValue;
47
+ auditClass = _ref.auditClass;
94
48
 
95
49
  var _useState = (0, _react.useState)({
96
50
  value: inputValue
@@ -104,27 +58,28 @@ var GeneralInput = function GeneralInput(_ref) {
104
58
  requiredEmpty = _useState4[0],
105
59
  setRequiredEmpty = _useState4[1];
106
60
 
107
- var _useState5 = (0, _react.useState)(false),
108
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
109
- aiSuggestionAccepted = _useState6[0],
110
- setAiSuggestionAccepted = _useState6[1];
111
-
112
- var _useState7 = (0, _react.useState)(inputValue),
113
- _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
114
- valueAccepted = _useState8[0],
115
- setValueAccepted = _useState8[1];
61
+ var onHandleChange = function onHandleChange(evt) {
62
+ if (validateInput) {
63
+ setTextValue({
64
+ value: validateInput(evt, position, inputsArray)
65
+ });
66
+ } else if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
67
+ var generalValue;
116
68
 
117
- var updateParentData = function updateParentData(generalValue, isAiAccepted) {
118
- var newBaseValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
119
- setTextValue({
120
- value: generalValue
121
- });
122
- var baseToCompare = newBaseValue !== null ? newBaseValue : valueAccepted;
123
- var similarity = (0, _compareStrings.getTextSimilarityPercentage)(baseToCompare, generalValue);
124
- var generatedWithAi = (isAiAccepted || aiGenerated) && similarity >= 50;
69
+ if ((optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0) {
70
+ var valueSelected = evt.target.value;
71
+ generalValue = valueSelected;
72
+ setTextValue({
73
+ value: generalValue
74
+ });
75
+ } else {
76
+ generalValue = inputType === "checkbox" ? evt.target.checked : evt.target.value;
77
+ setTextValue({
78
+ value: generalValue
79
+ });
80
+ }
125
81
 
126
- if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
127
- var dataSave = (updatedDatasheets === null || updatedDatasheets === void 0 ? void 0 : updatedDatasheets.slice()) || [];
82
+ var dataSave = updatedDatasheets === null || updatedDatasheets === void 0 ? void 0 : updatedDatasheets.slice();
128
83
 
129
84
  if ((dataSave === null || dataSave === void 0 ? void 0 : dataSave.length) > 0) {
130
85
  var index = dataSave.findIndex(function (e) {
@@ -132,52 +87,25 @@ var GeneralInput = function GeneralInput(_ref) {
132
87
  });
133
88
 
134
89
  if (index !== -1) {
135
- if (generalValue !== inputValue) {
136
- dataSave[index].value = generalValue;
137
- dataSave[index].aiSuggestionAccepted = generatedWithAi;
138
- } else {
139
- dataSave.splice(index, 1);
140
- }
90
+ if (generalValue !== inputValue) dataSave[index].value = generalValue;else dataSave.splice(index, 1);
141
91
  } else {
142
- if (generalValue !== inputValue) {
143
- dataSave.push({
144
- articleId: articleId,
145
- attributeId: inputId,
146
- value: generalValue,
147
- aiSuggestionAccepted: generatedWithAi
148
- });
149
- }
92
+ dataSave.push({
93
+ articleId: articleId,
94
+ attributeId: inputId,
95
+ value: generalValue
96
+ });
150
97
  }
151
98
  } else {
152
99
  if (generalValue !== inputValue) {
153
100
  dataSave.push({
154
101
  articleId: articleId,
155
102
  attributeId: inputId,
156
- value: generalValue,
157
- aiSuggestionAccepted: generatedWithAi
103
+ value: generalValue
158
104
  });
159
105
  }
160
106
  }
161
107
 
162
108
  setUpdatedDatasheets(dataSave);
163
- }
164
- };
165
-
166
- var onHandleChange = function onHandleChange(evt) {
167
- if (validateInput) {
168
- setTextValue({
169
- value: validateInput(evt, position, inputsArray)
170
- });
171
- } else if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
172
- var generalValue;
173
-
174
- if ((optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0) {
175
- generalValue = evt.target.value;
176
- } else {
177
- generalValue = inputType === "checkbox" ? evt.target.checked : evt.target.value;
178
- }
179
-
180
- updateParentData(generalValue, aiSuggestionAccepted);
181
109
  } else {
182
110
  setTextValue({
183
111
  value: evt.target.value
@@ -186,53 +114,21 @@ var GeneralInput = function GeneralInput(_ref) {
186
114
  }
187
115
  };
188
116
 
189
- (0, _react.useEffect)(function () {
190
- var _suggestions$inputId;
191
-
192
- if (!isCreators) return;
193
- if (Object.keys(suggestions).length === 0) return;
194
- if (currentSuggestion !== null && currentSuggestion !== void 0 && currentSuggestion[inputId]) return;
195
- var firstSuggestion = suggestions === null || suggestions === void 0 ? void 0 : (_suggestions$inputId = suggestions[inputId]) === null || _suggestions$inputId === void 0 ? void 0 : _suggestions$inputId[0];
196
- if (!firstSuggestion) return;
197
- setCurrentSuggestionValue({
198
- inputId: inputId,
199
- index: 0,
200
- value: firstSuggestion === null || firstSuggestion === void 0 ? void 0 : firstSuggestion.value
201
- });
202
- }, [suggestions]);
203
- (0, _react.useEffect)(function () {
204
- if (!isAiActive || !isCreators) return;
205
- setAiSuggestionAccepted(false);
206
- }, [isAiActive]);
207
- (0, _react.useEffect)(function () {
208
- if (!isCreators) return;
209
-
210
- if (!isAiActive && !aiSuggestionAccepted) {
211
- setTextValue({
212
- value: valueAccepted
213
- });
214
- }
215
- }, [suggestions, isAiActive]);
216
117
  (0, _react.useEffect)(function () {
217
118
  var _textValue$value;
218
119
 
219
120
  setRequiredEmpty(isRequired && (((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0 || textValue.value === undefined));
220
- }, [textValue]); // const numberInputOnWheelPreventChange = (e) => {
221
- // // Prevent the input value change
222
- // e.target.blur();
223
- // // Prevent the page/container scrolling
224
- // e.stopPropagation();
225
- // // Refocus immediately, on the next tick (after the current function is done)
226
- // setTimeout(() => e.target.focus(), 0);
227
- // };
228
- //AI Generation
121
+ }, [textValue]);
122
+
123
+ var numberInputOnWheelPreventChange = function numberInputOnWheelPreventChange(e) {
124
+ // Prevent the input value change
125
+ e.target.blur(); // Prevent the page/container scrolling
126
+
127
+ e.stopPropagation(); // Refocus immediately, on the next tick (after the current function is done)
229
128
 
230
- var handleAcceptSuggestion = function handleAcceptSuggestion(suggestionValue) {
231
- if (!suggestionValue || !isCreators) return;
232
- setValueAccepted(suggestionValue);
233
- setAiSuggestionAccepted(true);
234
- setIsAiActive(false);
235
- updateParentData(suggestionValue, true, suggestionValue);
129
+ setTimeout(function () {
130
+ return e.target.focus();
131
+ }, 0);
236
132
  };
237
133
 
238
134
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
@@ -261,94 +157,21 @@ var GeneralInput = function GeneralInput(_ref) {
261
157
  },
262
158
  defaultChecked: textValue.value === "true" ? true : false,
263
159
  disabled: disabled
264
- }) : inputType !== "textarea" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
265
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.InputContainer, {
266
- className: hasAiGeneration ? "ai-generation" : "",
267
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
268
- type: inputType,
269
- disabled: disabled,
270
- id: inputId,
271
- size: inputSize,
272
- className: "general-input ".concat(isAiActive && isBenefitInput && "ia-input"),
273
- placeholder: inputPlaceholder,
274
- value: isAiActive ? currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in = currentSuggestion[inputId]) === null || _currentSuggestion$in === void 0 ? void 0 : _currentSuggestion$in.value : textValue.value,
275
- onInput: function onInput(e) {
276
- return onHandleChange(e);
277
- },
278
- maxLength: maxChar,
279
- required: isRequired,
280
- onKeyDown: onKeyDown // onWheel={numberInputOnWheelPreventChange}
281
-
282
- }), hasAiGeneration && isBenefitInput && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
283
- className: "icon_container ".concat(isAiAvailable ? "ai-available" : '', " ").concat(isAiActive ? 'ai-active' : ''),
284
- title: !isAiAvailable ? 'Debes de completar ficha técnica e imágenes para desbloquear la generación con IA' : '',
285
- onClick: function onClick() {
286
- _handlerAiGeneration({
287
- type: "attribute"
288
- });
289
- },
290
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
291
- className: "".concat(isAiGenerationLoading ? 'loading' : ''),
292
- src: isAiGenerationLoading ? _loading.default : isAiActive ? _cancel.default : _iaIcon.default
293
- })
294
- })]
295
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.BottomContainer, {
296
- className: isAiActive ? "with-ai" : "",
297
- children: isAiActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
298
- className: "ai-options",
299
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.OptionsContainer, {
300
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
301
- className: "arrow ".concat((currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in2 = currentSuggestion[inputId]) === null || _currentSuggestion$in2 === void 0 ? void 0 : _currentSuggestion$in2.index) === 0 && "disabled"),
302
- onClick: function onClick() {
303
- handleChangeSuggestion({
304
- action: "prev"
305
- });
306
- },
307
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
308
- src: _arrow.default,
309
- alt: ""
310
- })
311
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
312
- children: [(currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in3 = currentSuggestion[inputId]) === null || _currentSuggestion$in3 === void 0 ? void 0 : _currentSuggestion$in3.index) + 1 || 1, "/", suggestions === null || suggestions === void 0 ? void 0 : (_suggestions$inputId2 = suggestions[inputId]) === null || _suggestions$inputId2 === void 0 ? void 0 : _suggestions$inputId2.length]
313
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
314
- className: "arrow right ".concat((currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in4 = currentSuggestion[inputId]) === null || _currentSuggestion$in4 === void 0 ? void 0 : _currentSuggestion$in4.index) === (suggestions === null || suggestions === void 0 ? void 0 : (_suggestions$inputId3 = suggestions[inputId]) === null || _suggestions$inputId3 === void 0 ? void 0 : _suggestions$inputId3.length) - 1 && "disabled"),
315
- onClick: function onClick() {},
316
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
317
- onClick: function onClick() {
318
- handleChangeSuggestion({
319
- action: "next"
320
- });
321
- },
322
- src: _arrow.default,
323
- alt: "ai icon"
324
- })
325
- })]
326
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.ButtonsContainer, {
327
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
328
- className: "reload-suggestions ".concat(isAiRegenerationLoading && "loading"),
329
- onClick: function onClick() {
330
- _handlerRegenerateSuggestions({
331
- type: "attribute"
332
- });
333
- },
334
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
335
- className: "",
336
- src: isAiRegenerationLoading ? _loading.default : _reload.default
337
- })
338
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
339
- className: "accept-suggestion",
340
- onClick: function onClick() {
341
- var _currentSuggestion$in5;
342
-
343
- handleAcceptSuggestion(currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in5 = currentSuggestion[inputId]) === null || _currentSuggestion$in5 === void 0 ? void 0 : _currentSuggestion$in5.value);
344
- },
345
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
346
- children: "Aceptar sugerencia"
347
- })
348
- })]
349
- })]
350
- })
351
- })]
160
+ }) : inputType !== "textarea" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
161
+ type: inputType,
162
+ disabled: disabled,
163
+ id: inputId,
164
+ size: inputSize,
165
+ className: "general-input",
166
+ placeholder: inputPlaceholder,
167
+ value: textValue.value,
168
+ onInput: function onInput(e) {
169
+ return onHandleChange(e);
170
+ },
171
+ maxLength: maxChar,
172
+ required: isRequired,
173
+ onKeyDown: onKeyDown,
174
+ onWheel: numberInputOnWheelPreventChange
352
175
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
353
176
  name: inputName,
354
177
  inputId: inputId,
@@ -360,25 +183,7 @@ var GeneralInput = function GeneralInput(_ref) {
360
183
  setUpdatedDescriptions: setUpdatedDescriptions,
361
184
  maxChar: maxChar,
362
185
  isRequired: isRequired,
363
- disabled: disabled,
364
- hasAiGeneration: hasAiGeneration && inputId != 'commentary-box',
365
- isAiAvailable: isAiAvailable,
366
- aiGenerated: aiGenerated,
367
- handlerAiGeneration: function handlerAiGeneration() {
368
- _handlerAiGeneration({
369
- type: "description"
370
- });
371
- },
372
- handlerRegenerateSuggestions: function handlerRegenerateSuggestions() {
373
- _handlerRegenerateSuggestions({
374
- type: "description"
375
- });
376
- },
377
- handleChangeSuggestion: handleChangeSuggestion,
378
- isAiGenerationLoading: isAiGenerationLoading,
379
- isAiRegenerationLoading: isAiRegenerationLoading,
380
- isAiActive: isAiActive,
381
- setIsAiActive: setIsAiActive
186
+ disabled: disabled
382
187
  })
383
188
  });
384
189
  };
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.InputContainer = exports.Container = void 0;
8
+ exports.Container = void 0;
9
9
 
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
11
 
@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
 
14
14
  var _variables = require("../../../global-files/variables");
15
15
 
16
- var _templateObject, _templateObject2;
16
+ var _templateObject;
17
17
 
18
18
  var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n\n > div {\n label {\n &:before {\n outline: 1px solid ", ";\n }\n }\n }\n\n input,\n textarea {\n width: 100%;\n border: 1px solid\n ", ";\n\n font-family: ", ";\n color: ", ";\n font-weight: normal;\n font-size: 12px;\n line-height: 15px;\n padding: 10px;\n outline: none;\n border-radius: 5px;\n resize: none;\n\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n select {\n background: #fafafa;\n outline: none;\n border: 1px solid\n ", ";\n width: 100%;\n cursor: pointer;\n font-family: ", ";\n color: ", ";\n font-size: 12px;\n line-height: 21px;\n padding: 10px;\n border-right: 2px solid #e33aa9;\n\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n p {\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n &.audit-class {\n input,\n .quill {\n border: 1px solid #8a6caa;\n background-color: #ededfc;\n }\n }\n\n .btnReviewState {\n display: \"flex\";\n flex-direction: \"column\";\n border: 1px solid lightgray;\n border-radius: 3px;\n z-index: 1000;\n /* position: absolute; */\n }\n\n .btnReviewState button {\n border: none;\n background: white;\n border-radius: 3px;\n }\n .btnReviewState button:hover {\n background: lightgray;\n }\n"])), function (_ref) {
19
19
  var isRequired = _ref.isRequired;
@@ -26,8 +26,4 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
26
26
  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
27
27
  }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray);
28
28
 
29
- exports.Container = Container;
30
-
31
- var InputContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n &.ai-generation {\n position: relative;\n\n cursor: pointer;\n\n .ia-input {\n padding-right: 2.5rem;\n }\n\n .icon_container {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n padding: 4px;\n\n border-radius: 50%;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n background: linear-gradient(\n 120deg,\n #ffffff 10%,\n #ffe0f4 50%,\n #ffffff 90%\n );\n background-size: 200% 200%;\n\n animation: ai-shimmer 3s ease-in-out infinite alternate;\n z-index: -1;\n }\n\n &.ai-available::before{\n\n background: gray;\n background-size: 200% 200%;\n\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n position: relative;\n z-index: 2;\n }\n\n img.loading {\n width: 20px;\n height: 20px;\n }\n\n }\n }\n\n @keyframes ai-shimmer {\n 0% {\n background-position: 0% 50%;\n }\n 100% {\n background-position: 100% 50%;\n }\n }\n\n"])));
32
-
33
- exports.InputContainer = InputContainer;
29
+ exports.Container = Container;