@widergy/utilitygo-smart-bill-mobile 3.4.0 → 3.5.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.5.1](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.5.0...v3.5.1) (2025-12-10)
+
+
+### Bug Fixes
+
+* updates npm token ([4286fa0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/4286fa0d1ca078db19eea0589e7be615d01e79d6))
+
+# [3.5.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.4.0...v3.5.0) (2025-12-03)
+
+
+### Features
+
+* [EVEP-52] onboarding ([#54](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/54)) ([937db49](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/937db4938f10e5f1de4e927585c0515cc6a4029f))
+
 # [3.4.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.3.0...v3.4.0) (2025-11-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-mobile",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "UtilityGO SmartBill Mobile",
   "license": "MIT",
   "main": "src/lib/index.js",

package/src/lib/components/SmartBillSummary/constants.js

@@ -19,3 +19,8 @@ export const TAB_COMPONENT_MAPPER = {
   [SMARTBILL_TABS.BILLING]: renderComponentWithProps(Billing, SMARTBILL_TABS.BILLING),
   [SMARTBILL_TABS.GLOSSARY]: renderComponentWithProps(Glossary, SMARTBILL_TABS.GLOSSARY)
 };
+
+export const CONSUMPTIONS_TAB = 'consumptionsTab';
+export const BILLING_TAB = 'billingTab';
+export const GLOSSARY_TAB = 'glossaryTab';
+export const AI_BUTTON = 'aiButton';

package/src/lib/components/SmartBillSummary/index.js

@@ -1,15 +1,15 @@
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable react/jsx-fragments */
-import React, { Fragment, useEffect, useState, useMemo } from 'react';
+import React, { Fragment, useEffect, useState, useMemo, useCallback } from 'react';
 import { UTButton, UTLoading, UTTabs } from '@widergy/mobile-ui';
 import { ScrollView, View } from 'react-native';
 import { array, arrayOf, bool, func, object, shape, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import debounce from 'lodash/debounce';
 
-import { TAB_COMPONENT_MAPPER } from './constants';
+import { AI_BUTTON, BILLING_TAB, CONSUMPTIONS_TAB, GLOSSARY_TAB, TAB_COMPONENT_MAPPER } from './constants';
 import { getDefaultCurrentTab, getTabOptions } from './utils';
-import styles from './styles';
+import getStyles from './styles';
 import AIDrawer from './components/AIDrawer';
 import BillHeader from './tabs/Billing/components/BillHeader';
 
@@ -26,8 +26,10 @@ const SmartBillSummary = ({
   tabOptions,
   translations,
   utils,
-  periodSpan
+  periodSpan,
+  walkthroughStep
 }) => {
+  const styles = getStyles(colors);
   const {
     aiQuestionsList,
     aiQuestionsListError,
@@ -84,6 +86,100 @@ const SmartBillSummary = ({
     resetSmartBillAIAnswers();
   };
 
+  const {
+    currentUserId,
+    LocalStorageService,
+    walkthroughEnabled,
+    useWalkthroughStep,
+    WalkthroughStep: WalkthroughComponent,
+    walkthroughSteps: walkthroughStepsConfig
+  } = walkthroughStep || {};
+
+  const OverlayComponent = useCallback(
+    props => {
+      if (isEmpty(walkthroughStepsConfig) || !WalkthroughComponent) return null;
+
+      return (
+        <WalkthroughComponent
+          {...props}
+          stepsConfig={walkthroughStepsConfig}
+          containerStyle={styles.tooltipContainer}
+        />
+      );
+    },
+    [walkthroughStepsConfig, WalkthroughComponent, styles.tooltipContainer]
+  );
+
+  const walkthroughStepNumber = name =>
+    (walkthroughStepsConfig?.steps.findIndex(step => step.name === name) ?? -1) + 1;
+
+  const {
+    onLayout: onLayoutTabBilling,
+    start,
+    isWalkthroughOn,
+    isVisible: isVisibleBillingTab
+  } = useWalkthroughStep({
+    number: walkthroughStepNumber(BILLING_TAB),
+    name: BILLING_TAB,
+    OverlayComponent
+  });
+
+  const { onLayout: onLayoutTabConsumption, isVisible: isVisibleConsumptionTab } = useWalkthroughStep({
+    number: walkthroughStepNumber(CONSUMPTIONS_TAB),
+    name: CONSUMPTIONS_TAB,
+    OverlayComponent
+  });
+
+  const { onLayout: onLayoutTabGlossary, isVisible: isVisibleGlossaryTab } = useWalkthroughStep({
+    number: walkthroughStepNumber(GLOSSARY_TAB),
+    name: GLOSSARY_TAB,
+    OverlayComponent
+  });
+
+  const { onLayout: onLayoutAIButton, isVisible: isVisibleAIButton } = useWalkthroughStep({
+    number: walkthroughStepNumber(AI_BUTTON),
+    name: AI_BUTTON,
+    OverlayComponent
+  });
+
+  const walkthroughLayouts = useMemo(
+    () => ({
+      billingTab: { onLayout: onLayoutTabBilling, isVisible: isVisibleBillingTab },
+      consumptionsTab: { onLayout: onLayoutTabConsumption, isVisible: isVisibleConsumptionTab },
+      glossaryTab: { onLayout: onLayoutTabGlossary, isVisible: isVisibleGlossaryTab }
+    }),
+    [
+      onLayoutTabBilling,
+      onLayoutTabConsumption,
+      onLayoutTabGlossary,
+      isVisibleBillingTab,
+      isVisibleConsumptionTab,
+      isVisibleGlossaryTab
+    ]
+  );
+
+  const tabsWithWalkthrough = filteredTabOptions.map(tab => ({
+    ...tab,
+    walkthrough: walkthroughLayouts[tab.value],
+    walkthroughStyle: [
+      isWalkthroughOn ? styles.borderContainer : null,
+      walkthroughLayouts[tab.value]?.isVisible ? styles.border : null
+    ]
+  }));
+
+  useEffect(() => {
+    const checkAndStartOnboarding = async () => {
+      const hasSeenOnboarding = await LocalStorageService.getSmartBillWalkthrough(currentUserId);
+      if (!isEmpty(smartBill) && walkthroughEnabled && hasSeenOnboarding !== 'true' && !isWalkthroughOn) {
+        start();
+      }
+    };
+
+    checkAndStartOnboarding();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [start, loading]);
+
   useEffect(() => {
     if (defaultCurrentTab && defaultCurrentTab !== currentTab) {
       changeCurrentTab(defaultCurrentTab);
@@ -116,7 +212,7 @@ const SmartBillSummary = ({
         key={tabsKey}
         labelProps={{ weight: 'semibold' }}
         onChange={onUserTabChange}
-        tabs={filteredTabOptions}
+        tabs={tabsWithWalkthrough}
         value={currentTab}
       />
       <ScrollView>
@@ -153,12 +249,20 @@ const SmartBillSummary = ({
               <FabComponent onPress={openAIDrawer} />
             </View>
           ) : (
-            <UTButton
-              colorTheme="primary"
-              Icon="EnergyIconChatSparkFilled"
-              onPress={openAIDrawer}
-              style={{ icon: styles.AIFloatButtonIcon, root: styles.AIFloatButton }}
-            />
+            <View
+              onLayout={onLayoutAIButton}
+              style={[
+                styles.AIContainer,
+                isWalkthroughOn && styles.borderContainerButton,
+                isVisibleAIButton && styles.border
+              ]}>
+              <UTButton
+                colorTheme="primary"
+                Icon="EnergyIconChatSparkFilled"
+                onPress={openAIDrawer}
+                style={{ icon: styles.AIFloatButtonIcon, root: styles.AIFloatButton }}
+              />
+            </View>
           )}
 
           <AIDrawer
@@ -204,7 +308,8 @@ SmartBillSummary.propTypes = {
   ),
   translations: object,
   utils: object,
-  periodSpan: string
+  periodSpan: string,
+  walkthroughStep: object
 };
 
 export default SmartBillSummary;

package/src/lib/components/SmartBillSummary/styles.js

@@ -1,16 +1,35 @@
 import { StyleSheet } from 'react-native';
 
-export default StyleSheet.create({
-  loading: {
-    flex: 1
-  },
-  AIFloatButton: {
-    borderRadius: 100,
-    bottom: 16,
-    position: 'absolute',
-    right: 16
-  },
-  AIFloatButtonIcon: {
-    padding: 8
-  }
-});
+export default Colors =>
+  StyleSheet.create({
+    loading: {
+      flex: 1
+    },
+    AIFloatButton: {
+      borderRadius: 100
+    },
+    AIContainer: {
+      bottom: 16,
+      position: 'absolute',
+      right: 16
+    },
+    AIFloatButtonIcon: {
+      padding: 8
+    },
+    tooltipContainer: {
+      bottom: '40%',
+      left: '15%'
+    },
+    borderContainer: {
+      borderWidth: 4,
+      borderColor: 'transparent'
+    },
+    borderContainerButton: {
+      borderWidth: 4,
+      borderColor: 'transparent',
+      padding: 8
+    },
+    border: {
+      borderColor: Colors.semanticSuccess03
+    }
+  });