@widergy/utilitygo-smart-bill-mobile 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.2.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.1.0...v2.2.0) (2025-04-21)
+
+
+### Features
+
+* [CX-376] billing tab smartbill ([#31](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/31)) ([37bf8d3](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/37bf8d3dca5d23375e22e50997826b2f559a236e))
+
 # [2.1.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.0.0...v2.1.0) (2025-04-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-mobile",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "UtilityGO SmartBill Mobile",
   "license": "MIT",
   "main": "src/lib/index.js",
@@ -74,6 +74,7 @@
     "react-native-collapsible": "^1.6.1",
     "react-native-document-picker": "^9.0.1",
     "react-native-image-picker": "^5.0.0",
+    "react-native-linear-gradient": "^2.8.3",
     "@bam.tech/react-native-image-resizer": "^3.0.7",
     "react-native-svg": "^13.0.0",
     "react-native-vector-icons": "^10.0.0",

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

@@ -5,6 +5,7 @@ import { UTLabel } from '@widergy/mobile-ui';
 import { SMARTBILL_TABS } from '../../constants/tabs';
 
 import Consumptions from './tabs/Consumptions';
+import Billing from './tabs/Billing';
 
 export const BIMESTRAL_PERIODICITY = 'BIMESTRAL';
 
@@ -15,10 +16,7 @@ const renderComponentWithProps = (Component, tab) => props => (
 
 export const TAB_COMPONENT_MAPPER = {
   [SMARTBILL_TABS.CONSUMPTIONS]: renderComponentWithProps(Consumptions, SMARTBILL_TABS.CONSUMPTIONS),
-  [SMARTBILL_TABS.BILLING]: renderComponentWithProps(
-    () => <UTLabel>Facturación</UTLabel>,
-    SMARTBILL_TABS.BILLING
-  ),
+  [SMARTBILL_TABS.BILLING]: renderComponentWithProps(Billing, SMARTBILL_TABS.BILLING),
   [SMARTBILL_TABS.GLOSSARY]: renderComponentWithProps(
     () => <UTLabel>Glosario</UTLabel>,
     SMARTBILL_TABS.GLOSSARY

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

@@ -2,13 +2,23 @@
 import React, { useEffect, useState } from 'react';
 import { UTLoading, UTTabs } from '@widergy/mobile-ui';
 import { View } from 'react-native';
-import { arrayOf, bool, object, shape, string } from 'prop-types';
+import { arrayOf, bool, func, object, shape, string } from 'prop-types';
 
 import { TAB_COMPONENT_MAPPER } from './constants';
 import { getDefaultCurrentTab, getTabOptions } from './utils';
 import styles from './styles';
 
-const SmartBillSummary = ({ assets, colors, loading, smartBill, tabOptions, translations }) => {
+const SmartBillSummary = ({
+  assets,
+  colors,
+  constants,
+  handlers,
+  loading,
+  smartBill,
+  tabOptions,
+  translations,
+  utils
+}) => {
   const filteredTabOptions = getTabOptions(tabOptions, smartBill) || [];
   const defaultCurrentTab = getDefaultCurrentTab(filteredTabOptions);
   const [currentTab, setCurrentTab] = useState(defaultCurrentTab);
@@ -31,10 +41,13 @@ const SmartBillSummary = ({ assets, colors, loading, smartBill, tabOptions, tran
         {TAB_COMPONENT_MAPPER?.[currentTab]?.({
           assets,
           colors,
+          constants,
+          handlers,
           loading,
           smartBill,
           tabOptions,
-          translations
+          translations,
+          utils
         })}
       </View>
     </UTLoading>
@@ -44,6 +57,8 @@ const SmartBillSummary = ({ assets, colors, loading, smartBill, tabOptions, tran
 SmartBillSummary.propTypes = {
   assets: object,
   colors: object,
+  constants: object,
+  handlers: shape({ [string]: func }),
   loading: bool,
   smartBill: object,
   tabOptions: arrayOf(
@@ -55,7 +70,8 @@ SmartBillSummary.propTypes = {
       value: string
     })
   ),
-  translations: object
+  translations: object,
+  utils: object
 };
 
 export default SmartBillSummary;

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

@@ -0,0 +1,3 @@
+export const DEFAULT_WARNING_ICON = 'IconAlertTriangle';
+export const DEFAULT_SUCCESS_ICON = 'IconCheck';
+export const DEFAULT_ICON_SIZE = 16;

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

@@ -0,0 +1,33 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { UTIcon, UTLabel } from '@widergy/mobile-ui';
+import { bool, object, string } from 'prop-types';
+import { View } from 'react-native';
+
+import { DEFAULT_ICON_SIZE, DEFAULT_SUCCESS_ICON, DEFAULT_WARNING_ICON } from './constants';
+import { createStyles } from './styles';
+
+const DebtStatusLabel = ({ colors, debtStatusLabel, isWarning }) => {
+  const styles = createStyles(colors);
+
+  return (
+    <View style={[styles.container, isWarning ? styles.withDebtsContainer : styles.adheredToAutomaticDebit]}>
+      <UTIcon
+        colorTheme={isWarning ? 'warning' : 'success'}
+        name={isWarning ? DEFAULT_WARNING_ICON : DEFAULT_SUCCESS_ICON}
+        size={DEFAULT_ICON_SIZE}
+      />
+      <UTLabel colorTheme={isWarning ? 'warning' : 'success'} variant="small" weight="medium">
+        {debtStatusLabel}
+      </UTLabel>
+    </View>
+  );
+};
+
+DebtStatusLabel.propTypes = {
+  colors: object,
+  debtStatusLabel: string,
+  isWarning: bool
+};
+
+export default DebtStatusLabel;

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

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      borderRadius: 4,
+      flexDirection: 'row',
+      gap: 8,
+      justifyContent: 'space-between',
+      paddingHorizontal: 8,
+      paddingVertical: 4
+    },
+    withDebtsContainer: {
+      backgroundColor: colors.semanticWarning01
+    },
+    adheredToAutomaticDebit: {
+      backgroundColor: colors.semanticSuccess01
+    }
+  });

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

@@ -0,0 +1,57 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { View } from 'react-native';
+import { bool, number, object } from 'prop-types';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { createStyles } from './styles';
+
+const LinearProgress = ({
+  colors,
+  consumptionPercentage = 0,
+  contrastValue = null,
+  currentValue = 0,
+  hiredValue = 0,
+  isOverLimit = false
+}) => {
+  const styles = createStyles(colors);
+  const shouldShowGradient = isOverLimit || (currentValue > hiredValue && !contrastValue);
+
+  const backgroundStyle = [styles.backgroundBar, shouldShowGradient && styles.overHiredBackgroundBar];
+
+  const foregroundStyle = [
+    styles.foregroundBar,
+    shouldShowGradient && styles.overHiredForegroundBar,
+    { width: `${consumptionPercentage}%` }
+  ];
+
+  if (!consumptionPercentage) {
+    return null;
+  }
+
+  return (
+    <View style={backgroundStyle}>
+      {shouldShowGradient ? (
+        <LinearGradient
+          colors={[colors.chartGradient1start, colors.chartGradient1end]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={foregroundStyle}
+        />
+      ) : (
+        <View style={foregroundStyle} />
+      )}
+    </View>
+  );
+};
+
+LinearProgress.propTypes = {
+  colors: object,
+  consumptionPercentage: number,
+  contrastValue: number,
+  currentValue: number,
+  hiredValue: number,
+  isOverLimit: bool
+};
+
+export default LinearProgress;

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

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    backgroundBar: {
+      height: 9,
+      borderRadius: 100,
+      backgroundColor: colors.light02,
+      overflow: 'hidden'
+    },
+    foregroundBar: {
+      height: '100%',
+      borderRadius: 100,
+      backgroundColor: colors.chartSolidVariant10
+    },
+    overHiredBackgroundBar: {
+      backgroundColor: colors.chartSolidVariant7
+    },
+    overHiredForegroundBar: {
+      backgroundColor: 'transparent'
+    }
+  });

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

@@ -0,0 +1,3 @@
+export const MIN_VALUE_PROGRESS = 0;
+export const MAX_VALUE_PROGRESS = 100;
+export const DEFAULT_GRADIENT_COLORS = ['#30e3a2', '#efc73c', '#ec574d'];

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

@@ -0,0 +1,163 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react';
+import { arrayOf, bool, number, object, oneOfType, shape, string } from 'prop-types';
+import { UTIcon, UTLabel, UTTooltip } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { formatLabels, getConsumptionPercentage, getDynamicPosition, getProgressOverlayValue } from './utils';
+import LinearProgress from './components/LinearProgress';
+import { DEFAULT_GRADIENT_COLORS, MAX_VALUE_PROGRESS } from './constants';
+import { createStyles } from './styles';
+
+const ProgressBar = ({
+  colors,
+  currentPeriod,
+  data,
+  isT1,
+  limitValue,
+  specificRate,
+  tooltipContent,
+  translations,
+  value
+}) => {
+  const styles = createStyles(colors);
+  const lastRange = data[data.length - 1]?.range[1];
+  const totalRange = lastRange === 'Infinity' ? (data[data.length - 2]?.range[1] ?? 0) * 1.5 : lastRange;
+  const progressOverlayValue = getProgressOverlayValue(specificRate, totalRange, value);
+
+  const isOverLimit = value > limitValue;
+  const { initialLabel, dynamicLabel, finalLabel, currentValueLabel, contrastValueLabel } =
+    formatLabels({
+      currentPeriod,
+      isOverLimit,
+      limitValue,
+      translations,
+      value
+    }) || {};
+  const consumptionPercentage =
+    getConsumptionPercentage(value, limitValue, isOverLimit) || MAX_VALUE_PROGRESS;
+  const shouldRenderDynamicLabel = value > 0 && limitValue > 0;
+
+  const [barWidth, setBarWidth] = useState(0);
+
+  const handleLayout = event => {
+    setBarWidth(event.nativeEvent.layout.width);
+  };
+
+  return isT1 ? (
+    <View style={styles.progressBar} onLayout={handleLayout}>
+      <LinearGradient
+        colors={DEFAULT_GRADIENT_COLORS}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        style={styles.progressBackground}>
+        {data.map(({ range, name }) => {
+          const isLast = range[1] === 'Infinity';
+          const width = isLast ? '20%' : `${(range[1] / totalRange) * 100}%`;
+
+          return (
+            <View
+              key={name}
+              style={[
+                styles.progressSegment,
+                {
+                  width,
+                  flexGrow: isLast ? 1 : 0
+                }
+              ]}>
+              <UTLabel style={styles.segmentName} colorTheme="gray" variant="xsmall">
+                {name}
+              </UTLabel>
+            </View>
+          );
+        })}
+      </LinearGradient>
+
+      <View
+        style={[
+          styles.progressOverlay,
+          {
+            left: (progressOverlayValue / 100) * barWidth,
+            width: barWidth - ((progressOverlayValue - 0.5) / 100) * barWidth
+          }
+        ]}
+      />
+    </View>
+  ) : (
+    <View>
+      <View style={[styles.powerAndDatesContainer, isOverLimit && styles.overHiredContainer]}>
+        <View style={styles.consumptionDetailsContainer}>
+          <View style={styles.consumptionComparison}>
+            {value >= 0 && <UTLabel variant="subtitle1">{currentValueLabel}</UTLabel>}
+
+            {value >= 0 && limitValue > 0 && (
+              <UTLabel colorTheme="gray" variant="small">
+                {contrastValueLabel}
+              </UTLabel>
+            )}
+          </View>
+
+          {tooltipContent && (
+            <UTTooltip content={tooltipContent}>
+              <View>
+                <UTIcon colorTheme="neutral" name="EnergyIconQuestionFilled" size={20} />
+              </View>
+            </UTTooltip>
+          )}
+        </View>
+      </View>
+
+      <View style={styles.progressContainer} onLayout={handleLayout}>
+        <LinearProgress
+          colors={colors}
+          consumptionPercentage={consumptionPercentage}
+          contrastValue={limitValue}
+          currentValue={value}
+          hiredValue={limitValue}
+          isOverLimit={isOverLimit}
+        />
+
+        <View style={styles.progressLabels}>
+          <UTLabel colorTheme="gray" variant="xsmall">
+            {initialLabel}
+          </UTLabel>
+
+          {shouldRenderDynamicLabel && (
+            <View
+              style={[styles.dinamicLabel, { left: getDynamicPosition(consumptionPercentage, barWidth) }]}>
+              <UTLabel colorTheme="gray" variant="xsmall">
+                {dynamicLabel}
+              </UTLabel>
+            </View>
+          )}
+
+          <UTLabel colorTheme="gray" variant="xsmall">
+            {finalLabel}
+          </UTLabel>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+ProgressBar.propTypes = {
+  colors: object,
+  currentPeriod: object,
+  data: arrayOf(
+    shape({
+      name: string,
+      color: string,
+      range: arrayOf(oneOfType([number, string]))
+    })
+  ),
+  isT1: bool,
+  limitValue: number,
+  specificRate: string,
+  tooltipContent: string,
+  translations: object,
+  value: number
+};
+
+export default ProgressBar;

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

@@ -0,0 +1,75 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    progressBar: {
+      height: 9,
+      marginHorizontal: 24,
+      position: 'relative'
+    },
+    progressBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '100%',
+      flexDirection: 'row',
+      borderRadius: 100
+    },
+    progressSegment: {
+      height: '100%',
+      position: 'relative',
+      borderRightColor: colors.light01,
+      borderRightWidth: 2
+    },
+    segmentName: {
+      position: 'absolute',
+      top: 18
+    },
+    progressOverlay: {
+      backgroundColor: colors.light04,
+      borderBottomEndRadius: 100,
+      borderTopEndRadius: 100,
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      zIndex: 3
+    },
+    powerAndDatesContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginHorizontal: 24,
+      position: 'relative'
+    },
+    overHiredContainer: {
+      flexDirection: 'row-reverse',
+      marginBottom: 8
+    },
+    consumptionDetailsContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 4
+    },
+    consumptionComparison: {
+      flexDirection: 'row',
+      gap: 4,
+      marginBottom: 8
+    },
+    progressContainer: {
+      marginHorizontal: 24,
+      position: 'relative'
+    },
+    progressLabels: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: 8,
+      marginBottom: -24,
+      position: 'relative'
+    },
+    dinamicLabel: {
+      position: 'absolute',
+      top: 0,
+      transform: [{ translateX: -0.5 }]
+    }
+  });

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

@@ -0,0 +1,89 @@
+import dayjs from 'dayjs';
+import numeral from 'numeral';
+import isBetween from 'dayjs/plugin/isBetween';
+
+import { MIN_VALUE_PROGRESS } from './constants';
+
+export const getConsumptionPercentage = (currentValue, contrastValue, isOverLimit) =>
+  (currentValue > contrastValue
+    ? isOverLimit
+      ? contrastValue / currentValue
+      : 1
+    : currentValue / contrastValue) * 100;
+
+export const formatMaxPowerRegisteredDate = maxConsumptionDay =>
+  dayjs(maxConsumptionDay).tz().format('D MMM');
+
+export const getDynamicPosition = (percentage, barWidth, labelWidth = 60) => {
+  const min = 16;
+  const max = barWidth - labelWidth - 28;
+  const calculated = (percentage / 100) * barWidth - 10;
+  return Math.min(Math.max(min, calculated), max);
+};
+
+dayjs.extend(isBetween);
+
+export const formatLabels = ({ currentPeriod, isOverLimit, limitValue, translations = {}, value }) => {
+  const currentValueFormatted = numeral(value).format('0,0.[00]');
+  const contrastValueFormatted = numeral(limitValue).format('0,0.[00]') || 0;
+  const maxConsumptionDay = dayjs(`${currentPeriod?.year}-${currentPeriod?.number}-01`);
+  const { currentValueWithUnitLabel, maxValueWithUnitLabel } = translations;
+
+  return {
+    initialLabel: MIN_VALUE_PROGRESS.toString(),
+    dynamicLabel: isOverLimit ? contrastValueFormatted : currentValueFormatted,
+    finalLabel: isOverLimit || !limitValue ? currentValueFormatted : contrastValueFormatted,
+    currentValueLabel: currentValueWithUnitLabel?.({
+      value: currentValueFormatted,
+      day: formatMaxPowerRegisteredDate(maxConsumptionDay)
+    }),
+    contrastValueLabel: maxValueWithUnitLabel?.({
+      detailLabel: 'contratada',
+      value: contrastValueFormatted
+    })
+  };
+};
+
+export const getProgressBarClasses = ({
+  consumptionPercentage,
+  contrastValue,
+  currentValue,
+  hiredValue,
+  isOverLimit,
+  styles
+}) => ({
+  root: `${isOverLimit && styles.overHiredBackgroundBar} ${styles.backgroundBar}`,
+  bar: `
+    ${!isOverLimit ? styles.foregroundBar : styles.overHiredForegroundBar}
+    ${currentValue > hiredValue && !contrastValue && styles.overHiredBackgroundBar}
+    ${!consumptionPercentage && styles.hidden}
+  `
+});
+
+export const getProgressOverlayValue = (rate, totalRange, value) => {
+  const rateName = rate?.name;
+  const defaultProgress = (value / totalRange) * 100;
+
+  switch (rateName) {
+    case 'R1':
+      return defaultProgress * 0.4;
+
+    case 'R2':
+      return defaultProgress * 0.55;
+
+    case 'R3':
+      return defaultProgress * 0.85;
+
+    case 'R4':
+      return defaultProgress * 1.13;
+
+    case 'R5':
+      return defaultProgress * 1.368;
+
+    case 'R6':
+      return defaultProgress * 1.37;
+
+    default:
+      return defaultProgress;
+  }
+};

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

@@ -0,0 +1,163 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { Linking, View } from 'react-native';
+import { Surface, UTButton, UTLabel } from '@widergy/mobile-ui';
+import { object, string, func, objectOf, array } from 'prop-types';
+
+import {
+  getConsumptionLabels,
+  getConsumptionPeriodsToCompare
+} from '../../../Consumptions/components/CurrentConsumption/utils';
+
+import ProgressBar from './components/ProgressBar';
+import { getCurrentRate } from './utils';
+import { createStyles } from './styles';
+
+const RateCard = ({
+  colors,
+  consumptionLevels,
+  currentPeriod,
+  formatAmount,
+  normalizedRate = '',
+  rateCardTranslations = {},
+  ratesTableLink,
+  smartBill = {},
+  subsidy = '',
+  subsidyLevels
+}) => {
+  const styles = createStyles(colors);
+  const {
+    helpText,
+    limitRateValueLabel,
+    seeRatesTable,
+    startRateValueLabel,
+    title,
+    tooltipContent,
+    unit,
+    yourConsumption,
+    yourRate
+  } = rateCardTranslations;
+  const { client, detail, periods } = smartBill;
+  const purchasedRate = client?.rate?.purchased || '';
+  const periodsToCompare = getConsumptionPeriodsToCompare(periods);
+  const { totalConsumption } = getConsumptionLabels(periodsToCompare) || {};
+  const { levels = [] } =
+    consumptionLevels.find(({ rate }) => rate === normalizedRate) || consumptionLevels[0] || {};
+  const { rates = [] } =
+    levels.find(({ name }) => name && name === subsidyLevels[subsidy]) || levels[0] || {};
+  const currentIndex = rates.findIndex(({ range }) => range[1] >= totalConsumption);
+  const currentRate = rates[currentIndex] ?? {};
+  const startRateValue = Array.isArray(currentRate?.range) && currentRate.range[0];
+  const limitRateValue =
+    Array.isArray(currentRate?.range) &&
+    currentRate.range.length > 0 &&
+    currentRate.range[currentRate.range.length - 1];
+  const concepts = detail?.concepts?.[0]?.lines;
+  const fixedCharges = concepts?.[0];
+  const variableCharges = concepts?.[1];
+  const { title: fixedChargeTitle, amount: fixedChargeValue } = fixedCharges || {};
+  const { title: variableChargeTitle, amount: variableChargeValue } = variableCharges || {};
+  const isT1 = purchasedRate.includes('T1');
+
+  const openExternalLink = () => ratesTableLink && Linking.openURL(ratesTableLink);
+
+  return (
+    <Surface elevation={1} style={styles.container}>
+      <View style={styles.headerTitles}>
+        <UTLabel variant="title2" weight="medium">
+          {title}
+        </UTLabel>
+        <UTLabel colorTheme="gray">{helpText}</UTLabel>
+      </View>
+
+      <ProgressBar
+        colors={colors}
+        currentPeriod={currentPeriod}
+        data={rates}
+        isT1={isT1}
+        limitValue={limitRateValue}
+        specificRate={currentRate}
+        tooltipContent={tooltipContent}
+        translations={rateCardTranslations}
+        value={Number(totalConsumption) || 0}
+      />
+
+      <View style={styles.consumptionDataContainer}>
+        <View style={styles.consumptionContent}>
+          <UTLabel variant="title3" weight="medium">
+            {getCurrentRate(purchasedRate, currentRate)}
+          </UTLabel>
+          <UTLabel colorTheme="gray" variant="small">
+            {!isT1
+              ? yourRate
+              : limitRateValue === 'Infinity'
+                ? startRateValueLabel?.(startRateValue)
+                : limitRateValueLabel?.(limitRateValue)}
+          </UTLabel>
+        </View>
+
+        <View style={styles.consumptionContent}>
+          <UTLabel variant="title3" weight="medium">
+            {totalConsumption} {unit}
+          </UTLabel>
+          <UTLabel colorTheme="gray" variant="small">
+            {yourConsumption}
+          </UTLabel>
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <View style={styles.detail}>
+          <UTLabel style={styles.detailTitle} weight="medium">
+            {fixedChargeTitle}
+          </UTLabel>
+          <UTLabel variant="subtitle1" weight="medium">
+            {formatAmount?.(fixedChargeValue)}
+          </UTLabel>
+        </View>
+
+        <View style={styles.detail}>
+          <UTLabel style={styles.detailTitle} weight="medium">
+            {variableChargeTitle}
+          </UTLabel>
+          <UTLabel variant="subtitle1" weight="medium">
+            {formatAmount?.(variableChargeValue)}
+          </UTLabel>
+        </View>
+
+        <View style={styles.footerAction}>
+          <UTButton
+            colorTheme="secondary"
+            Icon="IconChevronRight"
+            iconPlacement="right"
+            onPress={openExternalLink}
+            style={{
+              root: styles.footerActionRoot,
+              childrenContainer: styles.footerActionChildren,
+              icon: styles.icon
+            }}
+            variant="text">
+            <UTLabel colorTheme="neutral" weight="medium">
+              {seeRatesTable}
+            </UTLabel>
+          </UTButton>
+        </View>
+      </View>
+    </Surface>
+  );
+};
+
+RateCard.propTypes = {
+  colors: object,
+  consumptionLevels: array,
+  currentPeriod: object,
+  formatAmount: func,
+  normalizedRate: string,
+  rateCardTranslations: object,
+  ratesTableLink: string,
+  smartBill: object,
+  subsidy: string,
+  subsidyLevels: objectOf(string)
+};
+
+export default RateCard;

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

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: colors.light01,
+      borderRadius: 8,
+      flexDirection: 'column',
+      gap: 24
+    },
+    headerTitles: {
+      flexDirection: 'column',
+      gap: 8,
+      paddingTop: 24,
+      paddingHorizontal: 24
+    },
+    consumptionDataContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 24,
+      paddingTop: 24,
+      paddingHorizontal: 24
+    },
+    consumptionContent: {
+      flex: 1
+    },
+    footer: {
+      width: '100%'
+    },
+    footerAction: {
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      borderTopWidth: 1,
+      borderTopColor: colors.light04,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 8
+    },
+    detail: {
+      alignItems: 'center',
+      borderTopWidth: 1,
+      borderTopColor: colors.light04,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 16,
+      padding: 16
+    },
+    detailTitle: {
+      flex: 1
+    },
+    footerActionRoot: {
+      padding: 0,
+      margin: 0,
+      width: '100%'
+    },
+    footerActionChildren: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 8
+    }
+  });

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

@@ -0,0 +1,5 @@
+export const getCurrentRate = (baseRate = '', specificRate = '') => {
+  const isT1 = baseRate.includes('T1');
+  const baseRateParts = baseRate.split('-');
+  return isT1 ? `${baseRateParts[0]}-${specificRate?.name || baseRateParts[1]}` : baseRate;
+};

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

@@ -0,0 +1,271 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useEffect } from 'react';
+import { Image, ScrollView, View } from 'react-native';
+import { Surface, UTActionCard, UTLabel } from '@widergy/mobile-ui';
+import { func, object, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+
+import { getCurrentPeriod, getFormattedDate } from './utils';
+import { createStyles } from './styles';
+import DebtStatusLabel from './components/DebtStatusLabel';
+import RateCard from './components/RateCard';
+
+const Billing = ({
+  assets,
+  colors,
+  constants,
+  currentAccount = {},
+  handlers = {},
+  smartBill = {},
+  translations,
+  utils = {}
+}) => {
+  const styles = createStyles(colors);
+  const { UtilityLogo } = assets;
+  const { adherenceStatus, consumptionLevels = [], subsidyLevels } = constants;
+  const { formatters = {} } = utils;
+  const { clientNumberFormatter, formatAmount } = formatters;
+  const {
+    bill_number: billNumber,
+    client,
+    debt_status_label: debtStatusLabel,
+    detail,
+    expirations
+  } = smartBill;
+  const {
+    account_address: accountAddress,
+    client_number: clientNumber = '',
+    holder_name: titularName,
+    postal_address: postalAddress,
+    iva_condition: ivaCondition
+  } = client || {};
+  const {
+    adhered,
+    automaticDebit = {},
+    digitalBill = {},
+    downloadBill = {},
+    header = {},
+    notAdhered,
+    rateCard: rateCardTranslations,
+    ratesTableLink,
+    titularCard = {},
+    totalAmountLabel,
+    totalCard = {}
+  } = translations;
+  const {
+    title: titularCardTitle,
+    addressHelpText,
+    titularHelpText,
+    clientNumberHelpText,
+    ivaConditionHelpText
+  } = titularCard;
+  const { firstExpiration } = totalCard;
+  const { billIssueDate, billTypeHelpText } = header;
+  const currentPeriod = getCurrentPeriod(smartBill);
+  const issuedOnDate = getFormattedDate(currentPeriod?.settlements?.current?.issued_on);
+  const debtStatusValidation = debtStatusLabel !== null;
+  const firstExpirationDate = getFormattedDate(expirations?.[0]?.date);
+  const { total_amount: totalAmount } = detail || {};
+  const {
+    handleAutomaticDebitAdherence = () => {},
+    handleDownloadBill = () => {},
+    handleGoToDigitalBill = () => {},
+    getConsumptionLevels = () => {}
+  } = handlers;
+  const {
+    adherence_to_automatic_debit: adherenceToAutomaticDebit,
+    normalized_rate: normalizedRate,
+    subsidy_level: subsidy
+  } = currentAccount;
+  const { title: digitalBillTitle } = digitalBill;
+  const { title: downloadBillTitle } = downloadBill;
+  const { title: automaticDebitTitle } = automaticDebit;
+  const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
+  const isAdheredToAutomaticDebit = adherenceToAutomaticDebit === adherenceStatus?.subscribed;
+
+  const actionCards = [
+    {
+      isAdhered: isAdheredToDigitalBill,
+      onPress: !isAdheredToDigitalBill && handleGoToDigitalBill,
+      showStatus: true,
+      title: digitalBillTitle
+    },
+    {
+      isAdhered: isAdheredToAutomaticDebit,
+      onPress: !isAdheredToAutomaticDebit && handleAutomaticDebitAdherence,
+      showStatus: true,
+      title: automaticDebitTitle
+    },
+    {
+      onPress: handleDownloadBill,
+      Icon: 'IconDownload',
+      title: downloadBillTitle
+    }
+  ].map(card => {
+    if (!card.showStatus) return card;
+    const { isAdhered } = card || {};
+    return {
+      ...card,
+      statusAttributes: {
+        status: isAdhered ? 'active' : 'pending',
+        statusLabel: isAdhered ? adhered : notAdhered,
+        statusAlignment: 'center',
+        statusProps: {
+          backgroundColor: isAdhered ? colors.semanticSuccess01 : colors.light04,
+          colorTheme: isAdhered ? 'success' : 'gray'
+        }
+      }
+    };
+  });
+
+  useEffect(() => {
+    if (isEmpty(consumptionLevels)) getConsumptionLevels();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <ScrollView>
+      <View style={styles.generalContainer}>
+        <Surface elevation={1} style={styles.billHeader}>
+          {UtilityLogo && <Image resizeMode="contain" source={UtilityLogo} height={35} />}
+          <View style={styles.billHeaderLabels}>
+            <View style={styles.valueAndHelpText}>
+              <UTLabel variant="small">{billNumber}</UTLabel>
+              <UTLabel colorTheme="gray" variant="small">
+                {billTypeHelpText}
+              </UTLabel>
+            </View>
+
+            <View style={styles.valueAndHelpText}>
+              <UTLabel variant="small">{issuedOnDate}</UTLabel>
+              <UTLabel colorTheme="gray" variant="small">
+                {billIssueDate}
+              </UTLabel>
+            </View>
+
+            {debtStatusValidation && (
+              <DebtStatusLabel
+                colors={colors}
+                debtStatusLabel={debtStatusLabel}
+                isWarning={smartBill?.warning}
+              />
+            )}
+          </View>
+        </Surface>
+
+        <Surface elevation={1} style={styles.totalCard}>
+          <View style={styles.total}>
+            <UTLabel variant="subtitle1" weight="medium">
+              {totalAmountLabel}
+            </UTLabel>
+            <UTLabel colorTheme="accent" variant="title2" weight="medium">
+              {formatAmount?.(totalAmount, true)}
+            </UTLabel>
+          </View>
+
+          <UTLabel colorTheme="gray" variant="small" weight="medium">
+            {firstExpiration?.(firstExpirationDate)}
+          </UTLabel>
+        </Surface>
+
+        {!isEmpty(consumptionLevels) && (
+          <RateCard
+            {...{
+              colors,
+              consumptionLevels,
+              currentPeriod,
+              formatAmount,
+              normalizedRate,
+              rateCardTranslations,
+              ratesTableLink,
+              smartBill,
+              subsidy,
+              subsidyLevels,
+              translations
+            }}
+          />
+        )}
+
+        {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}
+          />
+        ))}
+
+        <Surface elevation={1} style={styles.titularCard}>
+          <UTLabel variant="title3" weight="medium">
+            {titularCardTitle}
+          </UTLabel>
+
+          <View style={styles.titularDataContainer}>
+            <View style={styles.titularData}>
+              <UTLabel style={styles.titularDataTitle} weight="bold">
+                {accountAddress}
+              </UTLabel>
+
+              {accountAddress !== postalAddress && <UTLabel>{postalAddress}</UTLabel>}
+
+              <UTLabel colorTheme="gray">{addressHelpText}</UTLabel>
+            </View>
+
+            <View style={styles.titularData}>
+              <UTLabel style={styles.titularDataTitle} weight="bold">
+                {titularName}
+              </UTLabel>
+
+              <UTLabel colorTheme="gray">{titularHelpText}</UTLabel>
+            </View>
+
+            <View style={styles.titularFooter}>
+              <View style={styles.titularData}>
+                <UTLabel style={styles.titularDataTitle} weight="bold">
+                  {clientNumberFormatter?.(clientNumber)}
+                </UTLabel>
+
+                <UTLabel colorTheme="gray">{clientNumberHelpText}</UTLabel>
+              </View>
+
+              <View style={styles.titularData}>
+                <UTLabel style={styles.titularDataTitle} weight="bold">
+                  {ivaCondition}
+                </UTLabel>
+
+                <UTLabel colorTheme="gray">{ivaConditionHelpText}</UTLabel>
+              </View>
+            </View>
+          </View>
+        </Surface>
+      </View>
+    </ScrollView>
+  );
+};
+
+Billing.propTypes = {
+  assets: object,
+  colors: object,
+  constants: object,
+  currentAccount: object,
+  handlers: shape({ [string]: func }),
+  smartBill: object,
+  translations: object,
+  utils: object
+};
+
+export default Billing;

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

@@ -0,0 +1,73 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    generalContainer: {
+      flexDirection: 'column',
+      gap: 32,
+      paddingVertical: 24,
+      paddingHorizontal: 16,
+      marginBottom: 48
+    },
+    billHeader: {
+      backgroundColor: colors.light01,
+      borderRadius: 8,
+      flexDirection: 'column',
+      gap: 12,
+      justifyContent: 'space-between',
+      padding: 16
+    },
+    billHeaderLabels: {
+      alignItems: 'center',
+      columnGap: 32,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingTop: 16,
+      rowGap: 16,
+      flexWrap: 'wrap'
+    },
+    valueAndHelpText: {
+      flexDirection: 'column',
+      gap: 4
+    },
+    totalCard: {
+      backgroundColor: colors.light01,
+      borderRadius: 4,
+      flexDirection: 'column',
+      padding: 16,
+      gap: 24
+    },
+    total: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 8
+    },
+    titularCard: {
+      backgroundColor: colors.light01,
+      borderRadius: 8,
+      padding: 24,
+      flexDirection: 'column',
+      gap: 24
+    },
+    titularDataContainer: {
+      flexDirection: 'column'
+    },
+    titularData: {
+      flex: 1,
+      flexDirection: 'column',
+      gap: 8,
+      paddingVertical: 12
+    },
+    titularDataTitle: {
+      paddingVertical: 4
+    },
+    titularFooter: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 16
+    },
+    titleActionCard: {
+      marginBottom: 'auto',
+      marginTop: 'auto'
+    }
+  });

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

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs';
+import { getIn } from 'seamless-immutable';
+
+export const getCurrentPeriod = billData =>
+  getIn(billData, ['periods'], []).find(period => period.current) || {};
+
+export const getFormattedDate = date => dayjs(date, 'YYYY-MM-DD').format('DD/MM/YYYY');

package/src/lib/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/utils.js

@@ -8,7 +8,7 @@ import { MAX_HEIGHT, MIN_HEIGHT, SCALE_FACTOR } from './constants';
 dayjs.locale('es');
 
 export const getMaxValue = consumptionData =>
-  Math.max(...consumptionData.map(d => d.consumptions?.[0]?.value || 0));
+  Math.max(...consumptionData.map(d => d?.consumptions?.[0]?.value || 0));
 
 export const getBarHeight = (maxValue, value) => {
   const adjustedValue = value ** SCALE_FACTOR;

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

@@ -14,7 +14,7 @@ export const getConsumptionPeriodsToCompare = (periods = []) => {
         parseInt(period.year, 10) === parseInt(currentPeriod.year, 10) - 1
     );
 
-    return [currentPeriod, previousYearPeriod];
+    return [currentPeriod, previousYearPeriod].filter(Boolean);
   }
   return [];
 };