@widergy/utilitygo-smart-bill-web 3.8.0 → 3.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.9.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.9.0...v3.9.1) (2025-07-10)
+
+
+### Bug Fixes
+
+* utility widergy visual fixes ([#56](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/56)) ([575ed36](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/575ed361193630dd1860d6d3cc66485d28907cc6))
+
+# [3.9.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.8.0...v3.9.0) (2025-07-10)
+
+
+### Features
+
+* [UGEE-309] smart bill projection ([#57](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/57)) ([bae9bcd](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/bae9bcda49f30f82ee6e2dc6bb5f620fd5a27fec))
+
 # [3.8.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.7.1...v3.8.0) (2025-06-27)
 
 

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

@@ -7,15 +7,20 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
+var _numeral = _interopRequireDefault(require("numeral"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 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"));
 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 {
+  smartBill: smartBillTestIds
+} = _testIds.TEST_IDS;
 const RateCard = _ref => {
   let {
     components,
@@ -25,25 +30,32 @@ const RateCard = _ref => {
     normalizedRate = '',
     rateCardTranslations = {},
     ratesTableLink,
+    seeFooter = true,
+    smallTitle = false,
     smartBill = {},
     subsidy = '',
     subsidyLevels,
     trackRedirectionToExternalLink
   } = _ref;
   const {
+    banner = {},
     helpText,
     limitRateValueLabel,
     seeRatesTable,
+    seeBill,
     startRateValueLabel,
     title,
     tooltipContent,
+    tooltipText,
     unit,
     yourConsumption,
     yourRate
   } = rateCardTranslations;
   const {
     client,
-    periods
+    periods,
+    levelValue: limitSubsidyValue = 0,
+    levelNumber
   } = smartBill;
   const purchasedRate = client?.rate?.purchased || '';
   const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
@@ -78,6 +90,7 @@ const RateCard = _ref => {
   const limitRateValue = Array.isArray(currentRate?.range) && currentRate.range.length > 0 && currentRate.range[currentRate.range.length - 1];
   const charges = client?.rate?.charges || [];
   const isT1 = purchasedRate.includes('T1');
+  const diff = limitSubsidyValue !== 0 ? (0, _numeral.default)(totalConsumption - limitSubsidyValue).format('0,0.[00]') : 0;
   const noLevels = (0, _isEmpty.default)(consumptionLevels);
   const showRateLabel = !isT1 || startRateValue === false || limitRateValue === false;
   const debouncedTrackRedirection = (0, _react.useMemo)(() => (0, _debounce.default)(link => {
@@ -97,11 +110,23 @@ const RateCard = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerTitles
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "title2",
-    weight: "medium"
+    colorTheme: smallTitle ? 'gray' : '',
+    dataTestId: smartBillTestIds.rateCard.title,
+    variant: smallTitle ? 'small' : 'title3'
   }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, helpText)), !noLevels && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+    colorTheme: "gray",
+    dataTestId: smartBillTestIds.rateCard.helpText
+  }, helpText), banner && limitSubsidyValue !== 0 && totalConsumption > limitSubsidyValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bannerDetail,
+    "data-testid": smartBillTestIds.rateCard.banner
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "error",
+    name: "IconCircleX"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    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, {
     components: components,
     currentPeriod: currentPeriod,
     data: rates,
@@ -116,32 +141,50 @@ const RateCard = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumptionContent
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    dataTestId: smartBillTestIds.rateCard.yourRate,
     variant: "title3",
     weight: "medium"
   }, (0, _utils2.getCurrentRate)(purchasedRate, currentRate)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
+    dataTestId: smartBillTestIds.rateCard.yourRateLabel,
     variant: "small"
   }, showRateLabel ? yourRate : limitRateValue === 'Infinity' ? startRateValueLabel?.(startRateValue) : limitRateValueLabel?.(limitRateValue))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumptionContent
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    dataTestId: smartBillTestIds.rateCard.totalConsumption,
     variant: "title3",
     weight: "medium"
   }, totalConsumptionFormatted, " ", unit), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
+    dataTestId: smartBillTestIds.rateCard.yourConsumption,
     variant: "small"
-  }, yourConsumption))), /*#__PURE__*/_react.default.createElement("div", {
+  }, yourConsumption))), levelNumber && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.levelNumber,
+    "data-testid": smartBillTestIds.rateCard.level
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    dataTestId: smartBillTestIds.rateCard.levelLabel,
+    variant: "subtitle1"
+  }, banner.level?.(levelNumber)), /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
+    content: tooltipText,
+    dataTestId: smartBillTestIds.rateCard.levelTooltip
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    name: "IconHelp"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.footer
-  }, charges.map(_ref5 => {
+  }, seeFooter && charges.map((_ref5, i) => {
     let {
       concept,
       amount
     } = _ref5;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.detail,
+      "data-testid": `${smartBillTestIds.rateCard.detail}.${i}`,
       key: concept
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      dataTestId: `${smartBillTestIds.rateCard.detailLabel}.${i}`,
       weight: "medium"
     }, concept), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      dataTestId: `${smartBillTestIds.rateCard.detailAmount}.${i}`,
       variant: "subtitle1",
       weight: "medium"
     }, formatAmount?.(amount)));
@@ -151,11 +194,23 @@ const RateCard = _ref => {
       root: _stylesModule.default.footerAction
     },
     colorTheme: "secondary",
+    dataTestId: smartBillTestIds.rateCard.seeRatesTable,
+    Icon: "IconChevronRight",
+    iconPlacement: "right",
+    onClick: handleClickButton,
+    variant: "text"
+  }, seeRatesTable), !(0, _isEmpty.default)(seeBill) && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    classNames: {
+      childrenContainer: _stylesModule.default.footerActionChildren,
+      root: _stylesModule.default.footerAction
+    },
+    colorTheme: "secondary",
+    dataTestId: smartBillTestIds.rateCard.seeBill,
     Icon: "IconChevronRight",
     iconPlacement: "right",
     onClick: handleClickButton,
     variant: "text"
-  }, seeRatesTable)));
+  }, seeBill)));
 };
 RateCard.propTypes = {
   components: _propTypes.object,
@@ -165,6 +220,8 @@ RateCard.propTypes = {
   normalizedRate: _propTypes.string,
   rateCardTranslations: _propTypes.object,
   ratesTableLink: _propTypes.string,
+  seeFooter: _propTypes.bool,
+  smallTitle: _propTypes.bool,
   smartBill: _propTypes.object,
   subsidy: _propTypes.string,
   subsidyLevels: (0, _propTypes.objectOf)(_propTypes.string),

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

@@ -61,3 +61,30 @@
   justify-content: space-between;
   padding: 16px;
 }
+
+.bannerDetail {
+  align-items: flex-start;
+  background-color: var(--semanticError01);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+
+.bannerDetailText {
+  display: flex;
+  flex-direction: column;
+  margin-left: 8px;
+}
+
+.levelNumber {
+  align-items: center;
+  background-color: var(--light03);
+  border-radius: 8px;
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+  margin: 0px 16px;
+  padding: 24px;
+}

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

@@ -157,7 +157,7 @@ const Billing = _ref => {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.detailColumns
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.column
+    className: _stylesModule.default.leftColumn
   }, actionCards?.map(_ref2 => {
     let {
       isAdhered,
@@ -229,7 +229,7 @@ const Billing = _ref => {
   }, ivaCondition), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray"
   }, ivaConditionHelpText)))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.column
+    className: _stylesModule.default.rightColumn
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.totalCard
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -61,13 +61,25 @@
   }
 }
 
-.column {
+%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);

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

@@ -29,9 +29,7 @@ const Glossary = _ref => {
   return glossaryLoading ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.loadingContainer
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLoading, {
-    loading: true,
-    size: 80,
-    thickness: 5
+    loading: true
   })) : /*#__PURE__*/_react.default.createElement(_energyUi.UTDocumentWizard, {
     handlers: handlers,
     labels: translations,

package/dist/constants/testIds.js

@@ -22,6 +22,7 @@ const ID_CONSTANTS = {
   ICON_AND_DETAILS: 'iconAndDetails',
   MAIN_BILL_DATA: 'mainBillData',
   PERIOD: 'period',
+  RATE_CARD: 'rateCard',
   RATE_AND_CATEGORY: 'rateAndCategory',
   REDING_DETAILS: 'readingDetails',
   REMAINING_CONSUMPTION: 'remainingConsumption',
@@ -134,6 +135,24 @@ const TEST_IDS = exports.TEST_IDS = {
       category: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_AND_CATEGORY}.category`,
       rate: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_AND_CATEGORY}.rate`,
       title: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_AND_CATEGORY}.${ID_CONSTANTS.TITLE}`
+    },
+    rateCard: {
+      banner: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.banner`,
+      title: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.title`,
+      level: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.level`,
+      detail: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.detail`,
+      seeBill: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.seeBill`,
+      helpText: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.helpText`,
+      bannerLabel: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.bannerLabel`,
+      levelLabel: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.levelLabel`,
+      levelTooltip: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.levelTooltip`,
+      detailLabel: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.detailLabel`,
+      detailAmount: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.detailAmount`,
+      seeRatesTable: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.seeRatesTable`,
+      totalConsumption: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.totalConsumption`,
+      yourConsumption: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.yourConsumption`,
+      yourRate: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.yourRate`,
+      yourRateLabel: `${ID_CONSTANTS.SMART_BILL}.${ID_CONSTANTS.RATE_CARD}.yourRateLabel`
     }
   }
 };

package/dist/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "BillSummary", {
     return _BillSummary.default;
   }
 });
+Object.defineProperty(exports, "Billing", {
+  enumerable: true,
+  get: function () {
+    return _Billing.default;
+  }
+});
 Object.defineProperty(exports, "ColorAliases", {
   enumerable: true,
   get: function () {
@@ -53,6 +59,12 @@ Object.defineProperty(exports, "MainBillData", {
     return _MainBillData.default;
   }
 });
+Object.defineProperty(exports, "RateCard", {
+  enumerable: true,
+  get: function () {
+    return _RateCard.default;
+  }
+});
 Object.defineProperty(exports, "RatesDefinition", {
   enumerable: true,
   get: function () {
@@ -106,6 +118,8 @@ exports.Aliases = _aliases;
 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"));
 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.8.0",
+  "version": "3.9.1",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",