Refactor Workspace pages that use fetchFreePlanVerifiedBankAccount #12331

src/libs/actions/BankAccounts.js

@@ -321,6 +321,10 @@ function verifyIdentityForBankAccount(bankAccountID, onfidoData) {
     }, getVBBADataForOnyx());
 }
 
+function openWorkspaceView() {
+    API.read('OpenWorkspaceView');
+}
+
 export {
     addPersonalBankAccount,
     connectBankAccountManually,
@@ -329,6 +333,7 @@ export {
     clearOnfidoToken,
     connectBankAccountWithPlaid,
     deletePaymentBankAccount,
+    openWorkspaceView,
     updateBeneficialOwnersForBankAccount,
     updateCompanyInformationForBankAccount,
     updatePersonalInformationForBankAccount,

src/pages/workspace/WorkspacePageWithSections.js

@@ -12,19 +12,11 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ONYXKEYS from '../../ONYXKEYS';
-import * as BankAccounts from '../../libs/actions/BankAccounts';
-import BankAccount from '../../libs/models/BankAccount';
-import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
 import userPropTypes from '../settings/userPropTypes';
 import withPolicy from './withPolicy';
-import {withNetwork} from '../../components/OnyxProvider';
-import networkPropTypes from '../../components/networkPropTypes';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 
 const propTypes = {
-    /** Information about the network from Onyx */
-    network: networkPropTypes.isRequired,
-
     /** The text to display in the header */
     headerText: PropTypes.string.isRequired,
 
@@ -37,10 +29,6 @@ const propTypes = {
         }).isRequired,
     }).isRequired,
 
-    /** From Onyx */
-    /** Bank account currently in setup */
-    reimbursementAccount: reimbursementAccountPropTypes,
-
     /** User Data from Onyx */
     user: userPropTypes,
 
@@ -67,72 +55,49 @@ const propTypes = {
 const defaultProps = {
     children: () => {},
     user: {},
-    reimbursementAccount: {},
     footer: null,
     guidesCallTaskID: '',
     shouldUseScrollView: false,
 };
 
-class WorkspacePageWithSections extends React.Component {
-    componentDidMount() {
-        this.fetchData();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (!prevProps.network.isOffline || this.props.network.isOffline) {
-            return;
-        }
-
-        this.fetchData();
-    }
-
-    fetchData() {
-        const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
-        BankAccounts.fetchFreePlanVerifiedBankAccount('', achState);
-    }
-
-    render() {
-        const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
-        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');
-
-        return (
-            <ScreenWrapper>
-                <FullPageNotFoundView shouldShowBackButton={false} shouldShow={_.isEmpty(this.props.policy)}>
-                    <HeaderWithCloseButton
-                        title={this.props.headerText}
-                        subtitle={policyName}
-                        shouldShowGetAssistanceButton
-                        guidesCallTaskID={this.props.guidesCallTaskID}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                    />
-                    {this.props.shouldUseScrollView
-                        ? (
-                            <ScrollView
-                                keyboardShouldPersistTaps="handled"
-                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                            >
-                                <View style={[styles.w100, styles.flex1]}>
-
-                                    {this.props.children(hasVBA, policyID, isUsingECard)}
-
-                                </View>
-                            </ScrollView>
-                        )
-                        : this.props.children(hasVBA, policyID, isUsingECard)}
-                    {this.props.footer}
-                </FullPageNotFoundView>
-            </ScreenWrapper>
-        );
-    }
-}
+const WorkspacePageWithSections = (props) => {
+    const isUsingECard = lodashGet(props.user, 'isUsingExpensifyCard', false);
+    const policyID = lodashGet(props.route, 'params.policyID');
+    const policyName = lodashGet(props.policy, 'name');
+
+    return (
+        <ScreenWrapper>
+            <FullPageNotFoundView shouldShowBackButton={false} shouldShow={_.isEmpty(props.policy)}>
+                <HeaderWithCloseButton
+                    title={props.headerText}
+                    subtitle={policyName}
+                    shouldShowGetAssistanceButton
+                    guidesCallTaskID={props.guidesCallTaskID}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
+                    onCloseButtonPress={() => Navigation.dismissModal()}
+                />
+                {props.shouldUseScrollView
+                    ? (
+                        <ScrollView
+                            keyboardShouldPersistTaps="handled"
+                            style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                        >
+                            <View style={[styles.w100, styles.flex1]}>
+                                {props.children(policyID, isUsingECard)}
+                            </View>
+                        </ScrollView>
+                    )
+                    : props.children(policyID, isUsingECard)}
+                {props.footer}
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+};
 
-WorkspacePageWithSections.propTypes = propTypes;
 WorkspacePageWithSections.defaultProps = defaultProps;
+WorkspacePageWithSections.displayName = 'WorkspacePageWithSections';
+WorkspacePageWithSections.propTypes = propTypes;
 
 export default compose(
     withLocalize,
@@ -145,5 +110,4 @@ export default compose(
         },
     }),
     withPolicy,
-    withNetwork(),
 )(WorkspacePageWithSections);

src/pages/workspace/WorkspaceSettingsPage.js

@@ -11,9 +11,12 @@ import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
 import Icon from '../../components/Icon';
 import * as Expensicons from '../../components/Icon/Expensicons';
+import * as BankAccounts from '../../libs/actions/BankAccounts';
 import AvatarWithImagePicker from '../../components/AvatarWithImagePicker';
+import BankAccount from '../../libs/models/BankAccount';
 import defaultTheme from '../../styles/themes/default';
 import CONST from '../../CONST';
+import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
 import Picker from '../../components/Picker';
 import TextInput from '../../components/TextInput';
 import WorkspacePageWithSections from './WorkspacePageWithSections';
@@ -24,6 +27,10 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 import Form from '../../components/Form';
 
 const propTypes = {
+    /** From Onyx */
+    /** Bank account currently in setup */
+    reimbursementAccount: reimbursementAccountPropTypes,
+
     ...policyPropTypes,
     ...withLocalizePropTypes,
 };
@@ -41,6 +48,10 @@ class WorkspaceSettingsPage extends React.Component {
         this.validate = this.validate.bind(this);
     }
 
+    componentDidMount() {
+        BankAccounts.openWorkspaceView();
+    }
+
     /**
      * @returns {Object[]}
      */
@@ -71,14 +82,16 @@ class WorkspaceSettingsPage extends React.Component {
     }
 
     render() {
+        const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
+        const hasVBBA = achState === BankAccount.STATE.OPEN;
         return (
             <FullPageNotFoundView shouldShow={_.isEmpty(this.props.policy)}>
                 <WorkspacePageWithSections
                     headerText={this.props.translate('workspace.common.settings')}
                     route={this.props.route}
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
                 >
-                    {hasVBA => (
+                    {() => (
                         <Form
                             formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
                             submitButtonText={this.props.translate('workspace.editor.save')}
@@ -126,7 +139,7 @@ class WorkspaceSettingsPage extends React.Component {
                                         inputID="currency"
                                         label={this.props.translate('workspace.editor.currencyInputLabel')}
                                         items={this.getCurrencyItems()}
-                                        isDisabled={hasVBA}
+                                        isDisabled={hasVBBA}
                                         defaultValue={this.props.policy.outputCurrency}
                                     />
                                 </View>
@@ -148,7 +161,12 @@ WorkspaceSettingsPage.defaultProps = defaultProps;
 export default compose(
     withPolicy,
     withOnyx({
-        currencyList: {key: ONYXKEYS.CURRENCY_LIST},
+        currencyList: {
+            key: ONYXKEYS.CURRENCY_LIST,
+        },
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
     }),
     withLocalize,
     withNetwork(),

src/pages/workspace/bills/WorkspaceBillsPage.js

@@ -1,12 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import * as BankAccounts from '../../../libs/actions/BankAccounts';
+import BankAccount from '../../../libs/models/BankAccount';
+import compose from '../../../libs/compose';
+import CONST from '../../../CONST';
+import ONYXKEYS from '../../../ONYXKEYS';
+import reimbursementAccountPropTypes from '../../ReimbursementAccount/reimbursementAccountPropTypes';
+import withPolicy from '../withPolicy';
 import WorkspaceBillsNoVBAView from './WorkspaceBillsNoVBAView';
 import WorkspaceBillsVBAView from './WorkspaceBillsVBAView';
 import WorkspacePageWithSections from '../WorkspacePageWithSections';
-import CONST from '../../../CONST';
 
 const propTypes = {
+    /** Bank account currently in setup */
+    reimbursementAccount: reimbursementAccountPropTypes,
+
     /** The route object passed to this page from the navigator */
     route: PropTypes.shape({
         /** Each parameter passed via the URL */
@@ -19,26 +30,49 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceBillsPage = props => (
-    <WorkspacePageWithSections
-        shouldUseScrollView
-        headerText={props.translate('workspace.common.bills')}
-        route={props.route}
-        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
-    >
-        {(hasVBA, policyID) => (
-            <>
-                {!hasVBA && (
-                    <WorkspaceBillsNoVBAView policyID={policyID} />
-                )}
-                {hasVBA && (
-                    <WorkspaceBillsVBAView policyID={policyID} />
+const defaultProps = {
+    reimbursementAccount: {},
+};
+
+class WorkspaceBillsPage extends React.Component {
+    componentDidMount() {
+        BankAccounts.openWorkspaceView();
+    }
+
+    render() {
+        const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
+        const hasVBBA = achState === BankAccount.STATE.OPEN;
+        return (
+            <WorkspacePageWithSections
+                shouldUseScrollView
+                headerText={this.props.translate('workspace.common.bills')}
+                route={this.props.route}
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
+            >
+                {policyID => (
+                    <>
+                        {!hasVBBA && (
+                            <WorkspaceBillsNoVBAView policyID={policyID} />
+                        )}
+                        {hasVBBA && (
+                            <WorkspaceBillsVBAView policyID={policyID} />
+                        )}
+                    </>
                 )}
-            </>
-        )}
-    </WorkspacePageWithSections>
-);
+            </WorkspacePageWithSections>
+        );
+    }
+}
 
 WorkspaceBillsPage.propTypes = propTypes;
-WorkspaceBillsPage.displayName = 'WorkspaceBillsPage';
-export default withLocalize(WorkspaceBillsPage);
+WorkspaceBillsPage.defaultProps = defaultProps;
+
+export default compose(
+    withPolicy,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+    withLocalize,
+)(WorkspaceBillsPage);