Skip to content

Card assignment flow errors handling #58630

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

Merged
mountiny merged 7 commits into from
Mar 21, 2025
Merged

Card assignment flow errors handling #58630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6a99bf9
Show assignCard error on the confirmation page
VickyStash Mar 18, 2025
ac68c1f
Improve broken connection handling on the confirmation step
VickyStash Mar 18, 2025
e95c239
Minor improvements
VickyStash Mar 18, 2025
8c846ef
Lint fixes
VickyStash Mar 18, 2025
d2fe813
Minor fix
VickyStash Mar 19, 2025
a5af621
Merge branch 'refs/heads/main' into VickyStash/feature/56546-assign-c…
VickyStash Mar 20, 2025
6bb60ca
Minor fix
VickyStash Mar 20, 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
15 changes: 15 additions & 0 deletions src/libs/actions/CompanyCards.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,13 +314,23 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
[optimisticCardAssignedReportAction.reportActionID]: optimisticCardAssignedReportAction,
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.ASSIGN_CARD,
value: {isAssigning: true},
},
],
successData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyExpenseChat?.reportID}`,
value: {[optimisticCardAssignedReportAction.reportActionID]: {pendingAction: null}},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.ASSIGN_CARD,
value: {isAssigned: true, isAssigning: false},
Copy link
Contributor

@mountiny mountiny Mar 21, 2025

Choose a reason for hiding this comment

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

Where is the isAssigned reset? Kinda feels like we need to make sure its always reset to false when the flow finishes or new one starts

Copy link
Contributor Author

@VickyStash VickyStash Mar 21, 2025

Choose a reason for hiding this comment

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

Here we call clearAssignCardStepAndData:

App/src/libs/actions/CompanyCards.ts

Lines 45 to 47 in 1a2963c

function clearAssignCardStepAndData() {
Onyx.set(ONYXKEYS.ASSIGN_CARD, {});
}

It clears out everything under ONYXKEYS.ASSIGN_CARD key including isAssigned field.

Copy link
Contributor

@mountiny mountiny Mar 21, 2025

Choose a reason for hiding this comment

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

great, thanks!

},
],
failureData: [
{
Expand All @@ -333,6 +343,11 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
},
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.ASSIGN_CARD,
value: {isAssigning: false},
},
],
};

Expand Down
5 changes: 3 additions & 2 deletions src/pages/workspace/companyCards/BankConnection/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
const theme = useTheme();
const webViewRef = useRef<WebView>(null);
const [session] = useOnyx(ONYXKEYS.SESSION);
const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
const authToken = session?.authToken ?? null;
const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
const {bankName: bankNameFromRoute, backTo, policyID: policyIDFromRoute} = route?.params ?? {};
Expand Down Expand Up @@ -92,7 +93,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
// Handle assign card flow
if (feed && !isFeedExpired) {
setAssignCardStepAndData({
currentStep: CONST.COMPANY_CARD.STEP.ASSIGNEE,
currentStep: assignCard?.data?.dateOption ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.ASSIGNEE,
isEditing: false,
});
return;
Expand All @@ -105,7 +106,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
}
Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
}
}, [isNewFeedConnected, newFeed, policyID, url, feed, isFeedExpired]);
}, [isNewFeedConnected, newFeed, policyID, url, feed, isFeedExpired, assignCard]);

const checkIfConnectionCompleted = (navState: WebViewNavigation) => {
if (!navState.url.includes(ROUTES.BANK_CONNECTION_COMPLETE)) {
Expand Down
5 changes: 3 additions & 2 deletions src/pages/workspace/companyCards/BankConnection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
const styles = useThemeStyles();
const {translate} = useLocalize();
const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
const {bankName: bankNameFromRoute, backTo, policyID: policyIDFromRoute} = route?.params ?? {};
const policyID = policyIDFromProps ?? policyIDFromRoute;
const workspaceAccountID = useWorkspaceAccountID(policyID);
Expand Down Expand Up @@ -108,7 +109,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
if (!isFeedExpired) {
customWindow?.close();
setAssignCardStepAndData({
currentStep: CONST.COMPANY_CARD.STEP.ASSIGNEE,
currentStep: assignCard?.data?.dateOption ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.ASSIGNEE,
isEditing: false,
});
return;
Expand All @@ -130,7 +131,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
if (!shouldBlockWindowOpen) {
customWindow = openBankConnection(url);
}
}, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url, feed, isFeedExpired, isOffline]);
}, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url, feed, isFeedExpired, isOffline, assignCard]);

return (
<ScreenWrapper testID={BankConnection.displayName}>
Expand Down
2 changes: 1 addition & 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 @@ -64,7 +64,6 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
const isNoFeed = !selectedFeedData;
const isPending = !!selectedFeedData?.pending;
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();
Expand Down Expand Up @@ -111,6 +110,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {

let currentStep: AssignCardStep = CONST.COMPANY_CARD.STEP.ASSIGNEE;
const employeeList = Object.values(policy?.employeeList ?? {}).filter((employee) => !isDeletedPolicyEmployee(employee, isOffline));
const isFeedExpired = isSelectedFeedExpired(selectedFeed ? cardFeeds?.settings?.oAuthAccountDetails?.[selectedFeed] : undefined);

if (employeeList.length === 1) {
const userEmail = Object.keys(policy?.employeeList ?? {}).at(0) ?? '';
Expand Down
67 changes: 47 additions & 20 deletions src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import React from 'react';
import {View} from 'react-native';
import React, {useEffect} from 'react';
import {InteractionManager, View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CardUtils from '@libs/CardUtils';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import useWorkspaceAccountID from '@hooks/useWorkspaceAccountID';
import {isSelectedFeedExpired, maskCardNumber} from '@libs/CardUtils';
import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
import Navigation from '@navigation/Navigation';
import * as CompanyCards from '@userActions/CompanyCards';
import {assignWorkspaceCompanyCard, clearAssignCardStepAndData, setAssignCardStepAndData} from '@userActions/CompanyCards';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {Route} from '@src/ROUTES';
import type {CompanyCardFeed} from '@src/types/onyx';
import type {AssignCardStep} from '@src/types/onyx/AssignCard';

type ConfirmationStepProps = {
Expand All @@ -31,27 +34,43 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isOffline} = useNetwork();
const workspaceAccountID = useWorkspaceAccountID(policyID);

const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
const feed = assignCard?.data?.bankName as CompanyCardFeed | undefined;
const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);

const data = assignCard?.data;
const cardholderName = PersonalDetailsUtils.getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? '';
const cardholderName = getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? '';

useEffect(() => {
if (!assignCard?.isAssigned) {
return;
}
Navigation.navigate(backTo ?? ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
InteractionManager.runAfterInteractions(() => clearAssignCardStepAndData());
}, [assignCard, backTo, policyID]);

const submit = () => {
if (!policyID) {
return;
}
CompanyCards.assignWorkspaceCompanyCard(policyID, data);
Navigation.navigate(backTo ?? ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
CompanyCards.clearAssignCardStepAndData();

const isFeedExpired = isSelectedFeedExpired(feed ? cardFeeds?.settings?.oAuthAccountDetails?.[feed] : undefined);

if (isFeedExpired) {
setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.BANK_CONNECTION});
return;
}
assignWorkspaceCompanyCard(policyID, data);
};

const editStep = (step: AssignCardStep) => {
CompanyCards.setAssignCardStepAndData({currentStep: step, isEditing: true});
setAssignCardStepAndData({currentStep: step, isEditing: true});
};

const handleBackButtonPress = () => {
CompanyCards.setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE});
setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE});
};

return (
Expand All @@ -77,7 +96,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
/>
<MenuItemWithTopDescription
description={translate('workspace.companyCards.card')}
title={CardUtils.maskCardNumber(data?.cardNumber ?? '', data?.bankName)}
title={maskCardNumber(data?.cardNumber ?? '', data?.bankName)}
shouldShowRightIcon
onPress={() => editStep(CONST.COMPANY_CARD.STEP.CARD)}
/>
Expand All @@ -94,14 +113,22 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
onPress={() => editStep(CONST.COMPANY_CARD.STEP.CARD_NAME)}
/>
<View style={[styles.mh5, styles.pb5, styles.mt3, styles.flexGrow1, styles.justifyContentEnd]}>
<Button
isDisabled={isOffline}
success
large
style={styles.w100}
onPress={submit}
text={translate('workspace.companyCards.assignCard')}
/>
<OfflineWithFeedback
shouldDisplayErrorAbove
errors={assignCard?.errors}
errorRowStyles={styles.mv2}
canDismissError={false}
>
<Button
isDisabled={isOffline}
success
large
isLoading={assignCard?.isAssigning}
style={styles.w100}
onPress={submit}
text={translate('workspace.companyCards.assignCard')}
/>
</OfflineWithFeedback>
</View>
</ScrollView>
</InteractiveStepWrapper>
Expand Down
6 changes: 6 additions & 0 deletions src/types/onyx/AssignCard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ type AssignCard = {

/** Whether the user is editing step */
isEditing: boolean;

/** Whether the card is successfully assigned */
isAssigned?: boolean;

/** Whether the card is assigning */
isAssigning?: boolean;
};

export type {AssignCard, AssignCardStep, AssignCardData};