diff --git a/contributingGuides/NAVIGATION.md b/contributingGuides/NAVIGATION.md index 7805934961a1..0fcb2b5de756 100644 --- a/contributingGuides/NAVIGATION.md +++ b/contributingGuides/NAVIGATION.md @@ -389,6 +389,7 @@ Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-243338180 5. Click Group name field. 6. Click Save. 7. Verify if the app returs to group details RHP after saving group name. + #### Going up to a screen with any params Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-2432694948 @@ -400,7 +401,7 @@ Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-243269494 5. Select any country. 6. Verify that the country you selected is actually visible in the form. -### Change params of existing attachments screens instead of pushing new screen on the stack +#### Change params of existing attachments screens instead of pushing new screen on the stack Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-2432360626 @@ -411,7 +412,7 @@ Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-243236062 5. Close the modal with X in the corner. 6. Verify that the modal is now fully closed. -### Navigate instead of push for reports with same reportID +#### Navigate instead of push for reports with same reportID Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-2433351709 @@ -426,9 +427,24 @@ Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-243335170 9. Verify that you are on the A report. -### Don't push the default full screen route if not necessary. +#### Don't push the default full screen route if not necessary. 1. Open app on wide layout web. 2. Open search tab. 3. Press track expense. -4. Verify that the split navigator hasn't changed under the overlay. \ No newline at end of file +4. Verify that the split navigator hasn't changed under the overlay. + +#### BA - Back button on connect bank account modal opens incorporation state modal + +Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-2433261611 + +Precondition: Use staging server (it can be set in Settings >> Troubleshoot) + +1. Launch the app. +2. Navigate to Settings >> Workspaces >> Workspace >> Workflows. +3. Select Connect with Plaid option. +4. Go through the Plaid flow (Added Wells Fargo details). +5. Complete the Personal info, Company info & agreements section. +6. Note user redirected to page with the header Connect bank account and the option to disconnect your now set up bank account. +7. Tap back button on connect bank account modal. +8. Verify if the connect bank account modal is closed and the Workflows page is opened with the bank account added. \ No newline at end of file diff --git a/src/components/StateSelector.tsx b/src/components/StateSelector.tsx index 5248af98cfac..e2be9281d0bb 100644 --- a/src/components/StateSelector.tsx +++ b/src/components/StateSelector.tsx @@ -91,7 +91,7 @@ function StateSelector( onPress={() => { const activeRoute = Navigation.getActiveRoute(); didOpenStateSelector.current = true; - Navigation.goUp(stateSelectorRoute.getRoute(stateCode, activeRoute, label), {compareParams: false}); + Navigation.navigate(stateSelectorRoute.getRoute(stateCode, activeRoute, label)); }} wrapperStyle={wrapperStyle} /> diff --git a/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx b/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx index 2a42f1922bf8..6771820d7ace 100644 --- a/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx @@ -1,6 +1,5 @@ -import {useNavigation, useRoute} from '@react-navigation/native'; +import {useRoute} from '@react-navigation/native'; import {CONST as COMMON_CONST} from 'expensify-common'; -import isEmpty from 'lodash/isEmpty'; import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -9,8 +8,8 @@ import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; -import searchCountryOptions from '@libs/searchCountryOptions'; import type {CountryData} from '@libs/searchCountryOptions'; +import searchCountryOptions from '@libs/searchCountryOptions'; import StringUtils from '@libs/StringUtils'; import {appendParam} from '@libs/Url'; import type {Route} from '@src/ROUTES'; @@ -25,7 +24,6 @@ type RouteParams = { function StateSelectionPage() { const route = useRoute(); - const navigation = useNavigation(); const {translate} = useLocalize(); const [searchValue, setSearchValue] = useState(''); @@ -57,26 +55,15 @@ function StateSelectionPage() { (option: CountryData) => { const backTo = params?.backTo ?? ''; - // Determine navigation action based on "backTo" presence and route stack length. - if (navigation.getState()?.routes.length === 1) { - // If this is the only page in the navigation stack (examples include direct navigation to this page via URL or page reload). - if (isEmpty(backTo)) { - // No "backTo": default back navigation. - Navigation.goBack(); - } else { - // "backTo" provided: navigate back to "backTo" with state parameter. - Navigation.goBack(appendParam(backTo, 'state', option.value)); - } - } else if (!isEmpty(backTo)) { - // Most common case: Navigation stack has multiple routes and "backTo" is defined: navigate to "backTo" with state parameter. - Navigation.navigate(appendParam(backTo, 'state', option.value)); - } else { - // This is a fallback block and should never execute if StateSelector is correctly appending the "backTo" route. - // Navigation stack has multiple routes but no "backTo" defined: default back navigation. + // Check the "backTo" parameter to decide navigation behavior + if (!backTo) { Navigation.goBack(); + } else { + // Set compareParams to false because we want to goUp to this particular screen and update params (state). + Navigation.goUp(appendParam(backTo, 'state', option.value), {compareParams: false}); } }, - [navigation, params?.backTo], + [params?.backTo], ); return ( diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 0170ff04ca6a..cb9e5006f76d 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -49,7 +49,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { if (!isSuccessful) { return; } - Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1')); + Navigation.goUp(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1')); Card.clearIssueNewCardFlow(); }, [backTo, policyID, isSuccessful]); diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index 9b5e00559379..9c8ee84a1da8 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -1,3 +1,4 @@ +import {useNavigationState} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; @@ -63,6 +64,7 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa const isInitialCreationFlow = approvalWorkflow?.action === CONST.APPROVAL_WORKFLOW.ACTION.CREATE && !route.params.backTo; const defaultApprover = policy?.approver ?? policy?.owner; const firstApprover = approvalWorkflow?.approvers?.[0]?.email ?? ''; + const rhpRoutes = useNavigationState((state) => state.routes); useEffect(() => { const currentApprover = approvalWorkflow?.approvers[approverIndex]; @@ -163,9 +165,11 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa if (approvalWorkflow?.action === CONST.APPROVAL_WORKFLOW.ACTION.CREATE) { Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_NEW.getRoute(route.params.policyID)); } else { - Navigation.goBack(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover)); + // If in the navigation state we have a RHP page to which we can return, then we call Navigation.goBack without any parameters + const backTo = rhpRoutes.length > 1 ? undefined : ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover); + Navigation.goBack(backTo); } - }, [approvalWorkflow?.action, firstApprover, approverIndex, personalDetails, employeeList, route.params.policyID, selectedApproverEmail]); + }, [selectedApproverEmail, approvalWorkflow?.action, employeeList, personalDetails, approverIndex, route.params.policyID, rhpRoutes.length, firstApprover]); const button = useMemo(() => { let buttonText = isInitialCreationFlow ? translate('common.next') : translate('common.save');