Move all header buttons to overflow menu

src/components/PopoverMenu/index.js

@@ -98,6 +98,7 @@ function PopoverMenu(props) {
                         icon={item.icon}
                         iconWidth={item.iconWidth}
                         iconHeight={item.iconHeight}
+                        iconFill={item.iconFill}
                         title={item.text}
                         description={item.description}
                         onPress={() => selectItem(menuIndex)}

src/languages/en.ts

@@ -139,7 +139,9 @@ export default {
         download: 'Download',
         downloading: 'Downloading',
         pin: 'Pin',
+        pinConversation: 'Pin conversation',
         unPin: 'Unpin',
+        unPinConversation: 'Unpin conversation',
         back: 'Back',
         saveAndContinue: 'Save & continue',
         settings: 'Settings',
@@ -206,6 +208,7 @@ export default {
         debitCard: 'Debit card',
         bankAccount: 'Bank account',
         join: 'Join',
+        joinThread: 'Join thread',
         decline: 'Decline',
         transferBalance: 'Transfer balance',
         cantFindAddress: "Can't find your address? ",

src/languages/es.ts

@@ -129,7 +129,9 @@ export default {
         download: 'Descargar',
         downloading: 'Descargando',
         pin: 'Fijar',
+        pinConversation: 'NEED TO TRANSLATE',
         unPin: 'Desfijar',
+        unPinConversation: 'NEED TO TRANSLATE',
         back: 'Volver',
         saveAndContinue: 'Guardar y continuar',
         settings: 'Configuración',
@@ -196,6 +198,7 @@ export default {
         debitCard: 'Tarjeta de débito',
         bankAccount: 'Cuenta bancaria',
         join: 'Unirse',
+        joinThread: 'NEED TO TRANSLATE',
         decline: 'Rechazar',
         transferBalance: 'Transferencia de saldo',
         cantFindAddress: '¿No encuentras tu dirección? ',

src/libs/actions/Report.js

@@ -1205,6 +1205,32 @@ function saveReportActionDraftNumberOfLines(reportID, reportActionID, numberOfLi
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${reportActionID}`, numberOfLines);
 }
 
+/**
+ * @param {String} reportID
+ * @param {String} previousValue
+ * @param {String} newValue
+ */
+function updateNotificationPreference(reportID, previousValue, newValue) {
+    if (previousValue === newValue) {
+        return;
+    }
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {notificationPreference: newValue},
+        },
+    ];
+    const failureData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {notificationPreference: previousValue},
+        },
+    ];
+    API.write('UpdateReportNotificationPreference', {reportID, notificationPreference: newValue}, {optimisticData, failureData});
+}
+
 /**
  * @param {String} reportID
  * @param {String} previousValue
@@ -2066,6 +2092,7 @@ export {
     updateWelcomeMessage,
     updateWriteCapabilityAndNavigate,
     updateNotificationPreferenceAndNavigate,
+    updateNotificationPreference,
     subscribeToReportTypingEvents,
     unsubscribeFromReportChannel,
     saveReportComment,

src/pages/ReportDetailsPage.js

@@ -124,7 +124,7 @@ function ReportDetailsPage(props) {
             });
         }
 
-        if (isUserCreatedPolicyRoom || canLeaveRoom || isThread) {
+        if (isUserCreatedPolicyRoom || canLeaveRoom) {
             items.push({
                 key: CONST.REPORT_DETAILS_MENU_ITEM.LEAVE_ROOM,
                 translationKey: isThread ? 'common.leaveThread' : 'common.leaveRoom',

src/pages/home/HeaderView.js

@@ -1,36 +1,39 @@
-import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import styles from '../../styles/styles';
+import _ from 'underscore';
+import GoogleMeetIcon from '../../../assets/images/google-meet.svg';
+import ZoomIcon from '../../../assets/images/zoom-icon.svg';
+import CONST from '../../CONST';
+import ONYXKEYS from '../../ONYXKEYS';
+import DisplayNames from '../../components/DisplayNames';
 import Icon from '../../components/Icon';
 import * as Expensicons from '../../components/Icon/Expensicons';
-import compose from '../../libs/compose';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import MultipleAvatars from '../../components/MultipleAvatars';
+import ParentNavigationSubtitle from '../../components/ParentNavigationSubtitle';
+import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
 import SubscriptAvatar from '../../components/SubscriptAvatar';
-import DisplayNames from '../../components/DisplayNames';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
+import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
+import Text from '../../components/Text';
+import ThreeDotsMenu from '../../components/ThreeDotsMenu';
+import Tooltip from '../../components/Tooltip';
 import participantPropTypes from '../../components/participantPropTypes';
-import VideoChatButtonAndMenu from '../../components/VideoChatButtonAndMenu';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import CONST from '../../CONST';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
+import * as OptionsListUtils from '../../libs/OptionsListUtils';
+import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
-import Text from '../../components/Text';
-import Tooltip from '../../components/Tooltip';
+import * as Link from '../../libs/actions/Link';
+import * as Report from '../../libs/actions/Report';
+import * as Session from '../../libs/actions/Session';
+import * as Task from '../../libs/actions/Task';
+import compose from '../../libs/compose';
+import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import reportPropTypes from '../reportPropTypes';
-import ONYXKEYS from '../../ONYXKEYS';
-import ThreeDotsMenu from '../../components/ThreeDotsMenu';
-import * as Task from '../../libs/actions/Task';
 import reportActionPropTypes from './report/reportActionPropTypes';
-import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
-import PinButton from '../../components/PinButton';
-import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
-import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
-import ParentNavigationSubtitle from '../../components/ParentNavigationSubtitle';
 
 const propTypes = {
     /** Toggles the navigationMenu open and closed */
@@ -99,13 +102,13 @@ function HeaderView(props) {
 
     // We hide the button when we are chatting with an automated Expensify account since it's not possible to contact
     // these users via alternative means. It is possible to request a call with Concierge so we leave the option for them.
-    const shouldShowCallButton = (isConcierge && guideCalendarLink) || (!isAutomatedExpensifyAccount && !isTaskReport);
     const threeDotMenuItems = [];
     if (isTaskReport && !isCanceledTaskReport) {
         const canModifyTask = Task.canModifyTask(props.report, props.session.accountID);
         if (ReportUtils.isOpenTaskReport(props.report) && canModifyTask) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
+                iconFill: themeColors.icon,
                 text: props.translate('task.markAsDone'),
                 onSelected: () => Task.completeTask(props.report, title),
             });
@@ -115,6 +118,7 @@ function HeaderView(props) {
         if (ReportUtils.isCompletedTaskReport(props.report) && canModifyTask) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
+                iconFill: themeColors.icon,
                 text: props.translate('task.markAsIncomplete'),
                 onSelected: () => Task.reopenTask(props.report, title),
             });
@@ -124,11 +128,75 @@ function HeaderView(props) {
         if (props.report.stateNum !== CONST.REPORT.STATE_NUM.SUBMITTED && props.report.statusNum !== CONST.REPORT.STATUS.CLOSED && canModifyTask) {
             threeDotMenuItems.push({
                 icon: Expensicons.Trashcan,
+                iconFill: themeColors.icon,
                 text: props.translate('common.cancel'),
                 onSelected: () => Task.cancelTask(props.report.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum),
             });
         }
     }
+
+    if (isChatThread) {
+        if (props.report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) {
+            threeDotMenuItems.push({
+                icon: Expensicons.Exit,
+                iconFill: themeColors.icon,
+                text: props.translate('common.leaveThread'),
+                onSelected: () => Report.leaveRoom(props.report.reportID),
+            });
+        } else {
+            threeDotMenuItems.push({
+                icon: Expensicons.ChatBubble,
+                iconFill: themeColors.icon,
+                text: props.translate('common.joinThread'),
+                onSelected: () => Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS),
+            });
+        }
+    }
+
+    if (!props.report.isPinned) {
+        threeDotMenuItems.push({
+            icon: Expensicons.Pin,
+            iconFill: themeColors.icon,
+            text: props.translate('common.pinConversation'),
+            onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned)),
+        });
+    } else {
+        threeDotMenuItems.push({
+            icon: Expensicons.Pin,
+            iconFill: themeColors.icon,
+            text: props.translate('common.unPinConversation'),
+            onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned)),
+        });
+    }
+
+    if (isConcierge && guideCalendarLink) {
+        threeDotMenuItems.push({
+            icon: Expensicons.Phone,
+            iconFill: themeColors.icon,
+            text: props.translate('videoChatButtonAndMenu.tooltip'),
+            onSelected: () => {
+                Link.openExternalLink(props.guideCalendarLink);
+            },
+        });
+    } else if ((isConcierge && guideCalendarLink) || (!isAutomatedExpensifyAccount && !isTaskReport)) {
+        threeDotMenuItems.push({
+            icon: ZoomIcon,
+            iconFill: themeColors.icon,
+            text: props.translate('videoChatButtonAndMenu.zoom'),
+            onSelected: () => {
+                Link.openExternalLink(CONST.NEW_ZOOM_MEETING_URL);
+            },
+        });
+        threeDotMenuItems.push({
+            icon: GoogleMeetIcon,
+            iconFill: themeColors.icon,
+            text: props.translate('videoChatButtonAndMenu.googleMeet'),
+            onSelected: () => {
+                Link.openExternalLink(CONST.NEW_GOOGLE_MEET_MEETING_URL);
+            },
+        });
+    }
+
     const shouldShowThreeDotsButton = !!threeDotMenuItems.length;
 
     const shouldShowSubscript = ReportUtils.shouldReportShowSubscript(props.report);
@@ -219,13 +287,6 @@ function HeaderView(props) {
                         </PressableWithoutFeedback>
                         <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
                             {isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
-                            {shouldShowCallButton && (
-                                <VideoChatButtonAndMenu
-                                    isConcierge={isConcierge}
-                                    guideCalendarLink={guideCalendarLink}
-                                />
-                            )}
-                            <PinButton report={props.report} />
                             {shouldShowThreeDotsButton && (
                                 <ThreeDotsMenu
                                     anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}