From 6cb2ef240bf0bd27abd8eb4590d6fd1db8b60680 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 15 May 2024 10:07:58 +0200 Subject: [PATCH 1/6] feat: promoted actions in ProfilePage --- src/components/PromotedActionsBar.tsx | 16 ++++++++-------- src/pages/ProfilePage.tsx | 24 ++++++++++++++---------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx index 1da6b479882e..d4acfdfcb245 100644 --- 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 index d5e556b25dd0..2c01e7ac9f6f 100755 --- 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 ( @@ -178,6 +191,7 @@ function ProfilePage({route}: ProfilePageProps) { {displayName} )} + {hasStatus && ( )} - {!isCurrentUser && !SessionActions.isAnonymousUser() && ( - ReportActions.navigateToAndOpenReportWithAccountIDs([accountID])} - wrapperStyle={styles.breakAll} - shouldShowRightIcon - /> - )} {!isEmptyObject(report) && report.reportID && !isCurrentUser && ( Date: Thu, 16 May 2024 08:00:19 +0200 Subject: [PATCH 2/6] fix: padding --- src/pages/ProfilePage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 2c01e7ac9f6f..283f8981a740 100755 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -156,6 +156,8 @@ function ProfilePage({route}: ProfilePageProps) { return result; }, [accountID, isCurrentUser, report]); + console.log('promo', promotedActions.length); + return ( @@ -191,7 +193,10 @@ function ProfilePage({route}: ProfilePageProps) { {displayName} )} - + {hasStatus && ( Date: Mon, 20 May 2024 11:06:47 +0200 Subject: [PATCH 3/6] fix: do not display empty PromotedActionsBar --- src/components/PromotedActionsBar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx index d4acfdfcb245..aa9ceaef0958 100644 --- a/src/components/PromotedActionsBar.tsx +++ b/src/components/PromotedActionsBar.tsx @@ -81,6 +81,10 @@ function PromotedActionsBar({report, promotedActions, containerStyle, shouldShow const [isLastMemberLeavingGroupModalVisible, setIsLastMemberLeavingGroupModalVisible] = useState(false); const {translate} = useLocalize(); + if (promotedActions.length === 0) { + return null; + } + return ( {/* TODO: Remove the `Leave` button when @src/pages/ReportDetailsPage.tsx is updated */} From 95c10eab14d51f925d2ab4f2892c640508aa7f70 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 20 May 2024 11:32:51 +0200 Subject: [PATCH 4/6] fix: adjust styles --- src/pages/ProfilePage.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 283f8981a740..bc000a43e135 100755 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -15,7 +15,8 @@ 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 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'; @@ -156,8 +157,6 @@ function ProfilePage({route}: ProfilePageProps) { return result; }, [accountID, isCurrentUser, report]); - console.log('promo', promotedActions.length); - return ( @@ -168,16 +167,16 @@ function ProfilePage({route}: ProfilePageProps) { {hasMinimumDetails && ( - + Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))} accessibilityLabel={translate('common.profile')} accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} > {Boolean(displayName) && ( {displayName} @@ -195,7 +194,7 @@ function ProfilePage({route}: ProfilePageProps) { )} {hasStatus && ( From 49c03aad0982a93f07c9daf89189aff84f6e1aff Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 20 May 2024 11:38:52 +0200 Subject: [PATCH 5/6] fix: margins --- src/pages/ProfilePage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index bc000a43e135..0d569cb6e30b 100755 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -243,7 +243,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]} /> )} {!isEmptyObject(report) && report.reportID && !isCurrentUser && ( From af17e76e7b2e48ffc35fba3ead57eb5c457d2499 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Tue, 21 May 2024 10:22:29 +0200 Subject: [PATCH 6/6] feat: max promoted action width --- src/components/PromotedActionsBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx index aa9ceaef0958..e4cd2f6b5bc2 100644 --- a/src/components/PromotedActionsBar.tsx +++ b/src/components/PromotedActionsBar.tsx @@ -86,7 +86,7 @@ function PromotedActionsBar({report, promotedActions, containerStyle, shouldShow } return ( - + {/* TODO: Remove the `Leave` button when @src/pages/ReportDetailsPage.tsx is updated */} {shouldShowLeaveButton && report && ( // The `Leave` button is left to make the component backward compatible with the existing code. @@ -123,7 +123,7 @@ function PromotedActionsBar({report, promotedActions, containerStyle, shouldShow )} {promotedActions.map(({key, onSelected, ...props}) => (