From a50b87d25b1a4aa54a10066bc1a1d9ef102e3d23 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Mon, 18 Sep 2023 10:34:20 +0800
Subject: [PATCH 1/2] Add error property

---
 src/components/MenuItem.js                          | 8 +++++++-
 src/components/ReportActionItem/MoneyRequestView.js | 3 +--
 src/components/menuItemPropTypes.js                 | 3 +++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c39c1d503258..a169e429a061 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -73,6 +73,7 @@ const defaultProps = {
     title: '',
     numberOfLinesTitle: 1,
     shouldGreyOutWhenDisabled: true,
+    error: '',
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
@@ -245,6 +246,11 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 {props.description}
                                             </Text>
                                         )}
+                                        {props.error && (
+                                            <View style={[styles.mt1]}>
+                                                <Text style={[styles.textLabelError]}>{props.error}</Text>
+                                            </View>
+                                        )}
                                         {Boolean(props.furtherDetails) && (
                                             <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
                                                 <Icon
@@ -278,7 +284,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
                                 {(props.subtitle || props.subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[props.subtitleTextStyle || styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
                                     </View>
                                 )}
                                 {!_.isEmpty(props.floatRightAvatars) && (
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index a9264812b99d..768b14f55bb5 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -161,8 +161,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
                     titleStyle={styles.flex1}
                     onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
                     brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                    subtitle={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
-                    subtitleTextStyle={styles.textLabelError}
+                    error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
                 />
             </OfflineWithFeedback>
             {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index cc89f9a7b80b..a3ca99fe6dee 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -144,6 +144,9 @@ const propTypes = {
 
     /** Should we grey out the menu item when it is disabled? */
     shouldGreyOutWhenDisabled: PropTypes.bool,
+
+    /** Error to display below the title */
+    error: PropTypes.string,
 };
 
 export default propTypes;

From c9c13de3f05fd09406f27b389f9b15d40a401ecc Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 19 Sep 2023 12:29:38 +0800
Subject: [PATCH 2/2] remove subtitle style

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

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 2b75aefeae90..ec2d13ec9ac2 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -56,7 +56,6 @@ const defaultProps = {
     disabled: false,
     isSelected: false,
     subtitle: undefined,
-    subtitleTextStyle: {},
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
     onSecondaryInteraction: undefined,
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 17585f5a1d3a..88d592cb83d5 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -88,9 +88,6 @@ const propTypes = {
     /** A right-aligned subtitle for this menu option */
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    /** Style for the subtitle */
-    subtitleTextStyle: stylePropTypes,
-
     /** Flag to choose between avatar image or an icon */
     iconType: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_ICON, CONST.ICON_TYPE_WORKSPACE]),