From 945786e5ab42c6634942df3d110166e0bc7411d3 Mon Sep 17 00:00:00 2001 From: dominictb Date: Tue, 17 Sep 2024 01:42:41 +0700 Subject: [PATCH 1/6] fix: error not show and cannot dismiss in report fraud page --- src/libs/actions/PaymentMethods.ts | 2 +- src/pages/settings/Wallet/PaymentMethodList.tsx | 10 +++++++++- .../settings/Wallet/ReportVirtualCardFraudPage.tsx | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts index bac3739af810..48c64a6bae24 100644 --- a/src/libs/actions/PaymentMethods.ts +++ b/src/libs/actions/PaymentMethods.ts @@ -409,7 +409,7 @@ function hasPaymentMethodError(bankList: OnyxEntry, fundList: O return Object.values(combinedPaymentMethods).some((item) => Object.keys(item.errors ?? {}).length); } -type PaymentListKey = typeof ONYXKEYS.BANK_ACCOUNT_LIST | typeof ONYXKEYS.FUND_LIST; +type PaymentListKey = typeof ONYXKEYS.BANK_ACCOUNT_LIST | typeof ONYXKEYS.FUND_LIST | typeof ONYXKEYS.CARD_LIST; /** * Clears the error for the specified payment item diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 5f77ac33becf..a0366450764a 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -126,9 +126,15 @@ type PaymentMethodItem = PaymentMethod & { errors?: Errors; iconRight?: React.FC; isMethodActive?: boolean; + cardID?: number; } & BankIcon; -function dismissError(item: PaymentMethod) { +function dismissError(item: PaymentMethodItem) { + if (item.cardID) { + PaymentMethods.clearDeletePaymentMethodError(ONYXKEYS.CARD_LIST, item.cardID); + return; + } + const isBankAccount = item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT; const paymentList = isBankAccount ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.FUND_LIST; const paymentID = isBankAccount ? item.accountData?.bankAccountID ?? '' : item.accountData?.fundID ?? ''; @@ -226,6 +232,7 @@ function PaymentMethodList({ key: card.cardID.toString(), title: card.bank, description: getDescriptionForPolicyDomainCard(card.domainName), + cardID: card.cardID, shouldShowRightIcon: false, interactive: false, canDismissError: false, @@ -258,6 +265,7 @@ function PaymentMethodList({ title: card?.nameValuePairs?.cardTitle || card.bank, description: getDescriptionForPolicyDomainCard(card.domainName), onPress: () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(String(card.cardID))), + cardID: card.cardID, isGroupedCardDomain: !isAdminIssuedVirtualCard, shouldShowRightIcon: true, interactive: true, diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx index 22761c40da9c..84bccfb1f237 100644 --- a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx +++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx @@ -43,7 +43,7 @@ function ReportVirtualCardFraudPage({ const {translate} = useLocalize(); const virtualCard = cardList?.[cardID]; - const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard?.errors ?? {}); + const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard); const prevIsLoading = usePrevious(formData?.isLoading); From 5aa1fe5ee205cbb30a5657d5bee36c9abc43bc81 Mon Sep 17 00:00:00 2001 From: dominictb Date: Wed, 18 Sep 2024 00:27:15 +0700 Subject: [PATCH 2/6] remove cardID for indismissable cards --- src/pages/settings/Wallet/PaymentMethodList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index a0366450764a..a0ea296c4ecb 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -232,7 +232,6 @@ function PaymentMethodList({ key: card.cardID.toString(), title: card.bank, description: getDescriptionForPolicyDomainCard(card.domainName), - cardID: card.cardID, shouldShowRightIcon: false, interactive: false, canDismissError: false, From 09a0dc2e65be0863c9eeeefc81334d5e49432ef6 Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 10:41:34 +0700 Subject: [PATCH 3/6] fix: remove withOnyx --- .../settings/Wallet/PaymentMethodList.tsx | 53 +++++-------------- 1 file changed, 14 insertions(+), 39 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index f9cc01e24405..b7857f1f5566 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -3,8 +3,7 @@ import type {ReactElement, Ref} from 'react'; import React, {useCallback, useMemo} from 'react'; import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; import {FlatList, View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG'; import type {ValueOf} from 'type-fest'; import type {RenderSuggestionMenuItemProps} from '@components/AutoCompleteSuggestions/types'; @@ -30,29 +29,16 @@ import * as PaymentMethods from '@userActions/PaymentMethods'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {AccountData, BankAccountList, CardList} from '@src/types/onyx'; +import type {AccountData} from '@src/types/onyx'; import type {BankIcon} from '@src/types/onyx/Bank'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import type PaymentMethod from '@src/types/onyx/PaymentMethod'; import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import type {FormattedSelectedPaymentMethodIcon} from './WalletPage/types'; -type PaymentMethodListOnyxProps = { - /** List of bank accounts */ - bankAccountList: OnyxEntry; - - /** List of assigned cards */ - cardList: OnyxEntry; - - /** List of user's cards */ - // fundList: OnyxEntry; - - /** Are we loading payment methods? */ - isLoadingPaymentMethods: OnyxEntry; -}; - -type PaymentMethodListProps = PaymentMethodListOnyxProps & { +type PaymentMethodListProps = { /** Type of active/highlighted payment method */ actionPaymentMethodType?: string; @@ -179,14 +165,11 @@ function keyExtractor(item: PaymentMethod) { function PaymentMethodList({ actionPaymentMethodType = '', activePaymentMethodID = '', - bankAccountList = {}, buttonRef = () => {}, - cardList = {}, // Temporarily disabled because P2P debit cards are disabled. // fundList = {}, filterType = '', listHeaderComponent, - isLoadingPaymentMethods = true, onPress, shouldShowSelectedState = false, shouldShowAddPaymentMethodButton = true, @@ -205,6 +188,12 @@ function PaymentMethodList({ const {translate} = useLocalize(); const {isOffline} = useNetwork(); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); + const [bankAccountList, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult); + const [cardList, cardListResult] = useOnyx(ONYXKEYS.CARD_LIST); + const isLoadingCardList = isLoadingOnyxValue(cardListResult); + const [isLoadingPaymentMethods, isLoadingPaymentMethodsResult] = useOnyx(ONYXKEYS.IS_LOADING_PAYMENT_METHODS); + const isLoadingPaymentMethodsOnyx = isLoadingOnyxValue(isLoadingPaymentMethodsResult); const getDescriptionForPolicyDomainCard = (domainName: string): string => { // A domain name containing a policyID indicates that this is a workspace feed @@ -218,7 +207,7 @@ function PaymentMethodList({ const filteredPaymentMethods = useMemo(() => { if (shouldShowAssignedCards) { - const assignedCards = Object.values(cardList ?? {}) + const assignedCards = Object.values(isLoadingCardList ? {} : cardList ?? {}) // Filter by active cards associated with a domain .filter((card) => !!card.domainName && CONST.EXPENSIFY_CARD.ACTIVE_STATES.includes(card.state ?? 0)); const assignedCardsSorted = lodashSortBy(assignedCards, (card) => !CardUtils.isExpensifyCard(card.cardID)); @@ -285,7 +274,7 @@ function PaymentMethodList({ // const paymentCardList = fundList ?? {}; // const filteredCardList = Object.values(paymentCardList).filter((card) => !!card.accountData?.additionalData?.isP2PDebitCard); const filteredCardList = {}; - let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList ?? {}, filteredCardList, styles); + let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(isLoadingBankAccountList ? {} : bankAccountList ?? {}, filteredCardList, styles); if (filterType !== '') { combinedPaymentMethods = combinedPaymentMethods.filter((paymentMethod) => paymentMethod.accountType === filterType); @@ -406,7 +395,7 @@ function PaymentMethodList({ icon={Expensicons.CreditCard} onPress={onPress} // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - isDisabled={isLoadingPaymentMethods || isFormOffline} + isDisabled={isLoadingPaymentMethods || isFormOffline || isLoadingPaymentMethodsOnyx} style={[styles.mh4, styles.buttonCTA]} key="addPaymentMethodButton" success @@ -423,18 +412,4 @@ function PaymentMethodList({ PaymentMethodList.displayName = 'PaymentMethodList'; -export default withOnyx({ - bankAccountList: { - key: ONYXKEYS.BANK_ACCOUNT_LIST, - }, - cardList: { - key: ONYXKEYS.CARD_LIST, - }, - // Temporarily disabled - used for P2P debit cards - // fundList: { - // key: ONYXKEYS.FUND_LIST, - // }, - isLoadingPaymentMethods: { - key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, - }, -})(PaymentMethodList); +export default PaymentMethodList; From 9946fdbd07c519d2648c0f8897771e60d8b1a9ce Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 10:50:03 +0700 Subject: [PATCH 4/6] fix: lint --- .../settings/Wallet/PaymentMethodList.tsx | 16 ++++++++++- .../Wallet/ReportVirtualCardFraudPage.tsx | 28 ++++--------------- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index b7857f1f5566..1cd2c3a85e1a 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -312,7 +312,21 @@ function PaymentMethodList({ }; }); return combinedPaymentMethods; - }, [shouldShowAssignedCards, bankAccountList, styles, filterType, isOffline, cardList, actionPaymentMethodType, activePaymentMethodID, StyleUtils, shouldShowRightIcon, onPress]); + }, [ + shouldShowAssignedCards, + bankAccountList, + styles, + filterType, + isOffline, + cardList, + actionPaymentMethodType, + activePaymentMethodID, + StyleUtils, + shouldShowRightIcon, + onPress, + isLoadingBankAccountList, + isLoadingCardList, + ]); /** * Render placeholder when there are no payments methods diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx index 84bccfb1f237..373314df08ac 100644 --- a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx +++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx @@ -1,8 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -18,29 +17,19 @@ import * as Card from '@userActions/Card'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {ReportVirtualCardFraudForm} from '@src/types/form'; -import type {Card as OnyxCard} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type ReportVirtualCardFraudPageOnyxProps = { - /** Form data propTypes */ - formData: OnyxEntry; - - /** Card list propTypes */ - cardList: OnyxEntry>; -}; - -type ReportVirtualCardFraudPageProps = ReportVirtualCardFraudPageOnyxProps & StackScreenProps; +type ReportVirtualCardFraudPageProps = StackScreenProps; function ReportVirtualCardFraudPage({ route: { params: {cardID = ''}, }, - cardList, - formData, }: ReportVirtualCardFraudPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [cardList] = useOnyx(ONYXKEYS.CARD_LIST); + const [formData] = useOnyx(ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD); const virtualCard = cardList?.[cardID]; const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard); @@ -85,11 +74,4 @@ function ReportVirtualCardFraudPage({ ReportVirtualCardFraudPage.displayName = 'ReportVirtualCardFraudPage'; -export default withOnyx({ - cardList: { - key: ONYXKEYS.CARD_LIST, - }, - formData: { - key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD, - }, -})(ReportVirtualCardFraudPage); +export default ReportVirtualCardFraudPage; From 9cdd0ec03f5e081a055df939cb482a5c2c0006b3 Mon Sep 17 00:00:00 2001 From: dominictb Date: Wed, 2 Oct 2024 16:27:53 +0700 Subject: [PATCH 5/6] close error in workspace card list page --- .../workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 25de151bbb6d..1880ad88cd0f 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -18,6 +18,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import Navigation from '@navigation/Navigation'; import type {FullScreenNavigatorParamList} from '@navigation/types'; +import * as PaymentMethods from '@userActions/PaymentMethods'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -79,6 +80,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa pendingAction={item.pendingAction} errorRowStyles={styles.ph5} errors={item.errors} + onClose={() => PaymentMethods.clearDeletePaymentMethodError(ONYXKEYS.CARD_LIST, item.cardID)} > Date: Thu, 3 Oct 2024 11:31:24 +0700 Subject: [PATCH 6/6] clear card error in workspace expensify card page --- src/libs/actions/PaymentMethods.ts | 6 +++++- .../expensifyCard/WorkspaceExpensifyCardListPage.tsx | 6 ++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts index 4b4fcf172074..893540e1dfac 100644 --- a/src/libs/actions/PaymentMethods.ts +++ b/src/libs/actions/PaymentMethods.ts @@ -418,7 +418,11 @@ function hasPaymentMethodError(bankList: OnyxEntry, fundList: O return Object.values(combinedPaymentMethods).some((item) => Object.keys(item.errors ?? {}).length); } -type PaymentListKey = typeof ONYXKEYS.BANK_ACCOUNT_LIST | typeof ONYXKEYS.FUND_LIST | typeof ONYXKEYS.CARD_LIST; +type PaymentListKey = + | typeof ONYXKEYS.BANK_ACCOUNT_LIST + | typeof ONYXKEYS.FUND_LIST + | typeof ONYXKEYS.CARD_LIST + | `${typeof ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${string}_${typeof CONST.EXPENSIFY_CARD.BANK}`; /** * Clears the error for the specified payment item diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 1880ad88cd0f..ef38cb509e78 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -16,6 +16,7 @@ import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {FullScreenNavigatorParamList} from '@navigation/types'; import * as PaymentMethods from '@userActions/PaymentMethods'; @@ -45,6 +46,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa const policyID = route.params.policyID; const policy = usePolicy(policyID); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID); const policyCurrency = useMemo(() => policy?.outputCurrency ?? CONST.CURRENCY.USD, [policy]); @@ -80,7 +82,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa pendingAction={item.pendingAction} errorRowStyles={styles.ph5} errors={item.errors} - onClose={() => PaymentMethods.clearDeletePaymentMethodError(ONYXKEYS.CARD_LIST, item.cardID)} + onClose={() => PaymentMethods.clearDeletePaymentMethodError(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`, item.cardID)} > ), - [personalDetails, policyCurrency, policyID, styles], + [personalDetails, policyCurrency, policyID, workspaceAccountID, styles], ); const renderListHeader = useCallback(() => , [policyID]);