contentoh-components-library 21.0.76 → 21.0.80

package/dist/components/atoms/GeneralInput/index.js

@@ -37,7 +37,9 @@ var GeneralInput = function GeneralInput(_ref) {
       maxChar = _ref.maxChar,
       isRequired = _ref.isRequired,
       version = _ref.version,
-      required = _ref.required;
+      _ref$optionList = _ref.optionList,
+      optionList = _ref$optionList === void 0 ? [] : _ref$optionList,
+      description = _ref.description;
 
   var _useState = (0, _react.useState)({
     value: inputValue
@@ -91,9 +93,27 @@ var GeneralInput = function GeneralInput(_ref) {
 
     setRequiredEmpty(isRequired && (((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0 || textValue.value === undefined));
   }, [textValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     isRequired: requiredEmpty,
-    children: inputType === "checkbox" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+    children: [(optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      id: "dropdown".concat(inputId) //disabled={!enableInputs}
+      ,
+      onChange: function onChange(e) {
+        return onHandleChange(e);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "",
+        selected: true,
+        disabled: true,
+        children: description
+      }), JSON.parse(optionList || "[]").map(function (element) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          value: element,
+          selected: element === textValue.value ? "selected" : "",
+          children: element
+        }, element);
+      })]
+    }, "dropdownK".concat(inputId)) : inputType === "checkbox" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
       id: inputId,
       onChange: function onChange(e) {
         return onHandleChange(e);
@@ -109,8 +129,8 @@ var GeneralInput = function GeneralInput(_ref) {
       onInput: function onInput(e) {
         return onHandleChange(e);
       },
-      required: isRequired || required,
-      maxLength: maxChar || maxLength
+      maxLength: maxChar,
+      required: isRequired
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
       name: inputName,
       inputId: inputId,
@@ -122,7 +142,9 @@ var GeneralInput = function GeneralInput(_ref) {
       setUpdatedDescriptions: setUpdatedDescriptions,
       maxChar: maxChar,
       isRequired: isRequired
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: description
+    })]
   });
 };
 

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

@@ -15,12 +15,15 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-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: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"])), function (_ref) {
+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: 2px;\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: 11px;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "none";
 }, function (_ref2) {
   var isRequired = _ref2.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, function (_ref3) {
+  var isRequired = _ref3.isRequired;
+  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.s4);
 
 exports.Container = Container;

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n\n    &:last-child {\n      min-width: 50px;\n      text-align: center;\n    }\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n    min-width: 50px;\n    text-align: center;\n  }\n  &.header-and-paragraph {\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p {\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n  position: relative;\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    height: 19px;\n    max-width: 100%;\n    font-weight: 400;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n\n    &:last-child {\n      min-width: 50px;\n      text-align: center;\n    }\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n    min-width: 50px;\n    text-align: center;\n  }\n  &.header-and-paragraph {\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p {\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
   return props.fontFamily;
 }, function (props) {
   return props.color;

package/dist/components/atoms/VerticalSideMenuMainPage/index.js

@@ -37,8 +37,7 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage() {
       trueBar = _useState2[0],
       setTrueBar = _useState2[1];
 
-  var active = function active() {
-    console.log(window.location.href); //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  var active = function active() {//document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {

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

@@ -73,7 +73,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
         inputType: "password",
         inputId: "newPasswordInput",
         label: "Ingrese su nueva contraseña",
-        required: required
+        isRequired: required
       }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: "La contrase\xF1a debe ser minimo de 8 caracteres"
       })]
@@ -118,7 +118,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
         inputType: "password",
         inputId: "confirmPasswordInput",
         label: "Confirme la nueva contraseña",
-        required: required
+        isRequired: required
       }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: "Confirme la contrase\xF1a"
       }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {

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

@@ -62,7 +62,6 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
     !privacyCheck && (valid = false);
 
     if (valid) {
-      console.log(valid);
       nuevoUsuario.password = password;
       sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
       valid && props.setPaso(3);

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

@@ -43,7 +43,8 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
       askToDeleteImages = _ref.askToDeleteImages,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "default-id" : _ref$id,
-      onClickSave = _ref.onClickSave;
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -74,7 +75,7 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
   }, [showAsignationPanel]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: id,
-    children: [["AP", "AC", "RC"].includes(status) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+    children: [showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
       buttonType: "circular-button save-button",
       onClick: onClickSave
     }), imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

@@ -31,13 +31,21 @@ var TagAndInput = function TagAndInput(_ref) {
       inputCols = _ref.inputCols,
       inputRows = _ref.inputRows,
       maxChar = _ref.maxChar,
-      required = _ref.required;
+      required = _ref.required,
+      optionList = _ref.optionList,
+      description = _ref.description;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
-      text: label,
-      headerType: "input-name-header"
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "title-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+        text: label,
+        headerType: "input-name-header"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "tooltip",
+        children: label
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GeneralInput, {
       inputId: inputId,
       inputType: inputType,
@@ -55,7 +63,9 @@ var TagAndInput = function TagAndInput(_ref) {
       inputCols: inputCols,
       inputRows: inputRows,
       maxChar: maxChar,
-      required: required
+      required: required,
+      optionList: optionList,
+      description: description
     })]
   }, "generalTagInput-".concat(inputType));
 };

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

@@ -11,11 +11,19 @@ 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  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n"])), function (_ref) {
-  var inputType = _ref.inputType;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\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 color = _ref.color;
+  return color ? color : _variables.GlobalColors.s5;
+}, _variables.FontFamily.Raleway, function (_ref2) {
+  var inputType = _ref2.inputType;
   return inputType !== "textarea" ? 4 : 15;
+}, function (_ref3) {
+  var inputType = _ref3.inputType;
+  return inputType !== "textarea" ? 0 : 10;
 });
 
 exports.Container = Container;

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

@@ -148,7 +148,7 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
           validateInput: _utils.validateInput,
           inputsArray: inputCodeVerificationAll,
           position: position,
-          maxLength: "1"
+          maxChar: 1
         });
       })
     }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {

package/dist/components/organisms/FullTabsMenu/index.js

@@ -31,7 +31,8 @@ var FullTabsMenu = function FullTabsMenu(_ref) {
       isRetailer = _ref.isRetailer,
       downloadImages = _ref.downloadImages,
       askToDeleteImages = _ref.askToDeleteImages,
-      onClickSave = _ref.onClickSave;
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -53,7 +54,8 @@ var FullTabsMenu = function FullTabsMenu(_ref) {
       isRetailer: isRetailer,
       downloadImages: downloadImages,
       onClickSave: onClickSave,
-      askToDeleteImages: askToDeleteImages
+      askToDeleteImages: askToDeleteImages,
+      showSaveButton: showSaveButton
     })]
   });
 };

package/dist/components/organisms/InputGroup/index.js

@@ -50,7 +50,7 @@ var InputGroup = function InputGroup(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "inputs-container",
       children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10;
+        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12;
 
         return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
           inputId: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.id,
@@ -63,7 +63,9 @@ var InputGroup = function InputGroup(_ref) {
           isRequired: (_dataInputs$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.required,
           updatedDatasheets: updatedDatasheets,
           setUpdatedDatasheets: setUpdatedDatasheets,
-          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999
+          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999,
+          optionList: (_dataInputs$input11 = dataInputs[input]) === null || _dataInputs$input11 === void 0 ? void 0 : _dataInputs$input11.option_list,
+          description: (_dataInputs$input12 = dataInputs[input]) === null || _dataInputs$input12 === void 0 ? void 0 : _dataInputs$input12.description
         }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value) + "-" + ((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
           inputId: input.id,
           index: index,
@@ -77,7 +79,8 @@ var InputGroup = function InputGroup(_ref) {
           setUpdatedDescriptions: setUpdatedDescriptions,
           articleId: articleId,
           version: version,
-          dinamicHeight: dinamicHeight
+          dinamicHeight: dinamicHeight,
+          description: input === null || input === void 0 ? void 0 : input.description
         }, index + "-" + (input === null || input === void 0 ? void 0 : input.value));
       })
     })]

package/dist/components/organisms/InputGroup/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n      width: 100%;\n      gap: 5px;\n\n      .input-container {\n        flex: 1 1 20%;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

package/dist/components/pages/ProviderProductEdition/index.js

@@ -1765,6 +1765,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
           assig: assig,
           setAssignation: setAssignation,
           isRetailer: isRetailer,
+          showSaveButton: ["AP", "AC", "RC"].includes(product.version_status),
           onClickSave: function onClickSave() {
             switch (activeTab) {
               case "Descripción":

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

@@ -36,53 +36,46 @@ RetailerProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1
-    },
-    orderId: 152,
-    status: "ASSIGNED",
-    datasheet_status: "IN_PROGRESS",
+    orderId: 132,
+    id_category: "612",
+    status: "IN_PROGRESS",
+    datasheet_status: "QF",
     prio: "none",
-    version: 3,
+    version: 2,
     description_status: "IN_PROGRESS",
     images_status: "IN_PROGRESS",
+    brand: null,
+    missing: {
+      datasheet: 0,
+      descriptions: 0,
+      images: 0
+    },
     article: {
-      id_article: 343,
-      id_category: "2898",
-      name: "Producto prueba dos ",
-      upc: "2004202212",
-      timestamp: "2022-04-20T17:01:17.000Z",
-      id_user: 28,
-      status: "NULL",
-      active: 1,
-      company_id: 1,
+      category: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
       company_name: "COMPANY DEV",
-      country: "México",
-      id_order: 152,
-      id_datasheet_especialist: 54,
-      id_datasheet_facilitator: 52,
-      id_description_especialist: 54,
-      id_description_facilitator: 52,
-      id_images_especialist: 55,
-      id_images_facilitator: 53,
-      id_auditor: 30,
-      id_recepcionist: null,
-      category: "HALLOWEN|DECORACIÓN E INFLABLES|DECORACIÓN E INFLABLES",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null
+      id_category: "612",
+      id_article: 109490,
+      name: "Collar con dije letra ",
+      timestamp: "2022-05-05T16:45:49.000Z",
+      upc: "123434"
     },
     retailers: [{
-      id: 58,
-      name: "The Home Depot",
-      country: "México",
-      id_region: 1,
-      active: 1
+      id: 2,
+      name: "Walmart Mercancías Generales"
+    }],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1
+    },
+    checked: false,
+    retailersAvailable: [{
+      id: 2,
+      name: "Walmart Mercancías Generales"
     }],
-    country: "México",
-    upc: "2004202212"
+    id_article: 109490,
+    categoryName: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
+    version_status: "IN_PROGRESS"
   },
   location: {
     product: {

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

@@ -1597,6 +1597,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           assig: assig[activeTab],
           setAssignation: setAssignation,
           isRetailer: isRetailer,
+          showSaveButton: true,
           onClickSave: function onClickSave() {
             var _product$services2, _product$services3, _product$services4;
 

package/dist/components/pages/VerificationCodeResetPassword/index.js

@@ -73,7 +73,7 @@ var VerificationCodeResetPassword = function VerificationCodeResetPassword(_ref)
           validateInput: _utils.validateInput,
           inputsArray: inputCodeVerificationAll,
           position: position,
-          maxLength: "1"
+          maxChar: 1
         });
       })
     }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {

package/dist/global-files/data.js

@@ -271,7 +271,6 @@ var getNewStatus = function getNewStatus(statusArray) {
   statusArray.forEach(function (element) {
     return lookupString += element + "/";
   });
-  console.log(lookupString, "productTemp");
   if (lookupString.includes("RF")) return "RF";
   if (lookupString.includes("RA")) return "RA";
   if (lookupString.includes("RP")) return "RP";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.76",
+  "version": "21.0.80",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -10,14 +10,14 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "aws-amplify": "^4.3.21",
     "aws-sdk": "^2.1088.0",
     "axios": "^0.25.0",
     "babel-preset-react-app": "^10.0.1",
     "chart.js": "^3.7.1",
+    "contentoh-components-library": "^21.0.18",
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
-    "contentoh-components-library": "^21.0.18",
-    "aws-amplify": "^4.3.21",
     "js-base64": "^3.7.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -27,7 +27,7 @@
     "react-dropzone": "^12.0.4",
     "react-image-fallback": "^8.0.0",
     "react-quill": "^1.3.5",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
     "styled-components": "^5.3.3",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1"

package/src/components/atoms/GeneralInput/index.js

@@ -21,7 +21,8 @@ export const GeneralInput = ({
   maxChar,
   isRequired,
   version,
-  required,
+  optionList = [],
+  description,
 }) => {
   const [textValue, setTextValue] = useState({
     value: inputValue,
@@ -73,7 +74,27 @@ export const GeneralInput = ({
 
   return (
     <Container isRequired={requiredEmpty}>
-      {inputType === "checkbox" ? (
+      {optionList?.length > 0 ? (
+        <select
+          key={`dropdownK${inputId}`}
+          id={`dropdown${inputId}`}
+          //disabled={!enableInputs}
+          onChange={(e) => onHandleChange(e)}
+        >
+          <option value="" selected disabled>
+            {description}
+          </option>
+          {JSON.parse(optionList || "[]").map((element) => (
+            <option
+              key={element}
+              value={element}
+              selected={element === textValue.value ? "selected" : ""}
+            >
+              {element}
+            </option>
+          ))}
+        </select>
+      ) : inputType === "checkbox" ? (
         <CheckBox
           id={inputId}
           onChange={(e) => onHandleChange(e)}
@@ -88,8 +109,8 @@ export const GeneralInput = ({
           placeholder={inputPlaceholder}
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
-          required={isRequired ||required}
-          maxLength={maxChar ||maxLength}
+          maxLength={maxChar}
+          required={isRequired}
         />
       ) : (
         <InputFormatter
@@ -105,6 +126,7 @@ export const GeneralInput = ({
           isRequired={isRequired}
         />
       )}
+      <p>{description}</p>
     </Container>
   );
 };

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

@@ -32,4 +32,29 @@ export const Container = styled.div`
       border: 1px solid ${GlobalColors.magenta_s2};
     }
   }
+
+  select {
+    background: #fafafa;
+    outline: none;
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+    width: 100%;
+    cursor: pointer;
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    font-size: 12px;
+    line-height: 21px;
+    padding: 10px;
+    border-right: 2px solid #e33aa9;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  p {
+    font-family: ${FontFamily.Raleway};
+    font-size: 11px;
+    color: ${GlobalColors.s4};
+  }
 `;

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

@@ -9,6 +9,7 @@ export const Container = styled.h2`
   line-height: 42px;
   font-feature-settings: "pnum" on, "lnum" on;
   color: ${(props) => props.color};
+  position: relative;
 
   &.with-bold-text {
     span {
@@ -34,8 +35,12 @@ export const Container = styled.h2`
   &.input-name-header {
     font-size: 14px;
     line-height: 19px;
+    height: 19px;
+    max-width: 100%;
     font-weight: 400;
     color: ${({ color }) => (color ? color : GlobalColors.s5)};
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &.date-header {

package/src/components/atoms/VerticalSideMenuMainPage/index.js

@@ -11,7 +11,6 @@ import React, { useState, useEffect, useCallback } from "react";
 export const VerticalSideMenuMainPage = () => {
   const [trueBar, setTrueBar] = useState(false);
   const active = () => {
-    console.log(window.location.href);
     //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
   };
   return (

package/src/components/molecules/LoginPasswordStrength/index.js

@@ -51,7 +51,7 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
-          required={required}
+          isRequired={required}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
@@ -80,7 +80,7 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
-          required={required}
+          isRequired={required}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>

package/src/components/molecules/RegistrationSecondStep/index.js

@@ -21,7 +21,6 @@ export const RegistrationSecondStep = (props) => {
     !termsCheck && (valid = false);
     !privacyCheck && (valid = false);
     if (valid) {
-      console.log(valid)
       nuevoUsuario.password = password;
       sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
       valid && props.setPaso(3);

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -19,6 +19,7 @@ export const StatusAsignationInfo = ({
   askToDeleteImages,
   id = "default-id",
   onClickSave,
+  showSaveButton,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
   const [layout, setLayout] = useState(false);
@@ -39,7 +40,7 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
-      {["AP", "AC", "RC"].includes(status) && (
+      {showSaveButton && (
         <Button
           buttonType={"circular-button save-button"}
           onClick={onClickSave}

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

@@ -21,6 +21,8 @@ export const TagAndInput = ({
   inputRows,
   maxChar,
   required,
+  optionList,
+  description,
 }) => {
   return (
     <Container
@@ -28,7 +30,10 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <ScreenHeader text={label} headerType={"input-name-header"} />
+      <div className="title-container">
+        <ScreenHeader text={label} headerType={"input-name-header"} />
+        <span className="tooltip">{label}</span>
+      </div>
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -47,6 +52,8 @@ export const TagAndInput = ({
         inputRows={inputRows}
         maxChar={maxChar}
         required={required}
+        optionList={optionList}
+        description={description}
       />
     </Container>
   );

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

@@ -1,9 +1,37 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  .title-container {
+    position: relative;
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      background-color: ${GlobalColors.white};
+      color: ${({ color }) => (color ? color : GlobalColors.s5)};
+      font-family: ${FontFamily.Raleway};
+      font-size: 14px;
+      line-height: 19px;
+      left: 0;
+      top: 0;
+      height: fit-content;
+      transition: display 2s;
+    }
+
+    &:hover {
+      .tooltip {
+        display: block;
+      }
+    }
+  }
+
   & > :first-child {
     & + * {
       margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
     }
   }
+  & + * {
+    margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
+  }
 `;

package/src/components/molecules/VerificationCodeResetPasswordLogin/index.js

@@ -38,11 +38,11 @@ export const VerificationCodeResetPasswordLogin = (props) => {
       }
       sessionStorage.setItem("confirmationCode", JSON.stringify(code));
       valid &&
-      !sessionStorage.getItem("resetPasswordProcess") &&
-      props.setPaso(6);
+        !sessionStorage.getItem("resetPasswordProcess") &&
+        props.setPaso(6);
       valid &&
-      sessionStorage.getItem("resetPasswordProcess") &&
-      props.setPaso(8);
+        sessionStorage.getItem("resetPasswordProcess") &&
+        props.setPaso(8);
     }
   };
 
@@ -88,9 +88,9 @@ export const VerificationCodeResetPasswordLogin = (props) => {
       )}
       {!sessionStorage.getItem("email") && (
         <ScreenHeader
-           text={`Ingrese código de verificación enviado a: ${
-             JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
-           }`}
+          text={`Ingrese código de verificación enviado a: ${
+            JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
+          }`}
           headerType={"input-name-header"}
         />
       )}
@@ -103,7 +103,7 @@ export const VerificationCodeResetPasswordLogin = (props) => {
             validateInput={validateInput}
             inputsArray={inputCodeVerificationAll}
             position={position}
-            maxLength="1"
+            maxChar={1}
           />
         ))}
       </div>
@@ -156,7 +156,7 @@ export const VerificationCodeResetPasswordLogin = (props) => {
       />
     </div>,
     <div className="reset-password" key="6">
-       <p onClick={() => props.setPaso(10)}>Regresar...</p> 
+      <p onClick={() => props.setPaso(10)}>Regresar...</p>
     </div>,
   ];
   return (

package/src/components/organisms/FullTabsMenu/index.js

@@ -15,6 +15,7 @@ export const FullTabsMenu = ({
   downloadImages,
   askToDeleteImages,
   onClickSave,
+  showSaveButton,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -36,6 +37,7 @@ export const FullTabsMenu = ({
         downloadImages={downloadImages}
         onClickSave={onClickSave}
         askToDeleteImages={askToDeleteImages}
+        showSaveButton={showSaveButton}
       />
     </Container>
   );

package/src/components/organisms/InputGroup/index.js

@@ -67,6 +67,8 @@ export const InputGroup = ({
                   ? dataInputs[input]?.max_chars
                   : 999
               }
+              optionList={dataInputs[input]?.option_list}
+              description={dataInputs[input]?.description}
             />
           ) : (
             <TagAndInput
@@ -84,6 +86,7 @@ export const InputGroup = ({
               articleId={articleId}
               version={version}
               dinamicHeight={dinamicHeight}
+              description={input?.description}
             />
           )
         )}

package/src/components/organisms/InputGroup/styles.js

@@ -18,14 +18,14 @@ export const Container = styled.div`
     .inputs-container {
       display: flex;
       flex-wrap: wrap;
+      width: 100%;
+      gap: 5px;
 
       .input-container {
         flex: 1 1 20%;
-        margin-right: 10px;
         min-width: 227px;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
       }
     }
   }

package/src/components/pages/ProviderProductEdition/index.js

@@ -1234,6 +1234,7 @@ export const ProviderProductEdition = ({
             assig={assig}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
+            showSaveButton={["AP", "AC", "RC"].includes(product.version_status)}
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":

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

@@ -21,55 +21,50 @@ RetailerProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1,
-    },
-    orderId: 152,
-    status: "ASSIGNED",
-    datasheet_status: "IN_PROGRESS",
+    orderId: 132,
+    id_category: "612",
+    status: "IN_PROGRESS",
+    datasheet_status: "QF",
     prio: "none",
-    version: 3,
+    version: 2,
     description_status: "IN_PROGRESS",
     images_status: "IN_PROGRESS",
+    brand: null,
+    missing: {
+      datasheet: 0,
+      descriptions: 0,
+      images: 0,
+    },
     article: {
-      id_article: 343,
-      id_category: "2898",
-      name: "Producto prueba dos ",
-      upc: "2004202212",
-      timestamp: "2022-04-20T17:01:17.000Z",
-      id_user: 28,
-      status: "NULL",
-      active: 1,
-      company_id: 1,
+      category: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
       company_name: "COMPANY DEV",
-      country: "México",
-      id_order: 152,
-      id_datasheet_especialist: 54,
-      id_datasheet_facilitator: 52,
-      id_description_especialist: 54,
-      id_description_facilitator: 52,
-      id_images_especialist: 55,
-      id_images_facilitator: 53,
-      id_auditor: 30,
-      id_recepcionist: null,
-      category: "HALLOWEN|DECORACIÓN E INFLABLES|DECORACIÓN E INFLABLES",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null,
+      id_category: "612",
+      id_article: 109490,
+      name: "Collar con dije letra ",
+      timestamp: "2022-05-05T16:45:49.000Z",
+      upc: "123434",
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot",
-        country: "México",
-        id_region: 1,
-        active: 1,
+        id: 2,
+        name: "Walmart Mercancías Generales",
+      },
+    ],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    checked: false,
+    retailersAvailable: [
+      {
+        id: 2,
+        name: "Walmart Mercancías Generales",
       },
     ],
-    country: "México",
-    upc: "2004202212",
+    id_article: 109490,
+    categoryName: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
+    version_status: "IN_PROGRESS",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },

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

@@ -1123,6 +1123,7 @@ export const RetailerProductEdition = ({
             assig={assig[activeTab]}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
+            showSaveButton={true}
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":

package/src/components/pages/VerificationCodeResetPassword/index.js

@@ -47,7 +47,7 @@ export const VerificationCodeResetPassword = ({
             validateInput={validateInput}
             inputsArray={inputCodeVerificationAll}
             position={position}
-            maxLength="1"
+            maxChar={1}
           />
         ))}
       </div>

package/src/global-files/data.js

@@ -183,7 +183,6 @@ export const fetchUsers = async (auth) => {
 export const getNewStatus = (statusArray) => {
   let lookupString = "";
   statusArray.forEach((element) => (lookupString += element + "/"));
-  console.log(lookupString, "productTemp");
   if (lookupString.includes("RF")) return "RF";
   if (lookupString.includes("RA")) return "RA";
   if (lookupString.includes("RP")) return "RP";