From d595e6055234b3f159c61a8b66f233656c0670d2 Mon Sep 17 00:00:00 2001
From: Amy Evans <amy@expensify.com>
Date: Mon, 23 May 2022 15:45:28 -0400
Subject: [PATCH 1/2] Delay section display until ACH state has loaded

---
 src/pages/workspace/WorkspacePageWithSections.js        | 4 +++-
 src/pages/workspace/reimburse/WorkspaceReimburseView.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 6d84ed2484a8..ab599bedbf04 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -88,7 +88,9 @@ class WorkspacePageWithSections extends React.Component {
 
     render() {
         const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
-        const hasVBA = achState === BankAccount.STATE.OPEN;
+        const hasVBA = this.props.reimbursementAccount.loading
+            ? null
+            : 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');
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index 927401c46522..2d3478452adc 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -191,7 +191,7 @@ class WorkspaceReimburseView extends React.Component {
                     </View>
                 </Section>
 
-                {!this.props.hasVBA && (
+                {this.props.hasVBA === false && (
                     <Section
                         title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')}
                         icon={Illustrations.JewelBoxGreen}

From edafe76d459f3d1eef193e7310108107cb149e02 Mon Sep 17 00:00:00 2001
From: Amy Evans <amy@expensify.com>
Date: Mon, 23 May 2022 16:54:04 -0400
Subject: [PATCH 2/2] Fix propTypes declaration for hasVBA

---
 src/pages/workspace/reimburse/WorkspaceReimburseView.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index 2d3478452adc..e04d20ff8cdc 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -27,8 +27,8 @@ const propTypes = {
     /** The policy ID currently being configured */
     policyID: PropTypes.string.isRequired,
 
-    /** Does the user has a VBA into its account? */
-    hasVBA: PropTypes.bool.isRequired,
+    /** Does the user have a VBA in their account? */
+    hasVBA: PropTypes.bool,
 
     /** Policy values needed in the component */
     policy: PropTypes.shape({
@@ -48,6 +48,10 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    hasVBA: null,
+};
+
 class WorkspaceReimburseView extends React.Component {
     constructor(props) {
         super(props);
@@ -236,6 +240,7 @@ class WorkspaceReimburseView extends React.Component {
 }
 
 WorkspaceReimburseView.propTypes = propTypes;
+WorkspaceReimburseView.defaultProps = defaultProps;
 WorkspaceReimburseView.displayName = 'WorkspaceReimburseView';
 
 export default compose(