From 46cd4d3225be6bea28be76270742d69ef41243f4 Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Wed, 13 Dec 2023 04:12:44 -0500
Subject: [PATCH] show 3 dots menu in expense report header

---
 src/components/LHNOptionsList/OptionRowLHN.js |  2 +-
 src/components/MoneyReportHeader.js           | 28 +++++++++++++++++++
 .../report/ContextMenu/ContextMenuActions.js  |  6 ++--
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 9b7141249180..9aee141a9cde 100644
--- 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
index 9a1f59d64efa..f190310b67d2 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -4,9 +4,13 @@ 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 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';
@@ -14,6 +18,8 @@ import nextStepPropTypes from '@pages/nextStepPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 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
index 5e6f2d46abda..6135c75b0c58 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -422,8 +422,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) {
@@ -436,8 +435,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) {