Fix back navigation from new invite in confirmation screen

src/ROUTES.ts

@@ -2198,10 +2198,7 @@ const ROUTES = {
         route: 'workspaces/:policyID/company-cards/:feed/assign-card/:cardID/assignee',
         getRoute: (params: WorkspaceCompanyCardsAssignCardParams, backTo?: string) =>
             // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            getUrlWithBackToParam(
-                `workspaces/${params.policyID}/company-cards/${encodeURIComponent(params.feed)}/assign-card/${encodeURIComponent(params.cardID)}/assignee`,
-                backTo,
-            ),
+            getUrlWithBackToParam(`workspaces/${params.policyID}/company-cards/${encodeURIComponent(params.feed)}/assign-card/${encodeURIComponent(params.cardID)}/assignee`, backTo),
     },
     WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_CARD_SELECTION: {
         route: 'workspaces/:policyID/company-cards/:feed/assign-card/:cardID/card-selection',
@@ -2222,10 +2219,7 @@ const ROUTES = {
         route: 'workspaces/:policyID/company-cards/:feed/assign-card/:cardID/confirmation',
         getRoute: (params: WorkspaceCompanyCardsAssignCardParams, backTo?: string) =>
             // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            getUrlWithBackToParam(
-                `workspaces/${params.policyID}/company-cards/${encodeURIComponent(params.feed)}/assign-card/${encodeURIComponent(params.cardID)}/confirmation`,
-                backTo,
-            ),
+            getUrlWithBackToParam(`workspaces/${params.policyID}/company-cards/${encodeURIComponent(params.feed)}/assign-card/${encodeURIComponent(params.cardID)}/confirmation`, backTo),
     },
     WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_INVITE_NEW_MEMBER: {
         route: 'workspaces/:policyID/company-cards/:feed/assign-card/:cardID/invite-new-member',

src/components/Table/TableBody.tsx

@@ -81,8 +81,10 @@ function TableBody<T>({contentContainerStyle, ...props}: TableBodyProps) {
     );
 
     return (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <View style={styles.flex1} {...props}>
+        <View
+            style={styles.flex1}
+            {...props} // eslint-disable-line react/jsx-props-no-spreading
+        >
             <FlashList<T>
                 data={filteredAndSortedData}
                 ListEmptyComponent={isEmptyResult ? EmptyResultComponent : ListEmptyComponent}

src/hooks/useAssignCard.ts

@@ -149,7 +149,7 @@ function useAssignCard({selectedFeed, policyID, setShouldShowOfflineModal}: UseA
         setAssignCardStepAndData({data});
 
         Navigation.setNavigationActionToMicrotaskQueue(() => {
-            const routeParams = {policyID, feed: selectedFeed, cardID: cardID ?? ''};
+            const routeParams = {policyID, feed: selectedFeed, cardID};
 
             switch (currentStep) {
                 case CONST.COMPANY_CARD.STEP.PLAID_CONNECTION:

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -701,7 +701,8 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/AssignCardFeedPage').default,
     [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_ASSIGNEE]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/AssigneeStep').default,
     [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_CARD_SELECTION]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/CardSelectionStep').default,
-    [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_TRANSACTION_START_DATE]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/TransactionStartDateStep').default,
+    [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_TRANSACTION_START_DATE]: () =>
+        require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/TransactionStartDateStep').default,
     [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_CARD_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/CardNameStep').default,
     [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_CONFIRMATION]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/ConfirmationStep').default,
     [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_INVITE_NEW_MEMBER]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/InviteNewMemberStep').default,

src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx

@@ -97,7 +97,7 @@ function WorkspaceCompanyCardTableItem({
     const companyCardFeedIcons = useCompanyCardFeedIcons();
     const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
-    const cardFeedIcon = !plaidIconUrl && getCardFeedIcon(selectedFeed as CompanyCardFeed, illustrations, companyCardFeedIcons) : null;
+    const cardFeedIcon = !plaidIconUrl && getCardFeedIcon(selectedFeed as CompanyCardFeed, illustrations, companyCardFeedIcons);
 
     const {failedCompanyCardAssignment} = item;
     let {cardName, customCardName, cardholder, assignedCard, isAssigned, isCardDeleted} = item;

src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx

@@ -101,11 +101,7 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
         case CONST.COMPANY_CARD.STEP.CARD_NAME:
             return <CardNameStep policyID={policyID} />;
         case CONST.COMPANY_CARD.STEP.CONFIRMATION:
-            return (
-                <ConfirmationStep
-                    route={route}
-                />
-            );
+            return <ConfirmationStep route={route} />;
         case CONST.COMPANY_CARD.STEP.INVITE_NEW_MEMBER:
             return (
                 <InviteNewMemberStep

src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx

@@ -2,7 +2,6 @@ import {format} from 'date-fns';
 import {Str} from 'expensify-common';
 import React, {useEffect, useMemo, useState} from 'react';
 import {Keyboard} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import SelectionList from '@components/SelectionList';
 import UserListItem from '@components/SelectionList/ListItem/UserListItem';
@@ -29,8 +28,7 @@ import {setAssignCardStepAndData} from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
-import type * as OnyxTypes from '@src/types/onyx';
+import type SCREENS from '@src/SCREENS';
 import type {AssignCardData} from '@src/types/onyx/AssignCard';
 
 type AssigneeStepProps = {
@@ -92,7 +90,9 @@ function AssigneeStep({route}: AssigneeStepProps) {
                 data.encryptedCardNumber = assignCard.data.encryptedCardNumber;
                 data.cardNumber = assignCard.data.cardNumber;
                 data.startDate = !isEditing ? format(new Date(), CONST.DATE.FNS_FORMAT_STRING) : (assignCard?.data?.startDate ?? format(new Date(), CONST.DATE.FNS_FORMAT_STRING));
-                data.dateOption = !isEditing ? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM : (assignCard?.data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM);
+                data.dateOption = !isEditing
+                    ? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM
+                    : (assignCard?.data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM);
                 setAssignCardStepAndData({
                     data,
                     isEditing: false,
@@ -124,7 +124,9 @@ function AssigneeStep({route}: AssigneeStepProps) {
             data.encryptedCardNumber = assignCard.data.encryptedCardNumber;
             data.cardNumber = assignCard.data.cardNumber;
             data.startDate = !isEditing ? format(new Date(), CONST.DATE.FNS_FORMAT_STRING) : (assignCard?.data?.startDate ?? format(new Date(), CONST.DATE.FNS_FORMAT_STRING));
-            data.dateOption = !isEditing ? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM : (assignCard?.data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM);
+            data.dateOption = !isEditing
+                ? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM
+                : (assignCard?.data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM);
             setAssignCardStepAndData({
                 data,
                 isEditing: false,

src/pages/workspace/companyCards/assignCard/CardNameStep.tsx

@@ -19,8 +19,7 @@ import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import {setAssignCardStepAndData} from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
+import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/EditExpensifyCardNameForm';
 
 type CardNameStepProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_CARD_NAME>;
@@ -32,8 +31,6 @@ function CardNameStep({route}: CardNameStepProps) {
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true});
 
     const policyID = route.params.policyID;
-    const feed = route.params.feed;
-    const cardID = route.params.cardID;
 
     const data = assignCard?.data;
 

src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx

@@ -30,7 +30,7 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
+import type SCREENS from '@src/SCREENS';
 import type {CompanyCardFeedWithDomainID} from '@src/types/onyx';
 
 type CardSelectionStepProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_CARD_SELECTION>;

src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx

@@ -9,16 +9,13 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useCardFeeds from '@hooks/useCardFeeds';
-import useInitial from '@hooks/useInitial';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
-import useRootNavigationState from '@hooks/useRootNavigationState';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWorkspaceAccountID from '@hooks/useWorkspaceAccountID';
 import {getCompanyCardFeed, getDomainOrWorkspaceAccountID, getPlaidCountry, getPlaidInstitutionId, isSelectedFeedExpired, maskCardNumber} from '@libs/CardUtils';
-import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
@@ -28,7 +25,7 @@ import {assignWorkspaceCompanyCard, clearAssignCardStepAndData, setAddNewCompany
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
+import type SCREENS from '@src/SCREENS';
 import type {CompanyCardFeedWithDomainID, CurrencyList} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 
@@ -43,9 +40,6 @@ function ConfirmationStep({route}: ConfirmationStepProps) {
     const {isOffline} = useNetwork();
 
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: false});
-    const firstAssigneeEmail = useInitial(assignCard?.data?.email);
-    const shouldUseBackToParam = !firstAssigneeEmail || firstAssigneeEmail === assignCard?.data?.email;
-    const backTo = shouldUseBackToParam ? route.params?.backTo : undefined;
     const policy = usePolicy(policyID);
     const [countryByIp] = useOnyx(ONYXKEYS.COUNTRY, {canBeMissing: false});
     const [currencyList = getEmptyObject<CurrencyList>()] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: true});
@@ -64,23 +58,15 @@ function ConfirmationStep({route}: ConfirmationStepProps) {
     const cardholderEmail = data?.email ?? '';
     const cardholderAccountID = cardholder?.accountID;
 
-    const currentFullScreenRoute = useRootNavigationState((state) => state?.routes?.findLast((route) => isFullScreenName(route.name)));
-
     useEffect(() => {
         if (!assignCard?.isAssignmentFinished) {
             return;
         }
 
-        if (backTo) {
-            Navigation.goBack(backTo);
-        } else if (!shouldUseBackToParam && route.params?.backTo) {
-            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID), {forceReplace: true});
-        } else {
-            Navigation.dismissModal();
-        }
+        Navigation.dismissModal();
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         InteractionManager.runAfterInteractions(() => clearAssignCardStepAndData());
-    }, [assignCard?.isAssignmentFinished, backTo, policyID, shouldUseBackToParam, route.params?.backTo, currentFullScreenRoute?.state?.routes]);
+    }, [assignCard?.isAssignmentFinished]);
 
     const submit = () => {
         if (!policyID) {
@@ -113,19 +99,21 @@ function ConfirmationStep({route}: ConfirmationStepProps) {
 
         switch (step) {
             case CONST.COMPANY_CARD.STEP.ASSIGNEE:
-                Navigation.goBack();
+                Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_ASSIGNEE.getRoute(routeParams));
                 break;
             case CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE:
                 Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_TRANSACTION_START_DATE.getRoute(routeParams));
                 break;
             case CONST.COMPANY_CARD.STEP.CARD_NAME:
                 Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_CARD_NAME.getRoute(routeParams));
                 break;
+            default:
+                break;
         }
     };
 
     const handleBackButtonPress = () => {
-        Navigation.goBack();
+        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_ASSIGNEE.getRoute({policyID, feed, cardID}));
     };
 
     return (

src/pages/workspace/companyCards/assignCard/InviteNewMemberStep.tsx

@@ -13,12 +13,12 @@ import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavig
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import Navigation from '@navigation/Navigation';
 import WorkspaceInviteMessageComponent from '@pages/workspace/members/WorkspaceInviteMessageComponent';
-import {clearInviteDraft} from '@userActions/Policy/Member';
 import {setAssignCardStepAndData} from '@userActions/CompanyCards';
+import {clearInviteDraft} from '@userActions/Policy/Member';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
+import type SCREENS from '@src/SCREENS';
 import type {AssignCardData} from '@src/types/onyx/AssignCard';
 
 type InviteeNewMemberStepProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_INVITE_NEW_MEMBER> &
@@ -28,11 +28,10 @@ function InviteNewMemberStep({route, currentUserPersonalDetails}: InviteeNewMemb
     const {translate} = useLocalize();
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true});
     const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: false});
-    const isEditing = assignCard?.isEditing;
     const policyID = route.params.policyID;
     const feed = route.params.feed as CompanyCardFeedWithDomainID;
     const cardID = route.params.cardID;
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
     const [list] = useCardsList(feed);
     const [cardFeeds] = useCardFeeds(policy?.id);
     const filteredCardList = getFilteredCardList(list, cardFeeds?.[feed]?.accountList, workspaceCardFeeds);
@@ -63,7 +62,7 @@ function InviteNewMemberStep({route, currentUserPersonalDetails}: InviteeNewMemb
         if (assignCard?.data?.encryptedCardNumber) {
             data.encryptedCardNumber = assignCard.data.encryptedCardNumber;
             data.cardNumber = assignCard.data.cardNumber;
-            data.startDate = assignCard?.data?.startDate ?? new Date().toISOString().split('T')[0];
+            data.startDate = assignCard?.data?.startDate ?? new Date().toISOString().split('T').at(0);
             data.dateOption = assignCard?.data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM;
             setAssignCardStepAndData({
                 currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION,
@@ -74,7 +73,7 @@ function InviteNewMemberStep({route, currentUserPersonalDetails}: InviteeNewMemb
         } else if (hasOnlyOneCardToAssign(filteredCardList)) {
             data.cardNumber = Object.keys(filteredCardList).at(0);
             data.encryptedCardNumber = Object.values(filteredCardList).at(0);
-            data.startDate = assignCard?.data?.startDate ?? new Date().toISOString().split('T')[0];
+            data.startDate = assignCard?.data?.startDate ?? new Date().toISOString().split('T').at(0);
             data.dateOption = assignCard?.data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM;
             setAssignCardStepAndData({
                 currentStep: CONST.COMPANY_CARD.STEP.CONFIRMATION,

src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

@@ -1,5 +1,4 @@
 import {format, subDays} from 'date-fns';
-import {Str} from 'expensify-common';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
@@ -11,29 +10,19 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import {isRequiredFulfilled} from '@libs/ValidationUtils';
 import Navigation from '@navigation/Navigation';
 import {setAssignCardStepAndData} from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 
-function TransactionStartDateStep({route}: {route: PlatformStackRouteProp<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_TRANSACTION_START_DATE>}) {
+function TransactionStartDateStep() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const policyID = route.params.policyID;
-    const feed = route.params.feed;
-    const cardID = route.params.cardID;
-
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true});
     const isEditing = assignCard?.isEditing;
     const data = assignCard?.data;
-    const assigneeDisplayName = Str.removeSMSDomain(getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? '');
 
     const [dateOptionSelected, setDateOptionSelected] = useState(data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.CUSTOM);
     const [errorText, setErrorText] = useState('');
@@ -96,7 +85,6 @@ function TransactionStartDateStep({route}: {route: PlatformStackRouteProp<Settin
             wrapperID="TransactionStartDateStep"
             handleBackButtonPress={handleBackButtonPress}
             headerTitle={translate('workspace.companyCards.assignCard')}
-            headerSubtitle={assigneeDisplayName}
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.startDateDescription')}</Text>