@widergy/utilitygo-smart-bill-web 3.9.2 → 3.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.11.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.10.0...v3.11.0) (2025-08-25)
+
+
+### Features
+
+* [EVEP2-26] billing new structure ([#59](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/59)) ([b4e199f](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/b4e199f3cbddf697fcefe211a0b971e49d3253ce))
+
+# [3.10.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.9.2...v3.10.0) (2025-08-20)
+
+
+### Features
+
+* [UGEE-416] import value instead of energy in billing ([#60](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/60)) ([c873842](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/c873842e2a8ccab0265b4792c777cef952f4325d))
+
 ## [3.9.2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.9.1...v3.9.2) (2025-08-13)
 
 

package/dist/components/SmartBillSummary/index.js

@@ -13,16 +13,21 @@ var _constants = require("./constants");
 var _utils = require("./utils");
 var _AIPanel = _interopRequireDefault(require("./components/AIPanel"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _BillHeader = _interopRequireDefault(require("./tabs/Billing/components/BillHeader"));
+var _utils2 = require("./tabs/Billing/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SmartBillSummary = _ref => {
   let {
+    annex,
     assets,
+    billingLayout,
     constants,
     components,
     handlers,
     loading,
+    reverseRow,
     smartBill,
     tabOptions,
     translations,
@@ -95,8 +100,19 @@ const SmartBillSummary = _ref => {
     value: currentTab
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.contentContainer
-  }, _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
+  }, filteredTabOptions.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_BillHeader.default, {
+    annex,
+    UtilityLogo: assets.billingTab.UtilityLogo,
+    billNumber: smartBill.bill_number,
+    billTypeHelpText: translations.billingTab.header.billTypeHelpText,
+    issuedOnDate: (0, _utils2.getFormattedDate)((0, _utils2.getCurrentPeriod)(smartBill)?.settlements?.current?.issued_on),
+    billIssueDate: translations.billingTab.header.billIssueDate,
+    debtStatusValidation: smartBill.debt_status_label !== null,
+    debtStatusLabel: smartBill.debt_status_label,
+    smartBill
+  }), _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
     assets,
+    billingLayout,
     constants,
     consumptionLevels,
     components,
@@ -107,6 +123,7 @@ const SmartBillSummary = _ref => {
     handlers,
     isDesktopSize,
     loading,
+    reverseRow,
     smartBill,
     translations,
     utils
@@ -133,7 +150,9 @@ const SmartBillSummary = _ref => {
   })));
 };
 SmartBillSummary.propTypes = {
+  annex: _propTypes.bool,
   assets: _propTypes.object,
+  billingLayout: (0, _propTypes.arrayOf)(_propTypes.object),
   constants: _propTypes.object,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType
@@ -142,6 +161,7 @@ SmartBillSummary.propTypes = {
     [_propTypes.string]: _propTypes.func
   }),
   loading: _propTypes.bool,
+  reverseRow: _propTypes.object,
   smartBill: _billDataTypes.billDataTypes,
   tabOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     defaultSelected: _propTypes.bool,

package/dist/components/SmartBillSummary/tabs/Billing/components/ActionCards/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ActionCards = _ref => {
+  let {
+    actionCards,
+    adhered,
+    notAdhered,
+    isDesktopSize
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, actionCards?.map(_ref2 => {
+    let {
+      isAdhered,
+      leftIcon,
+      leftIconProps = {},
+      onClick,
+      rightIcon,
+      showStatus,
+      title
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
+      className: `${_stylesModule.default.cardContainer} ${!onClick && _stylesModule.default.unclickableCardContainer}`,
+      disabled: !onClick,
+      key: title,
+      onClick: onClick,
+      withRipple: true
+    }, isDesktopSize && /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, _extends({
+      colorTheme: "gray",
+      name: leftIcon
+    }, leftIconProps)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.cardTitle,
+      variant: "subtitle1",
+      weight: "medium"
+    }, title), showStatus && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+      type: "light",
+      variant: isAdhered ? 'success' : 'unassigned',
+      withoutIcon: !isAdhered
+    }, isAdhered ? adhered : notAdhered), onClick && /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.cardIconContainer
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+      colorTheme: "accent",
+      name: rightIcon || 'IconChevronRight'
+    })));
+  }));
+};
+ActionCards.propTypes = {
+  actionCards: _propTypes.array,
+  adhered: _propTypes.string,
+  notAdhered: _propTypes.string,
+  isDesktopSize: _propTypes.bool
+};
+var _default = exports.default = ActionCards;

package/dist/components/SmartBillSummary/tabs/Billing/components/ActionCards/styles.module.scss

@@ -0,0 +1,28 @@
+@import '../../../../../../scss/variables/colorsExport.module.scss';
+
+.cardContainer {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 16px;
+  transition: all 0.2s;
+}
+
+.unclickableCardContainer {
+  cursor: default;
+}
+
+.cardTitle {
+  flex: 1;
+}
+
+.cardIconContainer {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/BillHeader/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _DebtStatusLabel = _interopRequireDefault(require("../DebtStatusLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BillHeader = _ref => {
+  let {
+    annex,
+    UtilityLogo,
+    billNumber,
+    billTypeHelpText,
+    issuedOnDate,
+    billIssueDate,
+    debtStatusValidation,
+    debtStatusLabel,
+    smartBill
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billHeader
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billHeaderLabels
+  }, UtilityLogo && /*#__PURE__*/_react.default.createElement(UtilityLogo, {
+    className: _stylesModule.default.logo
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.valueAndHelpText
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small"
+  }, billNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, billTypeHelpText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.valueAndHelpText
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small"
+  }, issuedOnDate), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, billIssueDate)), debtStatusValidation && /*#__PURE__*/_react.default.createElement(_DebtStatusLabel.default, {
+    debtStatusLabel: debtStatusLabel,
+    isWarning: smartBill?.warning
+  })), annex && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    variant: "text",
+    disabled: true
+  }, "Anexos"));
+};
+BillHeader.propTypes = {
+  annex: _propTypes.bool,
+  UtilityLogo: _propTypes.elementType,
+  billNumber: _propTypes.string,
+  billTypeHelpText: _propTypes.string,
+  issuedOnDate: _propTypes.string,
+  billIssueDate: _propTypes.string,
+  debtStatusValidation: _propTypes.bool,
+  debtStatusLabel: _propTypes.string,
+  smartBill: _propTypes.object
+};
+var _default = exports.default = BillHeader;

package/dist/components/SmartBillSummary/tabs/Billing/components/BillHeader/styles.module.scss

@@ -0,0 +1,43 @@
+@import '../../../../../../scss/variables/mediaQueries.module.scss';
+
+.billHeader {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 12px 16px;
+  margin: 24px 32px 0 32px;
+  @media #{$mobile} {
+    margin: 24px 16px 0 16px;
+  }
+}
+
+.logo {
+  height: 30px;
+  object-fit: contain;
+  width: auto;
+}
+
+.billHeaderLabels {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+  justify-content: space-between;
+  padding: 16px 0;
+
+  @media #{$mobile} {
+    grid-gap: 16px;
+    padding: 0;
+  }
+}
+
+.valueAndHelpText {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/ColumnRenderer/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMPONENTS = void 0;
+var _ActionCards = _interopRequireDefault(require("../ActionCards"));
+var _TitularCard = _interopRequireDefault(require("../TitularCard"));
+var _TotalCard = _interopRequireDefault(require("../TotalCard"));
+var _RateCard = _interopRequireDefault(require("../RateCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const COMPONENTS = exports.COMPONENTS = {
+  ActionCards: _ActionCards.default,
+  TitularCard: _TitularCard.default,
+  TotalCard: _TotalCard.default,
+  RateCard: _RateCard.default
+};

package/dist/components/SmartBillSummary/tabs/Billing/components/ColumnRenderer/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ColumnRenderer = _ref => {
+  let {
+    column,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.column
+  }, column.map(_ref2 => {
+    let {
+      name,
+      enabled
+    } = _ref2;
+    const Component = _constants.COMPONENTS[name];
+    return enabled && Component && /*#__PURE__*/_react.default.createElement(Component, _extends({
+      key: name
+    }, props));
+  }));
+};
+ColumnRenderer.propTypes = {
+  column: (0, _propTypes.arrayOf)(_propTypes.object),
+  props: _propTypes.object
+};
+var _default = exports.default = ColumnRenderer;

package/dist/components/SmartBillSummary/tabs/Billing/components/ColumnRenderer/styles.module.scss

@@ -0,0 +1,23 @@
+@import '_mediaQueries.scss';
+
+$columns-gap: 32px;
+$columns-gap-mobile: 24px;
+
+.column {
+  display: flex;
+  flex-direction: column;
+  margin-right: $columns-gap;
+  width: calc(50% - #{$columns-gap} / 2);
+
+  @media #{$tablet-mobile} {
+    width: 100%;
+  }
+
+  > * {
+    margin-bottom: 24px;
+
+    @media #{$tablet-mobile} {
+      margin-bottom: $columns-gap-mobile;
+    }
+  }
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/index.js

@@ -11,6 +11,7 @@ var _numeral = _interopRequireDefault(require("numeral"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
+var _isNaN = _interopRequireDefault(require("lodash/isNaN"));
 var _utils = require("../../../Consumptions/components/CurrentConsumption/utils");
 var _testIds = require("../../../../../../constants/testIds");
 var _utils2 = require("./utils");
@@ -56,7 +57,8 @@ const RateCard = _ref => {
     client,
     periods,
     levelValue: limitSubsidyValue = 0,
-    levelNumber
+    levelNumber,
+    rate: rateValue
   } = smartBill;
   const purchasedRate = client?.rate?.purchased || '';
   const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
@@ -108,6 +110,8 @@ const RateCard = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerTitles
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
@@ -127,7 +131,13 @@ const RateCard = _ref => {
     className: _stylesModule.default.bannerDetailText
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     dataTestId: smartBillTestIds.rateCard.bannerLabel
-  }, banner.label?.(limitSubsidyValue, diff))))), !noLevels && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+  }, banner.label?.(limitSubsidyValue, diff))))), rateValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rateValue
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+    type: "light",
+    variant: "information",
+    withoutIcon: true
+  }, rateValue))), !noLevels && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     components: components,
     currentPeriod: currentPeriod,
     data: rates,
@@ -159,7 +169,7 @@ const RateCard = _ref => {
     colorTheme: "gray",
     dataTestId: smartBillTestIds.rateCard.yourConsumption,
     variant: "small"
-  }, yourConsumption))), levelNumber && /*#__PURE__*/_react.default.createElement("div", {
+  }, yourConsumption))), !(0, _isNaN.default)(levelNumber) && levelNumber && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.levelNumber,
     "data-testid": smartBillTestIds.rateCard.level
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/styles.module.scss

@@ -7,11 +7,23 @@
   grid-gap: 24px;
 }
 
+.header {
+  display: flex;
+  padding: 24px 24px 0;
+}
+
+.rateValue {
+  align-self: flex-start;
+  display: flex;
+  justify-content: flex-end;
+  margin-left: 16px;
+  width: 30%;
+}
+
 .headerTitles {
   display: flex;
   flex-direction: column;
   grid-gap: 8px;
-  padding: 24px 24px 0;
 }
 
 .consumptionDataContainer {
@@ -85,6 +97,6 @@
   display: flex;
   grid-gap: 8px;
   justify-content: space-between;
-  margin: 0px 16px;
+  margin: 0 16px;
   padding: 24px;
 }

package/dist/components/SmartBillSummary/tabs/Billing/components/TitularCard/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TitularCard = _ref => {
+  let {
+    titularCardTitle,
+    accountAddress,
+    postalAddress,
+    addressHelpText,
+    titularName,
+    titularHelpText,
+    clientNumberFormatter,
+    clientNumber,
+    clientNumberHelpText,
+    ivaCondition,
+    ivaConditionHelpText,
+    renderTitularFooter
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularCard
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title2",
+    weight: "medium"
+  }, titularCardTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularDataContainer
+  }, accountAddress && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, accountAddress), accountAddress !== postalAddress && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, postalAddress), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, addressHelpText)), titularName && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, titularName), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, titularHelpText)), renderTitularFooter && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularFooter
+  }, clientNumber && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, clientNumberFormatter?.(clientNumber)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, clientNumberHelpText)), ivaCondition && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, ivaCondition), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, ivaConditionHelpText)))));
+};
+TitularCard.propTypes = {
+  titularCardTitle: _propTypes.string,
+  accountAddress: _propTypes.string,
+  postalAddress: _propTypes.string,
+  addressHelpText: _propTypes.string,
+  titularName: _propTypes.string,
+  titularHelpText: _propTypes.string,
+  clientNumberFormatter: _propTypes.func,
+  clientNumber: _propTypes.string,
+  clientNumberHelpText: _propTypes.string,
+  ivaCondition: _propTypes.string,
+  ivaConditionHelpText: _propTypes.string,
+  renderTitularFooter: _propTypes.bool
+};
+var _default = exports.default = TitularCard;

package/dist/components/SmartBillSummary/tabs/Billing/components/TitularCard/styles.module.scss

@@ -0,0 +1,32 @@
+.titularCard {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 24px;
+}
+
+.titularDataContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.titularData {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  grid-gap: 8px;
+  padding: 12px 0;
+}
+
+.titularDataTitle {
+  padding: 4px 0;
+}
+
+.titularFooter {
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/TotalCard/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TotalCard = _ref => {
+  let {
+    totalAmountLabel,
+    formatAmount,
+    totalAmount,
+    firstExpiration,
+    firstExpirationDate,
+    secondExpiration,
+    secondExpirationDate
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.totalCard
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.total
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, totalAmountLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "accent",
+    variant: "title2",
+    weight: "medium"
+  }, formatAmount?.(totalAmount))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, firstExpiration?.(firstExpirationDate)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, secondExpiration?.(secondExpirationDate))));
+};
+TotalCard.propTypes = {
+  totalAmountLabel: _propTypes.string,
+  formatAmount: _propTypes.func,
+  totalAmount: _propTypes.string,
+  firstExpiration: _propTypes.func,
+  firstExpirationDate: _propTypes.string,
+  secondExpiration: _propTypes.func,
+  secondExpirationDate: _propTypes.string
+};
+var _default = exports.default = TotalCard;

package/dist/components/SmartBillSummary/tabs/Billing/components/TotalCard/styles.module.scss

@@ -0,0 +1,15 @@
+.totalCard {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 16px;
+}
+
+.total {
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+}

package/dist/components/SmartBillSummary/tabs/Billing/index.js

@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
 var _billDataTypes = require("../../../../shared/types/billDataTypes");
-var _DebtStatusLabel = _interopRequireDefault(require("./components/DebtStatusLabel"));
 var _utils = require("./utils");
-var _RateCard = _interopRequireDefault(require("./components/RateCard"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _ColumnRenderer = _interopRequireDefault(require("./components/ColumnRenderer"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Billing = _ref => {
   let {
-    assets,
+    billingLayout,
     constants = {},
     consumptionLevels = [],
     components,
@@ -38,9 +36,6 @@ const Billing = _ref => {
     adherenceStatus,
     subsidyLevels
   } = constants;
-  const {
-    UtilityLogo
-  } = assets;
   const {
     handleAutomaticDebitAdherence = () => {},
     handleDownloadBill = () => {},
@@ -52,7 +47,6 @@ const Billing = _ref => {
     automaticDebit = {},
     digitalBill = {},
     downloadBill = {},
-    header = {},
     notAdhered,
     rateCard: rateCardTranslations,
     ratesTableLink,
@@ -60,10 +54,6 @@ const Billing = _ref => {
     totalAmountLabel,
     totalCard = {}
   } = translations;
-  const {
-    billIssueDate,
-    billTypeHelpText
-  } = header;
   const {
     title: digitalBillTitle
   } = digitalBill;
@@ -81,18 +71,15 @@ const Billing = _ref => {
     ivaConditionHelpText
   } = titularCard;
   const {
-    firstExpiration
+    firstExpiration,
+    secondExpiration
   } = totalCard;
   const {
-    bill_number: billNumber,
     client,
-    debt_status_label: debtStatusLabel,
     detail,
     expirations
   } = smartBill;
-  const debtStatusValidation = debtStatusLabel !== null;
   const currentPeriod = (0, _utils.getCurrentPeriod)(smartBill);
-  const issuedOnDate = (0, _utils.getFormattedDate)(currentPeriod?.settlements?.current?.issued_on);
   const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
   const {
     account_address: accountAddress,
@@ -102,6 +89,7 @@ const Billing = _ref => {
     iva_condition: ivaCondition
   } = client || {};
   const firstExpirationDate = (0, _utils.getFormattedDate)(expirations?.[0]?.date);
+  const secondExpirationDate = (0, _utils.getFormattedDate)(expirations?.[1]?.date);
   const {
     total_amount: totalAmount
   } = detail || {};
@@ -130,127 +118,32 @@ const Billing = _ref => {
     rightIcon: 'IconDownload',
     title: downloadBillTitle
   }];
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.generalContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.billHeader
-  }, UtilityLogo && /*#__PURE__*/_react.default.createElement(UtilityLogo, {
-    className: _stylesModule.default.logo
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.billHeaderLabels
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.valueAndHelpText
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "small"
-  }, billNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    variant: "small"
-  }, billTypeHelpText)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.valueAndHelpText
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "small"
-  }, issuedOnDate), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    variant: "small"
-  }, billIssueDate)), debtStatusValidation && /*#__PURE__*/_react.default.createElement(_DebtStatusLabel.default, {
-    debtStatusLabel: debtStatusLabel,
-    isWarning: smartBill?.warning
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.detailColumns
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.leftColumn
-  }, actionCards?.map(_ref2 => {
-    let {
-      isAdhered,
-      leftIcon,
-      leftIconProps = {},
-      onClick,
-      rightIcon,
-      showStatus,
-      title
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
-      className: `${_stylesModule.default.cardContainer} ${!onClick && _stylesModule.default.unclickableCardContainer}`,
-      disabled: !onClick,
-      key: title,
-      onClick: onClick,
-      withRipple: true
-    }, isDesktopSize && /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, _extends({
-      colorTheme: "gray",
-      name: leftIcon
-    }, leftIconProps)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-      className: _stylesModule.default.cardTitle,
-      variant: "subtitle1",
-      weight: "medium"
-    }, title), showStatus && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
-      type: "light",
-      variant: isAdhered ? 'success' : 'unassigned',
-      withoutIcon: !isAdhered
-    }, isAdhered ? adhered : notAdhered), onClick && /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.cardIconContainer
-    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
-      colorTheme: "accent",
-      name: rightIcon || 'IconChevronRight'
-    })));
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularCard
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "title2",
-    weight: "medium"
-  }, titularCardTitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularDataContainer
-  }, accountAddress && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, accountAddress), accountAddress !== postalAddress && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, postalAddress), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, addressHelpText)), titularName && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, titularName), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, titularHelpText)), renderTitularFooter && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularFooter
-  }, clientNumber && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, clientNumberFormatter?.(clientNumber)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, clientNumberHelpText)), ivaCondition && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, ivaCondition), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, ivaConditionHelpText)))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.rightColumn
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.totalCard
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.total
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "subtitle1",
-    weight: "medium"
-  }, totalAmountLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "accent",
-    variant: "title2",
-    weight: "medium"
-  }, formatAmount?.(totalAmount))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    variant: "small",
-    weight: "medium"
-  }, firstExpiration?.(firstExpirationDate))), /*#__PURE__*/_react.default.createElement(_RateCard.default, {
+  const props = {
+    actionCards,
+    adhered,
+    notAdhered,
+    isDesktopSize,
+    titularCardTitle,
+    accountAddress,
+    postalAddress,
+    addressHelpText,
+    titularName,
+    titularHelpText,
+    clientNumberFormatter,
+    clientNumber,
+    clientNumberHelpText,
+    ivaCondition,
+    ivaConditionHelpText,
+    totalAmountLabel,
+    formatAmount,
+    totalAmount,
+    firstExpiration,
+    firstExpirationDate,
+    secondExpiration,
+    secondExpirationDate,
     consumptionLevels,
     components,
     currentPeriod,
-    formatAmount,
     normalizedRate,
     rateCardTranslations,
     ratesTableLink,
@@ -258,12 +151,25 @@ const Billing = _ref => {
     subsidy,
     subsidyLevels,
     trackRedirectionToExternalLink,
-    translations
-  }))));
+    translations,
+    renderTitularFooter
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.generalContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.cardsContainer
+  }, billingLayout.map(layoutArray => {
+    const filteredLayout = layoutArray.filter(item => item.enabled);
+    const layoutKey = `layout-${layoutArray.map(item => item.name).join('-')}`;
+    return /*#__PURE__*/_react.default.createElement(_ColumnRenderer.default, _extends({
+      column: filteredLayout,
+      key: layoutKey
+    }, props));
+  })));
 };
 Billing.propTypes = {
-  assets: _propTypes.object,
   constants: _propTypes.object,
+  billingLayout: _propTypes.array,
   consumptionLevels: _propTypes.array,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType

package/dist/components/SmartBillSummary/tabs/Billing/styles.module.scss

@@ -12,146 +12,16 @@
   }
 }
 
-.billHeader {
-  align-items: center;
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
+.cardsContainer {
+  align-items: flex-start;
   display: flex;
-  flex-wrap: wrap;
-  grid-gap: 16px;
-  justify-content: space-between;
-  padding: 12px 16px;
-}
-
-.logo {
-  height: 35px;
-  object-fit: contain;
-  width: auto;
-}
-
-.billHeaderLabels {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  grid-gap: 32px;
-  justify-content: space-between;
-  padding: 16px 0;
+  width: 100%;
 
-  @media #{$mobile} {
-    grid-gap: 16px;
-    padding: 0;
+  @media #{$tablet-mobile} {
+    flex-direction: column;
   }
-}
 
-.valueAndHelpText {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 4px;
-}
-
-.detailColumns {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  grid-gap: 32px;
-
-  @media #{$mobile} {
-    grid-gap: 24px;
+  > :last-child {
+    margin-right: 0;
   }
 }
-
-%column {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  grid-gap: 24px;
-}
-
-.leftColumn {
-  @extend %column;
-
-  @media #{$mobile} {
-    order: 2;
-  }
-}
-
-.rightColumn {
-  @extend %column;
-}
-
-.cardContainer {
-  align-items: center;
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
-  display: flex;
-  grid-gap: 16px;
-  justify-content: space-between;
-  padding: 16px;
-  transition: all 0.2s;
-}
-
-.unclickableCardContainer {
-  cursor: default;
-}
-
-.cardTitle {
-  flex: 1;
-}
-
-.cardIconContainer {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-}
-
-.titularCard {
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
-  display: flex;
-  flex-direction: column;
-  grid-gap: 24px;
-  padding: 24px;
-}
-
-.titularDataContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.titularData {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  grid-gap: 8px;
-  padding: 12px 0;
-}
-
-.titularDataTitle {
-  padding: 4px 0;
-}
-
-.titularFooter {
-  display: flex;
-  grid-gap: 16px;
-  justify-content: space-between;
-}
-
-.totalCard {
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
-  display: flex;
-  flex-direction: column;
-  grid-gap: 24px;
-  padding: 16px;
-}
-
-.total {
-  display: flex;
-  grid-gap: 8px;
-  justify-content: space-between;
-}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/Billing/constants.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TAG_ICON_SIZE = exports.DEFAULT_TAG_ICON = exports.DEFAULT_TAG_COLOR_THEME = void 0;
+exports.TAG_ICON_SIZE = exports.RIGHT_UNIT_ALIGNMENT = exports.DEFAULT_TAG_ICON = exports.DEFAULT_TAG_COLOR_THEME = void 0;
 const DEFAULT_TAG_ICON = exports.DEFAULT_TAG_ICON = 'IconCalendarEvent';
 const TAG_ICON_SIZE = exports.TAG_ICON_SIZE = 14;
-const DEFAULT_TAG_COLOR_THEME = exports.DEFAULT_TAG_COLOR_THEME = 'gray';
+const DEFAULT_TAG_COLOR_THEME = exports.DEFAULT_TAG_COLOR_THEME = 'gray';
+const RIGHT_UNIT_ALIGNMENT = exports.RIGHT_UNIT_ALIGNMENT = 'right';

package/dist/components/SmartBillSummary/tabs/Consumptions/components/Billing/index.js

@@ -16,7 +16,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Billing = _ref => {
   let {
     smartBill,
-    texts
+    texts,
+    unitAlignment = _constants.RIGHT_UNIT_ALIGNMENT,
+    unit
   } = _ref;
   const {
     title,
@@ -55,10 +57,10 @@ const Billing = _ref => {
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       variant: "title3",
       weight: "medium"
-    }, consumptionValue), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    }, unitAlignment === _constants.RIGHT_UNIT_ALIGNMENT ? consumptionValue : `${unit || consumptionUnit}${consumptionValue}`), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       variant: "subtitle1",
       weight: "medium"
-    }, consumptionUnit)), /*#__PURE__*/_react.default.createElement("div", {
+    }, unitAlignment === _constants.RIGHT_UNIT_ALIGNMENT && (unit || consumptionUnit))), /*#__PURE__*/_react.default.createElement("div", {
       className: `${_stylesModule.default.tag} ${current ? _stylesModule.default.billedTag : ''}`
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       colorTheme: colorTheme || _constants.DEFAULT_TAG_COLOR_THEME,
@@ -85,6 +87,8 @@ const Billing = _ref => {
 };
 Billing.propTypes = {
   smartBill: _billDataTypes.billDataTypes,
-  texts: _propTypes.object
+  texts: _propTypes.object,
+  unitAlignment: _propTypes.string,
+  unit: _propTypes.string
 };
 var _default = exports.default = Billing;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/constants.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CONSUMPTION_CARDS = void 0;
+exports.START = exports.END = exports.DAY = exports.DATE_FORMAT_WITH_YEAR = exports.DATE_FORMAT = exports.CONSUMPTION_CARDS = void 0;
 const CONSUMPTION_CARDS = exports.CONSUMPTION_CARDS = [{
   icon: 'EnergyIconConsumptionBoxFilled',
   key: 'consumptionCalculationCard'
 }, {
   icon: 'IconReceipt2',
   key: 'billingCard'
-}];
+}];
+const START = exports.START = 'inicio';
+const END = exports.END = 'fin';
+const DATE_FORMAT = exports.DATE_FORMAT = 'D [de] MMMM';
+const DATE_FORMAT_WITH_YEAR = exports.DATE_FORMAT_WITH_YEAR = 'D [de] MMMM [de] YYYY';
+const DAY = exports.DAY = 'day';

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/index.js

@@ -7,12 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
+var _dayjs = _interopRequireDefault(require("dayjs"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BimestralConsumption = _ref => {
   let {
     assets,
+    smartBill,
     texts
   } = _ref;
   const bimestralConsumptionTexts = texts?.bimestralConsumption;
@@ -23,6 +25,24 @@ const BimestralConsumption = _ref => {
   const {
     BackgroundVector
   } = assets?.bimestral || {};
+  const readingPeriods = smartBill?.reading_periods || [];
+  const startDate = readingPeriods.find(period => period.moment === _constants.START)?.date;
+  const endDate = readingPeriods.find(period => period.moment === _constants.END)?.date;
+  const formatDate = function (dateString) {
+    let includeYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!dateString) return '';
+    const format = includeYear ? _constants.DATE_FORMAT_WITH_YEAR : _constants.DATE_FORMAT;
+    return (0, _dayjs.default)(dateString).locale('es').format(format);
+  };
+  const calculateTotalDays = (start, end) => {
+    if (!start || !end) return 0;
+    const startMoment = (0, _dayjs.default)(start);
+    const endMoment = (0, _dayjs.default)(end);
+    return endMoment.diff(startMoment, _constants.DAY);
+  };
+  const formattedStartDate = formatDate(startDate, false);
+  const formattedEndDate = formatDate(endDate, true);
+  const totalDays = calculateTotalDays(startDate, endDate);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.bimestralConsumption
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -37,8 +57,14 @@ const BimestralConsumption = _ref => {
       icon,
       key
     } = _ref2;
-    const title = bimestralConsumptionTexts?.[key]?.title;
-    const description = bimestralConsumptionTexts?.[key]?.description;
+    const {
+      title,
+      description
+    } = bimestralConsumptionTexts?.[key]?.({
+      formattedStartDate,
+      formattedEndDate,
+      totalDays
+    });
     return /*#__PURE__*/_react.default.createElement(_energyUi.UTActionCard, {
       adornment: {
         position: 'left',
@@ -73,6 +99,7 @@ const BimestralConsumption = _ref => {
 };
 BimestralConsumption.propTypes = {
   assets: _propTypes.object,
+  smartBill: _propTypes.object,
   texts: _propTypes.object
 };
 var _default = exports.default = BimestralConsumption;

package/dist/components/SmartBillSummary/tabs/Consumptions/index.js

@@ -16,6 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Consumptions = _ref => {
   let {
     assets,
+    reverseRow = {},
     smartBill,
     translations
   } = _ref;
@@ -27,6 +28,7 @@ const Consumptions = _ref => {
     className: _stylesModule.default.generalContainer
   }, /*#__PURE__*/_react.default.createElement(_BimestralConsumption.default, {
     assets: assets,
+    smartBill: smartBill,
     texts: translations
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumptionDetail
@@ -36,7 +38,7 @@ const Consumptions = _ref => {
     variant: "title3",
     weight: "medium"
   }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, description)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.consumptionDetailColumns
+    className: `${_stylesModule.default.consumptionDetailColumns} ${reverseRow}`
   }, /*#__PURE__*/_react.default.createElement(_CurrentConsumption.default, {
     assets: assets,
     smartBill: smartBill,
@@ -48,6 +50,7 @@ const Consumptions = _ref => {
 };
 Consumptions.propTypes = {
   assets: _propTypes.object,
+  reverseRow: _propTypes.object,
   smartBill: _billDataTypes.billDataTypes,
   translations: _propTypes.object
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.9.2",
+  "version": "3.11.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",