Merge pull request #124 from software-mansion-labs/poc/split-bank-acc…

…ount-flow-fixes

Poc/split bank account flow fixes

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.
+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.

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}
         />

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 (

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]);
 

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');