diff --git a/packages/webapp/src/containers/Accounts/components.tsx b/packages/webapp/src/containers/Accounts/components.tsx index d3c793f24..5b9d2b31b 100644 --- a/packages/webapp/src/containers/Accounts/components.tsx +++ b/packages/webapp/src/containers/Accounts/components.tsx @@ -116,3 +116,16 @@ export function BalanceCell({ cell }) { ); } + +/** + * Balance cell. + */ +export function BankBalanceCell({ cell }) { + const account = cell.row.original; + + return account.amount !== null ? ( + {account.bank_balance_formatted} + ) : ( + + ); +} diff --git a/packages/webapp/src/containers/Accounts/utils.tsx b/packages/webapp/src/containers/Accounts/utils.tsx index 3277df6a6..6e535fd28 100644 --- a/packages/webapp/src/containers/Accounts/utils.tsx +++ b/packages/webapp/src/containers/Accounts/utils.tsx @@ -4,7 +4,7 @@ import intl from 'react-intl-universal'; import { Intent, Tag } from '@blueprintjs/core'; import { If, AppToaster } from '@/components'; -import { NormalCell, BalanceCell } from './components'; +import { NormalCell, BalanceCell, BankBalanceCell } from './components'; import { transformTableStateToQuery, isBlank } from '@/utils'; /** @@ -94,6 +94,15 @@ export const useAccountsTableColumns = () => { width: 75, clickable: true, }, + { + id: 'bank_balance', + Header: 'Bank Balance', + accessor: 'bank_balance_formatted', + Cell: BankBalanceCell, + width: 150, + clickable: true, + align: 'right', + }, { id: 'balance', Header: intl.get('balance'), @@ -119,5 +128,5 @@ export const transformAccountsStateToQuery = (tableState) => { return { ...transformTableStateToQuery(tableState), inactive_mode: tableState.inactiveMode, - } -} \ No newline at end of file + }; +}; diff --git a/packages/webapp/src/containers/Banking/Plaid/PlaidLanchLink.tsx b/packages/webapp/src/containers/Banking/Plaid/PlaidLanchLink.tsx index fb0cef281..a33c400a2 100644 --- a/packages/webapp/src/containers/Banking/Plaid/PlaidLanchLink.tsx +++ b/packages/webapp/src/containers/Banking/Plaid/PlaidLanchLink.tsx @@ -9,7 +9,7 @@ import { PlaidLinkOnEventMetadata, PlaidLinkStableEvent, } from 'react-plaid-link'; -import { logEvent } from './_utils'; +import { logEvent, logExit, logSuccess } from './_utils'; import { usePlaidExchangeToken } from '@/hooks/query'; import { useResetBankingPlaidToken } from '@/hooks/state/banking'; diff --git a/packages/webapp/src/containers/Banking/Plaid/_utils.ts b/packages/webapp/src/containers/Banking/Plaid/_utils.ts index cef95bba2..4e662947c 100644 --- a/packages/webapp/src/containers/Banking/Plaid/_utils.ts +++ b/packages/webapp/src/containers/Banking/Plaid/_utils.ts @@ -28,3 +28,19 @@ export const logSuccess = async ({ link_session_id, }); }; + +export const logExit = async ( + error: PlaidLinkError | null, + { institution, status, link_session_id, request_id }: PlaidLinkOnExitMetadata, +) => { + logEvent( + 'onExit', + { + institution, + status, + link_session_id, + request_id, + }, + error, + ); +}; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx index 02a03c3a8..7f4d64921 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx @@ -71,6 +71,19 @@ function AccountBalanceItem() { ); } +function AccountBankBalanceItem() { + const { currentAccount } = useAccountTransactionsContext(); + + return ( + + Balance in Bank Account + + {currentAccount.bank_balance_formatted} + + + ); +} + function AccountTransactionsDetailsBarSkeleton() { return ( @@ -89,6 +102,7 @@ function AccountTransactionsDetailsContent() { + ); } diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsPlaidLink.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsPlaidLink.tsx index 5eeb72ddd..7f39d1b6d 100644 --- a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsPlaidLink.tsx +++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsPlaidLink.tsx @@ -4,5 +4,8 @@ import { useGetBankingPlaidToken } from '@/hooks/state/banking'; export function CashflowAccountsPlaidLink() { const plaidToken = useGetBankingPlaidToken(); + if (!plaidToken) { + return null; + } return ; }