Invoicing balance section

src/ONYXKEYS.ts

@@ -400,6 +400,9 @@ const ONYXKEYS = {
     /** Stores the information about currently edited advanced approval workflow */
     APPROVAL_WORKFLOW: 'approvalWorkflow',
 
+    /** Stores the information about the invoice balance transfer */
+    INVOICE_BALANCE_TRANSFER: 'invoiceBalanceTransfer',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -879,6 +882,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_WORKSPACE_TOOLTIP]: OnyxTypes.WorkspaceTooltip;
     [ONYXKEYS.NVP_PRIVATE_CANCELLATION_DETAILS]: OnyxTypes.CancellationDetails[];
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflow;
+    [ONYXKEYS.INVOICE_BALANCE_TRANSFER]: OnyxTypes.InvoiceBalanceTransfer;
 };
 
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;

src/ROUTES.ts

@@ -690,6 +690,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/invoices',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/invoices` as const,
     },
+    WORKSPACE_INVOICES_TRANSFER_BALANCE: {
+        route: 'settings/workspaces/:policyID/invoices/transfer-balance',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/invoices/transfer-balance` as const,
+    },
     WORKSPACE_TRAVEL: {
         route: 'settings/workspaces/:policyID/travel',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/travel` as const,

src/SCREENS.ts

@@ -372,6 +372,7 @@ const SCREENS = {
         EXPENSIFY_CARD_SETTINGS_FREQUENCY: 'Workspace_ExpensifyCard_Settings_Frequency',
         BILLS: 'Workspace_Bills',
         INVOICES: 'Workspace_Invoices',
+        INVOICES_TRANSFER_BALANCE: 'Workspace_Invoices_Transfer_Balance',
         TRAVEL: 'Workspace_Travel',
         MEMBERS: 'Workspace_Members',
         INVITE: 'Workspace_Invite',

src/components/Balance.tsx

@@ -0,0 +1,20 @@
+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

@@ -3,10 +3,9 @@ import type {StyleProp, TextStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} 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 */
@@ -19,8 +18,12 @@ type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & {
 
 function CurrentWalletBalance({userWallet, 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>;
+    return (
+        <Balance
+            textStyles={[styles.pv5, styles.alignSelfCenter, balanceStyles]}
+            balance={userWallet?.currentBalance ?? 0}
+        />
+    );
 }
 
 CurrentWalletBalance.displayName = 'CurrentWalletBalance';

src/languages/en.ts

@@ -284,6 +284,7 @@ export default {
         join: 'Join',
         leave: 'Leave',
         decline: 'Decline',
+        transfer: 'Transfer',
         transferBalance: 'Transfer balance',
         cantFindAddress: "Can't find your address? ",
         enterManually: 'Enter it manually',
@@ -3321,6 +3322,8 @@ export default {
                 payingAsIndividual: 'Paying as an individual',
                 payingAsBusiness: 'Paying as a business',
             },
+            invoiceBalance: 'Invoice balance',
+            invoiceBalanceSubtitle: 'Here’s your current balance from collecting payments on invoices.',
         },
         travel: {
             unlockConciergeBookingTravel: 'Unlock Concierge travel booking',

src/languages/es.ts

@@ -274,6 +274,7 @@ export default {
         join: 'Unirse',
         leave: 'Salir',
         decline: 'Rechazar',
+        transfer: 'Transferencia',
         transferBalance: 'Transferencia de saldo',
         cantFindAddress: '¿No encuentras tu dirección? ',
         enterManually: 'Introducir manualmente',
@@ -3372,6 +3373,8 @@ export default {
                 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.',
         },
         travel: {
             unlockConciergeBookingTravel: 'Desbloquea la reserva de viajes con Concierge',

src/libs/API/parameters/TransferInvoiceBalanceParams.ts

@@ -0,0 +1,6 @@
+type TransferInvoiceBalanceParams = {
+    policyID: string;
+    authToken: string;
+};
+
+export default TransferInvoiceBalanceParams;

src/libs/API/parameters/index.ts

@@ -270,3 +270,4 @@ export type {default as ExportSearchItemsToCSVParams} from './ExportSearchItemsT
 export type {default as UpdateExpensifyCardLimitParams} from './UpdateExpensifyCardLimitParams';
 export type {CreateWorkspaceApprovalParams, UpdateWorkspaceApprovalParams, RemoveWorkspaceApprovalParams} from './WorkspaceApprovalParams';
 export type {default as StartIssueNewCardFlowParams} from './StartIssueNewCardFlowParams';
+export type {default as TransferInvoiceBalanceParams} from './TransferInvoiceBalanceParams';

src/libs/API/types.ts

@@ -325,6 +325,7 @@ const WRITE_COMMANDS = {
     CREATE_WORKSPACE_APPROVAL: 'CreateWorkspaceApproval',
     UPDATE_WORKSPACE_APPROVAL: 'UpdateWorkspaceApproval',
     REMOVE_WORKSPACE_APPROVAL: 'RemoveWorkspaceApproval',
+    TRANSFER_POLICY_ACCOUNT_BALANCE: 'TransferPolicyAccountBalance',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -656,6 +657,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.CREATE_WORKSPACE_APPROVAL]: Parameters.CreateWorkspaceApprovalParams;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_APPROVAL]: Parameters.UpdateWorkspaceApprovalParams;
     [WRITE_COMMANDS.REMOVE_WORKSPACE_APPROVAL]: Parameters.RemoveWorkspaceApprovalParams;
+    [WRITE_COMMANDS.TRANSFER_POLICY_ACCOUNT_BALANCE]: Parameters.TransferInvoiceBalanceParams;
 };
 
 const READ_COMMANDS = {

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -419,6 +419,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAX_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/ValuePage').default,
     [SCREENS.WORKSPACE.TAX_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default,
     [SCREENS.WORKSPACE.TAX_CODE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxCodePage').default,
+    [SCREENS.WORKSPACE.INVOICES_TRANSFER_BALANCE]: () => require<ReactComponentModule>('../../../../pages/workspace/invoices/WorkspaceTransferInvoiceBalance').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/issueNew/IssueNewCardPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardSettingsPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceSettlementAccountPage').default,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -159,6 +159,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_VALUE,
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_INITIAL_VALUE,
     ],
+    [SCREENS.WORKSPACE.INVOICES]: [SCREENS.WORKSPACE.INVOICES_TRANSFER_BALANCE],
     [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [
         SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW,
         SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT,

src/libs/Navigation/linkingConfig/config.ts

@@ -475,6 +475,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.SHARE]: {
                             path: ROUTES.WORKSPACE_PROFILE_SHARE.route,
                         },
+                        [SCREENS.WORKSPACE.INVOICES_TRANSFER_BALANCE]: {
+                            path: ROUTES.WORKSPACE_INVOICES_TRANSFER_BALANCE.route,
+                        },
                         [SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT]: {
                             path: ROUTES.WORKSPACE_EXPENSIFY_CARD_LIMIT.route,
                         },

src/libs/Navigation/types.ts

@@ -665,6 +665,9 @@ type SettingsNavigatorParamList = {
         policyID: string;
         taxID: string;
     };
+    [SCREENS.WORKSPACE.INVOICES_TRANSFER_BALANCE]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
         policyID: string;
     };

src/libs/actions/PaymentMethods.ts

@@ -10,12 +10,14 @@ import type {
     DeletePaymentCardParams,
     MakeDefaultPaymentMethodParams,
     PaymentCardParams,
+    TransferInvoiceBalanceParams,
     TransferWalletBalanceParams,
     UpdateBillingCurrencyParams,
 } from '@libs/API/parameters';
 import {READ_COMMANDS, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import * as NetworkStore from '@libs/Network/NetworkStore';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
@@ -531,6 +533,77 @@ function setPaymentCardForm(values: AccountData) {
     });
 }
 
+/**
+ * Transfers invoice balance to a bank account
+ */
+function transferInvoiceBalance(policyID: string) {
+    const authToken = NetworkStore.getAuthToken();
+
+    if (!authToken) {
+        return;
+    }
+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.INVOICE_BALANCE_TRANSFER,
+            value: {
+                loading: true,
+            },
+        },
+    ];
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.INVOICE_BALANCE_TRANSFER,
+            value: {
+                loading: false,
+                shouldShowSuccess: true,
+            },
+        },
+    ];
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.INVOICE_BALANCE_TRANSFER,
+            value: {
+                loading: false,
+                shouldShowSuccess: false,
+            },
+        },
+    ];
+
+    const parameters: TransferInvoiceBalanceParams = {
+        policyID,
+        authToken,
+    };
+
+    API.write(WRITE_COMMANDS.TRANSFER_POLICY_ACCOUNT_BALANCE, parameters, {
+        optimisticData,
+        successData,
+        failureData,
+    });
+}
+
+/**
+ * Resets the invoice balance transfer data
+ */
+function resetInvoiceTransferData() {
+    Onyx.set(ONYXKEYS.INVOICE_BALANCE_TRANSFER, {
+        loading: false,
+        shouldShowSuccess: false,
+        errors: null,
+    });
+}
+
+/**
+ * Dismisses the successful invoice transfer balance page
+ */
+function dismissSuccessfulInvoiceTransferBalancePage() {
+    Onyx.merge(ONYXKEYS.INVOICE_BALANCE_TRANSFER, {shouldShowSuccess: false});
+    Navigation.goBack();
+}
+
 export {
     deletePaymentCard,
     addPaymentCard,
@@ -555,4 +628,7 @@ export {
     clearWalletTermsError,
     setPaymentCardForm,
     verifySetupIntent,
+    transferInvoiceBalance,
+    resetInvoiceTransferData,
+    dismissSuccessfulInvoiceTransferBalancePage,
 };

src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import Balance from '@components/Balance';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Section from '@components/Section';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+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
+            menuItems={
+                policy?.invoice?.bankAccount
+                    ? [
+                          {
+                              title: translate('common.transferBalance'),
+                              onPress: () => Navigation.navigate(ROUTES.WORKSPACE_INVOICES_TRANSFER_BALANCE.getRoute(policyID)),
+                              icon: Expensicons.Transfer,
+                              shouldShowRightIcon: true,
+                              iconRight: Expensicons.ArrowRight,
+                              wrapperStyle: [styles.workspaceTransferBalance],
+                          },
+                      ]
+                    : []
+            }
+        >
+            <Balance balance={policy?.invoice?.bankAccount?.stripeConnectAccountBalance ?? 0} />
+        </Section>
+    );
+}
+
+export default WorkspaceInvoiceBalanceSection;

src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx

@@ -8,6 +8,7 @@ import type {FullScreenNavigatorParamList} from '@navigation/types';
 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';
 
@@ -28,6 +29,7 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
         >
             {(hasVBA?: boolean, policyID?: string) => (
                 <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    {policyID && <WorkspaceInvoiceBalanceSection policyID={policyID} />}
                     {!hasVBA && policyID && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
                     {hasVBA && policyID && <WorkspaceInvoicesVBAView policyID={policyID} />}
                 </View>