@widergy/utilitygo-smart-bill-web 3.18.0 → 3.19.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [3.19.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.18.1...v3.19.0) (2025-12-22)
+
+
+### Bug Fixes
+
+* updates npm token ([3cec5b1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/3cec5b1b92330c19c895c2ae67dc9b391d571cf2))
+
+
+### Features
+
+* [EVEP-46, EVEP-274] smartbill v2 ([#72](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/72)) ([22c0382](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/22c0382827781d284df215fdd6131da676ca6308))
+
+## [3.18.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.18.0...v3.18.1) (2025-12-09)
+
+
+### Bug Fixes
+
+* loading when download smartbill ([#74](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/74)) ([a3b9bb3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/a3b9bb32b1efb5956289187bc6d78bc88435e85a))
+
 # [3.18.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.17.0...v3.18.0) (2025-11-06)
 
 

package/dist/components/SmartBillSummary/constants.js

@@ -17,11 +17,7 @@ const TAB_VALUE_REGEX = exports.TAB_VALUE_REGEX = /\[data-tab-value="([^"]+)"\]/
 const CAPTURED_VALUE_REGEX = exports.CAPTURED_VALUE_REGEX = 1;
 const ONBOARDING_OPTIONS = exports.ONBOARDING_OPTIONS = {
   overlayOpacity: 1,
-  positionPrecedence: ['top', 'left', 'bottom', 'right'],
-  scrollPadding: 5,
-  scrollTo: 'tooltip',
-  scrollToElement: false,
-  tooltipPosition: 'top'
+  positionPrecedence: ['top', 'left', 'bottom', 'right']
 };
 const renderComponentWithProps = (Component, tab) => props => /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
   assets: props?.assets?.[tab] || {},

package/dist/components/SmartBillSummary/index.js

@@ -13,7 +13,8 @@ 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 _BillHeader = _interopRequireDefault(require("./tabs/components/BillHeader"));
+var _SecondHeader = _interopRequireDefault(require("./tabs/components/SecondHeader"));
 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); }
@@ -23,10 +24,12 @@ const SmartBillSummary = _ref => {
     annex,
     assets,
     billingLayout,
+    consumptionLayout,
     colors,
     components,
     constants,
     downloadSmartbillEnabled,
+    downloadSmartBillLoading,
     handlers,
     loading,
     showOnboarding = false,
@@ -37,7 +40,8 @@ const SmartBillSummary = _ref => {
     tabOptions,
     translations,
     utils,
-    periodSpan
+    periodSpan,
+    progressBarConcept
   } = _ref;
   const {
     aiQuestionsList,
@@ -81,7 +85,7 @@ const SmartBillSummary = _ref => {
   } = loading ? {
     tabs: [],
     onboardingSteps: []
-  } : (0, _utils.getTabOptions)(isDesktopSize, onboardingSteps, tabOptions, smartBill);
+  } : (0, _utils.getTabOptions)(isDesktopSize, onboardingSteps, tabOptions);
   const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(tabs);
   const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
   const [aiPanelIsOpen, setAiPanelIsOpen] = (0, _react.useState)(false);
@@ -152,11 +156,21 @@ const SmartBillSummary = _ref => {
     debtStatusValidation: smartBill.debt_status_label !== null,
     debtStatusLabel: smartBill.debt_status_label,
     downloadSmartbillEnabled,
+    downloadSmartBillLoading,
     handleDownloadSmartBill,
     smartBill
+  }), tabs.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_SecondHeader.default, {
+    accountNumber: smartBill.client?.client_number,
+    accountNumberHelpText: translations.billingTab.secondHeader?.accountNumberHelpText,
+    supplyAddress: smartBill.client?.account_address,
+    city: currentAccount?.city,
+    district: currentAccount?.district,
+    supplyAddressHelpText: translations.billingTab.secondHeader?.supplyAddressHelpText,
+    clientNumberFormatter: utils?.formatters?.clientNumberFormatter
   }), _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
     assets,
     billingLayout,
+    consumptionLayout,
     constants,
     consumptionLevels,
     components,
@@ -171,7 +185,8 @@ const SmartBillSummary = _ref => {
     smartBill,
     translations,
     utils,
-    periodSpan
+    periodSpan,
+    progressBarConcept
   })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
     arrow: false,
     content: isDesktopSize ? widyTooltipContent : '',
@@ -179,7 +194,9 @@ const SmartBillSummary = _ref => {
       placement: 'left'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${widyEnabled ? _stylesModule.default.AIFloatButtonWidy : _stylesModule.default.AIFloatButton} smartbill-ai-float-button`
+    className: `${!widyEnabled && _stylesModule.default.AIFloatButtonContainer} smartbill-ai-float-button`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: widyEnabled ? _stylesModule.default.AIFloatButtonWidy : _stylesModule.default.AIFloatButton
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
     onClick: openAIPanel
   }, widyEnabled ? /*#__PURE__*/_react.default.createElement("img", {
@@ -188,7 +205,7 @@ const SmartBillSummary = _ref => {
   }) : /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
     colorTheme: "negative",
     name: "EnergyIconChatSparkFilled"
-  })))), /*#__PURE__*/_react.default.createElement(_AIPanel.default, {
+  }))))), /*#__PURE__*/_react.default.createElement(_AIPanel.default, {
     aiQuestionsList: aiQuestionsList,
     aiQuestionsListError: aiQuestionsListError,
     aiQuestionsListLoading: aiQuestionsListLoading,
@@ -207,19 +224,22 @@ const SmartBillSummary = _ref => {
     enabled: showOnboarding,
     handleComplete: onCloseOnboarding,
     handleOnClose: onCloseOnboarding,
-    steps: filteredOnboardingSteps
+    steps: filteredOnboardingSteps,
+    variant: "dark"
   }));
 };
 SmartBillSummary.propTypes = {
   annex: _propTypes.bool,
   assets: _propTypes.object,
   billingLayout: (0, _propTypes.arrayOf)(_propTypes.object),
+  consumptionLayout: (0, _propTypes.arrayOf)(_propTypes.object),
   colors: _propTypes.object,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType
   }),
   constants: _propTypes.object,
   downloadSmartbillEnabled: _propTypes.bool,
+  downloadSmartBillLoading: _propTypes.bool,
   handlers: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.func
   }),
@@ -238,6 +258,7 @@ SmartBillSummary.propTypes = {
   })),
   translations: _propTypes.object,
   utils: _propTypes.object,
-  periodSpan: _propTypes.string
+  periodSpan: _propTypes.string,
+  progressBarConcept: (0, _propTypes.arrayOf)(_propTypes.object)
 };
 var _default = exports.default = SmartBillSummary;

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

@@ -52,18 +52,20 @@ $tab-height: 48px;
   width: 100%;
 }
 
+.AIFloatButtonContainer {
+  bottom: 24px;
+  position: fixed;
+  padding: 8px;
+  right: 24px;
+}
+
 .AIFloatButton {
-  div {
-    align-items: center;
-    background-color: var(--actionAccent04);
-    border-radius: 100px;
-    bottom: 32px;
-    display: flex;
-    justify-content: center;
-    padding: 16px;
-    position: fixed;
-    right: 32px;
-  }
+  align-items: center;
+  background-color: var(--actionAccent04);
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 16px;
 }
 
 .AIFloatButtonWidy {

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

@@ -7,9 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _ColumnRenderer = _interopRequireDefault(require("../components/ColumnRenderer"));
 var _utils = require("./utils");
 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 => {

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

@@ -0,0 +1,93 @@
+"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 _core = require("@material-ui/core");
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ProgressBarItem = _ref => {
+  let {
+    item
+  } = _ref;
+  const {
+    id,
+    title,
+    tooltip,
+    splitPoint,
+    progressValue,
+    isExceeded,
+    isPositiveExcess,
+    registered,
+    limit,
+    unit,
+    excess,
+    min
+  } = item;
+  const safeSplit = Math.max(0, Math.min(100, Math.floor(splitPoint)));
+  const barColorClass = isExceeded ? min ? _stylesModule.default[`split-min-${safeSplit}`] : _stylesModule.default[`split-max-${safeSplit}`] : isPositiveExcess ? _stylesModule.default[`split-positive-${safeSplit}`] : _stylesModule.default.barNormal;
+  const labelColor = isExceeded ? 'error' : 'gray';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: id,
+    className: _stylesModule.default.card
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.mainSection
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressBarWrapper
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTProgressBar, {
+    classNames: {
+      root: _stylesModule.default.progressBar,
+      barColorPrimary: barColorClass,
+      container: _stylesModule.default.progressBarContainer
+    },
+    value: progressValue
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rowSpaceBetween
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.valueGroup
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: labelColor,
+    variant: "title1"
+  }, (0, _utils.formatNumber)(registered.value)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: labelColor,
+    variant: "subtitle2"
+  }, unit)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.valueGroup
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title1"
+  }, (0, _utils.formatNumber)(limit.value)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle2"
+  }, unit))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rowSpaceBetween
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, registered.label), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, limit.label))))), isExceeded && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
+    className: _stylesModule.default.divider
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footerSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rowSpaceBetween
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle2"
+  }, excess.label), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rowGap
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "error",
+    name: "IconInfoCircle",
+    size: 24
+  })))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle2",
+    colorTheme: "error"
+  }, (0, _utils.formatNumber)(excess.value), " ", unit))))));
+};
+ProgressBarItem.propTypes = {
+  item: _propTypes.object.isRequired
+};
+var _default = exports.default = ProgressBarItem;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ProgressBarItem/styles.module.scss

@@ -0,0 +1,109 @@
+@import '../../scss/variables/sizes.module.scss';
+
+$blue: var(--actionAccent04);
+$red: var(--semanticError04);
+$light-blue: var(--actionAccent03);
+$gray-track: var(--light04);
+$white: #fff;
+
+$striped-red-pattern: repeating-linear-gradient(45deg, $red, $red 2px, $white 2px, $white 4px);
+
+.card {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.mainSection {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+.progressBarWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.progressBar {
+  border-radius: 100px !important;
+  height: 12px;
+  width: 100%;
+}
+
+.progressBarContainer {
+  background-color: $gray-track !important;
+  border-radius: 100px !important;
+}
+
+.barNormal {
+  background-color: $blue !important;
+}
+
+@for $i from 0 through 100 {
+  .split-max-#{$i} {
+    background: linear-gradient(90deg, $blue 0%, $blue ($i * 1%), $red ($i * 1%), $red 100%) !important;
+  }
+}
+
+@for $i from 0 through 100 {
+  .split-min-#{$i} {
+    background:
+      linear-gradient(90deg, $blue 0%, $blue ($i * 1%), transparent ($i * 1%), transparent 100%),
+      $striped-red-pattern !important;
+    background-size:
+      100% 100%,
+      auto !important;
+  }
+}
+
+@for $i from 0 through 100 {
+  .split-positive-#{$i} {
+    background: linear-gradient(
+      90deg,
+      $blue 0%,
+      $blue ($i * 1%),
+      $white ($i * 1%),
+      $white calc(($i * 1%) + 2px),
+      $light-blue calc(($i * 1%) + 2px),
+      $light-blue 100%
+    ) !important;
+  }
+}
+
+.rowSpaceBetween {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.valueGroup {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+}
+
+.divider {
+  background-color: var(--light04);
+  margin: 0 !important;
+}
+
+.footerSection {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.rowGap {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ProgressBarItem/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatNumber = void 0;
+var _numeral = _interopRequireDefault(require("numeral"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const formatNumber = num => {
+  if (num === null || num === undefined) return '0';
+  return (0, _numeral.default)(num).format('0,0.[00]');
+};
+exports.formatNumber = formatNumber;

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

@@ -0,0 +1,50 @@
+"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 ReiterationBanner = _ref => {
+  let {
+    bannerText,
+    handleGoToReiteration,
+    texts
+  } = _ref;
+  const {
+    title,
+    description,
+    button
+  } = texts;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.reiterationContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.reiterationContent
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.reiterationSubcontent
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    name: "IconReceipt2",
+    size: 24,
+    colorTheme: "error"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.reiterationTexts
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, description), bannerText && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, bannerText)))), button && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionButton
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    onClick: handleGoToReiteration,
+    variant: "text"
+  }, button)));
+};
+ReiterationBanner.propTypes = {
+  bannerText: _propTypes.string,
+  handleGoToReiteration: _propTypes.func,
+  texts: _propTypes.object.isRequired
+};
+var _default = exports.default = ReiterationBanner;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ReiterationBanner/styles.module.scss

@@ -0,0 +1,43 @@
+@import '../../scss/variables/sizes.module.scss';
+
+.reiterationContainer {
+  background-color: var(--semanticError01);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.reiterationContent {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 16px;
+  padding: 16px;
+}
+
+.reiterationSubcontent {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 16px;
+}
+
+.reiterationTexts {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  grid-gap: 8px;
+}
+
+.actionButton {
+  border-top: 1px solid;
+  border-color: var(--semanticError02);
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}

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

@@ -0,0 +1,27 @@
+"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 SimpleBanner = _ref => {
+  let {
+    bannerText
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bannerDetail
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    name: "IconReceipt2",
+    colorTheme: "error",
+    size: 24
+  }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, bannerText));
+};
+SimpleBanner.propTypes = {
+  bannerText: _propTypes.string.isRequired
+};
+var _default = exports.default = SimpleBanner;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/SimpleBanner/styles.module.scss

@@ -0,0 +1,12 @@
+@import '../../scss/variables/sizes.module.scss';
+
+.bannerDetail {
+  align-items: flex-start;
+  background-color: var(--semanticError01);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 8px 16px;
+}

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _ProgressBarItem = _interopRequireDefault(require("./components/ProgressBarItem"));
+var _ReiterationBanner = _interopRequireDefault(require("./components/ReiterationBanner"));
+var _SimpleBanner = _interopRequireDefault(require("./components/SimpleBanner"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ProgressBarCard = _ref => {
+  let {
+    handleGoToReiteration,
+    progressBarConcept,
+    smartBill,
+    texts
+  } = _ref;
+  const itemsWithStatus = progressBarConcept.filter(concept => concept.accountConditions.some(condition => smartBill.client.rate.purchased.includes(condition.rate))).map(concept => {
+    const info = (0, _utils.getInfo)(concept, smartBill);
+    return {
+      ...concept,
+      ...info
+    };
+  });
+  const renderedProgressBars = itemsWithStatus.map(item => /*#__PURE__*/_react.default.createElement(_ProgressBarItem.default, {
+    key: item.id,
+    item: item
+  }));
+  const exceededItems = itemsWithStatus.filter(item => item.isExceeded);
+  const reiteration = !!smartBill.reiteration;
+  const bannerText = exceededItems.length === 1 && !reiteration ? exceededItems[0].banner : exceededItems.length === 2 ? reiteration ? exceededItems[1]?.banner : exceededItems[1].doubleBanner : null;
+  return /*#__PURE__*/_react.default.createElement("div", null, reiteration && /*#__PURE__*/_react.default.createElement(_ReiterationBanner.default, {
+    bannerText: bannerText,
+    handleGoToReiteration: handleGoToReiteration,
+    texts: texts.reiterationBanner
+  }), bannerText && !reiteration && /*#__PURE__*/_react.default.createElement(_SimpleBanner.default, {
+    bannerText: bannerText
+  }), renderedProgressBars);
+};
+ProgressBarCard.propTypes = {
+  progressBarConcept: _propTypes.array,
+  smartBill: _propTypes.object,
+  texts: _propTypes.object,
+  handleGoToReiteration: _propTypes.func
+};
+var _default = exports.default = ProgressBarCard;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInfo = void 0;
+const getValue = (smartBill, magnitudeName) => {
+  const item = smartBill.periods[0].consumptions.find(c => c.magnitude === magnitudeName);
+  if (!item) return null;
+  return {
+    value: item.value,
+    unit: item.unit
+  };
+};
+const getInfo = (concept, smartBill) => {
+  const {
+    data,
+    min
+  } = concept;
+  const {
+    registered,
+    limit,
+    excess
+  } = data;
+  const registeredData = getValue(smartBill, registered.magnitude);
+  const limitData = getValue(smartBill, limit.magnitude);
+  const excessData = getValue(smartBill, excess.magnitude);
+  const registeredVal = registeredData?.value || 0;
+  const limitVal = limitData?.value || 0;
+  const unit = registeredData?.unit || registered.unit || '';
+  const isExceeded = excessData?.value > 0;
+  const isPositiveExcess = !isExceeded && min && registeredVal > limitVal;
+  const excessValueDisplay = isExceeded ? excessData?.value : 0;
+  const rawProgress = limitVal > 0 ? registeredVal / limitVal * 100 : 0;
+  const progressValue = isExceeded || isPositiveExcess || rawProgress > 100 ? 100 : rawProgress;
+  const splitPoint = isExceeded ? min ? limitVal > 0 ? registeredVal / limitVal * 100 : 0 : registeredVal > 0 ? limitVal / registeredVal * 100 : 100 : isPositiveExcess ? registeredVal > 0 ? limitVal / registeredVal * 100 : 100 : 100;
+  return {
+    ...concept,
+    splitPoint,
+    progressValue,
+    isExceeded,
+    isPositiveExcess,
+    unit,
+    registered: {
+      ...registered,
+      value: registeredVal
+    },
+    limit: {
+      ...limit,
+      value: limitVal
+    },
+    excess: {
+      ...excess,
+      value: excessValueDisplay
+    }
+  };
+};
+exports.getInfo = getInfo;

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

@@ -8,23 +8,35 @@ var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
 var _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _ColumnRenderer = _interopRequireDefault(require("../components/ColumnRenderer"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _BimestralConsumption = _interopRequireDefault(require("./components/BimestralConsumption"));
-var _CurrentConsumption = _interopRequireDefault(require("./components/CurrentConsumption"));
-var _Billing = _interopRequireDefault(require("./components/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); }
 const Consumptions = _ref => {
   let {
     assets,
-    reverseRow = {},
+    consumptionLayout,
+    exceeded = false,
     smartBill,
     translations,
-    periodSpan
+    periodSpan,
+    handlers,
+    progressBarConcept
   } = _ref;
   const {
     title,
     description
   } = translations?.consumptions || {};
+  const props = {
+    smartBill,
+    texts: translations,
+    periodSpan,
+    assets,
+    progressBarConcept,
+    exceeded,
+    handleGoToReiteration: handlers.handleGoToReiteration
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.generalContainer
   }, /*#__PURE__*/_react.default.createElement(_BimestralConsumption.default, {
@@ -39,22 +51,25 @@ 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} ${reverseRow}`
-  }, /*#__PURE__*/_react.default.createElement(_CurrentConsumption.default, {
-    assets: assets,
-    smartBill: smartBill,
-    texts: translations
-  }), /*#__PURE__*/_react.default.createElement(_Billing.default, {
-    smartBill: smartBill,
-    texts: translations,
-    periodSpan: periodSpan
+    className: _stylesModule.default.cardsContainer
+  }, consumptionLayout.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));
   }))));
 };
 Consumptions.propTypes = {
   assets: _propTypes.object,
+  concepts: _propTypes.object,
+  consumptionLayout: (0, _propTypes.arrayOf)(_propTypes.object),
+  exceeded: _propTypes.bool,
   periodSpan: _propTypes.string,
-  reverseRow: _propTypes.object,
+  progressBarConcept: (0, _propTypes.arrayOf)(_propTypes.object),
   smartBill: _billDataTypes.billDataTypes,
-  translations: _propTypes.object
+  translations: _propTypes.object,
+  handlers: _propTypes.object
 };
 var _default = exports.default = Consumptions;

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

@@ -1,14 +1,16 @@
 @import '../../../../scss/variables/mediaQueries.module.scss';
 
-.generalContainer {
+.cardsContainer {
+  align-items: flex-start;
   display: flex;
-  flex-direction: column;
-  grid-gap: 32px;
-  padding: 24px 32px;
+  width: 100%;
 
-  @media #{$mobile} {
-    grid-gap: 24px;
-    padding: 24px 16px;
+  @media #{$tablet-mobile} {
+    flex-direction: column;
+  }
+
+  > :last-child {
+    margin-right: 0;
   }
 }
 
@@ -18,19 +20,20 @@
   grid-gap: 8px;
 }
 
-.consumptionDetailColumns {
+.consumptionDetail {
   display: flex;
-  flex: 1;
-  flex-wrap: wrap;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.generalContainer {
+  display: flex;
+  flex-direction: column;
   grid-gap: 32px;
+  padding: 24px 32px;
 
   @media #{$mobile} {
     grid-gap: 24px;
+    padding: 24px 16px;
   }
 }
-
-.consumptionDetail {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 24px;
-}

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

@@ -1,4 +1,4 @@
-@import '../../../../../../scss/variables/colorsExport.module.scss';
+@import '../../../../../scss/variables/colors.module.scss';
 
 .cardContainer {
   align-items: center;

package/dist/components/SmartBillSummary/tabs/{Billing/components → components}/BillHeader/index.js

@@ -21,6 +21,7 @@ const BillHeader = _ref => {
     debtStatusLabel,
     debtStatusValidation,
     downloadSmartbillEnabled,
+    downloadSmartBillLoading,
     handleDownloadSmartBill,
     issuedOnDate,
     smartBill,
@@ -58,6 +59,7 @@ const BillHeader = _ref => {
     variant: "text",
     disabled: true
   }, "Anexos"), downloadSmartbillEnabled && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    loading: downloadSmartBillLoading,
     onClick: handleDownloadSmartBill,
     Icon: "IconDownload",
     variant: "text"
@@ -72,6 +74,7 @@ BillHeader.propTypes = {
   debtStatusLabel: _propTypes.string,
   debtStatusValidation: _propTypes.bool,
   downloadSmartbillEnabled: _propTypes.bool,
+  downloadSmartBillLoading: _propTypes.bool,
   handleDownloadSmartBill: _propTypes.func,
   issuedOnDate: _propTypes.string,
   smartBill: _propTypes.object,

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

@@ -1,4 +1,4 @@
-@import '../../../../../../scss/variables/mediaQueries.module.scss';
+@import '../../../../../scss/variables/mediaQueries.module.scss';
 
 .billHeader {
   align-items: center;

package/dist/components/SmartBillSummary/tabs/{Billing/components → components}/ColumnRenderer/constants.js

@@ -9,11 +9,17 @@ var _TitularCard = _interopRequireDefault(require("../TitularCard"));
 var _TotalCard = _interopRequireDefault(require("../TotalCard"));
 var _RateCard = _interopRequireDefault(require("../RateCard"));
 var _AccountCard = _interopRequireDefault(require("../AccountCard"));
+var _CurrentConsumption = _interopRequireDefault(require("../../Consumptions/components/CurrentConsumption"));
+var _Billing = _interopRequireDefault(require("../../Consumptions/components/Billing"));
+var _ProgressBarCard = _interopRequireDefault(require("../../Consumptions/components/ProgressBarCard"));
 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,
-  AccountCard: _AccountCard.default
+  AccountCard: _AccountCard.default,
+  CurrentConsumption: _CurrentConsumption.default,
+  Billing: _Billing.default,
+  ProgressBarCard: _ProgressBarCard.default
 };

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

@@ -1,4 +1,4 @@
-@import '_mediaQueries.scss';
+@import '../../../../../scss/variables/mediaQueries.module.scss';
 
 $columns-gap: 32px;
 $columns-gap-mobile: 24px;

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

@@ -1,4 +1,5 @@
-@import '../../../../../../../../scss/variables/fontSizes.module.scss';
+@import '../../../../../../../scss/variables/colors.module.scss';
+@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%);

package/dist/components/SmartBillSummary/tabs/{Billing/components → components}/RateCard/index.js

@@ -12,8 +12,8 @@ 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 _utils = require("../../Consumptions/components/CurrentConsumption/utils");
+var _testIds = require("../../../../../constants/testIds");
 var _utils2 = require("./utils");
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));

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

@@ -0,0 +1,53 @@
+"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 SecondHeader = _ref => {
+  let {
+    accountNumber,
+    accountNumberHelpText,
+    supplyAddress,
+    city,
+    district,
+    supplyAddressHelpText,
+    clientNumberFormatter
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.secondHeader
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.accountNumber
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small",
+    weight: "bold"
+  }, accountNumber && clientNumberFormatter?.(accountNumber) || accountNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, accountNumberHelpText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.locationTooltip
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small",
+    weight: "bold"
+  }, supplyAddress), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small"
+  }, `${city} - ${district}`), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, supplyAddressHelpText)));
+};
+SecondHeader.propTypes = {
+  accountNumber: _propTypes.string,
+  accountNumberHelpText: _propTypes.string,
+  supplyAddress: _propTypes.string,
+  city: _propTypes.string,
+  district: _propTypes.string,
+  supplyAddressHelpText: _propTypes.string,
+  clientNumberFormatter: _propTypes.func
+};
+var _default = exports.default = SecondHeader;

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

@@ -0,0 +1,40 @@
+@import '../../../../../scss/variables/mediaQueries.module.scss';
+
+.secondHeader {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 50%;
+  justify-content: flex-start;
+  padding: 24px 48px;
+  margin: 16px 32px 0 32px;
+
+  @media #{$mobile} {
+    margin: 16px 16px 0 16px;
+    padding: 16px;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+}
+
+.accountNumber {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  grid-gap: 4px;
+}
+
+.locationTooltip {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+  text-align: left;
+  align-items: flex-start;
+
+  @media #{$mobile} {
+    text-align: left;
+  }
+}

package/dist/components/SmartBillSummary/utils.js

@@ -7,23 +7,20 @@ exports.getTabOptions = exports.getDefaultCurrentTab = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _tabs = require("../../shared/constants/tabs");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getTabOptions = (isDesktopSize, onboardingSteps, tabOptions, smartBill) => {
-  const hasBimestralPeriodicity = smartBill?.periods?.some(period => period.settlements?.periodicity === _constants.BIMESTRAL_PERIODICITY);
-  const filteredTabs = tabOptions.map(tab => ({
+const getTabOptions = (isDesktopSize, onboardingSteps, tabOptions) => {
+  const filteredTabs = tabOptions.filter(_ref => {
+    let {
+      enabled
+    } = _ref;
+    return enabled;
+  }).map(tab => ({
     ...tab,
     icon: isDesktopSize ? /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       name: tab.icon
     }) : null
-  })).filter(_ref => {
-    let {
-      enabled,
-      value
-    } = _ref;
-    return enabled && (value !== _tabs.SMARTBILL_TABS.CONSUMPTIONS || hasBimestralPeriodicity);
-  });
+  }));
   if (!(0, _isEmpty.default)(onboardingSteps)) {
     const tabPositions = {};
     filteredTabs.forEach((tab, index) => {

package/dist/index.js

@@ -119,7 +119,7 @@ var _billDataTypes = require("./shared/types/billDataTypes");
 var _rateStagesTypes = require("./shared/types/rateStagesTypes");
 var _tabs = require("./shared/constants/tabs");
 var _Billing = _interopRequireDefault(require("./components/SmartBillSummary/tabs/Consumptions/components/Billing"));
-var _RateCard = _interopRequireDefault(require("./components/SmartBillSummary/tabs/Billing/components/RateCard"));
+var _RateCard = _interopRequireDefault(require("./components/SmartBillSummary/tabs/components/RateCard"));
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",
@@ -59,7 +59,7 @@
     "dayjs": "^1.10.7",
     "eslint-plugin-react": "^7.33.2",
     "lodash": ">=4.17.4",
-    "node-sass": "^8.0.0",
+    "sass": "^1.80.4",
     "numeral": ">=2.0.6",
     "react-jss": "^8.6.1",
     "react-loading-skeleton": "^3.3.1",