diff --git a/src/components/TransactionItemRow/DataCells/TypeCell.tsx b/src/components/TransactionItemRow/DataCells/TypeCell.tsx index b9fdc99d546a..1f36a6c84443 100644 --- a/src/components/TransactionItemRow/DataCells/TypeCell.tsx +++ b/src/components/TransactionItemRow/DataCells/TypeCell.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; import Icon from '@components/Icon'; import TextWithTooltip from '@components/TextWithTooltip'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; @@ -11,7 +10,6 @@ import {getExpenseTypeTranslationKey, getTransactionType, isExpensifyCardTransac import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Card, CardList} from '@src/types/onyx'; import type IconAsset from '@src/types/utils/IconAsset'; import type TransactionDataCellProps from './TransactionDataCellProps'; @@ -33,13 +31,10 @@ const getTypeIcon = (icons: Record<'Car' | 'CreditCard' | 'Cash' | 'Clock' | 'Ca function TypeCell({transactionItem, shouldUseNarrowLayout, shouldShowTooltip}: TransactionDataCellProps) { const {translate} = useLocalize(); - const cardSelector = (cards: OnyxEntry): OnyxEntry => cards?.[transactionItem.cardID ?? CONST.DEFAULT_NUMBER_ID]; - const [card] = useOnyx(ONYXKEYS.CARD_LIST, {selector: cardSelector}); - const cardID = `${transactionItem.cardID}`; - const cardList = transactionItem.cardID && card ? {[cardID]: card} : undefined; + const [card] = useOnyx(ONYXKEYS.CARD_LIST, {selector: (cardList) => (transactionItem.cardID ? cardList?.[transactionItem.cardID] : undefined)}); const theme = useTheme(); const expensifyIcons = useMemoizedLazyExpensifyIcons(['Car', 'CreditCard', 'CreditCardHourglass', 'Cash', 'Clock', 'CalendarSolid']); - const type = getTransactionType(transactionItem, cardList); + const type = getTransactionType(transactionItem, card); const isPendingExpensifyCardTransaction = isExpensifyCardTransaction(transactionItem) && isPending(transactionItem); const typeIcon = isPendingExpensifyCardTransaction ? expensifyIcons.CreditCardHourglass : getTypeIcon(expensifyIcons, type); const typeText = isPendingExpensifyCardTransaction ? 'iou.pending' : getExpenseTypeTranslationKey(type); diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts index abea2098689d..98903f747049 100644 --- a/src/libs/TransactionUtils/index.ts +++ b/src/libs/TransactionUtils/index.ts @@ -52,7 +52,7 @@ import IntlStore from '@src/languages/IntlStore'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import type { - CardList, + Card, OnyxInputOrEntry, Policy, PolicyCategories, @@ -331,10 +331,10 @@ function getExpenseType(transaction: OnyxEntry): ValueOf, cardList?: CardList): ValueOf { +function getTransactionType(transaction: OnyxEntry, card?: Card): ValueOf { if (isDistanceRequest(transaction)) { return CONST.SEARCH.TRANSACTION_TYPE.DISTANCE; } @@ -351,8 +351,7 @@ function getTransactionType(transaction: OnyxEntry, cardList?: Card return CONST.SEARCH.TRANSACTION_TYPE.CARD; } - const cardID = transaction?.cardID; - if (cardID && cardList?.[cardID]?.cardName === CONST.COMPANY_CARDS.CARD_NAME.CASH) { + if (card?.cardName === CONST.COMPANY_CARDS.CARD_NAME.CASH) { return CONST.SEARCH.TRANSACTION_TYPE.CASH; } diff --git a/tests/unit/TransactionUtilsTest.ts b/tests/unit/TransactionUtilsTest.ts index bd34f6ff50ca..33a006f8e5af 100644 --- a/tests/unit/TransactionUtilsTest.ts +++ b/tests/unit/TransactionUtilsTest.ts @@ -9,8 +9,7 @@ import type {Attendee} from '@src/types/onyx/IOU'; import type {CustomUnit, Rate} from '@src/types/onyx/Policy'; import type {TransactionCustomUnit} from '@src/types/onyx/Transaction'; import * as TransactionUtils from '../../src/libs/TransactionUtils'; -import type {Policy, Report, Transaction} from '../../src/types/onyx'; -import type {CardList} from '../../src/types/onyx/Card'; +import type {Card, Policy, Report, Transaction} from '../../src/types/onyx'; import createRandomPolicy, {createCategoryTaxExpenseRules} from '../utils/collections/policies'; import {createRandomReport} from '../utils/collections/reports'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; @@ -459,18 +458,15 @@ describe('TransactionUtils', () => { expect(TransactionUtils.getTransactionType(transaction)).toBe(CONST.SEARCH.TRANSACTION_TYPE.PER_DIEM); }); - it('returns cash when the transaction cardID maps to a cash card in the card list', () => { - const cardID = 101; - const cardList = { - [cardID]: { - cardName: '__CASH__', - }, - } as unknown as CardList; + it('returns cash when the card has a cash card name', () => { + const card = { + cardName: CONST.COMPANY_CARDS.CARD_NAME.CASH, + } as Card; const transaction = generateTransaction({ - cardID, + cardID: 101, }); - expect(TransactionUtils.getTransactionType(transaction, cardList)).toBe(CONST.SEARCH.TRANSACTION_TYPE.CASH); + expect(TransactionUtils.getTransactionType(transaction, card)).toBe(CONST.SEARCH.TRANSACTION_TYPE.CASH); }); it('returns cash when the transaction card name includes the cash card name substring', () => {