Merge pull request #42385 from software-mansion-labs/@kosmydel/detail…

…s-revamp/remove-details-page

cleanup: remove DetailsPage.tsx

src/ROUTES.ts

@@ -60,13 +60,13 @@ const ROUTES = {
         getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}` as const,
     },
     CHAT_FINDER: 'chat-finder',
-    DETAILS: {
-        route: 'details',
-        getRoute: (login: string) => `details?login=${encodeURIComponent(login)}` as const,
-    },
     PROFILE: {
         route: 'a/:accountID',
-        getRoute: (accountID: string | number, backTo?: string) => getUrlWithBackToParam(`a/${accountID}`, backTo),
+        getRoute: (accountID?: string | number, backTo?: string, login?: string) => {
+            const baseRoute = getUrlWithBackToParam(`a/${accountID}`, backTo);
+            const loginParam = login ? `?login=${encodeURIComponent(login)}` : '';
+            return `${baseRoute}${loginParam}` as const;
+        },
     },
     PROFILE_AVATAR: {
         route: 'a/:accountID/avatar',

src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

@@ -69,7 +69,7 @@ function MentionUserRenderer({style, tnode, TDefaultRenderer, currentUserPersona
         asMutable(tnodeClone).data = tnodeClone.data.replace(mentionDisplayText, Str.removeSMSDomain(getShortMentionIfFound(mentionDisplayText, htmlAttributeAccountID)));
 
         accountID = PersonalDetailsUtils.getAccountIDsByLogins([mentionDisplayText])?.[0];
-        navigationRoute = ROUTES.DETAILS.getRoute(mentionDisplayText);
+        navigationRoute = ROUTES.PROFILE.getRoute(accountID, undefined, mentionDisplayText);
         mentionDisplayText = Str.removeSMSDomain(mentionDisplayText);
     } else {
         // If neither an account ID or email is provided, don't render anything

src/components/PromotedActionsBar.tsx

@@ -16,7 +16,7 @@ type PromotedAction = {
 } & ThreeDotsMenuItem;
 
 type PromotedActionsType = Record<'pin' | 'share', (report: OnyxReport) => PromotedAction> & {
-    message: (accountID: number) => PromotedAction;
+    message: (params: {accountID?: number; login?: string}) => PromotedAction;
 };
 
 const PromotedActions = {
@@ -28,11 +28,20 @@ const PromotedActions = {
         key: 'share',
         ...HeaderUtils.getShareMenuItem(report),
     }),
-    message: (accountID) => ({
+    message: ({accountID, login}) => ({
         key: 'message',
         icon: Expensicons.CommentBubbles,
         text: Localize.translateLocal('common.message'),
-        onSelected: () => ReportActions.navigateToAndOpenReportWithAccountIDs([accountID]),
+        onSelected: () => {
+            // The accountID might be optimistic, so we should use the login if we have it
+            if (login) {
+                ReportActions.navigateToAndOpenReport([login]);
+                return;
+            }
+            if (accountID) {
+                ReportActions.navigateToAndOpenReportWithAccountIDs([accountID]);
+            }
+        },
     }),
 } satisfies PromotedActionsType;
 

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

@@ -4,7 +4,6 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import type {
     AddPersonalBankAccountNavigatorParamList,
-    DetailsNavigatorParamList,
     EditRequestNavigatorParamList,
     EnablePaymentsNavigatorParamList,
     FlagCommentNavigatorParamList,
@@ -104,10 +103,6 @@ const SplitDetailsModalStackNavigator = createModalStackNavigator<SplitDetailsNa
     [SCREENS.SPLIT_DETAILS.ROOT]: () => require('../../../../pages/iou/SplitBillDetailsPage').default as React.ComponentType,
 });
 
-const DetailsModalStackNavigator = createModalStackNavigator<DetailsNavigatorParamList>({
-    [SCREENS.DETAILS_ROOT]: () => require('../../../../pages/DetailsPage').default as React.ComponentType,
-});
-
 const ProfileModalStackNavigator = createModalStackNavigator<ProfileNavigatorParamList>({
     [SCREENS.PROFILE_ROOT]: () => require('../../../../pages/ProfilePage').default as React.ComponentType,
 });
@@ -383,7 +378,6 @@ const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportPa
 
 export {
     AddPersonalBankAccountModalStackNavigator,
-    DetailsModalStackNavigator,
     EditRequestStackNavigator,
     EnablePaymentsStackNavigator,
     FlagCommentStackNavigator,

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -48,10 +48,6 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
                         name={SCREENS.RIGHT_MODAL.NEW_CHAT}
                         component={ModalStackNavigators.NewChatModalStackNavigator}
                     />
-                    <Stack.Screen
-                        name={SCREENS.RIGHT_MODAL.DETAILS}
-                        component={ModalStackNavigators.DetailsModalStackNavigator}
-                    />
                     <Stack.Screen
                         name={SCREENS.RIGHT_MODAL.PROFILE}
                         component={ModalStackNavigators.ProfileModalStackNavigator}

src/libs/Navigation/linkingConfig/config.ts

@@ -617,11 +617,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.I_AM_A_TEACHER]: ROUTES.I_AM_A_TEACHER,
                     },
                 },
-                [SCREENS.RIGHT_MODAL.DETAILS]: {
-                    screens: {
-                        [SCREENS.DETAILS_ROOT]: ROUTES.DETAILS.route,
-                    },
-                },
                 [SCREENS.RIGHT_MODAL.PROFILE]: {
                     screens: {
                         [SCREENS.PROFILE_ROOT]: ROUTES.PROFILE.route,

src/libs/Navigation/types.ts

@@ -432,6 +432,7 @@ type ProfileNavigatorParamList = {
     [SCREENS.PROFILE_ROOT]: {
         accountID: string;
         reportID: string;
+        login?: string;
         backTo: Routes;
     };
 };

src/pages/ProfilePage.tsx

@@ -27,6 +27,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 import * as ReportUtils from '@libs/ReportUtils';
+import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import type {ProfileNavigatorParamList} from '@navigation/types';
 import * as PersonalDetailsActions from '@userActions/PersonalDetails';
@@ -94,10 +95,31 @@ function ProfilePage({route}: ProfilePageProps) {
     const {translate, formatPhoneNumber} = useLocalize();
     const accountID = Number(route.params?.accountID ?? 0);
     const isCurrentUser = session?.accountID === accountID;
+
     const isValidAccountID = ValidationUtils.isValidAccountRoute(accountID);
-    const details: PersonalDetails | EmptyObject = personalDetails?.[accountID] ?? (isValidAccountID ? {} : {accountID: 0});
+    const loginParams = route.params?.login;
+
+    const details = useMemo((): PersonalDetails | EmptyObject => {
+        // Check if we have the personal details already in Onyx
+        if (personalDetails?.[accountID]) {
+            return personalDetails?.[accountID] ?? {};
+        }
+        // Check if we have the login param
+        if (!loginParams) {
+            return isValidAccountID ? {} : {accountID: 0};
+        }
+        // Look up the personal details by login
+        const foundDetails = Object.values(personalDetails ?? {}).find((personalDetail) => personalDetail?.login === loginParams?.toLowerCase());
+        if (foundDetails) {
+            return foundDetails;
+        }
+        // If we don't have the personal details in Onyx, we can create an optimistic account
+        const optimisticAccountID = UserUtils.generateAccountID(loginParams);
+        return {accountID: optimisticAccountID, login: loginParams, displayName: loginParams};
+    }, [personalDetails, accountID, loginParams, isValidAccountID]);
 
     const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(details, undefined, undefined, isCurrentUser);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const fallbackIcon = details?.fallbackIcon ?? '';
     const login = details?.login ?? '';
     const timezone = details?.timezone;
@@ -136,10 +158,10 @@ function ProfilePage({route}: ProfilePageProps) {
 
     // eslint-disable-next-line rulesdir/prefer-early-return
     useEffect(() => {
-        if (ValidationUtils.isValidAccountRoute(accountID)) {
+        if (ValidationUtils.isValidAccountRoute(accountID) && !loginParams) {
             PersonalDetailsActions.openPublicProfilePage(accountID);
         }
-    }, [accountID]);
+    }, [accountID, loginParams]);
 
     const promotedActions = useMemo(() => {
         const result: PromotedAction[] = [];
@@ -148,10 +170,10 @@ function ProfilePage({route}: ProfilePageProps) {
         }
 
         if (!isCurrentUser && !SessionActions.isAnonymousUser()) {
-            result.push(PromotedActions.message(accountID));
+            result.push(PromotedActions.message({accountID, login: loginParams}));
         }
         return result;
-    }, [accountID, isCurrentUser, report]);
+    }, [accountID, isCurrentUser, loginParams, report]);
 
     return (
         <ScreenWrapper testID={ProfilePage.displayName}>