@widergy/utilitygo-smart-bill-web 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.3.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.2.0...v3.3.0) (2025-03-19)
+
+
+### Features
+
+* [CX-201] billing tab smartbill ([#44](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/44)) ([d4175c3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/d4175c3fd8a6e773b750bfe9d0c525c35689e8ef))
+
 # [3.2.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.1.0...v3.2.0) (2025-03-12)
 
 

package/dist/components/SmartBillSummary/constants.js

@@ -7,18 +7,17 @@ exports.TAB_COMPONENT_MAPPER = exports.BIMESTRAL_PERIODICITY = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tabs = require("../../shared/constants/tabs");
 var _Consumptions = _interopRequireDefault(require("./tabs/Consumptions"));
+var _Billing = _interopRequireDefault(require("./tabs/Billing"));
 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); } /* eslint-disable react/prop-types */
 const BIMESTRAL_PERIODICITY = exports.BIMESTRAL_PERIODICITY = 'BIMESTRAL';
 const renderComponentWithProps = (Component, tab) => props => /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
-  assets: props?.assets?.[tab],
-  translations: props?.translations?.[tab]
+  assets: props?.assets?.[tab] || {},
+  translations: props?.translations?.[tab] || {}
 }));
 const TAB_COMPONENT_MAPPER = exports.TAB_COMPONENT_MAPPER = {
   [_tabs.SMARTBILL_TABS.CONSUMPTIONS]: renderComponentWithProps(_Consumptions.default, _tabs.SMARTBILL_TABS.CONSUMPTIONS),
-  [_tabs.SMARTBILL_TABS.BILLING]: renderComponentWithProps(() => /*#__PURE__*/_react.default.createElement("div", null, "Facturaci\xF3n: CX-201"),
-  // TODO
-  _tabs.SMARTBILL_TABS.BILLING),
+  [_tabs.SMARTBILL_TABS.BILLING]: renderComponentWithProps(_Billing.default, _tabs.SMARTBILL_TABS.BILLING),
   [_tabs.SMARTBILL_TABS.GLOSSARY]: renderComponentWithProps(() => /*#__PURE__*/_react.default.createElement("div", null, "Glosario: CX-243"),
   // TODO
   _tabs.SMARTBILL_TABS.GLOSSARY)

package/dist/components/SmartBillSummary/index.js

@@ -17,12 +17,19 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const SmartBillSummary = _ref => {
   let {
     assets,
+    constants,
+    consumptionLevels,
+    components,
+    currentAccount,
+    handlers,
+    isDesktopSize,
     loading,
     smartBill,
     tabOptions,
-    translations
+    translations,
+    utils
   } = _ref;
-  const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(tabOptions, smartBill);
+  const filteredTabOptions = (0, _utils.getTabOptions)(tabOptions, smartBill) || [];
   const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(filteredTabOptions);
   const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
   const changeCurrentTab = newTab => setCurrentTab(newTab);
@@ -47,15 +54,32 @@ const SmartBillSummary = _ref => {
     value: currentTab
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.contentContainer
-  }, _constants.TAB_COMPONENT_MAPPER[currentTab]({
+  }, _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
     assets,
+    constants,
+    consumptionLevels,
+    components,
+    currentAccount,
+    handlers,
+    isDesktopSize,
     loading,
     smartBill,
-    translations
+    translations,
+    utils
   })));
 };
 SmartBillSummary.propTypes = {
   assets: _propTypes.object,
+  constants: _propTypes.object,
+  consumptionLevels: _propTypes.array,
+  components: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.elementType
+  }),
+  currentAccount: _propTypes.array,
+  handlers: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.func
+  }),
+  isDesktopSize: _propTypes.bool,
   loading: _propTypes.bool,
   smartBill: _billDataTypes.billDataTypes,
   tabOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
@@ -65,6 +89,7 @@ SmartBillSummary.propTypes = {
     label: _propTypes.string,
     value: _propTypes.string
   })),
-  translations: _propTypes.object
+  translations: _propTypes.object,
+  utils: _propTypes.object
 };
 var _default = exports.default = SmartBillSummary;

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

@@ -1,4 +1,4 @@
-@import '_sizes.scss';
+@import '../../scss/variables/sizes.module.scss';
 
 $max-content-width: 1264px;
 $tab-height: 48px;

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_WARNING_ICON = exports.DEFAULT_SUCCESS_ICON = exports.DEFAULT_ICON_SIZE = void 0;
+const DEFAULT_WARNING_ICON = exports.DEFAULT_WARNING_ICON = 'IconAlertTriangle';
+const DEFAULT_SUCCESS_ICON = exports.DEFAULT_SUCCESS_ICON = 'IconCheck';
+const DEFAULT_ICON_SIZE = exports.DEFAULT_ICON_SIZE = 16;

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

@@ -0,0 +1,34 @@
+"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 _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DebtStatusLabel = _ref => {
+  let {
+    debtStatusLabel,
+    isWarning
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.container} ${isWarning ? _stylesModule.default.withDebtsContainer : _stylesModule.default.adheredToAutomaticDebit} `
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: isWarning ? 'warning' : 'success',
+    name: isWarning ? _constants.DEFAULT_WARNING_ICON : _constants.DEFAULT_SUCCESS_ICON,
+    size: _constants.DEFAULT_ICON_SIZE
+  }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: isWarning ? 'warning' : 'success',
+    variant: "small",
+    weight: "medium"
+  }, debtStatusLabel));
+};
+DebtStatusLabel.propTypes = {
+  debtStatusLabel: _propTypes.string,
+  isWarning: _propTypes.bool
+};
+var _default = exports.default = DebtStatusLabel;

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

@@ -0,0 +1,16 @@
+.container {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+  padding: 4px 8px;
+}
+
+.withDebtsContainer {
+  background-color: var(--semanticWarning01);
+}
+
+.adheredToAutomaticDebit {
+  background-color: var(--semanticSuccess01);
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MIN_VALUE_PROGRESS = exports.MAX_VALUE_PROGRESS = void 0;
+const MIN_VALUE_PROGRESS = exports.MIN_VALUE_PROGRESS = 0;
+const MAX_VALUE_PROGRESS = exports.MAX_VALUE_PROGRESS = 100;

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _energyUi = require("@widergy/energy-ui");
+var _utils = require("./utils");
+var _constants = require("./constants");
+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; }
+const ProgressBar = _ref => {
+  let {
+    components = {},
+    currentPeriod,
+    data,
+    isT1,
+    limitValue,
+    specificRate,
+    tooltipContent,
+    translations,
+    value
+  } = _ref;
+  const {
+    LinearProgress
+  } = components;
+  const lastRange = data[data.length - 1]?.range[1];
+  const totalRange = lastRange === 'Infinity' ? data[data.length - 2]?.range[1] * 1.5 : lastRange;
+  const progressOverlayValue = (0, _utils.getProgressOverlayValue)(specificRate, totalRange, value);
+  const isOverLimit = value > limitValue;
+  const {
+    initialLabel,
+    dynamicLabel,
+    finalLabel,
+    currentValueLabel,
+    contrastValueLabel
+  } = (0, _utils.formatLabels)({
+    currentPeriod,
+    isOverLimit,
+    limitValue,
+    translations,
+    value
+  }) || {};
+  const consumptionPercentage = (0, _utils.getConsumptionPercentage)(value, limitValue, isOverLimit) || _constants.MAX_VALUE_PROGRESS;
+  const shouldRenderDynamicLabel = value > 0 && limitValue > 0;
+  const [limitLabelWidth, setLimitLabelWidth] = (0, _react.useState)(0);
+  const limitLabelRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (limitLabelRef.current) {
+      setLimitLabelWidth(limitLabelRef.current.offsetWidth);
+    }
+  }, [dynamicLabel, finalLabel]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isT1 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressBar
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressBackground
+  }, data.map(_ref2 => {
+    let {
+      range,
+      name
+    } = _ref2;
+    const isLast = range[1] === 'Infinity';
+    const width = isLast ? '20%' : `${range[1] / totalRange * 100}%`;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: name,
+      className: _stylesModule.default.progressSegment,
+      style: {
+        width,
+        flexGrow: isLast ? 1 : 0
+      }
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.segmentName,
+      colorTheme: "gray",
+      variant: "xsmall"
+    }, name));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressOverlay,
+    style: {
+      left: `${progressOverlayValue}%`,
+      width: `calc(100% - ${progressOverlayValue - 0.5}%)`
+    }
+  })) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `
+          ${_stylesModule.default.powerAndDatesContainer}
+          ${isOverLimit && _stylesModule.default.overHiredContainer}
+        `
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDetailsContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionComparison
+  }, value >= 0 && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1"
+  }, currentValueLabel), value >= 0 && limitValue > 0 && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, contrastValueLabel)), tooltipContent && /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
+    content: tooltipContent
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "neutral",
+    name: "EnergyIconQuestionFilled",
+    size: 20
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressContainer
+  }, /*#__PURE__*/_react.default.createElement(LinearProgress, {
+    classes: (0, _utils.getProgressBarClasses)({
+      consumptionPercentage,
+      limitValue,
+      value,
+      hiredValue: limitValue,
+      isOverLimit,
+      styles: _stylesModule.default
+    }),
+    value: consumptionPercentage,
+    variant: "determinate"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressLabels
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "xsmall"
+  }, initialLabel), shouldRenderDynamicLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.dinamicLabel,
+    style: {
+      left: (0, _utils.getDynamicPosition)(consumptionPercentage, limitLabelWidth)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "xsmall"
+  }, dynamicLabel)), /*#__PURE__*/_react.default.createElement("span", {
+    className: _stylesModule.default.smallGrayLabel,
+    ref: limitLabelRef
+  }, finalLabel)))));
+};
+ProgressBar.propTypes = {
+  components: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.elementType
+  }),
+  currentPeriod: _propTypes.object,
+  data: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string,
+    color: _propTypes.string,
+    range: (0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]))
+  })),
+  isT1: _propTypes.bool,
+  limitValue: _propTypes.number,
+  specificRate: _propTypes.string,
+  tooltipContent: _propTypes.string,
+  translations: _propTypes.object,
+  value: _propTypes.number
+};
+var _default = exports.default = ProgressBar;

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

@@ -0,0 +1,174 @@
+@import '../../../../../../../../scss/variables/fontSizes.module.scss';
+
+$default-border-radius: 100px;
+$default-progress-bar-background: linear-gradient(88.75deg, #30e3a2 1.07%, #efc73c 50.13%, #ec574d 98.93%);
+$default-information-color: #21c7e4;
+
+.progressBar {
+  height: 9px;
+  margin: 0 24px;
+  position: relative;
+}
+
+.progressBackground {
+  background: $default-progress-bar-background;
+  border-radius: $default-border-radius;
+  display: flex;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.progressSegment {
+  flex-grow: 1;
+  height: 100%;
+  position: relative;
+
+  &:last-child {
+    border-bottom-right-radius: $default-border-radius;
+    border-top-right-radius: $default-border-radius;
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.progressSegment::after {
+  background-color: var(--light01);
+  content: '';
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 2px;
+  z-index: 3;
+}
+
+.segmentName {
+  position: absolute;
+  top: 18px;
+}
+
+.progressOverlay {
+  background-color: var(--light04);
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+
+  &:last-child {
+    border-bottom-right-radius: $default-border-radius;
+    border-top-right-radius: $default-border-radius;
+  }
+}
+
+.backgroundBar {
+  background: var(--light02);
+  border-radius: $default-border-radius;
+  height: 9px;
+}
+
+.foregroundBar {
+  background: $default-information-color;
+  border-radius: $default-border-radius;
+}
+
+.overHiredBackgroundBar {
+  background: var(--semanticWarning04);
+  border-radius: $default-border-radius;
+}
+
+.overHiredForegroundBar {
+  background: var(--chartGradientHorizontal1);
+  border-radius: $default-border-radius;
+}
+
+.powerAndDatesContainer {
+  display: flex;
+  height: unset !important;
+  justify-content: space-between;
+  margin: 0 24px;
+  position: relative;
+}
+
+.highestConsumptionContainer {
+  display: flex;
+  flex-direction: column;
+  place-items: flex-start;
+}
+
+.hiredPowerContainer {
+  display: flex;
+  flex-direction: column;
+  place-items: flex-end;
+}
+
+.powerAmount {
+  align-items: baseline;
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.overHiredContainer {
+  flex-direction: row-reverse;
+  margin-bottom: 8px;
+
+  .highestConsumptionContainer {
+    place-items: flex-end;
+  }
+
+  .hiredPowerContainer {
+    place-items: flex-start;
+  }
+}
+
+.hiredLabel {
+  color: var(--actionNeutral04);
+}
+
+.progressContainer {
+  margin: 0 24px;
+  position: relative;
+}
+
+.progressLabels {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0 -24px;
+  position: relative;
+}
+
+.dinamicLabel {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.consumptionDetailsContainer {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  grid-gap: 4px;
+  justify-content: space-between;
+}
+
+.consumptionComparison {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 4px;
+  margin-bottom: 8px;
+}
+
+.smallGrayLabel {
+  color: var(--gray04);
+  font-size: $small;
+  line-height: 1.125rem;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/utils.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProgressOverlayValue = exports.getProgressBarClasses = exports.getDynamicPosition = exports.getConsumptionPercentage = exports.formatMaxPowerRegisteredDate = exports.formatLabels = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _numeral = _interopRequireDefault(require("numeral"));
+var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getConsumptionPercentage = (currentValue, contrastValue, isOverLimit) => (currentValue > contrastValue ? isOverLimit ? contrastValue / currentValue : 1 : currentValue / contrastValue) * 100;
+exports.getConsumptionPercentage = getConsumptionPercentage;
+const formatMaxPowerRegisteredDate = maxConsumptionDay => (0, _dayjs.default)(maxConsumptionDay).tz().format('D MMM');
+exports.formatMaxPowerRegisteredDate = formatMaxPowerRegisteredDate;
+const getDynamicPosition = (percentage, labelWidth) => `clamp(50px, calc(${percentage}% - 10px), calc(100% - ${labelWidth + 28}px))`;
+exports.getDynamicPosition = getDynamicPosition;
+_dayjs.default.extend(_isBetween.default);
+const formatLabels = _ref => {
+  let {
+    currentPeriod,
+    isOverLimit,
+    limitValue,
+    translations = {},
+    value
+  } = _ref;
+  const currentValueFormatted = (0, _numeral.default)(value).format('0,0.[00]');
+  const contrastValueFormatted = (0, _numeral.default)(limitValue).format('0,0.[00]') || 0;
+  const maxConsumptionDay = (0, _dayjs.default)(`${currentPeriod?.year}-${currentPeriod?.number}-01`);
+  const {
+    currentValueWithUnitLabel,
+    maxValueWithUnitLabel
+  } = translations;
+  return {
+    initialLabel: _constants.MIN_VALUE_PROGRESS,
+    dynamicLabel: isOverLimit ? contrastValueFormatted : currentValueFormatted,
+    finalLabel: isOverLimit || !limitValue ? currentValueFormatted : contrastValueFormatted,
+    currentValueLabel: currentValueWithUnitLabel?.({
+      value: currentValueFormatted,
+      day: formatMaxPowerRegisteredDate(maxConsumptionDay)
+    }),
+    contrastValueLabel: maxValueWithUnitLabel?.({
+      detailLabel: 'contratada',
+      value: contrastValueFormatted
+    })
+  };
+};
+exports.formatLabels = formatLabels;
+const getProgressBarClasses = _ref2 => {
+  let {
+    consumptionPercentage,
+    contrastValue,
+    currentValue,
+    hiredValue,
+    isOverLimit,
+    styles
+  } = _ref2;
+  return {
+    root: `${isOverLimit && styles.overHiredBackgroundBar} ${styles.backgroundBar}`,
+    bar: `
+    ${!isOverLimit ? styles.foregroundBar : styles.overHiredForegroundBar}
+    ${currentValue > hiredValue && !contrastValue && styles.overHiredBackgroundBar}
+    ${!consumptionPercentage && styles.hidden}
+  `
+  };
+};
+exports.getProgressBarClasses = getProgressBarClasses;
+const getProgressOverlayValue = (rate, totalRange, value) => {
+  const rateName = rate?.name;
+  const defaultProgress = value / totalRange * 100;
+  switch (rateName) {
+    case 'R1':
+      return defaultProgress * 0.4;
+    case 'R2':
+      return defaultProgress * 0.55;
+    case 'R3':
+      return defaultProgress * 0.85;
+    case 'R4':
+      return defaultProgress * 1.13;
+    case 'R5':
+      return defaultProgress * 1.368;
+    case 'R6':
+      return defaultProgress * 1.37;
+    default:
+      return defaultProgress;
+  }
+};
+exports.getProgressOverlayValue = getProgressOverlayValue;

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

@@ -0,0 +1,165 @@
+"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 _utils = require("../../../Consumptions/components/CurrentConsumption/utils");
+var _utils2 = require("./utils");
+var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RateCard = _ref => {
+  let {
+    components,
+    consumptionLevels,
+    currentPeriod,
+    formatAmount,
+    normalizedRate = '',
+    rateCardTranslations = {},
+    ratesTableLink,
+    smartBill = {},
+    subsidy = '',
+    subsidyLevels
+  } = _ref;
+  const {
+    helpText,
+    limitRateValueLabel,
+    seeRatesTable,
+    startRateValueLabel,
+    title,
+    tooltipContent,
+    unit,
+    yourConsumption,
+    yourRate
+  } = rateCardTranslations;
+  const {
+    client,
+    detail,
+    periods
+  } = smartBill;
+  const purchasedRate = client?.rate?.purchased || '';
+  const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
+  const {
+    totalConsumption
+  } = (0, _utils.getConsumptionLabels)(periodsToCompare) || {};
+  const {
+    levels = []
+  } = consumptionLevels.find(_ref2 => {
+    let {
+      rate
+    } = _ref2;
+    return rate === normalizedRate;
+  }) || consumptionLevels[0] || {};
+  const {
+    rates = []
+  } = levels.find(_ref3 => {
+    let {
+      name
+    } = _ref3;
+    return name && name === subsidyLevels[subsidy];
+  }) || levels[0] || {};
+  const currentIndex = rates.findIndex(_ref4 => {
+    let {
+      range
+    } = _ref4;
+    return range[1] >= totalConsumption;
+  });
+  const currentRate = rates[currentIndex] ?? {};
+  const startRateValue = Array.isArray(currentRate?.range) && currentRate.range[0];
+  const limitRateValue = Array.isArray(currentRate?.range) && currentRate.range.length > 0 && currentRate.range[currentRate.range.length - 1];
+  const concepts = detail?.concepts?.[0]?.lines;
+  const fixedCharges = concepts?.[0];
+  const variableCharges = concepts?.[1];
+  const {
+    title: fixedChargeTitle,
+    amount: fixedChargeValue
+  } = fixedCharges || {};
+  const {
+    title: variableChargeTitle,
+    amount: variableChargeValue
+  } = variableCharges || {};
+  const isT1 = purchasedRate.includes('T1');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.headerTitles
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title2",
+    weight: "medium"
+  }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, helpText)), /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+    components: components,
+    currentPeriod: currentPeriod,
+    data: rates,
+    isT1: isT1,
+    limitValue: limitRateValue,
+    specificRate: currentRate,
+    tooltipContent: tooltipContent,
+    translations: rateCardTranslations,
+    value: totalConsumption
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDataContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionContent
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, (0, _utils2.getCurrentRate)(purchasedRate, currentRate)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, !isT1 ? yourRate : limitRateValue === 'Infinity' ? startRateValueLabel?.(startRateValue) : limitRateValueLabel?.(limitRateValue))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionContent
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, totalConsumption, " ", unit), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, yourConsumption))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.detail
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    weight: "medium"
+  }, fixedChargeTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, formatAmount?.(fixedChargeValue))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.detail
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    weight: "medium"
+  }, variableChargeTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, formatAmount?.(variableChargeValue))), /*#__PURE__*/_react.default.createElement("a", {
+    className: _stylesModule.default.footerAction,
+    href: ratesTableLink,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "neutral",
+    weight: "medium"
+  }, seeRatesTable), /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "neutral",
+    name: "IconChevronRight",
+    size: 20
+  }))));
+};
+RateCard.propTypes = {
+  components: _propTypes.object,
+  consumptionLevels: _propTypes.array,
+  currentPeriod: _propTypes.object,
+  formatAmount: _propTypes.func,
+  normalizedRate: _propTypes.string,
+  rateCardTranslations: _propTypes.object,
+  ratesTableLink: _propTypes.string,
+  smartBill: _propTypes.object,
+  subsidy: _propTypes.string,
+  subsidyLevels: (0, _propTypes.objectOf)(_propTypes.string)
+};
+var _default = exports.default = RateCard;

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

@@ -0,0 +1,60 @@
+.container {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.headerTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  padding: 24px 24px 0;
+}
+
+.consumptionDataContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 24px;
+  justify-content: space-between;
+  padding: 24px 24px 0;
+}
+
+.consumptionContent {
+  flex: 1;
+}
+
+.footer {
+  width: 100%;
+}
+
+.footerAction {
+  align-items: center;
+  background-color: transparent;
+  border-top: 1px solid var(--light04);
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+  padding: 16px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--light03);
+  }
+
+  &:active {
+    background-color: var(--light04);
+  }
+}
+
+.detail {
+  align-items: center;
+  border-top: 1px solid var(--light04);
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 16px;
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurrentRate = void 0;
+const getCurrentRate = function () {
+  let baseRate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let specificRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const isT1 = baseRate.includes('T1');
+  const baseRateParts = baseRate.split('-');
+  return isT1 ? `${baseRateParts[0]}-${specificRate?.name || baseRateParts[1]}` : baseRate;
+};
+exports.getCurrentRate = getCurrentRate;

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

@@ -0,0 +1,288 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+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"));
+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 Billing = _ref => {
+  let {
+    assets,
+    constants = {},
+    consumptionLevels = [],
+    components,
+    currentAccount = {},
+    handlers = {},
+    isDesktopSize,
+    smartBill = {},
+    translations,
+    utils = {}
+  } = _ref;
+  const {
+    formatters = {}
+  } = utils;
+  const {
+    clientNumberFormatter,
+    formatAmount
+  } = formatters;
+  const {
+    adherenceStatus,
+    subsidyLevels
+  } = constants;
+  const {
+    UtilityLogo
+  } = assets;
+  const {
+    handleAutomaticDebitAdherence = () => {},
+    handleDownloadBill = () => {},
+    handleGoToDigitalBill = () => {},
+    getConsumptionLevels = () => {}
+  } = handlers;
+  const {
+    adhered,
+    automaticDebit = {},
+    digitalBill = {},
+    downloadBill = {},
+    header = {},
+    notAdhered,
+    rateCard: rateCardTranslations,
+    ratesTableLink,
+    titularCard = {},
+    totalAmountLabel,
+    totalCard = {}
+  } = translations;
+  const {
+    billIssueDate,
+    billTypeHelpText
+  } = header;
+  const {
+    title: digitalBillTitle
+  } = digitalBill;
+  const {
+    title: downloadBillTitle
+  } = downloadBill;
+  const {
+    title: automaticDebitTitle
+  } = automaticDebit;
+  const {
+    title: titularCardTitle,
+    addressHelpText,
+    titularHelpText,
+    clientNumberHelpText,
+    ivaConditionHelpText
+  } = titularCard;
+  const {
+    firstExpiration
+  } = 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,
+    client_number: clientNumber = '',
+    holder_name: titularName,
+    postal_address: postalAddress,
+    iva_condition: ivaCondition
+  } = client || {};
+  const firstExpirationDate = (0, _utils.getFormattedDate)(expirations?.[0]?.date);
+  const {
+    total_amount: totalAmount
+  } = detail || {};
+  const {
+    adherence_to_automatic_debit: adherenceToAutomaticDebit,
+    normalized_rate: normalizedRate,
+    subsidy_level: subsidy
+  } = currentAccount;
+  const isAdheredToAutomaticDebit = adherenceToAutomaticDebit === adherenceStatus?.subscribed;
+  const actionCards = [{
+    isAdhered: isAdheredToDigitalBill,
+    leftIcon: 'IconReceipt',
+    onClick: !isAdheredToDigitalBill && handleGoToDigitalBill,
+    showStatus: true,
+    title: digitalBillTitle
+  }, {
+    isAdhered: isAdheredToAutomaticDebit,
+    leftIcon: 'IconCreditCard',
+    onClick: !isAdheredToAutomaticDebit && handleAutomaticDebitAdherence,
+    showStatus: true,
+    title: automaticDebitTitle
+  }, {
+    leftIcon: 'IconInfoCircle',
+    leftIconProps: {
+      area: true,
+      size: 28
+    },
+    onClick: handleDownloadBill,
+    rightIcon: 'IconDownload',
+    title: downloadBillTitle
+  }];
+  (0, _react.useEffect)(() => {
+    if ((0, _isEmpty.default)(consumptionLevels)) getConsumptionLevels();
+  }, []);
+  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.column
+  }, 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
+  }, /*#__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)), /*#__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)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularFooter
+  }, /*#__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)), /*#__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.column
+  }, /*#__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, {
+    consumptionLevels,
+    components,
+    currentPeriod,
+    formatAmount,
+    normalizedRate,
+    rateCardTranslations,
+    ratesTableLink,
+    smartBill,
+    subsidy,
+    subsidyLevels,
+    translations
+  }))));
+};
+Billing.propTypes = {
+  assets: _propTypes.object,
+  constants: _propTypes.object,
+  consumptionLevels: _propTypes.array,
+  components: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.elementType
+  }),
+  currentAccount: _propTypes.object,
+  handlers: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.func
+  }),
+  isDesktopSize: _propTypes.bool,
+  smartBill: _billDataTypes.billDataTypes,
+  translations: _propTypes.object,
+  utils: _propTypes.object
+};
+var _default = exports.default = Billing;

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

@@ -0,0 +1,132 @@
+@import '../../../../scss/variables/mediaQueries.module.scss';
+
+.generalContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 32px;
+  padding: 24px 32px;
+
+  @media #{$mobile} {
+    padding: 24px 16px;
+  }
+}
+
+.billHeader {
+  align-items: center;
+  background-color: var(--light01);
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 12px 16px;
+}
+
+.logo {
+  height: 35px;
+  object-fit: contain;
+  width: auto;
+}
+
+.billHeaderLabels {
+  align-items: center;
+  display: flex;
+  grid-gap: 32px;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+
+.valueAndHelpText {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}
+
+.detailColumns {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+}
+
+.column {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.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: 4px;
+  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/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFormattedDate = exports.getCurrentPeriod = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _seamlessImmutable = require("seamless-immutable");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getCurrentPeriod = billData => (0, _seamlessImmutable.getIn)(billData, ['periods'], []).find(period => period.current) || {};
+exports.getCurrentPeriod = getCurrentPeriod;
+const getFormattedDate = date => (0, _dayjs.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
+exports.getFormattedDate = getFormattedDate;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/utils.js

@@ -27,7 +27,7 @@ const formatDate = date => {
 };
 const getConsumptionLabels = function () {
   let periods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let texts = arguments.length > 1 ? arguments[1] : undefined;
+  let texts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const currentPeriod = periods?.find(period => period?.current);
   const totalConsumption = currentPeriod?.consumptions?.[0];
   const dailyConsumption = currentPeriod?.consumptions?.[1];
@@ -41,7 +41,7 @@ const getConsumptionLabels = function () {
   } = dailyConsumption || {};
   const startDate = currentPeriod?.settlements?.start_date;
   const endDate = currentPeriod?.settlements?.end_date;
-  const description = texts.consumptions.youConsumedDescription({
+  const description = texts?.consumptions?.youConsumedDescription?.({
     dailyConsumptionUnit,
     dailyConsumptionValue: (0, _numeral.default)(dailyConsumptionValue).format('0,0.[00]'),
     endDate: formatDate(endDate),

package/package.json

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