@widergy/utilitygo-smart-bill-mobile 3.10.0 → 3.12.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [3.12.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.11.0...v3.12.0) (2026-03-12)
+
+
+### Features
+
+* [EVEP-107] attachment delinquency ([#68](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/68)) ([6f713e7](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/6f713e7134a83ba606a35c95188d3f9d26dd2362))
+* [EVEP-423] change ratecard footer ([#67](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/67)) ([eded80d](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/eded80d667497e5342fb0d3bdbc40499cfa1109b))
+
+# [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)
 
 

package/package.json

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

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

@@ -12,6 +12,7 @@ import getStyles from './styles';
 import AIDrawer from './components/AIDrawer';
 import BillHeader from './tabs/Billing/components/BillHeader';
 import AlternativeHeader from './tabs/Billing/components/AlternativeHeader';
+import Attachment from './tabs/Billing/components/Attachment';
 
 const SmartBillSummary = ({
   assets,
@@ -58,6 +59,7 @@ const SmartBillSummary = ({
   const [tabsKey, setTabsKey] = useState(0);
   const [aiDrawerIsOpen, setAiDrawerIsOpen] = useState(false);
   const [lastTrackedTab, setLastTrackedTab] = useState(defaultCurrentTab);
+  const [attachmentOpen, setAttachmentOpen] = useState(false);
 
   const changeCurrentTab = newTab => setCurrentTab(newTab?.value || newTab);
 
@@ -222,6 +224,7 @@ const SmartBillSummary = ({
             billType={smartBill?.bill_type}
             colors={colors}
             debtStatusLabel={smartBill?.debt_status_label}
+            delinquency={smartBill?.client?.delinquency}
             header={translations?.billingTab.header}
             smartBill={smartBill}
           />
@@ -237,6 +240,14 @@ const SmartBillSummary = ({
             clientNumberFormatter={utils?.formatters?.clientNumberFormatter}
           />
         )}
+        {smartBill?.attachment && (
+          <Attachment
+            attachment={smartBill?.attachment}
+            attachmentOpen={attachmentOpen}
+            attachmentText={translations.billingTab.header.attachmentText}
+            setAttachmentOpen={setAttachmentOpen}
+          />
+        )}
         {TAB_COMPONENT_MAPPER?.[currentTab]?.({
           assets,
           billingLayout,

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { object, string, func, bool } from 'prop-types';
+import { UTActionCard, UTBottomSheet } from '@widergy/mobile-ui';
+
+import styles from './styles';
+
+const Attachment = ({ attachment, attachmentText, setAttachmentOpen, attachmentOpen }) => {
+  return (
+    <>
+      <UTActionCard
+        classNames={{ container: styles.container, titleAndDescription: styles.titleAndDescription }}
+        headerActions={[
+          {
+            colorTheme: 'accent',
+            Icon: 'IconChevronRight',
+            isPrimary: true
+          }
+        ]}
+        adornment={{
+          position: 'left',
+          type: 'icon',
+          alignment: 'center',
+          justifyContent: 'center',
+          props: { name: 'IconSearch', colorTheme: 'gray' }
+        }}
+        mainAction={() => setAttachmentOpen(!attachmentOpen)}
+        title={attachmentText}
+        titleProps={{ style: styles.titleActionCard }}
+      />
+      <UTBottomSheet
+        onClose={() => setAttachmentOpen(false)}
+        title={attachment.title}
+        titleProps={{ variant: 'title3', weight: 'medium', colorTheme: 'accent' }}
+        description={attachment.subtitle}
+        visible={attachmentOpen}
+        withBodyPadding={false}
+      />
+    </>
+  );
+};
+
+Attachment.propTypes = {
+  attachment: object,
+  attachmentText: string,
+  setAttachmentOpen: func,
+  attachmentOpen: bool
+};
+
+export default Attachment;

package/src/lib/components/SmartBillSummary/tabs/Billing/components/Attachment/styles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    marginBottom: 8,
+    marginHorizontal: 16,
+    marginTop: 24
+  },
+  titleAndDescription: {
+    display: 'flex',
+    justifyContent: 'center'
+  }
+});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Surface, UTLabel, UTStatus } from '@widergy/mobile-ui';
+import { Surface, UTLabel, UTStatus, UTIcon } from '@widergy/mobile-ui';
 import { View, Image } from 'react-native';
 import { string, object } from 'prop-types';
 
@@ -8,14 +8,23 @@ import { getCurrentPeriod, getFormattedDate } from '../../utils';
 
 import { createStyles } from './styles';
 
-const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNumber, billType }) => {
+const BillHeader = ({
+  assets,
+  colors,
+  header,
+  debtStatusLabel,
+  delinquency,
+  smartBill,
+  billNumber,
+  billType
+}) => {
   const styles = createStyles(colors);
   const { UtilityLogo } = assets.billingTab;
 
   const { billIssueDate, billTypeHelpText } = header;
   const currentPeriod = getCurrentPeriod(smartBill);
   const issuedOnDate = getFormattedDate(currentPeriod?.settlements?.current?.issued_on);
-  const debtStatusValidation = debtStatusLabel !== null;
+  const debtStatusValidation = !!debtStatusLabel;
   return (
     <Surface elevation={1} style={styles.billHeader}>
       {UtilityLogo && <Image resizeMode="contain" source={UtilityLogo} height={35} />}
@@ -44,6 +53,14 @@ const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNu
         {debtStatusValidation && (
           <DebtStatusLabel colors={colors} debtStatusLabel={debtStatusLabel} isWarning={smartBill?.warning} />
         )}
+        {!!delinquency && (
+          <View style={styles.delinquency}>
+            <UTIcon name="IconX" size={16} colorTheme="error" />
+            <UTLabel variant="small" colorTheme="error">
+              {delinquency?.title}
+            </UTLabel>
+          </View>
+        )}
       </View>
     </Surface>
   );
@@ -56,6 +73,7 @@ BillHeader.propTypes = {
   colors: object,
   debtStatusLabel: string,
   header: object,
+  delinquency: object,
   smartBill: object
 };
 

package/src/lib/components/SmartBillSummary/tabs/Billing/components/BillHeader/styles.js

@@ -2,32 +2,42 @@ import { StyleSheet } from 'react-native';
 
 export const createStyles = colors =>
   StyleSheet.create({
-    billHeaderLabels: {
-      alignItems: 'center',
-      columnGap: 32,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingTop: 16,
-      rowGap: 16,
-      flexWrap: 'wrap'
-    },
-    valueAndHelpText: {
-      flexDirection: 'column',
-      gap: 4
-    },
     billHeader: {
       backgroundColor: colors.light01,
       borderRadius: 8,
       flexDirection: 'column',
       gap: 12,
       justifyContent: 'space-between',
-      padding: 16,
       marginHorizontal: 16,
-      marginTop: 16
+      marginTop: 16,
+      padding: 16
     },
+    billHeaderLabels: {
+      alignItems: 'center',
+      columnGap: 32,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+      paddingTop: 16,
+      rowGap: 16
+    },
+
     billTypeAndNumber: {
       alignItems: 'center',
       flexDirection: 'row',
       gap: 4
+    },
+    delinquency: {
+      alignItems: 'center',
+      backgroundColor: colors.semanticError01,
+      borderRadius: 8,
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 8,
+      padding: 4
+    },
+    valueAndHelpText: {
+      flexDirection: 'column',
+      gap: 4
     }
   });

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

@@ -53,7 +53,7 @@ const ProgressBar = ({
         end={{ x: 1, y: 0 }}
         style={styles.progressBackground}
       >
-        {data.asMutable({ deep: true }).map(({ range, name }) => {
+        {(data?.asMutable ? data.asMutable({ deep: true }) : data).map(({ range, name }) => {
           const isLast = range[1] === 'Infinity';
           const width = isLast ? '20%' : `${(range[1] / totalRange) * 100}%`;
 

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

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { Linking, View } from 'react-native';
-import { Surface, UTButton, UTLabel } from '@widergy/mobile-ui';
+import { Surface, UTButton, UTLabel, UTDataElement } from '@widergy/mobile-ui';
 import { object, string, func, objectOf, array, bool } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import debounce from 'lodash/debounce';
-import upperFirst from 'lodash/upperFirst';
 
 import {
   getConsumptionLabels,
@@ -44,7 +43,7 @@ const RateCard = ({
     yourConsumption,
     yourRate
   } = rateCardTranslations;
-  const { client, periods } = smartBill;
+  const { client, periods } = smartBill?.asMutable ? smartBill.asMutable({ deep: true }) : { ...smartBill };
   const purchasedRate = client?.rate?.purchased || '';
   const periodsToCompare = getConsumptionPeriodsToCompare(periods);
   const { totalConsumption, totalConsumptionFormatted } = getConsumptionLabels(periodsToCompare) || {};
@@ -141,16 +140,48 @@ const RateCard = ({
 
       <View style={styles.footer}>
         {hasCharge &&
-          charges.map(({ concept, amount }) => (
-            <View style={styles.detail} key={concept}>
-              <UTLabel style={styles.detailTitle} weight="medium">
-                {upperFirst(concept)}
-              </UTLabel>
-              <UTLabel variant="subtitle1" weight="medium">
-                {formatAmount?.(amount) || '-'}
-              </UTLabel>
-            </View>
-          ))}
+          charges
+            ?.sort((a, b) => {
+              const aHasSubconcepts = !isEmpty(a.lines);
+              const bHasSubconcepts = !isEmpty(b.lines);
+
+              if (aHasSubconcepts === bHasSubconcepts) return 0;
+              return aHasSubconcepts ? 1 : -1;
+            })
+            .map(({ concept, amount, lines = [] }) => {
+              const hasSubconcepts = !isEmpty(lines);
+              const lastSubconcept = lines.length - 1;
+
+              const renderSubconcept = (subconcept, i) => {
+                const subconceptStyles = [
+                  styles.subconcept,
+                  !(i === lastSubconcept) && styles.subconceptBottomBorder,
+                  i === 0 && styles.subconceptTopBorder
+                ];
+                return (
+                  <View style={subconceptStyles} key={i}>
+                    <View style={styles.subconceptTitleContainer}>
+                      <UTLabel colorTheme="gray">{subconcept?.title ?? '-'}</UTLabel>
+                    </View>
+                    <UTLabel weight="medium">{formatAmount?.(subconcept?.amount)}</UTLabel>
+                  </View>
+                );
+              };
+
+              return (
+                <UTDataElement
+                  Data={formatAmount?.(amount)}
+                  dataProps={{ colorTheme: 'dark', weight: 'medium' }}
+                  key={concept}
+                  orientation={hasSubconcepts ? 'vertical' : undefined}
+                  style={styles.concept}
+                  title={concept}
+                  titleProps={{ weight: 'medium', colorTheme: 'dark' }}
+                >
+                  {hasSubconcepts && lines?.map(renderSubconcept)}
+                </UTDataElement>
+              );
+            })}
 
         <View style={styles.footerAction}>
           {externalLinks.map(({ link, label }, index) => (

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

@@ -2,68 +2,94 @@ import { StyleSheet } from 'react-native';
 
 export const createStyles = colors =>
   StyleSheet.create({
+    concept: {
+      borderTopColor: colors.light04,
+      borderTopWidth: 1,
+      paddingHorizontal: 16
+    },
+    consumptionContent: {
+      flex: 1
+    },
+    consumptionDataContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: 24,
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingTop: 16
+    },
     container: {
       backgroundColor: colors.light01,
       borderRadius: 8,
       flexDirection: 'column',
       gap: 24
     },
-    headerTitles: {
-      flexDirection: 'column',
-      gap: 8,
-      paddingTop: 16,
-      paddingHorizontal: 16
-    },
-    consumptionDataContainer: {
+    detail: {
       alignItems: 'center',
+      borderTopColor: colors.light04,
+      borderTopWidth: 1,
       flexDirection: 'row',
+      gap: 16,
       justifyContent: 'space-between',
-      gap: 24,
-      paddingTop: 16,
-      paddingHorizontal: 16
-    },
-    noLevels: {
-      paddingTop: 0
+      padding: 16
     },
-    consumptionContent: {
+    detailTitle: {
       flex: 1
     },
+    divider: {
+      backgroundColor: colors.light04,
+      height: 1,
+      width: '100%'
+    },
     footer: {
       width: '100%'
     },
     footerAction: {
       alignItems: 'center',
-      backgroundColor: 'transparent',
-      borderTopWidth: 1,
       borderTopColor: colors.light04,
+      borderTopWidth: 1,
       flexDirection: 'column',
       justifyContent: 'space-between'
     },
-    detail: {
+    footerActionChildren: {
       alignItems: 'center',
-      borderTopWidth: 1,
-      borderTopColor: colors.light04,
-      flexDirection: 'row',
       justifyContent: 'space-between',
-      gap: 16,
-      padding: 16
-    },
-    detailTitle: {
-      flex: 1
+      paddingVertical: 8
     },
     footerActionRoot: {
-      padding: 0,
       margin: 0,
+      padding: 0,
       width: '100%'
     },
-    footerActionChildren: {
-      alignItems: 'center',
+    headerTitles: {
+      flexDirection: 'column',
+      gap: 8,
+      paddingHorizontal: 16,
+      paddingTop: 16
+    },
+    noLevels: {
+      paddingTop: 0
+    },
+    subconcept: {
+      flexDirection: 'row',
       justifyContent: 'space-between',
-      paddingVertical: 8
+      paddingTop: 16,
+      width: '100%'
     },
-    divider: {
-      backgroundColor: colors.light04,
-      width: '100%',
-      height: 1
+    subconceptBottomBorder: {
+      borderBottomColor: colors.light04,
+      borderBottomWidth: 1,
+      paddingBottom: 16
+    },
+    subconceptContent: {
+      flex: 1
+    },
+    subconceptTitleContainer: {
+      flex: 1,
+      marginRight: 8
+    },
+    subconceptTopBorder: {
+      borderTopColor: colors.light04,
+      borderTopWidth: 1
     }
   });

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

@@ -3,6 +3,7 @@ import { bool, object, string } from 'prop-types';
 import { Surface, UTIcon, UTLabel } from '@widergy/mobile-ui';
 import { capitalize } from 'lodash';
 import { View } from 'react-native';
+import numeral from 'numeral';
 
 import { getBillingsToShow, getMonthName, getDateRange } from './utils';
 import { DEFAULT_TAG_COLOR_THEME, DEFAULT_TAG_ICON, RIGHT_UNIT_ALIGNMENT, TAG_ICON_SIZE } from './constants';
@@ -19,7 +20,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 || {};
@@ -40,6 +41,7 @@ const Billing = ({
           const monthName = getMonthName(issuedOn);
           const consumptionValue = consumptions?.[0].value;
           const consumptionUnit = consumptions?.[0].unit;
+          const totalConsumptionFormatted = numeral(consumptionValue).format('0,0.[00]');
 
           return (
             <View key={issuedOn} style={[styles.billing, current ? styles.currentBilling : {}]}>
@@ -47,8 +49,8 @@ const Billing = ({
                 <View style={styles.consumption}>
                   <UTLabel variant="title3" weight="medium">
                     {unitAlignment === RIGHT_UNIT_ALIGNMENT
-                      ? consumptionValue
-                      : `${unit || consumptionUnit}${consumptionValue}`}
+                      ? totalConsumptionFormatted
+                      : `${unit || consumptionUnit}${totalConsumptionFormatted}`}
                   </UTLabel>
                   {unitAlignment === RIGHT_UNIT_ALIGNMENT && (
                     <UTLabel variant="subtitle1" weight="medium">

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

@@ -1,7 +1,9 @@
 import { VARIANT } from './constants';
 
 const getValue = (smartBill, magnitudeName) => {
-  const item = smartBill?.periods?.[0]?.consumptions?.find(c => c.magnitude === magnitudeName);
+  const item = smartBill?.periods
+    ?.find(period => period.current)
+    ?.consumptions?.find(c => c.magnitude === magnitudeName);
   return item ? { value: item.value || 0, unit: item.unit || '' } : { value: 0, unit: '' };
 };