handle offline mode for bank connection

src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx

@@ -4,6 +4,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import CardRowSkeleton from '@components/Skeletons/CardRowSkeleton';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
@@ -19,6 +20,7 @@ type WorkspaceCompanyCardsFeedAddedEmptyPageProps = {
 function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAssignCardButton}: WorkspaceCompanyCardsFeedAddedEmptyPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
 
     return (
         <EmptyStateComponent
@@ -36,7 +38,7 @@ function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAs
                     buttonAction: handleAssignCard,
                     icon: Expensicons.Plus,
                     success: true,
-                    isDisabled: isDisabledAssignCardButton,
+                    isDisabled: isDisabledAssignCardButton ?? isOffline,
                 },
             ]}
         />

src/pages/workspace/companyCards/addNew/BankConnection/index.tsx

@@ -2,12 +2,14 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import BlockingView from '@components/BlockingViews/BlockingView';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {checkIfNewFeedConnected} from '@libs/CardUtils';
@@ -37,6 +39,7 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     const prevFeedsData = usePrevious(cardFeeds?.settings?.oAuthAccountDetails);
     const [shouldBlockWindowOpen, setShouldBlockWindowOpen] = useState(false);
     const {isNewFeedConnected, newFeed} = useMemo(() => checkIfNewFeedConnected(prevFeedsData ?? {}, cardFeeds?.settings?.oAuthAccountDetails ?? {}), [cardFeeds, prevFeedsData]);
+    const {isOffline} = useNetwork();
 
     const url = getCompanyCardBankConnection(policyID, bankName);
 
@@ -68,7 +71,7 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     );
 
     useEffect(() => {
-        if (!url) {
+        if (!url || isOffline) {
             return;
         }
         if (isNewFeedConnected) {
@@ -83,24 +86,26 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         if (!shouldBlockWindowOpen) {
             customWindow = openBankConnection(url);
         }
-    }, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url]);
+    }, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url, isOffline]);
 
     return (
         <ScreenWrapper testID={BankConnection.displayName}>
             <HeaderWithBackButton
                 title={translate('workspace.companyCards.addCards')}
                 onBackButtonPress={handleBackButtonPress}
             />
-            <BlockingView
-                icon={Illustrations.PendingBank}
-                iconWidth={styles.pendingBankCardIllustration.width}
-                iconHeight={styles.pendingBankCardIllustration.height}
-                title={translate('workspace.moreFeatures.companyCards.pendingBankTitle')}
-                linkKey="workspace.moreFeatures.companyCards.pendingBankLink"
-                CustomSubtitle={CustomSubtitle}
-                shouldShowLink
-                onLinkPress={onOpenBankConnectionFlow}
-            />
+            <FullPageOfflineBlockingView>
+                <BlockingView
+                    icon={Illustrations.PendingBank}
+                    iconWidth={styles.pendingBankCardIllustration.width}
+                    iconHeight={styles.pendingBankCardIllustration.height}
+                    title={translate('workspace.moreFeatures.companyCards.pendingBankTitle')}
+                    linkKey="workspace.moreFeatures.companyCards.pendingBankLink"
+                    CustomSubtitle={CustomSubtitle}
+                    shouldShowLink
+                    onLinkPress={onOpenBankConnectionFlow}
+                />
+            </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
 }