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

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [3.12.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.11.0...v3.12.0) (2025-08-27)
+
+
+### Features
+
+* [EVEP-27] smartbill onboarding ([#62](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/62)) ([d7bdeac](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/d7bdeac4050d6ebf615a00a05eddae36de48fa07)), closes [#60](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/60) [#60](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/60) [#59](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/59) [#59](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/59)
+* updates readme ([cc9caa2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/cc9caa29601d5052e9b260e057184f6f8d39d3c8))
+
 # [3.11.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.10.0...v3.11.0) (2025-08-25)
 
 

package/README.md

@@ -1,3 +1,4 @@
+
 # react-package-bootstrap ![Logo](https://funkyimg.com/i/2VY6U.png)
 
 ![WidergyWeb](https://img.shields.io/badge/WIDERGY-WEB-00d564.svg)

package/dist/components/SmartBillSummary/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TAB_COMPONENT_MAPPER = exports.BIMESTRAL_PERIODICITY = void 0;
+exports.TAB_VALUE_REGEX = exports.TAB_SELECTOR = exports.TAB_COMPONENT_MAPPER = exports.ONBOARDING_OPTIONS = exports.CAPTURED_VALUE_REGEX = exports.BIMESTRAL_PERIODICITY = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tabs = require("../../shared/constants/tabs");
 var _Consumptions = _interopRequireDefault(require("./tabs/Consumptions"));
@@ -12,6 +12,17 @@ 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 TAB_SELECTOR = exports.TAB_SELECTOR = '[data-tab-value=';
+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'
+};
 const renderComponentWithProps = (Component, tab) => props => /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
   assets: props?.assets?.[tab] || {},
   translations: props?.translations?.[tab] || {}

package/dist/components/SmartBillSummary/index.js

@@ -27,6 +27,9 @@ const SmartBillSummary = _ref => {
     components,
     handlers,
     loading,
+    showOnboarding = false,
+    onCloseOnboarding,
+    onboardingSteps,
     reverseRow,
     smartBill,
     tabOptions,
@@ -57,10 +60,27 @@ const SmartBillSummary = _ref => {
     trackAIFloatingButtonClick,
     trackTabChange
   } = handlers;
-  const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(isDesktopSize, tabOptions, smartBill);
-  const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(filteredTabOptions);
+  const {
+    tabs,
+    onboardingSteps: filteredOnboardingSteps
+  } = loading ? {
+    tabs: [],
+    onboardingSteps: []
+  } : (0, _utils.getTabOptions)(isDesktopSize, onboardingSteps, tabOptions, smartBill);
+  const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(tabs);
   const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
   const [aiPanelIsOpen, setAiPanelIsOpen] = (0, _react.useState)(false);
+  const [stableLoading, setStableLoading] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    if (loading) {
+      setStableLoading(true);
+    } else {
+      const timer = setTimeout(() => {
+        setStableLoading(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [loading]);
   const changeCurrentTab = newTab => setCurrentTab(newTab);
   const openAIPanel = () => {
     trackAIFloatingButtonClick();
@@ -82,25 +102,31 @@ const SmartBillSummary = _ref => {
   return /*#__PURE__*/_react.default.createElement(_energyUi.UTLoading, {
     className: _stylesModule.default.loadingContainer,
     loading: loading
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: showOnboarding ? _stylesModule.default.tabs : ''
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTTabs, {
     classNames: {
       baseLabel: _stylesModule.default.tabLabel,
       baseSelected: _stylesModule.default.baseSelected,
-      flexContainer: _stylesModule.default.tabsContainer
+      flexContainer: _stylesModule.default.tabsContainer,
+      tabRoot: 'smartbill-tab'
     },
     onChange: newTab => {
       trackTabChange(newTab);
       changeCurrentTab(newTab);
     },
-    options: filteredTabOptions,
+    options: tabs.map(tab => ({
+      ...tab,
+      'data-tab-value': tab.value
+    })),
     tabsProps: {
       orientation: 'horizontal',
       variant: 'fullWidth'
     },
     value: currentTab
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.contentContainer
-  }, filteredTabOptions.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_BillHeader.default, {
+  }, tabs.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_BillHeader.default, {
     annex,
     UtilityLogo: assets.billingTab.UtilityLogo,
     billNumber: smartBill.bill_number,
@@ -128,7 +154,7 @@ const SmartBillSummary = _ref => {
     translations,
     utils
   })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
-    className: _stylesModule.default.AIFloatButton,
+    className: `${_stylesModule.default.AIFloatButton} smartbill-ai-float-button`,
     onClick: openAIPanel,
     withRipple: true
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
@@ -147,7 +173,13 @@ const SmartBillSummary = _ref => {
     notEnoughBillsErrorType: notEnoughBillsErrorType,
     onClose: closeAIPanel,
     translations: translations
-  })));
+  })), !stableLoading && showOnboarding && /*#__PURE__*/_react.default.createElement(_energyUi.UTOnboarding, {
+    options: _constants.ONBOARDING_OPTIONS,
+    enabled: showOnboarding,
+    handleComplete: onCloseOnboarding,
+    handleOnClose: onCloseOnboarding,
+    steps: filteredOnboardingSteps
+  }));
 };
 SmartBillSummary.propTypes = {
   annex: _propTypes.bool,
@@ -161,6 +193,9 @@ SmartBillSummary.propTypes = {
     [_propTypes.string]: _propTypes.func
   }),
   loading: _propTypes.bool,
+  showOnboarding: _propTypes.bool,
+  onCloseOnboarding: _propTypes.func,
+  onboardingSteps: (0, _propTypes.arrayOf)(_propTypes.object),
   reverseRow: _propTypes.object,
   smartBill: _billDataTypes.billDataTypes,
   tabOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({

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

@@ -12,6 +12,11 @@ $tab-height: 48px;
   }
 }
 
+.tabs {
+  width: 96%;
+  margin: 0 auto;
+}
+
 .contentContainer {
   flex: 1;
   margin: 0 auto;

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

@@ -26,7 +26,7 @@ const Billing = _ref => {
     clarification,
     periodDetail
   } = texts?.billing || {};
-  const currentPeriod = smartBill?.periods.find(period => period.current);
+  const currentPeriod = smartBill?.periods?.find(period => period.current);
   const billingsToShow = (0, _utils.getBillingsToShow)(currentPeriod?.settlements);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container

package/dist/components/SmartBillSummary/utils.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTabOptions = exports.getDefaultCurrentTab = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
-var _lodash = require("lodash");
+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, tabOptions, smartBill) => {
+const getTabOptions = (isDesktopSize, onboardingSteps, tabOptions, smartBill) => {
   const hasBimestralPeriodicity = smartBill?.periods?.some(period => period.settlements?.periodicity === _constants.BIMESTRAL_PERIODICITY);
-  return tabOptions.map(tab => ({
+  const filteredTabs = tabOptions.map(tab => ({
     ...tab,
     icon: isDesktopSize ? /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       name: tab.icon
@@ -24,7 +24,33 @@ const getTabOptions = (isDesktopSize, tabOptions, smartBill) => {
     } = _ref;
     return enabled && (value !== _tabs.SMARTBILL_TABS.CONSUMPTIONS || hasBimestralPeriodicity);
   });
+  if (!(0, _isEmpty.default)(onboardingSteps)) {
+    const tabPositions = {};
+    filteredTabs.forEach((tab, index) => {
+      tabPositions[tab.value] = index + 1;
+    });
+    const filteredOnboardingSteps = [...onboardingSteps].reduce((acc, step) => {
+      if (step.element && step.element.includes(_constants.TAB_SELECTOR)) {
+        const match = step.element.match(_constants.TAB_VALUE_REGEX);
+        if (match && tabPositions[match[_constants.CAPTURED_VALUE_REGEX]]) {
+          return [...acc, {
+            ...step,
+            element: `.smartbill-tab:nth-child(${tabPositions[match[_constants.CAPTURED_VALUE_REGEX]]})`
+          }];
+        }
+      }
+      return [...acc, step];
+    }, []);
+    return {
+      tabs: filteredTabs,
+      onboardingSteps: filteredOnboardingSteps
+    };
+  }
+  return {
+    tabs: filteredTabs,
+    onboardingSteps
+  };
 };
 exports.getTabOptions = getTabOptions;
-const getDefaultCurrentTab = tabOptions => !(0, _lodash.isEmpty)(tabOptions) && (tabOptions.find(tab => tab?.defaultSelected) || tabOptions?.[0])?.value;
+const getDefaultCurrentTab = tabOptions => !(0, _isEmpty.default)(tabOptions) && (tabOptions.find(tab => tab?.defaultSelected) || tabOptions?.[0])?.value;
 exports.getDefaultCurrentTab = getDefaultCurrentTab;

package/package.json

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