diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts index fdd6c363b1724..6b62b58f2e272 100644 --- a/src/libs/actions/CompanyCards.ts +++ b/src/libs/actions/CompanyCards.ts @@ -314,6 +314,11 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial(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 ?? {}; @@ -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; @@ -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)) { diff --git a/src/pages/workspace/companyCards/BankConnection/index.tsx b/src/pages/workspace/companyCards/BankConnection/index.tsx index 5365110641051..999a98fb9618b 100644 --- a/src/pages/workspace/companyCards/BankConnection/index.tsx +++ b/src/pages/workspace/companyCards/BankConnection/index.tsx @@ -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); @@ -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; @@ -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 ( diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx index 94b8369977bac..825c54ca938ab 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx @@ -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(); @@ -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) ?? ''; diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx index a5fdbb6d1433a..e887e3eec9178 100644 --- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx @@ -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 = { @@ -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 ( @@ -77,7 +96,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { /> editStep(CONST.COMPANY_CARD.STEP.CARD)} /> @@ -94,14 +113,22 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { onPress={() => editStep(CONST.COMPANY_CARD.STEP.CARD_NAME)} /> -