@widergy/utilitygo-smart-bill-mobile 2.7.1 → 2.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.8.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.7.1...v2.8.0) (2025-09-04)
+
+
+### Features
+
+* [UGEE-418] import value instead of energy in billing ([#44](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/44)) ([8b84d58](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/8b84d580c6fec9263212a753696b71395852ab39))
+
 ## [2.7.1](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.7.0...v2.7.1) (2025-08-25)
 
 

package/package.json

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

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

@@ -1,3 +1,4 @@
 export const DEFAULT_TAG_ICON = 'IconCalendarEvent';
 export const TAG_ICON_SIZE = 14;
 export const DEFAULT_TAG_COLOR_THEME = 'gray';
+export const RIGHT_UNIT_ALIGNMENT = 'right';

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

@@ -1,15 +1,22 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
-import { object } from 'prop-types';
+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 { getBillingsToShow, getMonthName } from './utils';
-import { DEFAULT_TAG_COLOR_THEME, DEFAULT_TAG_ICON, TAG_ICON_SIZE } from './constants';
+import { DEFAULT_TAG_COLOR_THEME, DEFAULT_TAG_ICON, RIGHT_UNIT_ALIGNMENT, TAG_ICON_SIZE } from './constants';
 import { createStyles } from './styles';
 
-const Billing = ({ colors, smartBill, texts, withElevation = true }) => {
+const Billing = ({
+  colors,
+  smartBill,
+  texts,
+  withElevation = true,
+  unitAlignment = RIGHT_UNIT_ALIGNMENT,
+  unit
+}) => {
   const styles = createStyles(colors);
   const { title, tagLabel, clarification, periodDetail } = texts?.billing || {};
   const currentPeriod = smartBill?.periods.find(period => period.current);
@@ -32,11 +39,15 @@ const Billing = ({ colors, smartBill, texts, withElevation = true }) => {
               <View style={styles.consumptionDetail}>
                 <View style={styles.consumption}>
                   <UTLabel variant="title3" weight="medium">
-                    {consumptionValue}
-                  </UTLabel>
-                  <UTLabel variant="subtitle1" weight="medium">
-                    {consumptionUnit}
+                    {unitAlignment === RIGHT_UNIT_ALIGNMENT
+                      ? consumptionValue
+                      : `${unit || consumptionUnit}${consumptionValue}`}
                   </UTLabel>
+                  {unitAlignment === RIGHT_UNIT_ALIGNMENT && (
+                    <UTLabel variant="subtitle1" weight="medium">
+                      {unit || consumptionUnit}
+                    </UTLabel>
+                  )}
                 </View>
 
                 <View style={[styles.tag, current ? styles.billedTag : {}]}>
@@ -74,7 +85,10 @@ const Billing = ({ colors, smartBill, texts, withElevation = true }) => {
 Billing.propTypes = {
   colors: object,
   smartBill: object,
-  texts: object
+  texts: object,
+  withElevation: bool,
+  unitAlignment: string,
+  unit: string
 };
 
 export default Billing;