@widergy/utilitygo-smart-bill-mobile 2.4.0 → 2.4.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.4.2](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.4.1...v2.4.2) (2025-05-16)
+
+
+### Bug Fixes
+
+* configurable ai drawer ([#35](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/35)) ([ba8f400](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/ba8f4001fde2bf15687202fd4e6231c75be84e3a))
+
+## [2.4.1](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.4.0...v2.4.1) (2025-05-15)
+
+
+### Bug Fixes
+
+* smartbill consumption comparison ([#33](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/33)) ([9686b13](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/9686b13ac715e38086ffb288d726955b3123ec6f))
+
 # [2.4.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.3.0...v2.4.0) (2025-05-14)
 
 

package/package.json

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

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

@@ -1,5 +1,6 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { useEffect, useState } from 'react';
+/* eslint-disable react/jsx-fragments */
+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';
@@ -23,6 +24,7 @@ const SmartBillSummary = ({
 }) => {
   const {
     aiQuestionsList,
+    aiQuestionsPanelEnabled,
     glossaryError,
     glossaryLoading,
     notEnoughBillsErrorType,
@@ -79,26 +81,30 @@ const SmartBillSummary = ({
         })}
       </View>
 
-      <UTButton
-        colorTheme="primary"
-        Icon="EnergyIconChatSparkFilled"
-        onPress={openAIDrawer}
-        style={{ icon: styles.AIFloatButtonIcon, root: styles.AIFloatButton }}
-      />
+      {aiQuestionsPanelEnabled && (
+        <Fragment>
+          <UTButton
+            colorTheme="primary"
+            Icon="EnergyIconChatSparkFilled"
+            onPress={openAIDrawer}
+            style={{ icon: styles.AIFloatButtonIcon, root: styles.AIFloatButton }}
+          />
 
-      <AIDrawer
-        aiQuestionsList={aiQuestionsList}
-        answer={smartBillAIAnswer}
-        colors={colors}
-        components={components}
-        error={smartBillAIAnswerError}
-        getAnswer={getSmartBillAIAnswer}
-        isOpen={aiDrawerIsOpen}
-        loading={smartBillAIAnswerLoading}
-        notEnoughBillsErrorType={notEnoughBillsErrorType}
-        onClose={closeAIDrawer}
-        translations={translations}
-      />
+          <AIDrawer
+            aiQuestionsList={aiQuestionsList}
+            answer={smartBillAIAnswer}
+            colors={colors}
+            components={components}
+            error={smartBillAIAnswerError}
+            getAnswer={getSmartBillAIAnswer}
+            isOpen={aiDrawerIsOpen}
+            loading={smartBillAIAnswerLoading}
+            notEnoughBillsErrorType={notEnoughBillsErrorType}
+            onClose={closeAIDrawer}
+            translations={translations}
+          />
+        </Fragment>
+      )}
     </UTLoading>
   );
 };

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/index.js

@@ -13,33 +13,39 @@ const ConsumptionComparison = ({ colors, periodsToCompare = [], texts }) => {
   const styles = createStyles(colors);
   const maxValue = getMaxValue(periodsToCompare);
   const title = texts?.consumptions?.comparisonTitle;
+  const showComparison = periodsToCompare?.length > 1;
 
   return (
     <Fragment>
-      <UTLabel style={styles.consumptionComparisonLabel} colorTheme="gray" variant="small">
+      <UTLabel
+        colorTheme="gray"
+        style={showComparison ? styles.consumptionComparisonLabel : styles.consumptionComparisonLabelNoData}
+        variant="small">
         {title}
       </UTLabel>
-      <View style={styles.container}>
-        {periodsToCompare.map(({ consumptions, current, number, settlements, year }) => {
-          const { value, unit } = consumptions?.[0] || {};
-          const barHeight = getBarHeight(maxValue, value);
+      {showComparison && (
+        <View style={styles.container}>
+          {periodsToCompare.map(({ consumptions, current, number, settlements, year }) => {
+            const { value, unit } = consumptions?.[0] || {};
+            const barHeight = getBarHeight(maxValue, value);
 
-          return (
-            <View key={number + year} style={styles.barContainer}>
-              <UTLabel style={styles.value} variant="small">
-                {getFormattedValue(value, unit)}
-              </UTLabel>
-              <GradientBar colors={colors} height={barHeight} isCurrent={current} />
-              <UTLabel style={styles.year} variant="small" weight="medium">
-                {year}
-              </UTLabel>
-              <UTLabel style={styles.period} colorTheme="gray" variant="small">
-                {getPeriod(settlements)}
-              </UTLabel>
-            </View>
-          );
-        })}
-      </View>
+            return (
+              <View key={number + year} style={styles.barContainer}>
+                <UTLabel style={styles.value} variant="small">
+                  {getFormattedValue(value, unit)}
+                </UTLabel>
+                <GradientBar colors={colors} height={barHeight} isCurrent={current} />
+                <UTLabel style={styles.year} variant="small" weight="medium">
+                  {year}
+                </UTLabel>
+                <UTLabel style={styles.period} colorTheme="gray" variant="small">
+                  {getPeriod(settlements)}
+                </UTLabel>
+              </View>
+            );
+          })}
+        </View>
+      )}
     </Fragment>
   );
 };

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/styles.js

@@ -5,6 +5,10 @@ export const createStyles = colors =>
     consumptionComparisonLabel: {
       marginVertical: 12
     },
+    consumptionComparisonLabelNoData: {
+      marginBottom: -20,
+      marginTop: 12
+    },
     container: {
       alignItems: 'flex-end',
       flexDirection: 'row',

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionEvolution/index.js

@@ -12,11 +12,16 @@ const ConsumptionEvolution = ({ assets, colors, periods, texts }) => {
   const { consumptionEvolution: backgroundImages } = assets || {};
   const { consumptionEvolution: consumptionEvolutionLabels } = texts || {};
   const { title } = consumptionEvolutionLabels || {};
-  const { colorTheme, description, icon, Image, percentage, period } = getConsumptionComparison(
-    backgroundImages,
-    consumptionEvolutionLabels,
-    periods
-  );
+  const {
+    colorTheme,
+    description,
+    icon,
+    Image,
+    percentage,
+    period,
+    shade = '04',
+    size = 24
+  } = getConsumptionComparison(backgroundImages, consumptionEvolutionLabels, periods);
 
   return (
     <UTActionCard
@@ -28,7 +33,7 @@ const ConsumptionEvolution = ({ assets, colors, periods, texts }) => {
       surfaceElevation={0}>
       <View style={styles.childrenContainer}>
         <View style={styles.chipContainer}>
-          <UTIcon area colorTheme={colorTheme} name={icon} shade="04" size={24} />
+          <UTIcon area colorTheme={colorTheme} name={icon} shade={shade} size={size} />
           {percentage && (
             <UTLabel colorTheme={colorTheme} variant="title2" weight="medium">
               {percentage}

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionEvolution/utils.js

@@ -28,7 +28,8 @@ export const getConsumptionComparison = (backgroundImages, labels, periods) => {
       icon: 'IconEyeOff',
       Image: LightEvolutionImage,
       percentage: null,
-      period: noData
+      period: noData,
+      shade: '05'
     };
   }