Merge pull request #35412 from JKobrynski/migrateConnectBankAccountBu…

…ttonToTypeScript

[TS migration] Migrate 'ConnectBankAccountButton.js' component to TypeScript

src/components/ConnectBankAccountButton.tsx

@@ -0,0 +1,47 @@
+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 for navigating to bank account route of that policy */
+    policyID: string;
+
+    /** Button styles, also applied for offline message wrapper */
+    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;