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 11 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
4 changes: 3 additions & 1 deletion src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,6 +20,7 @@ type WorkspaceCompanyCardsFeedAddedEmptyPageProps = {
function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAssignCardButton}: WorkspaceCompanyCardsFeedAddedEmptyPageProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isOffline} = useNetwork();

return (
<EmptyStateComponent
Expand All @@ -36,7 +38,7 @@ function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAs
buttonAction: handleAssignCard,
icon: Expensicons.Plus,
success: true,
isDisabled: isDisabledAssignCardButton,
isDisabled: isOffline || isDisabledAssignCardButton,
Copy link
Contributor

Choose a reason for hiding this comment

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

@huult is this for both direct and custom feeds? this change should only be for direct feeds because only then we might be opening the popuo window

Copy link
Contributor

Choose a reason for hiding this comment

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

Oops! I missed interpreting the expectation correctly here. Thanks for pointing out.

On thinking further, I am not that sure if we would get an empty page for direct feeds. If the empty cards page is not applicable for direct feeds, no changes are needed here. But looks like some more understanding is needed here.

And it looks like we may have to make changes in the header buttons here by considering isOffline and isCustomFeed

Copy link
Contributor

Choose a reason for hiding this comment

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

On thinking further, I am not that sure if we would get an empty page for direct feeds. If the empty cards page is not applicable for direct feeds, no changes are needed here. But looks like some more understanding is needed here.

Feed added empty state can occur for direct feeds also. The test video in OP also demonstrates this. So, we need to disable Assign card here only for Direct feed.

And it looks like we may have to make changes in the header buttons here by considering isOffline and isCustomFeed

I think no change has to be made to the Assign card button in the card list header.
@mountiny Is this understanding correct?

Copy link
Contributor

Choose a reason for hiding this comment

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

@rojiphil @huult Sorry i feel like this still was not addressed, we only need to do this for the direct feeds that need to open the web view to authenticate directly with the bank

},
]}
/>
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
Loading