Invoicing balance section

src/components/Balance.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import Text from './Text';
+
+type BalanceProps = {
+    textStyles?: StyleProp<TextStyle>;
+    balance: number;
+};
+
+function Balance({textStyles, balance}: BalanceProps) {
+    const styles = useThemeStyles();
+    const formattedBalance = CurrencyUtils.convertToDisplayString(balance);
+
+    return <Text style={[styles.textHeadline, styles.textXXXLarge, textStyles]}>{formattedBalance}</Text>;
+}
+
+Balance.displayName = 'Balance';
+
+export default Balance;

src/components/CurrentWalletBalance.tsx

@@ -1,32 +1,26 @@
 import React from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type UserWallet from '@src/types/onyx/UserWallet';
-import Text from './Text';
+import Balance from './Balance';
 
-type CurrentWalletBalanceOnyxProps = {
-    /** The user's wallet account */
-    userWallet: OnyxEntry<UserWallet>;
-};
-
-type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & {
+type CurrentWalletBalanceProps = {
     balanceStyles?: StyleProp<TextStyle>;
 };
 
-function CurrentWalletBalance({userWallet, balanceStyles}: CurrentWalletBalanceProps) {
+function CurrentWalletBalance({balanceStyles}: CurrentWalletBalanceProps) {
     const styles = useThemeStyles();
-    const formattedBalance = CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0);
-    return <Text style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, balanceStyles]}>{formattedBalance}</Text>;
+    const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
+
+    return (
+        <Balance
+            textStyles={[styles.pv5, styles.alignSelfCenter, balanceStyles]}
+            balance={userWallet?.currentBalance ?? 0}
+        />
+    );
 }
 
 CurrentWalletBalance.displayName = 'CurrentWalletBalance';
 
-export default withOnyx<CurrentWalletBalanceProps, CurrentWalletBalanceOnyxProps>({
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
-    },
-})(CurrentWalletBalance);
+export default CurrentWalletBalance;

src/languages/en.ts

@@ -3656,6 +3656,8 @@ const translations = {
                 payingAsIndividual: 'Paying as an individual',
                 payingAsBusiness: 'Paying as a business',
             },
+            invoiceBalance: 'Invoice balance',
+            invoiceBalanceSubtitle: 'Here’s your current balance from collecting payments on invoices.',
             bankAccountsSubtitle: 'Add a bank account to receive invoice payments.',
         },
         invite: {

src/languages/es.ts

@@ -3697,6 +3697,8 @@ const translations = {
                 payingAsIndividual: 'Pago individual',
                 payingAsBusiness: 'Pagar como una empresa',
             },
+            invoiceBalance: 'Saldo de la factura',
+            invoiceBalanceSubtitle: 'Aquí está su saldo actual de la recaudación de pagos en las facturas.',
             bankAccountsSubtitle: 'Agrega una cuenta bancaria para recibir pagos de facturas.',
         },
         invite: {

src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import Balance from '@components/Balance';
+import Section from '@components/Section';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type WorkspaceInvoiceBalanceSectionProps = {
+    /** The policy ID currently being configured */
+    policyID: string;
+};
+
+function WorkspaceInvoiceBalanceSection({policyID}: WorkspaceInvoiceBalanceSectionProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    return (
+        <Section
+            title={translate('workspace.invoices.invoiceBalance')}
+            subtitle={translate('workspace.invoices.invoiceBalanceSubtitle')}
+            isCentralPane
+            titleStyles={styles.textStrong}
+            childrenStyles={styles.pt5}
+            subtitleMuted
+        >
+            <Balance balance={policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0} />
+        </Section>
+    );
+}
+
+export default WorkspaceInvoiceBalanceSection;

src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx

@@ -9,6 +9,7 @@ import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
+import WorkspaceInvoiceBalanceSection from './WorkspaceInvoiceBalanceSection';
 import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView';
 import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView';
 import WorkspaceInvoiceVBASection from './WorkspaceInvoiceVBASection';
@@ -34,6 +35,7 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
             >
                 {(hasVBA?: boolean, policyID?: string) => (
                     <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                        {policyID && <WorkspaceInvoiceBalanceSection policyID={policyID} />}
                         {policyID && <WorkspaceInvoiceVBASection policyID={policyID} />}
                         {!hasVBA && policyID && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
                         {hasVBA && policyID && <WorkspaceInvoicesVBAView policyID={policyID} />}