@widergy/utilitygo-smart-bill-mobile 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.1.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v3.0.0...v3.1.0) (2025-09-23)
+
+
+### Features
+
+* [EVEP-34] billing new structure ([#46](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/46)) ([a4788b6](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/a4788b6b4d77d83b375028734d3550820a32f8b4))
+
 # [3.0.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v2.8.0...v3.0.0) (2025-09-22)
 
 

package/package.json

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

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

@@ -2,8 +2,8 @@
 /* eslint-disable react/jsx-fragments */
 import React, { Fragment, useEffect, useState, useMemo } from 'react';
 import { UTButton, UTLoading, UTTabs } from '@widergy/mobile-ui';
-import { View } from 'react-native';
-import { arrayOf, bool, func, object, shape, string } from 'prop-types';
+import { ScrollView } from 'react-native';
+import { array, arrayOf, bool, func, object, shape, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import debounce from 'lodash/debounce';
 
@@ -11,9 +11,11 @@ import { TAB_COMPONENT_MAPPER } from './constants';
 import { getDefaultCurrentTab, getTabOptions } from './utils';
 import styles from './styles';
 import AIDrawer from './components/AIDrawer';
+import BillHeader from './tabs/Billing/components/BillHeader';
 
 const SmartBillSummary = ({
   assets,
+  billingLayout,
   colors,
   components,
   constants = {},
@@ -114,10 +116,20 @@ const SmartBillSummary = ({
         tabs={filteredTabOptions}
         value={currentTab}
       />
-
-      <View>
+      <ScrollView>
+        {filteredTabOptions.find(tab => tab.value === currentTab)?.header && (
+          <BillHeader
+            assets={assets}
+            colors={colors}
+            header={translations?.billingTab.header}
+            debtStatusLabel={smartBill?.debt_status_label}
+            smartBill={smartBill}
+            billNumber={smartBill?.bill_number}
+          />
+        )}
         {TAB_COMPONENT_MAPPER?.[currentTab]?.({
           assets,
+          billingLayout,
           colors,
           constants,
           handlers,
@@ -127,7 +139,7 @@ const SmartBillSummary = ({
           translations,
           utils
         })}
-      </View>
+      </ScrollView>
 
       {aiQuestionsPanelEnabled && (
         <Fragment>
@@ -162,6 +174,7 @@ const SmartBillSummary = ({
 
 SmartBillSummary.propTypes = {
   assets: object,
+  billingLayout: array,
   colors: object,
   components: object,
   constants: object,

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

@@ -0,0 +1,43 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { UTActionCard } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+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>
+  );
+};
+
+ActionCards.propTypes = {
+  actionCards: arrayOf(object),
+  colors: object
+};
+
+export default ActionCards;

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  titleActionCard: {
+    marginBottom: 'auto',
+    marginTop: 'auto'
+  },
+  actionCardsContainer: {
+    gap: 16
+  }
+});

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

@@ -0,0 +1,55 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { Surface, UTLabel } from '@widergy/mobile-ui';
+import { View, Image } from 'react-native';
+import { string, object } from 'prop-types';
+
+import DebtStatusLabel from '../DebtStatusLabel';
+import { getCurrentPeriod, getFormattedDate } from '../../utils';
+
+import { createStyles } from './styles';
+
+const BillHeader = ({ assets, colors, header, debtStatusLabel, smartBill, billNumber }) => {
+  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;
+  return (
+    <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>
+  );
+};
+
+BillHeader.propTypes = {
+  assets: object,
+  colors: object,
+  header: object,
+  debtStatusLabel: string,
+  smartBill: object,
+  billNumber: string
+};
+
+export default BillHeader;

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

@@ -0,0 +1,28 @@
+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
+    }
+  });

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

@@ -0,0 +1,93 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { Surface, UTLabel } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+import { object } from 'prop-types';
+
+import { createStyles } from './styles';
+
+const TitularCard = ({ utils, client, titularCard, colors }) => {
+  const styles = createStyles(colors);
+  const { formatters = {} } = utils;
+  const { clientNumberFormatter } = formatters;
+  const {
+    account_address: accountAddress,
+    client_number: clientNumber = '',
+    holder_name: titularName,
+    postal_address: postalAddress,
+    iva_condition: ivaCondition
+  } = client || {};
+  const {
+    title: titularCardTitle,
+    addressHelpText,
+    titularHelpText,
+    clientNumberHelpText,
+    ivaConditionHelpText
+  } = titularCard;
+  const renderTitularFooter = clientNumber || ivaCondition;
+
+  return (
+    <Surface elevation={1} style={styles.titularCard}>
+      <UTLabel variant="title3" weight="medium">
+        {titularCardTitle}
+      </UTLabel>
+
+      <View style={styles.titularDataContainer}>
+        {accountAddress && (
+          <View style={styles.titularData}>
+            <UTLabel style={styles.titularDataTitle} weight="bold">
+              {accountAddress}
+            </UTLabel>
+
+            {accountAddress !== postalAddress && <UTLabel>{postalAddress}</UTLabel>}
+
+            <UTLabel colorTheme="gray">{addressHelpText}</UTLabel>
+          </View>
+        )}
+
+        {titularName && (
+          <View style={styles.titularData}>
+            <UTLabel style={styles.titularDataTitle} weight="bold">
+              {titularName}
+            </UTLabel>
+
+            <UTLabel colorTheme="gray">{titularHelpText}</UTLabel>
+          </View>
+        )}
+
+        {renderTitularFooter && (
+          <View style={styles.titularFooter}>
+            {clientNumber && (
+              <View style={styles.titularData}>
+                <UTLabel style={styles.titularDataTitle} weight="bold">
+                  {clientNumberFormatter?.(clientNumber) || clientNumber}
+                </UTLabel>
+
+                <UTLabel colorTheme="gray">{clientNumberHelpText}</UTLabel>
+              </View>
+            )}
+
+            {ivaCondition && (
+              <View style={styles.titularData}>
+                <UTLabel style={styles.titularDataTitle} weight="bold">
+                  {ivaCondition}
+                </UTLabel>
+
+                <UTLabel colorTheme="gray">{ivaConditionHelpText}</UTLabel>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+    </Surface>
+  );
+};
+
+TitularCard.propTypes = {
+  colors: object,
+  titularCard: object,
+  utils: object,
+  client: object
+};
+
+export default TitularCard;

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

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    titularCard: {
+      backgroundColor: colors.light01,
+      borderRadius: 8,
+      padding: 16,
+      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
+    }
+  });

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

@@ -0,0 +1,49 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { Surface, UTLabel } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+import { arrayOf, object, func, string } from 'prop-types';
+
+import { getFormattedDate } from '../../utils';
+
+import { createStyles } from './styles';
+
+const TotalCard = ({ detail, expirations, formatAmount, totalAmountLabel, totalCard, colors }) => {
+  const styles = createStyles(colors);
+  const { firstExpiration, secondExpiration } = totalCard;
+
+  const firstExpirationDate = getFormattedDate(expirations?.[0]?.date);
+  const secondExpirationDate = getFormattedDate(expirations?.[1]?.date);
+  const { total_amount: totalAmount } = detail || {};
+  return (
+    <Surface elevation={1} style={styles.totalCardStyles}>
+      <View style={styles.total}>
+        <UTLabel variant="subtitle1" weight="medium">
+          {totalAmountLabel}
+        </UTLabel>
+        <UTLabel colorTheme="accent" variant="title2" weight="medium">
+          {formatAmount?.(totalAmount, true)}
+        </UTLabel>
+      </View>
+      <View>
+        <UTLabel colorTheme="gray" variant="small" weight="medium">
+          {firstExpiration?.(firstExpirationDate)}
+        </UTLabel>
+        <UTLabel colorTheme="gray" variant="small" weight="medium">
+          {secondExpiration?.(secondExpirationDate)}
+        </UTLabel>
+      </View>
+    </Surface>
+  );
+};
+
+TotalCard.propTypes = {
+  detail: object,
+  expirations: arrayOf(object),
+  formatAmount: func,
+  totalAmountLabel: string,
+  totalCard: object,
+  colors: object
+};
+
+export default TotalCard;

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

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+export const createStyles = colors =>
+  StyleSheet.create({
+    totalCardStyles: {
+      backgroundColor: colors.light01,
+      borderRadius: 4,
+      flexDirection: 'column',
+      padding: 16,
+      gap: 24
+    },
+    total: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: 8
+    }
+  });

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

@@ -0,0 +1,11 @@
+import ActionCards from './components/ActionCards';
+import TotalCard from './components/TotalCard';
+import RateCard from './components/RateCard';
+import TitularCard from './components/TitularCard';
+
+export const COMPONENTS = {
+  ActionCards,
+  TotalCard,
+  RateCard,
+  TitularCard
+};

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

@@ -1,13 +1,11 @@
 /* eslint-disable react/forbid-prop-types */
 import React 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 { View } from 'react-native';
+import { array, func, object, shape, string } from 'prop-types';
 
-import { getCurrentPeriod, getFormattedDate } from './utils';
-import { createStyles } from './styles';
-import DebtStatusLabel from './components/DebtStatusLabel';
-import RateCard from './components/RateCard';
+import { getCurrentPeriod } from './utils';
+import styles from './styles';
+import { COMPONENTS } from './constants';
 
 const Billing = ({
   assets,
@@ -15,15 +13,14 @@ const Billing = ({
   constants,
   currentAccount = {},
   handlers = {},
+  billingLayout,
   smartBill = {},
   translations,
   utils = {}
 }) => {
-  const styles = createStyles(colors);
-  const { UtilityLogo } = assets;
   const { adherenceStatus, consumptionLevels = [], subsidyLevels } = constants;
   const { formatters = {} } = utils;
-  const { clientNumberFormatter, formatAmount } = formatters;
+  const { formatAmount } = formatters;
   const {
     bill_number: billNumber,
     client,
@@ -31,13 +28,6 @@ const Billing = ({
     detail,
     expirations
   } = smartBill;
-  const {
-    account_address: accountAddress,
-    client_number: clientNumber = '',
-    holder_name: titularName,
-    postal_address: postalAddress,
-    iva_condition: ivaCondition
-  } = client || {};
   const {
     adhered,
     automaticDebit = {},
@@ -51,20 +41,7 @@ const Billing = ({
     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 = () => {},
@@ -81,7 +58,6 @@ const Billing = ({
   const { title: automaticDebitTitle } = automaticDebit;
   const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
   const isAdheredToAutomaticDebit = adherenceToAutomaticDebit === adherenceStatus?.subscribed;
-  const renderTitularFooter = clientNumber || ivaCondition;
 
   const actionCards = [
     {
@@ -117,147 +93,45 @@ const Billing = ({
       }
     };
   });
-
+  const props = {
+    actionCards,
+    assets,
+    billNumber,
+    client,
+    colors,
+    constants,
+    consumptionLevels,
+    currentAccount,
+    currentPeriod,
+    debtStatusLabel,
+    detail,
+    expirations,
+    formatAmount,
+    handlers,
+    header,
+    normalizedRate,
+    rateCardTranslations,
+    ratesTableLink,
+    titularCard,
+    smartBill,
+    subsidy,
+    subsidyLevels,
+    totalAmountLabel,
+    totalCard,
+    trackRedirectionToExternalLink,
+    translations,
+    utils
+  };
   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>
-
-        <RateCard
-          {...{
-            colors,
-            consumptionLevels,
-            currentPeriod,
-            formatAmount,
-            normalizedRate,
-            rateCardTranslations,
-            ratesTableLink,
-            smartBill,
-            subsidy,
-            subsidyLevels,
-            trackRedirectionToExternalLink,
-            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}>
-            {accountAddress && (
-              <View style={styles.titularData}>
-                <UTLabel style={styles.titularDataTitle} weight="bold">
-                  {accountAddress}
-                </UTLabel>
-
-                {accountAddress !== postalAddress && <UTLabel>{postalAddress}</UTLabel>}
-
-                <UTLabel colorTheme="gray">{addressHelpText}</UTLabel>
-              </View>
-            )}
-
-            {titularName && (
-              <View style={styles.titularData}>
-                <UTLabel style={styles.titularDataTitle} weight="bold">
-                  {titularName}
-                </UTLabel>
-
-                <UTLabel colorTheme="gray">{titularHelpText}</UTLabel>
-              </View>
-            )}
-
-            {renderTitularFooter && (
-              <View style={styles.titularFooter}>
-                {clientNumber && (
-                  <View style={styles.titularData}>
-                    <UTLabel style={styles.titularDataTitle} weight="bold">
-                      {clientNumberFormatter?.(clientNumber) || clientNumber}
-                    </UTLabel>
-
-                    <UTLabel colorTheme="gray">{clientNumberHelpText}</UTLabel>
-                  </View>
-                )}
-
-                {ivaCondition && (
-                  <View style={styles.titularData}>
-                    <UTLabel style={styles.titularDataTitle} weight="bold">
-                      {ivaCondition}
-                    </UTLabel>
-
-                    <UTLabel colorTheme="gray">{ivaConditionHelpText}</UTLabel>
-                  </View>
-                )}
-              </View>
-            )}
-          </View>
-        </Surface>
-      </View>
-    </ScrollView>
+    <View style={styles.generalContainer}>
+      {billingLayout.map(item => {
+        if (item.enabled) {
+          const Component = COMPONENTS[item.name];
+          return Component && <Component key={item.name} {...props} />;
+        }
+        return null;
+      })}
+    </View>
   );
 };
 
@@ -266,6 +140,7 @@ Billing.propTypes = {
   colors: object,
   constants: object,
   currentAccount: object,
+  billingLayout: array,
   handlers: shape({ [string]: func }),
   smartBill: object,
   translations: object,

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

@@ -1,73 +1,11 @@
 import { StyleSheet } from 'react-native';
 
-export const createStyles = colors =>
-  StyleSheet.create({
-    generalContainer: {
-      flexDirection: 'column',
-      gap: 24,
-      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: 16,
-      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'
-    }
-  });
+export default StyleSheet.create({
+  generalContainer: {
+    flexDirection: 'column',
+    gap: 24,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    marginBottom: 48
+  }
+});

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

@@ -8,3 +8,9 @@ export const CONSUMPTION_CARDS = [
     key: 'billingCard'
   }
 ];
+
+export const START = 'inicio';
+export const END = 'fin';
+export const DATE_FORMAT = 'D [de] MMMM';
+export const DATE_FORMAT_WITH_YEAR = 'D [de] MMMM [de] YYYY';
+export const DAY = 'day';

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

@@ -3,15 +3,35 @@ import React from 'react';
 import { UTActionCard, UTLabel } from '@widergy/mobile-ui';
 import { object } from 'prop-types';
 import { View } from 'react-native';
+import dayjs from 'dayjs';
 
-import { CONSUMPTION_CARDS } from './constants';
+import { CONSUMPTION_CARDS, START, END, DAY, DATE_FORMAT, DATE_FORMAT_WITH_YEAR } from './constants';
 import styles, { markdownStyles } from './styles';
 
-const BimestralConsumption = ({ assets, colors, texts }) => {
+const BimestralConsumption = ({ assets, colors, texts, smartBill }) => {
   const bimestralConsumptionTexts = texts?.bimestralConsumption;
   const { title: bimestralTitle, description: bimestralDescription } = bimestralConsumptionTexts || {};
   const { BackgroundVector } = assets?.bimestral || {};
+  const readingPeriods = smartBill?.reading_periods || [];
+  const startDate = readingPeriods.find(period => period.moment === START)?.date;
+  const endDate = readingPeriods.find(period => period.moment === END)?.date;
 
+  const formatDate = (dateString, includeYear = false) => {
+    if (!dateString) return '';
+    const format = includeYear ? DATE_FORMAT_WITH_YEAR : DATE_FORMAT;
+    return dayjs(dateString).locale('es').format(format);
+  };
+
+  const calculateTotalDays = (start, end) => {
+    if (!start || !end) return 0;
+    const startMoment = dayjs(start);
+    const endMoment = dayjs(end);
+    return endMoment.diff(startMoment, DAY);
+  };
+
+  const formattedStartDate = formatDate(startDate, false);
+  const formattedEndDate = formatDate(endDate, true);
+  const totalDays = calculateTotalDays(startDate, endDate);
   return (
     <View>
       <View style={styles.bimestralConsumptionHeader}>
@@ -22,9 +42,12 @@ const BimestralConsumption = ({ assets, colors, texts }) => {
       </View>
       <View style={styles.bimestralConsumptionCards}>
         {CONSUMPTION_CARDS.map(({ icon, key }) => {
-          const title = bimestralConsumptionTexts?.[key]?.title;
-          const description = bimestralConsumptionTexts?.[key]?.description;
-
+          const { title, description } =
+            bimestralConsumptionTexts?.[key]?.({
+              formattedStartDate,
+              formattedEndDate,
+              totalDays
+            }) || {};
           return (
             <UTActionCard
               adornment={{
@@ -58,7 +81,8 @@ const BimestralConsumption = ({ assets, colors, texts }) => {
 BimestralConsumption.propTypes = {
   assets: object,
   colors: object,
-  texts: object
+  texts: object,
+  smartBill: object
 };
 
 export default BimestralConsumption;

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import { UTLabel } from '@widergy/mobile-ui';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 import { object } from 'prop-types';
 
 import styles from './styles';
@@ -13,25 +13,23 @@ const Consumptions = ({ assets, colors, smartBill, translations }) => {
   const { title, description } = translations?.consumptions || {};
 
   return (
-    <ScrollView>
-      <View style={styles.generalContainer}>
-        <BimestralConsumption assets={assets} colors={colors} smartBill={smartBill} texts={translations} />
+    <View style={styles.generalContainer}>
+      <BimestralConsumption assets={assets} colors={colors} smartBill={smartBill} texts={translations} />
 
-        <View style={styles.consumptionDetail}>
-          <View style={styles.consumptionDetailTitles}>
-            <UTLabel variant="title3" weight="medium">
-              {title}
-            </UTLabel>
-            <UTLabel>{description}</UTLabel>
-          </View>
+      <View style={styles.consumptionDetail}>
+        <View style={styles.consumptionDetailTitles}>
+          <UTLabel variant="title3" weight="medium">
+            {title}
+          </UTLabel>
+          <UTLabel>{description}</UTLabel>
+        </View>
 
-          <View style={styles.consumptionDetailColumns}>
-            <CurrentConsumption colors={colors} assets={assets} smartBill={smartBill} texts={translations} />
-            <Billing colors={colors} smartBill={smartBill} texts={translations} />
-          </View>
+        <View style={styles.consumptionDetailColumns}>
+          <CurrentConsumption colors={colors} assets={assets} smartBill={smartBill} texts={translations} />
+          <Billing colors={colors} smartBill={smartBill} texts={translations} />
         </View>
       </View>
-    </ScrollView>
+    </View>
   );
 };