Show red dot for missing fields

Expensify · Aug 24, 2023 · 03f6abe · c3024 · Feb 14, 2024 · 03f6abe
1 parent 00efce4
commit 03f6abe
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 1 deletion.
diff --git a/src/CONST.js b/src/CONST.js
@@ -664,6 +664,7 @@ const CONST = {
     },
     TRANSACTION: {
         DEFAULT_MERCHANT: 'Request',
+        UNKNOWN_MERCHANT: 'Unknown Merchant',
         TYPE: {
             CUSTOM_UNIT: 'customUnit',
         },

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -54,6 +54,7 @@ const defaultProps = {
     disabled: false,
     isSelected: false,
     subtitle: undefined,
+    subtitleTextStyle: {},
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
     onSecondaryInteraction: undefined,
@@ -102,6 +103,14 @@ const MenuItem = React.forwardRef((props, ref) => {
         isDeleted ? styles.offlineFeedback.deleted : undefined,
     ]);
 
+    const subtitleTextStyle = StyleUtils.combineStyles([
+        styles.textLabelSupporting,
+        props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
+        props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
+        props.descriptionTextStyle,
+        isDeleted ? styles.offlineFeedback.deleted : undefined,
+    ]);
+
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
     return (
@@ -278,7 +287,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={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                        <Text style={[props.subtitleTextStyle || 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
@@ -108,11 +108,15 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
 
     const hasReceipt = TransactionUtils.hasReceipt(transaction);
     let receiptURIs;
+    let hasErrors = false;
     if (hasReceipt) {
         receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename);
+        hasErrors = _.has(transaction, 'errors');
     }
 
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
+    console.log('eeee');
+    console.log(transaction);
 
     return (
         <View>
@@ -142,6 +146,9 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
                     disabled={isSettled || !canEdit}
                     shouldShowRightIcon={canEdit}
                     onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
+                    brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                    subtitle={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
+                    subtitleTextStyle={styles.textLabelError}
                 />
             </OfflineWithFeedback>
             <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.comment') || lodashGet(transaction, 'pendingAction')}>
@@ -162,6 +169,9 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
                     shouldShowRightIcon={canEdit}
                     titleStyle={styles.flex1}
                     onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
+                    brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                    subtitle={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
+                    subtitleTextStyle={styles.textLabelError}
                 />
             </OfflineWithFeedback>
             <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
@@ -172,6 +182,9 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
                     shouldShowRightIcon={canEdit}
                     titleStyle={styles.flex1}
                     onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
+                    brickRoadIndicator={hasErrors && transactionMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                    subtitle={hasErrors && transactionMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT ? translate('common.error.enterMerchant') : ''}
+                    subtitleTextStyle={styles.textLabelError}
                 />
             </OfflineWithFeedback>
             {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}

diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
@@ -87,6 +87,9 @@ 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]),
 

diff --git a/src/languages/en.js b/src/languages/en.js
@@ -107,6 +107,9 @@ export default {
             characterLimit: ({limit}) => `Exceeds the maximum length of ${limit} characters`,
             dateInvalid: 'Please select a valid date',
             invalidCharacter: 'Invalid character',
+            enterMerchant: 'Enter a merchant name',
+            enterAmount: 'Enter an amount',
+            enterDate: 'Enter a date',
         },
         comma: 'comma',
         semicolon: 'semicolon',

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1113,6 +1113,12 @@ const styles = {
         color: themeColors.textSupporting,
     },
 
+    textLabelError: {
+        fontFamily: fontFamily.EXP_NEUE,
+        fontSize: variables.fontSizeLabel,
+        color: themeColors.textError,
+    },
+
     textReceiptUpload: {
         ...headlineFont,
         fontSize: variables.fontSizeXLarge,