@widergy/utilitygo-smart-bill-web 1.7.3 → 1.10.1

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Indicator/components/IndicatorLabel/index.js

@@ -25,42 +25,48 @@ var IndicatorLabel = function IndicatorLabel(_ref) {
   var contextApiInfo = _ref.contextApiInfo,
       value = _ref.value,
       unit = _ref.unit,
+      labelOffset = _ref.labelOffset,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes;
   var assets = contextApiInfo.assets,
       config = contextApiInfo.config,
       Label = contextApiInfo.Label;
-  var indicatorLabel = config.texts.ratesDefinition.indicatorLabel;
-
-  var _ref2 = config.stylesConfig || {},
-      rateStagesIndicatorEnergyIcon = _ref2.rateStagesIndicatorEnergyIcon;
+  var texts = config.texts,
+      colors = config.colors;
+  var indicatorLabel = texts.ratesDefinition.indicatorLabel;
 
   var EnergyIcon = function EnergyIcon() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: rateStagesIndicatorEnergyIcon
-    }, /*#__PURE__*/_react.default.createElement(assets.EnergyIconSmall, null));
+    return /*#__PURE__*/_react.default.createElement(assets.EnergyIcon, {
+      className: _stylesModule.default.icon,
+      style: {
+        fill: colors.primary
+      }
+    });
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      transform: "translate(".concat(labelOffset, ")")
+    },
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.movingContainer
   }, /*#__PURE__*/_react.default.createElement(_Magnitude.default, {
     numberAlias: _aliases.RATE_MAGNITUDE_NUMBER_INDICATOR,
     unitAlias: _aliases.RATE_MAGNITUDE_UNIT_INDICATOR,
     value: value,
     unit: unit,
-    Icon: EnergyIcon,
-    classes: {
-      icon: _stylesModule.default.icon
-    }
+    Icon: EnergyIcon
   }), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.RATE_LABEL_INDICATOR
-  }, indicatorLabel));
+  }, indicatorLabel)));
 };
 
 IndicatorLabel.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   value: _propTypes.number,
   unit: _propTypes.string,
+  labelOffset: _propTypes.string,
   classes: (0, _propTypes.shape)({
     container: _propTypes.string
   })

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Indicator/components/IndicatorLabel/styles.module.scss

@@ -5,8 +5,12 @@
   flex-flow: column;
 }
 
+.movingContainer {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
 .icon {
-  > g {
-    fill: $primary;
-  }
+  margin-right: 8px !important;
 }

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Indicator/index.js

@@ -11,6 +11,10 @@ var _propTypes = require("prop-types");
 
 var _rateStagesTypes = require("../../../../../../../../shared/types/rateStagesTypes");
 
+var _WithContextApi = _interopRequireDefault(require("../../../../../../../WithContextApi"));
+
+var _smartBillTypes = require("../../../../../../../../shared/types/smartBillTypes");
+
 var _IndicatorLabel = _interopRequireDefault(require("./components/IndicatorLabel"));
 
 var _utils = require("./utils");
@@ -23,36 +27,41 @@ var Indicator = function Indicator(_ref) {
   var value = _ref.value,
       unit = _ref.unit,
       rateStages = _ref.rateStages,
-      isDesktop = _ref.isDesktop;
+      isDesktop = _ref.isDesktop,
+      contextApiInfo = _ref.contextApiInfo;
+  var primary = contextApiInfo.config.colors.primary;
+
+  var _getIndicatorPosition = (0, _utils.getIndicatorPosition)(value, rateStages, isDesktop),
+      containerLeft = _getIndicatorPosition.containerLeft,
+      labelOffset = _getIndicatorPosition.labelOffset;
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      left: (0, _utils.getIndicatorPosition)(value, rateStages, isDesktop)
+      left: containerLeft
     },
     className: _stylesModule.default.indicator
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.arrowUp
-  }), /*#__PURE__*/_react.default.createElement(_IndicatorLabel.default, {
-    value: value,
-    unit: unit,
-    classes: {
-      container: _stylesModule.default.desktopMovingLabel
+    className: _stylesModule.default.arrowUp,
+    style: {
+      borderBlockColor: primary
     }
-  })), /*#__PURE__*/_react.default.createElement(_IndicatorLabel.default, {
+  }), /*#__PURE__*/_react.default.createElement(_IndicatorLabel.default, {
     value: value,
     unit: unit,
-    classes: {
-      container: _stylesModule.default.mobileFixedLabel
-    }
-  }));
+    labelOffset: labelOffset
+  })));
 };
 
 Indicator.propTypes = {
   value: _propTypes.number,
   unit: _propTypes.string,
+  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   rateStages: _rateStagesTypes.rateStagesTypes,
   isDesktop: _propTypes.bool
 };
-var _default = Indicator;
+
+var _default = (0, _WithContextApi.default)()(Indicator);
+
 exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Indicator/styles.module.scss

@@ -2,7 +2,8 @@
 @import '../../../../../../../../scss/variables/_mediaQueries';
 @import '../../../../../../../../scss/variables/_sizes.scss';
 
-$arrow-size: 12px;
+$arrow-width: 12px;
+$arrow-height: 8px;
 
 .container {
   display: flex;
@@ -16,24 +17,10 @@ $arrow-size: 12px;
 }
 
 .arrowUp {
-  border-bottom: $arrow-size solid $primary;
-  border-left: ($arrow-size / 2) solid transparent;
-  border-right: ($arrow-size / 2) solid transparent;
+  border-bottom: $arrow-height solid;
+  border-left: ($arrow-width / 2) solid transparent;
+  border-right: ($arrow-width / 2) solid transparent;
   height: 0;
-  margin: 0 0 6px 18px;
+  margin: 0 0 8px 0;
   width: 0;
 }
-
-.desktopMovingLabel {
-  @media #{$tablet-mobile} {
-    display: none;
-  }
-}
-
-.mobileFixedLabel {
-  margin: 15px 0 0 -30px;
-
-  @media #{$desktop} {
-    display: none;
-  }
-}

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Indicator/utils.js

@@ -33,8 +33,42 @@ var subStagePosition = function subStagePosition(value, rateStages, isDesktop) {
   return "".concat(getStageWidth(totalStages, isDesktop), " * ").concat(deltaFromStageInit, " / ").concat(currentStageRangeWidth);
 };
 
+var relativePorcentageValue = function relativePorcentageValue(value, rateStages) {
+  var globalLastSubRate = rateStages.at(-1).sub_rate_stages.at(-1).range;
+
+  var globalMaxValue = globalLastSubRate.at(-1) || globalLastSubRate.at(0) + _constants.DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH;
+
+  var clippedMaxValue = value > globalMaxValue ? globalMaxValue : value;
+  return clippedMaxValue / globalMaxValue * 100;
+};
+
+var getLabelOffset = function getLabelOffset(value, rateStages) {
+  var rateIndex = rateStages.indexOf((0, _utils.getCurrentStage)(value, rateStages));
+  var isFirstRate = rateIndex === 0;
+  var isLastRate = rateIndex === rateStages.length - 1;
+  var baseOffset = "".concat(relativePorcentageValue(value, rateStages), "%");
+  return isLastRate ? "calc(-".concat(baseOffset, " + ").concat(_constants.INDICATOR_LABEL_LAST_OFFSET, ")") : isFirstRate ? "calc(-".concat(baseOffset, " - ").concat(_constants.INDICATOR_LABEL_FIRST_OFFSET, ")") : _constants.INDICATOR_LABEL_DEFAULT_OFFSET;
+};
+
+var subStagePositionRounded = function subStagePositionRounded(value, rateStages) {
+  var roundedVal = Math.round(value);
+  var currentStage = (0, _utils.getCurrentStage)(value, rateStages);
+
+  var findRange = function findRange(_ref) {
+    var range = _ref.range;
+    return roundedVal >= range[0] && (!range[1] || roundedVal <= range[1]);
+  };
+
+  var currentSubstageIndex = currentStage.sub_rate_stages.findIndex(findRange);
+  var stageWidth = getStageWidth(rateStages.length, false);
+  return "".concat(stageWidth, " * ").concat((currentSubstageIndex + 0.5) / currentStage.sub_rate_stages.length);
+};
+
 var getIndicatorPosition = function getIndicatorPosition(value, rateStages, isDesktop) {
-  return "calc(".concat(isDesktop ? _constants.INITIAL_INDICATOR_POSITION_DESKTOP : _constants.INITIAL_INDICATOR_POSITION_MOBILE, " + ").concat(stagePosition(value, rateStages, isDesktop), " + ").concat(subStagePosition(value, rateStages, isDesktop), ")");
+  return {
+    containerLeft: "calc(".concat(isDesktop ? _constants.INITIAL_INDICATOR_POSITION_DESKTOP : _constants.INITIAL_INDICATOR_POSITION_MOBILE, " + ").concat(stagePosition(value, rateStages, isDesktop), " + ").concat(isDesktop ? subStagePosition(value, rateStages, isDesktop) : subStagePositionRounded(value, rateStages), ")"),
+    labelOffset: getLabelOffset(value, rateStages)
+  };
 };
 
 exports.getIndicatorPosition = getIndicatorPosition;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/LegendItem/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _WithContextApi = _interopRequireDefault(require("../../../../../../../WithContextApi"));
+
+var _smartBillTypes = require("../../../../../../../../shared/types/smartBillTypes");
+
+var _Magnitude = _interopRequireDefault(require("../../../../../../../Magnitude"));
+
+var _aliases = require("../../../../../../../../shared/constants/aliases");
+
+var _rateStagesTypes = require("../../../../../../../../shared/types/rateStagesTypes");
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var LegendItem = function LegendItem(_ref) {
+  var contextApiInfo = _ref.contextApiInfo,
+      legendNumber = _ref.legendNumber,
+      stage = _ref.stage,
+      showNumber = _ref.showNumber,
+      stagesLength = _ref.stagesLength;
+  var Label = contextApiInfo.Label,
+      config = contextApiInfo.config,
+      assets = contextApiInfo.assets;
+  var texts = config.texts;
+  var _texts$ratesDefinitio = texts.ratesDefinition,
+      consumptionUpToDesktop = _texts$ratesDefinitio.consumptionUpToDesktop,
+      consumptionMoreThanDesktop = _texts$ratesDefinitio.consumptionMoreThanDesktop,
+      consumptionStartingFormDesktop = _texts$ratesDefinitio.consumptionStartingFormDesktop;
+
+  var format = function format(text) {
+    return text.toUpperCase();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: stage ? _stylesModule.default.legendItemContainer : _stylesModule.default.numberItemContainer
+  }, showNumber && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.stageNumber
+  }, /*#__PURE__*/_react.default.createElement(Label, null, legendNumber)), stage && /*#__PURE__*/_react.default.createElement("div", {
+    className: showNumber ? _stylesModule.default.stageDataContainer : _stylesModule.default.noNumberStageDataContainer
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.STAGE_DETAIL,
+    className: _stylesModule.default.header
+  }, format(legendNumber === 1 ? consumptionUpToDesktop : legendNumber === stagesLength ? consumptionMoreThanDesktop : consumptionStartingFormDesktop)), /*#__PURE__*/_react.default.createElement(_Magnitude.default, {
+    numberAlias: _aliases.RATE_STAGE_MAGNITUDE,
+    unitAlias: _aliases.RATE_STAGE_MAGNITUDE,
+    value: legendNumber === 1 ? stage.range.at(-1) : stage.range.at(0),
+    unit: stage.unit,
+    Icon: function Icon() {
+      return /*#__PURE__*/_react.default.createElement(assets.EnergyIcon, {
+        className: _stylesModule.default.rateStagesEnergyIcon
+      });
+    },
+    classes: {
+      container: _stylesModule.default.magnitudeContainer
+    }
+  })));
+};
+
+LegendItem.propTypes = {
+  stage: _rateStagesTypes.stageType,
+  showNumber: true,
+  stagesLength: _propTypes.number,
+  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  legendNumber: _propTypes.number
+};
+
+var _default = (0, _WithContextApi.default)()(LegendItem);
+
+exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/LegendItem/styles.module.scss

@@ -0,0 +1,57 @@
+@import '../../../../../../../../scss/variables/_colors';
+
+$bubble-number-size: 24px;
+
+.legendItemContainer {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.numberItemContainer {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 8px;
+}
+
+.stageDataContainer {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.noNumberStageDataContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-bottom: 16px;
+  width: 100%;
+}
+
+.magnitudeContainer {
+  gap: 8px;
+}
+
+.stageNumber {
+  align-items: center;
+  background-color: $black;
+  border-radius: 500px;
+  display: flex;
+  justify-content: center;
+  min-width: $bubble-number-size;
+  height: $bubble-number-size;
+  width: $bubble-number-size;
+
+  * {
+    color: $white;
+  }
+}
+
+.rateStagesEnergyIcon {
+  height: 18px;
+}

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LAST_SUB_STAGE_MARGIN = exports.SUB_STAGE_MARGIN = exports.STAGE_MARGIN_MOBILE = exports.STAGE_MARGIN_DESKTOP = exports.LAST_STAGE_MARGIN = exports.BARS_MARGIN_MOBILE = exports.BARS_MARGIN_DESKTOP = exports.INITIAL_INDICATOR_POSITION_MOBILE = exports.INITIAL_INDICATOR_POSITION_DESKTOP = exports.DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH = exports.MAX_RANGE_LIMIT = exports.MIN_VALUE = exports.MAX_VALUE = exports.INFINITE = void 0;
+exports.SUB_STAGE_MARGIN_MOBILE = exports.SUB_STAGE_MARGIN_DESKTOP = exports.STAGE_MARGIN_MOBILE = exports.STAGE_MARGIN_DESKTOP = exports.MIN_VALUE = exports.MAX_VALUE = exports.MAX_RANGE_LIMIT = exports.LAST_SUB_STAGE_MARGIN = exports.LAST_STAGE_MARGIN = exports.INITIAL_INDICATOR_POSITION_MOBILE = exports.INITIAL_INDICATOR_POSITION_DESKTOP = exports.INFINITE = exports.INDICATOR_LABEL_LAST_OFFSET = exports.INDICATOR_LABEL_FIRST_OFFSET = exports.INDICATOR_LABEL_DEFAULT_OFFSET = exports.DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH = exports.BARS_MARGIN_MOBILE = exports.BARS_MARGIN_DESKTOP = void 0;
 var INFINITE = null;
 exports.INFINITE = INFINITE;
 var MAX_VALUE = 1;
@@ -14,21 +14,29 @@ var MAX_RANGE_LIMIT = 9999999;
 exports.MAX_RANGE_LIMIT = MAX_RANGE_LIMIT;
 var DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH = 200;
 exports.DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH = DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH;
-var INITIAL_INDICATOR_POSITION_DESKTOP = '27px';
+var INITIAL_INDICATOR_POSITION_DESKTOP = '-4px';
 exports.INITIAL_INDICATOR_POSITION_DESKTOP = INITIAL_INDICATOR_POSITION_DESKTOP;
-var INITIAL_INDICATOR_POSITION_MOBILE = '-24px';
+var INITIAL_INDICATOR_POSITION_MOBILE = '-4px';
 exports.INITIAL_INDICATOR_POSITION_MOBILE = INITIAL_INDICATOR_POSITION_MOBILE;
-var BARS_MARGIN_DESKTOP = '50px';
+var BARS_MARGIN_DESKTOP = '0px';
 exports.BARS_MARGIN_DESKTOP = BARS_MARGIN_DESKTOP;
 var BARS_MARGIN_MOBILE = '0px';
 exports.BARS_MARGIN_MOBILE = BARS_MARGIN_MOBILE;
 var LAST_STAGE_MARGIN = '0px';
 exports.LAST_STAGE_MARGIN = LAST_STAGE_MARGIN;
-var STAGE_MARGIN_DESKTOP = '10px';
+var STAGE_MARGIN_DESKTOP = '4px';
 exports.STAGE_MARGIN_DESKTOP = STAGE_MARGIN_DESKTOP;
-var STAGE_MARGIN_MOBILE = '1px';
+var STAGE_MARGIN_MOBILE = '2px';
 exports.STAGE_MARGIN_MOBILE = STAGE_MARGIN_MOBILE;
-var SUB_STAGE_MARGIN = '1px';
-exports.SUB_STAGE_MARGIN = SUB_STAGE_MARGIN;
+var SUB_STAGE_MARGIN_DESKTOP = '4px';
+exports.SUB_STAGE_MARGIN_DESKTOP = SUB_STAGE_MARGIN_DESKTOP;
+var SUB_STAGE_MARGIN_MOBILE = '2px';
+exports.SUB_STAGE_MARGIN_MOBILE = SUB_STAGE_MARGIN_MOBILE;
 var LAST_SUB_STAGE_MARGIN = '0px';
-exports.LAST_SUB_STAGE_MARGIN = LAST_SUB_STAGE_MARGIN;
+exports.LAST_SUB_STAGE_MARGIN = LAST_SUB_STAGE_MARGIN;
+var INDICATOR_LABEL_FIRST_OFFSET = '0px';
+exports.INDICATOR_LABEL_FIRST_OFFSET = INDICATOR_LABEL_FIRST_OFFSET;
+var INDICATOR_LABEL_LAST_OFFSET = '16px';
+exports.INDICATOR_LABEL_LAST_OFFSET = INDICATOR_LABEL_LAST_OFFSET;
+var INDICATOR_LABEL_DEFAULT_OFFSET = '-48px';
+exports.INDICATOR_LABEL_DEFAULT_OFFSET = INDICATOR_LABEL_DEFAULT_OFFSET;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/styles.module.scss

@@ -5,7 +5,8 @@
 .container {
   display: flex;
   flex-flow: column;
-  width: 80%;
+  width: 100%;
+  padding: $default-container-padding;
 
   @media #{$tablet-mobile} {
     width: 100%;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStageRangeWidth = exports.getSubStageRangeWidth = exports.getCurrentStage = void 0;
+exports.getSubStageRangeWidth = exports.getStageRangeWidth = exports.getCurrentStage = void 0;
 
 var _constants = require("./constants");
 

package/dist/components/RatesDefinition/components/CategoryByConsumption/index.js

@@ -1,28 +1,52 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("prop-types");
 
+var _browser = require("@widergy/web-utils/lib/browser");
+
 var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 
 var _aliases = require("../../../../shared/constants/aliases");
 
+var _deviceSizes = require("../../../../constants/deviceSizes");
+
 var _RateStagesGraph = _interopRequireDefault(require("./components/RateStagesGraph"));
 
 var _Category = _interopRequireDefault(require("./components/Category"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
+var _LegendItem = _interopRequireDefault(require("./components/RateStagesGraph/components/LegendItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var CategoryByConsumption = function CategoryByConsumption(_ref) {
   var contextApiInfo = _ref.contextApiInfo,
       value = _ref.value,
@@ -32,20 +56,50 @@ var CategoryByConsumption = function CategoryByConsumption(_ref) {
       Label = contextApiInfo.Label;
   var rateStages = config.rateStages,
       texts = config.texts;
+
+  var _useState = (0, _react.useState)((0, _browser.isDesktop)(_deviceSizes.TabletBreakpoint)),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDesktopSize = _useState2[0],
+      setIsDesktopSize = _useState2[1];
+
+  var handleResizeScreen = function handleResizeScreen() {
+    return setIsDesktopSize((0, _browser.isDesktop)(_deviceSizes.TabletBreakpoint));
+  };
+
+  (0, _react.useEffect)(function () {
+    window.addEventListener(_browser.RESIZE_EVENT, handleResizeScreen);
+    handleResizeScreen();
+    return function () {
+      return window.removeEventListener(_browser.RESIZE_EVENT, handleResizeScreen);
+    };
+  }, []);
   var valueCorrected = value < 0 ? 0 : value && Math.round(value);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.TITLE,
-    className: _stylesModule.default.title
-  }, texts.ratesDefinition.categoryByConsumptionTitle), /*#__PURE__*/_react.default.createElement("div", {
+    alias: _aliases.TITLE
+  }, texts.ratesDefinition.categoryByConsumptionTitle), isDesktopSize && /*#__PURE__*/_react.default.createElement(_Category.default, {
+    category: category
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.content
-  }, (valueCorrected === 0 || valueCorrected) && /*#__PURE__*/_react.default.createElement(_RateStagesGraph.default, {
+  }, !isDesktopSize && /*#__PURE__*/_react.default.createElement(_Category.default, {
+    category: category,
+    wrap: true
+  }), (valueCorrected === 0 || valueCorrected) && /*#__PURE__*/_react.default.createElement(_RateStagesGraph.default, {
     value: valueCorrected,
     unit: unit,
     rateStages: rateStages
-  }), /*#__PURE__*/_react.default.createElement(_Category.default, {
-    category: category
+  })), !isDesktopSize && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.ratesLegend
+  }, rateStages.map(function (rateStage, index) {
+    return /*#__PURE__*/_react.default.createElement(_LegendItem.default, {
+      legendNumber: index + 1,
+      showNumber: true,
+      stagesLength: rateStages.length,
+      stage: rateStage
+    });
   })));
 };
 

package/dist/components/RatesDefinition/components/CategoryByConsumption/styles.module.scss

@@ -8,13 +8,29 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
-  margin-bottom: 10px;
-  padding: $default-container-padding;
+  margin-bottom: 16px;
+  overflow: hidden;
   width: 100%;
 }
 
-.title {
-  margin-bottom: 25px;
+.header {
+  align-items: center;
+  border-bottom: 1px solid $borders-gray;
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 32px;
+
+  @media #{$tablet-mobile} {
+    justify-content: center;
+  }
+}
+
+.ratesLegend {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid $borders-gray;
+  gap: 24px;
+  padding: 24px;
 }
 
 .content {

package/dist/components/RatesDefinition/components/PurchasedRate/index.js

@@ -13,11 +13,9 @@ var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 
-var _utils = require("../../../../utils");
-
 var _aliases = require("../../../../shared/constants/aliases");
 
-var _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _RateAndCategory = _interopRequireDefault(require("../../../RateAndCategory"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
@@ -26,36 +24,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var PurchasedRate = function PurchasedRate(_ref) {
   var contextApiInfo = _ref.contextApiInfo,
       rate = _ref.rate,
-      description = _ref.description,
+      category = _ref.category,
       _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      billData = _ref.billData;
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
   var config = contextApiInfo.config,
       ExternalLink = contextApiInfo.ExternalLink,
       Label = contextApiInfo.Label;
   var purchasedRateErrorLink = config.externalLinks.purchasedRateErrorLink;
-  var showRateDescription = config.validations.showRateDescription;
   var _config$texts$ratesDe = config.texts.ratesDefinition,
       purchasedRateTitle = _config$texts$ratesDe.purchasedRateTitle,
       purchasedRateError = _config$texts$ratesDe.purchasedRateError;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.TITLE,
-    className: _stylesModule.default.title
+    alias: _aliases.RATE_DATA_SUBTITLE
   }, purchasedRateTitle), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.data
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.rateAndDescription
-  }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.RATE,
-    className: _stylesModule.default.purchasedRate
-  }, (0, _utils.stringOrDash)(rate)), showRateDescription(billData) && /*#__PURE__*/_react.default.createElement(Label, {
-    semibold: true,
-    primary: true,
-    large: true,
-    className: _stylesModule.default.description
-  }, (0, _utils.stringOrDash)(description))), purchasedRateErrorLink && /*#__PURE__*/_react.default.createElement(ExternalLink, {
+  }, /*#__PURE__*/_react.default.createElement(_RateAndCategory.default, {
+    rate: rate,
+    category: category,
+    classes: {
+      container: _stylesModule.default.rateAndCategoryContainer
+    }
+  }), purchasedRateErrorLink && /*#__PURE__*/_react.default.createElement(ExternalLink, {
     url: purchasedRateErrorLink
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.REGULAR_LINK,
@@ -66,8 +57,7 @@ var PurchasedRate = function PurchasedRate(_ref) {
 PurchasedRate.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   rate: _propTypes.string,
-  description: _propTypes.string,
-  billData: _billDataTypes.billDataTypes,
+  category: _propTypes.string,
   classes: (0, _propTypes.shape)({
     container: _propTypes.string
   })