From e76361bad0107e0f314dc6f4a27037178e795930 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 30 Dec 2023 12:26:06 +0800
Subject: [PATCH 1/2] show join button

---
 src/pages/home/HeaderView.js | 223 +++++++++++++++++++----------------
 1 file changed, 120 insertions(+), 103 deletions(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index d3ec573b5886..1e58e3c166b1 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import GoogleMeetIcon from '@assets/images/google-meet.svg';
 import ZoomIcon from '@assets/images/zoom-icon.svg';
+import Button from '@components/Button';
 import DisplayNames from '@components/DisplayNames';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -141,25 +142,37 @@ function HeaderView(props) {
         }
     }
 
-    if ((isChatThread && !isEmptyChat) || isUserCreatedPolicyRoom || canLeaveRoom) {
-        if (!isWhisperAction && props.report.notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) {
-            threeDotMenuItems.push({
-                icon: Expensicons.ChatBubbles,
-                text: translate('common.join'),
-                onSelected: Session.checkIfActionIsAllowed(() =>
-                    Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false),
-                ),
-            });
-        } else if ((isChatThread && props.report.notificationPreference.length) || isUserCreatedPolicyRoom || canLeaveRoom) {
-            const isWorkspaceMemberLeavingWorkspaceRoom = lodashGet(props.report, 'visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED && isPolicyMember;
-            threeDotMenuItems.push({
-                icon: Expensicons.ChatBubbles,
-                text: translate('common.leave'),
-                onSelected: Session.checkIfActionIsAllowed(() => Report.leaveRoom(props.report.reportID, isWorkspaceMemberLeavingWorkspaceRoom)),
-            });
-        }
+    const canJoinOrLeave = (isChatThread && !isEmptyChat) || isUserCreatedPolicyRoom || canLeaveRoom;
+    const canJoin = canJoinOrLeave && !isWhisperAction && props.report.notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
+    const canLeave = canJoinOrLeave && ((isChatThread && props.report.notificationPreference.length) || isUserCreatedPolicyRoom || canLeaveRoom);
+    if (canJoin) {
+        threeDotMenuItems.push({
+            icon: Expensicons.ChatBubbles,
+            text: translate('common.join'),
+            onSelected: Session.checkIfActionIsAllowed(() =>
+                Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false),
+            ),
+        });
+    } else if (canLeave) {
+        const isWorkspaceMemberLeavingWorkspaceRoom = lodashGet(props.report, 'visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED && isPolicyMember;
+        threeDotMenuItems.push({
+            icon: Expensicons.ChatBubbles,
+            text: translate('common.leave'),
+            onSelected: Session.checkIfActionIsAllowed(() => Report.leaveRoom(props.report.reportID, isWorkspaceMemberLeavingWorkspaceRoom)),
+        });
     }
 
+    const joinButton = (
+        <Button
+            success
+            medium
+            text={translate('common.join')}
+            onPress={Session.checkIfActionIsAllowed(() =>
+                Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false),
+            )}
+        />
+    );
+
     threeDotMenuItems.push(HeaderUtils.getPinMenuItem(props.report));
 
     if (isConcierge && props.guideCalendarLink) {
@@ -200,103 +213,107 @@ function HeaderView(props) {
 
     return (
         <View
-            style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
+            style={[shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
-                {isLoading ? (
-                    <ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />
-                ) : (
-                    <>
-                        {isSmallScreenWidth && (
-                            <PressableWithoutFeedback
-                                onPress={props.onNavigationMenuButtonClicked}
-                                style={[styles.LHNToggle]}
-                                accessibilityHint={translate('accessibilityHints.navigateToChatsList')}
-                                accessibilityLabel={translate('common.back')}
-                                role={CONST.ROLE.BUTTON}
-                            >
-                                <Tooltip
-                                    text={translate('common.back')}
-                                    shiftVertical={4}
+            <View style={[styles.appContentHeader]}>
+                <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
+                    {isLoading ? (
+                        <ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />
+                    ) : (
+                        <>
+                            {isSmallScreenWidth && (
+                                <PressableWithoutFeedback
+                                    onPress={props.onNavigationMenuButtonClicked}
+                                    style={[styles.LHNToggle]}
+                                    accessibilityHint={translate('accessibilityHints.navigateToChatsList')}
+                                    accessibilityLabel={translate('common.back')}
+                                    role={CONST.ROLE.BUTTON}
+                                >
+                                    <Tooltip
+                                        text={translate('common.back')}
+                                        shiftVertical={4}
+                                    >
+                                        <View>
+                                            <Icon
+                                                src={Expensicons.BackArrow}
+                                                fill={theme.icon}
+                                            />
+                                        </View>
+                                    </Tooltip>
+                                </PressableWithoutFeedback>
+                            )}
+                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                                <PressableWithoutFeedback
+                                    onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+                                    style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
+                                    disabled={shouldDisableDetailPage}
+                                    accessibilityLabel={title}
+                                    role={CONST.ROLE.BUTTON}
                                 >
-                                    <View>
-                                        <Icon
-                                            src={Expensicons.BackArrow}
-                                            fill={theme.icon}
+                                    {shouldShowSubscript ? (
+                                        <SubscriptAvatar
+                                            mainAvatar={icons[0]}
+                                            secondaryAvatar={icons[1]}
+                                            size={defaultSubscriptSize}
                                         />
-                                    </View>
-                                </Tooltip>
-                            </PressableWithoutFeedback>
-                        )}
-                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                            <PressableWithoutFeedback
-                                onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
-                                style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
-                                disabled={shouldDisableDetailPage}
-                                accessibilityLabel={title}
-                                role={CONST.ROLE.BUTTON}
-                            >
-                                {shouldShowSubscript ? (
-                                    <SubscriptAvatar
-                                        mainAvatar={icons[0]}
-                                        secondaryAvatar={icons[1]}
-                                        size={defaultSubscriptSize}
-                                    />
-                                ) : (
-                                    <MultipleAvatars
-                                        icons={icons}
-                                        shouldShowTooltip={!isChatRoom || isChatThread}
-                                    />
-                                )}
-                                <View style={[styles.flex1, styles.flexColumn]}>
-                                    <DisplayNames
-                                        fullTitle={title}
-                                        displayNamesWithTooltips={displayNamesWithTooltips}
-                                        tooltipEnabled
-                                        numberOfLines={1}
-                                        textStyles={[styles.headerText, styles.pre]}
-                                        shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
-                                    />
-                                    {!_.isEmpty(parentNavigationSubtitleData) && (
-                                        <ParentNavigationSubtitle
-                                            parentNavigationSubtitleData={parentNavigationSubtitleData}
-                                            parentReportID={props.report.parentReportID}
-                                            pressableStyles={[styles.alignSelfStart, styles.mw100]}
+                                    ) : (
+                                        <MultipleAvatars
+                                            icons={icons}
+                                            shouldShowTooltip={!isChatRoom || isChatThread}
                                         />
                                     )}
-                                    {!_.isEmpty(subtitle) && (
-                                        <Text
-                                            style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+                                    <View style={[styles.flex1, styles.flexColumn]}>
+                                        <DisplayNames
+                                            fullTitle={title}
+                                            displayNamesWithTooltips={displayNamesWithTooltips}
+                                            tooltipEnabled
                                             numberOfLines={1}
-                                        >
-                                            {subtitle}
-                                        </Text>
-                                    )}
-                                </View>
-                                {brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
-                                    <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
-                                        <Icon
-                                            src={Expensicons.DotIndicator}
-                                            fill={theme.danger}
+                                            textStyles={[styles.headerText, styles.pre]}
+                                            shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
                                         />
+                                        {!_.isEmpty(parentNavigationSubtitleData) && (
+                                            <ParentNavigationSubtitle
+                                                parentNavigationSubtitleData={parentNavigationSubtitleData}
+                                                parentReportID={props.report.parentReportID}
+                                                pressableStyles={[styles.alignSelfStart, styles.mw100]}
+                                            />
+                                        )}
+                                        {!_.isEmpty(subtitle) && (
+                                            <Text
+                                                style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+                                                numberOfLines={1}
+                                            >
+                                                {subtitle}
+                                            </Text>
+                                        )}
                                     </View>
-                                )}
-                            </PressableWithoutFeedback>
-                            <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
-                                {shouldShowThreeDotsButton && (
-                                    <ThreeDotsMenu
-                                        anchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
-                                        menuItems={threeDotMenuItems}
-                                        shouldSetModalVisibility={false}
-                                    />
-                                )}
+                                    {brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
+                                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                            <Icon
+                                                src={Expensicons.DotIndicator}
+                                                fill={theme.danger}
+                                            />
+                                        </View>
+                                    )}
+                                </PressableWithoutFeedback>
+                                <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
+                                    {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
+                                    {canJoin && !isSmallScreenWidth && joinButton}
+                                    {shouldShowThreeDotsButton && (
+                                        <ThreeDotsMenu
+                                            anchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
+                                            menuItems={threeDotMenuItems}
+                                            shouldSetModalVisibility={false}
+                                        />
+                                    )}
+                                </View>
                             </View>
-                        </View>
-                    </>
-                )}
+                        </>
+                    )}
+                </View>
             </View>
+            {canJoin && isSmallScreenWidth && <View style={[styles.ph5, styles.pb2]}>{joinButton}</View>}
         </View>
     );
 }

From 42d39bc8255a9228a2bf66715b64b522f8fdf1c7 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 3 Jan 2024 10:30:29 +0800
Subject: [PATCH 2/2] pass parent report id and parent report action id

---
 src/pages/home/HeaderView.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 1e58e3c166b1..6c5a3ac4843f 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -142,6 +142,17 @@ function HeaderView(props) {
         }
     }
 
+    const join = Session.checkIfActionIsAllowed(() =>
+        Report.updateNotificationPreference(
+            props.report.reportID,
+            props.report.notificationPreference,
+            CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS,
+            false,
+            props.report.parentReportID,
+            props.report.parentReportActionID,
+        ),
+    );
+
     const canJoinOrLeave = (isChatThread && !isEmptyChat) || isUserCreatedPolicyRoom || canLeaveRoom;
     const canJoin = canJoinOrLeave && !isWhisperAction && props.report.notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
     const canLeave = canJoinOrLeave && ((isChatThread && props.report.notificationPreference.length) || isUserCreatedPolicyRoom || canLeaveRoom);
@@ -149,9 +160,7 @@ function HeaderView(props) {
         threeDotMenuItems.push({
             icon: Expensicons.ChatBubbles,
             text: translate('common.join'),
-            onSelected: Session.checkIfActionIsAllowed(() =>
-                Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false),
-            ),
+            onSelected: join,
         });
     } else if (canLeave) {
         const isWorkspaceMemberLeavingWorkspaceRoom = lodashGet(props.report, 'visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED && isPolicyMember;
@@ -167,9 +176,7 @@ function HeaderView(props) {
             success
             medium
             text={translate('common.join')}
-            onPress={Session.checkIfActionIsAllowed(() =>
-                Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false),
-            )}
+            onPress={join}
         />
     );