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

package/dist/components/ConsumptionIncluded/components/TimelineRow/components/Card/styles.module.scss

@@ -13,6 +13,7 @@ $container-margin-bottom-size: 24px;
   background: $white;
   border: 1px solid $borders-dark-gray;
   border-radius: $default-container-border-radius;
+  width: 100%;
 }
 
 .containerCurrent {
@@ -31,6 +32,10 @@ $container-margin-bottom-size: 24px;
   display: flex;
   flex-direction: column;
   padding: 25px 0;
+
+  @media #{$desktop} {
+    width: 400px;
+  }
 }
 
 .titleAndSubtitles {
@@ -38,15 +43,7 @@ $container-margin-bottom-size: 24px;
 }
 
 .subtitle {
-  @media #{$desktop} {
-    padding: 5px 100px 20px;
-  }
-  @media (max-width: 1120px) {
-    padding: 5px 50px 20px;
-  }
-  @media #{$tablet-mobile} {
-    padding: 5px 100px 20px;
-  }
+  padding: 5px;
 }
 
 .daysRank {
@@ -69,20 +66,23 @@ $container-margin-bottom-size: 24px;
   display: flex;
   justify-content: space-between;
   min-height: 65px;
-  padding: 5px 24px;
+  padding: 16px 24px;
 }
 
 .currentContent {
-  background-color: $primary;
   @media #{$tablet-mobile} {
     display: block;
   }
 }
 
+.energyIcon {
+  margin-right: 16px;
+  width: 16px;
+}
+
 .remainingContent {
-  background-color: $light-gray;
+  background-color: $borders-gray;
   @media #{$tablet-mobile} {
-    background-color: $dark-gray;
     display: block;
   }
 }
@@ -96,11 +96,18 @@ $container-margin-bottom-size: 24px;
 .consumptionRank {
   align-items: flex-end;
   display: flex;
+  flex-wrap: wrap;
+
   @media #{$tablet-mobile} {
     justify-content: center;
   }
 }
 
+.cardConsumptionDescription {
+  padding-left: 4px;
+  margin-bottom: 2px;
+}
+
 .footer {
   align-items: center;
   background-color: $footer-current-included-consumption;
@@ -121,22 +128,28 @@ $container-margin-bottom-size: 24px;
       height: 1px;
       position: absolute;
       transform: rotate(90deg);
-      width: 65px;
+      width: 89px;
     }
   }
 }
 
 .footerDisabled {
-  @media #{$desktop} {
-    background-color: $light-gray;
-  }
+    background-color: $borders-gray;
 }
 
 .datesContainer {
   align-items: center;
-  padding: 20px 60px 0;
-  @media #{$desktop} {
-    display: flex;
+  display: flex;
+  justify-content: center;
+  padding-top: 16px;
+  width: 330px;
+
+  @media #{$tablet} {
+    width: 400px;
+  }
+
+  @media #{$mobile} {
+    max-width: 600px;
   }
 }
 

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAliases = void 0;
+
+var _aliases = require("../../../../../../shared/constants/aliases");
+
+var getAliases = function getAliases(consumption, current, remaining) {
+  return {
+    magnitudeAlias: consumption ? _aliases.CARD_PRIMARY_MAGNITUDE : current ? _aliases.CARD_WHITE_MAGNITUDE : _aliases.CARD_GRAY_MAGNITUDE,
+    unitAlias: consumption ? _aliases.CARD_PRIMARY_UNIT : current ? _aliases.CARD_WHITE_UNIT : _aliases.CARD_GRAY_UNIT,
+    consumptionAlias: consumption ? _aliases.CARD_PRIMARY_CONSUMPTION : current ? _aliases.CARD_WHITE_CONSUMPTION : _aliases.CARD_GRAY_CONSUMPTION,
+    cardTitleAlias: consumption ? _aliases.CARD_MAIN_TITLE : _aliases.CARD_SECONDARY_TITLE,
+    cardDescriptionAlias: _aliases.CARD_DESCRIPTION,
+    cardDescriptionRemainingAlias: remaining ? _aliases.CARD_DESCRIPTION_REMAINING : _aliases.CARD_DESCRIPTION,
+    cardSubtitleAlias: remaining ? _aliases.CARD_SUBTITLE_REMAINING : _aliases.CARD_SUBTITLE,
+    cardConsumptionDescriptionAlias: current ? _aliases.CARD_CONSUMPTION_DESCRIPTION_WHITE : _aliases.CARD_CONSUMPTION_DESCRIPTION_GRAY,
+    cardConsumptionTextAlias: current ? _aliases.CARD_CONSUMPTION_TEXT_CURRENT : _aliases.CARD_CONSUMPTION_TEXT_REMAINING
+  };
+};
+
+exports.getAliases = getAliases;

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

@@ -9,12 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("prop-types");
 
-var _momentWithLocales = _interopRequireDefault(require("moment/min/moment-with-locales"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 
+var _aliases = require("../../../../../../shared/constants/aliases");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,25 +28,17 @@ var HeaderConsumption = function HeaderConsumption(_ref) {
   var Label = contextApiInfo.Label,
       assets = contextApiInfo.assets,
       config = contextApiInfo.config;
-  var texts = config.texts;
+  var _config$texts$commons = config.texts.commons,
+      ofPreposition = _config$texts$commons.ofPreposition,
+      toPreposition = _config$texts$commons.toPreposition;
   var CalendarIcon = assets.CalendarIcon;
 
-  _momentWithLocales.default.locale('es');
-
-  var formatDate = function formatDate(date) {
-    return (0, _momentWithLocales.default)(date, 'DD-MM-YYYY');
-  };
-
-  var dateDay = function dateDay(date) {
-    return formatDate(date).format('DD');
-  };
-
-  var firstDateMonth = function firstDateMonth(date) {
-    return formatDate(date).format('MMM').replace('.', '');
+  var parseDate = function parseDate(date) {
+    return (0, _dayjs.default)(date, 'DD/MM/YYYY');
   };
 
-  var getDate = function getDate(date) {
-    return "".concat(dateDay(date), " ").concat(texts.commons.ofPreposition, " ").concat(firstDateMonth(date));
+  var formatDate = function formatDate(date) {
+    return "".concat(parseDate(date).format('DD'), " ").concat(ofPreposition, " ").concat(parseDate(date).format('MMM'));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -54,9 +48,9 @@ var HeaderConsumption = function HeaderConsumption(_ref) {
   }, /*#__PURE__*/_react.default.createElement(CalendarIcon, {
     className: _stylesModule.default.calendarIcon
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    className: _stylesModule.default.label,
-    large: true
-  }, "".concat(getDate(startDate), " ").concat(texts.commons.toPreposition, " ").concat(getDate(endDate)))));
+    alias: _aliases.HEADER_CONSUMPTION,
+    className: _stylesModule.default.label
+  }, "".concat(formatDate(startDate), " ").concat(toPreposition, " ").concat(formatDate(endDate)))));
 };
 
 HeaderConsumption.propTypes = {

package/dist/components/ConsumptionIncluded/components/TimelineRow/components/HeaderConsumption/styles.module.scss

@@ -15,11 +15,7 @@
   text-align: center;
 
   &:first-child {
-    margin-right: 20px;
-    @media #{$tablet-mobile} {
-      margin-bottom: 10px;
-      margin-right: 0;
-    }
+    margin-right: 8px;
   }
 }
 
@@ -28,7 +24,8 @@
 }
 
 .calendarIcon {
-  margin-right: 5px;
+  margin-right: 8px;
+  min-width: 25px;
   width: 25px;
   @media #{$desktop} {
     fill: $dark-gray;

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

@@ -13,6 +13,8 @@ var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 
+var _aliases = require("../../../../../../shared/constants/aliases");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,20 +27,16 @@ var HeaderSettlement = function HeaderSettlement(_ref) {
   var Label = contextApiInfo.Label,
       config = contextApiInfo.config;
   var consumptionIncluded = config.texts.consumptionIncluded;
+  var mainLabelAlias = isRemaining ? _aliases.HEADER_SETTLEMENT_REMAINING : _aliases.HEADER_SETTLEMENT;
+  var dateLabelAlias = isRemaining ? _aliases.HEADER_SETTLEMENT_REMAINING_DATE : _aliases.HEADER_SETTLEMENT_DATE;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(isRemaining && _stylesModule.default.disabledContainer)
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    xsmall: true,
-    gray: isRemaining
+    alias: mainLabelAlias
   }, consumptionIncluded.dateOfIssue), /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    xsmall: true,
-    gray: isRemaining
+    alias: mainLabelAlias
   }, "".concat(consumptionIncluded.settlement, " ").concat(settlementNumber)), /*#__PURE__*/_react.default.createElement(Label, {
-    bold: true,
-    primary: true,
-    gray: isRemaining
+    alias: dateLabelAlias
   }, date));
 };
 

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

@@ -42,7 +42,9 @@ var TimelineRow = function TimelineRow(_ref) {
       isCurrent = _ref.isCurrent,
       isRemaining = _ref.isRemaining,
       currentIsFirstSettlement = _ref.currentIsFirstSettlement;
-  var assets = contextApiInfo.assets;
+  var assets = contextApiInfo.assets,
+      config = contextApiInfo.config;
+  var colors = config.colors;
   var Minicheck = assets.Minicheck,
       MinicheckRemaining = assets.MinicheckRemaining,
       ClockIcon = assets.ClockIcon;
@@ -74,7 +76,10 @@ var TimelineRow = function TimelineRow(_ref) {
     initialDate: startDate,
     finalDate: endDate
   }))), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, currentIsFirstSettlement ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Minicheck, {
-    className: "".concat(_stylesModule.default.minicheck, " ").concat(_stylesModule.default.firstSettlement)
+    className: "".concat(_stylesModule.default.minicheck, " ").concat(_stylesModule.default.firstSettlement),
+    style: {
+      fill: colors.primary
+    }
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.dot, " ").concat(_stylesModule.default.secondSettlement, " ")
   }, /*#__PURE__*/_react.default.createElement(ClockIcon, {
@@ -84,7 +89,10 @@ var TimelineRow = function TimelineRow(_ref) {
   }, /*#__PURE__*/_react.default.createElement(MinicheckRemaining, {
     className: "".concat(_stylesModule.default.remainingMinicheck, " ").concat(_stylesModule.default.firstSettlement, " ")
   })), /*#__PURE__*/_react.default.createElement(Minicheck, {
-    className: "".concat(_stylesModule.default.minicheck, " ").concat(_stylesModule.default.secondSettlement)
+    className: "".concat(_stylesModule.default.minicheck, " ").concat(_stylesModule.default.secondSettlement),
+    style: {
+      fill: colors.primary
+    }
   })))) : /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.cardContainer
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/ConsumptionIncluded/components/TimelineRow/styles.module.scss

@@ -14,7 +14,6 @@ $height-check-icon: 24px;
   @media #{$tablet-mobile} {
     align-items: center;
     display: flex;
-    padding: 10px 15px 10px 5px;
   }
 }
 
@@ -68,13 +67,13 @@ $height-check-icon: 24px;
   @extend %headerContainer;
   @media #{$desktop} {
     border-bottom: 1px solid $borders-gray;
-    padding: 10px 30px;
+    padding: 10px 16px;
   }
 }
 
 .headerContainer {
   @extend %headerContainer;
-  padding-top: 15px;
+  padding-top: 32px;
 }
 
 .firstSettlement {
@@ -83,7 +82,7 @@ $height-check-icon: 24px;
     left: 0;
   }
   @media #{$tablet-mobile} {
-    bottom: -12%;
+    bottom: -35px;
   }
 }
 
@@ -93,7 +92,7 @@ $height-check-icon: 24px;
     right: 0;
   }
   @media #{$tablet-mobile} {
-    bottom: -140%;
+    bottom: -193%;
   }
 }
 
@@ -142,7 +141,7 @@ $height-check-icon: 24px;
 .consumptionCard {
   padding: 0 10px 20px;
   @media #{$tablet-mobile} {
-    padding: 10px 10px 10px 20px;
+    padding: 0;
     text-align: center;
   }
 
@@ -150,6 +149,8 @@ $height-check-icon: 24px;
     background: $borders-gray;
     content: '';
     position: absolute;
+    z-index: -999;
+
     @media #{$desktop} {
       height: 30px;
       right: 50%;
@@ -159,9 +160,9 @@ $height-check-icon: 24px;
     @media #{$tablet-mobile} {
       bottom: -23px;
       height: 1px;
-      left: 41.5%;
+      left: calc(50% - 40px);
       transform: rotate(90deg);
-      width: 65px;
+      width: 80px;
     }
   }
 }
@@ -172,12 +173,8 @@ $height-check-icon: 24px;
   flex-direction: column;
   padding: 0 10px 20px;
 
-  @media (max-width: 1036px) {
-    padding: 0 0 20px;
-  }
-
   @media #{$tablet-mobile} {
-    padding: 10px;
+    padding: 0;
   }
 }
 

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

@@ -9,6 +9,11 @@
     display: flex;
     flex-direction: column;
   }
+
+  @media #{$tablet-mobile} {
+    max-width: 500px;
+    width: 100%;
+  }
 }
 
 .titleContainer {

package/dist/components/ConsumptionIncluded/utils.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dataMapper = exports.getBimesterDate = void 0;
+exports.getBimesterDate = exports.dataMapper = void 0;
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _string = require("@widergy/web-utils/lib/string");
 
@@ -80,8 +80,8 @@ var consumptionMapper = function consumptionMapper(period, texts) {
   var _period$settlements6, _period$settlements7;
 
   return {
-    startDate: period !== null && period !== void 0 && (_period$settlements6 = period.settlements) !== null && _period$settlements6 !== void 0 && _period$settlements6.start_date ? (0, _moment.default)(period.settlements.start_date).format('DD/MM/YYYY') : '-',
-    endDate: period !== null && period !== void 0 && (_period$settlements7 = period.settlements) !== null && _period$settlements7 !== void 0 && _period$settlements7.end_date ? (0, _moment.default)(period.settlements.end_date).format('DD/MM/YYYY') : '-',
+    startDate: period !== null && period !== void 0 && (_period$settlements6 = period.settlements) !== null && _period$settlements6 !== void 0 && _period$settlements6.start_date ? (0, _dayjs.default)(period.settlements.start_date).format('DD/MM/YYYY') : '-',
+    endDate: period !== null && period !== void 0 && (_period$settlements7 = period.settlements) !== null && _period$settlements7 !== void 0 && _period$settlements7.end_date ? (0, _dayjs.default)(period.settlements.end_date).format('DD/MM/YYYY') : '-',
     cardTitle: getBimesterDateTitle(period, texts),
     cardSubtitle: texts.consumption,
     cardDescription1: getTotalDaysDescriptionComsumption(period, texts),
@@ -102,7 +102,7 @@ var settlementCurrentMapper = function settlementCurrentMapper(period, texts) {
     cardDescription2: getTotalDaysDescriptionSettlement(period, texts, getCurrent),
     value: (0, _consumptions.getCurrentConsumption)(period, _consumptions2.ENERGY_TYPES.ACTIVE).value,
     unit: (0, _consumptions.getCurrentConsumption)(period, _consumptions2.ENERGY_TYPES.ACTIVE).unit,
-    date: period !== null && period !== void 0 && (_period$settlements8 = period.settlements) !== null && _period$settlements8 !== void 0 && (_period$settlements8$ = _period$settlements8.current) !== null && _period$settlements8$ !== void 0 && _period$settlements8$.issued_on ? (0, _moment.default)(period.settlements.current.issued_on, 'YYYY-MM-DD').format('DD/MM/YYYY') : '-',
+    date: period !== null && period !== void 0 && (_period$settlements8 = period.settlements) !== null && _period$settlements8 !== void 0 && (_period$settlements8$ = _period$settlements8.current) !== null && _period$settlements8$ !== void 0 && _period$settlements8$.issued_on ? (0, _dayjs.default)(period.settlements.current.issued_on, 'YYYY-MM-DD').format('DD/MM/YYYY') : '-',
     settlementNumber: (period === null || period === void 0 ? void 0 : (_period$settlements9 = period.settlements) === null || _period$settlements9 === void 0 ? void 0 : (_period$settlements9$ = _period$settlements9.current) === null || _period$settlements9$ === void 0 ? void 0 : _period$settlements9$.number) || '-',
     isCurrent: true,
     order: period === null || period === void 0 ? void 0 : (_period$settlements10 = period.settlements) === null || _period$settlements10 === void 0 ? void 0 : (_period$settlements11 = _period$settlements10.current) === null || _period$settlements11 === void 0 ? void 0 : _period$settlements11.number
@@ -119,7 +119,7 @@ var settlementRemainingMapper = function settlementRemainingMapper(period, texts
     cardDescription2: getTotalDaysDescriptionSettlement(period, texts, getRemaining),
     value: (0, _consumptions.getRemainingConsumption)(period, _consumptions2.ENERGY_TYPES.ACTIVE).value,
     unit: (0, _consumptions.getRemainingConsumption)(period, _consumptions2.ENERGY_TYPES.ACTIVE).unit,
-    date: (period === null || period === void 0 ? void 0 : (_period$settlements12 = period.settlements) === null || _period$settlements12 === void 0 ? void 0 : (_period$settlements13 = _period$settlements12.remaining) === null || _period$settlements13 === void 0 ? void 0 : _period$settlements13.length) > 0 ? (0, _moment.default)(period.settlements.remaining[0].issued_on, 'YYYY-MM-DD').format('DD/MM/YYYY') : '-',
+    date: (period === null || period === void 0 ? void 0 : (_period$settlements12 = period.settlements) === null || _period$settlements12 === void 0 ? void 0 : (_period$settlements13 = _period$settlements12.remaining) === null || _period$settlements13 === void 0 ? void 0 : _period$settlements13.length) > 0 ? (0, _dayjs.default)(period.settlements.remaining[0].issued_on, 'YYYY-MM-DD').format('DD/MM/YYYY') : '-',
     settlementNumber: (period === null || period === void 0 ? void 0 : (_period$settlements14 = period.settlements) === null || _period$settlements14 === void 0 ? void 0 : (_period$settlements15 = _period$settlements14.remaining) === null || _period$settlements15 === void 0 ? void 0 : (_period$settlements16 = _period$settlements15[0]) === null || _period$settlements16 === void 0 ? void 0 : _period$settlements16.number) || '-',
     isRemaining: true,
     order: period === null || period === void 0 ? void 0 : (_period$settlements17 = period.settlements) === null || _period$settlements17 === void 0 ? void 0 : (_period$settlements18 = _period$settlements17.remaining) === null || _period$settlements18 === void 0 ? void 0 : (_period$settlements19 = _period$settlements18[0]) === null || _period$settlements19 === void 0 ? void 0 : _period$settlements19.number

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/components/ReadingRow/styles.module.scss

@@ -3,6 +3,8 @@
 .container {
   align-items: center;
   display: flex;
+  gap: 16px;
   justify-content: space-between;
   width: 100%;
+  padding: 0 24px;
 }

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("prop-types");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _aliases = require("../../../../shared/constants/aliases");
 
@@ -41,7 +41,7 @@ var ConsumptionSummary = function ConsumptionSummary(_ref) {
   var texts = config.texts;
 
   var formatDate = function formatDate(date) {
-    return (0, _moment.default)(date).format('DD/MM/YYYY');
+    return (0, _dayjs.default)(date).format('DD/MM/YYYY');
   };
 
   var daysLabel = totalSettlementsDays ? "(".concat(totalSettlementsDays, " ").concat(texts.consumptionPeriod.days, ")") : '';
@@ -49,11 +49,13 @@ var ConsumptionSummary = function ConsumptionSummary(_ref) {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, periodNumber && year && /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.SUMMARY_TITLE,
-    primary: true
-  }, "".concat(texts.commons.bimester, " ").concat(periodNumber, "/").concat((0, _moment.default)(year, 'YYYY').format('YY'))), initialReadingDate && finalReadingDate && /*#__PURE__*/_react.default.createElement(Label, {
+    className: _stylesModule.default.summaryTitle
+  }, "".concat(texts.commons.bimester, " ").concat(periodNumber, "/").concat((0, _dayjs.default)(year, 'YYYY').format('YY'))), initialReadingDate && finalReadingDate && /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.SUMMARY_SUBTITLE,
     className: _stylesModule.default.daysLabel
-  }, "".concat(formatDate(initialReadingDate), " - ").concat(formatDate(finalReadingDate), " ").concat(daysLabel)), /*#__PURE__*/_react.default.createElement(_ReadingRow.default, {
+  }, "".concat(formatDate(initialReadingDate), " - ").concat(formatDate(finalReadingDate), " ").concat(daysLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.substractionContainer
+  }, /*#__PURE__*/_react.default.createElement(_ReadingRow.default, {
     alias: _aliases.SUMMARY_ROW,
     numberAlias: _aliases.SUMMARY_ROW_NUMBER,
     text: texts.consumptionPeriod.finalReading,
@@ -78,7 +80,7 @@ var ConsumptionSummary = function ConsumptionSummary(_ref) {
     text: texts.consumptionPeriod.currentPeriodConsumption,
     value: totalConsumptionValue,
     unit: totalConsumptionUnit
-  }));
+  })));
 };
 
 ConsumptionSummary.propTypes = {

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/styles.module.scss

@@ -8,24 +8,36 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
-  padding: 5px 40px;
+  padding: 16px 24px 24px;
 }
 
 .daysLabel {
-  margin-bottom: 10px;
+  margin-bottom: 24px;
 }
 
 .substraction {
   display: flex;
   justify-content: flex-end;
-  margin-right: 130px;
+  padding-right: 124px;
   width: 100%;
 }
 
 .dash {
-  background-color: $primary;
+  background-color: $borders-gray;
   height: 2px;
   margin: 5px 0;
   opacity: 0.3;
   width: 100%;
 }
+
+.summaryTitle {
+  padding-bottom: 8px;
+}
+
+.substractionContainer {
+  display: flex;
+  flex-direction: column;
+  height: 144px;
+  justify-content: space-around;
+  width: 100%;
+}

package/dist/components/ConsumptionPeriod/components/HistoryGraph/index.js

@@ -69,14 +69,8 @@ var HistoryGraph = function HistoryGraph(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement(_BarChart.default, {
-    data: consumptionHistoryData.periods,
-    dataKey: "period",
     unit: consumptionHistoryData.unit,
-    bars: [{
-      key: 'consumption'
-    }],
-    currentPeriod: consumptionHistoryData.currentPeriod,
-    lastYearPeriod: consumptionHistoryData.lastYearPeriod,
+    data: consumptionHistoryData.periods,
     isDesktop: isDesktopSize
   }));
 };

package/dist/components/ConsumptionPeriod/components/Reading/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("prop-types");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _numeral = _interopRequireDefault(require("config/numeral"));
 
@@ -40,8 +40,12 @@ var Reading = function Reading(_ref) {
       config = contextApiInfo.config,
       Label = contextApiInfo.Label,
       Tooltip = contextApiInfo.Tooltip;
-  var texts = config.texts;
-  var InfoIcon = assets.InfoIcon;
+  var texts = config.texts,
+      colors = config.colors;
+  var InfoIcon = assets.InfoIcon,
+      ReadingDateIcon = assets.ReadingDateIcon,
+      ReadingTypeIcon = assets.ReadingTypeIcon,
+      EnergyIcon = assets.EnergyIcon;
 
   var TitleLabel = function TitleLabel() {
     return /*#__PURE__*/_react.default.createElement(Label, {
@@ -50,6 +54,14 @@ var Reading = function Reading(_ref) {
     }, title);
   };
 
+  var EnergyIconStyled = function EnergyIconStyled() {
+    return /*#__PURE__*/_react.default.createElement(EnergyIcon, {
+      style: {
+        fill: colors.primary
+      }
+    });
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, tooltip ? /*#__PURE__*/_react.default.createElement("div", {
@@ -57,18 +69,23 @@ var Reading = function Reading(_ref) {
   }, /*#__PURE__*/_react.default.createElement(TitleLabel, null), /*#__PURE__*/_react.default.createElement(Tooltip, {
     content: readingType === _readings.READING_TYPES.ESTIMATED ? texts.consumptionPeriod.estimatedReadingTooltip : texts.consumptionPeriod.faceToFaceReadingTooltip
   }, /*#__PURE__*/_react.default.createElement(InfoIcon, {
+    style: {
+      fill: colors.tooltipIcon
+    },
     className: _stylesModule.default.infoIconTooltip
-  }))) : /*#__PURE__*/_react.default.createElement(TitleLabel, null), date && /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.ReadingDateIcon,
+  }))) : /*#__PURE__*/_react.default.createElement(TitleLabel, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.detailsContainer
+  }, date && /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
+    Icon: ReadingDateIcon,
     mainAlias: _aliases.READING_MAIN,
     secondaryAlias: _aliases.READING_DETAIL,
-    mainText: (0, _moment.default)(date).format('DD/MM/YYYY'),
+    mainText: (0, _dayjs.default)(date).format('DD/MM/YYYY'),
     secondaryText: texts.consumptionPeriod.readingDate,
     classes: {
       container: _stylesModule.default.iconAndDetailsContainer
     }
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.ReadingTypeIcon,
+    Icon: ReadingTypeIcon,
     mainAlias: _aliases.READING_MAIN,
     secondaryAlias: _aliases.READING_DETAIL,
     mainText: readingType === _readings.READING_TYPES.FACE_TO_FACE ? texts.commons.faceToFaceReading : readingType === _readings.READING_TYPES.ESTIMATED ? texts.commons.estimatedReading : '-',
@@ -77,7 +94,7 @@ var Reading = function Reading(_ref) {
       container: _stylesModule.default.iconAndDetailsContainer
     }
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.EnergyIcon,
+    Icon: EnergyIconStyled,
     mainAlias: _aliases.READING_STATE,
     secondaryAlias: _aliases.READING_STATE_DETAIL,
     secondaryText: texts.consumptionPeriod.meterReading,
@@ -86,7 +103,7 @@ var Reading = function Reading(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.READING_STATE
-  }, (0, _numeral.default)(readingValue).format('0,0'))));
+  }, (0, _numeral.default)(readingValue).format('0,0')))));
 };
 
 Reading.propTypes = {