Merge pull request #50565 from rezkiy37/feature/45175-invoicing-settings-screen

Update Invoices setting screen

Author: madmax330

src/components/ConnectBankAccountButton.tsx

@@ -3827,14 +3827,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',
@@ -3850,8 +3842,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',

src/languages/en.ts

@@ -3872,14 +3872,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',
@@ -3895,8 +3887,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',

src/languages/es.ts

@@ -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 = {
@@ -21,11 +22,17 @@ 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} />
+            <MenuItemWithTopDescription
+                description={translate('walletPage.balance')}
+                title={CurrencyUtils.convertToDisplayString(policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0)}
+                titleStyle={styles.textHeadlineH2}
+                interactive={false}
+                wrapperStyle={styles.sectionMenuItemTopDescription}
+            />
         </Section>
     );
 }

src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx

@@ -177,6 +177,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
             subtitle={translate('workspace.invoices.bankAccountsSubtitle')}
             isCentralPane
             titleStyles={styles.accountSettingsSectionTitle}
+            subtitleMuted
         >
             <PaymentMethodList
                 shouldShowAddBankAccountButton={!hasBankAccount}

src/pages/workspace/invoices/WorkspaceInvoiceVBASection.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';
@@ -10,15 +11,15 @@ 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';
+import WorkspaceInvoicingDetailsSection from './WorkspaceInvoicingDetailsSection';
 
 type WorkspaceInvoicesPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.INVOICES>;
 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]}
@@ -32,13 +33,13 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
                 shouldShowOfflineIndicatorInWideScreen
                 shouldSkipVBBACall={false}
                 route={route}
+                icon={Illustrations.InvoiceBlue}
             >
-                {(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} />}
+                        {policyID && <WorkspaceInvoicingDetailsSection policyID={policyID} />}
                     </View>
                 )}
             </WorkspacePageWithSections>

src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.tsx

@@ -28,7 +28,7 @@ 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
         >