From 9833f369fed52df23019d247586ce7bb09180d1a Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 10 Oct 2024 15:04:57 +0200
Subject: [PATCH 1/7] remove old components

---
 src/components/ConnectBankAccountButton.tsx   | 44 --------------
 src/languages/en.ts                           |  8 ---
 src/languages/es.ts                           |  8 ---
 .../WorkspaceInvoicesFirstSection.tsx         | 58 -------------------
 .../invoices/WorkspaceInvoicesNoVBAView.tsx   | 43 --------------
 .../invoices/WorkspaceInvoicesPage.tsx        |  7 +--
 .../invoices/WorkspaceInvoicesVBAView.tsx     | 52 -----------------
 7 files changed, 2 insertions(+), 218 deletions(-)
 delete mode 100644 src/components/ConnectBankAccountButton.tsx
 delete mode 100644 src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.tsx
 delete mode 100644 src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.tsx
 delete mode 100644 src/pages/workspace/invoices/WorkspaceInvoicesVBAView.tsx

diff --git a/src/components/ConnectBankAccountButton.tsx b/src/components/ConnectBankAccountButton.tsx
deleted file mode 100644
index ee6ad04d727e..000000000000
--- a/src/components/ConnectBankAccountButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
-import {View} from 'react-native';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import Navigation from '@libs/Navigation/Navigation';
-import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
-import Button from './Button';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-
-type ConnectBankAccountButtonProps = {
-    /** PolicyID for navigating to bank account route of that policy */
-    policyID: string;
-
-    /** Button styles, also applied for offline message wrapper */
-    style?: StyleProp<ViewStyle>;
-};
-
-function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonProps) {
-    const {isOffline} = useNetwork();
-    const {translate} = useLocalize();
-    const activeRoute = Navigation.getActiveRouteWithoutParams();
-
-    return isOffline ? (
-        <View style={style}>
-            <Text>{`${translate('common.youAppearToBeOffline')} ${translate('common.thisFeatureRequiresInternet')}`}</Text>
-        </View>
-    ) : (
-        <Button
-            text={translate('workspace.common.connectBankAccount')}
-            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(policyID, activeRoute)}
-            icon={Expensicons.Bank}
-            style={style}
-            shouldShowRightIcon
-            large
-            success
-        />
-    );
-}
-
-ConnectBankAccountButton.displayName = 'ConnectBankAccountButton';
-
-export default ConnectBankAccountButton;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index d2226e1c1290..2c2ab83e4de8 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3668,14 +3668,6 @@ const translations = {
             notReadyDescription: 'Draft or pending expense reports cannot be exported to the accounting system. Please approve or pay these expenses before exporting them.',
         },
         invoices: {
-            invoiceClientsAndCustomers: 'Invoice clients and customers',
-            invoiceFirstSectionCopy: 'Send beautiful, professional invoices directly to your clients and customers right from the Expensify app.',
-            viewAllInvoices: 'View all invoices',
-            unlockOnlineInvoiceCollection: 'Unlock online invoice collection',
-            unlockNoVBACopy: 'Connect your bank account to accept online invoice payments by ACH or credit card.',
-            moneyBackInAFlash: 'Money back, in a flash!',
-            unlockVBACopy: "You're all set to accept payments by ACH or credit card!",
-            viewUnpaidInvoices: 'View unpaid invoices',
             sendInvoice: 'Send invoice',
             sendFrom: 'Send from',
             invoicingDetails: 'Invoicing details',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index fd807854e410..3ed4b4d6b989 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3710,14 +3710,6 @@ const translations = {
                 'Los borradores o informes de gastos pendientes no se pueden exportar al sistema contabilidad. Por favor, apruebe o pague estos gastos antes de exportarlos.',
         },
         invoices: {
-            invoiceClientsAndCustomers: 'Emite facturas a tus clientes',
-            invoiceFirstSectionCopy: 'Envía facturas detalladas y profesionales directamente a tus clientes desde la app de Expensify.',
-            viewAllInvoices: 'Ver facturas emitidas',
-            unlockOnlineInvoiceCollection: 'Desbloquea el cobro de facturas online',
-            unlockNoVBACopy: 'Conecta tu cuenta bancaria para recibir pagos de facturas online por transferencia o con tarjeta.',
-            moneyBackInAFlash: '¡Tu dinero de vuelta en un momento!',
-            unlockVBACopy: '¡Todo listo para recibir pagos por transferencia o con tarjeta!',
-            viewUnpaidInvoices: 'Ver facturas emitidas pendientes',
             sendInvoice: 'Enviar factura',
             sendFrom: 'Enviar desde',
             invoicingDetails: 'Detalles de facturación',
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.tsx
deleted file mode 100644
index b02001cf825f..000000000000
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
-import Section from '@components/Section';
-import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as Link from '@userActions/Link';
-
-type WorkspaceInvoicesFirstSectionProps = {
-    /** The policy ID currently being configured */
-    policyID: string;
-};
-
-function WorkspaceInvoicesFirstSection({policyID}: WorkspaceInvoicesFirstSectionProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-
-    const sendInvoiceUrl = encodeURI('reports?param={"createInvoice":true}');
-    const viewAllInvoicesUrl = `reports?policyID=${policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
-
-    return (
-        <Section
-            title={translate('workspace.invoices.invoiceClientsAndCustomers')}
-            icon={Illustrations.InvoiceBlue}
-            isCentralPane
-            menuItems={[
-                {
-                    title: translate('workspace.invoices.sendInvoice'),
-                    onPress: () => Link.openOldDotLink(sendInvoiceUrl),
-                    icon: Expensicons.Send,
-                    shouldShowRightIcon: true,
-                    iconRight: Expensicons.NewWindow,
-                    wrapperStyle: [styles.cardMenuItem],
-                    link: () => Link.buildOldDotURL(sendInvoiceUrl),
-                },
-                {
-                    title: translate('workspace.invoices.viewAllInvoices'),
-                    onPress: () => Link.openOldDotLink(viewAllInvoicesUrl),
-                    icon: Expensicons.Invoice,
-                    shouldShowRightIcon: true,
-                    iconRight: Expensicons.NewWindow,
-                    wrapperStyle: [styles.cardMenuItem],
-                    link: () => Link.buildOldDotURL(viewAllInvoicesUrl),
-                },
-            ]}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{translate('workspace.invoices.invoiceFirstSectionCopy')}</Text>
-            </View>
-        </Section>
-    );
-}
-
-WorkspaceInvoicesFirstSection.displayName = 'WorkspaceInvoicesFirstSection';
-
-export default WorkspaceInvoicesFirstSection;
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.tsx
deleted file mode 100644
index 5f3edf5bf56d..000000000000
--- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import ConnectBankAccountButton from '@components/ConnectBankAccountButton';
-import * as Illustrations from '@components/Icon/Illustrations';
-import Section from '@components/Section';
-import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
-
-type WorkspaceInvoicesNoVBAViewProps = {
-    /** The policy ID currently being configured */
-    policyID: string;
-};
-
-function WorkspaceInvoicesNoVBAView({policyID}: WorkspaceInvoicesNoVBAViewProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-
-    return (
-        <>
-            <WorkspaceInvoicesFirstSection policyID={policyID} />
-
-            <Section
-                title={translate('workspace.invoices.unlockOnlineInvoiceCollection')}
-                icon={Illustrations.MoneyIntoWallet}
-                isCentralPane
-            >
-                <View style={[styles.mv3]}>
-                    <Text>{translate('workspace.invoices.unlockNoVBACopy')}</Text>
-                </View>
-                <ConnectBankAccountButton
-                    policyID={policyID}
-                    style={[styles.mt4]}
-                />
-            </Section>
-        </>
-    );
-}
-
-WorkspaceInvoicesNoVBAView.displayName = 'WorkspaceInvoicesNoVBAView';
-
-export default WorkspaceInvoicesNoVBAView;
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
index b269d93df098..3755faed4ba0 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
@@ -10,8 +10,6 @@ import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSection
 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';
 
 type WorkspaceInvoicesPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.INVOICES>;
@@ -19,6 +17,7 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -33,12 +32,10 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
                 shouldSkipVBBACall={false}
                 route={route}
             >
-                {(hasVBA?: boolean, policyID?: string) => (
+                {(_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} />}
                     </View>
                 )}
             </WorkspacePageWithSections>
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.tsx
deleted file mode 100644
index db321abfed87..000000000000
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
-import Section from '@components/Section';
-import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as Link from '@userActions/Link';
-import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
-
-type WorkspaceInvoicesVBAViewProps = {
-    /** The polgicy ID currently being configured */
-    policyID: string;
-};
-
-function WorkspaceInvoicesVBAView({policyID}: WorkspaceInvoicesVBAViewProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const viewUnpaidInvoicesUrl = `reports?policyID=${policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`;
-
-    return (
-        <>
-            <WorkspaceInvoicesFirstSection policyID={policyID} />
-
-            <Section
-                title={translate('workspace.invoices.moneyBackInAFlash')}
-                icon={Illustrations.MoneyBadge}
-                isCentralPane
-                menuItems={[
-                    {
-                        title: translate('workspace.invoices.viewUnpaidInvoices'),
-                        onPress: () => Link.openOldDotLink(viewUnpaidInvoicesUrl),
-                        icon: Expensicons.Hourglass,
-                        shouldShowRightIcon: true,
-                        iconRight: Expensicons.NewWindow,
-                        wrapperStyle: [styles.cardMenuItem],
-                        link: () => Link.buildOldDotURL(viewUnpaidInvoicesUrl),
-                    },
-                ]}
-            >
-                <View style={[styles.mv3]}>
-                    <Text>{translate('workspace.invoices.unlockVBACopy')}</Text>
-                </View>
-            </Section>
-        </>
-    );
-}
-
-WorkspaceInvoicesVBAView.displayName = 'WorkspaceInvoicesVBAView';
-
-export default WorkspaceInvoicesVBAView;

From af2a5e34e3b5c4e1625ea34daee11ab38224c1d5 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 10 Oct 2024 15:10:57 +0200
Subject: [PATCH 2/7] add WorkspaceInvoicingDetailsSection

---
 src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
index 3755faed4ba0..259a75b20e7e 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
@@ -11,6 +11,7 @@ import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
 import WorkspaceInvoiceBalanceSection from './WorkspaceInvoiceBalanceSection';
 import WorkspaceInvoiceVBASection from './WorkspaceInvoiceVBASection';
+import WorkspaceInvoicingDetailsSection from './WorkspaceInvoicingDetailsSection';
 
 type WorkspaceInvoicesPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.INVOICES>;
 function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
@@ -36,6 +37,7 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
                     <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                         {policyID && <WorkspaceInvoiceBalanceSection policyID={policyID} />}
                         {policyID && <WorkspaceInvoiceVBASection policyID={policyID} />}
+                        {policyID && <WorkspaceInvoicingDetailsSection policyID={policyID} />}
                     </View>
                 )}
             </WorkspacePageWithSections>

From 52d02d8ad5d928c89d41c43efc55cac97b1ecd2c Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Oct 2024 18:39:44 +0200
Subject: [PATCH 3/7] apply icon

---
 src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
index 259a75b20e7e..4f14950ec93d 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx
@@ -1,6 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {View} from 'react-native';
+import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -32,6 +33,7 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
                 shouldShowOfflineIndicatorInWideScreen
                 shouldSkipVBBACall={false}
                 route={route}
+                icon={Illustrations.InvoiceBlue}
             >
                 {(_hasVBA?: boolean, policyID?: string) => (
                     <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

From 09478e3ec15cab3dcb1209b834d60a5ffb02358e Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 22 Oct 2024 12:53:48 +0200
Subject: [PATCH 4/7] tweak sections descriptions

---
 src/languages/en.ts | 4 ++--
 src/languages/es.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index de404af65749..963ab6babbe1 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3822,8 +3822,8 @@ const translations = {
                 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.',
+            invoiceBalanceSubtitle: "This is your current balance from collecting invoice payments. It'll transfer to your bank account automatically if you've added one.",
+            bankAccountsSubtitle: 'Add a bank account to make and receive invoice payments.',
         },
         invite: {
             member: 'Invite member',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index d7a6807c531d..0bc050dd46fb 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3868,8 +3868,8 @@ const translations = {
                 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.',
+            invoiceBalanceSubtitle: 'Este es tu saldo actual de la recaudación de pagos de facturas. Se transferirá automáticamente a tu cuenta bancaria si has agregado una.',
+            bankAccountsSubtitle: 'Agrega una cuenta bancaria para hacer y recibir pagos de facturas.',
         },
         invite: {
             member: 'Invitar miembros',

From 71b7feb2d01b3a5975cbf53d6f63f613b32663e3 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 22 Oct 2024 13:13:30 +0200
Subject: [PATCH 5/7] align test styles

---
 .../workspace/invoices/WorkspaceInvoiceBalanceSection.tsx      | 3 +--
 .../workspace/invoices/WorkspaceInvoicingDetailsSection.tsx    | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
index 5131dea98368..d8d70b518f0b 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
@@ -21,9 +21,8 @@ function WorkspaceInvoiceBalanceSection({policyID}: WorkspaceInvoiceBalanceSecti
             title={translate('workspace.invoices.invoiceBalance')}
             subtitle={translate('workspace.invoices.invoiceBalanceSubtitle')}
             isCentralPane
-            titleStyles={styles.textStrong}
+            titleStyles={styles.accountSettingsSectionTitle}
             childrenStyles={styles.pt5}
-            subtitleMuted
         >
             <Balance balance={policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0} />
         </Section>
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx
index c734e4b6d517..017ae3c7353c 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx
@@ -28,9 +28,8 @@ function WorkspaceInvoicingDetailsSection({policyID}: WorkspaceInvoicingDetailsS
             subtitle={translate('workspace.invoices.invoicingDetailsDescription')}
             containerStyles={[styles.ph0, shouldUseNarrowLayout ? styles.pt5 : styles.pt8]}
             subtitleStyles={horizontalPadding}
-            titleStyles={[styles.textStrong, horizontalPadding]}
+            titleStyles={[styles.accountSettingsSectionTitle, horizontalPadding]}
             childrenStyles={styles.pt5}
-            subtitleMuted
         >
             <MenuItemWithTopDescription
                 key={translate('workspace.invoices.companyName')}

From 43bc47ef301e8ec2e67da629d0ac5900e9a3eca4 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 22 Oct 2024 13:28:35 +0200
Subject: [PATCH 6/7] use muted descriptions

---
 src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx  | 1 +
 src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx      | 1 +
 .../workspace/invoices/WorkspaceInvoicingDetailsSection.tsx      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
index d8d70b518f0b..2f857c38d03a 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
@@ -23,6 +23,7 @@ function WorkspaceInvoiceBalanceSection({policyID}: WorkspaceInvoiceBalanceSecti
             isCentralPane
             titleStyles={styles.accountSettingsSectionTitle}
             childrenStyles={styles.pt5}
+            subtitleMuted
         >
             <Balance balance={policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0} />
         </Section>
diff --git a/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx b/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx
index 1e876a9867c3..d8f0ae765321 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx
@@ -177,6 +177,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
             subtitle={translate('workspace.invoices.bankAccountsSubtitle')}
             isCentralPane
             titleStyles={styles.accountSettingsSectionTitle}
+            subtitleMuted
         >
             <PaymentMethodList
                 shouldShowAddBankAccountButton={!hasBankAccount}
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx
index 017ae3c7353c..2f30b60120d4 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsSection.tsx
@@ -30,6 +30,7 @@ function WorkspaceInvoicingDetailsSection({policyID}: WorkspaceInvoicingDetailsS
             subtitleStyles={horizontalPadding}
             titleStyles={[styles.accountSettingsSectionTitle, horizontalPadding]}
             childrenStyles={styles.pt5}
+            subtitleMuted
         >
             <MenuItemWithTopDescription
                 key={translate('workspace.invoices.companyName')}

From aa5164bc355588e29829365e76ef4363364eea00 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 22 Oct 2024 13:34:35 +0200
Subject: [PATCH 7/7] change balance view

---
 .../invoices/WorkspaceInvoiceBalanceSection.tsx       | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
index 2f857c38d03a..1b71333c3087 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
+++ b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {useOnyx} from 'react-native-onyx';
-import Balance from '@components/Balance';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 type WorkspaceInvoiceBalanceSectionProps = {
@@ -25,7 +26,13 @@ function WorkspaceInvoiceBalanceSection({policyID}: WorkspaceInvoiceBalanceSecti
             childrenStyles={styles.pt5}
             subtitleMuted
         >
-            <Balance balance={policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0} />
+            <MenuItemWithTopDescription
+                description={translate('walletPage.balance')}
+                title={CurrencyUtils.convertToDisplayString(policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0)}
+                titleStyle={styles.textHeadlineH2}
+                interactive={false}
+                wrapperStyle={styles.sectionMenuItemTopDescription}
+            />
         </Section>
     );
 }