From ef0b1bdd6787d196f57cc84f99ae9c6115b0cfbb Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Tue, 30 Jan 2024 16:12:45 +0100
Subject: [PATCH 1/2] migrate ConnectBankAccountButton to TypeScript

---
 src/components/ConnectBankAccountButton.js  | 57 ---------------------
 src/components/ConnectBankAccountButton.tsx | 44 ++++++++++++++++
 2 files changed, 44 insertions(+), 57 deletions(-)
 delete mode 100644 src/components/ConnectBankAccountButton.js
 create mode 100644 src/components/ConnectBankAccountButton.tsx

diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
deleted file mode 100644
index f036918d9429..000000000000
--- a/src/components/ConnectBankAccountButton.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
-import Navigation from '@libs/Navigation/Navigation';
-import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
-import Button from './Button';
-import * as Expensicons from './Icon/Expensicons';
-import networkPropTypes from './networkPropTypes';
-import {withNetwork} from './OnyxProvider';
-import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-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) {
-    const styles = useThemeStyles();
-    const activeRoute = Navigation.getActiveRouteWithoutParams();
-    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, activeRoute)}
-            icon={Expensicons.Bank}
-            style={props.style}
-            iconStyles={[styles.buttonCTAIcon]}
-            shouldShowRightIcon
-            large
-            success
-        />
-    );
-}
-
-ConnectBankAccountButton.propTypes = propTypes;
-ConnectBankAccountButton.defaultProps = defaultProps;
-ConnectBankAccountButton.displayName = 'ConnectBankAccountButton';
-
-export default compose(withNetwork(), withLocalize)(ConnectBankAccountButton);
diff --git a/src/components/ConnectBankAccountButton.tsx b/src/components/ConnectBankAccountButton.tsx
new file mode 100644
index 000000000000..1ad8cbb4901b
--- /dev/null
+++ b/src/components/ConnectBankAccountButton.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
+import Button from './Button';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+
+type ConnectBankAccountButtonProps = {
+    policyID: string;
+    style: StyleProp<ViewStyle>;
+};
+
+function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonProps) {
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+    const activeRoute = Navigation.getActiveRouteWithoutParams();
+    
+    return isOffline ? (
+        <View style={style}>
+            <Text>{`${translate('common.youAppearToBeOffline')} ${translate('common.thisFeatureRequiresInternet')}`}</Text>
+        </View>
+    ) : (
+        <Button
+            text={translate('workspace.common.connectBankAccount')}
+            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(policyID, activeRoute)}
+            icon={Expensicons.Bank}
+            style={style}
+            iconStyles={[styles.buttonCTAIcon]}
+            shouldShowRightIcon
+            large
+            success
+        />
+    );
+}
+
+ConnectBankAccountButton.displayName = 'ConnectBankAccountButton';
+
+export default ConnectBankAccountButton;

From 0812bb4594989276997f66013560808380ce50a9 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Wed, 31 Jan 2024 15:02:48 +0100
Subject: [PATCH 2/2] apply suggested changes

---
 src/components/ConnectBankAccountButton.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ConnectBankAccountButton.tsx b/src/components/ConnectBankAccountButton.tsx
index 1ad8cbb4901b..aed1c88ab1d1 100644
--- a/src/components/ConnectBankAccountButton.tsx
+++ b/src/components/ConnectBankAccountButton.tsx
@@ -11,8 +11,11 @@ import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
 
 type ConnectBankAccountButtonProps = {
+    /** PolicyID for navigating to bank account route of that policy */
     policyID: string;
-    style: StyleProp<ViewStyle>;
+
+    /** Button styles, also applied for offline message wrapper */
+    style?: StyleProp<ViewStyle>;
 };
 
 function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonProps) {
@@ -20,7 +23,7 @@ function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonPro
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const activeRoute = Navigation.getActiveRouteWithoutParams();
-    
+
     return isOffline ? (
         <View style={style}>
             <Text>{`${translate('common.youAppearToBeOffline')} ${translate('common.thisFeatureRequiresInternet')}`}</Text>
@@ -31,7 +34,7 @@ function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonPro
             onPress={() => ReimbursementAccount.navigateToBankAccountRoute(policyID, activeRoute)}
             icon={Expensicons.Bank}
             style={style}
-            iconStyles={[styles.buttonCTAIcon]}
+            iconStyles={styles.buttonCTAIcon}
             shouldShowRightIcon
             large
             success