diff --git a/src/components/Balance.tsx b/src/components/Balance.tsx new file mode 100644 index 0000000000000..b9cd93f0ed7bc --- /dev/null +++ b/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; + balance: number; +}; + +function Balance({textStyles, balance}: BalanceProps) { + const styles = useThemeStyles(); + const formattedBalance = CurrencyUtils.convertToDisplayString(balance); + + return {formattedBalance}; +} + +Balance.displayName = 'Balance'; + +export default Balance; diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx index 8761b50465f38..743d284caf6c3 100644 --- a/src/components/CurrentWalletBalance.tsx +++ b/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; -}; - -type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & { +type CurrentWalletBalanceProps = { balanceStyles?: StyleProp; }; -function CurrentWalletBalance({userWallet, balanceStyles}: CurrentWalletBalanceProps) { +function CurrentWalletBalance({balanceStyles}: CurrentWalletBalanceProps) { const styles = useThemeStyles(); - const formattedBalance = CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0); - return {formattedBalance}; + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); + + return ( + + ); } CurrentWalletBalance.displayName = 'CurrentWalletBalance'; -export default withOnyx({ - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, -})(CurrentWalletBalance); +export default CurrentWalletBalance; diff --git a/src/languages/en.ts b/src/languages/en.ts index 18dcbe35c9f6a..27ed5640666a6 100755 --- a/src/languages/en.ts +++ b/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: { diff --git a/src/languages/es.ts b/src/languages/es.ts index 8e16c03a91d3c..2f855570959bd 100644 --- a/src/languages/es.ts +++ b/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: { diff --git a/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx b/src/pages/workspace/invoices/WorkspaceInvoiceBalanceSection.tsx new file mode 100644 index 0000000000000..5131dea983685 --- /dev/null +++ b/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 ( +
+ +
+ ); +} + +export default WorkspaceInvoiceBalanceSection; diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx index bbe19e63a1b50..b269d93df098b 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx +++ b/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) => ( + {policyID && } {policyID && } {!hasVBA && policyID && } {hasVBA && policyID && }