Go back to the workspace member details page if the card creation fro…

…m was initiated from there

src/ROUTES.ts

@@ -917,7 +917,7 @@ const ROUTES = {
     },
     WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: {
         route: 'settings/workspaces/:policyID/expensify-card/issue-new',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/issue-new` as const,
+        getRoute: (policyID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/issue-new`, backTo),
     },
     WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT: {
         route: 'settings/workspaces/:policyID/expensify-card/choose-bank-account',

src/libs/Navigation/types.ts

@@ -676,6 +676,7 @@ type SettingsNavigatorParamList = {
     };
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
         policyID: string;
+        backTo?: Routes;
     };
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: {
         policyID: string;

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

@@ -49,12 +49,17 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa
 
     const sortedCards = useMemo(() => CardUtils.sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);
 
+    const issueCard = () => {
+        const activeRoute = Navigation.getActiveRoute();
+        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute));
+    };
+
     const getHeaderButtons = () => (
         <View style={[styles.w100, styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>
             <Button
                 medium
                 success
-                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID))}
+                onPress={issueCard}
                 icon={Expensicons.Plus}
                 text={translate('workspace.expensifyCard.issueCard')}
                 style={shouldUseNarrowLayout && styles.flex1}

src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx

@@ -19,14 +19,18 @@ import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
 import type {IssueNewCardStep} from '@src/types/onyx/Card';
 
 type ConfirmationStepProps = {
-    // ID of the policy that the card will be issued under
+    /** ID of the policy that the card will be issued under */
     policyID: string;
+
+    /** Route to navigate to */
+    backTo?: Route;
 };
 
-function ConfirmationStep({policyID}: ConfirmationStepProps) {
+function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -37,7 +41,7 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
 
     const submit = () => {
         Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data);
-        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
+        Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
         Card.clearIssueNewCardFlow();
     };
 

src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx

@@ -1,23 +1,29 @@
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
+import type {SettingsNavigatorParamList} from '@navigation/types';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
 import AssigneeStep from './AssigneeStep';
 import CardNameStep from './CardNameStep';
 import CardTypeStep from './CardTypeStep';
 import ConfirmationStep from './ConfirmationStep';
 import LimitStep from './LimitStep';
 import LimitTypeStep from './LimitTypeStep';
 
-function IssueNewCardPage({policy}: WithPolicyAndFullscreenLoadingProps) {
+type IssueNewCardPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW>;
+
+function IssueNewCardPage({policy, route}: IssueNewCardPageProps) {
     const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD);
 
     const {currentStep} = issueNewCard ?? {};
 
     const policyID = policy?.id ?? '-1';
+    const backTo = route.params.backTo;
 
     // TODO: add logic to skip Assignee step when the flow is started from the member's profile page
     useEffect(() => {
@@ -36,7 +42,12 @@ function IssueNewCardPage({policy}: WithPolicyAndFullscreenLoadingProps) {
         case CONST.EXPENSIFY_CARD.STEP.CARD_NAME:
             return <CardNameStep />;
         case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION:
-            return <ConfirmationStep policyID={policyID} />;
+            return (
+                <ConfirmationStep
+                    policyID={policyID}
+                    backTo={backTo}
+                />
+            );
         default:
             return <AssigneeStep policy={policy} />;
     }

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -139,14 +139,16 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     );
 
     const navigateToIssueNewCard = useCallback(() => {
+        const activeRoute = Navigation.getActiveRoute();
+
         Card.setIssueNewCardStepAndData({
             step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE,
             data: {
                 assigneeEmail: memberLogin,
             },
             isEditing: false,
         });
-        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID));
+        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute));
     }, [memberLogin, policyID]);
 
     const openRoleSelectionModal = useCallback(() => {

src/pages/workspace/withPolicy.tsx

@@ -47,6 +47,7 @@ type PolicyRoute = RouteProp<
     | typeof SCREENS.WORKSPACE.REPORT_FIELDS_VALUE_SETTINGS
     | typeof SCREENS.WORKSPACE.ACCOUNTING.CARD_RECONCILIATION
     | typeof SCREENS.WORKSPACE.RULES
+    | typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW
 >;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {