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

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.10.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.10.0...v1.10.1) (2021-12-10)
+
+
+### Bug Fixes
+
+* removed recharts ([#20](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/20)) ([01a9e74](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/01a9e74da24ae7788f92c20719690450559985a8))
+
+# [1.10.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.9.0...v1.10.0) (2021-11-17)
+
+
+### Features
+
+* single settlement days and some fixes ([#19](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/19)) ([4122d95](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/4122d955e005e9c6631785dbf608ec68c9402e0a))
+
+# [1.9.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.8.0...v1.9.0) (2021-11-08)
+
+
+### Features
+
+* added dayjs ([f1c9d68](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/f1c9d68b5e967211e82a3ac892d554903c9aa4fb))
+
+# [1.8.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.7.3...v1.8.0) (2021-10-26)
+
+
+### Features
+
+* nextgen design updates ([#16](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/16)) ([6355edd](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/6355edd755c239b55f8842fcf30278232028649d))
+
 ## [1.7.3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.7.2...v1.7.3) (2021-10-01)
 
 

package/dist/components/Advice/index.js

@@ -35,8 +35,7 @@ var Advice = function Advice(_ref) {
     alias: _aliases.TITLE,
     className: _stylesModule.default.title
   }, title)), /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    small: true
+    alias: _aliases.ADVICE_CONTENT
   }, contentText));
 };
 

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

@@ -16,7 +16,8 @@
 .header {
   align-items: center;
   display: flex;
-  margin-bottom: 20px;
+  gap: 8px;
+  margin-bottom: 24px;
 
   @media #{$tablet-mobile} {
     align-items: center;

package/dist/components/Amount/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _propTypes = require("prop-types");
 
@@ -63,7 +63,7 @@ var Amount = function Amount(_ref) {
     }, item.text), /*#__PURE__*/_react.default.createElement(Label, {
       alias: _aliases.EXPIRATION,
       className: _stylesModule.default.expiration
-    }, (0, _moment.default)(item.expiration.date, 'YYYY-MM-DD').format('DD/MM/YYYY')));
+    }, (0, _dayjs.default)(item.expiration.date, 'YYYY-MM-DD').format('DD/MM/YYYY')));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -8,16 +8,18 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-direction: column;
+  gap: 16px;
   margin-bottom: $default-spacing;
   padding: $default-container-padding;
 
   @media #{$tablet-mobile} {
     flex-flow: column;
-    padding: $default-container-padding 15px;
+    padding: $default-container-padding;
   }
 }
 
 .amountContainer {
+  align-items: center;
   display: flex;
   justify-content: space-between;
 
@@ -40,7 +42,7 @@
 
 .withBottomMargin {
   @media #{$desktop} {
-    margin-top: 41px;
+    margin-top: 26px;
   }
 }
 
@@ -51,5 +53,11 @@
 .expirations{
   display: flex;
   flex-direction: row;
+  gap: 16px;
   justify-content: space-between;
+
+  @media #{$mobile} {
+    flex-direction: column;
+    margin-top: 26px;
+  }
 }

package/dist/components/BarChart/constants.js

@@ -3,6 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MONTHLY_BREAK = void 0;
-var MONTHLY_BREAK = 7;
-exports.MONTHLY_BREAK = MONTHLY_BREAK;
+exports.RESPONSIVE_BAR_WIDTH = exports.DESKTOP_BAR_WIDTH = exports.BAR_CHART_CONFIG = void 0;
+var BAR_CHART_CONFIG = {
+  spacingOptions: {
+    axisPadding: 10,
+    scrollPadding: 0,
+    marginTop: -12,
+    onTopLabelPadding: 16,
+    lateralMargin: -10
+  },
+  barPadding: 0.045,
+  valuesOnTop: true,
+  center: true,
+  hideYAxis: true
+};
+exports.BAR_CHART_CONFIG = BAR_CHART_CONFIG;
+var DESKTOP_BAR_WIDTH = 40;
+exports.DESKTOP_BAR_WIDTH = DESKTOP_BAR_WIDTH;
+var RESPONSIVE_BAR_WIDTH = 90;
+exports.RESPONSIVE_BAR_WIDTH = RESPONSIVE_BAR_WIDTH;

package/dist/components/BarChart/index.js

@@ -1,136 +1,105 @@
 "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 _ResponsiveContainer = _interopRequireDefault(require("recharts/lib/component/ResponsiveContainer"));
-
-var _ComposedChart = _interopRequireDefault(require("recharts/lib/chart/ComposedChart"));
-
-var _XAxis = _interopRequireDefault(require("recharts/lib/cartesian/XAxis"));
-
-var _YAxis = _interopRequireDefault(require("recharts/lib/cartesian/YAxis"));
-
-var _Label = _interopRequireDefault(require("recharts/lib/component/Label"));
-
-var _Bar = _interopRequireDefault(require("recharts/lib/cartesian/Bar"));
-
 var _smartBillTypes = require("../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 
-var _CustomXAxisLabel = _interopRequireDefault(require("./components/CustomXAxisLabel"));
+var _aliases = require("../../shared/constants/aliases");
 
-var _CustomBar = _interopRequireDefault(require("./components/CustomBar"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
-var _styles = require("./styles");
+var _utils = require("./utils");
 
 var _constants = require("./constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var BarChart = function BarChart(_ref) {
-  var _contextApiInfo$confi;
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var BarChartSection = function BarChartSection(_ref) {
+  var _colors$barChart;
 
   var contextApiInfo = _ref.contextApiInfo,
       data = _ref.data,
-      dataKey = _ref.dataKey,
-      unit = _ref.unit,
-      bars = _ref.bars,
-      currentPeriod = _ref.currentPeriod,
-      lastYearPeriod = _ref.lastYearPeriod,
-      isDesktop = _ref.isDesktop;
-  var texts = contextApiInfo.config.texts;
-
-  var _ref2 = ((_contextApiInfo$confi = contextApiInfo.config.stylesConfig) === null || _contextApiInfo$confi === void 0 ? void 0 : _contextApiInfo$confi.fonts) || {},
-      defaultFont = _ref2.default;
-
-  var label = _styles.styles.label,
-      xAxis = _styles.styles.xAxis,
-      yAxis = _styles.styles.yAxis,
-      chart = _styles.styles.chart;
-  var monthlyBars = data.length > _constants.MONTHLY_BREAK;
-
-  var _ref3 = isDesktop ? chart.desktop : monthlyBars ? chart.mobileMonthly : chart.mobile,
-      chartSize = _ref3.size,
-      chartMargin = _ref3.margin;
-
-  var fontFamily = defaultFont || label.fontFamily;
-  var fontSize = isDesktop && monthlyBars ? label.barLabel.smallFontSize : label.barLabel.fontSize;
-
-  var createBar = function createBar(barData) {
-    return /*#__PURE__*/_react.default.createElement(_Bar.default, {
-      shape: /*#__PURE__*/_react.default.createElement(_CustomBar.default, {
-        font: fontFamily,
-        fontSize: fontSize,
-        currentPeriod: currentPeriod,
-        lastYearPeriod: lastYearPeriod,
-        rotateNumbers: !isDesktop && monthlyBars,
-        isDesktop: isDesktop
-      }),
-      dataKey: barData.key,
-      isAnimationActive: false,
-      maxBarSize: isDesktop ? _styles.styles.bar.desktopSize : _styles.styles.bar.mobileSize
-    });
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.default, chartSize, /*#__PURE__*/_react.default.createElement(_ComposedChart.default, {
-    data: data,
-    margin: chartMargin
-  }, bars.map(createBar), /*#__PURE__*/_react.default.createElement(_XAxis.default, {
-    tickLine: false,
-    dataKey: dataKey,
-    stroke: xAxis.color,
-    tick: /*#__PURE__*/_react.default.createElement(_CustomXAxisLabel.default, {
-      fontFamily: fontFamily,
-      currentPeriod: currentPeriod,
-      lastYearPeriod: lastYearPeriod
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
-    value: texts.consumptionPeriod.bimesters,
-    fill: label.baseColor,
-    fontFamily: fontFamily,
-    fontSize: label.fontSize,
-    offset: label.x.axisLabelOffset,
-    opacity: label.opacity,
-    position: "bottom"
-  })), /*#__PURE__*/_react.default.createElement(_YAxis.default, {
-    axisLine: false,
-    tick: false
-  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
-    angle: yAxis.labelAngle,
-    value: unit && "".concat(texts.consumptionPeriod.consumption, " (").concat(unit, ")"),
-    fill: label.baseColor,
-    fontFamily: fontFamily,
-    fontSize: label.fontSize,
-    offset: label.y.axisLabelOffset,
-    opacity: label.opacity,
-    position: "insideTopRight"
-  }))));
+      isDesktop = _ref.isDesktop,
+      unit = _ref.unit;
+  var BarChart = contextApiInfo.BarChart,
+      Label = contextApiInfo.Label,
+      config = contextApiInfo.config,
+      assets = contextApiInfo.assets;
+  var CalendarIcon = assets.CalendarIcon,
+      EnergyIcon = assets.EnergyIcon;
+  var texts = config.texts,
+      colors = config.colors;
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    return (0, _utils.getProcessedData)(data, colors.barChart);
+  }, [data]),
+      processedData = _useMemo.processedData,
+      xAxisDefinition = _useMemo.xAxisDefinition;
+
+  var yAxisLabel = unit && "".concat(texts.consumptionPeriod.consumption, " (").concat(unit, ")");
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.sectionContainer
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.TITLE,
+    className: _stylesModule.default.title
+  }, texts.consumptionPeriod.barChartTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.barChartContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.yAxis
+  }, /*#__PURE__*/_react.default.createElement(EnergyIcon, {
+    style: {
+      fill: colors.primary
+    },
+    className: _stylesModule.default.energyIcon
+  }), /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.DETAIL,
+    className: _stylesModule.default.yAxisLabel
+  }, yAxisLabel), /*#__PURE__*/_react.default.createElement(CalendarIcon, {
+    style: {
+      fill: (_colors$barChart = colors.barChart) === null || _colors$barChart === void 0 ? void 0 : _colors$barChart.calendar
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.graphContainer
+  }, BarChart && /*#__PURE__*/_react.default.createElement(BarChart, _extends({}, _constants.BAR_CHART_CONFIG, {
+    classNames: {
+      onTopBarLabel: _stylesModule.default.graphLabels,
+      xAxisMainLabel: _stylesModule.default.graphLabels,
+      xAxis: _stylesModule.default.xAxis
+    },
+    className: _stylesModule.default.chart,
+    xAxisDefinition: xAxisDefinition,
+    barData: processedData,
+    minBarWidth: isDesktop ? _constants.DESKTOP_BAR_WIDTH : _constants.RESPONSIVE_BAR_WIDTH
+  })))));
 };
 
-BarChart.propTypes = {
+BarChartSection.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   data: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     period: _propTypes.string,
     consumption: _propTypes.number
   })).isRequired,
-  dataKey: _propTypes.string.isRequired,
-  unit: _propTypes.string,
-  bars: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    key: _propTypes.string
-  })),
-  currentPeriod: _propTypes.string,
-  lastYearPeriod: _propTypes.string,
-  isDesktop: _propTypes.bool
+  isDesktop: _propTypes.bool,
+  unit: _propTypes.string
 };
 
-var _default = (0, _WithContextApi.default)()(BarChart);
+var _default = (0, _WithContextApi.default)()(BarChartSection);
 
 exports.default = _default;

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

@@ -0,0 +1,71 @@
+@import '../../scss/variables/_mediaQueries';
+@import '../../scss/variables/_colorsExport.scss';
+
+.chart {
+  height: 198px;
+  margin: 16px;
+}
+
+.sectionContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.barChartContainer {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+
+  @media #{$tablet-mobile} {
+    width: 100%;
+  }
+}
+
+.graphLabels {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.yAxisLabel {
+  transform: rotate(-90deg);
+  transform-origin: left;
+  margin: 0px 0px 32px 12px;
+  width: max-content;
+
+  @media #{$tablet-mobile} {
+    margin: 0px 0px 16px 12px;
+  }
+}
+
+.yAxis {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 16px 24px;
+  width: 24px !important;
+}
+
+.graphContainer {
+  display: block;
+  width: calc(100% - 60px);
+}
+
+.title {
+  padding: 24px 24px 0;
+}
+
+.xAxis {
+  stroke: $borders-gray;
+}
+
+.energyIcon {
+  margin: 0 0 128px 0;
+
+  @media #{$tablet-mobile} {
+    margin: 16px 0 116px 0;
+  }
+}

package/dist/components/BarChart/utils.js

@@ -3,25 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLabelColor = void 0;
+exports.getProcessedData = void 0;
 
-var _styles = require("./styles");
+var getProcessedData = function getProcessedData(data) {
+  var colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-var getLabelColor = function getLabelColor(period, currentPeriod, lastYearPeriod) {
-  return function () {
-    var label = _styles.styles.label;
-
-    switch (period) {
-      case currentPeriod:
-        return label.currentPeriodColor;
+  var getBarColor = function getBarColor(index) {
+    return index === 0 ? colors.first : index === data.length - 1 ? colors.last : colors.main;
+  };
 
-      case lastYearPeriod:
-        return label.lastYearColor;
+  var getLabelColor = function getLabelColor(index) {
+    return index === 0 ? colors.valueFirst : index === data.length - 1 ? colors.last : colors.valueMain;
+  };
 
-      default:
-        return label.baseColor;
-    }
+  var processedData = data.map(function (_ref, index) {
+    var period = _ref.period,
+        consumption = _ref.consumption;
+    return {
+      value: consumption,
+      mainLabel: period,
+      key: period,
+      color: getBarColor(index),
+      onTopLabelColor: getLabelColor(index)
+    };
+  });
+  var xAxisDefinition = processedData.map(function (_ref2, index) {
+    var mainLabel = _ref2.mainLabel;
+    return {
+      mainLabel: mainLabel,
+      color: getLabelColor(index)
+    };
+  });
+  return {
+    processedData: [processedData],
+    xAxisDefinition: xAxisDefinition
   };
 };
 
-exports.getLabelColor = getLabelColor;
+exports.getProcessedData = getProcessedData;

package/dist/components/BillCalculation/components/ConceptCard/index.js

@@ -34,8 +34,12 @@ var ConceptCard = function ConceptCard(_ref) {
       lines = _ref$lines === void 0 ? [] : _ref$lines;
   var Card = contextApiInfo.Card,
       Label = contextApiInfo.Label,
-      config = contextApiInfo.config;
-  var showZeroConcepts = config.showZeroConcepts;
+      config = contextApiInfo.config,
+      assets = contextApiInfo.assets;
+  var showZeroConcepts = config.showZeroConcepts,
+      colors = config.colors;
+  var ArrowDownwardIcon = assets.ArrowDownwardIcon,
+      ArrowUpwardIcon = assets.ArrowUpwardIcon;
 
   var handleOnClick = function handleOnClick() {
     return onClick(index);
@@ -56,29 +60,44 @@ var ConceptCard = function ConceptCard(_ref) {
     return (list.amount !== 0 || showZeroConcepts) && /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.lineContainer,
       key: list.title
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Label, {
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.conceptLineContainer
+    }, /*#__PURE__*/_react.default.createElement(Label, {
       alias: _aliases.CONCEPT_TITLE
-    }, list.title), list.description && /*#__PURE__*/_react.default.createElement(Label, {
-      alias: _aliases.LINE_DESCRIPTION,
-      className: _stylesModule.default.lineDescription
-    }, list.description)), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
+    }, list.title), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
       alias: _aliases.CONCEPT_LIST_AMOUNT,
       aliasDecimal: _aliases.CONCEPT_LIST_AMOUNT_DECIMAL,
       amount: list.amount,
       variant: "large"
-    }));
+    })), list.description && /*#__PURE__*/_react.default.createElement(Label, {
+      alias: _aliases.LINE_DESCRIPTION
+    }, list.description));
   };
 
+  var iconsStyle = {
+    fill: colors.primary
+  };
   return /*#__PURE__*/_react.default.createElement(Card, {
     className: "".concat(_stylesModule.default.container, " ").concat((0, _array.isEmpty)(lines) && _stylesModule.default.containerWithoutLines),
     expandableIconButtonClassName: _stylesModule.default.expandIcon,
+    ExpandedIcon: ArrowUpwardIcon && function () {
+      return /*#__PURE__*/_react.default.createElement(ArrowUpwardIcon, iconsStyle);
+    },
+    NonExpandedIcon: ArrowDownwardIcon && function () {
+      return /*#__PURE__*/_react.default.createElement(ArrowDownwardIcon, iconsStyle);
+    },
     expandableContentClassName: "".concat(isOpen && _stylesModule.default.expandableContent),
     header: Header,
     horizontal: true,
+    style: {
+      color: 'black'
+    },
     isCollapsible: !(0, _array.isEmpty)(lines),
     isOpen: isOpen,
     onClick: handleOnClick
-  }, lines.map(handleRenderLines));
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.emptySpace
+  }), lines.map(handleRenderLines));
 };
 
 ConceptCard.propTypes = {

package/dist/components/BillCalculation/components/ConceptCard/styles.module.scss

@@ -3,23 +3,33 @@
 @import '../../../../scss/variables/_mediaQueries';
 @import '../../../../scss/variables/_sizes';
 
+
 .headerContainer {
   align-items: center;
   display: flex;
   justify-content: space-between;
+  margin-right: 8px;
+}
+
+.emptySpace {
+  height: 8px;
 }
 
 .lineContainer {
   display: flex;
+  flex-direction: column;
+  gap: 12px;
   justify-content: space-between;
-  padding: $default-spacing 34px 0 0;
+  padding: $default-spacing 0 0;
   @media #{$tablet-mobile} {
     padding: $default-spacing 0 0;
   }
 }
 
-.lineDescription {
-  margin-top: $default-spacing;
+.conceptLineContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .container {
@@ -28,7 +38,8 @@
   border-bottom: 0;
   border-radius: 0;
   box-shadow: none;
-  padding: $default-spacing 22px $default-spacing calc(2 * #{$default-spacing});
+  padding: $default-spacing calc(2 * #{$default-spacing});
+
   @media #{$tablet-mobile} {
     padding: $default-spacing;
   }
@@ -42,8 +53,7 @@
 }
 
 .expandIcon {
-  color: $primary;
-  margin-left: 10px;
+  width: 24px;
   padding: 0;
 }
 

package/dist/components/BillCalculation/index.js

@@ -50,7 +50,10 @@ var BillCalculation = function BillCalculation(_ref) {
       config = contextApiInfo.config;
   var texts = config.texts,
       showZeroConcepts = config.showZeroConcepts,
-      stylesConfig = config.stylesConfig;
+      stylesConfig = config.stylesConfig,
+      formatters = config.formatters,
+      colors = config.colors;
+  var periodFormatter = formatters.periodFormatter;
   var withBillCalcTitleDate = config.validations.withBillCalcTitleDate;
   var detail = billData.detail;
 
@@ -63,7 +66,7 @@ var BillCalculation = function BillCalculation(_ref) {
     return setOpenedConcept(openedConcept !== index ? index : null);
   };
 
-  var title = (0, _utils.periodToTitleMapper)(billData, texts, withBillCalcTitleDate(billData));
+  var title = (0, _utils.periodToTitleMapper)(billData, texts, periodFormatter, withBillCalcTitleDate(billData));
 
   var handleRenderConceptCard = function handleRenderConceptCard(concept, index) {
     return (concept.total !== 0 || showZeroConcepts) && /*#__PURE__*/_react.default.createElement(_ConceptCard.default, {
@@ -83,10 +86,12 @@ var BillCalculation = function BillCalculation(_ref) {
     alias: _aliases.BILL_CALC_CONCEPT_TITLE,
     className: _stylesModule.default.title
   }, title), detail.concepts.map(handleRenderConceptCard), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.totalAmountContainer, " ").concat(stylesConfig === null || stylesConfig === void 0 ? void 0 : stylesConfig.paymentTotal)
+    className: "".concat(_stylesModule.default.totalAmountContainer, " ").concat(stylesConfig === null || stylesConfig === void 0 ? void 0 : stylesConfig.paymentTotal),
+    style: {
+      backgroundColor: colors.primary
+    }
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.BILL_CALC_TOTAL,
-    white: true
+    alias: _aliases.BILL_CALC_TOTAL
   }, texts.commons.totalAmount), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.BILL_CALC_AMOUNT,
     aliasDecimal: _aliases.BILL_CALC_AMOUNT_DECIMAL,