Adds Violations Requirements to MoneyRequestConfirmationList

src/components/MenuItem.js

@@ -78,6 +78,7 @@ const defaultProps = {
     shouldGreyOutWhenDisabled: true,
     error: '',
     shouldRenderAsHTML: false,
+    rightLabel: '',
     rightComponent: undefined,
     shouldShowRightComponent: false,
     titleWithTooltips: [],
@@ -364,6 +365,11 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         />
                                     </View>
                                 )}
+                                {Boolean(props.rightLabel) && (
+                                    <View style={styles.justifyContentCenter}>
+                                        <Text style={styles.rightLabelMenuItem}>{props.rightLabel}</Text>
+                                    </View>
+                                )}
                                 {Boolean(props.shouldShowRightIcon) && (
                                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                                         <Icon

src/components/MoneyRequestConfirmationList.js

@@ -8,6 +8,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
@@ -210,6 +211,7 @@ function MoneyRequestConfirmationList(props) {
     const {onSendMoney, onConfirm, onSelectParticipant} = props;
     const {translate, toLocaleDigit} = useLocalize();
     const transaction = props.isEditingSplitBill ? props.draftTransaction || props.transaction : props.transaction;
+    const {canUseViolations} = usePermissions();
 
     const isTypeRequest = props.iouType === CONST.IOU.TYPE.REQUEST;
     const isSplitBill = props.iouType === CONST.IOU.TYPE.SPLIT;
@@ -223,7 +225,6 @@ function MoneyRequestConfirmationList(props) {
 
     // A flag for showing the categories field
     const shouldShowCategories = props.isPolicyExpenseChat && (props.iouCategory || OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories)));
-
     // A flag and a toggler for showing the rest of the form fields
     const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false);
 
@@ -715,6 +716,7 @@ function MoneyRequestConfirmationList(props) {
                             titleStyle={styles.flex1}
                             disabled={didConfirm}
                             interactive={!props.isReadOnly}
+                            rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''}
                         />
                     )}
                     {shouldShowTags && (
@@ -727,6 +729,7 @@ function MoneyRequestConfirmationList(props) {
                             style={[styles.moneyRequestMenuItem]}
                             disabled={didConfirm}
                             interactive={!props.isReadOnly}
+                            rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''}
                         />
                     )}
 

src/components/menuItemPropTypes.js

@@ -148,6 +148,9 @@ const propTypes = {
     /** Should render the content in HTML format */
     shouldRenderAsHTML: PropTypes.bool,
 
+    /** Label to be displayed on the right */
+    rightLabel: PropTypes.string,
+
     /** Component to be displayed on the right */
     rightComponent: PropTypes.node,
 

src/languages/en.ts

@@ -267,6 +267,7 @@ export default {
         tbd: 'TBD',
         selectCurrency: 'Select a currency',
         card: 'Card',
+        required: 'Required',
     },
     location: {
         useCurrent: 'Use current location',

src/languages/es.ts

@@ -257,6 +257,7 @@ export default {
         tbd: 'Por determinar',
         selectCurrency: 'Selecciona una moneda',
         card: 'Tarjeta',
+        required: 'Obligatorio',
     },
     location: {
         useCurrent: 'Usar ubicación actual',

src/styles/styles.ts

@@ -1441,6 +1441,11 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        rightLabelMenuItem: {
+            fontSize: variables.fontSizeLabel,
+            color: theme.textSupporting,
+        },
+
         popoverMenuText: {
             fontSize: variables.fontSizeNormal,
             color: theme.heading,