feat: add PromotedActionsBar

src/components/Icon/Expensicons.ts

@@ -40,6 +40,7 @@ import Close from '@assets/images/close.svg';
 import ClosedSign from '@assets/images/closed-sign.svg';
 import Coins from '@assets/images/coins.svg';
 import Collapse from '@assets/images/collapse.svg';
+import CommentBubbles from '@assets/images/comment-bubbles.svg';
 import Concierge from '@assets/images/concierge.svg';
 import Connect from '@assets/images/connect.svg';
 import ConnectionComplete from '@assets/images/connection-complete.svg';
@@ -202,6 +203,7 @@ export {
     Close,
     ClosedSign,
     Collapse,
+    CommentBubbles,
     Concierge,
     ConciergeAvatar,
     Connect,

src/components/PromotedActionsBar.tsx

@@ -0,0 +1,137 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as HeaderUtils from '@libs/HeaderUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Report from '@userActions/Report';
+import * as Session from '@userActions/Session';
+import ROUTES from '@src/ROUTES';
+import type {Report as OnyxReportType} from '@src/types/onyx';
+import Button from './Button';
+import ConfirmModal from './ConfirmModal';
+import type {ThreeDotsMenuItem} from './HeaderWithBackButton/types';
+import * as Expensicons from './Icon/Expensicons';
+
+type PromotedAction = {
+    key: string;
+} & ThreeDotsMenuItem;
+
+type PromotedActionsParams = {
+    report: OnyxReportType;
+};
+
+function usePromotedActions({report}: PromotedActionsParams): Record<string, PromotedAction> {
+    const {translate} = useLocalize();
+    const onShareButtonPress = useCallback(() => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID ?? '')), [report?.reportID]);
+    const join = Session.checkIfActionIsAllowed(() => Report.joinRoom(report));
+
+    return useMemo(
+        () => ({
+            pin: {
+                key: 'pin',
+                ...HeaderUtils.getPinMenuItem(report),
+            },
+            join: {
+                key: 'join',
+                icon: Expensicons.CommentBubbles,
+                text: translate('common.join'),
+                onSelected: join,
+            },
+            share: {
+                key: 'share',
+                icon: Expensicons.QrCode,
+                text: translate('common.share'),
+                onSelected: onShareButtonPress,
+            },
+            hold: {
+                key: 'hold',
+                icon: Expensicons.Stopwatch,
+                text: translate('iou.hold'),
+                onSelected: () => {
+                    // TODO: Implement this
+                },
+            },
+        }),
+        [report, translate, join, onShareButtonPress],
+    );
+}
+
+type PromotedActionsBarProps = {
+    report: OnyxReportType;
+
+    promotedActions: PromotedAction[];
+
+    /**
+     * Whether to show the `Leave` button.
+     * @deprecated Remove this prop when @src/pages/ReportDetailsPage.tsx is updated
+     */
+    shouldShowLeaveButton: boolean;
+};
+
+function PromotedActionsBar({report, promotedActions, shouldShowLeaveButton}: PromotedActionsBarProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const [isLastMemberLeavingGroupModalVisible, setIsLastMemberLeavingGroupModalVisible] = useState(false);
+    const {translate} = useLocalize();
+
+    return (
+        <View style={[styles.flexRow, styles.ph5, styles.mb5, styles.gap3]}>
+            {/* TODO: Remove the `Leave` button when @src/pages/ReportDetailsPage.tsx is updated */}
+            {shouldShowLeaveButton && (
+                // The `Leave` button is left to make the component backward compatible with the existing code.
+                // After the `Leave` button is moved to the `MenuItem` list, this block can be removed.
+                <View style={[styles.flex1]}>
+                    <ConfirmModal
+                        danger
+                        title={translate('groupChat.lastMemberTitle')}
+                        isVisible={isLastMemberLeavingGroupModalVisible}
+                        onConfirm={() => {
+                            setIsLastMemberLeavingGroupModalVisible(false);
+                            Report.leaveGroupChat(report.reportID);
+                        }}
+                        onCancel={() => setIsLastMemberLeavingGroupModalVisible(false)}
+                        prompt={translate('groupChat.lastMemberWarning')}
+                        confirmText={translate('common.leave')}
+                        cancelText={translate('common.cancel')}
+                    />
+                    <Button
+                        onPress={() => {
+                            if (Object.keys(report?.participants ?? {}).length === 1) {
+                                setIsLastMemberLeavingGroupModalVisible(true);
+                                return;
+                            }
+
+                            Report.leaveGroupChat(report.reportID);
+                        }}
+                        icon={Expensicons.Exit}
+                        style={styles.flex1}
+                        medium
+                        text={translate('common.leave')}
+                    />
+                </View>
+            )}
+            {promotedActions.map(({key, onSelected, ...props}) => (
+                <View
+                    style={[styles.flex1]}
+                    key={key}
+                >
+                    <Button
+                        onPress={onSelected}
+                        iconFill={theme.icon}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...props}
+                        medium
+                    />
+                </View>
+            ))}
+        </View>
+    );
+}
+
+PromotedActionsBar.displayName = 'PromotedActionsBar';
+
+export default PromotedActionsBar;
+
+export {usePromotedActions};

src/libs/actions/Report.ts

@@ -2549,6 +2549,13 @@ function navigateToMostRecentReport(currentReport: OnyxEntry<Report>) {
     }
 }
 
+function joinRoom(report: OnyxEntry<Report>) {
+    if (!report) {
+        return;
+    }
+    updateNotificationPreference(report.reportID, report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false, report.parentReportID, report.parentReportActionID);
+}
+
 function leaveGroupChat(reportID: string) {
     const report = ReportUtils.getReport(reportID);
     if (!report) {
@@ -3774,6 +3781,7 @@ export {
     showReportActionNotification,
     toggleEmojiReaction,
     shouldShowReportActionNotification,
+    joinRoom,
     leaveRoom,
     inviteToRoom,
     inviteToGroupChat,

src/pages/ReportDetailsPage.tsx

@@ -7,7 +7,6 @@ import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import ChatDetailsQuickActionsBar from '@components/ChatDetailsQuickActionsBar';
 import DisplayNames from '@components/DisplayNames';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -17,6 +16,7 @@ import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import PromotedActionsBar, {usePromotedActions} from '@components/PromotedActionsBar';
 import RoomHeaderAvatars from '@components/RoomHeaderAvatars';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
@@ -104,6 +104,8 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
 
     const isSelfDM = useMemo(() => ReportUtils.isSelfDM(report), [report]);
 
+    const PromotedActions = usePromotedActions({report});
+
     useEffect(() => {
         // Do not fetch private notes if isLoadingPrivateNotes is already defined, or if the network is offline, or if the report is a self DM.
         if (isPrivateNotesFetchTriggered || isOffline || isSelfDM) {
@@ -332,7 +334,13 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                             />
                         </OfflineWithFeedback>
                     )}
-                    {isGroupChat && <ChatDetailsQuickActionsBar report={report} />}
+                    {isGroupChat && (
+                        <PromotedActionsBar
+                            report={report}
+                            promotedActions={[PromotedActions.pin]}
+                            shouldShowLeaveButton
+                        />
+                    )}
                     {menuItems.map((item) => {
                         const brickRoadIndicator =
                             ReportUtils.hasReportNameError(report) && item.key === CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined;

src/pages/home/HeaderView.tsx

@@ -154,9 +154,7 @@ function HeaderView({
         }
     }
 
-    const join = Session.checkIfActionIsAllowed(() =>
-        Report.updateNotificationPreference(reportID, report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false, report.parentReportID, report.parentReportActionID),
-    );
+    const join = Session.checkIfActionIsAllowed(() => Report.joinRoom(report));
 
     const canJoin = ReportUtils.canJoinChat(report, parentReportAction, policy);
     if (canJoin) {

src/styles/index.ts

@@ -567,7 +567,6 @@ const styles = (theme: ThemeColors) =>
         },
 
         buttonContainer: {
-            padding: 1,
             borderRadius: variables.buttonBorderRadius,
         },