Skip to content

Commit

Permalink
Merge pull request Expensify#33791 from bernhardoj/fix/33577-show-joi…
Browse files Browse the repository at this point in the history 
…n-button

Show join button in the chat header
  • Loading branch information
@srikarparsi
srikarparsi authored Jan 3, 2024
2 parents b57f6e0 + 42d39bc commit 5462451
Showing 1 changed file with 127 additions and 103 deletions.
230 changes: 127 additions & 103 deletions src/pages/home/HeaderView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -141,25 +142,44 @@ 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 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);
if (canJoin) {
threeDotMenuItems.push({
icon: Expensicons.ChatBubbles,
text: translate('common.join'),
onSelected: join,
});
} 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={join}
/>
);

threeDotMenuItems.push(HeaderUtils.getPinMenuItem(props.report));

if (isConcierge && props.guideCalendarLink) {
Expand Down Expand Up @@ -200,103 +220,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>
);
}
Expand Down

0 comments on commit 5462451

Please sign in to comment.