@widergy/utilitygo-smart-bill-mobile 3.9.0 → 3.11.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [3.11.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.10.0...v3.11.0) (2026-02-26)
+
+
+### Features
+
+* [EVEP-273] smartbill t2 t3 ([#66](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/66)) ([ddef20b](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/ddef20b121aeec0510b49d2ba2e7e9056c10ffc9))
+
+# [3.10.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.9.0...v3.10.0) (2026-02-26)
+
+
+### Features
+
+* [EVEP-273] smartbill t2 t3 ([#64](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/64)) ([1f9a6fc](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/1f9a6fcc56eeb5cacf5ae290e0b1496d6d1b6792))
+* [EVEP-273] smartbill t2 t3 ([#65](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/65)) ([387c186](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/387c186d6469976b1985809e32e5e75e49c48d21))
+
 # [3.9.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.8.0...v3.9.0) (2026-02-10)
 
 

package/package.json

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

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

@@ -7,8 +7,6 @@ import Consumptions from './tabs/Consumptions';
 import Billing from './tabs/Billing';
 import Glossary from './tabs/Glossary';
 
-export const BIMESTRAL_PERIODICITY = 'BIMESTRAL';
-
 // eslint-disable-next-line react/display-name
 const renderComponentWithProps = (Component, tab) => props => (
   <Component {...props} assets={props?.assets?.[tab] || {}} translations={props?.translations?.[tab] || {}} />

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

@@ -19,6 +19,7 @@ const SmartBillSummary = ({
   colors,
   components,
   constants = {},
+  consumptionLayout,
   FabComponent,
   handlers,
   loading,
@@ -27,6 +28,7 @@ const SmartBillSummary = ({
   translations,
   utils,
   periodSpan,
+  progressBarConcept,
   walkthroughStep
 }) => {
   const styles = getStyles(colors);
@@ -50,7 +52,7 @@ const SmartBillSummary = ({
     trackAIFloatingButtonClick,
     trackTabChange
   } = handlers;
-  const filteredTabOptions = getTabOptions([...(tabOptions || [])], smartBill) || [];
+  const filteredTabOptions = getTabOptions([...(tabOptions || [])]) || [];
   const defaultCurrentTab = getDefaultCurrentTab(filteredTabOptions);
   const [currentTab, setCurrentTab] = useState(defaultCurrentTab);
   const [tabsKey, setTabsKey] = useState(0);
@@ -240,13 +242,15 @@ const SmartBillSummary = ({
           billingLayout,
           colors,
           constants,
+          consumptionLayout,
           handlers,
           loading,
           smartBill,
           tabOptions: [...(tabOptions || [])],
           translations,
           utils,
-          periodSpan
+          periodSpan,
+          progressBarConcept
         })}
       </ScrollView>
 
@@ -302,6 +306,7 @@ SmartBillSummary.propTypes = {
   colors: object,
   components: object,
   constants: object,
+  consumptionLayout: array,
   FabComponent: object,
   handlers: shape({ [string]: func }),
   loading: bool,
@@ -318,6 +323,7 @@ SmartBillSummary.propTypes = {
   translations: object,
   utils: object,
   periodSpan: string,
+  progressBarConcept: array,
   walkthroughStep: object
 };
 

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

@@ -19,7 +19,7 @@ const Billing = ({
 }) => {
   const styles = createStyles(colors);
   const { dateRange, title, tagLabel, clarification, periodDetail } = texts?.billing || {};
-  const currentPeriod = smartBill?.periods.find(period => period.current);
+  const currentPeriod = smartBill?.periods?.find(period => period.current);
   const billingsToShow = getBillingsToShow(currentPeriod?.settlements, periodSpan);
 
   const { start_date: startDate, end_date: endDate } = currentPeriod?.settlements || {};

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ProgressBarItem/index.js

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { UTIcon, UTLabel, UTProgressBar, UTTooltip } from '@widergy/mobile-ui';
+import { object } from 'prop-types';
+import { View } from 'react-native';
+
+import { VARIANT } from '../../constants';
+
+import { formatNumber } from './utils';
+import { createStyles, getBarCustomStyles } from './styles';
+
+const ProgressBarItem = ({ colors, item }) => {
+  const { title, tooltip, isExceeded, registered, limit, unit, excess, progressValue, variant } = item;
+
+  const styles = useMemo(() => createStyles(colors), [colors]);
+  const barThemeOverride = useMemo(() => getBarCustomStyles(colors, item), [colors, item]);
+
+  const [leftData, rightData] = registered.value >= limit.value ? [limit, registered] : [registered, limit];
+
+  const colorConfig = {
+    [VARIANT.DEFAULT]: { left: 'gray', right: 'gray' },
+    [VARIANT.EXCEEDED]: { left: 'gray', right: 'error' },
+    [VARIANT.PENALTY]: { left: 'error', right: 'gray' }
+  };
+
+  const { left: leftColor, right: rightColor } = colorConfig[variant] || colorConfig[VARIANT.DEFAULT];
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.mainSection}>
+        <UTLabel variant="small" colorTheme="gray">
+          {title}
+        </UTLabel>
+
+        <View style={styles.progressBarWrapper}>
+          <UTProgressBar value={progressValue} styles={barThemeOverride} showPercentage={false} />
+
+          <View style={styles.rowSpaceBetween}>
+            <View style={styles.valueGroup}>
+              <UTLabel colorTheme={leftColor} variant="title2">
+                {formatNumber(leftData.value)}
+              </UTLabel>
+              <UTLabel colorTheme={leftColor} variant="subtitle2">
+                {unit}
+              </UTLabel>
+            </View>
+            <View style={styles.valueGroup}>
+              <UTLabel variant="title1" colorTheme={rightColor}>
+                {formatNumber(rightData.value)}
+              </UTLabel>
+              <UTLabel variant="subtitle2" colorTheme={rightColor}>
+                {unit}
+              </UTLabel>
+            </View>
+          </View>
+
+          <View style={styles.rowSpaceBetween}>
+            <UTLabel variant="small">{leftData.label}</UTLabel>
+            <UTLabel variant="small">{rightData.label}</UTLabel>
+          </View>
+        </View>
+      </View>
+
+      {isExceeded && (
+        <View>
+          <View style={styles.divider} />
+          <View style={styles.footerSection}>
+            <View style={styles.rowSpaceBetween}>
+              <UTLabel variant="subtitle2">{excess.label}</UTLabel>
+              <View style={styles.rowGap}>
+                <UTTooltip content={<UTLabel>{tooltip}</UTLabel>}>
+                  <UTIcon colorTheme="error" name="IconInfoCircle" size={24} />
+                </UTTooltip>
+                <UTLabel variant="subtitle2" colorTheme="error">
+                  {formatNumber(excess.value)} {unit}
+                </UTLabel>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+ProgressBarItem.propTypes = {
+  colors: object.isRequired,
+  item: object.isRequired
+};
+
+export default ProgressBarItem;

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ProgressBarItem/styles.js

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+
+import { VARIANT } from '../../constants';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    card: {
+      backgroundColor: colors.light01,
+      borderRadius: 8,
+      elevation: 3,
+      marginBottom: 16,
+      maxWidth: '100%'
+    },
+    divider: { backgroundColor: colors.light04, height: 1 },
+    footerSection: { padding: 16 },
+    mainSection: { gap: 16, padding: 16 },
+    progressBarWrapper: { gap: 8 },
+    rowGap: { alignItems: 'center', flexDirection: 'row', gap: 8 },
+    rowSpaceBetween: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    },
+    valueGroup: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: 4
+    }
+  });
+
+export const getBarCustomStyles = (colors, item) => {
+  const { min, variant } = item;
+  const isExceeded = variant === VARIANT.EXCEEDED || variant === VARIANT.PENALTY;
+  const barColor = colors.actionAccent04;
+  const trackColor = min ? colors.actionAccent03 : colors.light04;
+  const overheadFill = colors.semanticError04;
+  const overheadStroke = min ? '#FFFFFF' : 'transparent';
+  const overheadStrokeWidth = min ? 14 : 1;
+  const overheadTransform = min ? [{ scaleX: -1 }] : [];
+
+  return {
+    barContainer: {
+      backgroundColor: trackColor,
+      borderRadius: 100,
+      height: 12
+    },
+    progressBar: {
+      backgroundColor: barColor,
+      borderRadius: 100,
+      borderRightColor: '#FFFFFF',
+      borderRightWidth: min && !isExceeded ? 2 : 0
+    },
+    overheadBar: {
+      fill: overheadFill,
+      stroke: overheadStroke,
+      strokeWidth: overheadStrokeWidth,
+      transform: overheadTransform
+    }
+  };
+};

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ProgressBarItem/utils.js

@@ -0,0 +1,6 @@
+import numeral from 'numeral';
+
+export const formatNumber = num => {
+  if (num === null || num === undefined) return '0';
+  return numeral(num).format('0,0.[00]');
+};

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ReiterationBanner/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import { UTButton, UTIcon, UTLabel } from '@widergy/mobile-ui';
+import { string, object, func } from 'prop-types';
+
+import { createStyles } from './styles';
+
+const ReiterationBanner = ({ bannerText, colors, handleGoToReiteration, texts }) => {
+  const { title, description, button } = texts;
+  const styles = createStyles(colors);
+  return (
+    <View style={styles.reiterationContainer}>
+      <View style={styles.reiterationContent}>
+        <View style={styles.reiterationSubcontent}>
+          <UTIcon name="IconReceipt2" size={24} colorTheme="error" />
+          <View style={styles.reiterationTexts}>
+            <UTLabel variant="subtitle1" weight="medium">
+              {title}
+            </UTLabel>
+            <UTLabel>{description}</UTLabel> {bannerText && <UTLabel>{bannerText}</UTLabel>}
+          </View>
+        </View>
+      </View>
+      {button && (
+        <View style={styles.actionButton}>
+          <UTButton onPress={handleGoToReiteration} variant="text">
+            {button}
+          </UTButton>
+        </View>
+      )}
+    </View>
+  );
+};
+ReiterationBanner.propTypes = {
+  bannerText: string,
+  colors: object,
+  handleGoToReiteration: func,
+  texts: object
+};
+export default ReiterationBanner;

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ReiterationBanner/styles.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    actionButton: {
+      borderTopColor: colors.semanticError02,
+      borderTopWidth: 1,
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      padding: 8
+    },
+    reiterationContainer: {
+      backgroundColor: colors.semanticError01,
+      borderRadius: 8,
+      flexDirection: 'column',
+      marginBottom: 16,
+      width: '100%'
+    },
+    reiterationContent: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: 16,
+      padding: 16
+    },
+    reiterationSubcontent: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      gap: 16
+    },
+
+    reiterationTexts: {
+      flexDirection: 'column',
+      flexShrink: 1,
+      gap: 8
+    }
+  });

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/SimpleBanner/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { UTIcon, UTLabel } from '@widergy/mobile-ui';
+import { object, string } from 'prop-types';
+import { View } from 'react-native';
+
+import { createStyles } from './styles';
+
+const SimpleBanner = ({ bannerText, colors }) => {
+  const styles = createStyles(colors);
+  return (
+    <View style={styles.bannerDetail}>
+      <UTIcon name="IconReceipt2" colorTheme="error" size={24} />
+      <View style={styles.textContainer}>
+        <UTLabel>{bannerText}</UTLabel>
+      </View>
+    </View>
+  );
+};
+
+SimpleBanner.propTypes = {
+  bannerText: string.isRequired,
+  colors: object
+};
+
+export default SimpleBanner;

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/SimpleBanner/styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    bannerDetail: {
+      alignItems: 'flex-start',
+      backgroundColor: colors.semanticError01,
+      borderRadius: 8,
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 8,
+      marginBottom: 16,
+      maxWidth: '100%',
+      padding: 8
+    },
+    textContainer: {
+      flexShrink: 1
+    }
+  });

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/constants.js

@@ -0,0 +1,5 @@
+export const VARIANT = {
+  PENALTY: 'penalty',
+  EXCEEDED: 'exceeded',
+  DEFAULT: 'default'
+};

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { object, array, func } from 'prop-types';
+import { View } from 'react-native';
+
+import ProgressBarItem from './components/ProgressBarItem';
+import ReiterationBanner from './components/ReiterationBanner';
+import SimpleBanner from './components/SimpleBanner';
+import { getInfo } from './utils';
+
+const ProgressBarCard = ({ colors, handleGoToReiteration, progressBarConcept, smartBill, texts }) => {
+  const itemsWithStatus = progressBarConcept
+    .filter(concept =>
+      concept.accountConditions.some(condition =>
+        smartBill?.client?.rate?.purchased?.includes(condition.rate)
+      )
+    )
+    .map(concept => {
+      const info = getInfo(concept, smartBill);
+      return { ...concept, ...info };
+    });
+  const renderedProgressBars = itemsWithStatus.map(item => (
+    <ProgressBarItem colors={colors} key={item.id} item={item} />
+  ));
+  const exceededItems = itemsWithStatus.filter(item => item.isExceeded);
+  const reiteration = !!smartBill.reiteration;
+  const bannerText =
+    exceededItems.length === 1 && !reiteration
+      ? exceededItems[0].banner
+      : exceededItems.length === 2
+        ? reiteration
+          ? exceededItems[1]?.banner
+          : exceededItems[1].doubleBanner
+        : null;
+  return (
+    <View>
+      {reiteration && (
+        <ReiterationBanner
+          bannerText={bannerText}
+          colors={colors}
+          handleGoToReiteration={handleGoToReiteration}
+          texts={texts.reiterationBanner}
+        />
+      )}
+      {bannerText && !reiteration && <SimpleBanner bannerText={bannerText} colors={colors} />}
+      {renderedProgressBars}
+    </View>
+  );
+};
+ProgressBarCard.propTypes = {
+  colors: object,
+  handleGoToReiteration: func,
+  progressBarConcept: array,
+  smartBill: object,
+  texts: object
+};
+export default ProgressBarCard;

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/utils.js

@@ -0,0 +1,29 @@
+import { VARIANT } from './constants';
+
+const getValue = (smartBill, magnitudeName) => {
+  const item = smartBill?.periods?.[0]?.consumptions?.find(c => c.magnitude === magnitudeName);
+  return item ? { value: item.value || 0, unit: item.unit || '' } : { value: 0, unit: '' };
+};
+
+export const getInfo = (concept, smartBill) => {
+  const { data, min } = concept;
+  const { registered, limit, excess } = data;
+  const { value: registeredVal, unit } = getValue(smartBill, registered.magnitude);
+  const { value: limitVal } = getValue(smartBill, limit.magnitude);
+  const { value: excessVal } = getValue(smartBill, excess.magnitude);
+  const isExceeded = excessVal > 0;
+  const variant = isExceeded ? (min ? VARIANT.PENALTY : VARIANT.EXCEEDED) : VARIANT.DEFAULT;
+  const progressValue =
+    limitVal > 0 && registeredVal > 0 ? (min ? limitVal / registeredVal : registeredVal / limitVal) : 0;
+
+  return {
+    ...concept,
+    variant,
+    progressValue,
+    isExceeded,
+    unit,
+    registered: { ...registered, value: registeredVal },
+    limit: { ...limit, value: limitVal },
+    excess: { ...excess, value: excessVal }
+  };
+};

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

@@ -0,0 +1,9 @@
+import Billing from './components/Billing';
+import CurrentConsumption from './components/CurrentConsumption';
+import ProgressBarCard from './components/ProgressBarCard';
+
+export const COMPONENTS = {
+  Billing,
+  CurrentConsumption,
+  ProgressBarCard
+};

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

@@ -1,15 +1,32 @@
 import React from 'react';
 import { UTLabel } from '@widergy/mobile-ui';
 import { View } from 'react-native';
-import { object, string } from 'prop-types';
+import { object, string, array } from 'prop-types';
 
 import styles from './styles';
 import BimestralConsumption from './components/BimestralConsumption';
-import Billing from './components/Billing';
-import CurrentConsumption from './components/CurrentConsumption';
+import { COMPONENTS } from './constants';
 
-const Consumptions = ({ assets, colors, smartBill, translations, periodSpan }) => {
+const Consumptions = ({
+  assets,
+  colors,
+  consumptionLayout,
+  handlers,
+  progressBarConcept,
+  smartBill,
+  translations,
+  periodSpan
+}) => {
   const { title, description } = translations?.consumptions || {};
+  const props = {
+    assets,
+    colors,
+    smartBill,
+    texts: translations,
+    periodSpan,
+    handleGoToReiteration: handlers?.handleGoToReiteration,
+    progressBarConcept
+  };
 
   return (
     <View style={styles.generalContainer}>
@@ -24,8 +41,13 @@ const Consumptions = ({ assets, colors, smartBill, translations, periodSpan }) =
         </View>
 
         <View style={styles.consumptionDetailColumns}>
-          <CurrentConsumption colors={colors} assets={assets} smartBill={smartBill} texts={translations} />
-          <Billing colors={colors} smartBill={smartBill} texts={translations} periodSpan={periodSpan} />
+          {consumptionLayout.map(item => {
+            if (item.enabled) {
+              const Component = COMPONENTS[item.name];
+              return Component && <Component key={item.name} {...props} />;
+            }
+            return null;
+          })}
         </View>
       </View>
     </View>
@@ -35,6 +57,9 @@ const Consumptions = ({ assets, colors, smartBill, translations, periodSpan }) =
 Consumptions.propTypes = {
   assets: object,
   colors: object,
+  consumptionLayout: array,
+  handlers: object,
+  progressBarConcept: array,
   smartBill: object,
   translations: object,
   periodSpan: string

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

@@ -1,17 +1,7 @@
 import { isEmpty } from 'lodash';
 
-import { SMARTBILL_TABS } from '../../constants/tabs';
-
-import { BIMESTRAL_PERIODICITY } from './constants';
-
-export const getTabOptions = (tabOptions, smartBill) => {
-  const hasBimestralPeriodicity = smartBill?.periods?.some(
-    period => period.settlements?.periodicity === BIMESTRAL_PERIODICITY
-  );
-
-  return tabOptions.filter(
-    ({ enabled, value }) => enabled && (value !== SMARTBILL_TABS.CONSUMPTIONS || hasBimestralPeriodicity)
-  );
+export const getTabOptions = tabOptions => {
+  return tabOptions.filter(({ enabled }) => enabled);
 };
 
 export const getDefaultCurrentTab = tabOptions =>