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

package/dist/components/Period/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _propTypes = require("prop-types");
 
@@ -52,7 +52,10 @@ var Period = function Period(_ref) {
       config = contextApiInfo.config,
       Label = contextApiInfo.Label,
       Tooltip = contextApiInfo.Tooltip;
-  var texts = config.texts;
+  var texts = config.texts,
+      formatters = config.formatters,
+      colors = config.colors;
+  var periodFormatter = formatters.periodFormatter;
   var _texts$commons = texts.commons,
       bimester = _texts$commons.bimester,
       ofPreposition = _texts$commons.ofPreposition,
@@ -72,24 +75,46 @@ var Period = function Period(_ref) {
       year = currentPeriod.year;
   var currentSettlement = settlements === null || settlements === void 0 ? void 0 : (_settlements$current = settlements.current) === null || _settlements$current === void 0 ? void 0 : _settlements$current.number;
   var totalSettlements = settlements === null || settlements === void 0 ? void 0 : settlements.total_settlements;
-  var startDate = (0, _moment.default)(settlements === null || settlements === void 0 ? void 0 : settlements.start_date).format('DD/MM');
-  var endDate = (0, _moment.default)(settlements === null || settlements === void 0 ? void 0 : settlements.end_date).format('DD/MM');
+  var startDate = (0, _dayjs.default)(settlements === null || settlements === void 0 ? void 0 : settlements.start_date).format('DD/MM');
+  var endDate = (0, _dayjs.default)(settlements === null || settlements === void 0 ? void 0 : settlements.end_date).format('DD/MM');
   var periodicityLabel = "".concat(multipleSettlements ? (0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.BIMONTHLY) ? bimester : '-' : period, " ").concat((0, _utils.stringOrDash)(periodNumber));
   var settlementLabel = "".concat(settlement, " ").concat((0, _utils.numberOrDash)(currentSettlement), " ").concat(ofPreposition, " ").concat((0, _utils.numberOrDash)(totalSettlements));
-  var issuedDateLabel = "".concat((0, _moment.default)(issueedDate, 'YYYY-MM-DD').format('DD/MM/YYYY'));
+  var issuedDateLabel = "".concat((0, _dayjs.default)(issueedDate, 'YYYY-MM-DD').format('DD/MM/YYYY'));
 
   var issuedOnDateLabel = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.issueDateContainer
   }, /*#__PURE__*/_react.default.createElement(Label, {
     className: _stylesModule.default.issueDate,
-    alias: isDesktopSize ? _aliases.MAIN_SECONDARY : _aliases.HEADER_MAIN
+    alias: isDesktopSize ? _aliases.MAIN_SECONDARY : _aliases.MAIN_LIGHT
   }, "".concat(issuedOnDate, ":&nbsp")), /*#__PURE__*/_react.default.createElement(Label, {
-    medium: true
+    alias: _aliases.PERIOD_ISSUED_DATE
   }, issuedDateLabel)));
 
   var yearAndPeriodicityLabel = "".concat((0, _utils.stringOrDash)(year), " - ").concat(periodicityLabel);
   var bimesterOfYearLabel = "".concat(periodicityLabel, " ").concat(ofPreposition, " ").concat((0, _utils.stringOrDash)(year));
-  return issueedDate ? /*#__PURE__*/_react.default.createElement("div", {
+  return periodFormatter ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: issueedDate ? _stylesModule.default.withIssuedDateContainer : _stylesModule.default.withOutIssuedDateContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.periodHeader
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    alias: desktopAlias,
+    className: _stylesModule.default.periodLabel
+  }, periodFormatter({
+    startDate: settlements === null || settlements === void 0 ? void 0 : settlements.start_date,
+    endDate: settlements === null || settlements === void 0 ? void 0 : settlements.end_date
+  })), !issueedDate && /*#__PURE__*/_react.default.createElement(Tooltip, {
+    content: texts.mainBillData.periodTooltip
+  }, /*#__PURE__*/_react.default.createElement(assets.QuestionsIcon, {
+    style: {
+      fill: colors.tooltipIcon
+    }
+  }))), issueedDate && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.issuedOnDateAndLabel
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.DETAIL
+  }, "".concat(issuedOnDate, ":")), /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.ISSUED_DATE
+  }, issuedDateLabel)))) : issueedDate ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.withIssuedDateContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
@@ -129,11 +154,14 @@ var Period = function Period(_ref) {
     alias: desktopAlias,
     className: _stylesModule.default.periodLabel
   }, yearAndPeriodicityLabel), /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    large: true
+    alias: _aliases.PERIOD_RANGE
   }, "".concat(startDate, " - ").concat(endDate))), multipleSettlements && /*#__PURE__*/_react.default.createElement(Tooltip, {
     content: texts.mainBillData.periodTooltip
-  }, /*#__PURE__*/_react.default.createElement(assets.QuestionsIcon, null)));
+  }, /*#__PURE__*/_react.default.createElement(assets.QuestionsIcon, {
+    style: {
+      fill: colors.tooltipIcon
+    }
+  })));
 };
 
 Period.propTypes = {

package/dist/components/Period/styles.module.scss

@@ -9,11 +9,11 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
+  gap: 8px;
   margin-bottom: 17px;
   padding: $default-container-padding;
 
   @media #{$tablet-mobile} {
-    align-items: center;
     border: 1px solid $borders-dark-gray;
     border-radius: $default-container-border-radius;
     margin-bottom: $default-spacing;
@@ -26,14 +26,15 @@
   border: 1px solid $borders-gray;
   border-radius: $default-container-border-radius;
   display: flex;
+  gap: 16px;
   justify-content: center;
   margin-bottom: $default-spacing;
-  padding: 15px;
+  padding: 16px;
 
   @media #{$tablet-mobile} {
     border: 0;
     margin-bottom: 0;
-    padding: 10px;
+    padding: 16px;
   }
 
   @media #{$desktop} {
@@ -45,7 +46,10 @@
 
 .header {
   align-items: center;
-  margin-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
 
   @media #{$tablet-mobile} {
     border: 0;
@@ -56,6 +60,11 @@
   }
 }
 
+.periodHeader {
+  display: flex;
+  gap: 16px;
+}
+
 .issueDateContainer {
   align-items: baseline;
   display: flex;

package/dist/components/PowerProgresBar/components/PowerConsumption/index.js

@@ -29,6 +29,7 @@ var PowerConsumption = function PowerConsumption(_ref) {
   var Label = contextApiInfo.Label;
   var alias = !isHired ? _aliases.POWER_CONSUMPTION : _aliases.POWER_CONSUMPTION_GRAY;
   var unitAlias = !isHired ? _aliases.POWER_CONSUMPTION_UNIT : _aliases.POWER_CONSUMPTION_UNIT_GRAY;
+  var textAlias = !isHired ? _aliases.POWER_CONSUMPTION_TEXT : _aliases.POWER_CONSUMPTION_TEXT_GRAY;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.powerLabel
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -40,9 +41,7 @@ var PowerConsumption = function PowerConsumption(_ref) {
     alias: unitAlias,
     className: !isHired && powerExceeded && _stylesModule.default.exceededLabel
   }, unit)), /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    gray: isHired,
-    semibold: true,
+    alias: textAlias,
     className: !isHired && powerExceeded && _stylesModule.default.exceededLabel
   }, text));
 };

package/dist/components/PowerProgresBar/index.js

@@ -84,20 +84,19 @@ var PowerProgresBar = function PowerProgresBar(_ref) {
   }), /*#__PURE__*/_react.default.createElement(RegisteredPowerLabel, null))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(RegisteredPowerLabel, null), /*#__PURE__*/_react.default.createElement(HiredPowerLabel, null)))), powerExceeded && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.exceededFooter
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    large: true
+    alias: _aliases.EXCEEDED_POWER_MESSAGE
   }, texts.mainBillData.exceededPower), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.iconAndLabel
   }, /*#__PURE__*/_react.default.createElement(RedAlertIcon, {
     className: _stylesModule.default.labelIcon
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    large: true
+    alias: _aliases.EXCEEDED_POWER_VALUE
   }, "".concat((0, _utils.formatNumber)(exceededPower.value), "&nbsp").concat(hiredPowerConsumption.unit)))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.powerExceededFine
   }, /*#__PURE__*/_react.default.createElement(RedAlertIcon, {
     className: _stylesModule.default.labelIcon
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    large: true,
-    semibold: true,
+    alias: _aliases.EXCEEDED_POWER_FINE,
     className: _stylesModule.default.powerExceededFineLabel
   }, powerExceeded))));
 };

package/dist/components/RatesDefinition/components/BillRate/components/RatePrices/index.js

@@ -23,8 +23,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var RateAndCategory = function RateAndCategory(_ref) {
   var contextApiInfo = _ref.contextApiInfo,
-      rate = _ref.rate,
-      category = _ref.category,
       fixedChargeValue = _ref.fixedChargeValue,
       variableChargeValue = _ref.variableChargeValue;
   var config = contextApiInfo.config,
@@ -32,23 +30,18 @@ var RateAndCategory = function RateAndCategory(_ref) {
       Label = contextApiInfo.Label;
   var ratesTableLink = config.externalLinks.ratesTableLink;
   var _config$texts$ratesDe = config.texts.ratesDefinition,
-      billRatePrices = _config$texts$ratesDe.billRatePrices,
       fixedCharge = _config$texts$ratesDe.fixedCharge,
       variableCharge = _config$texts$ratesDe.variableCharge,
       currency = _config$texts$ratesDe.currency,
       seeRatesTable = _config$texts$ratesDe.seeRatesTable;
-  var rateFormatter = config.formatters.rateFormatter;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.BILL_RATE_PRICES_SUBTITLE,
-    className: _stylesModule.default.title
-  }, "".concat(billRatePrices, " ").concat(rate && category ? rateFormatter(rate, category) : '-')), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.topSubcontainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.charge
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    bold: true,
-    small: true,
+    alias: _aliases.RATE_AND_CATEGORY_MAIN_TEXT,
     className: _stylesModule.default.chargeType
   }, fixedCharge), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.RATE_PRICES_AMOUNT,
@@ -59,9 +52,7 @@ var RateAndCategory = function RateAndCategory(_ref) {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.charge
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    bold: true,
-    small: true,
+    alias: _aliases.RATE_AND_CATEGORY_MAIN_TEXT,
     className: _stylesModule.default.chargeType
   }, variableCharge), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.RATE_PRICES_AMOUNT,
@@ -69,7 +60,7 @@ var RateAndCategory = function RateAndCategory(_ref) {
     variant: "small",
     amount: variableChargeValue,
     currency: currency
-  })), ratesTableLink && /*#__PURE__*/_react.default.createElement(ExternalLink, {
+  }))), ratesTableLink && /*#__PURE__*/_react.default.createElement(ExternalLink, {
     url: ratesTableLink
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.REGULAR_LINK,
@@ -79,8 +70,6 @@ var RateAndCategory = function RateAndCategory(_ref) {
 
 RateAndCategory.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  rate: _propTypes.string,
-  category: _propTypes.string,
   fixedChargeValue: _propTypes.number,
   variableChargeValue: _propTypes.number
 };

package/dist/components/RatesDefinition/components/BillRate/components/RatePrices/styles.module.scss

@@ -1,14 +1,18 @@
 @import '../../../../../../scss/variables/_colorsExport.scss';
 
 .container {
+  align-items: center;
   display: flex;
   flex-flow: column;
+  gap: 24px;
   justify-content: space-between;
-  padding: 0 15px;
 }
 
-.title {
-  margin-top: 3px;
+.topSubcontainer {
+  align-items: center;
+  display: flex;
+  flex-flow: column;
+  gap: 16px;
 }
 
 .charge {
@@ -21,5 +25,6 @@
 }
 
 .link {
+  color: $primary;
   text-decoration: underline;
 }

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

@@ -13,8 +13,6 @@ var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 
-var _RateAndCategory = _interopRequireDefault(require("../../../RateAndCategory"));
-
 var _aliases = require("../../../../shared/constants/aliases");
 
 var _RatePrices = _interopRequireDefault(require("./components/RatePrices"));
@@ -33,24 +31,25 @@ var BillRate = function BillRate(_ref) {
       config = contextApiInfo.config,
       Label = contextApiInfo.Label,
       Tooltip = contextApiInfo.Tooltip;
-  var texts = config.texts;
+  var texts = config.texts,
+      colors = config.colors;
+  var rateFormatter = config.formatters.rateFormatter;
+  var billRatePrices = config.texts.ratesDefinition.billRatePrices;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.titleAndIcon
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.TITLE,
-    className: _stylesModule.default.title
-  }, texts.ratesDefinition.billRateTitle), /*#__PURE__*/_react.default.createElement(Tooltip, {
+    alias: _aliases.RATE_DATA_SUBTITLE
+  }, "".concat(billRatePrices, " ").concat(rate && category ? rateFormatter(rate, category) : '-')), /*#__PURE__*/_react.default.createElement(Tooltip, {
     content: texts.ratesDefinition.billRateTooltip
   }, /*#__PURE__*/_react.default.createElement(assets.QuestionsIcon, {
-    className: _stylesModule.default.icon
+    style: {
+      fill: colors.tooltipIcon
+    }
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.data
-  }, /*#__PURE__*/_react.default.createElement(_RateAndCategory.default, {
-    rate: rate,
-    category: category
-  }), /*#__PURE__*/_react.default.createElement(_RatePrices.default, {
+  }, /*#__PURE__*/_react.default.createElement(_RatePrices.default, {
     rate: rate,
     category: category,
     fixedChargeValue: fixedCharge,

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

@@ -2,48 +2,27 @@
 @import '../../../../scss/variables/_mediaQueries';
 @import '../../../../scss/variables/_sizes.scss';
 
-.container {
-  background-color: $white;
-  border: 1px solid $borders-gray;
-  border-radius: $default-container-border-radius;
+.container {  
+  align-items: center;
   display: flex;
   flex-flow: column;
-  min-width: 320px;
-  padding: $default-container-padding;
-
-  @media #{$desktop} {
-    margin-right: 10px;
-  }
-
-  @media #{$tablet-mobile} {
-    margin-bottom: 10px;
-  }
-}
-
-.title {
-  margin-bottom: 15px;
-  float: left;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
 }
 
 .data {
   display: flex;
   height: 100%;
 
-  @media #{$desktop} {
-    :first-child {
-      grid-gap: 10px;
-    }
-  }
-
   @media #{$tablet-mobile} {
     justify-content: center;
   }
 }
 
 .titleAndIcon {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
   width: 100%;
 }
-
-.icon {
-  float: right;
-}

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

@@ -15,32 +15,36 @@ var _WithContextApi = _interopRequireDefault(require("../../../../../WithContext
 
 var _utils = require("../../../../../../utils");
 
+var _aliases = require("../../../../../../shared/constants/aliases");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Category = function Category(_ref) {
   var contextApiInfo = _ref.contextApiInfo,
-      category = _ref.category;
+      category = _ref.category,
+      wrap = _ref.wrap;
   var config = contextApiInfo.config,
       Label = contextApiInfo.Label;
   var _config$texts = config.texts,
       commons = _config$texts.commons,
       ratesDefinition = _config$texts.ratesDefinition;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
+    className: wrap ? _stylesModule.default.containerWrap : _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    xsmall: true,
+    alias: _aliases.CATEGORY_DEFINITION,
     className: _stylesModule.default.title
   }, ratesDefinition.categoryDefinition), /*#__PURE__*/_react.default.createElement(Label, {
-    xsmall: true,
+    alias: _aliases.CATEGORY,
     className: _stylesModule.default.category
   }, "".concat(commons.category, " ").concat((0, _utils.stringOrDash)(category))));
 };
 
 Category.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  category: _propTypes.string
+  category: _propTypes.string,
+  wrap: _propTypes.bool
 };
 
 var _default = (0, _WithContextApi.default)()(Category);

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

@@ -3,32 +3,25 @@
 @import '../../../../../../scss/variables/_sizes.scss';
 
 .container {
+  align-items: center;
   display: flex;
-  margin-top: 22px;
-
-  @media #{$desktop} {
-    flex-flow: column;
-    width: 20%;
-  }
+  gap: 8px;
+}
 
-  @media #{$tablet-mobile} {
-    align-items: center;
-    justify-content: center;
-    margin-top: 10px;
-  }
+.containerWrap {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0 8px
 }
 
 .title {
-  color: $category;
-
+  justify-content: center;
+  
   @media #{$desktop} {
-    margin-bottom: 5px;
     width: 100%;
   }
-
-  @media #{$tablet-mobile} {
-    margin-right: 10px;
-  }
 }
 
 .category {
@@ -38,6 +31,7 @@
   display: flex;
   font-weight: 450;
   justify-content: center;
+  min-width: fit-content;
   padding: 7px 15px;
 
   @media #{$desktop} {

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/components/SubStage/index.js

@@ -35,14 +35,15 @@ var SubStage = function SubStage(_ref) {
       totalSubStages = _ref.totalSubStages;
   var Label = contextApiInfo.Label;
   var getStageColor = contextApiInfo.config.getStageColor;
+  var width = isDesktop ? "calc(".concat((0, _utils.getSubStageWidth)(stage, subStage), "%)") : "calc(100% / ".concat(stage.sub_rate_stages.length || 1, ")");
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: isLast ? _constants.LAST_SUB_STAGE_MARGIN : _constants.SUB_STAGE_MARGIN,
+      marginRight: isLast ? _constants.LAST_SUB_STAGE_MARGIN : isDesktop ? _constants.SUB_STAGE_MARGIN_DESKTOP : _constants.SUB_STAGE_MARGIN_MOBILE,
       backgroundColor: getStageColor ? getStageColor(index, totalSubStages) : subStage.color,
-      width: "calc(".concat((0, _utils.getSubStageWidth)(stage, subStage), "%)")
+      width: width
     },
     className: _stylesModule.default.container
-  }, isDesktop && /*#__PURE__*/_react.default.createElement(Label, {
+  }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.SUBSTAGE
   }, subStage.name));
 };

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/index.js

@@ -1,28 +1,20 @@
 "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 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("prop-types");
 
 var _rateStagesTypes = require("../../../../../../../../../../shared/types/rateStagesTypes");
 
-var _smartBillTypes = require("../../../../../../../../../../shared/types/smartBillTypes");
-
-var _WithContextApi = _interopRequireDefault(require("../../../../../../../../../WithContextApi"));
-
-var _Magnitude = _interopRequireDefault(require("../../../../../../../../../Magnitude"));
-
-var _aliases = require("../../../../../../../../../../shared/constants/aliases");
-
 var _constants = require("../../../../constants");
 
+var _LegendItem = _interopRequireDefault(require("../../../LegendItem"));
+
 var _LimitsLine = _interopRequireDefault(require("./components/LimitsLine"));
 
 var _SubStage = _interopRequireDefault(require("./components/SubStage"));
@@ -31,63 +23,25 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 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; }
-
 var Stage = function Stage(_ref) {
-  var contextApiInfo = _ref.contextApiInfo,
-      stage = _ref.stage,
-      isFirst = _ref.isFirst,
+  var stage = _ref.stage,
       isLast = _ref.isLast,
       totalStages = _ref.totalStages,
       totalSubStages = _ref.totalSubStages,
+      legendNumber = _ref.legendNumber,
       isDesktop = _ref.isDesktop;
-  var assets = contextApiInfo.assets,
-      config = contextApiInfo.config,
-      Label = contextApiInfo.Label;
-
-  var _ref2 = config.stylesConfig || {},
-      rateStagesEnergyIcon = _ref2.rateStagesEnergyIcon;
-
-  var EnergyIcon = function EnergyIcon() {
-    return /*#__PURE__*/_react.default.createElement(assets.EnergyIconSmall, {
-      className: rateStagesEnergyIcon
-    });
-  };
-
-  var _config$texts$ratesDe = config.texts.ratesDefinition,
-      consumptionUpToDesktop = _config$texts$ratesDe.consumptionUpToDesktop,
-      consumptionUpToMobile = _config$texts$ratesDe.consumptionUpToMobile,
-      consumptionStartingFormDesktop = _config$texts$ratesDe.consumptionStartingFormDesktop,
-      consumptionStartingFormMobile = _config$texts$ratesDe.consumptionStartingFormMobile,
-      consumptionMoreThanDesktop = _config$texts$ratesDe.consumptionMoreThanDesktop,
-      consumptionMoreThanMobile = _config$texts$ratesDe.consumptionMoreThanMobile;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginRight: isLast ? _constants.LAST_STAGE_MARGIN : isDesktop ? _constants.STAGE_MARGIN_DESKTOP : _constants.STAGE_MARGIN_MOBILE,
       width: "calc(".concat(100 / totalStages, "%)")
     },
     className: _stylesModule.default.container
-  }, totalStages !== 1 && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isDesktop ? /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.DETAIL,
-    semibold: true,
-    className: _stylesModule.default.header
-  }, isFirst ? consumptionUpToDesktop : isLast ? consumptionMoreThanDesktop : consumptionStartingFormDesktop) : /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.DETAIL,
-    semibold: true,
-    className: _stylesModule.default.header
-  }, isFirst ? consumptionUpToMobile : isLast ? consumptionMoreThanMobile : consumptionStartingFormMobile), /*#__PURE__*/_react.default.createElement(_Magnitude.default, {
-    numberAlias: _aliases.RATE_STAGE_MAGNITUDE,
-    unitAlias: _aliases.RATE_STAGE_MAGNITUDE,
-    value: isFirst ? stage.range[_constants.MAX_VALUE] : stage.range[_constants.MIN_VALUE],
-    unit: stage.unit,
-    Icon: EnergyIcon,
-    classes: {
-      icon: _stylesModule.default.icon,
-      container: _stylesModule.default.magnitudeContainer
-    }
-  })), /*#__PURE__*/_react.default.createElement(_LimitsLine.default, null), /*#__PURE__*/_react.default.createElement("div", {
+  }, totalStages !== 1 && /*#__PURE__*/_react.default.createElement(_LegendItem.default, {
+    stage: isDesktop && stage,
+    stagesLength: totalStages,
+    legendNumber: legendNumber,
+    showNumber: !isDesktop
+  }), /*#__PURE__*/_react.default.createElement(_LimitsLine.default, null), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.bars
   }, stage.sub_rate_stages.map(function (subStage, index) {
     return /*#__PURE__*/_react.default.createElement(_SubStage.default, {
@@ -103,15 +57,12 @@ var Stage = function Stage(_ref) {
 };
 
 Stage.propTypes = {
-  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   stage: _rateStagesTypes.stageType,
-  isFirst: _propTypes.bool,
+  legendNumber: _propTypes.number,
   isLast: _propTypes.bool,
   totalStages: _propTypes.number,
   totalSubStages: _propTypes.number,
   isDesktop: _propTypes.bool
 };
-
-var _default = (0, _WithContextApi.default)()(Stage);
-
+var _default = Stage;
 exports.default = _default;

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

@@ -10,10 +10,6 @@ $icon-size: 21px;
   width: 100%;
 }
 
-.magnitudeContainer {
-  padding: 15px 0 6px;
-}
-
 .header {
   display: flex;
   white-space: nowrap;
@@ -21,8 +17,8 @@ $icon-size: 21px;
 
 .bars {
   display: flex;
-  margin: 10px 0;
-  min-height: 28px;
+  margin: 24px 0;
+  min-height: 33px;
   width: 100%;
 }
 

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

@@ -42,6 +42,7 @@ var Bars = function Bars(_ref) {
       key: stage.group,
       stage: stage,
       isFirst: index === 0,
+      legendNumber: index + 1,
       isLast: index === rateStages.length - 1,
       totalStages: rateStages.length,
       totalSubStages: totalSubStages,