@widergy/utilitygo-smart-bill-mobile 2.4.4 → 2.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.5.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.4.4...v2.5.0) (2025-05-28)
+
+
+### Features
+
+* smartbill ai question list new services ([#38](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/38)) ([aca26cf](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/aca26cf09a18b4cf49689a79a70aecba510cccfc))
+
 ## [2.4.4](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.4.3...v2.4.4) (2025-05-23)
 
 

package/package.json

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

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

@@ -1,15 +1,17 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable react/forbid-prop-types */
-import React, { useState } from 'react';
-import { UTBottomSheet, UTLabel, UTIcon } from '@widergy/mobile-ui';
+import React, { useEffect, useState } from 'react';
+import { UTBottomSheet, UTLabel, UTLoading, UTIcon } from '@widergy/mobile-ui';
 import { FlatList, View } from 'react-native';
-import { arrayOf, bool, func, object, shape, string } from 'prop-types';
+import { arrayOf, bool, func, number, object, shape, string } from 'prop-types';
 
 import { SKELETON_LOADING_HEIGHT } from './constants';
 import { createStyles } from './styles';
 
 const AIDrawer = ({
-  aiQuestionsList,
+  aiQuestionsList = [],
+  aiQuestionsListError,
+  aiQuestionsListLoading,
   answer,
   colors,
   components = {},
@@ -41,7 +43,7 @@ const AIDrawer = ({
   };
 
   const renderItem = ({ item }) => {
-    const { id, title } = item || {};
+    const { id, question } = item || {};
     const isLoading = loading?.[id];
     const errorContent = error?.[id];
     const answerContent = answer?.[id];
@@ -121,11 +123,16 @@ const AIDrawer = ({
           touchableContainer: styles.collapsibleCardContainer,
           outerContainer: styles.collapsibleCardOuterContainer
         }}
-        title={title}
+        title={question}
       />
     );
   };
 
+  useEffect(() => {
+    if (aiQuestionsListError && !aiQuestionsListLoading) handleClose();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, aiQuestionsListError, aiQuestionsListLoading]);
+
   return (
     <UTBottomSheet
       onClose={handleClose}
@@ -133,18 +140,22 @@ const AIDrawer = ({
       titleProps={{ variant: 'title3', weight: 'medium' }}
       visible={isOpen}
       withBodyPadding={false}>
-      <FlatList
-        contentContainerStyle={styles.flatListContainer}
-        data={aiQuestionsList}
-        keyExtractor={row => row.id.toString()}
-        renderItem={renderItem}
-      />
+      <UTLoading loading={aiQuestionsListLoading} style={styles.loadingContainer}>
+        <FlatList
+          contentContainerStyle={styles.flatListContainer}
+          data={aiQuestionsList}
+          keyExtractor={row => row.id.toString()}
+          renderItem={renderItem}
+        />
+      </UTLoading>
     </UTBottomSheet>
   );
 };
 
 AIDrawer.propTypes = {
-  aiQuestionsList: arrayOf(shape({ id: string, title: string })),
+  aiQuestionsList: arrayOf(shape({ id: number, question: string })),
+  aiQuestionsListError: bool,
+  aiQuestionsListLoading: bool,
   answer: object,
   colors: object,
   components: object,

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

@@ -53,5 +53,8 @@ export const createStyles = colors =>
     },
     flatListContainer: {
       paddingBottom: 6
+    },
+    loadingContainer: {
+      flex: 1
     }
   });

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

@@ -4,6 +4,7 @@ import React, { Fragment, useEffect, useState } 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 { TAB_COMPONENT_MAPPER } from './constants';
 import { getDefaultCurrentTab, getTabOptions } from './utils';
@@ -24,6 +25,8 @@ const SmartBillSummary = ({
 }) => {
   const {
     aiQuestionsList,
+    aiQuestionsListError,
+    aiQuestionsListLoading,
     aiQuestionsPanelEnabled,
     glossaryError,
     glossaryLoading,
@@ -32,7 +35,7 @@ const SmartBillSummary = ({
     smartBillAIAnswerError,
     smartBillAIAnswerLoading
   } = constants;
-  const { getSmartBillAIAnswer, resetSmartBillAIAnswers } = handlers;
+  const { getSmartBillAIAnswer, getSmartBillAIQuestions, resetSmartBillAIAnswers } = handlers;
   const filteredTabOptions = getTabOptions(tabOptions, smartBill) || [];
   const defaultCurrentTab = getDefaultCurrentTab(filteredTabOptions);
   const [currentTab, setCurrentTab] = useState(defaultCurrentTab);
@@ -40,7 +43,10 @@ const SmartBillSummary = ({
   const [aiDrawerIsOpen, setAiDrawerIsOpen] = useState(false);
 
   const changeCurrentTab = newTab => setCurrentTab(newTab?.value || newTab);
-  const openAIDrawer = () => setAiDrawerIsOpen(true);
+  const openAIDrawer = () => {
+    if (isEmpty(aiQuestionsList)) getSmartBillAIQuestions();
+    setAiDrawerIsOpen(true);
+  };
   const closeAIDrawer = () => {
     setAiDrawerIsOpen(false);
     resetSmartBillAIAnswers();
@@ -92,6 +98,8 @@ const SmartBillSummary = ({
 
           <AIDrawer
             aiQuestionsList={aiQuestionsList}
+            aiQuestionsListError={aiQuestionsListError}
+            aiQuestionsListLoading={aiQuestionsListLoading}
             answer={smartBillAIAnswer}
             colors={colors}
             components={components}