Merge pull request #32961 from mkhutornyi/fix-32414

show 3 dots menu in expense report header
Expensify · Dec 18, 2023 · 9973d8f · 9973d8f
2 parents eb5f379 + 93c1741
commit 9973d8f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -302,7 +302,7 @@ function OptionRowLHN(props) {
                                     <Icon src={Expensicons.Pencil} />
                                 </View>
                             )}
-                            {!shouldShowGreenDotIndicator && optionItem.isPinned && (
+                            {!shouldShowGreenDotIndicator && !hasBrickError && optionItem.isPinned && (
                                 <View
                                     style={styles.ml2}
                                     accessibilityLabel={translate('sidebarScreen.chatPinned')}

diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
@@ -4,16 +4,22 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 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 useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as HeaderUtils from '@libs/HeaderUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as IOU from '@userActions/IOU';
+import * as Link from '@userActions/Link';
+import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -70,6 +76,7 @@ const defaultProps = {
 function MoneyReportHeader({session, personalDetails, policy, chatReport, nextStep, report: moneyRequestReport, isSmallScreenWidth}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {windowWidth} = useWindowDimensions();
     const reimbursableTotal = ReportUtils.getMoneyRequestReimbursableTotal(moneyRequestReport);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
@@ -101,6 +108,24 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency);
     const isMoreContentShown = shouldShowNextSteps || (shouldShowAnyButton && isSmallScreenWidth);
 
+    const threeDotsMenuItems = [HeaderUtils.getPinMenuItem(moneyRequestReport)];
+    if (!ReportUtils.isArchivedRoom(chatReport)) {
+        threeDotsMenuItems.push({
+            icon: ZoomIcon,
+            text: translate('videoChatButtonAndMenu.zoom'),
+            onSelected: Session.checkIfActionIsAllowed(() => {
+                Link.openExternalLink(CONST.NEW_ZOOM_MEETING_URL);
+            }),
+        });
+        threeDotsMenuItems.push({
+            icon: GoogleMeetIcon,
+            text: translate('videoChatButtonAndMenu.googleMeet'),
+            onSelected: Session.checkIfActionIsAllowed(() => {
+                Link.openExternalLink(CONST.NEW_GOOGLE_MEET_MEETING_URL);
+            }),
+        });
+    }
+
     return (
         <View style={[styles.pt0]}>
             <HeaderWithBackButton
@@ -114,6 +139,9 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                 onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)}
                 // Shows border if no buttons or next steps are showing below the header
                 shouldShowBorderBottom={!(shouldShowAnyButton && isSmallScreenWidth) && !(shouldShowNextSteps && !isSmallScreenWidth)}
+                shouldShowThreeDotsButton
+                threeDotsMenuItems={threeDotsMenuItems}
+                threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
             >
                 {shouldShowSettlementButton && !isSmallScreenWidth && (
                     <View style={styles.pv2}>

diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -428,8 +428,7 @@ export default [
         isAnonymousAction: false,
         textTranslateKey: 'common.pin',
         icon: Expensicons.Pin,
-        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat) =>
-            type === CONTEXT_MENU_TYPES.REPORT && !isPinnedChat && !ReportUtils.isMoneyRequestReport(reportID),
+        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat) => type === CONTEXT_MENU_TYPES.REPORT && !isPinnedChat,
         onPress: (closePopover, {reportID}) => {
             Report.togglePinnedState(reportID, false);
             if (closePopover) {
@@ -442,8 +441,7 @@ export default [
         isAnonymousAction: false,
         textTranslateKey: 'common.unPin',
         icon: Expensicons.Pin,
-        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat) =>
-            type === CONTEXT_MENU_TYPES.REPORT && isPinnedChat && !ReportUtils.isMoneyRequestReport(reportID),
+        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat) => type === CONTEXT_MENU_TYPES.REPORT && isPinnedChat,
         onPress: (closePopover, {reportID}) => {
             Report.togglePinnedState(reportID, true);
             if (closePopover) {