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';
@@ -203,6 +204,7 @@ export {
     Close,
     ClosedSign,
     Collapse,
+    CommentBubbles,
     Concierge,
     ConciergeAvatar,
     Connect,

src/components/PromotedActionsBar.tsx

@@ -0,0 +1,118 @@
+import React, {useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+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 * as ReportActions from '@userActions/Report';
+import type OnyxReport from '@src/types/onyx/Report';
+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 ReportPromotedAction = (report: OnyxReport) => PromotedAction;
+
+type PromotedActionsType = {
+    pin: ReportPromotedAction;
+};
+
+const PromotedActions = {
+    pin: (report) => ({
+        key: 'pin',
+        ...HeaderUtils.getPinMenuItem(report),
+    }),
+} satisfies PromotedActionsType;
+
+type PromotedActionsBarProps = {
+    /** The report of actions */
+    report?: OnyxReport;
+
+    /** The list of actions to show */
+    promotedActions: PromotedAction[];
+
+    /** The style of the container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether to show the `Leave` button.
+     * @deprecated Remove this prop when @src/pages/ReportDetailsPage.tsx is updated
+     */
+    shouldShowLeaveButton?: boolean;
+};
+
+function PromotedActionsBar({report, promotedActions, containerStyle, shouldShowLeaveButton}: PromotedActionsBarProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const [isLastMemberLeavingGroupModalVisible, setIsLastMemberLeavingGroupModalVisible] = useState(false);
+    const {translate} = useLocalize();
+
+    if (promotedActions.length === 0) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.flexRow, styles.ph5, styles.mb5, styles.gap2, styles.mw100, styles.w100, styles.justifyContentCenter, containerStyle]}>
+            {/* 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.
+                // 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);
+                            ReportActions.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;
+                            }
+
+                            ReportActions.leaveGroupChat(report.reportID);
+                        }}
+                        icon={Expensicons.Exit}
+                        style={styles.flex1}
+                        medium
+                        text={translate('common.leave')}
+                    />
+                </View>
+            )}
+            {promotedActions.map(({key, onSelected, ...props}) => (
+                <View
+                    style={[styles.flex1, styles.mw50]}
+                    key={key}
+                >
+                    <Button
+                        onPress={onSelected}
+                        iconFill={theme.icon}
+                        medium
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...props}
+                    />
+                </View>
+            ))}
+        </View>
+    );
+}
+
+PromotedActionsBar.displayName = 'PromotedActionsBar';
+
+export default PromotedActionsBar;
+
+export {PromotedActions};
+export type {PromotedActionsBarProps, PromotedAction};

src/libs/actions/Report.ts

@@ -2568,6 +2568,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) {
@@ -3814,6 +3821,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, {PromotedActions} from '@components/PromotedActionsBar';
 import RoomHeaderAvatars from '@components/RoomHeaderAvatars';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
@@ -333,7 +333,13 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                             />
                         </OfflineWithFeedback>
                     )}
-                    {isGroupChat && <ChatDetailsQuickActionsBar report={report} />}
+                    {isGroupChat && (
+                        <PromotedActionsBar
+                            report={report}
+                            promotedActions={[PromotedActions.pin(report)]}
+                            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

@@ -155,9 +155,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/stories/PromotedActionBar.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {View} from 'react-native';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PromotedActionsBar from '@components/PromotedActionsBar';
+import type {PromotedAction, PromotedActionsBarProps} from '@components/PromotedActionsBar';
+import variables from '@src/styles/variables';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/PromotedActionsBar',
+    component: PromotedActionsBar,
+};
+
+type StoryType = typeof Template & {args?: Partial<PromotedActionsBarProps>};
+
+function Template(args: PromotedActionsBarProps) {
+    return (
+        <View style={{maxWidth: variables.sideBarWidth}}>
+            <PromotedActionsBar
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...args}
+            />
+        </View>
+    );
+}
+
+const promotedActions = [
+    {
+        key: 'join',
+        icon: Expensicons.CommentBubbles,
+        text: 'Join',
+        onSelected: () => {},
+    },
+    {
+        key: 'pin',
+        icon: Expensicons.Pin,
+        text: 'Pin',
+        onSelected: () => {},
+    },
+    {
+        key: 'share',
+        icon: Expensicons.QrCode,
+        text: 'Share',
+        onSelected: () => {},
+    },
+] satisfies PromotedAction[];
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default: StoryType = Template.bind({});
+Default.args = {
+    promotedActions: [promotedActions[0]],
+};
+
+const TwoPromotedActions: StoryType = Template.bind({});
+TwoPromotedActions.args = {
+    promotedActions: [promotedActions[0], promotedActions[1]],
+};
+
+const ThreePromotedActions: StoryType = Template.bind({});
+ThreePromotedActions.args = {
+    promotedActions: [promotedActions[0], promotedActions[1], promotedActions[2]],
+};
+
+export default story;
+export {Default, TwoPromotedActions, ThreePromotedActions};