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

…s-revamp/profile-page feat: update ProfilePage
Expensify · Jun 4, 2024 · bc3009a · bc3009a
2 parents 1d5f83d + cb30698
commit bc3009a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx
@@ -4,15 +4,20 @@ import {View} from 'react-native';
 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';
 import type {ThreeDotsMenuItem} from './HeaderWithBackButton/types';
+import * as Expensicons from './Icon/Expensicons';
 
 type PromotedAction = {
     key: string;
 } & ThreeDotsMenuItem;
 
-type PromotedActionsType = Record<'pin' | 'share', (report: OnyxReport) => PromotedAction>;
+type PromotedActionsType = Record<'pin' | 'share', (report: OnyxReport) => PromotedAction> & {
+    message: (accountID: number) => PromotedAction;
+};
 
 const PromotedActions = {
     pin: (report) => ({
@@ -23,6 +28,12 @@ const PromotedActions = {
         key: 'share',
         ...HeaderUtils.getShareMenuItem(report),
     }),
+    message: (accountID) => ({
+        key: 'message',
+        icon: Expensicons.CommentBubbles,
+        text: Localize.translateLocal('common.message'),
+        onSelected: () => ReportActions.navigateToAndOpenReportWithAccountIDs([accountID]),
+    }),
 } satisfies PromotedActionsType;
 
 type PromotedActionsBarProps = {
@@ -41,6 +52,10 @@ function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBa
         return null;
     }
 
+    if (promotedActions.length === 0) {
+        return null;
+    }
+
     return (
         <View style={[styles.flexRow, styles.ph5, styles.mb5, styles.gap2, styles.mw100, styles.w100, styles.justifyContentCenter, containerStyle]}>
             {promotedActions.map(({key, onSelected, ...props}) => (

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -15,6 +15,8 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
+import type {PromotedAction} from '@components/PromotedActionsBar';
+import PromotedActionsBar, {PromotedActions} from '@components/PromotedActionsBar';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -139,6 +141,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}>
@@ -148,17 +162,17 @@ function ProfilePage({route}: ProfilePageProps) {
                 />
                 <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
                     <ScrollView>
-                        <View style={styles.avatarSectionWrapper}>
+                        <View style={[styles.avatarSectionWrapper, styles.pb0]}>
                             <PressableWithoutFocus
-                                style={[styles.noOutline]}
+                                style={[styles.noOutline, styles.mb4]}
                                 onPress={() => Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))}
                                 accessibilityLabel={translate('common.profile')}
                                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                                 disabled={!hasAvatar}
                             >
                                 <OfflineWithFeedback pendingAction={details?.pendingFields?.avatar}>
                                     <Avatar
-                                        containerStyles={[styles.avatarXLarge, styles.mb3]}
+                                        containerStyles={[styles.avatarXLarge]}
                                         imageStyles={[styles.avatarXLarge]}
                                         source={details.avatar}
                                         avatarID={accountID}
@@ -169,12 +183,16 @@ function ProfilePage({route}: ProfilePageProps) {
                             </PressableWithoutFocus>
                             {Boolean(displayName) && (
                                 <Text
-                                    style={[styles.textHeadline, styles.pre, styles.mb6, styles.w100, styles.textAlignCenter]}
+                                    style={[styles.textHeadline, styles.pre, styles.mb8, styles.w100, styles.textAlignCenter]}
                                     numberOfLines={1}
                                 >
                                     {displayName}
                                 </Text>
                             )}
+                            <PromotedActionsBar
+                                promotedActions={promotedActions}
+                                containerStyle={[styles.ph0, styles.mb8]}
+                            />
                             {hasStatus && (
                                 <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.mw100]}>
                                     <Text
@@ -222,17 +240,6 @@ function ProfilePage({route}: ProfilePageProps) {
                                 title={notificationPreference}
                                 description={translate('notificationPreferencesPage.label')}
                                 onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NOTIFICATION_PREFERENCES.getRoute(report.reportID))}
-                                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 && (