Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handle offline mode for bank connection #55338

Merged
merged 16 commits into from
Feb 4, 2025
Merged

handle offline mode for bank connection #55338

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0b6e8a8
handle offline mode for bank connection
huult Jan 16, 2025
9cfd06b
fix eslint
huult Jan 16, 2025
b233a3b
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Jan 19, 2025
822de82
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Jan 20, 2025
86490d8
Disable assign card button when offline
huult Jan 20, 2025
f115b9b
Update dependencies
huult Jan 20, 2025
399f7fc
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Jan 22, 2025
7ce7b83
Update condition to disable button
huult Jan 22, 2025
bcf33be
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Jan 26, 2025
9835df5
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Feb 3, 2025
4327547
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Feb 3, 2025
da198cc
add offline alert modal for direct feed
huult Feb 3, 2025
fb84a50
Update download button and remove unused actions
huult Feb 4, 2025
84e050f
Merge remote-tracking branch 'upstream/main' into 55096-direct-card-f…
huult Feb 4, 2025
adf01fb
change to DecisionModal
huult Feb 4, 2025
82aafc1
fix lint
huult Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ 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 ConfirmModal from '@components/ConfirmModal';
import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
import * as Illustrations from '@components/Icon/Illustrations';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
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';
Expand Down Expand Up @@ -56,6 +57,7 @@ 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 fetchCompanyCards = useCallback(() => {
openPolicyCompanyCardsPage(policyID, workspaceAccountID);
Expand All @@ -82,6 +84,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,
};
Expand Down Expand Up @@ -159,6 +171,15 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
onClose={() => setIsNoDelegateAccessMenuVisible(false)}
/>
<ConfirmModal
title={translate('common.youAppearToBeOffline')}
isVisible={shouldShowOfflineModal}
onConfirm={() => setShouldShowOfflineModal(false)}
confirmText={translate('common.buttonConfirm')}
prompt={translate('common.offlinePrompt')}
shouldShowCancelButton={false}
success={false}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! This change is not required as we need to keep the color green.

I was referring to the download action in search page where the button size is small and color is grey. There, button size needs to be large and color green as per comment. Is this a quick change? If not, maybe we can do this in a separate PR as mentioned here

Screenshot 2025-02-04 at 10 05 02 AM

This comment was marked as outdated.

Sign in to view

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is DecisionModal. I have changed the offline modal to use the DecisionModal component. This is the same as the image above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rojiphil But the button is grey. If we want this button to be green, we must introduce new props.Do we implement this in this pull request?

App/src/components/DecisionModal.tsx

Lines 67 to 71 in ab40264

<Button
style={[styles.mt3, styles.noSelect]}
onPress={onSecondOptionSubmit}
text={secondOptionText}
/>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we are talking about changing the default modal, a separate PR may be better as mentioned here.
Let us leave it to @mountiny to decide on this.
Meanwhile, I will complete the checklist.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah lets do that separately

/>
</AccessOrNotFoundWrapper>
);
}
Expand Down
29 changes: 17 additions & 12 deletions src/pages/workspace/companyCards/addNew/BankConnection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -77,7 +80,7 @@ function BankConnection({policyID: policyIDFromProps, route}: BankConnectionStep
);

useEffect(() => {
if (!url) {
if (!url || isOffline) {
return;
}
if (isNewFeedConnected) {
Expand All @@ -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>
);
}
Expand Down