feat: promoted actions in ProfilePage

Expensify · May 16, 2024 · 6cb2ef2 · 6cb2ef2
1 parent 6d1e40e
commit 6cb2ef2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx
@@ -5,6 +5,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as HeaderUtils from '@libs/HeaderUtils';
+import * as Localize from '@libs/Localize';
 import * as ReportActions from '@userActions/Report';
 import type OnyxReport from '@src/types/onyx/Report';
 import Button from './Button';
@@ -20,7 +21,7 @@ type ReportPromotedAction = (report: OnyxReport) => PromotedAction;
 
 type PromotedActionsType = {
     pin: ReportPromotedAction;
-    // message: (accountID: number) => PromotedAction;
+    message: (accountID: number) => PromotedAction;
     // join: ReportPromotedAction;
     // share: ReportPromotedAction;
     // hold: () => PromotedAction;
@@ -31,13 +32,12 @@ const PromotedActions = {
         key: 'pin',
         ...HeaderUtils.getPinMenuItem(report),
     }),
-    // TODO: Uncomment the following lines when the corresponding features are implemented
-    // message: (accountID) => ({
-    //     key: 'message',
-    //     icon: Expensicons.CommentBubbles,
-    //     text: Localize.translateLocal('common.message'),
-    //     onSelected: () => ReportActions.navigateToAndOpenReportWithAccountIDs([accountID]),
-    // }),
+    message: (accountID) => ({
+        key: 'message',
+        icon: Expensicons.CommentBubbles,
+        text: Localize.translateLocal('common.message'),
+        onSelected: () => ReportActions.navigateToAndOpenReportWithAccountIDs([accountID]),
+    }),
     // join: (report) => ({
     //     key: 'join',
     //     icon: Expensicons.CommentBubbles,

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -15,6 +15,7 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
+import PromotedActionsBar, {PromotedAction, PromotedActions} from '@components/PromotedActionsBar';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -143,6 +144,18 @@ function ProfilePage({route}: ProfilePageProps) {
         }
     }, [accountID]);
 
+    const promotedActions = useMemo(() => {
+        const result: PromotedAction[] = [];
+        if (report) {
+            result.push(PromotedActions.pin(report));
+        }
+
+        if (!isCurrentUser && !SessionActions.isAnonymousUser()) {
+            result.push(PromotedActions.message(accountID));
+        }
+        return result;
+    }, [accountID, isCurrentUser, report]);
+
     return (
         <ScreenWrapper testID={ProfilePage.displayName}>
             <FullPageNotFoundView shouldShow={shouldShowBlockingView || CONST.RESTRICTED_ACCOUNT_IDS.includes(accountID)}>
@@ -178,6 +191,7 @@ function ProfilePage({route}: ProfilePageProps) {
                                         {displayName}
                                     </Text>
                                 )}
+                                <PromotedActionsBar promotedActions={promotedActions} />
                                 {hasStatus && (
                                     <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.mw100]}>
                                         <Text
@@ -228,16 +242,6 @@ function ProfilePage({route}: ProfilePageProps) {
                                     wrapperStyle={[styles.mtn6, styles.mb5]}
                                 />
                             )}
-                            {!isCurrentUser && !SessionActions.isAnonymousUser() && (
-                                <MenuItem
-                                    title={`${translate('common.message')}${displayName}`}
-                                    titleStyle={styles.flex1}
-                                    icon={Expensicons.ChatBubble}
-                                    onPress={() => ReportActions.navigateToAndOpenReportWithAccountIDs([accountID])}
-                                    wrapperStyle={styles.breakAll}
-                                    shouldShowRightIcon
-                                />
-                            )}
                             {!isEmptyObject(report) && report.reportID && !isCurrentUser && (
                                 <MenuItem
                                     title={`${translate('privateNotes.title')}`}