handle offline mode for bank connection

src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

@@ -2,13 +2,15 @@ import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {ActivityIndicator} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import DecisionModal from '@components/DecisionModal';
 import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {checkIfFeedConnectionIsBroken, getCompanyFeeds, getFilteredCardList, getSelectedFeed, hasOnlyOneCardToAssign, isSelectedFeedExpired} from '@libs/CardUtils';
+import {checkIfFeedConnectionIsBroken, getCompanyFeeds, getFilteredCardList, getSelectedFeed, hasOnlyOneCardToAssign, isCustomFeed, isSelectedFeedExpired} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
@@ -56,7 +58,8 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const isFeedAdded = !isPending && !isNoFeed;
     const isFeedExpired = isSelectedFeedExpired(selectedFeed ? cardFeeds?.settings?.oAuthAccountDetails?.[selectedFeed] : undefined);
     const isFeedConnectionBroken = checkIfFeedConnectionIsBroken(cards);
-
+    const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const fetchCompanyCards = useCallback(() => {
         openPolicyCompanyCardsPage(policyID, workspaceAccountID);
     }, [policyID, workspaceAccountID]);
@@ -82,6 +85,16 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
         if (!selectedFeed) {
             return;
         }
+
+        const isCommercialFeed = isCustomFeed(selectedFeed);
+
+        // If the feed is a direct feed (not a commercial feed) and the user is offline,
+        // show the offline alert modal to inform them of the connectivity issue.
+        if (!isCommercialFeed && isOffline) {
+            setShouldShowOfflineModal(true);
+            return;
+        }
+
         const data: Partial<AssignCardData> = {
             bankName: selectedFeed,
         };
@@ -159,6 +172,16 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
                 onClose={() => setIsNoDelegateAccessMenuVisible(false)}
             />
+
+            <DecisionModal
+                title={translate('common.youAppearToBeOffline')}
+                prompt={translate('common.offlinePrompt')}
+                isSmallScreenWidth={shouldUseNarrowLayout}
+                onSecondOptionSubmit={() => setShouldShowOfflineModal(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={shouldShowOfflineModal}
+                onClose={() => setShouldShowOfflineModal(false)}
+            />
         </AccessOrNotFoundWrapper>
     );
 }

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

@@ -1,12 +1,14 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 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';
@@ -42,6 +44,7 @@ function BankConnection({policyID: policyIDFromProps, route}: BankConnectionStep
     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);
 
@@ -77,7 +80,7 @@ function BankConnection({policyID: policyIDFromProps, route}: BankConnectionStep
     );
 
     useEffect(() => {
-        if (!url) {
+        if (!url || isOffline) {
             return;
         }
         if (isNewFeedConnected) {
@@ -92,24 +95,26 @@ function BankConnection({policyID: policyIDFromProps, route}: BankConnectionStep
         if (!shouldBlockWindowOpen) {
             customWindow = openBankConnection(url);
         }
-    }, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url]);
+    }, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url, isOffline]);
 
     return (
         <ScreenWrapper testID={BankConnection.displayName}>
             <HeaderWithBackButton
                 title={!backTo ? translate('workspace.companyCards.addCards') : undefined}
                 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>
     );
 }