Extracted connect bank account into seperate component, and added off…

…line message
Expensify · Jul 7, 2023 · 763371a · 763371a
1 parent 5723571
commit 763371a
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 54 deletions.
diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import * as ReimbursementAccount from '../libs/actions/ReimbursementAccount';
+import * as Expensicons from './Icon/Expensicons';
+import styles from '../styles/styles';
+import Button from './Button';
+import {withNetwork} from './OnyxProvider';
+import compose from '../libs/compose';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import networkPropTypes from './networkPropTypes';
+import Text from './Text';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
+    /** PolicyID for navigating to bank account route of that policy */
+    policyID: PropTypes.string.isRequired,
+
+    /** Button styles, also applied for offline message wrapper */
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+const defaultProps = {
+    style: [],
+};
+
+function ConnectBankAccountButton(props) {
+    if (props.network.isOffline) {
+        return (
+            <View style={props.style}>
+                <Text>{`${props.translate('common.youAppearToBeOffline')} ${props.translate('common.thisFeatureRequiresInternet')}`}</Text>
+            </View>
+        );
+    }
+
+    return (
+        <Button
+            text={props.translate('workspace.common.connectBankAccount')}
+            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+            icon={Expensicons.Bank}
+            style={props.style}
+            iconStyles={[styles.buttonCTAIcon]}
+            shouldShowRightIcon
+            large
+            success
+        />
+    );
+}
+
+ConnectBankAccountButton.propTypes = propTypes;
+ConnectBankAccountButton.defaultProps = defaultProps;
+ConnectBankAccountButton.displayName = 'ConfirmPopover';
+
+export default compose(withNetwork(), withLocalize)(ConnectBankAccountButton);
diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -4,12 +4,10 @@ import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
-import Button from '../../../components/Button';
-import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
+import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -31,15 +29,9 @@ function WorkspaceBillsNoVBAView(props) {
                 <View style={[styles.mv3]}>
                     <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
                 </View>
-                <Button
-                    text={props.translate('workspace.common.connectBankAccount')}
-                    onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                    icon={Expensicons.Bank}
+                <ConnectBankAccountButton
+                    policyID={props.policyID}
                     style={[styles.mt4]}
-                    iconStyles={[styles.buttonCTAIcon]}
-                    shouldShowRightIcon
-                    large
-                    success
                 />
             </Section>
         </>

diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -4,12 +4,10 @@ import {View} from 'react-native';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import UnorderedList from '../../../components/UnorderedList';
 import Section from '../../../components/Section';
-import Button from '../../../components/Button';
-import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
+import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -36,15 +34,9 @@ function WorkspaceCardNoVBAView(props) {
                     props.translate('workspace.card.benefit4'),
                 ]}
             />
-            <Button
-                text={props.translate('workspace.common.connectBankAccount')}
-                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                icon={Expensicons.Bank}
+            <ConnectBankAccountButton
+                policyID={props.policyID}
                 style={[styles.mt6]}
-                iconStyles={[styles.mr5]}
-                shouldShowRightIcon
-                large
-                success
             />
         </Section>
     );

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -4,12 +4,10 @@ import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
 import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
-import Button from '../../../components/Button';
-import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
+import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -31,15 +29,9 @@ function WorkspaceInvoicesNoVBAView(props) {
                 <View style={[styles.mv3]}>
                     <Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>
                 </View>
-                <Button
-                    text={props.translate('workspace.common.connectBankAccount')}
-                    onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                    icon={Expensicons.Bank}
+                <ConnectBankAccountButton
+                    policyID={props.policyID}
                     style={[styles.mt4]}
-                    iconStyles={[styles.buttonCTAIcon]}
-                    shouldShowRightIcon
-                    large
-                    success
                 />
             </Section>
         </>

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -10,12 +10,11 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
 import * as Link from '../../../libs/actions/Link';
-import Button from '../../../components/Button';
 import BankAccount from '../../../libs/models/BankAccount';
 import * as ReimbursementAccountProps from '../../ReimbursementAccount/reimbursementAccountPropTypes';
-import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
 import networkPropTypes from '../../../components/networkPropTypes';
 import CONST from '../../../CONST';
+import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';
 
 const propTypes = {
     /** Policy values needed in the component */
@@ -118,15 +117,9 @@ class WorkspaceReimburseSection extends React.Component {
                         <View style={[styles.mv3]}>
                             <Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text>
                         </View>
-                        <Button
-                            text={this.props.translate('workspace.common.connectBankAccount')}
-                            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(this.props.policy.id)}
-                            icon={Expensicons.Bank}
+                        <ConnectBankAccountButton
+                            policyID={this.props.policy.id}
                             style={[styles.mt4]}
-                            iconStyles={[styles.buttonCTAIcon]}
-                            shouldShowRightIcon
-                            large
-                            success
                         />
                     </Section>
                 )}

diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -4,11 +4,9 @@ import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
-import Button from '../../../components/Button';
-import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
+import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -27,15 +25,9 @@ function WorkspaceTravelNoVBAView(props) {
                 <View style={[styles.mv3]}>
                     <Text>{props.translate('workspace.travel.noVBACopy')}</Text>
                 </View>
-                <Button
-                    text={props.translate('workspace.common.connectBankAccount')}
-                    onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                    icon={Expensicons.Bank}
+                <ConnectBankAccountButton
+                    policyID={props.policyID}
                     style={[styles.mt4]}
-                    iconStyles={[styles.buttonCTAIcon]}
-                    shouldShowRightIcon
-                    large
-                    success
                 />
             </Section>
         </>