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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.8.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.7.1...v3.8.0) (2025-06-27)
+
+
+### Features
+
+* [CX-833, CX-851] smartbill analytics ([#55](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/55)) ([312e83b](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/312e83b9ffe4c350164667f2628ae10f0b2eab7e))
+
+## [3.7.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.7.0...v3.7.1) (2025-06-18)
+
+
+### Bug Fixes
+
+* levels loop fixed ([#54](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/54)) ([44442d6](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/44442d647ab8db6eb56e52426ab75de2215c2634))
+
 # [3.7.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.6.2...v3.7.0) (2025-05-28)
 
 

package/dist/components/SmartBillSummary/components/AIPanel/index.js

@@ -20,6 +20,7 @@ const AIPanel = _ref => {
     answer,
     error,
     getAnswer,
+    handlers = {},
     isOpen,
     loading,
     notEnoughBillsErrorType,
@@ -30,12 +31,19 @@ const AIPanel = _ref => {
     generatedByLabel,
     title: panelTitle
   } = translations?.AIPanel || {};
+  const {
+    trackOpenAIQuestion
+  } = handlers;
   const [openCards, setOpenCards] = (0, _react.useState)([]);
-  const toggleCard = id => {
+  const toggleCard = (id, question) => {
     if (!answer?.[id] && !openCards.includes(id)) {
       getAnswer(id);
     }
-    setOpenCards(prevOpenCards => prevOpenCards.includes(id) ? prevOpenCards.filter(openId => openId !== id) : [...prevOpenCards, id]);
+    setOpenCards(prevOpenCards => {
+      if (prevOpenCards.includes(id)) return prevOpenCards.filter(openId => openId !== id);
+      trackOpenAIQuestion?.(question);
+      return [...prevOpenCards, id];
+    });
   };
   const handleClose = () => {
     onClose?.();
@@ -82,7 +90,7 @@ const AIPanel = _ref => {
       isCollapsible: true,
       isOpen: openCards.includes(id),
       key: id,
-      onClick: () => toggleCard(id)
+      onClick: () => toggleCard(id, question)
     }, renderAnswer ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${_stylesModule.default.answer} ${errorContent && !isLoading ? notEnoughBills ? _stylesModule.default.notEnoughBillsContainer : _stylesModule.default.errorAnswer : ''}`
     }, isLoading ? /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -129,6 +137,7 @@ AIPanel.propTypes = {
   answer: _propTypes.object,
   error: _propTypes.object,
   getAnswer: _propTypes.func,
+  handlers: _propTypes.object,
   isOpen: _propTypes.bool,
   loading: _propTypes.object,
   notEnoughBillsErrorType: _propTypes.string,

package/dist/components/SmartBillSummary/index.js

@@ -48,7 +48,9 @@ const SmartBillSummary = _ref => {
     getGlossaryData,
     getSmartBillAIAnswer,
     getSmartBillAIQuestions,
-    resetSmartBillAIAnswers
+    resetSmartBillAIAnswers,
+    trackAIFloatingButtonClick,
+    trackTabChange
   } = handlers;
   const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(isDesktopSize, tabOptions, smartBill);
   const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(filteredTabOptions);
@@ -56,6 +58,7 @@ const SmartBillSummary = _ref => {
   const [aiPanelIsOpen, setAiPanelIsOpen] = (0, _react.useState)(false);
   const changeCurrentTab = newTab => setCurrentTab(newTab);
   const openAIPanel = () => {
+    trackAIFloatingButtonClick();
     if ((0, _isEmpty.default)(aiQuestionsList)) getSmartBillAIQuestions();
     setAiPanelIsOpen(true);
   };
@@ -80,7 +83,10 @@ const SmartBillSummary = _ref => {
       baseSelected: _stylesModule.default.baseSelected,
       flexContainer: _stylesModule.default.tabsContainer
     },
-    onChange: changeCurrentTab,
+    onChange: newTab => {
+      trackTabChange(newTab);
+      changeCurrentTab(newTab);
+    },
     options: filteredTabOptions,
     tabsProps: {
       orientation: 'horizontal',
@@ -118,6 +124,7 @@ const SmartBillSummary = _ref => {
     answer: smartBillAIAnswer,
     error: smartBillAIAnswerError,
     getAnswer: getSmartBillAIAnswer,
+    handlers: handlers,
     isOpen: aiPanelIsOpen,
     loading: smartBillAIAnswerLoading,
     notEnoughBillsErrorType: notEnoughBillsErrorType,

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

@@ -4,14 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 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 }; }
+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 RateCard = _ref => {
   let {
     components,
@@ -23,7 +27,8 @@ const RateCard = _ref => {
     ratesTableLink,
     smartBill = {},
     subsidy = '',
-    subsidyLevels
+    subsidyLevels,
+    trackRedirectionToExternalLink
   } = _ref;
   const {
     helpText,
@@ -73,6 +78,20 @@ 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 noLevels = (0, _isEmpty.default)(consumptionLevels);
+  const showRateLabel = !isT1 || startRateValue === false || limitRateValue === false;
+  const debouncedTrackRedirection = (0, _react.useMemo)(() => (0, _debounce.default)(link => {
+    trackRedirectionToExternalLink(link);
+  }, 300), [trackRedirectionToExternalLink]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      debouncedTrackRedirection.cancel();
+    };
+  }, [debouncedTrackRedirection]);
+  const handleClickButton = () => {
+    debouncedTrackRedirection(ratesTableLink);
+    if (ratesTableLink) window.open(ratesTableLink, '_blank');
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -82,7 +101,7 @@ const RateCard = _ref => {
     weight: "medium"
   }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray"
-  }, helpText)), /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+  }, helpText)), !noLevels && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     components: components,
     currentPeriod: currentPeriod,
     data: rates,
@@ -93,7 +112,7 @@ const RateCard = _ref => {
     translations: rateCardTranslations,
     value: totalConsumption
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.consumptionDataContainer
+    className: `${_stylesModule.default.consumptionDataContainer} ${noLevels ? _stylesModule.default.noLevels : ''}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumptionContent
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
@@ -102,7 +121,7 @@ const RateCard = _ref => {
   }, (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", {
+  }, showRateLabel ? yourRate : limitRateValue === 'Infinity' ? startRateValueLabel?.(startRateValue) : limitRateValueLabel?.(limitRateValue))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumptionContent
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     variant: "title3",
@@ -126,19 +145,17 @@ const RateCard = _ref => {
       variant: "subtitle1",
       weight: "medium"
     }, formatAmount?.(amount)));
-  }), /*#__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
-  }))));
+  }), /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    classNames: {
+      childrenContainer: _stylesModule.default.footerActionChildren,
+      root: _stylesModule.default.footerAction
+    },
+    colorTheme: "secondary",
+    Icon: "IconChevronRight",
+    iconPlacement: "right",
+    onClick: handleClickButton,
+    variant: "text"
+  }, seeRatesTable)));
 };
 RateCard.propTypes = {
   components: _propTypes.object,
@@ -150,6 +167,7 @@ RateCard.propTypes = {
   ratesTableLink: _propTypes.string,
   smartBill: _propTypes.object,
   subsidy: _propTypes.string,
-  subsidyLevels: (0, _propTypes.objectOf)(_propTypes.string)
+  subsidyLevels: (0, _propTypes.objectOf)(_propTypes.string),
+  trackRedirectionToExternalLink: _propTypes.func
 };
 var _default = exports.default = RateCard;

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

@@ -22,6 +22,10 @@
   padding: 24px 24px 0;
 }
 
+.noLevels {
+  padding-top: 0;
+}
+
 .consumptionContent {
   flex: 1;
 }
@@ -34,20 +38,19 @@
   align-items: center;
   background-color: transparent;
   border-top: 1px solid var(--light04);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   display: flex;
   grid-gap: 8px;
   justify-content: space-between;
   padding: 16px;
   text-decoration: none;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--light03);
-  }
+  width: 100%;
+}
 
-  &:active {
-    background-color: var(--light04);
-  }
+.footerActionChildren {
+  flex: 1;
+  justify-content: space-between;
 }
 
 .detail {

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

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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"));
@@ -14,8 +13,6 @@ 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 {
@@ -48,7 +45,7 @@ const Billing = _ref => {
     handleAutomaticDebitAdherence = () => {},
     handleDownloadBill = () => {},
     handleGoToDigitalBill = () => {},
-    getConsumptionLevels = () => {}
+    trackRedirectionToExternalLink = () => {}
   } = handlers;
   const {
     adhered,
@@ -132,9 +129,6 @@ const Billing = _ref => {
     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", {
@@ -262,6 +256,7 @@ const Billing = _ref => {
     smartBill,
     subsidy,
     subsidyLevels,
+    trackRedirectionToExternalLink,
     translations
   }))));
 };

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

@@ -16,6 +16,7 @@ const Glossary = _ref => {
     getGlossaryData,
     glossaryData,
     glossaryLoading,
+    handlers,
     translations
   } = _ref;
   const {
@@ -32,15 +33,17 @@ const Glossary = _ref => {
     size: 80,
     thickness: 5
   })) : /*#__PURE__*/_react.default.createElement(_energyUi.UTDocumentWizard, {
+    handlers: handlers,
+    labels: translations,
     pages: pages,
-    sections: sections,
-    labels: translations
+    sections: sections
   });
 };
 Glossary.propTypes = {
   getGlossaryData: _propTypes.func,
   glossaryData: undefined || _propTypes.object,
   glossaryLoading: _propTypes.bool,
+  handlers: _propTypes.object,
   translations: _propTypes.object
 };
 var _default = exports.default = Glossary;

package/package.json

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