diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index c81bd741f71b..ed3141d31e75 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -2,9 +2,9 @@ import React, {useEffect, useMemo, useState} from 'react'; import {Keyboard} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; -import SelectionList from '@components/SelectionListWithSections'; -import type {ListItem} from '@components/SelectionListWithSections/types'; -import UserListItem from '@components/SelectionListWithSections/UserListItem'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/ListItem/UserListItem'; +import type {ListItem} from '@components/SelectionList/types'; import Text from '@components/Text'; import useCardFeeds from '@hooks/useCardFeeds'; import useCardsList from '@hooks/useCardsList'; @@ -168,18 +168,11 @@ function AssigneeStep({policy, feed, route}: AssigneeStepProps) { return membersList; }, [isOffline, policy?.employeeList, assignCard?.data?.email, formatPhoneNumber, localeCompare, expensifyIcons.FallbackAvatar]); - const sections = useMemo(() => { + const assignees = useMemo(() => { if (!debouncedSearchTerm) { - return [ - { - data: membersDetails, - shouldShow: true, - }, - ]; + return membersDetails; } - const sectionsArr = []; - if (!areOptionsInitialized) { return []; } @@ -187,54 +180,27 @@ function AssigneeStep({policy, feed, route}: AssigneeStepProps) { const searchValueForOptions = getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode).toLowerCase(); const filteredOptions = tokenizedSearch(membersDetails, searchValueForOptions, (option) => [option.text ?? '', option.alternateText ?? '']); - sectionsArr.push({ - title: undefined, - data: filteredOptions, - shouldShow: true, - }); - - // Selected options section - if (selectedOptionsForDisplay.length > 0) { - sectionsArr.push({ - title: undefined, - data: selectedOptionsForDisplay, - }); - } - - // Recent reports section - if (availableOptions.recentReports.length > 0) { - sectionsArr.push({ - title: undefined, - data: availableOptions.recentReports, - }); - } - - // Contacts section - if (availableOptions.personalDetails.length > 0) { - sectionsArr.push({ - title: undefined, - data: availableOptions.personalDetails, - }); - } - - // User to invite section - if (availableOptions.userToInvite) { - sectionsArr.push({ - title: undefined, - data: [availableOptions.userToInvite], - }); - } - - return sectionsArr; + const options = [ + ...filteredOptions, + ...selectedOptionsForDisplay, + ...availableOptions.recentReports, + ...availableOptions.personalDetails, + ...(availableOptions.userToInvite ? [availableOptions.userToInvite] : []), + ]; + + return options.map((option) => ({ + ...option, + keyForList: option.keyForList ?? option.login ?? '', + })); }, [ - debouncedSearchTerm, areOptionsInitialized, + availableOptions.personalDetails, + availableOptions.recentReports, + availableOptions.userToInvite, countryCode, + debouncedSearchTerm, membersDetails, selectedOptionsForDisplay, - availableOptions.recentReports, - availableOptions.personalDetails, - availableOptions.userToInvite, ]); useEffect(() => { @@ -246,14 +212,18 @@ function AssigneeStep({policy, feed, route}: AssigneeStepProps) { if (!availableOptions.userToInvite && CONST.EXPENSIFY_EMAILS_OBJECT[searchValue]) { return translate('messages.errorMessageInvalidEmail'); } - return getHeaderMessage( - sections.some((section) => section.data.length > 0), - !!availableOptions.userToInvite, - searchValue, - countryCode, - false, - ); - }, [searchTerm, availableOptions.userToInvite, sections, countryCode, translate]); + return getHeaderMessage(assignees.length > 0, !!availableOptions.userToInvite, searchValue, countryCode, false); + }, [searchTerm, availableOptions.userToInvite, assignees, countryCode, translate]); + + const textInputOptions = useMemo( + () => ({ + label: translate('selectionList.nameEmailOrPhoneNumber'), + value: searchTerm, + onChangeText: setSearchTerm, + headerMessage, + }), + [headerMessage, searchTerm, setSearchTerm, translate], + ); return ( {translate('workspace.companyCards.whoNeedsCardAssigned')} );