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 && ( )}