Merge pull request #31713 from VickyStash/ts-migration/indicator-comp…

…onent

[TS migration] Migrate 'Indicator.js' component to TypeScript

src/ONYXKEYS.ts

@@ -383,7 +383,7 @@ type OnyxValues = {
     [ONYXKEYS.COUNTRY]: string;
     [ONYXKEYS.USER]: OnyxTypes.User;
     [ONYXKEYS.USER_LOCATION]: OnyxTypes.UserLocation;
-    [ONYXKEYS.LOGIN_LIST]: Record<string, OnyxTypes.Login>;
+    [ONYXKEYS.LOGIN_LIST]: OnyxTypes.LoginList;
     [ONYXKEYS.SESSION]: OnyxTypes.Session;
     [ONYXKEYS.BETAS]: OnyxTypes.Beta[];
     [ONYXKEYS.NVP_PRIORITY_MODE]: ValueOf<typeof CONST.PRIORITY_MODE>;
@@ -403,8 +403,8 @@ type OnyxValues = {
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;
     [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails;
     [ONYXKEYS.WALLET_TERMS]: OnyxTypes.WalletTerms;
-    [ONYXKEYS.BANK_ACCOUNT_LIST]: Record<string, OnyxTypes.BankAccount>;
-    [ONYXKEYS.FUND_LIST]: Record<string, OnyxTypes.Fund>;
+    [ONYXKEYS.BANK_ACCOUNT_LIST]: OnyxTypes.BankAccountList;
+    [ONYXKEYS.FUND_LIST]: OnyxTypes.FundList;
     [ONYXKEYS.CARD_LIST]: Record<string, OnyxTypes.Card>;
     [ONYXKEYS.WALLET_STATEMENT]: OnyxTypes.WalletStatement;
     [ONYXKEYS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
@@ -440,7 +440,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.POLICY_DRAFTS]: OnyxTypes.Policy;
     [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategory;
     [ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTags;
-    [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMember;
+    [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMembers;

src/components/Indicator.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {OnyxCollection, withOnyx} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as UserUtils from '@libs/UserUtils';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {BankAccountList, FundList, LoginList, Policy, PolicyMembers, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
+
+type CheckingMethod = () => boolean;
+
+type IndicatorOnyxProps = {
+    /** The employee list of all policies (coming from Onyx) */
+    allPolicyMembers: OnyxCollection<PolicyMembers>;
+
+    /** 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, allPolicyMembers, policies, bankAccountList, fundList, userWallet, walletTerms, loginList}: IndicatorOnyxProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    // 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));
+    const cleanAllPolicyMembers = Object.fromEntries(Object.entries(allPolicyMembers ?? {}).filter(([, policyMembers]) => !!policyMembers));
+
+    // 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(cleanAllPolicyMembers).some(PolicyUtils.hasPolicyMemberError),
+        () => 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)];
+    const shouldShowErrorIndicator = errorCheckingMethods.some((errorCheckingMethod) => errorCheckingMethod());
+    const shouldShowInfoIndicator = !shouldShowErrorIndicator && infoCheckingMethods.some((infoCheckingMethod) => infoCheckingMethod());
+
+    const indicatorColor = shouldShowErrorIndicator ? theme.danger : theme.success;
+    const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)];
+
+    return (shouldShowErrorIndicator || shouldShowInfoIndicator) && <View style={StyleSheet.flatten(indicatorStyles)} />;
+}
+
+Indicator.displayName = 'Indicator';
+
+export default withOnyx<IndicatorProps, IndicatorOnyxProps>({
+    allPolicyMembers: {
+        key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
+    },
+    policies: {
+        key: ONYXKEYS.COLLECTION.POLICY,
+    },
+    bankAccountList: {
+        key: ONYXKEYS.BANK_ACCOUNT_LIST,
+    },
+    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);

src/libs/actions/PaymentMethods.ts

@@ -1,12 +1,14 @@
 import {createRef} from 'react';
 import Onyx, {OnyxUpdate} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
 import {ValueOf} from 'type-fest';
 import * as API from '@libs/API';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
-import ONYXKEYS, {OnyxValues} from '@src/ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {BankAccountList, FundList} from '@src/types/onyx';
 import PaymentMethod from '@src/types/onyx/PaymentMethod';
 import {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
 
@@ -304,7 +306,7 @@ function dismissSuccessfulTransferBalancePage() {
  * Looks through each payment method to see if there is an existing error
  *
  */
-function hasPaymentMethodError(bankList: OnyxValues[typeof ONYXKEYS.BANK_ACCOUNT_LIST], fundList: OnyxValues[typeof ONYXKEYS.FUND_LIST]): boolean {
+function hasPaymentMethodError(bankList: OnyxEntry<BankAccountList>, fundList: OnyxEntry<FundList>): boolean {
     const combinedPaymentMethods = {...bankList, ...fundList};
 
     return Object.values(combinedPaymentMethods).some((item) => Object.keys(item.errors ?? {}).length);

src/pages/workspace/withPolicy.tsx

@@ -59,7 +59,7 @@ const policyPropTypes = {
 
 type WithPolicyOnyxProps = {
     policy: OnyxEntry<OnyxTypes.Policy>;
-    policyMembers: OnyxEntry<OnyxTypes.PolicyMember>;
+    policyMembers: OnyxEntry<OnyxTypes.PolicyMembers>;
     policyDraft: OnyxEntry<OnyxTypes.Policy>;
     policyMembersDraft: OnyxEntry<OnyxTypes.PolicyMember>;
 };

src/types/onyx/BankAccount.ts

@@ -45,5 +45,7 @@ type BankAccount = {
     pendingAction?: OnyxCommon.PendingAction;
 };
 
+type BankAccountList = Record<string, BankAccount>;
+
 export default BankAccount;
-export type {AccountData, AdditionalData};
+export type {AccountData, AdditionalData, BankAccountList};

src/types/onyx/Fund.ts

@@ -37,4 +37,7 @@ type Fund = {
     pendingAction?: OnyxCommon.PendingAction;
 };
 
+type FundList = Record<string, Fund>;
+
 export default Fund;
+export type {FundList};

src/types/onyx/Login.ts

@@ -17,4 +17,7 @@ type Login = {
     pendingFields?: OnyxCommon.PendingFields;
 };
 
+type LoginList = Record<string, Login>;
+
 export default Login;
+export type {LoginList};

src/types/onyx/index.ts

@@ -1,6 +1,6 @@
 import Account from './Account';
 import AccountData from './AccountData';
-import BankAccount from './BankAccount';
+import BankAccount, {BankAccountList} from './BankAccount';
 import Beta from './Beta';
 import BlockedFromConcierge from './BlockedFromConcierge';
 import Card from './Card';
@@ -11,10 +11,10 @@ import DemoInfo from './DemoInfo';
 import Download from './Download';
 import Form, {AddDebitCardForm, DateOfBirthForm} from './Form';
 import FrequentlyUsedEmoji from './FrequentlyUsedEmoji';
-import Fund from './Fund';
+import Fund, {FundList} from './Fund';
 import IOU from './IOU';
 import Locale from './Locale';
-import Login from './Login';
+import Login, {LoginList} from './Login';
 import MapboxAccessToken from './MapboxAccessToken';
 import Modal from './Modal';
 import Network from './Network';
@@ -61,6 +61,7 @@ export type {
     AccountData,
     AddDebitCardForm,
     BankAccount,
+    BankAccountList,
     Beta,
     BlockedFromConcierge,
     Card,
@@ -73,9 +74,11 @@ export type {
     Form,
     FrequentlyUsedEmoji,
     Fund,
+    FundList,
     IOU,
     Locale,
     Login,
+    LoginList,
     MapboxAccessToken,
     Modal,
     Network,