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

package/dist/components/ConsumptionComparison/components/ComparisonTable/styles.module.scss

@@ -7,15 +7,23 @@
 }
 
 .container {
-  @media #{$desktop} {
-    padding: 20px;
+  padding: 24px;
+  text-align: left;
+
+  @media #{$mobile} {
+    padding: 24px 16px;
   }
 
-  @media #{$tablet-mobile} {
-    padding: 10px;
+  :nth-child(3) {
+    > :last-child {
+      > :last-child {
+        justify-content: flex-end;
+        text-align: right;
+      }
+    }
   }
 }
 
-.mobileLastYear {
-  justify-content: flex-start;
+.numberAndUnit {
+  flex-wrap: wrap;
 }

package/dist/components/ConsumptionComparison/components/ComparisonTable/utils.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mobileGetTableLines = exports.desktopGetTableLines = exports.getPeriodFields = void 0;
+exports.mobileGetTableLines = exports.getPeriodFields = exports.desktopGetTableLines = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _aliases = require("../../../../shared/constants/aliases");
+
 var _DataLine = _interopRequireDefault(require("./components/DataLine"));
 
 var _constants = require("./constants");
@@ -41,7 +43,7 @@ var getPeriodFields = function getPeriodFields(contextApiInfo, period, periodAve
   if (isDesktop && Object.keys(period).length === 0) return [{
     id: 'no_data_cell',
     Component: /*#__PURE__*/_react.default.createElement(Label, {
-      primary: true
+      alias: _aliases.GET_PERIOD_FIELDS_NO_DATA
     }, noData)
   }];
   var noDataLastYearPeriod = false;

package/dist/components/ConsumptionComparison/components/ConsumptionAdvice/index.js

@@ -34,13 +34,10 @@ var ConsumptionAdvice = function ConsumptionAdvice(_ref) {
     className: _stylesModule.default.labelTexts
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
-  }, /*#__PURE__*/_react.default.createElement(LightBulbIcon, {
-    className: _stylesModule.default.icon
-  }), /*#__PURE__*/_react.default.createElement(Label, {
+  }, /*#__PURE__*/_react.default.createElement(LightBulbIcon, null), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.ADVICE_TITLE
   }, texts.consumptionComparison.adviceTitle)), /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    medium: true
+    alias: _aliases.ADVICE_SUBTITLE
   }, texts.consumptionComparison.adviceSubtitle)), /*#__PURE__*/_react.default.createElement(ExternalLink, {
     key: consumptionSimulator,
     url: consumptionSimulator,

package/dist/components/ConsumptionComparison/components/ConsumptionAdvice/styles.module.scss

@@ -18,6 +18,7 @@
 .labelTexts {
   display: flex;
   flex-direction: column;
+  padding-right: 16px;
 
   @media #{$tablet-mobile} {
     align-items: center;
@@ -26,18 +27,16 @@
   }
 }
 
-.icon {
-  margin-right: 10px;
-}
-
 .header {
   align-items: center;
   display: flex;
-  margin-bottom: 10px;
+  gap: 8px;
+  margin-bottom: 16px;
 }
 
 .externalLink {
   text-decoration: none;
+  width: 130px;
 
   @media #{$tablet-mobile} {
     width: 100%;

package/dist/components/ConsumptionComparison/components/PercentageComparison/index.js

@@ -13,6 +13,8 @@ var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 
+var _aliases = require("../../../../shared/constants/aliases");
+
 var _utils = require("./utils");
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -42,11 +44,10 @@ var PercentageComparison = function PercentageComparison(_ref) {
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     className: _stylesModule.default.icon
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    semibold: true,
+    alias: _aliases.PERCENTAGE_COMPARISON_TITLE,
     className: _stylesModule.default.title
   }, "".concat(sign).concat(value, "%"))), /*#__PURE__*/_react.default.createElement(Label, {
-    semibold: true,
-    medium: true,
+    alias: _aliases.PERCENTAGE_COMPARISON_SUBTITLE,
     className: _stylesModule.default.subtitle
   }, text));
 };

package/dist/components/ConsumptionComparison/components/PercentageComparison/styles.module.scss

@@ -11,18 +11,17 @@ $icon-size: 25px;
 
 .container {
   align-items: center;
-  border: 1px solid $borders-gray;
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
+  gap: 16px;
   justify-content: center;
   max-width: 200px;
-  padding: 25px 27px;
+  padding: 24px;
 
   @media #{$tablet-mobile} {
-    margin-bottom: $default-spacing;
     max-width: 100%;
-    padding: 10px 25px;
+    padding: 24px;
     text-align: center;
     width: 100%;
   }
@@ -31,14 +30,6 @@ $icon-size: 25px;
 .header {
   align-items: center;
   display: flex;
-
-  @media #{$tablet-mobile} {
-    margin-right: 15px;
-  }
-
-  @media #{$desktop} {
-    margin-bottom: 10px;
-  }
 }
 
 .icon {

package/dist/components/ConsumptionComparison/index.js

@@ -15,6 +15,8 @@ var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrol
 
 require("react-perfect-scrollbar/dist/css/styles.css");
 
+var _aliases = require("../../shared/constants/aliases");
+
 var _smartBillTypes = require("../../shared/types/smartBillTypes");
 
 var _periods = require("../../shared/utils/periods");
@@ -85,6 +87,7 @@ var ConsumptionComparison = function ConsumptionComparison(_ref) {
     };
   }, []);
   var savingsPercentage = (0, _periods.getSavingsPercentage)(currentPeriod);
+  var showTemp = billData.previous_period_avg_temperature && billData.current_period_avg_temperature;
   var multipleSettlements = (currentPeriod === null || currentPeriod === void 0 ? void 0 : (_currentPeriod$settle = currentPeriod.settlements) === null || _currentPeriod$settle === void 0 ? void 0 : _currentPeriod$settle.total_settlements) > 1;
 
   var ComparisonTableRender = function ComparisonTableRender() {
@@ -108,22 +111,17 @@ var ConsumptionComparison = function ConsumptionComparison(_ref) {
   }, isDesktopSize ? multipleSettlements ? /*#__PURE__*/_react.default.createElement(ComparisonTableRender, null) : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
     ref: scrollbarRef,
     className: _stylesModule.default.scrollBar
-  }, /*#__PURE__*/_react.default.createElement(ComparisonTableRender, null)) : /*#__PURE__*/_react.default.createElement(ComparisonTableRender, null)), !isDesktopSize && /*#__PURE__*/_react.default.createElement(Label, {
-    gray: true,
-    medium: true,
-    className: _stylesModule.default.label
-  }, texts.consumptionComparison.weatherInformationLabel), (savingsPercentage === 0 || savingsPercentage) && /*#__PURE__*/_react.default.createElement(_PercentageComparison.default, {
+  }, /*#__PURE__*/_react.default.createElement(ComparisonTableRender, null)) : /*#__PURE__*/_react.default.createElement(ComparisonTableRender, null)), (savingsPercentage === 0 || savingsPercentage) && /*#__PURE__*/_react.default.createElement(_PercentageComparison.default, {
     savingsPercentage: savingsPercentage,
     multipleSettlements: multipleSettlements
-  })), isDesktopSize && /*#__PURE__*/_react.default.createElement(Label, {
-    gray: true,
-    medium: true,
-    className: _stylesModule.default.label
-  }, texts.consumptionComparison.weatherInformationLabel), multipleSettlements && withBanner ? /*#__PURE__*/_react.default.createElement(_Banner.default, {
+  })), multipleSettlements && withBanner ? /*#__PURE__*/_react.default.createElement(_Banner.default, {
     image: isDesktopSize ? SimulatorBannerIcon : SimulatorBannerResponsiveIcon,
     styleBanner: _stylesModule.default.ConsumptionBannerIcon,
     externalLink: consumptionSimulatorFromBanner
-  }) : /*#__PURE__*/_react.default.createElement(_ConsumptionAdvice.default, null));
+  }) : /*#__PURE__*/_react.default.createElement(_ConsumptionAdvice.default, null), showTemp && /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.WEATHER_PROVIDER_INFORMATION,
+    className: _stylesModule.default.label
+  }, texts.consumptionComparison.weatherInformationLabel));
 };
 
 ConsumptionComparison.propTypes = {

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

@@ -16,8 +16,8 @@
 
 .comparisonComponentsContainer {
   display: flex;
-  grid-gap: 10px;
-  margin-bottom: 10px;
+  gap: 16px;
+  margin-bottom: 16px;
 
   @media #{$tablet-mobile} {
     flex-flow: column;
@@ -25,7 +25,7 @@
 }
 
 .label {
-  margin-bottom: 20px;
+  margin-top: 8px;
 
   > a {
     color: $primary;
@@ -35,6 +35,8 @@
 .comparisonTable {
   background-color: $white;
   border: 1px solid $borders-gray;
+  border-radius: 5px;
+
   @media #{$desktop} {
     display: flex;
     flex-grow: 1;
@@ -46,7 +48,6 @@
   @media #{$tablet-mobile} {
     border-radius: 5px;
     flex-flow: row;
-    margin-bottom: 10px;
   }
 }
 

package/dist/components/ConsumptionEnergyDetails/components/ConsumptionEnergyComparison/index.js

@@ -9,10 +9,12 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _string = require("@widergy/web-utils/lib/string");
 
+var _propTypes = require("prop-types");
+
 var _aliases = require("../../../../shared/constants/aliases");
 
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
@@ -23,6 +25,10 @@ var _PercentageComparison = _interopRequireDefault(require("../PercentageCompari
 
 var _ConsumptionInDaysLabel = _interopRequireDefault(require("../ConsumptionInDaysLabel"));
 
+var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
+
+var _billDataTypes = require("../../../../shared/types/billDataTypes");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -96,7 +102,9 @@ var ConsumptionEnergyComparison = function ConsumptionEnergyComparison(_ref) {
     className: _stylesModule.default.multipleSettlementsInfo
   }, currentIsFirstSettlement && /*#__PURE__*/_react.default.createElement(CurrentSettlement, null), /*#__PURE__*/_react.default.createElement(RemainingSettlement, null), !currentIsFirstSettlement && /*#__PURE__*/_react.default.createElement(CurrentSettlement, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.totalConsumptionContainer
-  }, periodicity && periodNumber && year && /*#__PURE__*/_react.default.createElement(Label, null, "".concat((0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.BIMONTHLY) ? texts.commons.bimester : '-', " ").concat(periodNumber, "/").concat((0, _moment.default)(year, 'YYYY').format('YY'), ":")), /*#__PURE__*/_react.default.createElement(_ConsumptionInDaysLabel.default, {
+  }, periodicity && periodNumber && year && /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.CONSUMPTION_PERIODICITY
+  }, "".concat((0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.BIMONTHLY) ? texts.commons.bimester : '-', " ").concat(periodNumber, "/").concat((0, _dayjs.default)(year, 'YYYY').format('YY'), ":")), /*#__PURE__*/_react.default.createElement(_ConsumptionInDaysLabel.default, {
     consumption: dataValidation(totalConsumption.value),
     unit: dataValidation(totalConsumption.unit),
     totalDays: dataValidation(settlements.total_settlements_days),
@@ -113,6 +121,22 @@ var ConsumptionEnergyComparison = function ConsumptionEnergyComparison(_ref) {
   }));
 };
 
+ConsumptionEnergyComparison.propTypes = {
+  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  multipleSettlements: _propTypes.bool,
+  withPercentage: _propTypes.bool,
+  dataValidation: _propTypes.func,
+  currentConsumption: _billDataTypes.consumptionTypes,
+  remainingConsumption: _billDataTypes.consumptionTypes,
+  totalConsumption: _billDataTypes.consumptionTypes,
+  settlements: _billDataTypes.settlementsTypes,
+  periodicity: _propTypes.string,
+  periodNumber: _propTypes.string,
+  year: _propTypes.string,
+  savingsPercentage: _propTypes.number,
+  currentIsFirstSettlement: _propTypes.bool
+};
+
 var _default = (0, _WithContextApi.default)()(ConsumptionEnergyComparison);
 
 exports.default = _default;

package/dist/components/ConsumptionEnergyDetails/components/ConsumptionEnergyComparison/styles.module.scss

@@ -71,6 +71,8 @@ $border-radius: 5px;
   @extend %consumption-labels;
   border: 1px solid $borders-gray;
   border-right: 0;
+  border-bottom-left-radius: $border-radius;
+  border-top-left-radius: $border-radius;
 }
 
 .totalConsumptionContainer {

package/dist/components/ConsumptionEnergyDetails/components/PercentageComparison/styles.module.scss

@@ -10,7 +10,7 @@ $icon-size: 30px;
   display: flex;
   justify-content: center;
   margin-bottom: $default-spacing;
-  padding: $default-spacing;
+  padding: $default-container-padding;
 }
 
 .iconAndNumberContainer {

package/dist/components/ConsumptionEnergyDetails/index.js

@@ -27,6 +27,8 @@ var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 
 var _utils = require("../../utils");
 
+var _Magnitude = _interopRequireDefault(require("../Magnitude"));
+
 var _ConsumptionEnergyComparison = _interopRequireDefault(require("./components/ConsumptionEnergyComparison"));
 
 var _EnergyTotalConsumption = _interopRequireDefault(require("./components/EnergyTotalConsumption"));
@@ -56,7 +58,8 @@ var ConsumptionEnergyDetails = function ConsumptionEnergyDetails(_ref) {
   var RedAlertIcon = assets.RedAlertIcon;
   var useCosinePhi = validations.useCosinePhi,
       showMultipleSettlementsConsumption = validations.showMultipleSettlementsConsumption,
-      showPercentageComparison = validations.showPercentageComparison;
+      showPercentageComparison = validations.showPercentageComparison,
+      showSingleSettlementDays = validations.showSingleSettlementDays;
   var currentConsumption = (0, _consumptions.getCurrentConsumption)(currentPeriod, _consumptions2.ENERGY_TYPES.ACTIVE);
   var remainingConsumption = (0, _consumptions.getRemainingConsumption)(currentPeriod, _consumptions2.ENERGY_TYPES.ACTIVE);
   var totalConsumption = (0, _consumptions.getTotalConsumption)(currentPeriod, _consumptions2.ENERGY_TYPES.ACTIVE);
@@ -98,16 +101,24 @@ var ConsumptionEnergyDetails = function ConsumptionEnergyDetails(_ref) {
     savingsPercentage: savingsPercentage,
     currentIsFirstSettlement: currentIsFirstSettlement
   }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.multipleSettlementsInfo && _stylesModule.default.percentageContainer
+    className: _stylesModule.default.multipleSettlementsInfo && _stylesModule.default.percentageContainer && showSingleSettlementDays(billData) && _stylesModule.default.singleSettlementDays
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.multipleSettlementsContainer
   }, Title(false), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumption
+  }, /*#__PURE__*/_react.default.createElement(_Magnitude.default, {
+    numberAlias: _aliases.RATE_MAGNITUDE_NUMBER_INDICATOR,
+    unitAlias: _aliases.RATE_MAGNITUDE_UNIT_INDICATOR,
+    value: dataValidation((0, _utils.numberOrDash)(currentConsumption.value)),
+    unit: dataValidation(currentConsumption.unit),
+    xxxlarge: true
+  }))), showSingleSettlementDays(billData) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.singleSettlementDaysContainer
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.RATE_MAGNITUDE_NUMBER_INDICATOR
-  }, "".concat(dataValidation((0, _utils.numberOrDash)(currentConsumption.value)), "&nbsp")), /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.RATE_MAGNITUDE_UNIT_INDICATOR
-  }, dataValidation(currentConsumption.unit))))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, Title(true), /*#__PURE__*/_react.default.createElement("div", {
+    alias: _aliases.CONSUMPTION_PERIODICITY
+  }, texts.mainBillData.singleSettlementConsumptionDays), /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.CONSUMPTION_BIMESTER_DAYS
+  }, "".concat(currentPeriod.settlements.total_settlements_days, " ").concat(texts.commons.days)))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, Title(true), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.indiviadualSettlementInfo
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_EnergyTotalConsumption.default, {
     consumption: dataValidation((0, _utils.numberOrDash)(totalConsumption.value)),
@@ -123,20 +134,19 @@ var ConsumptionEnergyDetails = function ConsumptionEnergyDetails(_ref) {
   }))), powerFactor.alert_message && /*#__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.POWER_FACTOR_EXCEEDED_VALUE
   }, "".concat(powerFactor.magnitude)), /*#__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
-  }, "".concat((0, _utils.formatNumber)(powerFactor.value))))), powerFactor.alert_message && /*#__PURE__*/_react.default.createElement("div", {
+    alias: _aliases.POWER_FACTOR_EXCEEDED_VALUE
+  }, "".concat((0, _utils.formatNumber)(powerFactor.value))))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.energyExceededFine
   }, /*#__PURE__*/_react.default.createElement(RedAlertIcon, {
     className: _stylesModule.default.labelIcon
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    large: true,
-    semibold: true,
+    alias: _aliases.POWER_FACTOR_EXCEEDED_MESSAGE,
     className: _stylesModule.default.energyExceededFineLabel
   }, "".concat(powerFactor.alert_message)))))), showPercentageComparison(billData) && withPercentage && savingsPercentage && /*#__PURE__*/_react.default.createElement(_PercentageComparison.default, {
     savingsPercentage: dataValidation(savingsPercentage),

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

@@ -27,6 +27,18 @@ $border-radius: 5px;
   }
 }
 
+.singleSettlementDays {
+  display: flex;
+  flex-direction: column;
+}
+
+.singleSettlementDaysContainer {
+  border-top: 1px solid $borders-gray; 
+  display: flex;
+  padding: 12px 24px;
+  justify-content: space-between;
+}
+
 .multipleSettlementsContainer {
   align-items: center;
   display: flex;
@@ -36,7 +48,7 @@ $border-radius: 5px;
   text-align: center;
 
   @media #{$tablet-mobile} {
-    padding: $default-container-padding 15px;
+    padding: $default-container-padding;
   }
 }
 

package/dist/components/ConsumptionIncluded/components/TimelineRow/components/Card/index.js

@@ -19,12 +19,10 @@ var _WithContextApi = _interopRequireDefault(require("../../../../../WithContext
 
 var _HeaderConsumption = _interopRequireDefault(require("../HeaderConsumption"));
 
-var _hooks = require("../../../../../../utils/hooks");
-
-var _aliases = require("../../../../../../shared/constants/aliases");
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
+var _utils = require("./utils");
+
 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); }
@@ -49,23 +47,57 @@ var Card = function Card(_ref) {
   var Label = contextApiInfo.Label,
       assets = contextApiInfo.assets,
       config = contextApiInfo.config;
+  var colors = config.colors;
   var consumptionIncluded = config.texts.consumptionIncluded;
-  var EnergyIconSmall = assets.EnergyIconSmall,
-      EnergyIconSmallGray = assets.EnergyIconSmallGray;
-
-  var _useScreenSize = (0, _hooks.useScreenSize)(),
-      isMobileOrTablet = _useScreenSize.isMobileOrTablet;
-
+  var EnergyIcon = assets.EnergyIcon;
   var consumptionText = current ? consumptionIncluded.consumptionIncluded : settlementNumber === 1 ? consumptionIncluded.consumptionBilled : consumptionIncluded.consumptionNotBilled;
-  var magnitudeAlias = consumption ? _aliases.CARD_PRIMARY_MAG : current || isMobileOrTablet && remaining ? _aliases.CARD_WHITE_MAG : _aliases.CARD_GRAY_MAG;
+  var EnergyStyledIcon = {
+    primary: function primary() {
+      return /*#__PURE__*/_react.default.createElement(EnergyIcon, {
+        className: _stylesModule.default.energyIcon,
+        style: {
+          fill: colors.primary
+        }
+      });
+    },
+    white: function white() {
+      return /*#__PURE__*/_react.default.createElement(EnergyIcon, {
+        className: _stylesModule.default.energyIcon,
+        style: {
+          fill: 'white'
+        }
+      });
+    },
+    gray: function gray() {
+      return /*#__PURE__*/_react.default.createElement(EnergyIcon, {
+        className: _stylesModule.default.energyIcon,
+        style: {
+          fill: colors.gray
+        }
+      });
+    }
+  };
+
+  var _getAliases = (0, _utils.getAliases)(consumption, current, remaining),
+      magnitudeAlias = _getAliases.magnitudeAlias,
+      unitAlias = _getAliases.unitAlias,
+      consumptionAlias = _getAliases.consumptionAlias,
+      cardTitleAlias = _getAliases.cardTitleAlias,
+      cardDescriptionAlias = _getAliases.cardDescriptionAlias,
+      cardDescriptionRemainingAlias = _getAliases.cardDescriptionRemainingAlias,
+      cardSubtitleAlias = _getAliases.cardSubtitleAlias,
+      cardConsumptionDescriptionAlias = _getAliases.cardConsumptionDescriptionAlias,
+      cardConsumptionTextAlias = _getAliases.cardConsumptionTextAlias;
+
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(current && _stylesModule.default.containerCurrent, " ").concat(remaining && _stylesModule.default.containerRemaining)
+    className: "".concat(_stylesModule.default.container, " ").concat(current && _stylesModule.default.containerCurrent, " ").concat(remaining && _stylesModule.default.containerRemaining),
+    style: current && {
+      border: "1px solid ".concat(colors.primary)
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    semibold: consumption,
-    xlarge: consumption,
-    gray: remaining || current,
+    alias: cardTitleAlias,
     className: consumption && _stylesModule.default.titleAndSubtitles
   }, cardTitle), consumption ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.datesContainer
@@ -74,58 +106,45 @@ var Card = function Card(_ref) {
     startDate: initialDate,
     endDate: finalDate
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    large: true,
-    bold: true,
+    alias: cardDescriptionAlias,
     className: _stylesModule.default.titleAndSubtitles
   }, cardDescription1)) : /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    semibold: true,
-    xlarge: true,
-    gray: remaining,
+    alias: cardSubtitleAlias,
     className: _stylesModule.default.subtitle
   }, cardSubtitle), cardDescription2 && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.daysRank
   }, /*#__PURE__*/_react.default.createElement(assets.CalendarIcon, {
     className: "".concat(_stylesModule.default.calendarIcon, " ").concat(remaining && _stylesModule.default.calendarIconRemaining)
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    bold: true,
-    large: true,
-    gray: remaining,
+    alias: cardDescriptionRemainingAlias,
     className: current && _stylesModule.default.titleAndSubtitles
   }, cardDescription2))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.content, " ").concat(current && _stylesModule.default.currentContent, " ").concat(remaining && _stylesModule.default.remainingContent)
+    className: "".concat(_stylesModule.default.content, " ").concat(current && _stylesModule.default.currentContent, " ").concat(remaining && _stylesModule.default.remainingContent),
+    style: current && {
+      backgroundColor: colors.primary
+    }
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    primary: consumption,
-    white: current || isMobileOrTablet && remaining,
-    bold: consumption || current,
-    semibold: remaining,
-    xlarge: true,
-    gray: !isMobileOrTablet && remaining,
+    alias: consumptionAlias,
     className: !consumption && _stylesModule.default.consumptionLabel
   }, "".concat(consumptionIncluded.consumption, ":")), /*#__PURE__*/_react.default.createElement("div", {
     className: !consumption && _stylesModule.default.consumptionRank
   }, /*#__PURE__*/_react.default.createElement(_Magnitude.default, {
     numberAlias: magnitudeAlias,
-    unitAlias: magnitudeAlias,
+    unitAlias: unitAlias,
     value: value,
     unit: unit,
-    Icon: consumption || current ? EnergyIconSmall : EnergyIconSmallGray,
+    Icon: consumption ? EnergyStyledIcon.primary : current ? EnergyStyledIcon.white : EnergyStyledIcon.gray,
     classes: {
       icon: current ? _stylesModule.default.currentIcon : _stylesModule.default.consumptionIcon,
       unitLabel: _stylesModule.default.unitLabel
     }
   }), !consumption && /*#__PURE__*/_react.default.createElement(Label, {
-    white: current || isMobileOrTablet && remaining,
-    gray: !isMobileOrTablet && remaining,
-    large: true,
-    semibold: true
-  }, " ".concat(cardDescription1))))), !consumption && /*#__PURE__*/_react.default.createElement("div", {
+    alias: cardConsumptionDescriptionAlias,
+    className: _stylesModule.default.cardConsumptionDescription
+  }, cardDescription1)))), !consumption && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.footer, " ").concat(current && currentIsFirstSettlement ? _stylesModule.default.currentFooter : _stylesModule.default.footerDisabled, " ").concat(remaining && !currentIsFirstSettlement ? _stylesModule.default.currentFooter : _stylesModule.default.footerDisabled)
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    semibold: current,
-    medium: true,
-    primary: current,
-    gray: remaining,
+    alias: cardConsumptionTextAlias,
     className: _stylesModule.default.footerLabel
   }, consumptionText)));
 };