@widergy/utilitygo-smart-bill-mobile 3.1.1 → 3.1.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.1.2](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.1.1...v3.1.2) (2025-10-15)
+
+
+### Bug Fixes
+
+* [UGDESA-2724] smart bill visual fixes ([#47](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/47)) ([65d24b5](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/65d24b50e156e77da64a336c693de1ce4a216b10))
+
 ## [3.1.1](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.1.0...v3.1.1) (2025-10-06)
 
 

package/package.json

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

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

@@ -122,11 +122,12 @@ const SmartBillSummary = ({
         {filteredTabOptions.find(tab => tab.value === currentTab)?.header && (
           <BillHeader
             assets={assets}
+            billNumber={smartBill?.bill_number}
+            billType={smartBill?.bill_type}
             colors={colors}
-            header={translations?.billingTab.header}
             debtStatusLabel={smartBill?.debt_status_label}
+            header={translations?.billingTab.header}
             smartBill={smartBill}
-            billNumber={smartBill?.bill_number}
           />
         )}
         {TAB_COMPONENT_MAPPER?.[currentTab]?.({

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

@@ -0,0 +1,45 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { Surface, UTLabel } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+import { object, string } from 'prop-types';
+
+import { createStyles } from './styles';
+
+const AccountCard = ({ accountCard, colors, meterNumber, readingType }) => {
+  const styles = createStyles(colors);
+  const { title: accountCardTitle, meterNumberHelpText, readingTypeHelpText } = accountCard;
+
+  return (
+    <Surface elevation={1} style={styles.accountCard}>
+      <UTLabel variant="title3" weight="medium">
+        {accountCardTitle}
+      </UTLabel>
+
+      <View style={styles.container}>
+        {!!meterNumber && (
+          <View style={styles.content}>
+            <UTLabel weight="bold">{meterNumber}</UTLabel>
+            <UTLabel colorTheme="gray">{meterNumberHelpText}</UTLabel>
+          </View>
+        )}
+
+        {!!readingType && (
+          <View style={styles.content}>
+            <UTLabel weight="bold">{readingType}</UTLabel>
+            <UTLabel colorTheme="gray">{readingTypeHelpText}</UTLabel>
+          </View>
+        )}
+      </View>
+    </Surface>
+  );
+};
+
+AccountCard.propTypes = {
+  accountCard: object,
+  colors: object,
+  meterNumber: string,
+  readingType: string
+};
+
+export default AccountCard;

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

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    accountCard: {
+      backgroundColor: colors.light01,
+      borderRadius: 8,
+      padding: 16,
+      flexDirection: 'column',
+      gap: 24
+    },
+    container: {
+      flexDirection: 'row'
+    },
+    content: {
+      flex: 1,
+      flexDirection: 'column',
+      gap: 8,
+      paddingVertical: 12
+    }
+  });

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

@@ -6,34 +6,33 @@ import { arrayOf, object } from 'prop-types';
 
 import styles from './styles';
 
-const ActionCards = ({ actionCards }) => {
-  return (
-    <View style={styles.actionCardsContainer}>
-      {actionCards?.map(({ onPress, Icon = 'IconChevronRight', statusAttributes = {}, title }) => (
-        <UTActionCard
-          classNames={{ headerTitles: styles.headerAndChildrenContainer }}
-          disabled={!onPress}
-          headerActions={
-            onPress
-              ? [
-                  {
-                    colorTheme: 'accent',
-                    Icon,
-                    isPrimary: true
-                  }
-                ]
-              : []
-          }
-          key={title}
-          mainAction={onPress}
-          title={title}
-          titleProps={{ style: styles.titleActionCard }}
-          {...statusAttributes}
-        />
-      ))}
-    </View>
-  );
-};
+const ActionCards = ({ actionCards }) => (
+  <View style={styles.actionCardsContainer}>
+    {actionCards?.map(({ onPress, Icon = 'IconChevronRight', statusAttributes = {}, title, description }) => (
+      <UTActionCard
+        classNames={{ headerTitles: styles.headerAndChildrenContainer }}
+        disabled={!onPress}
+        headerActions={
+          onPress
+            ? [
+                {
+                  colorTheme: 'accent',
+                  Icon,
+                  isPrimary: true
+                }
+              ]
+            : []
+        }
+        key={title}
+        mainAction={onPress}
+        title={title}
+        description={description}
+        titleProps={{ style: styles.titleActionCard }}
+        {...statusAttributes}
+      />
+    ))}
+  </View>
+);
 
 ActionCards.propTypes = {
   actionCards: arrayOf(object),

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
-import { Surface, UTLabel } from '@widergy/mobile-ui';
+import { Surface, UTLabel, UTStatus } from '@widergy/mobile-ui';
 import { View, Image } from 'react-native';
 import { string, object } from 'prop-types';
 
@@ -9,7 +9,7 @@ import { getCurrentPeriod, getFormattedDate } from '../../utils';
 
 import { createStyles } from './styles';
 
-const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNumber }) => {
+const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNumber, billType }) => {
   const styles = createStyles(colors);
   const { UtilityLogo } = assets.billingTab;
 
@@ -22,7 +22,14 @@ const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNu
       {UtilityLogo && <Image resizeMode="contain" source={UtilityLogo} height={35} />}
       <View style={styles.billHeaderLabels}>
         <View style={styles.valueAndHelpText}>
-          <UTLabel variant="small">{billNumber}</UTLabel>
+          <View style={styles.billTypeAndNumber}>
+            {!!billType && (
+              <UTStatus variant="gray" withoutIcon labelProps={{ colorTheme: 'dark' }}>
+                {billType}
+              </UTStatus>
+            )}
+            <UTLabel variant="small">{billNumber}</UTLabel>
+          </View>
           <UTLabel colorTheme="gray" variant="small">
             {billTypeHelpText}
           </UTLabel>
@@ -45,11 +52,12 @@ const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNu
 
 BillHeader.propTypes = {
   assets: object,
+  billNumber: string,
+  billType: string,
   colors: object,
-  header: object,
   debtStatusLabel: string,
-  smartBill: object,
-  billNumber: string
+  header: object,
+  smartBill: object
 };
 
 export default BillHeader;

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

@@ -24,5 +24,10 @@ export const createStyles = colors =>
       padding: 16,
       marginHorizontal: 16,
       marginTop: 16
+    },
+    billTypeAndNumber: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: 4
     }
   });

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

@@ -2,10 +2,12 @@ import ActionCards from './components/ActionCards';
 import TotalCard from './components/TotalCard';
 import RateCard from './components/RateCard';
 import TitularCard from './components/TitularCard';
+import AccountCard from './components/AccountCard';
 
 export const COMPONENTS = {
+  AccountCard,
   ActionCards,
-  TotalCard,
   RateCard,
-  TitularCard
+  TitularCard,
+  TotalCard
 };

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

@@ -26,9 +26,12 @@ const Billing = ({
     client,
     debt_status_label: debtStatusLabel,
     detail,
-    expirations
+    expirations,
+    meter_number: meterNumber,
+    reading_periods: readingPeriods
   } = smartBill;
   const {
+    accountCard = {},
     adhered,
     automaticDebit = {},
     digitalBill = {},
@@ -58,13 +61,16 @@ const Billing = ({
   const { title: automaticDebitTitle } = automaticDebit;
   const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
   const isAdheredToAutomaticDebit = adherenceToAutomaticDebit === adherenceStatus?.subscribed;
+  const emailDigitalBill = client?.email_digital_bill;
+  const readingType = readingPeriods?.[0]?.type;
 
   const actionCards = [
     {
       isAdhered: isAdheredToDigitalBill,
       onPress: !isAdheredToDigitalBill && handleGoToDigitalBill,
       showStatus: true,
-      title: digitalBillTitle
+      title: digitalBillTitle,
+      description: emailDigitalBill
     },
     {
       isAdhered: isAdheredToAutomaticDebit,
@@ -94,6 +100,7 @@ const Billing = ({
     };
   });
   const props = {
+    accountCard,
     actionCards,
     assets,
     billNumber,
@@ -109,13 +116,15 @@ const Billing = ({
     formatAmount,
     handlers,
     header,
+    meterNumber,
     normalizedRate,
     rateCardTranslations,
     ratesTableLink,
-    titularCard,
+    readingType,
     smartBill,
     subsidy,
     subsidyLevels,
+    titularCard,
     totalAmountLabel,
     totalCard,
     trackRedirectionToExternalLink,