contentoh-components-library 21.0.78 → 21.0.81

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

@@ -36,7 +36,10 @@ var GeneralInput = function GeneralInput(_ref) {
       setUpdatedDescriptions = _ref.setUpdatedDescriptions,
       maxChar = _ref.maxChar,
       isRequired = _ref.isRequired,
-      version = _ref.version;
+      version = _ref.version,
+      _ref$optionList = _ref.optionList,
+      optionList = _ref$optionList === void 0 ? [] : _ref$optionList,
+      description = _ref.description;
 
   var _useState = (0, _react.useState)({
     value: inputValue
@@ -90,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);
@@ -121,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/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/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/organisms/InputGroup/index.js

@@ -28,7 +28,6 @@ var InputGroup = function InputGroup(_ref) {
       articleId = _ref.articleId,
       version = _ref.version,
       dinamicHeight = _ref.dinamicHeight;
-  console.log(dataInputs, "dataInputs");
 
   var inputTypeValue = function inputTypeValue(type) {
     switch (type) {
@@ -51,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,
@@ -64,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,
@@ -78,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/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/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.78",
+  "version": "21.0.81",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -21,6 +21,8 @@ export const GeneralInput = ({
   maxChar,
   isRequired,
   version,
+  optionList = [],
+  description,
 }) => {
   const [textValue, setTextValue] = useState({
     value: inputValue,
@@ -72,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)}
@@ -104,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/GalleryElement/index.js

@@ -12,7 +12,7 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
-  index,
+  number,
   imageInputs,
   imageType,
   imagePackagingType,
@@ -83,7 +83,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "image_id",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -97,7 +97,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "image_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -111,7 +111,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "packing_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />

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

@@ -40,6 +40,7 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
+      {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (
         <Button
           buttonType={"circular-button save-button"}

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/organisms/InputGroup/index.js

@@ -14,7 +14,6 @@ export const InputGroup = ({
   version,
   dinamicHeight,
 }) => {
-  console.log(dataInputs, "dataInputs");
   const inputTypeValue = (type) => {
     switch (type) {
       case "Booleano":
@@ -68,6 +67,8 @@ export const InputGroup = ({
                   ? dataInputs[input]?.max_chars
                   : 999
               }
+              optionList={dataInputs[input]?.option_list}
+              description={dataInputs[input]?.description}
             />
           ) : (
             <TagAndInput
@@ -85,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

@@ -210,7 +210,7 @@ export const ProviderProductEdition = ({
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: services[2],
+      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
@@ -375,7 +375,8 @@ export const ProviderProductEdition = ({
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
-        index={index}
+        index={index + "-" + image.name}
+        number={index}
         imageType={imageType}
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
@@ -548,6 +549,7 @@ export const ProviderProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
         loadData();
       } catch (error) {
         console.log(error);
@@ -940,23 +942,42 @@ export const ProviderProductEdition = ({
   };
 
   const deleteImages = () => {
-    const data = {
-      articleId: product.id_article,
-      deleteImages: selectedImages,
-    };
-    try {
-      axios.put(
-        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-        data,
-        {
-          headers: { Authorization: token },
-        }
-      );
-      loadData();
-    } catch (err) {
-      console.log(err);
+    setLoading(true);
+    const imagesTemp = images;
+    const { values } = images;
+    const imgsInBack = [];
+
+    selectedImages.forEach((selectedImg) => {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+
+    const imgsLeft = values.filter(
+      (value) => selectedImages.indexOf(value) === -1
+    );
+
+    imagesTemp.values = imgsLeft;
+
+    if (imgsInBack.length > 0) {
+      const data = {
+        articleId: product.article.id_article,
+        deleteImages: selectedImages,
+      };
+      try {
+        axios.put(
+          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+          data,
+          {
+            headers: { Authorization: token },
+          }
+        );
+      } catch (err) {
+        console.log(err);
+      }
     }
+    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
+    loadData();
     setMessage("");
+    setComponentsArray([]);
   };
 
   const askToDeleteImages = () => {
@@ -979,7 +1000,10 @@ export const ProviderProductEdition = ({
           key={"3"}
           buttonType="general-button-default"
           label={"Aceptar"}
-          onClick={() => deleteImages()}
+          onClick={() => {
+            setMessage("");
+            deleteImages();
+          }}
         />,
       ]);
     }

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

@@ -26,26 +26,26 @@ RetailerProductEditionDefault.args = {
       descriptions: 1,
       images: 1,
     },
-    orderId: 152,
-    status: "ASSIGNED",
+    orderId: 233,
+    status: "IN_PROGRESS",
     datasheet_status: "IN_PROGRESS",
     prio: "none",
-    version: 3,
-    description_status: "IN_PROGRESS",
-    images_status: "IN_PROGRESS",
+    version: 2,
+    description_status: "QF",
+    images_status: "QF",
     article: {
-      id_article: 343,
-      id_category: "2898",
-      name: "Producto prueba dos ",
-      upc: "2004202212",
-      timestamp: "2022-04-20T17:01:17.000Z",
+      id_article: 190965,
+      id_category: "697",
+      name: "Shampoo hidratante",
+      upc: "6545345",
+      timestamp: "2022-06-10T15:05:56.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
       company_name: "COMPANY DEV",
       country: "México",
-      id_order: 152,
+      id_order: 233,
       id_datasheet_especialist: 54,
       id_datasheet_facilitator: 52,
       id_description_especialist: 54,
@@ -54,22 +54,30 @@ RetailerProductEditionDefault.args = {
       id_images_facilitator: 53,
       id_auditor: 30,
       id_recepcionist: null,
-      category: "HALLOWEN|DECORACIÓN E INFLABLES|DECORACIÓN E INFLABLES",
+      category:
+        "SALUD Y BELLEZA|CUIDADO DEL CABELLO|SHAMPOOS Y ACONDICIONADORES",
       missingAttributes: null,
       missingDescriptions: null,
       missingImages: null,
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot",
+        id: 4,
+        name: "Walmart Super y Superama",
+        country: "México",
+        id_region: 1,
+        active: 1,
+      },
+      {
+        id: 26,
+        name: "Mercado Libre",
         country: "México",
         id_region: 1,
         active: 1,
       },
     ],
     country: "México",
-    upc: "2004202212",
+    upc: "6545345",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },

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

@@ -167,7 +167,7 @@ export const RetailerProductEdition = ({
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: services[2],
+      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
@@ -181,7 +181,9 @@ export const RetailerProductEdition = ({
 
   const getServices = async () => {
     const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${product?.article?.id_article}&orderId=${product?.article?.id_order}&end=true`
+      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${
+        product?.article?.id_article
+      }&orderId=${product?.article?.id_order || product.orderId}&end=true`
     );
     const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
     setServicesData(parsedResponse);
@@ -357,7 +359,8 @@ export const RetailerProductEdition = ({
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
-        index={index}
+        index={index + "-" + image.name}
+        number={index}
         imageType={imageType}
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
@@ -531,6 +534,7 @@ export const RetailerProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
         loadData();
       } catch (error) {
         console.log(error);
@@ -983,23 +987,42 @@ export const RetailerProductEdition = ({
   };
 
   const deleteImages = () => {
-    const data = {
-      articleId: product.article.id_article,
-      deleteImages: selectedImages,
-    };
-    try {
-      axios.put(
-        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-        data,
-        {
-          headers: { Authorization: token },
-        }
-      );
-      loadData();
-    } catch (err) {
-      console.log(err);
+    setLoading(true);
+    const imagesTemp = images;
+    const { values } = images;
+    const imgsInBack = [];
+
+    selectedImages.forEach((selectedImg) => {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+
+    const imgsLeft = values.filter(
+      (value) => selectedImages.indexOf(value) === -1
+    );
+
+    imagesTemp.values = imgsLeft;
+
+    if (imgsInBack.length > 0) {
+      const data = {
+        articleId: product.article.id_article,
+        deleteImages: selectedImages,
+      };
+      try {
+        axios.put(
+          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+          data,
+          {
+            headers: { Authorization: token },
+          }
+        );
+      } catch (err) {
+        console.log(err);
+      }
     }
+    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
+    loadData();
     setMessage("");
+    setComponentsArray([]);
   };
 
   const askToDeleteImages = () => {
@@ -1022,7 +1045,10 @@ export const RetailerProductEdition = ({
           key={"3"}
           buttonType="general-button-default"
           label={"Aceptar"}
-          onClick={() => deleteImages()}
+          onClick={() => {
+            setMessage("");
+            deleteImages();
+          }}
         />,
       ]);
     }
@@ -1127,13 +1153,13 @@ export const RetailerProductEdition = ({
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
-                  product?.services?.descriptions === 1 && saveDescriptions();
+                  product?.description_status !== "NS" && saveDescriptions();
                   break;
                 case "Ficha técnica":
-                  product?.services?.datasheets === 1 && saveDatasheets();
+                  product?.datasheet_status !== "NS" && saveDatasheets();
                   break;
                 case "Imágenes":
-                  product?.services?.images === 1 && updateImages();
+                  product?.images_status !== "NS" && updateImages();
                   break;
 
                 default:

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";