-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #49962 from callstack-internal/pac-guerreiro/featu…
…re/49600-show-reason-for-rbr-gbr-on-lhn-tabs [Debug Mode] Show reason for RBR/GBR on LHN tabs
- Loading branch information
Showing
9 changed files
with
628 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import {useMemo} from 'react'; | ||
| 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 = ValueOf<typeof CONST.INDICATOR_STATUS>; | ||
|
|
||
| type IndicatorStatusResult = { | ||
| indicatorColor: string; | ||
| status: ValueOf<typeof CONST.INDICATOR_STATUS> | undefined; | ||
| policyIDWithErrors: string | undefined; | ||
| }; | ||
|
|
||
| function useIndicatorStatus(): IndicatorStatusResult { | ||
| 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 = useMemo(() => Object.fromEntries(Object.entries(policies ?? {}).filter(([, policy]) => policy?.id)), [policies]); | ||
|
|
||
| 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: Partial<Record<IndicatorStatus, boolean>> = { | ||
| [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: Partial<Record<IndicatorStatus, boolean>> = { | ||
| [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 IndicatorStatus | undefined; | ||
| const policyIDWithErrors = Object.values(policyErrors).find(Boolean)?.id; | ||
| const indicatorColor = error ? theme.danger : theme.success; | ||
|
|
||
| return {indicatorColor, status, policyIDWithErrors}; | ||
| } | ||
|
|
||
| export default useIndicatorStatus; | ||
|
|
||
| export type {IndicatorStatus}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.