@widergy/utilitygo-smart-bill-mobile 2.5.2 → 2.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.6.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.5.2...v2.6.0) (2025-06-27)
+
+
+### Features
+
+* [CX-834, CX-852] smartbill analytics ([#41](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/41)) ([3b02c37](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/3b02c37355c36c4251ea1fbaab185d6336d78152))
+
 ## [2.5.2](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.5.1...v2.5.2) (2025-06-18)
 
 

package/package.json

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

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

@@ -17,6 +17,7 @@ const AIDrawer = ({
   components = {},
   error,
   getAnswer,
+  handlers,
   isOpen,
   loading,
   notEnoughBillsErrorType,
@@ -24,17 +25,20 @@ const AIDrawer = ({
   translations
 }) => {
   const styles = createStyles(colors);
+  const { trackOpenAIQuestion } = handlers;
   const { CollapsibleCard, SkeletonLoader } = components;
   const { generatedByLabel, title: drawerTitle } = translations?.AIDrawer || {};
   const [openCards, setOpenCards] = 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 = () => {
@@ -115,7 +119,7 @@ const AIDrawer = ({
         CustomContent={AnswerContentComponent}
         labelProps={{ withMarkdown: true }}
         loading={isLoading}
-        onPress={() => toggleCard(id)}
+        onPress={() => toggleCard(id, question)}
         preventRipple
         style={{
           content: styles.collapsibleCardContent,
@@ -161,6 +165,7 @@ AIDrawer.propTypes = {
   components: object,
   error: object,
   getAnswer: func,
+  handlers: object,
   isOpen: bool,
   loading: object,
   notEnoughBillsErrorType: string,

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

@@ -1,10 +1,11 @@
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable react/jsx-fragments */
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState, useMemo } from 'react';
 import { UTButton, UTLoading, UTTabs } from '@widergy/mobile-ui';
 import { View } from 'react-native';
 import { 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 { getDefaultCurrentTab, getTabOptions } from './utils';
@@ -35,15 +36,41 @@ const SmartBillSummary = ({
     smartBillAIAnswerError,
     smartBillAIAnswerLoading
   } = constants;
-  const { getSmartBillAIAnswer, getSmartBillAIQuestions, resetSmartBillAIAnswers } = handlers;
+  const {
+    getSmartBillAIAnswer,
+    getSmartBillAIQuestions,
+    resetSmartBillAIAnswers,
+    trackAIFloatingButtonClick,
+    trackTabChange
+  } = handlers;
   const filteredTabOptions = getTabOptions(tabOptions, smartBill) || [];
   const defaultCurrentTab = getDefaultCurrentTab(filteredTabOptions);
   const [currentTab, setCurrentTab] = useState(defaultCurrentTab);
   const [tabsKey, setTabsKey] = useState(0);
   const [aiDrawerIsOpen, setAiDrawerIsOpen] = useState(false);
+  const [lastTrackedTab, setLastTrackedTab] = useState(defaultCurrentTab);
 
   const changeCurrentTab = newTab => setCurrentTab(newTab?.value || newTab);
+
+  const debouncedTrackTabChange = useMemo(
+    () =>
+      debounce(newTab => {
+        const tabValue = newTab?.value || newTab;
+        if (tabValue !== lastTrackedTab) {
+          trackTabChange(tabValue);
+          setLastTrackedTab(tabValue);
+        }
+      }, 300),
+    [trackTabChange, lastTrackedTab]
+  );
+
+  const onUserTabChange = newTab => {
+    debouncedTrackTabChange(newTab);
+    changeCurrentTab(newTab);
+  };
+
   const openAIDrawer = () => {
+    trackAIFloatingButtonClick?.();
     if (isEmpty(aiQuestionsList)) getSmartBillAIQuestions();
     setAiDrawerIsOpen(true);
   };
@@ -53,8 +80,17 @@ const SmartBillSummary = ({
   };
 
   useEffect(() => {
-    if (defaultCurrentTab) changeCurrentTab(defaultCurrentTab);
-  }, [defaultCurrentTab, tabOptions]);
+    if (defaultCurrentTab && defaultCurrentTab !== currentTab) {
+      changeCurrentTab(defaultCurrentTab);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultCurrentTab]);
+
+  useEffect(() => {
+    if (defaultCurrentTab && !lastTrackedTab) {
+      setLastTrackedTab(defaultCurrentTab);
+    }
+  }, [defaultCurrentTab, lastTrackedTab]);
 
   useEffect(() => {
     if (glossaryError && !glossaryLoading && defaultCurrentTab) {
@@ -63,12 +99,18 @@ const SmartBillSummary = ({
     }
   }, [defaultCurrentTab, glossaryError, glossaryLoading]);
 
+  useEffect(() => {
+    return () => {
+      debouncedTrackTabChange.cancel();
+    };
+  }, [debouncedTrackTabChange]);
+
   return (
     <UTLoading loading={loading} style={styles.loading}>
       <UTTabs
         key={tabsKey}
         labelProps={{ weight: 'semibold' }}
-        onChange={changeCurrentTab}
+        onChange={onUserTabChange}
         tabs={filteredTabOptions}
         value={currentTab}
       />
@@ -105,6 +147,7 @@ const SmartBillSummary = ({
             components={components}
             error={smartBillAIAnswerError}
             getAnswer={getSmartBillAIAnswer}
+            handlers={handlers}
             isOpen={aiDrawerIsOpen}
             loading={smartBillAIAnswerLoading}
             notEnoughBillsErrorType={notEnoughBillsErrorType}

package/src/lib/components/SmartBillSummary/tabs/Billing/components/RateCard/index.js

@@ -1,9 +1,10 @@
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Linking, View } from 'react-native';
 import { Surface, UTButton, UTLabel } from '@widergy/mobile-ui';
 import { object, string, func, objectOf, array } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
+import debounce from 'lodash/debounce';
 
 import {
   getConsumptionLabels,
@@ -24,7 +25,8 @@ const RateCard = ({
   ratesTableLink,
   smartBill = {},
   subsidy = '',
-  subsidyLevels
+  subsidyLevels,
+  trackRedirectionToExternalLink
 }) => {
   const styles = createStyles(colors);
   const {
@@ -60,7 +62,24 @@ const RateCard = ({
   const noLevels = isEmpty(consumptionLevels);
   const showRateLabel = !isT1 || startRateValue === false || limitRateValue === false;
 
-  const openExternalLink = () => ratesTableLink && Linking.openURL(ratesTableLink);
+  const debouncedTrackRedirection = useMemo(
+    () =>
+      debounce(link => {
+        trackRedirectionToExternalLink(link);
+      }, 300),
+    [trackRedirectionToExternalLink]
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedTrackRedirection.cancel();
+    };
+  }, [debouncedTrackRedirection]);
+
+  const openExternalLink = () => {
+    debouncedTrackRedirection(ratesTableLink);
+    if (ratesTableLink) Linking.openURL(ratesTableLink);
+  };
 
   return (
     <Surface elevation={1} style={styles.container}>
@@ -153,7 +172,8 @@ RateCard.propTypes = {
   ratesTableLink: string,
   smartBill: object,
   subsidy: string,
-  subsidyLevels: objectOf(string)
+  subsidyLevels: objectOf(string),
+  trackRedirectionToExternalLink: func
 };
 
 export default RateCard;

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

@@ -68,7 +68,8 @@ const Billing = ({
   const {
     handleAutomaticDebitAdherence = () => {},
     handleDownloadBill = () => {},
-    handleGoToDigitalBill = () => {}
+    handleGoToDigitalBill = () => {},
+    trackRedirectionToExternalLink = () => {}
   } = handlers;
   const {
     adherence_to_automatic_debit: adherenceToAutomaticDebit,
@@ -173,6 +174,7 @@ const Billing = ({
             smartBill,
             subsidy,
             subsidyLevels,
+            trackRedirectionToExternalLink,
             translations
           }}
         />

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

@@ -3,15 +3,17 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Image, ScrollView, View } from 'react-native';
 import { UTButton, UTLabel, UTLoading } from '@widergy/mobile-ui';
 import { func, object, shape, string } from 'prop-types';
+import debounce from 'lodash/debounce';
 
 import styles from './styles';
 
 const Glossary = ({ constants = {}, handlers = {}, translations = {} }) => {
-  const { getGlossaryData } = handlers;
+  const { getGlossaryData, trackClickGlossarySection = () => {} } = handlers;
   const { glossaryError: error, glossaryData, glossaryLoading: loading } = constants;
   const { title: glossaryTitle } = translations;
   const { pages = [], sections = [] } = glossaryData || {};
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [lastTrackedSection, setLastTrackedSection] = useState(null);
   const selectedSection = useMemo(() => sections?.[selectedIndex] || {}, [sections, selectedIndex]);
   const currentPage = pages.find(p => p.id === selectedSection.page_id) || {};
   const { image } = currentPage;
@@ -21,15 +23,28 @@ const Glossary = ({ constants = {}, handlers = {}, translations = {} }) => {
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
   const aspectRatio = imageSize.width / imageSize.height || 1;
 
+  const debouncedTrackSection = useMemo(
+    () =>
+      debounce(sectionTitle => {
+        if (sectionTitle && sectionTitle !== lastTrackedSection) {
+          trackClickGlossarySection(sectionTitle);
+          setLastTrackedSection(sectionTitle);
+        }
+      }, 300),
+    [trackClickGlossarySection, lastTrackedSection]
+  );
+
   const handleNext = () => {
     if (selectedIndex < sections.length - 1) {
       setSelectedIndex(prev => prev + 1);
+      debouncedTrackSection(sections[selectedIndex + 1]?.title);
     }
   };
 
   const handlePrev = () => {
     if (selectedIndex > 0) {
       setSelectedIndex(prev => prev - 1);
+      debouncedTrackSection(sections[selectedIndex - 1]?.title);
     }
   };
 
@@ -41,11 +56,23 @@ const Glossary = ({ constants = {}, handlers = {}, translations = {} }) => {
     if (image) Image.getSize(image, (width, height) => setImageSize({ width, height }));
   }, [image, selectedSection]);
 
+  useEffect(() => {
+    if (selectedSection?.title && !lastTrackedSection) {
+      setLastTrackedSection(selectedSection.title);
+    }
+  }, [selectedSection, lastTrackedSection]);
+
   useEffect(() => {
     getGlossaryData?.();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    return () => {
+      debouncedTrackSection.cancel();
+    };
+  }, [debouncedTrackSection]);
+
   return error && !loading ? null : (
     <GeneralContainer>
       <View style={styles.generalContainer}>