diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index ab599bedbf0..5cdafcac70a 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -88,9 +88,8 @@ class WorkspacePageWithSections extends React.Component {
render() {
const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
- const hasVBA = this.props.reimbursementAccount.loading
- ? null
- : achState === BankAccount.STATE.OPEN;
+ const isLoadingVBA = this.props.reimbursementAccount.loading;
+ const hasVBA = achState === BankAccount.STATE.OPEN;
const isUsingECard = lodashGet(this.props.user, 'isUsingExpensifyCard', false);
const policyID = lodashGet(this.props.route, 'params.policyID');
const policyName = lodashGet(this.props.policy, 'name');
@@ -112,7 +111,7 @@ class WorkspacePageWithSections extends React.Component {
>
- {this.props.children(hasVBA, policyID, isUsingECard)}
+ {this.props.children(isLoadingVBA, hasVBA, policyID, isUsingECard)}
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index c9692d464ea..4f97da3b303 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -139,7 +139,7 @@ class WorkspaceSettingsPage extends React.Component {
)}
>
- {hasVBA => (
+ {(isLoadingVBA, hasVBA) => (
this.setState({currency})}
items={this.getCurrencyItems()}
value={this.state.currency}
- isDisabled={hasVBA}
+ isDisabled={isLoadingVBA || hasVBA}
/>
diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js
index 96ac0cc5ca4..bb85b9c64cb 100644
--- a/src/pages/workspace/bills/WorkspaceBillsPage.js
+++ b/src/pages/workspace/bills/WorkspaceBillsPage.js
@@ -25,11 +25,12 @@ const WorkspaceBillsPage = props => (
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
>
- {(hasVBA, policyID) => (
+ {(isLoadingVBA, hasVBA, policyID) => (
<>
- {!hasVBA ? (
+ {!isLoadingVBA && !hasVBA && (
- ) : (
+ )}
+ {!isLoadingVBA && hasVBA && (
)}
>
diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
index 5dba60e04a0..9f7bf30a5bf 100644
--- a/src/pages/workspace/card/WorkspaceCardPage.js
+++ b/src/pages/workspace/card/WorkspaceCardPage.js
@@ -26,17 +26,17 @@ const WorkspaceCardPage = props => (
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
>
- {(hasVBA, policyID, isUsingECard) => (
+ {(isLoadingVBA, hasVBA, policyID, isUsingECard) => (
<>
- {!hasVBA && (
+ {!isLoadingVBA && !hasVBA && (
)}
- {hasVBA && !isUsingECard && (
+ {!isLoadingVBA && hasVBA && !isUsingECard && (
)}
- {hasVBA && isUsingECard && (
+ {!isLoadingVBA && hasVBA && isUsingECard && (
)}
>
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
index f2f2df6da82..4b7333c3e86 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
@@ -25,11 +25,12 @@ const WorkspaceInvoicesPage = props => (
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
>
- {(hasVBA, policyID) => (
+ {(isLoadingVBA, hasVBA, policyID) => (
<>
- {!hasVBA ? (
+ {!isLoadingVBA && !hasVBA && (
- ) : (
+ )}
+ {!isLoadingVBA && hasVBA && (
)}
>
diff --git a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
index 2f0e8a9e381..75e1a5f29fc 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
@@ -24,8 +24,8 @@ const WorkspaceReimbursePage = props => (
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
>
- {(hasVBA, policyID) => (
-
+ {(isLoadingVBA, hasVBA, policyID) => (
+
)}
);
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index e04d20ff8cd..fee13dfa76e 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -27,8 +27,11 @@ const propTypes = {
/** The policy ID currently being configured */
policyID: PropTypes.string.isRequired,
+ /** Whether VBA data is loading */
+ isLoadingVBA: PropTypes.bool.isRequired,
+
/** Does the user have a VBA in their account? */
- hasVBA: PropTypes.bool,
+ hasVBA: PropTypes.bool.isRequired,
/** Policy values needed in the component */
policy: PropTypes.shape({
@@ -48,10 +51,6 @@ const propTypes = {
...withLocalizePropTypes,
};
-const defaultProps = {
- hasVBA: null,
-};
-
class WorkspaceReimburseView extends React.Component {
constructor(props) {
super(props);
@@ -195,7 +194,7 @@ class WorkspaceReimburseView extends React.Component {
- {this.props.hasVBA === false && (
+ {!this.props.isLoadingVBA && !this.props.hasVBA && (
)}
- {Boolean(this.props.hasVBA) && (
+ {!this.props.isLoadingVBA && this.props.hasVBA && (
(
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
>
- {(hasVBA, policyID) => (
+ {(isLoadingVBA, hasVBA, policyID) => (
<>
- {!hasVBA ? (
+ {!isLoadingVBA && !hasVBA && (
- ) : (
+ )}
+ {!isLoadingVBA && hasVBA && (
)}
>