From 763371a48a009ced29af1934b8e0d18603b368ca Mon Sep 17 00:00:00 2001
From: Ali Toshmatov <alitoshmatov2001@gmail.com>
Date: Fri, 7 Jul 2023 14:48:03 +0500
Subject: [PATCH 1/2] Extracted connect bank account into seperate component,
 and added offline message

---
 src/components/ConnectBankAccountButton.js    | 58 +++++++++++++++++++
 .../bills/WorkspaceBillsNoVBAView.js          | 14 +----
 .../workspace/card/WorkspaceCardNoVBAView.js  | 14 +----
 .../invoices/WorkspaceInvoicesNoVBAView.js    | 14 +----
 .../reimburse/WorkspaceReimburseSection.js    | 13 +----
 .../travel/WorkspaceTravelNoVBAView.js        | 14 +----
 6 files changed, 73 insertions(+), 54 deletions(-)
 create mode 100644 src/components/ConnectBankAccountButton.js

diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
new file mode 100644
index 000000000000..d41fdf0b69d3
--- /dev/null
+++ 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
index e99d157a4733..8c16cbb195cc 100644
--- 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
index da93946a6191..b1a1dcf0b793 100644
--- 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
index c37e739c3b97..5348e49ee599 100644
--- 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
index 3e73f018c23a..a53cc01d51d2 100644
--- 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
index 8716ee930206..254162e29aed 100644
--- 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>
         </>

From c24da6a89a4d19c501a8698442df541af1978824 Mon Sep 17 00:00:00 2001
From: Ali Toshmatov <alitoshmatov2001@gmail.com>
Date: Mon, 10 Jul 2023 10:45:36 +0500
Subject: [PATCH 2/2] Used ternary operator, and updated component display name

---
 src/components/ConnectBankAccountButton.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
index d41fdf0b69d3..b62d46170768 100644
--- a/src/components/ConnectBankAccountButton.js
+++ b/src/components/ConnectBankAccountButton.js
@@ -29,15 +29,11 @@ const defaultProps = {
 };
 
 function ConnectBankAccountButton(props) {
-    if (props.network.isOffline) {
-        return (
-            <View style={props.style}>
-                <Text>{`${props.translate('common.youAppearToBeOffline')} ${props.translate('common.thisFeatureRequiresInternet')}`}</Text>
-            </View>
-        );
-    }
-
-    return (
+    return props.network.isOffline ? (
+        <View style={props.style}>
+            <Text>{`${props.translate('common.youAppearToBeOffline')} ${props.translate('common.thisFeatureRequiresInternet')}`}</Text>
+        </View>
+    ) : (
         <Button
             text={props.translate('workspace.common.connectBankAccount')}
             onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
@@ -53,6 +49,6 @@ function ConnectBankAccountButton(props) {
 
 ConnectBankAccountButton.propTypes = propTypes;
 ConnectBankAccountButton.defaultProps = defaultProps;
-ConnectBankAccountButton.displayName = 'ConfirmPopover';
+ConnectBankAccountButton.displayName = 'ConnectBankAccountButton';
 
 export default compose(withNetwork(), withLocalize)(ConnectBankAccountButton);