diff --git a/src/pages/iou/request/step/IOURequestStepUpgrade.tsx b/src/pages/iou/request/step/IOURequestStepUpgrade.tsx index a281f1fdfd88..0e40247046f8 100644 --- a/src/pages/iou/request/step/IOURequestStepUpgrade.tsx +++ b/src/pages/iou/request/step/IOURequestStepUpgrade.tsx @@ -12,6 +12,7 @@ import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {setTransactionReport} from '@libs/actions/Transaction'; import type CreateWorkspaceParams from '@libs/API/parameters/CreateWorkspaceParams'; +import getPlatform from '@libs/getPlatform'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types'; @@ -22,6 +23,7 @@ import {setCustomUnitRateID, setMoneyRequestParticipants} from '@userActions/IOU import CONST from '@src/CONST'; import * as Policy from '@src/libs/actions/Policy/Policy'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; @@ -48,6 +50,8 @@ function IOURequestStepUpgrade({ const isDistanceRateUpgrade = upgradePath === CONST.UPGRADE_PATHS.DISTANCE_RATES; const isCategorizing = upgradePath === CONST.UPGRADE_PATHS.CATEGORIES; const isReporting = upgradePath === CONST.UPGRADE_PATHS.REPORTS; + const platform = getPlatform(); + const isWebOrDesktop = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP; const feature = useMemo( () => @@ -57,6 +61,17 @@ function IOURequestStepUpgrade({ [upgradePath], ); + const navigateWithMicrotask = useCallback( + (route: Route) => { + if (isWebOrDesktop) { + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(route)); + } else { + Navigation.navigate(route); + } + }, + [isWebOrDesktop], + ); + const afterUpgradeAcknowledged = useCallback(() => { const expenseReportID = policyDataRef.current?.expenseChatReportID ?? reportID; const policyID = policyDataRef.current?.policyID; @@ -83,18 +98,21 @@ function IOURequestStepUpgrade({ // Let the confirmation step decide the distance rate because policy data is not fully available at this step setCustomUnitRateID(transactionID, '-1'); Navigation.setParams({reportID: expenseReportID}); - Navigation.navigate(ROUTES.WORKSPACE_CREATE_DISTANCE_RATE.getRoute(policyID, transactionID, expenseReportID)); + + navigateWithMicrotask(ROUTES.WORKSPACE_CREATE_DISTANCE_RATE.getRoute(policyID, transactionID, expenseReportID)); break; } case CONST.UPGRADE_PATHS.REPORTS: - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_REPORT.getRoute(action, CONST.IOU.TYPE.SUBMIT, transactionID, reportID)); + navigateWithMicrotask(ROUTES.MONEY_REQUEST_STEP_REPORT.getRoute(action, CONST.IOU.TYPE.SUBMIT, transactionID, reportID)); + break; case CONST.UPGRADE_PATHS.CATEGORIES: - Navigation.navigate(backTo ?? ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, CONST.IOU.TYPE.SUBMIT, transactionID, reportID)); + navigateWithMicrotask(backTo ?? ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, CONST.IOU.TYPE.SUBMIT, transactionID, reportID)); + break; default: } - }, [action, backTo, reportID, shouldSubmitExpense, transactionID, upgradePath]); + }, [action, backTo, navigateWithMicrotask, reportID, shouldSubmitExpense, transactionID, upgradePath]); const adminParticipant = useMemo(() => { const participant = transaction?.participants?.[0];