diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 636f540e437f..eeef0c6fb164 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -257,7 +257,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS .flatMap((filteredReportActions) => Object.values(filteredReportActions ?? {})), [reportActions], ); - const {translate, localeCompare} = useLocalize(); + const {translate, localeCompare, formatPhoneNumber} = useLocalize(); const searchListRef = useRef(null); const clearTransactionsAndSetHashAndKey = useCallback(() => { @@ -359,8 +359,9 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS if (groupBy && (isChat || isTask)) { return []; } - return getSections(type, searchResults.data, searchResults.search, groupBy, exportReportActions, searchKey, archivedReportsIdSet); - }, [searchKey, exportReportActions, groupBy, isDataLoaded, searchResults, type, archivedReportsIdSet]); + + return getSections(type, searchResults.data, searchResults.search, formatPhoneNumber, groupBy, exportReportActions, searchKey, archivedReportsIdSet); + }, [searchKey, exportReportActions, groupBy, isDataLoaded, searchResults, type, archivedReportsIdSet, formatPhoneNumber]); useEffect(() => { /** We only want to display the skeleton for the status filters the first time we load them for a specific data type */ diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index ed7b86b1ad8f..b3c47848bca8 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -51,7 +51,6 @@ import {getCardFeedsForDisplay} from './CardFeedUtils'; import {convertToDisplayString} from './CurrencyUtils'; import DateUtils from './DateUtils'; import interceptAnonymousUser from './interceptAnonymousUser'; -import {formatPhoneNumber} from './LocalePhoneNumber'; import {translateLocal} from './Localize'; import Navigation from './Navigation/Navigation'; import Parser from './Parser'; @@ -446,6 +445,7 @@ function getTransactionItemCommonFormattedProperties( from: SearchPersonalDetails, to: SearchPersonalDetails, policy: SearchPolicy, + formatPhoneNumber: LocaleContextProps['formatPhoneNumber'], ): Pick { const isExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE; @@ -729,7 +729,12 @@ function getTransactionViolations(allViolations: OnyxCollection = {}, ): TransactionGroupListItemType[] { const shouldShowMerchant = getShouldShowMerchant(data); @@ -1195,7 +1205,7 @@ function getReportSections( const from = data.personalDetailsList?.[transactionItem.accountID]; const to = transactionItem.managerID && !shouldShowBlankTo ? (data.personalDetailsList?.[transactionItem.managerID] ?? emptyPersonalDetails) : emptyPersonalDetails; - const {formattedFrom, formattedTo, formattedTotal, formattedMerchant, date} = getTransactionItemCommonFormattedProperties(transactionItem, from, to, policy); + const {formattedFrom, formattedTo, formattedTotal, formattedMerchant, date} = getTransactionItemCommonFormattedProperties(transactionItem, from, to, policy, formatPhoneNumber); const transaction = { ...transactionItem, @@ -1274,6 +1284,7 @@ function getSections( type: SearchDataTypes, data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], + formatPhoneNumber: LocaleContextProps['formatPhoneNumber'], groupBy?: SearchGroupBy, reportActions: Record = {}, currentSearch: SearchKey = CONST.SEARCH.SEARCH_KEYS.EXPENSES, @@ -1283,7 +1294,7 @@ function getSections( return getReportActionsSections(data); } if (type === CONST.SEARCH.DATA_TYPES.TASK) { - return getTaskSections(data, archivedReportsIDList); + return getTaskSections(data, formatPhoneNumber, archivedReportsIDList); } if (groupBy) { @@ -1291,7 +1302,7 @@ function getSections( // eslint-disable-next-line default-case switch (groupBy) { case CONST.SEARCH.GROUP_BY.REPORTS: - return getReportSections(data, metadata, currentSearch, reportActions); + return getReportSections(data, metadata, currentSearch, formatPhoneNumber, reportActions); case CONST.SEARCH.GROUP_BY.MEMBERS: return getMemberSections(data, metadata); case CONST.SEARCH.GROUP_BY.CARDS: @@ -1299,7 +1310,7 @@ function getSections( } } - return getTransactionsSections(data, metadata, currentSearch); + return getTransactionsSections(data, metadata, currentSearch, formatPhoneNumber); } /** diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts index 0fc08b67c39b..15039c577b39 100644 --- a/tests/unit/Search/SearchUIUtilsTest.ts +++ b/tests/unit/Search/SearchUIUtilsTest.ts @@ -10,7 +10,7 @@ import * as SearchUIUtils from '@src/libs/SearchUIUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import type * as OnyxTypes from '@src/types/onyx'; import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; -import {localeCompare} from '../../utils/TestHelper'; +import {formatPhoneNumber, localeCompare} from '../../utils/TestHelper'; import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates'; jest.mock('@src/components/ConfirmedRoute.tsx'); @@ -1298,41 +1298,41 @@ describe('SearchUIUtils', () => { describe('Test getSections', () => { it('should return getReportActionsSections result when type is CHAT', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.CHAT, searchResults.data, searchResults.search)).toStrictEqual(reportActionListItems); + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.CHAT, searchResults.data, searchResults.search, formatPhoneNumber)).toStrictEqual(reportActionListItems); }); it('should return getTransactionsSections result when groupBy is undefined', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.EXPENSE, searchResults.data, searchResults.search, undefined)).toStrictEqual(transactionsListItems); + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.EXPENSE, searchResults.data, searchResults.search, formatPhoneNumber, undefined)).toStrictEqual(transactionsListItems); }); it('should return getReportSections result when type is EXPENSE and groupBy is report', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.EXPENSE, searchResults.data, searchResults.search, CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual( + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.EXPENSE, searchResults.data, searchResults.search, formatPhoneNumber, CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual( transactionReportGroupListItems, ); }); it('should return getReportSections result when type is TRIP and groupBy is report', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.TRIP, searchResults.data, searchResults.search, CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual( + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.TRIP, searchResults.data, searchResults.search, formatPhoneNumber, CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual( transactionReportGroupListItems, ); }); it('should return getReportSections result when type is INVOICE and groupBy is report', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.INVOICE, searchResults.data, searchResults.search, CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual( + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.INVOICE, searchResults.data, searchResults.search, formatPhoneNumber, CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual( transactionReportGroupListItems, ); }); it('should return getMemberSections result when type is EXPENSE and groupBy is member', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.EXPENSE, searchResults.data, searchResults.search, CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.EXPENSE, searchResults.data, searchResults.search, formatPhoneNumber, CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test }); it('should return getMemberSections result when type is TRIP and groupBy is member', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.TRIP, searchResults.data, searchResults.search, CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.TRIP, searchResults.data, searchResults.search, formatPhoneNumber, CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test }); it('should return getMemberSections result when type is INVOICE and groupBy is member', () => { - expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.INVOICE, searchResults.data, searchResults.search, CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test + expect(SearchUIUtils.getSections(CONST.SEARCH.DATA_TYPES.INVOICE, searchResults.data, searchResults.search, formatPhoneNumber, CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test }); // s77rt add test for group by card