Merge pull request #9138 from Expensify/amy-reimburse-expenses-headings

Delay section display until ACH state has loaded
Expensify · May 24, 2022 · 9d63a10 · 9d63a10
2 parents ef01f8d + edafe76
commit 9d63a10
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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);
@@ -191,7 +195,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}
@@ -236,6 +240,7 @@ class WorkspaceReimburseView extends React.Component {
 }
 
 WorkspaceReimburseView.propTypes = propTypes;
+WorkspaceReimburseView.defaultProps = defaultProps;
 WorkspaceReimburseView.displayName = 'WorkspaceReimburseView';
 
 export default compose(