From 6930885f15a102d46c3351902a72c2dc0e0d418c Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 11 Apr 2023 21:10:36 +0100
Subject: [PATCH 01/18] avoid nested Pressable and change the root MenuItem
 component, with some refactoring

---
 src/components/MenuItem.js                    | 15 ++++---
 .../index.js                                  |  4 +-
 ...ssableWithSecondaryInteractionPropTypes.js |  4 ++
 src/components/menuItemPropTypes.js           |  9 +++++
 src/libs/showPopover.js                       | 19 +++++++++
 src/pages/settings/AboutPage/AboutPage.js     | 13 +++++-
 src/pages/settings/AppDownloadLinks.js        | 40 +++++--------------
 src/pages/settings/InitialSettingsPage.js     | 13 ++++++
 8 files changed, 80 insertions(+), 37 deletions(-)
 create mode 100644 src/libs/showPopover.js

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c8dc826a316..9781d50591b 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,8 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {
-    View, Pressable,
-} from 'react-native';
+import {View} from 'react-native';
 import Text from './Text';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
@@ -18,6 +16,7 @@ import colors from '../styles/colors';
 import variables from '../styles/variables';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
+import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
 
 const propTypes = {
     ...menuItemPropTypes,
@@ -46,6 +45,9 @@ const defaultProps = {
     subtitle: undefined,
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
+    onPressIn: () => {},
+    onPressOut: () => {},
+    onSecondaryInteraction: () => {},
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
@@ -71,7 +73,7 @@ const MenuItem = (props) => {
     ]);
 
     return (
-        <Pressable
+        <PressableWithSecondaryInteraction
             onPress={(e) => {
                 if (props.disabled) {
                     return;
@@ -83,6 +85,9 @@ const MenuItem = (props) => {
 
                 props.onPress(e);
             }}
+            onPressIn={props.onPressIn}
+            onPressOut={props.onPressOut}
+            onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => ([
                 props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
@@ -212,7 +217,7 @@ const MenuItem = (props) => {
                     </View>
                 </>
             )}
-        </Pressable>
+        </PressableWithSecondaryInteraction>
     );
 };
 
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index f3ea25a471f..5ece1312641 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -4,6 +4,7 @@ import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import * as StyleUtils from '../../styles/StyleUtils';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
@@ -50,11 +51,12 @@ class PressableWithSecondaryInteraction extends Component {
 
     render() {
         const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']);
+        const pressableStyle = this.props.style && StyleUtils.combineStyles(this.props.style);
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
             <Pressable
-                style={this.props.inline && styles.dInline}
+                style={this.props.inline ? styles.dInline : pressableStyle}
                 onPressIn={this.props.onPressIn}
                 onLongPress={(e) => {
                     if (DeviceCapabilities.hasHoverSupport()) {
diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
index bffe11bc4cd..ebbf8f5eab4 100644
--- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
+++ b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
     /** The function that should be called when this pressable is pressed */
@@ -34,6 +35,9 @@ const propTypes = {
 
     /** Disable focus trap for the element on secondary interaction  */
     withoutFocusOnSecondaryInteraction: PropTypes.bool,
+
+    /** Used to apply styles to the Pressable */
+    style: stylePropTypes,
 };
 
 const defaultProps = {
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index c1759d127cf..96a6c9dc3c8 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -88,6 +88,15 @@ const propTypes = {
 
     /** Prop to identify if we should load avatars vertically instead of diagonally */
     shouldStackHorizontally: PropTypes.bool,
+
+    /** The function that should be called when this component is pressedIn */
+    onPressIn: PropTypes.func,
+
+    /** The function that should be called when this component is pressedOut */
+    onPressOut: PropTypes.func,
+
+    /** The function that should be called when this component is LongPressed or right-clicked. */
+    onSecondaryInteraction: PropTypes.func,
 };
 
 export default propTypes;
diff --git a/src/libs/showPopover.js b/src/libs/showPopover.js
new file mode 100644
index 00000000000..fde1a352f59
--- /dev/null
+++ b/src/libs/showPopover.js
@@ -0,0 +1,19 @@
+import * as ContextMenuActions from '../pages/home/report/ContextMenu/ContextMenuActions';
+import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
+
+/**
+ * Show the ReportActionContextMenu modal popover.
+ *
+ * @param {Object} [event] - A press event.
+ * @param {String} [selection] - Copied content.
+ */
+const showPopover = (event, selection, popoverAnchor) => {
+    ReportActionContextMenu.showContextMenu(
+        ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
+        event,
+        selection,
+        popoverAnchor,
+    );
+};
+
+export default showPopover;
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 7c7840fdbbd..035abab787a 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -19,6 +19,9 @@ import * as Report from '../../../libs/actions/Report';
 import * as Link from '../../../libs/actions/Link';
 import getPlatformSpecificMenuItems from './getPlatformSpecificMenuItems';
 import compose from '../../../libs/compose';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
+import ControlSelection from '../../../libs/ControlSelection';
+import showPopover from '../../../libs/showPopover';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -26,6 +29,8 @@ const propTypes = {
 };
 
 const AboutPage = (props) => {
+    let popoverAnchor;
+
     const platformSpecificMenuItems = getPlatformSpecificMenuItems(props.isSmallScreenWidth);
 
     const menuItems = [
@@ -44,6 +49,7 @@ const AboutPage = (props) => {
             action: () => {
                 Link.openExternalLink(CONST.GITHUB_URL);
             },
+            link: CONST.GITHUB_URL,
         },
         {
             translationKey: 'initialSettingsPage.aboutPage.viewOpenJobs',
@@ -52,13 +58,14 @@ const AboutPage = (props) => {
             action: () => {
                 Link.openExternalLink(CONST.UPWORK_URL);
             },
+            link: CONST.UPWORK_URL,
         },
         {
             translationKey: 'initialSettingsPage.aboutPage.reportABug',
             icon: Expensicons.Bug,
             action: Report.navigateToConciergeChat,
         },
-    ];
+    ]
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
@@ -107,6 +114,10 @@ const AboutPage = (props) => {
                                     icon={item.icon}
                                     iconRight={item.iconRight}
                                     onPress={() => item.action()}
+                                    onPressIn={() => !_.isEmpty(item.link) && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                                    onPressOut={() => !_.isEmpty(item.link) && ControlSelection.unblock()}
+                                    onSecondaryInteraction={e => !_.isEmpty(item.link) && showPopover(e, item.link, popoverAnchor)}
+                                    ref={el => popoverAnchor = el}
                                     shouldShowRightIcon
                                 />
                             ))}
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 9b47bdb644e..6becbc70c42 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -11,12 +11,10 @@ import compose from '../../libs/compose';
 import MenuItem from '../../components/MenuItem';
 import styles from '../../styles/styles';
 import * as Link from '../../libs/actions/Link';
-import PressableWithSecondaryInteraction from '../../components/PressableWithSecondaryInteraction';
 import ControlSelection from '../../libs/ControlSelection';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
-import * as ContextMenuActions from '../home/report/ContextMenu/ContextMenuActions';
+import showPopover from '../../libs/showPopover';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -56,21 +54,6 @@ const AppDownloadLinksPage = (props) => {
         },
     ];
 
-    /**
-     * Show the ReportActionContextMenu modal popover.
-     *
-     * @param {Object} [event] - A press event.
-     * @param {String} [selection] - Copied content.
-     */
-    const showPopover = (event, selection) => {
-        ReportActionContextMenu.showContextMenu(
-            ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
-            event,
-            selection,
-            popoverAnchor,
-        );
-    };
-
     return (
         <ScreenWrapper>
             <HeaderWithCloseButton
@@ -81,24 +64,21 @@ const AppDownloadLinksPage = (props) => {
             />
             <ScrollView style={[styles.mt5]}>
                 {_.map(menuItems, item => (
-                    <PressableWithSecondaryInteraction
+                    <MenuItem
                         key={item.translationKey}
+                        onPress={() => item.action()}
                         onPressIn={() => props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={() => ControlSelection.unblock()}
-                        onSecondaryInteraction={e => showPopover(e, item.link)}
-                        ref={el => popoverAnchor = el}
+                        onSecondaryInteraction={e => showPopover(e, item.link, popoverAnchor)}
                         onKeyDown={(event) => {
                             event.target.blur();
                         }}
-                    >
-                        <MenuItem
-                            title={props.translate(item.translationKey)}
-                            icon={item.icon}
-                            iconRight={item.iconRight}
-                            onPress={() => item.action()}
-                            shouldShowRightIcon
-                        />
-                    </PressableWithSecondaryInteraction>
+                        ref={el => popoverAnchor = el}
+                        title={props.translate(item.translationKey)}
+                        icon={item.icon}
+                        iconRight={item.iconRight}
+                        shouldShowRightIcon
+                    />
                 ))}
             </ScrollView>
         </ScreenWrapper>
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 66a130697b9..5049d9c3f58 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -35,6 +35,10 @@ import * as Link from '../../libs/actions/Link';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import * as UserUtils from '../../libs/UserUtils';
 import policyMemberPropType from '../policyMemberPropType';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import ControlSelection from '../../libs/ControlSelection';
+import showPopover from '../../libs/showPopover';
 
 const propTypes = {
     /* Onyx Props */
@@ -95,6 +99,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -116,6 +121,8 @@ class InitialSettingsPage extends React.Component {
     constructor(props) {
         super(props);
 
+        this.popoverAnchor = React.createRef();
+        
         this.getWalletBalance = this.getWalletBalance.bind(this);
         this.getDefaultMenuItems = this.getDefaultMenuItems.bind(this);
         this.getMenuItem = this.getMenuItem.bind(this);
@@ -202,6 +209,7 @@ class InitialSettingsPage extends React.Component {
                 action: () => { Link.openExternalLink(CONST.NEWHELP_URL); },
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
+                link: CONST.NEWHELP_URL,
             },
             {
                 translationKey: 'initialSettingsPage.about',
@@ -235,6 +243,10 @@ class InitialSettingsPage extends React.Component {
                 brickRoadIndicator={item.brickRoadIndicator}
                 floatRightAvatars={item.floatRightAvatars}
                 shouldStackHorizontally={item.shouldStackHorizontally}
+                ref={this.popoverAnchor}
+                onPressIn={() => !_.isEmpty(item.link) && this.props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => !_.isEmpty(item.link) && ControlSelection.unblock()}
+                onSecondaryInteraction={e => !_.isEmpty(item.link) && showPopover(e, item.link, this.popoverAnchor.current)}
             />
         );
     }
@@ -333,6 +345,7 @@ InitialSettingsPage.propTypes = propTypes;
 InitialSettingsPage.defaultProps = defaultProps;
 
 export default compose(
+    withWindowDimensions,
     withLocalize,
     withCurrentUserPersonalDetails,
     withOnyx({

From 9a094e35ab9b2451a3158195d4926446bf0ad246 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 11 Apr 2023 22:01:08 +0100
Subject: [PATCH 02/18] use React.forwardRef for MenuItem, and fix prop types

---
 src/components/MenuItem.js                             |  5 +++--
 .../pressableWithSecondaryInteractionPropTypes.js      | 10 ++++++++--
 src/libs/showPopover.js                                |  1 +
 src/pages/settings/AboutPage/AboutPage.js              |  2 +-
 src/pages/settings/InitialSettingsPage.js              |  2 +-
 src/styles/stylePropTypes.js                           |  1 +
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 9781d50591b..aba3207ab15 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -55,7 +55,7 @@ const defaultProps = {
     shouldStackHorizontally: false,
 };
 
-const MenuItem = (props) => {
+const MenuItem = React.forwardRef((props, ref) => {
     const titleTextStyle = StyleUtils.combineStyles([
         styles.popoverMenuText,
         (props.icon ? styles.ml3 : undefined),
@@ -95,6 +95,7 @@ const MenuItem = (props) => {
                 styles.popoverMaxWidth,
             ])}
             disabled={props.disabled}
+            ref={ref}
         >
             {({hovered, pressed}) => (
                 <>
@@ -219,7 +220,7 @@ const MenuItem = (props) => {
             )}
         </PressableWithSecondaryInteraction>
     );
-};
+});
 
 MenuItem.propTypes = propTypes;
 MenuItem.defaultProps = defaultProps;
diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
index ebbf8f5eab4..d0f59efb8b8 100644
--- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
+++ b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
@@ -15,10 +15,16 @@ const propTypes = {
     onSecondaryInteraction: PropTypes.func.isRequired,
 
     /** The children which should be contained in this wrapper component. */
-    children: PropTypes.node.isRequired,
+    children: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.node,
+    ]).isRequired,
 
     /** The ref to the search input (may be null on small screen widths) */
-    forwardedRef: PropTypes.func,
+    forwardedRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.object,
+    ]),
 
     /** Prevent the default ContextMenu on web/Desktop */
     preventDefaultContentMenu: PropTypes.bool,
diff --git a/src/libs/showPopover.js b/src/libs/showPopover.js
index fde1a352f59..da5fd8f50c9 100644
--- a/src/libs/showPopover.js
+++ b/src/libs/showPopover.js
@@ -6,6 +6,7 @@ import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/Repor
  *
  * @param {Object} [event] - A press event.
  * @param {String} [selection] - Copied content.
+ * @param {Object} [popoverAnchor] - The popover anchor.
  */
 const showPopover = (event, selection, popoverAnchor) => {
     ReportActionContextMenu.showContextMenu(
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 035abab787a..42caac05dd1 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -65,7 +65,7 @@ const AboutPage = (props) => {
             icon: Expensicons.Bug,
             action: Report.navigateToConciergeChat,
         },
-    ]
+    ];
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 5049d9c3f58..67de078c425 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -122,7 +122,7 @@ class InitialSettingsPage extends React.Component {
         super(props);
 
         this.popoverAnchor = React.createRef();
-        
+
         this.getWalletBalance = this.getWalletBalance.bind(this);
         this.getDefaultMenuItems = this.getDefaultMenuItems.bind(this);
         this.getMenuItem = this.getMenuItem.bind(this);
diff --git a/src/styles/stylePropTypes.js b/src/styles/stylePropTypes.js
index 4c7e825a884..edc5d0383a7 100644
--- a/src/styles/stylePropTypes.js
+++ b/src/styles/stylePropTypes.js
@@ -3,4 +3,5 @@ import PropTypes from 'prop-types';
 export default PropTypes.oneOfType([
     PropTypes.object,
     PropTypes.arrayOf(PropTypes.object),
+    PropTypes.func,
 ]);

From e8e90e1530fa7b3723f664d813c308162c22a661 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 12 Apr 2023 12:16:58 +0100
Subject: [PATCH 03/18] changes based on PR review feedback

---
 src/components/MenuItem.js                    | 23 +++++++++-------
 .../index.js                                  |  3 +--
 src/components/menuItemPropTypes.js           | 15 ++++++-----
 src/libs/showPopover.js                       | 20 --------------
 .../ContextMenu/ReportActionContextMenu.js    | 27 +++++++++++++++++++
 src/pages/settings/AboutPage/AboutPage.js     |  9 +++----
 src/pages/settings/AppDownloadLinks.js        |  7 +++--
 src/pages/settings/InitialSettingsPage.js     | 12 +++------
 8 files changed, 60 insertions(+), 56 deletions(-)
 delete mode 100644 src/libs/showPopover.js

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index aba3207ab15..ed2b8dac191 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -17,9 +17,13 @@ import variables from '../styles/variables';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
 import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import * as DeviceCapabilities from '../libs/DeviceCapabilities';
+import ControlSelection from '../libs/ControlSelection';
 
 const propTypes = {
     ...menuItemPropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -45,17 +49,16 @@ const defaultProps = {
     subtitle: undefined,
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
-    onPressIn: () => {},
-    onPressOut: () => {},
     onSecondaryInteraction: () => {},
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
     floatRightAvatars: [],
     shouldStackHorizontally: false,
+    shouldBlockSelection: false,
 };
 
-const MenuItem = React.forwardRef((props, ref) => {
+const MenuItem = (props) => {
     const titleTextStyle = StyleUtils.combineStyles([
         styles.popoverMenuText,
         (props.icon ? styles.ml3 : undefined),
@@ -85,8 +88,8 @@ const MenuItem = React.forwardRef((props, ref) => {
 
                 props.onPress(e);
             }}
-            onPressIn={props.onPressIn}
-            onPressOut={props.onPressOut}
+            onPressIn={() => props.shouldBlockSelection && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
             onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => ([
                 props.style,
@@ -95,7 +98,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                 styles.popoverMaxWidth,
             ])}
             disabled={props.disabled}
-            ref={ref}
+            ref={props.forwardedRef}
         >
             {({hovered, pressed}) => (
                 <>
@@ -220,10 +223,12 @@ const MenuItem = React.forwardRef((props, ref) => {
             )}
         </PressableWithSecondaryInteraction>
     );
-});
+};
 
 MenuItem.propTypes = propTypes;
 MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = 'MenuItem';
-
-export default MenuItem;
+export default withWindowDimensions(React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <MenuItem {...props} forwardedRef={ref} />
+)));
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index 5ece1312641..d9a3d55ad84 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -51,12 +51,11 @@ class PressableWithSecondaryInteraction extends Component {
 
     render() {
         const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']);
-        const pressableStyle = this.props.style && StyleUtils.combineStyles(this.props.style);
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
             <Pressable
-                style={this.props.inline ? styles.dInline : pressableStyle}
+                style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
                 onLongPress={(e) => {
                     if (DeviceCapabilities.hasHoverSupport()) {
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 96a6c9dc3c8..78486cb5a84 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -89,14 +89,17 @@ const propTypes = {
     /** Prop to identify if we should load avatars vertically instead of diagonally */
     shouldStackHorizontally: PropTypes.bool,
 
-    /** The function that should be called when this component is pressedIn */
-    onPressIn: PropTypes.func,
-
-    /** The function that should be called when this component is pressedOut */
-    onPressOut: PropTypes.func,
-
     /** The function that should be called when this component is LongPressed or right-clicked. */
     onSecondaryInteraction: PropTypes.func,
+
+    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
+    shouldBlockSelection: PropTypes.bool,
+
+    /** The ref to the menu item */
+    forwardedRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.object,
+    ]),
 };
 
 export default propTypes;
diff --git a/src/libs/showPopover.js b/src/libs/showPopover.js
deleted file mode 100644
index da5fd8f50c9..00000000000
--- a/src/libs/showPopover.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as ContextMenuActions from '../pages/home/report/ContextMenu/ContextMenuActions';
-import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
-
-/**
- * Show the ReportActionContextMenu modal popover.
- *
- * @param {Object} [event] - A press event.
- * @param {String} [selection] - Copied content.
- * @param {Object} [popoverAnchor] - The popover anchor.
- */
-const showPopover = (event, selection, popoverAnchor) => {
-    ReportActionContextMenu.showContextMenu(
-        ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
-        event,
-        selection,
-        popoverAnchor,
-    );
-};
-
-export default showPopover;
diff --git a/src/pages/home/report/ContextMenu/ReportActionContextMenu.js b/src/pages/home/report/ContextMenu/ReportActionContextMenu.js
index df544f2e720..1870bd0ee95 100644
--- a/src/pages/home/report/ContextMenu/ReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/ReportActionContextMenu.js
@@ -1,5 +1,11 @@
+import _ from 'underscore';
 import React from 'react';
 
+/**
+ * LINK type which is used in the showPopover method.
+ */
+const CONTEXT_MENU_TYPE_LINK = 'LINK';
+
 const contextMenuRef = React.createRef();
 
 /**
@@ -112,6 +118,26 @@ function isActiveReportAction(actionID) {
     return contextMenuRef.current.isActiveReportAction(actionID);
 }
 
+/**
+ * Show the ReportActionContextMenu modal popover.
+ *
+ * @param {Object} [event] - A press event.
+ * @param {String} [selection] - Copied content.
+ * @param {Object} [popoverAnchor] - The popover anchor.
+ */
+function showPopover(event, selection, popoverAnchor) {
+    if (_.isEmpty(selection)) {
+        return;
+    }
+
+    showContextMenu(
+        CONTEXT_MENU_TYPE_LINK,
+        event,
+        selection,
+        popoverAnchor,
+    );
+}
+
 export {
     contextMenuRef,
     showContextMenu,
@@ -119,4 +145,5 @@ export {
     isActiveReportAction,
     showDeleteModal,
     hideDeleteModal,
+    showPopover,
 };
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 42caac05dd1..303ed949af6 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -19,9 +19,7 @@ import * as Report from '../../../libs/actions/Report';
 import * as Link from '../../../libs/actions/Link';
 import getPlatformSpecificMenuItems from './getPlatformSpecificMenuItems';
 import compose from '../../../libs/compose';
-import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
-import ControlSelection from '../../../libs/ControlSelection';
-import showPopover from '../../../libs/showPopover';
+import * as ReportActionContextMenu from '../../home/report/ContextMenu/ReportActionContextMenu';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -114,9 +112,8 @@ const AboutPage = (props) => {
                                     icon={item.icon}
                                     iconRight={item.iconRight}
                                     onPress={() => item.action()}
-                                    onPressIn={() => !_.isEmpty(item.link) && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                                    onPressOut={() => !_.isEmpty(item.link) && ControlSelection.unblock()}
-                                    onSecondaryInteraction={e => !_.isEmpty(item.link) && showPopover(e, item.link, popoverAnchor)}
+                                    shouldBlockSelection={!_.isEmpty(item.link)}
+                                    onSecondaryInteraction={e => ReportActionContextMenu.showPopover(e, item.link, popoverAnchor)}
                                     ref={el => popoverAnchor = el}
                                     shouldShowRightIcon
                                 />
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 6becbc70c42..e8421d821d8 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -13,8 +13,7 @@ import styles from '../../styles/styles';
 import * as Link from '../../libs/actions/Link';
 import ControlSelection from '../../libs/ControlSelection';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import showPopover from '../../libs/showPopover';
+import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -67,9 +66,8 @@ const AppDownloadLinksPage = (props) => {
                     <MenuItem
                         key={item.translationKey}
                         onPress={() => item.action()}
-                        onPressIn={() => props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={() => ControlSelection.unblock()}
-                        onSecondaryInteraction={e => showPopover(e, item.link, popoverAnchor)}
+                        onSecondaryInteraction={e => ReportActionContextMenu.showPopover(e, item.link, popoverAnchor)}
                         onKeyDown={(event) => {
                             event.target.blur();
                         }}
@@ -77,6 +75,7 @@ const AppDownloadLinksPage = (props) => {
                         title={props.translate(item.translationKey)}
                         icon={item.icon}
                         iconRight={item.iconRight}
+                        shouldBlockSelection
                         shouldShowRightIcon
                     />
                 ))}
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 67de078c425..76209ffc37a 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -35,10 +35,7 @@ import * as Link from '../../libs/actions/Link';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import * as UserUtils from '../../libs/UserUtils';
 import policyMemberPropType from '../policyMemberPropType';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import ControlSelection from '../../libs/ControlSelection';
-import showPopover from '../../libs/showPopover';
+import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
 
 const propTypes = {
     /* Onyx Props */
@@ -99,7 +96,6 @@ const propTypes = {
 
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
-    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -244,9 +240,8 @@ class InitialSettingsPage extends React.Component {
                 floatRightAvatars={item.floatRightAvatars}
                 shouldStackHorizontally={item.shouldStackHorizontally}
                 ref={this.popoverAnchor}
-                onPressIn={() => !_.isEmpty(item.link) && this.props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                onPressOut={() => !_.isEmpty(item.link) && ControlSelection.unblock()}
-                onSecondaryInteraction={e => !_.isEmpty(item.link) && showPopover(e, item.link, this.popoverAnchor.current)}
+                shouldBlockSelection={!_.isEmpty(item.link)}
+                onSecondaryInteraction={e => ReportActionContextMenu.showPopover(e, item.link, this.popoverAnchor.current)}
             />
         );
     }
@@ -345,7 +340,6 @@ InitialSettingsPage.propTypes = propTypes;
 InitialSettingsPage.defaultProps = defaultProps;
 
 export default compose(
-    withWindowDimensions,
     withLocalize,
     withCurrentUserPersonalDetails,
     withOnyx({

From d07e3b15a6f96f91dce895119714b050ecebe816 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 12 Apr 2023 12:22:20 +0100
Subject: [PATCH 04/18] clean up onPressOut in MenuItem component

---
 src/components/MenuItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index ed2b8dac191..85118978555 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -89,7 +89,7 @@ const MenuItem = (props) => {
                 props.onPress(e);
             }}
             onPressIn={() => props.shouldBlockSelection && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={() => ControlSelection.unblock()}
+            onPressOut={ControlSelection.unblock}
             onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => ([
                 props.style,

From cfb3b76856552fdab5809241e2a20a24bf5af043 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 12 Apr 2023 19:28:49 +0100
Subject: [PATCH 05/18] implement Copy to Clipboard behaviour for all links

---
 src/components/MenuItemList.js                | 45 +++++++++++++-----
 src/libs/actions/Link.js                      | 47 ++++++++++---------
 src/pages/GetAssistancePage.js                |  1 +
 .../ContextMenu/ReportActionContextMenu.js    | 27 -----------
 src/pages/settings/AboutPage/AboutPage.js     |  3 +-
 src/pages/settings/AppDownloadLinks.js        |  5 +-
 src/pages/settings/InitialSettingsPage.js     |  3 +-
 .../travel/WorkspaceTravelVBAView.js          |  6 ++-
 8 files changed, 71 insertions(+), 66 deletions(-)

diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index e442d376689..7a6380fe8f1 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -3,6 +3,8 @@ import _ from 'underscore';
 import PropTypes from 'prop-types';
 import MenuItem from './MenuItem';
 import menuItemPropTypes from './menuItemPropTypes';
+import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
+import {CONTEXT_MENU_TYPES} from '../pages/home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
@@ -12,17 +14,38 @@ const defaultProps = {
     menuItems: [],
 };
 
-const MenuItemList = props => (
-    <>
-        {_.map(props.menuItems, menuItemProps => (
-            <MenuItem
-                key={menuItemProps.title}
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...menuItemProps}
-            />
-        ))}
-    </>
-);
+const MenuItemList = (props) => {
+    let popoverAnchor;
+
+    /**
+     * Handle the secondary interaction for a menu item.
+     *
+     * @param {any} link the menu item link object or function
+     * @param {Event} e the interaction event
+     */
+    const secondaryInteraction = (link, e) => {
+        if (typeof link === 'function') {
+            link().then(url => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, url, popoverAnchor));
+        } else if (!_.isEmpty(link)) {
+            ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, link, popoverAnchor);
+        }
+    };
+
+    return (
+        <>
+            {_.map(props.menuItems, menuItemProps => (
+                <MenuItem
+                    key={menuItemProps.title}
+                    onSecondaryInteraction={e => secondaryInteraction(menuItemProps.link, e)}
+                    ref={el => popoverAnchor = el}
+                    shouldBlockSelection={typeof menuItemProps.link === 'function' || !_.isEmpty(menuItemProps.link)}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...menuItemProps}
+                />
+            ))}
+        </>
+    );
+};
 
 MenuItemList.displayName = 'MenuItemList';
 MenuItemList.propTypes = propTypes;
diff --git a/src/libs/actions/Link.js b/src/libs/actions/Link.js
index c38f901bb39..2cccfc447f6 100644
--- a/src/libs/actions/Link.js
+++ b/src/libs/actions/Link.js
@@ -34,33 +34,35 @@ function showGrowlIfOffline() {
 }
 
 /**
- * @param {String} url
+ * @param {String} [url] the url path
+ * @param {String} [shortLivedAuthToken]
+ *
+ * @returns {Promise<string>}
  */
-function openOldDotLink(url) {
-    /**
-     * @param {String} [shortLivedAuthToken]
-     * @returns {Promise<string>}
-     */
-    function buildOldDotURL(shortLivedAuthToken) {
-        const hasHashParams = url.indexOf('#') !== -1;
-        const hasURLParams = url.indexOf('?') !== -1;
+function buildOldDotURL(url, shortLivedAuthToken) {
+    const hasHashParams = url.indexOf('#') !== -1;
+    const hasURLParams = url.indexOf('?') !== -1;
 
-        const authTokenParam = shortLivedAuthToken ? `authToken=${shortLivedAuthToken}` : '';
-        const emailParam = `email=${encodeURIComponent(currentUserEmail)}`;
+    const authTokenParam = shortLivedAuthToken ? `authToken=${shortLivedAuthToken}` : '';
+    const emailParam = `email=${encodeURIComponent(currentUserEmail)}`;
 
-        const params = _.compact([authTokenParam, emailParam]).join('&');
+    const params = _.compact([authTokenParam, emailParam]).join('&');
 
-        return Environment.getOldDotEnvironmentURL()
-            .then((environmentURL) => {
-                const oldDotDomain = Url.addTrailingForwardSlash(environmentURL);
+    return Environment.getOldDotEnvironmentURL()
+        .then((environmentURL) => {
+            const oldDotDomain = Url.addTrailingForwardSlash(environmentURL);
 
-                // If the URL contains # or ?, we can assume they don't need to have the `?` token to start listing url parameters.
-                return `${oldDotDomain}${url}${hasHashParams || hasURLParams ? '&' : '?'}${params}`;
-            });
-    }
+            // If the URL contains # or ?, we can assume they don't need to have the `?` token to start listing url parameters.
+            return `${oldDotDomain}${url}${hasHashParams || hasURLParams ? '&' : '?'}${params}`;
+        });
+}
 
+/**
+ * @param {String} url the url path
+ */
+function openOldDotLink(url) {
     if (isNetworkOffline) {
-        buildOldDotURL().then(oldDotURL => Linking.openURL(oldDotURL));
+        buildOldDotURL(url).then(oldDotURL => Linking.openURL(oldDotURL));
         return;
     }
 
@@ -69,11 +71,11 @@ function openOldDotLink(url) {
     API.makeRequestWithSideEffects(
         'OpenOldDotLink', {}, {},
     ).then((response) => {
-        buildOldDotURL(response.shortLivedAuthToken).then((oldDotUrl) => {
+        buildOldDotURL(url, response.shortLivedAuthToken).then((oldDotUrl) => {
             Linking.openURL(oldDotUrl);
         });
     }).catch(() => {
-        buildOldDotURL().then((oldDotUrl) => {
+        buildOldDotURL(url).then((oldDotUrl) => {
             Linking.openURL(oldDotUrl);
         });
     });
@@ -92,6 +94,7 @@ function openExternalLink(url, shouldSkipCustomSafariLogic = false) {
 }
 
 export {
+    buildOldDotURL,
     openOldDotLink,
     openExternalLink,
 };
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index e2115c6d781..89544b25dcf 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -57,6 +57,7 @@ const GetAssistancePage = (props) => {
         shouldShowRightIcon: true,
         iconRight: Expensicons.NewWindow,
         wrapperStyle: [styles.cardMenuItem],
+        link: CONST.NEWHELP_URL,
     }];
 
     // If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list
diff --git a/src/pages/home/report/ContextMenu/ReportActionContextMenu.js b/src/pages/home/report/ContextMenu/ReportActionContextMenu.js
index 1870bd0ee95..df544f2e720 100644
--- a/src/pages/home/report/ContextMenu/ReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/ReportActionContextMenu.js
@@ -1,11 +1,5 @@
-import _ from 'underscore';
 import React from 'react';
 
-/**
- * LINK type which is used in the showPopover method.
- */
-const CONTEXT_MENU_TYPE_LINK = 'LINK';
-
 const contextMenuRef = React.createRef();
 
 /**
@@ -118,26 +112,6 @@ function isActiveReportAction(actionID) {
     return contextMenuRef.current.isActiveReportAction(actionID);
 }
 
-/**
- * Show the ReportActionContextMenu modal popover.
- *
- * @param {Object} [event] - A press event.
- * @param {String} [selection] - Copied content.
- * @param {Object} [popoverAnchor] - The popover anchor.
- */
-function showPopover(event, selection, popoverAnchor) {
-    if (_.isEmpty(selection)) {
-        return;
-    }
-
-    showContextMenu(
-        CONTEXT_MENU_TYPE_LINK,
-        event,
-        selection,
-        popoverAnchor,
-    );
-}
-
 export {
     contextMenuRef,
     showContextMenu,
@@ -145,5 +119,4 @@ export {
     isActiveReportAction,
     showDeleteModal,
     hideDeleteModal,
-    showPopover,
 };
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 303ed949af6..996342095ce 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -20,6 +20,7 @@ import * as Link from '../../../libs/actions/Link';
 import getPlatformSpecificMenuItems from './getPlatformSpecificMenuItems';
 import compose from '../../../libs/compose';
 import * as ReportActionContextMenu from '../../home/report/ContextMenu/ReportActionContextMenu';
+import {CONTEXT_MENU_TYPES} from '../../home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -113,7 +114,7 @@ const AboutPage = (props) => {
                                     iconRight={item.iconRight}
                                     onPress={() => item.action()}
                                     shouldBlockSelection={!_.isEmpty(item.link)}
-                                    onSecondaryInteraction={e => ReportActionContextMenu.showPopover(e, item.link, popoverAnchor)}
+                                    onSecondaryInteraction={e => !_.isEmpty(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor)}
                                     ref={el => popoverAnchor = el}
                                     shouldShowRightIcon
                                 />
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index e8421d821d8..8acd2e95daf 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -11,9 +11,9 @@ import compose from '../../libs/compose';
 import MenuItem from '../../components/MenuItem';
 import styles from '../../styles/styles';
 import * as Link from '../../libs/actions/Link';
-import ControlSelection from '../../libs/ControlSelection';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
+import {CONTEXT_MENU_TYPES} from '../home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -66,8 +66,7 @@ const AppDownloadLinksPage = (props) => {
                     <MenuItem
                         key={item.translationKey}
                         onPress={() => item.action()}
-                        onPressOut={() => ControlSelection.unblock()}
-                        onSecondaryInteraction={e => ReportActionContextMenu.showPopover(e, item.link, popoverAnchor)}
+                        onSecondaryInteraction={e => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor)}
                         onKeyDown={(event) => {
                             event.target.blur();
                         }}
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 76209ffc37a..5d9975a7834 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -36,6 +36,7 @@ import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import * as UserUtils from '../../libs/UserUtils';
 import policyMemberPropType from '../policyMemberPropType';
 import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
+import {CONTEXT_MENU_TYPES} from '../home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     /* Onyx Props */
@@ -241,7 +242,7 @@ class InitialSettingsPage extends React.Component {
                 shouldStackHorizontally={item.shouldStackHorizontally}
                 ref={this.popoverAnchor}
                 shouldBlockSelection={!_.isEmpty(item.link)}
-                onSecondaryInteraction={e => ReportActionContextMenu.showPopover(e, item.link, this.popoverAnchor.current)}
+                onSecondaryInteraction={e => !_.isEmpty(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current)}
             />
         );
     }
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index 9c79b55c90b..b9d59805d1c 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -13,6 +13,8 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
+const CONCIERGE_TRAVEL_URL = 'https://community.expensify.com/discussion/7066/introducing-concierge-travel';
+
 const WorkspaceTravelVBAView = props => (
     <Section
         title={props.translate('workspace.travel.packYourBags')}
@@ -25,6 +27,7 @@ const WorkspaceTravelVBAView = props => (
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
                 wrapperStyle: [styles.cardMenuItem],
+                link: () => Link.buildOldDotURL('domain_companycards'),
             },
             {
                 title: props.translate('workspace.travel.bookTravelWithConcierge'),
@@ -37,11 +40,12 @@ const WorkspaceTravelVBAView = props => (
             },
             {
                 title: props.translate('requestorStep.learnMore'),
-                onPress: () => Link.openExternalLink('https://community.expensify.com/discussion/7066/introducing-concierge-travel'),
+                onPress: () => Link.openExternalLink(CONCIERGE_TRAVEL_URL),
                 icon: Expensicons.Info,
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
                 wrapperStyle: [styles.cardMenuItem],
+                link: CONCIERGE_TRAVEL_URL,
             },
         ]}
     >

From 0240f90c35bc508ad869d299949f565735bd3927 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 12 Apr 2023 19:43:08 +0100
Subject: [PATCH 06/18] cleanup

---
 src/CONST.js                                         | 1 +
 src/components/MenuItemList.js                       | 2 +-
 src/pages/workspace/travel/WorkspaceTravelVBAView.js | 7 +++----
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 54bfc6c53fb..9fa668a1585 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2206,6 +2206,7 @@ const CONST = {
         'ILS', 'JPY', 'MYR', 'MXN', 'TWD', 'NZD', 'NOK', 'PHP',
         'PLN', 'GBP', 'RUB', 'SGD', 'SEK', 'CHF', 'THB', 'USD',
     ],
+
     CONCIERGE_TRAVEL_URL: 'https://community.expensify.com/discussion/7066/introducing-concierge-travel',
 };
 
diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 7a6380fe8f1..65b1357fff2 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -20,7 +20,7 @@ const MenuItemList = (props) => {
     /**
      * Handle the secondary interaction for a menu item.
      *
-     * @param {any} link the menu item link object or function
+     * @param {*} link the menu item link or function to get the link
      * @param {Event} e the interaction event
      */
     const secondaryInteraction = (link, e) => {
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index b9d59805d1c..79b25613602 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -8,13 +8,12 @@ import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
 import * as Link from '../../../libs/actions/Link';
 import * as Report from '../../../libs/actions/Report';
+import CONST from '../../../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const CONCIERGE_TRAVEL_URL = 'https://community.expensify.com/discussion/7066/introducing-concierge-travel';
-
 const WorkspaceTravelVBAView = props => (
     <Section
         title={props.translate('workspace.travel.packYourBags')}
@@ -40,12 +39,12 @@ const WorkspaceTravelVBAView = props => (
             },
             {
                 title: props.translate('requestorStep.learnMore'),
-                onPress: () => Link.openExternalLink(CONCIERGE_TRAVEL_URL),
+                onPress: () => Link.openExternalLink(CONST.CONCIERGE_TRAVEL_URL),
                 icon: Expensicons.Info,
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
                 wrapperStyle: [styles.cardMenuItem],
-                link: CONCIERGE_TRAVEL_URL,
+                link: CONST.CONCIERGE_TRAVEL_URL,
             },
         ]}
     >

From 4da28a3d7c7947c0b188851538802cff1bbf0c3c Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 10:28:15 +0100
Subject: [PATCH 07/18] cleanup boolean checks

---
 src/components/MenuItemList.js            | 2 +-
 src/pages/settings/AboutPage/AboutPage.js | 4 ++--
 src/pages/settings/InitialSettingsPage.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 65b1357fff2..80ecce3ebd9 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -38,7 +38,7 @@ const MenuItemList = (props) => {
                     key={menuItemProps.title}
                     onSecondaryInteraction={e => secondaryInteraction(menuItemProps.link, e)}
                     ref={el => popoverAnchor = el}
-                    shouldBlockSelection={typeof menuItemProps.link === 'function' || !_.isEmpty(menuItemProps.link)}
+                    shouldBlockSelection={Boolean(menuItemProps.link)}
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...menuItemProps}
                 />
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 996342095ce..1cdcce623f8 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -113,8 +113,8 @@ const AboutPage = (props) => {
                                     icon={item.icon}
                                     iconRight={item.iconRight}
                                     onPress={() => item.action()}
-                                    shouldBlockSelection={!_.isEmpty(item.link)}
-                                    onSecondaryInteraction={e => !_.isEmpty(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor)}
+                                    shouldBlockSelection={Boolean(item.link)}
+                                    onSecondaryInteraction={e => Boolean(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor)}
                                     ref={el => popoverAnchor = el}
                                     shouldShowRightIcon
                                 />
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 5d9975a7834..f2ada71b5e6 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -241,8 +241,8 @@ class InitialSettingsPage extends React.Component {
                 floatRightAvatars={item.floatRightAvatars}
                 shouldStackHorizontally={item.shouldStackHorizontally}
                 ref={this.popoverAnchor}
-                shouldBlockSelection={!_.isEmpty(item.link)}
-                onSecondaryInteraction={e => !_.isEmpty(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current)}
+                shouldBlockSelection={Boolean(item.link)}
+                onSecondaryInteraction={e => Boolean(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current)}
             />
         );
     }

From 732c034b444f6e06bdbd9b0a211232397f8de725 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 13:00:35 +0100
Subject: [PATCH 08/18] update more links with the Copy to Clipboard behaviour

---
 .../ReimbursementAccount/Enable2FAPrompt.js   | 53 ++++++++------
 .../bills/WorkspaceBillsFirstSection.js       |  4 +-
 .../workspace/bills/WorkspaceBillsVBAView.js  | 51 +++++++------
 .../card/WorkspaceCardVBAWithECardView.js     | 15 +++-
 .../invoices/WorkspaceInvoicesFirstSection.js | 73 ++++++++++---------
 .../invoices/WorkspaceInvoicesVBAView.js      | 51 +++++++------
 .../reimburse/WorkspaceReimburseSection.js    |  4 +-
 .../reimburse/WorkspaceReimburseView.js       |  5 +-
 8 files changed, 147 insertions(+), 109 deletions(-)

diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 51c62b8957c..cb7bc1f004d 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -13,31 +13,36 @@ import themeColors from '../../styles/themes/default';
 const propTypes = {
     ...withLocalizePropTypes,
 };
-const Enable2FAPrompt = props => (
-    <Section
-        title={props.translate('validationStep.enable2FATitle')}
-        icon={Illustrations.ShieldYellow}
-        menuItems={[
-            {
-                title: props.translate('validationStep.secureYourAccount'),
-                onPress: () => {
-                    Link.openOldDotLink(encodeURI(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.getBankAccountRoute()}","isFromNewDot":"true"}`));
+const Enable2FAPrompt = (props) => {
+    const secureYourAccountUrl = encodeURI(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.getBankAccountRoute()}","isFromNewDot":"true"}`);
+
+    return (
+        <Section
+            title={props.translate('validationStep.enable2FATitle')}
+            icon={Illustrations.ShieldYellow}
+            menuItems={[
+                {
+                    title: props.translate('validationStep.secureYourAccount'),
+                    onPress: () => {
+                        Link.openOldDotLink(secureYourAccountUrl);
+                    },
+                    icon: Expensicons.Shield,
+                    shouldShowRightIcon: true,
+                    iconRight: Expensicons.NewWindow,
+                    iconFill: themeColors.success,
+                    wrapperStyle: [styles.cardMenuItem],
+                    link: () => Link.buildOldDotURL(secureYourAccountUrl),
                 },
-                icon: Expensicons.Shield,
-                shouldShowRightIcon: true,
-                iconRight: Expensicons.NewWindow,
-                iconFill: themeColors.success,
-                wrapperStyle: [styles.cardMenuItem],
-            },
-        ]}
-    >
-        <View style={[styles.mv3]}>
-            <Text>
-                {props.translate('validationStep.enable2FAText')}
-            </Text>
-        </View>
-    </Section>
-);
+            ]}
+        >
+            <View style={[styles.mv3]}>
+                <Text>
+                    {props.translate('validationStep.enable2FAText')}
+                </Text>
+            </View>
+        </Section>
+    );
+};
 
 Enable2FAPrompt.propTypes = propTypes;
 Enable2FAPrompt.displayName = 'Enable2FAPrompt';
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index f97b6ba946a..0d7f35155d1 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -42,6 +42,7 @@ const defaultProps = {
 
 const WorkspaceBillsFirstSection = (props) => {
     const emailDomain = Str.extractEmailDomain(props.session.email);
+    const manageYourBillsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
     return (
         <Section
             title={props.translate('workspace.bills.manageYourBills')}
@@ -50,12 +51,13 @@ const WorkspaceBillsFirstSection = (props) => {
                 {
                     title: props.translate('workspace.bills.viewAllBills'),
                     onPress: () => (
-                        Link.openOldDotLink(`reports?policyID=${props.policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`)
+                        Link.openOldDotLink(manageYourBillsUrl)
                     ),
                     icon: Expensicons.Bill,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
                     wrapperStyle: [styles.cardMenuItem],
+                    link: () => Link.buildOdDotURL(manageYourBillsUrl),
                 },
             ]}
             containerStyles={[styles.cardSection]}
diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
index 3731a9cc7b8..dcb625777c7 100644
--- a/src/pages/workspace/bills/WorkspaceBillsVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -17,30 +17,35 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceBillsVBAView = props => (
-    <>
-        <WorkspaceBillsFirstSection policyID={props.policyID} />
+const WorkspaceBillsVBAView = (props) => {
+    const reportsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`;
 
-        <Section
-            title={props.translate('workspace.bills.hassleFreeBills')}
-            icon={Illustrations.MoneyBadge}
-            menuItems={[
-                {
-                    title: props.translate('workspace.common.bills'),
-                    onPress: () => Link.openOldDotLink(`reports?policyID=${props.policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`),
-                    icon: Expensicons.Bill,
-                    shouldShowRightIcon: true,
-                    iconRight: Expensicons.NewWindow,
-                    wrapperStyle: [styles.cardMenuItem],
-                },
-            ]}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.bills.VBACopy')}</Text>
-            </View>
-        </Section>
-    </>
-);
+    return (
+        <>
+            <WorkspaceBillsFirstSection policyID={props.policyID} />
+
+            <Section
+                title={props.translate('workspace.bills.hassleFreeBills')}
+                icon={Illustrations.MoneyBadge}
+                menuItems={[
+                    {
+                        title: props.translate('workspace.common.bills'),
+                        onPress: () => Link.openOldDotLink(reportsUrl),
+                        icon: Expensicons.Bill,
+                        shouldShowRightIcon: true,
+                        iconRight: Expensicons.NewWindow,
+                        wrapperStyle: [styles.cardMenuItem],
+                        link: () => Link.buildOldDotURL(reportsUrl),
+                    },
+                ]}
+            >
+                <View style={[styles.mv3]}>
+                    <Text>{props.translate('workspace.bills.VBACopy')}</Text>
+                </View>
+            </Section>
+        </>
+    );
+};
 
 WorkspaceBillsVBAView.propTypes = propTypes;
 WorkspaceBillsVBAView.displayName = 'WorkspaceBillsVBAView';
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
index a9a551f2313..4c1213800ba 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
@@ -13,31 +13,40 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
+const MENU_LINKS = {
+    ISSUE_AND_MANAGE_CARDS: 'domain_companycards',
+    RECONCILE_CARDS: encodeURI('domain_companycards?param={"section":"cardReconciliation"}'),
+    SETTLEMENT_FREQUENCY: encodeURI('domain_companycards?param={"section":"configureSettings"}'),
+};
+
 const WorkspaceCardVBAWithECardView = (props) => {
     const menuItems = [
         {
             title: props.translate('workspace.common.issueAndManageCards'),
-            onPress: () => Link.openOldDotLink('domain_companycards'),
+            onPress: () => Link.openOldDotLink(MENU_LINKS.ISSUE_AND_MANAGE_CARDS),
             icon: Expensicons.ExpensifyCard,
             shouldShowRightIcon: true,
             iconRight: Expensicons.NewWindow,
             wrapperStyle: [styles.cardMenuItem],
+            link: () => Link.buildOldDotURL(MENU_LINKS.ISSUE_AND_MANAGE_CARDS),
         },
         {
             title: props.translate('workspace.common.reconcileCards'),
-            onPress: () => Link.openOldDotLink(encodeURI('domain_companycards?param={"section":"cardReconciliation"}')),
+            onPress: () => Link.openOldDotLink(MENU_LINKS.RECONCILE_CARDS),
             icon: Expensicons.ReceiptSearch,
             shouldShowRightIcon: true,
             iconRight: Expensicons.NewWindow,
             wrapperStyle: [styles.cardMenuItem],
+            link: () => Link.buildOldDotURL(MENU_LINKS.RECONCILE_CARDS),
         },
         {
             title: props.translate('workspace.common.settlementFrequency'),
-            onPress: () => Link.openOldDotLink(encodeURI('domain_companycards?param={"section":"configureSettings"}')),
+            onPress: () => Link.openOldDotLink(MENU_LINKS.SETTLEMENT_FREQUENCY),
             icon: Expensicons.Gear,
             shouldShowRightIcon: true,
             iconRight: Expensicons.NewWindow,
             wrapperStyle: [styles.cardMenuItem],
+            link: () => Link.buildOldDotURL(MENU_LINKS.SETTLEMENT_FREQUENCY),
         },
     ];
 
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
index 4d027542b15..9f3c84d28ff 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
@@ -16,39 +16,46 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceInvoicesFirstSection = props => (
-    <Section
-        title={props.translate('workspace.invoices.invoiceClientsAndCustomers')}
-        icon={Illustrations.InvoiceBlue}
-        menuItems={[
-            {
-                title: props.translate('workspace.invoices.sendInvoice'),
-                onPress: () => Link.openOldDotLink(encodeURI('reports?param={"createInvoice":true}')),
-                icon: Expensicons.Send,
-                shouldShowRightIcon: true,
-                iconRight: Expensicons.NewWindow,
-                wrapperStyle: [styles.cardMenuItem],
-            },
-            {
-                title: props.translate('workspace.invoices.viewAllInvoices'),
-                onPress: () => (
-                    Link.openOldDotLink(`reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`)
-                ),
-                icon: Expensicons.Invoice,
-                shouldShowRightIcon: true,
-                iconRight: Expensicons.NewWindow,
-                wrapperStyle: [styles.cardMenuItem],
-            },
-        ]}
-        containerStyles={[styles.cardSection]}
-    >
-        <View style={[styles.mv3]}>
-            <Text>
-                {props.translate('workspace.invoices.invoiceFirstSectionCopy')}
-            </Text>
-        </View>
-    </Section>
-);
+const WorkspaceInvoicesFirstSection = (props) => {
+    const sendInvoiceUrl = encodeURI('reports?param={"createInvoice":true}');
+    const viewAllInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
+
+    return (
+        <Section
+            title={props.translate('workspace.invoices.invoiceClientsAndCustomers')}
+            icon={Illustrations.InvoiceBlue}
+            menuItems={[
+                {
+                    title: props.translate('workspace.invoices.sendInvoice'),
+                    onPress: () => Link.openOldDotLink(sendInvoiceUrl),
+                    icon: Expensicons.Send,
+                    shouldShowRightIcon: true,
+                    iconRight: Expensicons.NewWindow,
+                    wrapperStyle: [styles.cardMenuItem],
+                    link: () => Link.buildOldDotURL(sendInvoiceUrl),
+                },
+                {
+                    title: props.translate('workspace.invoices.viewAllInvoices'),
+                    onPress: () => (
+                        Link.openOldDotLink(viewAllInvoicesUrl)
+                    ),
+                    icon: Expensicons.Invoice,
+                    shouldShowRightIcon: true,
+                    iconRight: Expensicons.NewWindow,
+                    wrapperStyle: [styles.cardMenuItem],
+                    link: () => Link.buildOldDotURL(viewAllInvoicesUrl),
+                },
+            ]}
+            containerStyles={[styles.cardSection]}
+        >
+            <View style={[styles.mv3]}>
+                <Text>
+                    {props.translate('workspace.invoices.invoiceFirstSectionCopy')}
+                </Text>
+            </View>
+        </Section>
+    );
+};
 
 WorkspaceInvoicesFirstSection.propTypes = propTypes;
 WorkspaceInvoicesFirstSection.displayName = 'WorkspaceInvoicesFirstSection';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
index c88a61eef18..c4f50bb9d49 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -17,30 +17,35 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceInvoicesVBAView = props => (
-    <>
-        <WorkspaceInvoicesFirstSection policyID={props.policyID} />
+const WorkspaceInvoicesVBAView = (props) => {
+    const viewUnpaidInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`;
 
-        <Section
-            title={props.translate('workspace.invoices.moneyBackInAFlash')}
-            icon={Illustrations.MoneyBadge}
-            menuItems={[
-                {
-                    title: props.translate('workspace.invoices.viewUnpaidInvoices'),
-                    onPress: () => Link.openOldDotLink(`reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`),
-                    icon: Expensicons.Hourglass,
-                    shouldShowRightIcon: true,
-                    iconRight: Expensicons.NewWindow,
-                    wrapperStyle: [styles.cardMenuItem],
-                },
-            ]}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.invoices.unlockVBACopy')}</Text>
-            </View>
-        </Section>
-    </>
-);
+    return (
+        <>
+            <WorkspaceInvoicesFirstSection policyID={props.policyID} />
+
+            <Section
+                title={props.translate('workspace.invoices.moneyBackInAFlash')}
+                icon={Illustrations.MoneyBadge}
+                menuItems={[
+                    {
+                        title: props.translate('workspace.invoices.viewUnpaidInvoices'),
+                        onPress: () => Link.openOldDotLink(viewUnpaidInvoicesUrl),
+                        icon: Expensicons.Hourglass,
+                        shouldShowRightIcon: true,
+                        iconRight: Expensicons.NewWindow,
+                        wrapperStyle: [styles.cardMenuItem],
+                        link: () => Link.buildOldDotURL(viewUnpaidInvoicesUrl),
+                    },
+                ]}
+            >
+                <View style={[styles.mv3]}>
+                    <Text>{props.translate('workspace.invoices.unlockVBACopy')}</Text>
+                </View>
+            </Section>
+        </>
+    );
+};
 
 WorkspaceInvoicesVBAView.propTypes = propTypes;
 WorkspaceInvoicesVBAView.displayName = 'WorkspaceInvoicesVBAView';
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index 20f443bf567..3928816fb68 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -57,6 +57,7 @@ class WorkspaceReimburseSection extends React.Component {
     render() {
         const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
         const hasVBA = achState === BankAccount.STATE.OPEN;
+        const reimburseReceiptsUrl = `reports?policyID=${this.props.policy.id}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`;
 
         if (this.props.network.isOffline) {
             return (
@@ -93,11 +94,12 @@ class WorkspaceReimburseSection extends React.Component {
                         menuItems={[
                             {
                                 title: this.props.translate('workspace.reimburse.reimburseReceipts'),
-                                onPress: () => Link.openOldDotLink(`reports?policyID=${this.props.policy.id}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`),
+                                onPress: () => Link.openOldDotLink(reimburseReceiptsUrl),
                                 icon: Expensicons.Bank,
                                 shouldShowRightIcon: true,
                                 iconRight: Expensicons.NewWindow,
                                 wrapperStyle: [styles.cardMenuItem],
+                                link: () => Link.buildOldDotURL(reimburseReceiptsUrl),
                             },
                         ]}
                     >
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index d103121b9e2..ccb40d053e7 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -214,6 +214,8 @@ class WorkspaceReimburseView extends React.Component {
     }
 
     render() {
+        const viewAllReceiptsUrl = `expenses?policyIDList=${this.props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`;
+
         return (
             <>
                 <Section
@@ -222,11 +224,12 @@ class WorkspaceReimburseView extends React.Component {
                     menuItems={[
                         {
                             title: this.props.translate('workspace.reimburse.viewAllReceipts'),
-                            onPress: () => Link.openOldDotLink(`expenses?policyIDList=${this.props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`),
+                            onPress: () => Link.openOldDotLink(viewAllReceiptsUrl),
                             icon: Expensicons.Receipt,
                             shouldShowRightIcon: true,
                             iconRight: Expensicons.NewWindow,
                             wrapperStyle: [styles.cardMenuItem],
+                            link: () => Link.buildOldDotURL(viewAllReceiptsUrl),
                         },
                     ]}
                 >

From 3e532f77d89a4c69f0a02b3e85925becd13937f8 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 19:20:59 +0100
Subject: [PATCH 09/18] conditional onSecondaryInteraction

---
 src/components/MenuItemList.js                             | 2 +-
 src/components/PressableWithSecondaryInteraction/index.js  | 7 +++++++
 .../PressableWithSecondaryInteraction/index.native.js      | 3 +++
 src/pages/settings/AboutPage/AboutPage.js                  | 3 ++-
 src/pages/settings/InitialSettingsPage.js                  | 2 +-
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 80ecce3ebd9..00f464e042b 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -36,7 +36,7 @@ const MenuItemList = (props) => {
             {_.map(props.menuItems, menuItemProps => (
                 <MenuItem
                     key={menuItemProps.title}
-                    onSecondaryInteraction={e => secondaryInteraction(menuItemProps.link, e)}
+                    onSecondaryInteraction={_.isEmpty(menuItemProps.link) ? e => secondaryInteraction(menuItemProps.link, e) : undefined}
                     ref={el => popoverAnchor = el}
                     shouldBlockSelection={Boolean(menuItemProps.link)}
                     // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index d9a3d55ad84..a2e488cf43f 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -31,6 +31,10 @@ class PressableWithSecondaryInteraction extends Component {
      * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
      */
     executeSecondaryInteractionOnContextMenu(e) {
+        if (!this.props.onSecondaryInteraction) {
+            return;
+        }
+
         e.stopPropagation();
         if (this.props.preventDefaultContentMenu) {
             e.preventDefault();
@@ -58,6 +62,9 @@ class PressableWithSecondaryInteraction extends Component {
                 style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
                 onLongPress={(e) => {
+                    if (!this.props.onSecondaryInteraction) {
+                        return;
+                    }
                     if (DeviceCapabilities.hasHoverSupport()) {
                         return;
                     }
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index c51671ba835..744c92e4f81 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -19,6 +19,9 @@ const PressableWithSecondaryInteraction = (props) => {
             ref={props.forwardedRef}
             onPress={props.onPress}
             onLongPress={(e) => {
+                if (!props.onSecondaryInteraction) {
+                    return;
+                }
                 e.preventDefault();
                 HapticFeedback.longPress();
                 props.onSecondaryInteraction(e);
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 1cdcce623f8..b4a816ea574 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -114,7 +114,8 @@ const AboutPage = (props) => {
                                     iconRight={item.iconRight}
                                     onPress={() => item.action()}
                                     shouldBlockSelection={Boolean(item.link)}
-                                    onSecondaryInteraction={e => Boolean(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor)}
+                                    onSecondaryInteraction={!_.isEmpty(item.link)
+                                        ? e => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor) : undefined}
                                     ref={el => popoverAnchor = el}
                                     shouldShowRightIcon
                                 />
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index f2ada71b5e6..597d8c4beb0 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -242,7 +242,7 @@ class InitialSettingsPage extends React.Component {
                 shouldStackHorizontally={item.shouldStackHorizontally}
                 ref={this.popoverAnchor}
                 shouldBlockSelection={Boolean(item.link)}
-                onSecondaryInteraction={e => Boolean(item.link) && ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current)}
+                onSecondaryInteraction={!_.isEmpty(item.link) ? e => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current) : undefined}
             />
         );
     }

From 58a96ff736d90db272069d67dd06fd7784e4cfe9 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 19:36:59 +0100
Subject: [PATCH 10/18] conditional onLongPress

---
 src/components/PressableWithSecondaryInteraction/index.js  | 7 ++-----
 .../PressableWithSecondaryInteraction/index.native.js      | 7 ++-----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index a2e488cf43f..edac38a8e0c 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -61,10 +61,7 @@ class PressableWithSecondaryInteraction extends Component {
             <Pressable
                 style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
-                onLongPress={(e) => {
-                    if (!this.props.onSecondaryInteraction) {
-                        return;
-                    }
+                onLongPress={this.props.onSecondaryInteraction ? (e) => {
                     if (DeviceCapabilities.hasHoverSupport()) {
                         return;
                     }
@@ -72,7 +69,7 @@ class PressableWithSecondaryInteraction extends Component {
                         this.pressableRef.blur();
                     }
                     this.props.onSecondaryInteraction(e);
-                }}
+                } : undefined}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={el => this.pressableRef = el}
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index 744c92e4f81..7c30f0abd55 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -18,14 +18,11 @@ const PressableWithSecondaryInteraction = (props) => {
         <Node
             ref={props.forwardedRef}
             onPress={props.onPress}
-            onLongPress={(e) => {
-                if (!props.onSecondaryInteraction) {
-                    return;
-                }
+            onLongPress={props.onSecondaryInteraction ? (e) => {
                 e.preventDefault();
                 HapticFeedback.longPress();
                 props.onSecondaryInteraction(e);
-            }}
+            } : undefined}
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
             // eslint-disable-next-line react/jsx-props-no-spreading

From 4ca7979aad421d8c5e3d29a08153bf8bb1607394 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 19:53:06 +0100
Subject: [PATCH 11/18] cleanup conditional checks, make onSecondaryInteraction
 prop type optional

---
 src/components/MenuItem.js                    |  2 +-
 .../index.js                                  | 19 ++++++++++---------
 .../index.native.js                           |  7 +++++--
 ...ssableWithSecondaryInteractionPropTypes.js |  2 +-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 85118978555..070b639c279 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -49,7 +49,7 @@ const defaultProps = {
     subtitle: undefined,
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
-    onSecondaryInteraction: () => {},
+    onSecondaryInteraction: undefined,
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index edac38a8e0c..d32170494c3 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -55,21 +55,22 @@ class PressableWithSecondaryInteraction extends Component {
 
     render() {
         const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']);
+        const executeSecondaryInteraction = (e) => {
+            if (DeviceCapabilities.hasHoverSupport()) {
+                return;
+            }
+            if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
+                this.pressableRef.blur();
+            }
+            this.props.onSecondaryInteraction(e);
+        };
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
             <Pressable
                 style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
-                onLongPress={this.props.onSecondaryInteraction ? (e) => {
-                    if (DeviceCapabilities.hasHoverSupport()) {
-                        return;
-                    }
-                    if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
-                        this.pressableRef.blur();
-                    }
-                    this.props.onSecondaryInteraction(e);
-                } : undefined}
+                onLongPress={this.props.onSecondaryInteraction ? executeSecondaryInteraction : undefined}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={el => this.pressableRef = el}
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index 7c30f0abd55..744c92e4f81 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -18,11 +18,14 @@ const PressableWithSecondaryInteraction = (props) => {
         <Node
             ref={props.forwardedRef}
             onPress={props.onPress}
-            onLongPress={props.onSecondaryInteraction ? (e) => {
+            onLongPress={(e) => {
+                if (!props.onSecondaryInteraction) {
+                    return;
+                }
                 e.preventDefault();
                 HapticFeedback.longPress();
                 props.onSecondaryInteraction(e);
-            } : undefined}
+            }}
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
             // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
index d0f59efb8b8..0964edaa950 100644
--- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
+++ b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
@@ -12,7 +12,7 @@ const propTypes = {
     onPressOut: PropTypes.func,
 
     /** The function that should be called when this pressable is LongPressed or right-clicked. */
-    onSecondaryInteraction: PropTypes.func.isRequired,
+    onSecondaryInteraction: PropTypes.func,
 
     /** The children which should be contained in this wrapper component. */
     children: PropTypes.oneOfType([

From 75ab457fa9f73696f69dfc7a53298084eb607e09 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 20:24:11 +0100
Subject: [PATCH 12/18] make executeSecondaryInteraction a class method, fix
 typo

---
 .../index.js                                  | 22 ++++++++++---------
 .../bills/WorkspaceBillsFirstSection.js       |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index d32170494c3..e37726d297b 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -12,6 +12,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 class PressableWithSecondaryInteraction extends Component {
     constructor(props) {
         super(props);
+        this.executeSecondaryInteraction = this.executeSecondaryInteraction.bind(this);
         this.executeSecondaryInteractionOnContextMenu = this.executeSecondaryInteractionOnContextMenu.bind(this);
     }
 
@@ -26,6 +27,16 @@ class PressableWithSecondaryInteraction extends Component {
         this.pressableRef.removeEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
     }
 
+    executeSecondaryInteraction(e) {
+        if (DeviceCapabilities.hasHoverSupport()) {
+            return;
+        }
+        if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
+            this.pressableRef.blur();
+        }
+        this.props.onSecondaryInteraction(e);
+    }
+
     /**
      * @param {contextmenu} e - A right-click MouseEvent.
      * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
@@ -55,22 +66,13 @@ class PressableWithSecondaryInteraction extends Component {
 
     render() {
         const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']);
-        const executeSecondaryInteraction = (e) => {
-            if (DeviceCapabilities.hasHoverSupport()) {
-                return;
-            }
-            if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
-                this.pressableRef.blur();
-            }
-            this.props.onSecondaryInteraction(e);
-        };
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
             <Pressable
                 style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
-                onLongPress={this.props.onSecondaryInteraction ? executeSecondaryInteraction : undefined}
+                onLongPress={this.props.onSecondaryInteraction ? this.executeSecondaryInteraction : undefined}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={el => this.pressableRef = el}
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index 0d7f35155d1..15397ea9677 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -57,7 +57,7 @@ const WorkspaceBillsFirstSection = (props) => {
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
                     wrapperStyle: [styles.cardMenuItem],
-                    link: () => Link.buildOdDotURL(manageYourBillsUrl),
+                    link: () => Link.buildOldDotURL(manageYourBillsUrl),
                 },
             ]}
             containerStyles={[styles.cardSection]}

From 9f61f84fb4613e64155005ade2c9eeed683f6ab7 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 20:39:26 +0100
Subject: [PATCH 13/18] add JSDoc for executeSecondaryInteraction

---
 src/components/PressableWithSecondaryInteraction/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index e37726d297b..412755a4cce 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -27,6 +27,9 @@ class PressableWithSecondaryInteraction extends Component {
         this.pressableRef.removeEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
     }
 
+    /**
+     * @param {Event} e - the secondary interaction event
+     */
     executeSecondaryInteraction(e) {
         if (DeviceCapabilities.hasHoverSupport()) {
             return;

From 59bcbd96940070ecc10d472afb10a3c7ac790b77 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 13 Apr 2023 21:03:16 +0100
Subject: [PATCH 14/18] fix onSecondaryInteraction prop check in MenuItemList

---
 src/components/MenuItemList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 00f464e042b..fe7d40b582f 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -36,7 +36,7 @@ const MenuItemList = (props) => {
             {_.map(props.menuItems, menuItemProps => (
                 <MenuItem
                     key={menuItemProps.title}
-                    onSecondaryInteraction={_.isEmpty(menuItemProps.link) ? e => secondaryInteraction(menuItemProps.link, e) : undefined}
+                    onSecondaryInteraction={!_.isUndefined(menuItemProps.link) ? e => secondaryInteraction(menuItemProps.link, e) : undefined}
                     ref={el => popoverAnchor = el}
                     shouldBlockSelection={Boolean(menuItemProps.link)}
                     // eslint-disable-next-line react/jsx-props-no-spreading

From 3bcbdfb4df25f86040b90747414bad35964f4b5c Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 18 Apr 2023 22:03:37 +0100
Subject: [PATCH 15/18] set defaultProps for MenuItem wrapped with HOC

---
 src/components/MenuItem.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 070b639c279..2879c86c401 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -228,7 +228,11 @@ const MenuItem = (props) => {
 MenuItem.propTypes = propTypes;
 MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = 'MenuItem';
-export default withWindowDimensions(React.forwardRef((props, ref) => (
+
+const MenuItemWithWindowDimensions = withWindowDimensions(React.forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <MenuItem {...props} forwardedRef={ref} />
 )));
+MenuItemWithWindowDimensions.defaultProps = defaultProps;
+
+export default MenuItemWithWindowDimensions;

From cd1f55c7dd508c1baed3f0cb1c545ab3907bb73c Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 19 Apr 2023 19:56:06 +0100
Subject: [PATCH 16/18] make applyStrikethrough work with titleStyle

---
 src/components/OfflineWithFeedback.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index a4919f2cb40..bf54f02faf5 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -73,7 +73,10 @@ function applyStrikeThrough(children) {
         if (!React.isValidElement(child)) {
             return child;
         }
-        const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
+        let props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
+        if (child.props.titleStyle) {
+            props = {...props, titleStyle: StyleUtils.combineStyles(child.props.titleStyle, styles.offlineFeedback.deleted)};
+        }
         if (child.props.children) {
             props.children = applyStrikeThrough(child.props.children);
         }

From ae1ae3360f1275131985b270db43d6bc90dd73f0 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 20 Apr 2023 17:40:52 +0100
Subject: [PATCH 17/18] conditionally apply styles.offlineFeedback.deleted for
 menu item text

---
 src/components/MenuItem.js            | 1 +
 src/components/OfflineWithFeedback.js | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 2879c86c401..50004b59e4b 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -65,6 +65,7 @@ const MenuItem = (props) => {
         (props.shouldShowBasicTitle ? undefined : styles.textStrong),
         (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
         styles.pre,
+        (_.contains(props.style, styles.offlineFeedback.deleted) ? styles.offlineFeedback.deleted : undefined),
     ], props.titleStyle);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const descriptionTextStyle = StyleUtils.combineStyles([
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index bf54f02faf5..a4919f2cb40 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -73,10 +73,7 @@ function applyStrikeThrough(children) {
         if (!React.isValidElement(child)) {
             return child;
         }
-        let props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
-        if (child.props.titleStyle) {
-            props = {...props, titleStyle: StyleUtils.combineStyles(child.props.titleStyle, styles.offlineFeedback.deleted)};
-        }
+        const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
         if (child.props.children) {
             props.children = applyStrikeThrough(child.props.children);
         }

From b56477e86cf66b7bfe520517f837eb9d59cd9da0 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 24 Apr 2023 14:25:09 +0100
Subject: [PATCH 18/18] code cleanup

---
 src/CONST.js               | 1 -
 src/components/MenuItem.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index cb20338a9c8..3eb58c94df3 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2224,7 +2224,6 @@ const CONST = {
         'ILS', 'JPY', 'MYR', 'MXN', 'TWD', 'NZD', 'NOK', 'PHP',
         'PLN', 'GBP', 'RUB', 'SGD', 'SEK', 'CHF', 'THB', 'USD',
     ],
-
     CONCIERGE_TRAVEL_URL: 'https://community.expensify.com/discussion/7066/introducing-concierge-travel',
 };
 
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 458bc7f4fc7..3a591437539 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -227,7 +227,6 @@ const MenuItem = (props) => {
 };
 
 MenuItem.propTypes = propTypes;
-MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = 'MenuItem';
 
 const MenuItemWithWindowDimensions = withWindowDimensions(React.forwardRef((props, ref) => (
