@widergy/utilitygo-smart-bill-mobile 3.5.0 → 3.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.6.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.5.1...v3.6.0) (2025-12-19)
+
+
+### Features
+
+* [EVEP-272] alternative header ([#55](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/55)) ([9118a5b](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/9118a5bbc4f19ce0d3792917b3a29c9c25508e00))
+
+## [3.5.1](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.5.0...v3.5.1) (2025-12-10)
+
+
+### Bug Fixes
+
+* updates npm token ([4286fa0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/4286fa0d1ca078db19eea0589e7be615d01e79d6))
+
 # [3.5.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.4.0...v3.5.0) (2025-12-03)
 
 

package/package.json

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

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

@@ -12,6 +12,7 @@ import { getDefaultCurrentTab, getTabOptions } from './utils';
 import getStyles from './styles';
 import AIDrawer from './components/AIDrawer';
 import BillHeader from './tabs/Billing/components/BillHeader';
+import AlternativeHeader from './tabs/Billing/components/AlternativeHeader';
 
 const SmartBillSummary = ({
   assets,
@@ -227,6 +228,17 @@ const SmartBillSummary = ({
             smartBill={smartBill}
           />
         )}
+        {filteredTabOptions.find(tab => tab.value === currentTab)?.alternativeHeader && (
+          <AlternativeHeader
+            accountNumber={smartBill.client?.client_number}
+            accountNumberText={translations.billingTab.secondHeader?.accountNumber}
+            supplyAddress={smartBill.client?.account_address}
+            city={smartBill.client?.city}
+            district={smartBill.client?.district}
+            supplyAddressText={translations.billingTab.secondHeader?.supplyAddress}
+            clientNumberFormatter={utils?.formatters?.clientNumberFormatter}
+          />
+        )}
         {TAB_COMPONENT_MAPPER?.[currentTab]?.({
           assets,
           billingLayout,

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Surface, UTLabel } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+import { string, func } from 'prop-types';
+
+import styles from './styles';
+
+const AlternativeHeader = ({
+  accountNumberText,
+  accountNumber,
+  city,
+  clientNumberFormatter,
+  district,
+  supplyAddressText,
+  supplyAddress
+}) => (
+  <Surface elevation={1} style={styles.container}>
+    <View>
+      <UTLabel variant="small" weight="bold">
+        {(accountNumber && clientNumberFormatter?.(accountNumber)) || accountNumber}
+      </UTLabel>
+
+      <UTLabel colorTheme="gray" variant="small">
+        {accountNumberText}
+      </UTLabel>
+    </View>
+
+    <View>
+      <UTLabel variant="small" weight="bold">
+        {supplyAddress}
+      </UTLabel>
+      <UTLabel variant="small">{`${city} - ${district}`}</UTLabel>
+      <UTLabel colorTheme="gray" variant="small">
+        {supplyAddressText}
+      </UTLabel>
+    </View>
+  </Surface>
+);
+
+AlternativeHeader.propTypes = {
+  accountNumberText: string,
+  accountNumber: string,
+  city: string,
+  clientNumberFormatter: func,
+  district: string,
+  supplyAddressText: string,
+  supplyAddress: string
+};
+
+export default AlternativeHeader;

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    gap: 16,
+    padding: 16,
+    marginHorizontal: 16,
+    marginTop: 16
+  }
+});