[Debug Mode] Show reason for RBR/GBR on LHN tabs

src/CONST.ts

@@ -5802,6 +5802,21 @@ const CONST = {
     // The timeout duration (1 minute) (in milliseconds) before the window reloads due to an error.
     ERROR_WINDOW_RELOAD_TIMEOUT: 60000,
 
+    INDICATOR_STATUS: {
+        HAS_USER_WALLET_ERRORS: 'hasUserWalletErrors',
+        HAS_PAYMENT_METHOD_ERROR: 'hasPaymentMethodError',
+        HAS_POLICY_ERRORS: 'hasPolicyError',
+        HAS_CUSTOM_UNITS_ERROR: 'hasCustomUnitsError',
+        HAS_EMPLOYEE_LIST_ERROR: 'hasEmployeeListError',
+        HAS_SYNC_ERRORS: 'hasSyncError',
+        HAS_SUBSCRIPTION_ERRORS: 'hasSubscriptionError',
+        HAS_REIMBURSEMENT_ACCOUNT_ERRORS: 'hasReimbursementAccountErrors',
+        HAS_LOGIN_LIST_ERROR: 'hasLoginListError',
+        HAS_WALLET_TERMS_ERRORS: 'hasWalletTermsErrors',
+        HAS_LOGIN_LIST_INFO: 'hasLoginListInfo',
+        HAS_SUBSCRIPTION_INFO: 'hasSubscriptionInfo',
+    },
+
     DEBUG: {
         DETAILS: 'details',
         JSON: 'json',

src/components/Indicator.tsx

@@ -1,109 +1,17 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
-import useTheme from '@hooks/useTheme';
+import useIndicatorStatus from '@hooks/useIndicatorStatus';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isConnectionInProgress} from '@libs/actions/connections';
-import * as PolicyUtils from '@libs/PolicyUtils';
-import * as SubscriptionUtils from '@libs/SubscriptionUtils';
-import * as UserUtils from '@libs/UserUtils';
-import * as PaymentMethods from '@userActions/PaymentMethods';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {BankAccountList, FundList, LoginList, Policy, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
 
-type CheckingMethod = () => boolean;
-
-type IndicatorOnyxProps = {
-    /** All the user's policies (from Onyx via withFullPolicy) */
-    policies: OnyxCollection<Policy>;
-
-    /** List of bank accounts */
-    bankAccountList: OnyxEntry<BankAccountList>;
-
-    /** List of user cards */
-    fundList: OnyxEntry<FundList>;
-
-    /** The user's wallet (coming from Onyx) */
-    userWallet: OnyxEntry<UserWallet>;
-
-    /** Bank account attached to free plan */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** Information about the user accepting the terms for payments */
-    walletTerms: OnyxEntry<WalletTerms>;
-
-    /** Login list for the user that is signed in */
-    loginList: OnyxEntry<LoginList>;
-};
-
-type IndicatorProps = IndicatorOnyxProps;
-
-function Indicator({reimbursementAccount, policies, bankAccountList, fundList, userWallet, walletTerms, loginList}: IndicatorOnyxProps) {
-    const theme = useTheme();
+function Indicator() {
     const styles = useThemeStyles();
-    const [allConnectionSyncProgresses] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}`);
-
-    // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
-    // those should be cleaned out before doing any error checking
-    const cleanPolicies = Object.fromEntries(Object.entries(policies ?? {}).filter(([, policy]) => policy?.id));
-
-    // All of the error & info-checking methods are put into an array. This is so that using _.some() will return
-    // early as soon as the first error / info condition is returned. This makes the checks very efficient since
-    // we only care if a single error / info condition exists anywhere.
-    const errorCheckingMethods: CheckingMethod[] = [
-        () => Object.keys(userWallet?.errors ?? {}).length > 0,
-        () => PaymentMethods.hasPaymentMethodError(bankAccountList, fundList),
-        () => Object.values(cleanPolicies).some(PolicyUtils.hasPolicyError),
-        () => Object.values(cleanPolicies).some(PolicyUtils.hasCustomUnitsError),
-        () => Object.values(cleanPolicies).some(PolicyUtils.hasEmployeeListError),
-        () =>
-            Object.values(cleanPolicies).some((cleanPolicy) =>
-                PolicyUtils.hasSyncError(
-                    cleanPolicy,
-                    isConnectionInProgress(allConnectionSyncProgresses?.[`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${cleanPolicy?.id}`], cleanPolicy),
-                ),
-            ),
-        () => SubscriptionUtils.hasSubscriptionRedDotError(),
-        () => Object.keys(reimbursementAccount?.errors ?? {}).length > 0,
-        () => !!loginList && UserUtils.hasLoginListError(loginList),
-
-        // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
-        () => Object.keys(walletTerms?.errors ?? {}).length > 0 && !walletTerms?.chatReportID,
-    ];
-    const infoCheckingMethods: CheckingMethod[] = [() => !!loginList && UserUtils.hasLoginListInfo(loginList), () => SubscriptionUtils.hasSubscriptionGreenDotInfo()];
-    const shouldShowErrorIndicator = errorCheckingMethods.some((errorCheckingMethod) => errorCheckingMethod());
-    const shouldShowInfoIndicator = !shouldShowErrorIndicator && infoCheckingMethods.some((infoCheckingMethod) => infoCheckingMethod());
+    const {indicatorColor, status} = useIndicatorStatus();
 
-    const indicatorColor = shouldShowErrorIndicator ? theme.danger : theme.success;
     const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)];
 
-    return (shouldShowErrorIndicator || shouldShowInfoIndicator) && <View style={StyleSheet.flatten(indicatorStyles)} />;
+    return !!status && <View style={StyleSheet.flatten(indicatorStyles)} />;
 }
 
 Indicator.displayName = 'Indicator';
 
-export default withOnyx<IndicatorProps, IndicatorOnyxProps>({
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    bankAccountList: {
-        key: ONYXKEYS.BANK_ACCOUNT_LIST,
-    },
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    fundList: {
-        key: ONYXKEYS.FUND_LIST,
-    },
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
-    },
-    walletTerms: {
-        key: ONYXKEYS.WALLET_TERMS,
-    },
-    loginList: {
-        key: ONYXKEYS.LOGIN_LIST,
-    },
-})(Indicator);
+export default Indicator;

src/hooks/useIndicatorStatus.ts

@@ -0,0 +1,74 @@
+import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import {isConnectionInProgress} from '@libs/actions/connections';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as SubscriptionUtils from '@libs/SubscriptionUtils';
+import * as UserUtils from '@libs/UserUtils';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useTheme from './useTheme';
+
+type IndicatorStatus = {
+    indicatorColor: string;
+    status: ValueOf<typeof CONST.INDICATOR_STATUS> | undefined;
+    idOfPolicyWithErrors: string | undefined;
+};
+
+function useIndicatorStatus(): IndicatorStatus {
+    const theme = useTheme();
+    const [allConnectionSyncProgresses] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}`);
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
+    const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+
+    // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
+    // those should be cleaned out before doing any error checking
+    const cleanPolicies = Object.fromEntries(Object.entries(policies ?? {}).filter(([, policy]) => policy?.id));
+
+    const policyErrors = {
+        [CONST.INDICATOR_STATUS.HAS_POLICY_ERRORS]: Object.values(cleanPolicies).find(PolicyUtils.hasPolicyError),
+        [CONST.INDICATOR_STATUS.HAS_CUSTOM_UNITS_ERROR]: Object.values(cleanPolicies).find(PolicyUtils.hasCustomUnitsError),
+        [CONST.INDICATOR_STATUS.HAS_EMPLOYEE_LIST_ERROR]: Object.values(cleanPolicies).find(PolicyUtils.hasEmployeeListError),
+        [CONST.INDICATOR_STATUS.HAS_SYNC_ERRORS]: Object.values(cleanPolicies).find((cleanPolicy) =>
+            PolicyUtils.hasSyncError(
+                cleanPolicy,
+                isConnectionInProgress(allConnectionSyncProgresses?.[`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${cleanPolicy?.id}`], cleanPolicy),
+            ),
+        ),
+    };
+
+    // All of the error & info-checking methods are put into an array. This is so that using _.some() will return
+    // early as soon as the first error / info condition is returned. This makes the checks very efficient since
+    // we only care if a single error / info condition exists anywhere.
+    const errorChecking = {
+        [CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS]: Object.keys(userWallet?.errors ?? {}).length > 0,
+        [CONST.INDICATOR_STATUS.HAS_PAYMENT_METHOD_ERROR]: PaymentMethods.hasPaymentMethodError(bankAccountList, fundList),
+        ...(Object.fromEntries(Object.entries(policyErrors).map(([error, policy]) => [error, !!policy])) as Record<keyof typeof policyErrors, boolean>),
+        [CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_ERRORS]: SubscriptionUtils.hasSubscriptionRedDotError(),
+        [CONST.INDICATOR_STATUS.HAS_REIMBURSEMENT_ACCOUNT_ERRORS]: Object.keys(reimbursementAccount?.errors ?? {}).length > 0,
+        [CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR]: !!loginList && UserUtils.hasLoginListError(loginList),
+        // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
+        [CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS]: Object.keys(walletTerms?.errors ?? {}).length > 0 && !walletTerms?.chatReportID,
+    };
+
+    const infoChecking = {
+        [CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO]: !!loginList && UserUtils.hasLoginListInfo(loginList),
+        [CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_INFO]: SubscriptionUtils.hasSubscriptionGreenDotInfo(),
+    };
+
+    const [error] = Object.entries(errorChecking).find(([, value]) => value) ?? [];
+    const [info] = Object.entries(infoChecking).find(([, value]) => value) ?? [];
+
+    const status = (error ?? info) as ValueOf<typeof CONST.INDICATOR_STATUS> | undefined;
+    const idOfPolicyWithErrors = Object.values(policyErrors).find(Boolean)?.id;
+    const indicatorColor = error ? theme.danger : theme.success;
+
+    return {indicatorColor, status, idOfPolicyWithErrors};
+}
+
+export default useIndicatorStatus;

src/languages/en.ts

@@ -4946,6 +4946,22 @@ const translations = {
             hasChildReportAwaitingAction: 'Has child report awaiting action',
             hasMissingInvoiceBankAccount: 'Has missing invoice bank account',
         },
+        indicatorStatus: {
+            theresAReportAwaitingAction: "There's a report awaiting action",
+            theresAReportWithErrors: "There's a report with errors",
+            workspaceHasCustomUnitsErrors: 'Workspace has custom units errors',
+            workspaceHasEmployeeListErrors: 'Workspace has employee list errors',
+            theresAProblemWithAContactMethod: "There's a problem with a contact method",
+            contactMethodRequiresVerification: 'Contact method requires verification',
+            theresAProblemWithAPaymentMethod: "There's a problem with a payment method",
+            theresAProblemWithAWorkspace: "There's a problem with a workspace",
+            workspaceHasReimbursementAccountError: 'Workspace has reimbursement account error',
+            subscriptionHasErrors: 'Subscription has errors',
+            subscriptionRequiresAttention: 'Subscription requires attention',
+            theresWasAProblemDuringAWorkspaceConnectionSync: 'There was a problem during a workspace connection sync',
+            theresAProblemWithYourWallet: "There's a problem with your wallet",
+            theresAProblemWithYourWalletTerms: "There's a problem with your wallet terms",
+        },
     },
 };
 

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -27,6 +27,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import DebugTabView from './DebugTabView';
 
 type BottomTabBarProps = {
     selectedTab: string | undefined;
@@ -65,12 +66,14 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {activeWorkspaceID} = useActiveWorkspace();
+    const reports = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const reportActions = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
     const transactionViolations = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
     const [chatTabBrickRoad, setChatTabBrickRoad] = useState<BrickRoad>(getChatTabBrickRoad(activeWorkspaceID));
 
     useEffect(() => {
         setChatTabBrickRoad(getChatTabBrickRoad(activeWorkspaceID));
-    }, [activeWorkspaceID, transactionViolations]);
+    }, [activeWorkspaceID, transactionViolations, reports, reportActions]);
 
     const navigateToChats = useCallback(() => {
         if (selectedTab === SCREENS.HOME) {
@@ -109,67 +112,80 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
     }, [activeWorkspaceID, selectedTab]);
 
     return (
-        <View style={styles.bottomTabBarContainer}>
-            <Tooltip text={translate('common.inbox')}>
-                <PressableWithFeedback
-                    onPress={navigateToChats}
-                    role={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('common.inbox')}
-                    wrapperStyle={styles.flex1}
-                    style={styles.bottomTabBarItem}
-                >
-                    <View>
-                        <Icon
-                            src={Expensicons.Inbox}
-                            fill={selectedTab === SCREENS.HOME ? theme.iconMenu : theme.icon}
-                            width={variables.iconBottomBar}
-                            height={variables.iconBottomBar}
-                        />
-                        {chatTabBrickRoad && (
-                            <View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />
-                        )}
-                    </View>
-                    <Text
-                        style={[styles.textSmall, styles.textAlignCenter, styles.mt1Half, selectedTab === SCREENS.HOME ? styles.textBold : styles.textSupporting, styles.bottomTabBarLabel]}
+        <>
+            <DebugTabView
+                selectedTab={selectedTab}
+                chatTabBrickRoad={chatTabBrickRoad}
+                activeWorkspaceID={activeWorkspaceID}
+            />
+            <View style={styles.bottomTabBarContainer}>
+                <Tooltip text={translate('common.inbox')}>
+                    <PressableWithFeedback
+                        onPress={navigateToChats}
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel={translate('common.inbox')}
+                        wrapperStyle={styles.flex1}
+                        style={styles.bottomTabBarItem}
                     >
-                        {translate('common.inbox')}
-                    </Text>
-                </PressableWithFeedback>
-            </Tooltip>
-            <Tooltip text={translate('common.search')}>
-                <PressableWithFeedback
-                    onPress={navigateToSearch}
-                    role={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('common.search')}
-                    wrapperStyle={styles.flex1}
-                    style={styles.bottomTabBarItem}
-                >
-                    <View>
-                        <Icon
-                            src={Expensicons.MoneySearch}
-                            fill={selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? theme.iconMenu : theme.icon}
-                            width={variables.iconBottomBar}
-                            height={variables.iconBottomBar}
-                        />
-                    </View>
-                    <Text
-                        style={[
-                            styles.textSmall,
-                            styles.textAlignCenter,
-                            styles.mt1Half,
-                            selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? styles.textBold : styles.textSupporting,
-                            styles.bottomTabBarLabel,
-                        ]}
+                        <View>
+                            <Icon
+                                src={Expensicons.Inbox}
+                                fill={selectedTab === SCREENS.HOME ? theme.iconMenu : theme.icon}
+                                width={variables.iconBottomBar}
+                                height={variables.iconBottomBar}
+                            />
+                            {chatTabBrickRoad && (
+                                <View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />
+                            )}
+                        </View>
+                        <Text
+                            style={[
+                                styles.textSmall,
+                                styles.textAlignCenter,
+                                styles.mt1Half,
+                                selectedTab === SCREENS.HOME ? styles.textBold : styles.textSupporting,
+                                styles.bottomTabBarLabel,
+                            ]}
+                        >
+                            {translate('common.inbox')}
+                        </Text>
+                    </PressableWithFeedback>
+                </Tooltip>
+                <Tooltip text={translate('common.search')}>
+                    <PressableWithFeedback
+                        onPress={navigateToSearch}
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel={translate('common.search')}
+                        wrapperStyle={styles.flex1}
+                        style={styles.bottomTabBarItem}
                     >
-                        {translate('common.search')}
-                    </Text>
-                </PressableWithFeedback>
-            </Tooltip>
-            <BottomTabAvatar isSelected={selectedTab === SCREENS.SETTINGS.ROOT} />
-            <View style={[styles.flex1, styles.bottomTabBarItem]}>
-                <BottomTabBarFloatingActionButton />
+                        <View>
+                            <Icon
+                                src={Expensicons.MoneySearch}
+                                fill={selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? theme.iconMenu : theme.icon}
+                                width={variables.iconBottomBar}
+                                height={variables.iconBottomBar}
+                            />
+                        </View>
+                        <Text
+                            style={[
+                                styles.textSmall,
+                                styles.textAlignCenter,
+                                styles.mt1Half,
+                                selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? styles.textBold : styles.textSupporting,
+                                styles.bottomTabBarLabel,
+                            ]}
+                        >
+                            {translate('common.search')}
+                        </Text>
+                    </PressableWithFeedback>
+                </Tooltip>
+                <BottomTabAvatar isSelected={selectedTab === SCREENS.SETTINGS.ROOT} />
+                <View style={[styles.flex1, styles.bottomTabBarItem]}>
+                    <BottomTabBarFloatingActionButton />
+                </View>
             </View>
-        </View>
+        </>
     );
 }