Brick Road Indicator For Settings Page

src/ONYXKEYS.js

@@ -104,6 +104,7 @@ export default {
         REPORTS_WITH_DRAFT: 'reportWithDraft_',
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
         IS_LOADING_REPORT_ACTIONS: 'isLoadingReportActions_',
+        POLICY_MEMBER_LIST: 'policyMemberList_',
     },
 
     // Indicates which locale should be used

src/components/MenuItem.js

@@ -14,6 +14,8 @@ import Badge from './Badge';
 import CONST from '../CONST';
 import menuItemPropTypes from './menuItemPropTypes';
 import SelectCircle from './SelectCircle';
+import colors from '../styles/colors';
+import variables from '../styles/variables';
 
 const propTypes = {
     ...menuItemPropTypes,
@@ -40,6 +42,7 @@ const defaultProps = {
     onPress: () => {},
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
+    brickRoadIndicator: undefined,
 };
 
 const MenuItem = props => (
@@ -119,7 +122,6 @@ const MenuItem = props => (
                 </View>
                 <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
                     {props.badgeText && <Badge text={props.badgeText} badgeStyles={[styles.alignSelfCenter]} />}
-
                     {/* 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]}>
@@ -130,6 +132,16 @@ const MenuItem = props => (
                             </Text>
                         </View>
                     )}
+                    {props.brickRoadIndicator && (
+                        <View style={[[styles.alignItemsCenter, styles.justifyContentCenter]]}>
+                            <Icon
+                                src={Expensicons.DotIndicator}
+                                fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
+                                height={variables.iconSizeSmall}
+                                width={variables.iconSizeSmall}
+                            />
+                        </View>
+                    )}
                     {props.shouldShowRightIcon && (
                         <View style={styles.popoverMenuIcon}>
                             <Icon

src/libs/actions/Policy.js

@@ -539,6 +539,16 @@ function subscribeToPolicyEvents() {
     });
 }
 
+/**
+ * Checks if we have any errors stored within the POLICY_MEMBER_LIST.  Determines whether we should show a red brick road error or not
+ * Data structure: {email: {role:'bla', errors: []}, email2: {role:'bla', errors: [{1231312313: 'Unable to do X'}]}, ...}
+ * @param {Object} policyMemberList
+ * @returns {Boolean}
+ */
+function hasPolicyMemberError(policyMemberList) {
+    return _.some(policyMemberList, member => !_.isEmpty(member.errors));
+}
+
 export {
     getPolicyList,
     loadFullPolicy,
@@ -557,4 +567,5 @@ export {
     setCustomUnitRate,
     updateLastAccessedWorkspace,
     subscribeToPolicyEvents,
+    hasPolicyMemberError,
 };

src/pages/policyMemberPropType.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** Role of the user in the policy */
+    role: PropTypes.string,
+
+    /**
+     * Errors from api calls on the specific user
+     * {<timestamp>: 'error message', <timestamp2>: 'error message 2'}
+     */
+    errors: PropTypes.objectOf(PropTypes.string),
+});

src/pages/settings/InitialSettingsPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {View, ScrollView, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
@@ -24,6 +25,8 @@ import Permissions from '../../libs/Permissions';
 import networkPropTypes from '../../components/networkPropTypes';
 import {withNetwork} from '../../components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
+import * as Policy from '../../libs/actions/Policy';
+import policyMemberPropType from '../policyMemberPropType';
 
 const propTypes = {
     /* Onyx Props */
@@ -52,6 +55,9 @@ const propTypes = {
         role: PropTypes.string,
     })),
 
+    /** List of policy members */
+    policyMembers: PropTypes.objectOf(policyMemberPropType),
+
     /** The user's wallet account */
     userWallet: PropTypes.shape({
         /** The user's current wallet balance */
@@ -72,6 +78,7 @@ const defaultProps = {
         currentBalance: 0,
     },
     betas: [],
+    policyMembers: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -135,6 +142,7 @@ const InitialSettingsPage = (props) => {
             iconStyles: policy.avatarURL ? [] : [styles.popoverMenuIconEmphasized],
             iconFill: themeColors.iconReversed,
             fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
+            brickRoadIndicator: Policy.hasPolicyMemberError(lodashGet(props.policyMembers, `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policy.id}`, {})) ? 'error' : null,
         }))
         .value();
     menuItems.push(...defaultMenuItems);
@@ -190,6 +198,7 @@ const InitialSettingsPage = (props) => {
                                 shouldShowRightIcon
                                 badgeText={(isPaymentItem && Permissions.canUseWallet(props.betas)) ? walletBalance : undefined}
                                 fallbackIcon={item.fallbackIcon}
+                                brickRoadIndicator={item.brickRoadIndicator}
                             />
                         );
                     })}
@@ -214,6 +223,9 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        policyMembers: {
+            key: ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST,
+        },
         userWallet: {
             key: ONYXKEYS.USER_WALLET,
         },