contentoh-components-library 21.5.36 → 21.5.38

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 (34) hide show
  1. package/dist/components/atoms/FeatureTag/styles.js +1 -1
  2. package/dist/components/atoms/GeneralButton/styles.js +2 -2
  3. package/dist/components/atoms/GeneralInput/index.js +3 -5
  4. package/dist/components/atoms/MetricCard/styles.js +1 -1
  5. package/dist/components/atoms/ScreenHeader/index.js +1 -1
  6. package/dist/components/atoms/SliderToolTip/styles.js +1 -1
  7. package/dist/components/molecules/CustomSelect/styles.js +2 -2
  8. package/dist/components/molecules/StatusAsignationInfo/index.js +3 -1
  9. package/dist/components/molecules/StripeCardForm/paymentForm.js +4 -4
  10. package/dist/components/molecules/StripeCardForm/styles.js +1 -1
  11. package/dist/components/molecules/TagAndInput/index.js +18 -3
  12. package/dist/components/molecules/TagAndInput/styles.js +1 -1
  13. package/dist/components/organisms/Chat/ContentChat/index.js +5 -5
  14. package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +63 -61
  15. package/dist/components/pages/ProviderProductEdition/index.js +3 -0
  16. package/dist/components/pages/ProviderProductEdition/styles.js +1 -1
  17. package/dist/global-files/variables.js +26 -12
  18. package/package.json +1 -1
  19. package/src/components/atoms/FeatureTag/styles.js +1 -1
  20. package/src/components/atoms/GeneralButton/styles.js +6 -5
  21. package/src/components/atoms/GeneralInput/index.js +1 -1
  22. package/src/components/atoms/MetricCard/styles.js +3 -2
  23. package/src/components/atoms/ScreenHeader/index.js +1 -1
  24. package/src/components/atoms/SliderToolTip/styles.js +1 -0
  25. package/src/components/molecules/CustomSelect/styles.js +2 -2
  26. package/src/components/molecules/StatusAsignationInfo/index.js +2 -1
  27. package/src/components/molecules/StripeCardForm/paymentForm.js +4 -4
  28. package/src/components/molecules/StripeCardForm/styles.js +2 -2
  29. package/src/components/molecules/TagAndInput/index.js +20 -1
  30. package/src/components/molecules/TagAndInput/styles.js +11 -0
  31. package/src/components/organisms/Chat/ContentChat/index.js +5 -5
  32. package/src/components/pages/ProviderProductEdition/index.js +6 -0
  33. package/src/components/pages/ProviderProductEdition/styles.js +1 -1
  34. package/src/global-files/variables.js +26 -11
@@ -17,6 +17,6 @@ var _variables = require("../../../global-files/variables");
17
17
 
18
18
  var _templateObject;
19
19
 
20
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: #f0eef2;\n border-radius: 3px;\n display: flex;\n width: fit-content;\n height: 26px;\n padding: 5px;\n align-items: center;\n\n .feature-name {\n font-size: 14px;\n font-family: ", ";\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n color: ", ";\n\n & + * {\n margin-left: 5px;\n }\n }\n .feature-value {\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n height: 12px;\n letter-spacing: -0.015em;\n color: ", ";\n }\n\n &:last-of-type {\n p {\n font-size: 24px;\n }\n }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
20
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: #f0eef2;\n border-radius: 3px;\n display: flex;\n width: fit-content;\n height: 26px;\n padding: 5px;\n align-items: center;\n\n .feature-name {\n font-size: 14px;\n font-family: ", ";\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n color: ", ";\n\n & + * {\n margin-left: 5px;\n }\n }\n .feature-value {\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n height: 12px;\n letter-spacing: -0.015em;\n color: ", ";\n }\n\n &:last-of-type {\n p {\n font-size: 24px;\n }\n }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray);
21
21
 
22
22
  exports.Container = Container;
@@ -47,8 +47,8 @@ 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-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 }\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
- }, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _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.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
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
 
54
54
  exports.Container = Container;
@@ -131,10 +131,10 @@ var GeneralInput = function GeneralInput(_ref) {
131
131
  }, 0);
132
132
  };
133
133
 
134
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
134
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
135
135
  isRequired: requiredEmpty,
136
136
  className: auditClass,
137
- children: [(optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
137
+ children: (optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
138
138
  id: "dropdown".concat(inputId),
139
139
  onChange: function onChange(e) {
140
140
  return onHandleChange(e);
@@ -184,9 +184,7 @@ var GeneralInput = function GeneralInput(_ref) {
184
184
  maxChar: maxChar,
185
185
  isRequired: isRequired,
186
186
  disabled: disabled
187
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
188
- children: description
189
- })]
187
+ })
190
188
  });
191
189
  };
192
190
 
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: 10px 20px;\n border: 1px solid ", ";\n width: fit-content;\n text-align: center;\n border-radius: 10px;\n\n p {\n color: #000;\n font-size: 25px;\n font-family: ", ";\n font-size: 25px;\n font-feature-settings: \"pnum\", \"lnum\";\n\n &:first-of-type {\n color: ", ";\n font-family: ", ";\n font-weight: 500;\n font-size: 13px;\n line-height: 13px;\n }\n\n & + * {\n margin-top: 3px;\n }\n }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s3, _variables.FontFamily.Raleway);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: 10px 20px;\n border: 1px solid ", ";\n width: fit-content;\n text-align: center;\n border-radius: 10px;\n\n\n p {\n color: ", ";\n font-size: 25px;\n font-family: ", ";\n font-size: 25px;\n font-feature-settings: \"pnum\", \"lnum\";\n\n &:first-of-type {\n color: ", ";\n font-family: ", ";\n font-weight: 500;\n font-size: 13px;\n line-height: 13px;\n }\n\n & + * {\n margin-top: 3px;\n }\n }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Raleway_600, _variables.GlobalColors.color_purple, _variables.FontFamily.Raleway);
19
19
 
20
20
  exports.Container = Container;
@@ -34,5 +34,5 @@ exports.ScreenHeader = ScreenHeader;
34
34
  ScreenHeader.defaultProps = {
35
35
  text: "Header Text Default",
36
36
  fontFamily: "Raleway",
37
- color: _variables.GlobalColors.s5
37
+ color: _variables.GlobalColors.color_gray
38
38
  };
@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject, _templateObject2;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: transparent;\n cursor: pointer;\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n & + * {\n margin-left: 10px;\n }\n img {\n margin: auto 0;\n &.small-image {\n width: 20px;\n height: 20px;\n }\n &.medium-image {\n width: 30px;\n height: 30px;\n }\n &.big-image {\n width: 40px;\n height: 40px;\n }\n }\n"])));
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: transparent;\n cursor: pointer;\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n & + * {\n margin-left: 10px;\n }\n img {\n margin: auto 0;\n &.small-image {\n width: 20px;\n height: 20px;\n }\n &.medium-image {\n width: 30px;\n height: 30px;\n filter: brightness(.35);\n }\n &.big-image {\n width: 40px;\n height: 40px;\n }\n }\n"])));
19
19
 
20
20
  exports.Container = Container;
21
21
 
@@ -15,11 +15,11 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: fit-content;\n position: relative;\n min-width: 150px;\n\n .button-list {\n font-family: ", ";\n font-size: 13px;\n display: flex;\n padding: ", ";\n justify-content: space-between;\n border-radius: 50px;\n background-color: ", ";\n border: 1px solid #f0f0f0;\n cursor: pointer;\n\n & > p {\n max-width: 140px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .arrow-item {\n transform: rotate(-90deg);\n cursor: pointer;\n font-size: 10px;\n margin-left: 10px;\n }\n & + * {\n margin-top: 10px;\n }\n }\n\n .select-container {\n box-shadow: 0px 2px 4px #00000040;\n border-radius: 5px;\n background-color: #fff;\n padding-bottom: 10px;\n position: absolute;\n z-index: 10;\n .search-bar-filter {\n display: flex;\n align-items: center;\n border: 1px solid #f0f0f0;\n padding-left: 10px;\n\n img {\n width: 15px;\n height: 15px;\n }\n\n input {\n background-color: transparent;\n padding: 10px 10px;\n outline: none;\n border: none;\n }\n }\n .default-option {\n padding-top: 5px;\n cursor: pointer;\n padding: 5px 10px;\n color: #817393;\n font-family: Avenir Next;\n font-weight: 500;\n font-size: 13px;\n line-height: 21px;\n &:hover {\n background-color: #f0f0f0;\n }\n }\n .filters-container {\n overflow: auto;\n max-height: 500px;\n .option-container,\n .default-option {\n cursor: pointer;\n padding: 5px 10px;\n .main-item {\n display: flex;\n justify-content: space-between;\n\n .arrow-item {\n transform: rotate(-90deg);\n cursor: pointer;\n font-size: 10px;\n }\n }\n .sub-menu {\n margin-top: 10px;\n padding-left: 20px;\n .sub-filter {\n & + * {\n margin-top: 10px;\n }\n }\n }\n\n &:hover {\n background-color: #f0f0f0;\n }\n label {\n white-space: nowrap;\n }\n }\n\n .dates-select-item {\n cursor: pointer;\n padding: 5px 10px;\n color: #817393;\n font-family: Avenir Next;\n font-weight: 500;\n font-size: 13px;\n line-height: 21px;\n &:hover {\n background-color: #f0f0f0;\n }\n }\n }\n }\n"])), _variables.FontFamily.Raleway, function (props) {
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: fit-content;\n position: relative;\n min-width: 150px;\n\n .button-list {\n font-family: ", ";\n font-size: 13px;\n display: flex;\n padding: ", ";\n justify-content: space-between;\n border-radius: 50px;\n background-color: ", ";\n border: 1px solid #f0f0f0;\n cursor: pointer;\n\n & > p {\n max-width: 140px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .arrow-item {\n transform: rotate(-90deg);\n cursor: pointer;\n font-size: 10px;\n margin-left: 10px;\n }\n & + * {\n margin-top: 10px;\n }\n }\n\n .select-container {\n box-shadow: 0px 2px 4px #00000040;\n border-radius: 5px;\n background-color: #fff;\n padding-bottom: 10px;\n position: absolute;\n z-index: 10;\n .search-bar-filter {\n display: flex;\n align-items: center;\n border: 1px solid #f0f0f0;\n padding-left: 10px;\n\n img {\n width: 15px;\n height: 15px;\n }\n\n input {\n background-color: transparent;\n padding: 10px 10px;\n outline: none;\n border: none;\n }\n }\n .default-option {\n padding-top: 5px;\n cursor: pointer;\n padding: 5px 10px;\n color: #817393;\n font-family: Avenir Next;\n font-weight: 500;\n font-size: 13px;\n line-height: 21px;\n &:hover {\n background-color: #f0f0f0;\n }\n }\n .filters-container {\n overflow: auto;\n max-height: 500px;\n .option-container,\n .default-option {\n cursor: pointer;\n padding: 5px 10px;\n .main-item {\n display: flex;\n justify-content: space-between;\n\n .arrow-item {\n transform: rotate(-90deg);\n cursor: pointer;\n font-size: 10px;\n }\n }\n .sub-menu {\n margin-top: 10px;\n padding-left: 20px;\n .sub-filter {\n & + * {\n margin-top: 10px;\n }\n }\n }\n\n &:hover {\n background-color: #f0f0f0;\n }\n label {\n white-space: nowrap;\n }\n }\n\n .dates-select-item {\n cursor: pointer;\n padding: 5px 10px;\n color: ", ";\n font-family: Avenir Next;\n font-weight: 500;\n font-size: 13px;\n line-height: 21px;\n &:hover {\n background-color: #f0f0f0;\n }\n }\n }\n }\n"])), _variables.FontFamily.Raleway, function (props) {
19
19
  return props.selectLabel !== "" ? "10px 15px" : "5px 5px";
20
20
  }, function (_ref) {
21
21
  var filterActive = _ref.filterActive;
22
22
  return filterActive ? "#F7F7FC" : "#fff";
23
- });
23
+ }, _variables.GlobalColors.color_purple);
24
24
 
25
25
  exports.Container = Container;
@@ -37,6 +37,8 @@ var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolT
37
37
 
38
38
  var _FinancedCompanies = require("./FinancedCompanies");
39
39
 
40
+ var _variables = require("../../../global-files/variables");
41
+
40
42
  var _jsxRuntime = require("react/jsx-runtime");
41
43
 
42
44
  var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
@@ -161,7 +163,7 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
161
163
  })
162
164
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
163
165
  text: "Asig.",
164
- color: "#969696",
166
+ color: _variables.GlobalColors.color_gray,
165
167
  fontFamily: "Avenir Next",
166
168
  headerType: "input-name-header"
167
169
  }), showAsignationPanel && canAssign && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -155,7 +155,7 @@ var PaymentForm = function PaymentForm(_ref) {
155
155
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
156
156
  className: "element card-name",
157
157
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
158
- children: "Nombre en la tarjeta"
158
+ children: "Nombre en la tarjeta:"
159
159
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
160
160
  className: "card-input",
161
161
  value: cardName,
@@ -164,7 +164,7 @@ var PaymentForm = function PaymentForm(_ref) {
164
164
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
165
165
  className: "element card-number",
166
166
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
167
- children: "No. de tarjeta"
167
+ children: "No. de tarjeta:"
168
168
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardNumberElement, {
169
169
  className: "card-input",
170
170
  onChange: function onChange(e) {
@@ -174,7 +174,7 @@ var PaymentForm = function PaymentForm(_ref) {
174
174
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
175
175
  className: "element expiration-date",
176
176
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
177
- children: "Fecha de expiraci\xF3n"
177
+ children: "Fecha de expiraci\xF3n:"
178
178
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardExpiryElement, {
179
179
  className: "card-input",
180
180
  onChange: function onChange(e) {
@@ -184,7 +184,7 @@ var PaymentForm = function PaymentForm(_ref) {
184
184
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
185
185
  className: "element cvc-code ",
186
186
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
187
- children: "CVC"
187
+ children: "CVC:"
188
188
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardCvcElement, {
189
189
  className: "card-input",
190
190
  onChange: function onChange(e) {
@@ -19,7 +19,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
19
19
 
20
20
  exports.Container = Container;
21
21
 
22
- var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n border: 1px solid #f0f0f0;\n border-radius: 10px;\n\n h2 {\n font-size: 15px;\n line-height: 20px;\n color: #262626;\n font-family: ", ";\n\n & + * {\n margin-top: 10px;\n }\n }\n\n .card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n .element {\n display: flex;\n align-items: center;\n\n label {\n color: #808080;\n font-family: ", ";\n font-size: 12px;\n display: flex;\n\n & + * {\n margin-left: 6px;\n }\n }\n\n .card-input {\n border: 1px solid #f0f0f0 !important;\n border-radius: 5px;\n padding: 3px;\n font-family: ", ";\n font-size: 12px;\n flex: 1;\n background-color: #fff;\n }\n\n &.card-name {\n flex: 1 0 100%;\n label + * {\n margin-left: 6px;\n }\n }\n\n &.card-number {\n flex: 1 0 100%;\n label + * {\n margin-left: 43px;\n }\n }\n\n &.expiration-date,\n &.cvc-code {\n flex: 1 1 49%;\n label + * {\n margin-left: 9px;\n }\n }\n }\n }\n position: relative;\n ", "\n img {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.Lato, _variables.FontFamily.Lato, function (_ref) {
22
+ var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n border: 1px solid #f0f0f0;\n border-radius: 10px;\n\n h2 {\n font-size: 15px;\n line-height: 20px;\n color: #262626;\n font-family: ", ";\n\n & + * {\n margin-top: 10px;\n }\n }\n\n .card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n .element {\n display: flex;\n align-items: center;\n\n label {\n color: ", ";\n font-family: ", ";\n font-size: 12px;\n display: flex;\n\n & + * {\n margin-left: 6px;\n }\n }\n\n .card-input {\n border: 1px solid #f0f0f0 !important;\n border-radius: 5px;\n padding: 3px;\n font-family: ", ";\n font-size: 12px;\n flex: 1;\n background-color: #fff;\n }\n\n &.card-name {\n flex: 1 0 100%;\n label + * {\n margin-left: 6px;\n }\n }\n\n &.card-number {\n flex: 1 0 100%;\n label + * {\n margin-left: 43px;\n }\n }\n\n &.expiration-date,\n &.cvc-code {\n flex: 1 1 49%;\n label + * {\n margin-left: 9px;\n }\n }\n }\n }\n position: relative;\n ", "\n img {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n"])), _variables.FontFamily.RobotoMedium, _variables.GlobalColors.color_gray, _variables.FontFamily.Lato, _variables.FontFamily.Lato, function (_ref) {
23
23
  var isSelected = _ref.isSelected;
24
24
  return isSelected && "border-color: #8A6CAA;\n background: #F7F7FC;";
25
25
  });
@@ -23,6 +23,12 @@ var _acceptIcon = _interopRequireDefault(require("../../../assets/images/general
23
23
 
24
24
  var _rejectIcon = _interopRequireDefault(require("../../../assets/images/generalButton/rejectIcon.svg"));
25
25
 
26
+ var _infoIcon = _interopRequireDefault(require("../../../assets/images/sliderToolTip/infoIcon.svg"));
27
+
28
+ var _SliderToolTip = require("../../atoms/SliderToolTip");
29
+
30
+ var _Tooltip = require("../../atoms/Tooltip");
31
+
26
32
  var _jsxRuntime = require("react/jsx-runtime");
27
33
 
28
34
  var TagAndInput = function TagAndInput(_ref) {
@@ -101,9 +107,18 @@ var TagAndInput = function TagAndInput(_ref) {
101
107
  text: label,
102
108
  headerType: "input-name-header",
103
109
  color: color
104
- }), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
105
- className: "tooltip",
106
- children: label
110
+ }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
111
+ componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
112
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
113
+ children: description
114
+ })
115
+ }),
116
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
117
+ src: _infoIcon.default,
118
+ alt: "info icon",
119
+ className: 'icon_information'
120
+ }),
121
+ classNameTooltip: "container-tooltip"
107
122
  })]
108
123
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GeneralInput, {
109
124
  inputId: inputId,
@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .title-container {\n position: relative;\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) {
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .title-container {\n position: relative;\n\n display: flex;\n align-items: center;\n gap: .5rem;\n\n .icon_information{\n width: 1.35rem;\n height: 1.35rem;\n filter: brightness(.35);\n }\n\n .tooltip {\n display: none;\n position: absolute;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: 14px;\n line-height: 19px;\n left: 0;\n top: 0;\n height: fit-content;\n transition: display 2s;\n }\n\n &:hover {\n .tooltip {\n display: block;\n }\n }\n }\n\n & > :first-child {\n & + * {\n margin-top: ", "px;\n }\n }\n & + * {\n margin-top: ", "px;\n }\n"])), _variables.GlobalColors.white, function (_ref) {
19
19
  var color = _ref.color;
20
20
  return color ? color : _variables.GlobalColors.s5;
21
21
  }, _variables.FontFamily.Raleway, function (_ref2) {
@@ -250,14 +250,14 @@ var ContentChat = function ContentChat(props) {
250
250
  case 0:
251
251
  paramsQuery = {
252
252
  articleData: JSON.stringify({
253
- articleId: JSON.stringify(dataChat.id),
254
- version: JSON.stringify(dataChat.version),
255
- retailerId: JSON.stringify(dataChat.retailerId),
256
- status: dataChat.status
253
+ articleId: JSON.stringify(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id),
254
+ version: JSON.stringify(dataChat === null || dataChat === void 0 ? void 0 : dataChat.version),
255
+ retailerId: JSON.stringify(dataChat === null || dataChat === void 0 ? void 0 : dataChat.retailerId),
256
+ status: dataChat === null || dataChat === void 0 ? void 0 : dataChat.status
257
257
  })
258
258
  };
259
259
  paramsHeaders = {
260
- Authorization: dataChat.userToken
260
+ Authorization: dataChat === null || dataChat === void 0 ? void 0 : dataChat.userToken
261
261
  };
262
262
  _context.next = 4;
263
263
  return (0, _handle_http.fetchGET)(process.env.REACT_APP_READ_MESSAGES, paramsQuery, paramsHeaders);
@@ -31,48 +31,43 @@ ProviderProductEditionDefault.args = {
31
31
  "Ficha técnica": true,
32
32
  Imágenes: false
33
33
  },
34
- token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjNTA5YzI2ZS05OTZkLTQyMWMtOWY2ZS0wOTdhMWI0NjE3YjMiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImM1MDljMjZlLTk5NmQtNDIxYy05ZjZlLTA5N2ExYjQ2MTdiMyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIzN2E3OWZhMS1iMjJmLTRiNDUtODlhZC0wNTkwMDE4ZjlmYWMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc0NjcxOTU3MiwibmFtZSI6IlByb3ZlZWRvciBOb3JtYWwiLCJwaG9uZV9udW1iZXIiOiIrNTI4NDQ3MzgzMyIsImV4cCI6MTc0NjcyMzE3MiwiaWF0IjoxNzQ2NzE5NTcyLCJlbWFpbCI6ImZ1bGFuaXRvaHByb3ZlZWRvckBhbGxmcmVlbWFpbC5uZXQifQ.WxDwiEQuEB2TNY8l3fE-P3lOabmZSWSXOCN7wDM9N47mbmsNy5Y9fBsKqydlzK7AVeZoWKaVJO55NckiQsr46SqlAEpD2Jcru98CGIpCaQUYCbr6qcqb90-UOPlCArvLdVXnKxBEnMrZLmz42Qfoqar_d7z2GNGXaWPruR2wBHthGMMGVF1rYnoKxszW1ZHKxgYVW0JuheiAD-sfTYCH6iH9MSJoB_LefbZ1pOd71oNOLw0TgbyUjJkhm0WRXGmXi2WUDBheAd7vgq86SNMXQvM6jtK1xpE2JWMfp5Fg0ciaslj6T4kBe6C-OL6P97LzwnOaz_Z6yKWGi-Hqq0zY7Q",
35
- articleId: 121611,
36
- category: 225,
34
+ token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwYmJjMWJjYi0yODJkLTRjYzYtYjcwZS0wNWNhY2JiYjU1NjMiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBiYmMxYmNiLTI4MmQtNGNjNi1iNzBlLTA1Y2FjYmJiNTU2MyIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJmMTdlYTVlOS0wZmE2LTQ1YmUtYjE5MS1iNTViZjgxYWRiNzkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxOTUwNDg0OSwibmFtZSI6IlByb3ZlZWRvciBSYWRpb3NoYWNrIiwicGhvbmVfbnVtYmVyIjoiKzUyMTIzNDU2Nzg5NzgiLCJleHAiOjE3MTk1MDg0NDksImlhdCI6MTcxOTUwNDg0OSwiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrQGFsbGZyZWVtYWlsLm5ldCJ9.M0Pm70YhdG1JARzamruJKSzJPjGl_tXAYCwQHGiIRYLHo4X05B95VgCLXVvetadrH7dsp6PviJ3MuF2JPzBVXMAP_N26zSeJFIx1ywqVp-nehwE3TUiF8L0P_MTLCBJzHcHf41HzTDHr546nBBgF64W3bZNd_J-jSFW3xZxgu6dq_RZ5fywVlzs6sZgDAenOtzcB9-Ig97mpdTil8ag8wgbf2LlcypaWGsEESbHhus-_hx58tosjwQ_a0rvsz47X9HI9YMe6rD0xFR9cQCub6WG7d65fMyqaCl-X4DsFE1a4z2AnWcmgXmAdwZTqCjvo8TPKJjxMBvptlShL753UaQ",
35
+ articleId: 128483,
36
+ category: "1139",
37
37
  version: 1,
38
38
  productSelected: {
39
- id_article: 121611,
40
- upc: "094",
41
- sku: "093",
42
- name: "Carga M 3",
43
- timestamp: "2025-05-07T23:18:02.000Z",
44
- categoryName: "Electrodomésticos y Línea Blanca|Electrodomésticos|Accesorios Electrodomésticos",
45
- id_category: 225,
39
+ id_article: 128483,
40
+ upc: "1010101010122",
41
+ name: "Prueba 26-jun-24",
42
+ timestamp: "2024-06-26T17:06:17.000Z",
43
+ categoryName: "Audio|Audífonos|In Ear",
44
+ id_category: 1139,
46
45
  version: 1,
46
+ reviewState: "rejected_to_provider",
47
47
  retailersAvailable: [{
48
- name: "Amazon",
49
- id: 9
50
- }, {
51
- name: "Rappi",
52
- id: 16
48
+ name: "Radioshack",
49
+ id: 74
53
50
  }],
54
- percentage: 5.21
51
+ percentage: 100
55
52
  },
56
53
  productToEdit: {
57
- idCategory: 225,
58
- ArticleId: 121611,
54
+ idCategory: 1139,
55
+ ArticleId: 128483,
59
56
  product: [{
60
- id_article: 121611,
61
- upc: "094",
62
- sku: "093",
63
- name: "Carga M 3",
64
- timestamp: "2025-05-07T23:18:02.000Z",
65
- categoryName: "Electrodomésticos y Línea Blanca|Electrodomésticos|Accesorios Electrodomésticos",
66
- id_category: 225,
57
+ id_article: 128483,
58
+ upc: "1010101010122",
59
+ name: "Prueba 26-jun-24",
60
+ timestamp: "2024-06-26T17:06:17.000Z",
61
+ categoryName: "Audio|Audífonos|In Ear",
62
+ id_category: 1139,
67
63
  version: 1,
64
+ reviewState: "rejected_to_provider",
68
65
  retailersAvailable: [{
69
- name: "Amazon",
70
- id: 9
71
- }, {
72
- name: "Rappi",
73
- id: 16
66
+ name: "Radioshack",
67
+ id: 74,
68
+ percentage: 100
74
69
  }],
75
- percentage: 5.21
70
+ percentage: 100
76
71
  }]
77
72
  },
78
73
  location: {
@@ -87,56 +82,63 @@ ProviderProductEditionDefault.args = {
87
82
  key: "24vwut"
88
83
  },
89
84
  user: {
90
- id_user: 410,
85
+ id_user: 2130,
91
86
  name: "Proveedor",
92
- last_name: "Normal",
93
- email: "fulanitohproveedor@allfreemail.net",
94
- position: "CEO",
95
- telephone: "+5284473833",
87
+ last_name: "Radioshack",
88
+ email: "proveedorradioshack@allfreemail.net",
89
+ position: "Onboarding",
90
+ telephone: "+5212345678978",
96
91
  country: "México",
97
- id_company: 1015,
98
- id_role: null,
92
+ id_company: 1169,
93
+ id_cognito: "0bbc1bcb-282d-4cc6-b70e-05cacbbb5563",
94
+ birth_Date: null,
99
95
  about_me: null,
96
+ zip_code: null,
100
97
  address: null,
101
98
  job: null,
102
99
  id_stripe: null,
100
+ id_role: 0,
103
101
  active: 1,
104
- email_notify: 1,
105
- id_cognito: "c509c26e-996d-421c-9f6e-097a1b4617b3",
106
- birth_Date: null,
107
- zip_code: null,
108
102
  is_retailer: 0,
109
- is_onboarding: 0,
103
+ email_notify: 1,
110
104
  is_user_tech: null,
111
- profile_picture_ext: null,
105
+ is_onboarding: 0,
112
106
  membership: {
113
- id: 199,
114
- start_date: "2025-03-31T17:04:43.000Z",
115
- end_date: "2026-03-31T17:04:43.000Z",
116
- planID: 5,
117
- plan: "prod_Ktl6B5Ou2gqTB2",
107
+ id: 1649,
108
+ start_date: "2023-11-09T19:57:43.000Z",
109
+ end_date: "2024-11-09T19:57:43.000Z",
110
+ planID: 8,
111
+ plan: "prod_KvGeJs0E9cSO4y",
118
112
  name: "Plan Pro",
119
- user_limit: "5",
120
- products_limit: "500",
121
- type: "PyMES"
113
+ user_limit: "50",
114
+ products_limit: "5000",
115
+ type: "Enterprise"
122
116
  },
123
- src: "https://content-management-profile.s3.amazonaws.com/id-410/410.png?1746719575081"
117
+ src: "https://content-management-profile-prod.s3.amazonaws.com/id-2130/2130.png?1719504850190"
124
118
  },
125
119
  company: {
126
- id_company: 1015,
127
- trade_name: "Prueba proveedor normal",
128
- company_name: "72uheudehf",
129
- rfc: "nefeo",
130
- adress: "iwhdede",
120
+ id_company: 1169,
121
+ trade_name: "Radioshack Onboarding",
122
+ company_name: "Onboarding",
123
+ rfc: "ASDASD",
124
+ adress: "CDMX",
131
125
  about_company: null,
132
126
  telephone: null,
133
127
  web_site: null,
134
128
  zip_code: null,
135
129
  email: null,
136
130
  social_link: null,
137
- is_retailer: 0,
138
- financedRetailers: [],
139
- retailers: []
131
+ is_retailer: 1,
132
+ financedRetailers: [{
133
+ id: 74,
134
+ name: "Radioshack",
135
+ country: "México"
136
+ }],
137
+ retailers: [{
138
+ id: 74,
139
+ name: "Radioshack",
140
+ country: "México"
141
+ }]
140
142
  },
141
143
  showSurvey: function showSurvey(v) {
142
144
  return v && alert("se muestra");
@@ -1132,9 +1132,12 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
1132
1132
  }, [percentages]);
1133
1133
 
1134
1134
  var loadInputs = function loadInputs() {
1135
+ if (!services) return;
1136
+
1135
1137
  if (services.length > 0) {
1136
1138
  var _services$0$activeRet, _services$2, _services$3;
1137
1139
 
1140
+ if (!services[0]) return;
1138
1141
  if ((_services$0$activeRet = services[0][activeRetailer.id]) !== null && _services$0$activeRet !== void 0 && _services$0$activeRet.data) services[0][activeRetailer.id].data = Object.values(services[0][activeRetailer.id].data);
1139
1142
  setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
1140
1143
  var datagroups = services[0][activeRetailer.id];
@@ -18,6 +18,6 @@ var _templateObject;
18
18
  var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n height: 100%;\n flex: 1;\n overflow: auto;\n\n .data-container {\n display: flex;\n flex: 0%;\n height: calc(100% - ", "px);\n .image-data-panel {\n width: 340px;\n\n & + * {\n margin-left: 10px;\n }\n }\n\n .product-information {\n width: 100%;\n display: flex;\n flex-direction: column;\n\n .services-information-container {\n height: 100%;\n overflow: auto;\n }\n\n .image-services {\n aside {\n display: grid;\n grid-template-columns: repeat(auto-fill, 179px);\n column-gap: 15px;\n row-gap: 15px;\n padding: 20px;\n }\n }\n\n .commentary-box {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding: 10px;\n padding-left: 0;\n\n .commentary {\n display: flex;\n align-items: flex-end;\n\n .input-container {\n width: 500px;\n\n .quill {\n height: 100px;\n }\n\n & + * {\n margin-left: 5px;\n }\n }\n\n .buttons-box {\n display: flex;\n width: 210px;\n flex-wrap: wrap;\n\n .general-transparent-button {\n & + * {\n margin-top: 5px;\n }\n }\n\n .general-transparent-button,\n .general-green-button,\n .general-button-disabled {\n width: fit-content;\n min-width: 201px;\n height: 40px;\n }\n }\n }\n }\n\n .feedback-box {\n display: flex;\n }\n\n .required-inputs-message {\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n padding: 10px;\n display: flex;\n align-items: center;\n\n p + * {\n margin-top: 10px;\n }\n\n button {\n min-width: fit-content;\n }\n }\n }\n }\n #modal-message-box {\n width: 400px;\n height: 100px;\n }\n .container {\n width: 100%;\n height: 100%;\n .dropzone {\n height: 100%;\n width: 100%;\n }\n }\n"])), function (_ref) {
19
19
  var headerTop = _ref.headerTop;
20
20
  return headerTop;
21
- }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
21
+ }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray);
22
22
 
23
23
  exports.Container = Container;
@@ -1,33 +1,47 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.GlobalStatus = exports.GlobalColors = exports.FontFamily = void 0;
7
- var GlobalColors = {
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
11
+
12
+ var _GlobalColors;
13
+
14
+ var GlobalColors = (_GlobalColors = {
8
15
  s1: "#FAFAFA",
9
16
  s2: "#F0EEF2",
10
17
  s3: "#D4D1D7",
11
18
  s4: "#817393",
12
19
  s5: "#503D66",
13
- original_magenta: "#B12D84",
14
- secondary_magenta: "#BA0070",
20
+ // COLORES DE ESTATUS
15
21
  rejected_status: "#D74DED",
16
- magenta_s2: "#E33AA9",
17
- original_purpura: "#603888",
18
22
  in_progress: "#ED9A4D",
19
- deep_gray: "#281F33",
20
23
  reception: "#E57432",
21
24
  finished: "#18A0FB",
22
25
  exported: "#71DE56",
23
- white: "#FFFFFF",
24
- gray_light: "#F0F0F0",
26
+ // ESCALA DE GRISES
27
+ black: "#262626",
25
28
  gray: "#707070",
26
- blue_light: "#F7F7FC",
27
- purple: "#8A6CAA",
29
+ deep_gray: "#281F33",
28
30
  gray_medium: "#CBCBCB",
29
- black: "#262626"
30
- };
31
+ gray_light: "#F0F0F0",
32
+ white: "#FFFFFF",
33
+ // COLORES
34
+ color_purple: "#503D65",
35
+ original_purpura: "#603888",
36
+ purple: "#8A6CAA",
37
+ original_magenta: "#B12D84",
38
+ secondary_magenta: "#BA0070",
39
+ magenta_s2: "#E33AA9",
40
+ blue_light: "#F7F7FC",
41
+ color_black: "#000",
42
+ color_gray: "#333",
43
+ color_gray_medium: "#808080"
44
+ }, (0, _defineProperty2.default)(_GlobalColors, "color_purple", "#503D65"), (0, _defineProperty2.default)(_GlobalColors, "color_pink", "#e33aa9"), (0, _defineProperty2.default)(_GlobalColors, "rgb_color_pink", "227, 58, 169"), _GlobalColors);
31
45
  exports.GlobalColors = GlobalColors;
32
46
  var FontFamily = {
33
47
  AvenirNext: "Avenir Next",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.5.36",
3
+ "version": "21.5.38",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
@@ -32,7 +32,7 @@ export const Container = styled.div`
32
32
  line-height: 16px;
33
33
  height: 12px;
34
34
  letter-spacing: -0.015em;
35
- color: ${GlobalColors.s4};
35
+ color: ${GlobalColors.color_gray};
36
36
  }
37
37
 
38
38
  &:last-of-type {
@@ -74,13 +74,13 @@ export const Container = styled.button`
74
74
 
75
75
  &.save-button {
76
76
  background-image: url(${saveIcon});
77
- border: 1px solid ${GlobalColors.s3};
77
+ border: 1px solid ${GlobalColors.color_gray};
78
78
  border-radius: 15px;
79
79
 
80
80
  &:hover {
81
81
  background-image: url(${saveIconHover});
82
- background-color: ${GlobalColors.magenta_s2};
83
- border: 1px solid ${GlobalColors.magenta_s2};
82
+ background-color: ${GlobalColors.color_pink};
83
+ border: 1px solid ${GlobalColors.color_pink};
84
84
  }
85
85
  }
86
86
 
@@ -119,12 +119,13 @@ export const Container = styled.button`
119
119
  }
120
120
 
121
121
  &.version-button {
122
- color: ${GlobalColors.s3};
123
- border: 1px solid ${GlobalColors.s3};
122
+ color: ${GlobalColors.color_purple};
123
+ border: 1px solid ${GlobalColors.color_purple};
124
124
  border-radius: 15px;
125
125
  font-size: 12px;
126
126
  line-height: 25px;
127
127
  text-align: center;
128
+ filter: brightness(.35);
128
129
  }
129
130
  }
130
131
 
@@ -153,7 +153,7 @@ export const GeneralInput = ({
153
153
  disabled={disabled}
154
154
  />
155
155
  )}
156
- <p>{description}</p>
156
+ {/* <p>{description}</p> */}
157
157
  </Container>
158
158
  );
159
159
  };
@@ -8,15 +8,16 @@ export const Container = styled.div`
8
8
  text-align: center;
9
9
  border-radius: 10px;
10
10
 
11
+
11
12
  p {
12
- color: #000;
13
+ color: ${GlobalColors.color_purple};
13
14
  font-size: 25px;
14
15
  font-family: ${FontFamily.Raleway_600};
15
16
  font-size: 25px;
16
17
  font-feature-settings: "pnum", "lnum";
17
18
 
18
19
  &:first-of-type {
19
- color: ${GlobalColors.s3};
20
+ color: ${GlobalColors.color_purple};
20
21
  font-family: ${FontFamily.Raleway};
21
22
  font-weight: 500;
22
23
  font-size: 13px;
@@ -25,5 +25,5 @@ export const ScreenHeader = ({
25
25
  ScreenHeader.defaultProps = {
26
26
  text: "Header Text Default",
27
27
  fontFamily: "Raleway",
28
- color: GlobalColors.s5,
28
+ color: GlobalColors.color_gray,
29
29
  };
@@ -20,6 +20,7 @@ export const Container = styled.div`
20
20
  &.medium-image {
21
21
  width: 30px;
22
22
  height: 30px;
23
+ filter: brightness(.35);
23
24
  }
24
25
  &.big-image {
25
26
  width: 40px;
@@ -1,5 +1,5 @@
1
1
  import styled from "styled-components";
2
- import { FontFamily } from "../../../global-files/variables";
2
+ import { FontFamily, GlobalColors } from "../../../global-files/variables";
3
3
 
4
4
  export const Container = styled.div`
5
5
  width: fit-content;
@@ -112,7 +112,7 @@ export const Container = styled.div`
112
112
  .dates-select-item {
113
113
  cursor: pointer;
114
114
  padding: 5px 10px;
115
- color: #817393;
115
+ color: ${GlobalColors.color_purple};
116
116
  font-family: Avenir Next;
117
117
  font-weight: 500;
118
118
  font-size: 13px;
@@ -12,6 +12,7 @@ import Slide1 from "../../../assets/images/sliderToolTip/slide21.svg";
12
12
  import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
13
13
  import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
14
14
  import { FinancedCompanies } from "./FinancedCompanies";
15
+ import { GlobalColors } from "../../../global-files/variables";
15
16
 
16
17
  export const StatusAsignationInfo = ({
17
18
  status = "-",
@@ -138,7 +139,7 @@ export const StatusAsignationInfo = ({
138
139
  </div>
139
140
  <ScreenHeader
140
141
  text={"Asig."}
141
- color={"#969696"}
142
+ color={GlobalColors.color_gray}
142
143
  fontFamily={"Avenir Next"}
143
144
  headerType={"input-name-header"}
144
145
  />
@@ -92,7 +92,7 @@ export const PaymentForm = ({
92
92
  <h2>{labelForm}</h2>
93
93
  <div className="card-fields">
94
94
  <div className="element card-name">
95
- <label>Nombre en la tarjeta</label>
95
+ <label>Nombre en la tarjeta:</label>
96
96
  <input
97
97
  className="card-input"
98
98
  value={cardName}
@@ -100,21 +100,21 @@ export const PaymentForm = ({
100
100
  />
101
101
  </div>
102
102
  <div className="element card-number">
103
- <label>No. de tarjeta</label>
103
+ <label>No. de tarjeta:</label>
104
104
  <CardNumberElement
105
105
  className="card-input"
106
106
  onChange={(e) => handleIputChange(e, "number")}
107
107
  />
108
108
  </div>
109
109
  <div className="element expiration-date">
110
- <label>Fecha de expiración</label>
110
+ <label>Fecha de expiración:</label>
111
111
  <CardExpiryElement
112
112
  className="card-input"
113
113
  onChange={(e) => handleIputChange(e, "exp")}
114
114
  />
115
115
  </div>
116
116
  <div className="element cvc-code ">
117
- <label>CVC</label>
117
+ <label>CVC:</label>
118
118
  <CardCvcElement
119
119
  className="card-input"
120
120
  onChange={(e) => handleIputChange(e, "cvc")}
@@ -1,5 +1,5 @@
1
1
  import styled from "styled-components";
2
- import { FontFamily } from "../../../global-files/variables";
2
+ import { FontFamily, GlobalColors } from "../../../global-files/variables";
3
3
 
4
4
  export const Container = styled.div``;
5
5
 
@@ -28,7 +28,7 @@ export const PaymentFormContainer = styled.form`
28
28
  align-items: center;
29
29
 
30
30
  label {
31
- color: #808080;
31
+ color: ${GlobalColors.color_gray};
32
32
  font-family: ${FontFamily.Lato};
33
33
  font-size: 12px;
34
34
  display: flex;
@@ -4,6 +4,9 @@ import { GeneralInput } from "../../atoms/GeneralInput/index";
4
4
  import { useState, useEffect } from "react";
5
5
  import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
6
6
  import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
7
+ import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
8
+ import { SliderToolTip } from "../../atoms/SliderToolTip";
9
+ import { Tooltip } from "../../atoms/Tooltip";
7
10
  export const TagAndInput = ({
8
11
  inputType,
9
12
  label,
@@ -77,7 +80,23 @@ export const TagAndInput = ({
77
80
  headerType={"input-name-header"}
78
81
  color={color}
79
82
  />
80
- {showTooltip && <span className="tooltip">{label}</span>}
83
+ {description && (
84
+ <Tooltip
85
+ componentTooltip={
86
+ <>
87
+ <p>{description}</p>
88
+ </>
89
+ }
90
+ children={
91
+ <img
92
+ src={InfoIcon}
93
+ alt="info icon"
94
+ className={'icon_information'}
95
+ />
96
+ }
97
+ classNameTooltip={"container-tooltip"}
98
+ />
99
+ )}
81
100
  </div>
82
101
  )}
83
102
  <GeneralInput
@@ -4,6 +4,17 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
4
4
  export const Container = styled.div`
5
5
  .title-container {
6
6
  position: relative;
7
+
8
+ display: flex;
9
+ align-items: center;
10
+ gap: .5rem;
11
+
12
+ .icon_information{
13
+ width: 1.35rem;
14
+ height: 1.35rem;
15
+ filter: brightness(.35);
16
+ }
17
+
7
18
  .tooltip {
8
19
  display: none;
9
20
  position: absolute;
@@ -142,13 +142,13 @@ export const ContentChat = (props) => {
142
142
  const getInitialProductStatus = async () => {
143
143
  const paramsQuery = {
144
144
  articleData: JSON.stringify({
145
- articleId: JSON.stringify(dataChat.id),
146
- version: JSON.stringify(dataChat.version),
147
- retailerId: JSON.stringify(dataChat.retailerId),
148
- status: dataChat.status,
145
+ articleId: JSON.stringify(dataChat?.id),
146
+ version: JSON.stringify(dataChat?.version),
147
+ retailerId: JSON.stringify(dataChat?.retailerId),
148
+ status: dataChat?.status,
149
149
  })
150
150
  };
151
- const paramsHeaders = { Authorization: dataChat.userToken };
151
+ const paramsHeaders = { Authorization: dataChat?.userToken };
152
152
  const response = await fetchGET(
153
153
  process.env.REACT_APP_READ_MESSAGES,
154
154
  paramsQuery,
@@ -629,7 +629,13 @@ export const ProviderProductEdition = ({
629
629
  }, [percentages]);
630
630
 
631
631
  const loadInputs = () => {
632
+
633
+ if(!services) return;
634
+
632
635
  if (services.length > 0) {
636
+
637
+ if(!services[0]) return;
638
+
633
639
  if (services[0][activeRetailer.id]?.data)
634
640
  services[0][activeRetailer.id].data = Object.values(
635
641
  services[0][activeRetailer.id].data
@@ -92,7 +92,7 @@ export const Container = styled.div`
92
92
  .required-inputs-message {
93
93
  font-family: ${FontFamily.AvenirNext};
94
94
  font-size: 13px;
95
- color: ${GlobalColors.s4};
95
+ color: ${GlobalColors.color_gray};
96
96
  padding: 10px;
97
97
  display: flex;
98
98
  align-items: center;
@@ -1,27 +1,42 @@
1
1
  export const GlobalColors = {
2
+
2
3
  s1: "#FAFAFA",
3
4
  s2: "#F0EEF2",
4
5
  s3: "#D4D1D7",
5
6
  s4: "#817393",
6
7
  s5: "#503D66",
7
- original_magenta: "#B12D84",
8
- secondary_magenta: "#BA0070",
8
+
9
+ // COLORES DE ESTATUS
9
10
  rejected_status: "#D74DED",
10
- magenta_s2: "#E33AA9",
11
- original_purpura: "#603888",
12
11
  in_progress: "#ED9A4D",
13
- deep_gray: "#281F33",
14
12
  reception: "#E57432",
15
13
  finished: "#18A0FB",
16
14
  exported: "#71DE56",
17
- white: "#FFFFFF",
18
- gray_light: "#F0F0F0",
15
+
16
+ // ESCALA DE GRISES
17
+ black:"#262626",
19
18
  gray:"#707070",
20
- blue_light:"#F7F7FC",
21
- purple:"#8A6CAA",
19
+ deep_gray: "#281F33",
22
20
  gray_medium:"#CBCBCB",
23
- black:"#262626",
24
- };
21
+ gray_light: "#F0F0F0",
22
+ white: "#FFFFFF",
23
+
24
+ // COLORES
25
+ color_purple: "#503D65",
26
+ original_purpura: "#603888",
27
+ purple:"#8A6CAA",
28
+ original_magenta: "#B12D84",
29
+ secondary_magenta: "#BA0070",
30
+ magenta_s2: "#E33AA9",
31
+ blue_light:"#F7F7FC",
32
+
33
+ color_black: "#000",
34
+ color_gray: "#333",
35
+ color_gray_medium: "#808080",
36
+ color_purple: "#503D65",
37
+ color_pink: "#e33aa9",
38
+ rgb_color_pink: "227, 58, 169"
39
+ }
25
40
 
26
41
  export const FontFamily = {
27
42
  AvenirNext: "Avenir Next",