Merge pull request #9170 from Expensify/amy-refactor-hasVBA

Refactor to use an explicit prop for VBA loading state
Expensify · May 26, 2022 · eaee93f · eaee93f
2 parents e1ce016 + 8423bb4
commit eaee93f
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 29 deletions.
diff --git 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 {
                     >
                         <View style={[styles.w100, styles.flex1]}>
 
-                            {this.props.children(hasVBA, policyID, isUsingECard)}
+                            {this.props.children(isLoadingVBA, hasVBA, policyID, isUsingECard)}
 
                         </View>
                     </ScrollView>

diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -139,7 +139,7 @@ class WorkspaceSettingsPage extends React.Component {
                     </FixedFooter>
                 )}
             >
-                {hasVBA => (
+                {(isLoadingVBA, hasVBA) => (
                     <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
                         <AvatarWithImagePicker
                             isUploading={this.props.policy.isAvatarUploading}
@@ -176,7 +176,7 @@ class WorkspaceSettingsPage extends React.Component {
                                 onInputChange={currency => this.setState({currency})}
                                 items={this.getCurrencyItems()}
                                 value={this.state.currency}
-                                isDisabled={hasVBA}
+                                isDisabled={isLoadingVBA || hasVBA}
                             />
                         </View>
                         <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>

diff --git 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 && (
                     <WorkspaceBillsNoVBAView policyID={policyID} />
-                ) : (
+                )}
+                {!isLoadingVBA && hasVBA && (
                     <WorkspaceBillsVBAView policyID={policyID} />
                 )}
             </>

diff --git 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 && (
                     <WorkspaceCardNoVBAView policyID={policyID} />
                 )}
 
-                {hasVBA && !isUsingECard && (
+                {!isLoadingVBA && hasVBA && !isUsingECard && (
                     <WorkspaceCardVBANoECardView />
                 )}
 
-                {hasVBA && isUsingECard && (
+                {!isLoadingVBA && hasVBA && isUsingECard && (
                     <WorkspaceCardVBAWithECardView />
                 )}
             </>

diff --git 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 && (
                     <WorkspaceInvoicesNoVBAView policyID={policyID} />
-                ) : (
+                )}
+                {!isLoadingVBA && hasVBA && (
                     <WorkspaceInvoicesVBAView policyID={policyID} />
                 )}
             </>

diff --git 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) => (
-            <WorkspaceReimburseView policyID={policyID} hasVBA={hasVBA} />
+        {(isLoadingVBA, hasVBA, policyID) => (
+            <WorkspaceReimburseView policyID={policyID} isLoadingVBA={isLoadingVBA} hasVBA={hasVBA} />
         )}
     </WorkspacePageWithSections>
 );

diff --git 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 {
                     </View>
                 </Section>
 
-                {this.props.hasVBA === false && (
+                {!this.props.isLoadingVBA && !this.props.hasVBA && (
                     <Section
                         title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')}
                         icon={Illustrations.JewelBoxGreen}
@@ -215,7 +214,7 @@ class WorkspaceReimburseView extends React.Component {
                         />
                     </Section>
                 )}
-                {Boolean(this.props.hasVBA) && (
+                {!this.props.isLoadingVBA && this.props.hasVBA && (
                     <Section
                         title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')}
                         icon={Illustrations.BankUserGreen}
@@ -240,7 +239,6 @@ class WorkspaceReimburseView extends React.Component {
 }
 
 WorkspaceReimburseView.propTypes = propTypes;
-WorkspaceReimburseView.defaultProps = defaultProps;
 WorkspaceReimburseView.displayName = 'WorkspaceReimburseView';
 
 export default compose(

diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js
@@ -25,11 +25,12 @@ const WorkspaceTravelPage = props => (
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
     >
-        {(hasVBA, policyID) => (
+        {(isLoadingVBA, hasVBA, policyID) => (
             <>
-                {!hasVBA ? (
+                {!isLoadingVBA && !hasVBA && (
                     <WorkspaceTravelNoVBAView policyID={policyID} />
-                ) : (
+                )}
+                {!isLoadingVBA && hasVBA && (
                     <WorkspaceTravelVBAView />
                 )}
             </>