Tweaks to the expense flow

src/components/MoneyRequestConfirmationList.tsx

@@ -410,7 +410,7 @@ function MoneyRequestConfirmationList({
                 text = translate('common.next');
             }
         } else if (isTypeTrackExpense) {
-            text = translate('iou.trackExpense');
+            text = translate('iou.createExpenseWithAmount', {amount: formattedAmount});
         } else if (isTypeSplit && iouAmount === 0) {
             text = translate('iou.splitExpense');
         } else if ((receiptPath && isTypeRequest) || isDistanceRequestWithPendingRoute) {
@@ -419,7 +419,7 @@ function MoneyRequestConfirmationList({
                 text = translate('iou.submitAmount', {amount: formattedAmount});
             }
         } else {
-            const translationKey = isTypeSplit ? 'iou.splitAmount' : 'iou.submitAmount';
+            const translationKey = isTypeSplit ? 'iou.splitAmount' : 'iou.createExpenseWithAmount';
             text = translate(translationKey, {amount: formattedAmount});
         }
         return [

src/languages/en.ts

@@ -859,6 +859,7 @@ const translations = {
         createExpense: 'Create expense',
         trackExpense: 'Track expense',
         chooseRecipient: 'Choose recipient',
+        createExpenseWithAmount: ({amount}: {amount: string}) => `Create ${amount} expense`,
         confirmDetails: 'Confirm details',
         pay: 'Pay',
         cancelPayment: 'Cancel payment',

src/languages/es.ts

@@ -855,6 +855,7 @@ const translations = {
         trackExpense: 'Seguimiento de gastos',
         chooseRecipient: 'Elige destinatario',
         confirmDetails: 'Confirma los detalles',
+        createExpenseWithAmount: ({amount}: {amount: string}) => `Crea un gasto de ${amount}`,
         pay: 'Pagar',
         cancelPayment: 'Cancelar el pago',
         cancelPaymentConfirmation: '¿Estás seguro de que quieres cancelar este pago?',

src/libs/OptionsListUtils.ts

@@ -113,6 +113,8 @@ type GetOptionsConfig = {
     shouldAcceptName?: boolean;
     recentAttendees?: Attendee[];
     shouldBoldTitleByDefault?: boolean;
+    shouldSeparateWorkspaceChat?: boolean;
+    shouldSeparateSelfDMChat?: boolean;
 };
 
 type GetUserToInviteConfig = {
@@ -146,6 +148,8 @@ type Options = {
     personalDetails: ReportUtils.OptionData[];
     userToInvite: ReportUtils.OptionData | null;
     currentUserOption: ReportUtils.OptionData | null | undefined;
+    recentWorkspaceChats?: ReportUtils.OptionData[];
+    selfDMChat?: ReportUtils.OptionData | undefined;
 };
 
 type PreviewConfig = {showChatPreviewLine?: boolean; forcePolicyNamePreview?: boolean; showPersonalDetails?: boolean};
@@ -1070,6 +1074,8 @@ function getOptions(
         action,
         recentAttendees,
         shouldBoldTitleByDefault = true,
+        shouldSeparateSelfDMChat = false,
+        shouldSeparateWorkspaceChat = false,
     }: GetOptionsConfig = {},
 ): Options {
     const topmostReportId = Navigation.getTopmostReportId() ?? '-1';
@@ -1280,6 +1286,17 @@ function getOptions(
     }
 
     const currentUserOption = allPersonalDetailsOptions.find((personalDetailsOption) => personalDetailsOption.login === currentUserLogin);
+    let recentWorkspaceChats: ReportUtils.OptionData[] = [];
+    let selfDMChat: ReportUtils.OptionData | undefined;
+
+    if (shouldSeparateWorkspaceChat) {
+        recentWorkspaceChats = recentReportOptions.filter((option) => option.isPolicyExpenseChat);
+        recentReportOptions = recentReportOptions.filter((option) => !option.isPolicyExpenseChat);
+    }
+    if (shouldSeparateSelfDMChat) {
+        selfDMChat = recentReportOptions.find((option) => option.isSelfDM);
+        recentReportOptions = recentReportOptions.filter((option) => !option.isSelfDM);
+    }
 
     return {
         personalDetails: personalDetailsOptions,
@@ -1288,6 +1305,8 @@ function getOptions(
         // User to invite is generated by the search input of a user.
         // As this function isn't concerned with any search input yet, this is null (will be set when using filterOptions).
         userToInvite: null,
+        recentWorkspaceChats,
+        selfDMChat,
     };
 }
 
@@ -1520,6 +1539,7 @@ function formatSectionsFromSearchTerm(
     filteredPersonalDetails: ReportUtils.OptionData[],
     personalDetails: OnyxEntry<PersonalDetailsList> = {},
     shouldGetOptionDetails = false,
+    filteredRecentWorkspaceChats: ReportUtils.OptionData[] = [],
 ): SectionForSearchTerm {
     // We show the selected participants at the top of the list when there is no search term or maximum number of participants has already been selected
     // However, if there is a search term we remove the selected participants from the top of the list unless they are part of the search results
@@ -1545,8 +1565,10 @@ function formatSectionsFromSearchTerm(
     const selectedParticipantsWithoutDetails = selectedOptions.filter((participant) => {
         const accountID = participant.accountID ?? null;
         const isPartOfSearchTerm = getPersonalDetailSearchTerms(participant).join(' ').toLowerCase().includes(cleanSearchTerm);
-        const isReportInRecentReports = filteredRecentReports.some((report) => report.accountID === accountID);
+        const isReportInRecentReports =
+            filteredRecentReports.some((report) => report.accountID === accountID) || filteredRecentWorkspaceChats.some((report) => report.accountID === accountID);
         const isReportInPersonalDetails = filteredPersonalDetails.some((personalDetail) => personalDetail.accountID === accountID);
+
         return isPartOfSearchTerm && !isReportInRecentReports && !isReportInPersonalDetails;
     });
 
@@ -1610,10 +1632,13 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt
     if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) {
         const recentReports = options.recentReports.slice(0, maxRecentReportsToShow);
         const personalDetails = filteredPersonalDetailsOfRecentReports(recentReports, options.personalDetails);
+        const recentWorkspaceChats = options.recentWorkspaceChats?.slice(0, maxRecentReportsToShow);
+
         return {
             ...options,
             recentReports,
             personalDetails,
+            recentWorkspaceChats,
         };
     }
 
@@ -1651,6 +1676,28 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt
 
             return uniqFast(values);
         });
+
+        const recentWorkspaceChats = filterArrayByMatch(items.recentWorkspaceChats ?? [], term, (item) => {
+            const values: string[] = [];
+            if (item.text) {
+                values.push(item.text);
+            }
+            if (item.login) {
+                values.push(item.login);
+                values.push(item.login.replace(CONST.EMAIL_SEARCH_REGEX, ''));
+            }
+            if (item.isThread) {
+                if (item.alternateText) {
+                    values.push(item.alternateText);
+                }
+            } else if (!!item.isChatRoom || !!item.isPolicyExpenseChat) {
+                if (item.subtitle) {
+                    values.push(item.subtitle);
+                }
+            }
+            return uniqFast(values);
+        });
+
         const personalDetails = filterArrayByMatch(items.personalDetails, term, (item) => uniqFast(getPersonalDetailSearchTerms(item)));
 
         const currentUserOptionSearchText = items.currentUserOption ? uniqFast(getCurrentUserSearchTerms(items.currentUserOption)).join(' ') : '';
@@ -1661,10 +1708,11 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt
             personalDetails: personalDetails ?? [],
             userToInvite: null,
             currentUserOption,
+            recentWorkspaceChats: recentWorkspaceChats ?? [],
         };
     }, options);
 
-    const {recentReports, personalDetails} = matchResults;
+    const {recentReports, personalDetails, recentWorkspaceChats = []} = matchResults;
 
     const personalDetailsWithoutDMs = filteredPersonalDetailsOfRecentReports(recentReports, personalDetails);
 
@@ -1696,12 +1744,18 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt
         recentReports.splice(maxRecentReportsToShow);
     }
 
+    if (maxRecentReportsToShow > 0 && recentWorkspaceChats.length > maxRecentReportsToShow) {
+        recentWorkspaceChats.splice(maxRecentReportsToShow);
+    }
+
     const sortedRecentReports = orderOptions(filteredRecentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat, preferRecentExpenseReports});
     return {
         personalDetails: filteredPersonalDetails,
         recentReports: sortedRecentReports,
         userToInvite,
         currentUserOption: matchResults.currentUserOption,
+        recentWorkspaceChats,
+        selfDMChat: options.selfDMChat,
     };
 }
 

src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

@@ -7,8 +7,6 @@ import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import EmptySelectionListContent from '@components/EmptySelectionListContent';
 import FormHelpMessage from '@components/FormHelpMessage';
-import * as Expensicons from '@components/Icon/Expensicons';
-import MenuItem from '@components/MenuItem';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import ReferralProgramCTA from '@components/ReferralProgramCTA';
@@ -42,9 +40,6 @@ type MoneyRequestParticipantsSelectorProps = {
     /** Callback to add participants in MoneyRequestModal */
     onParticipantsAdded: (value: Participant[]) => void;
 
-    /** Callback to navigate to Track Expense confirmation flow  */
-    onTrackExpensePress?: () => void;
-
     /** Selected participants from MoneyRequestModal with login */
     participants?: Participant[] | typeof CONST.EMPTY_ARRAY;
 
@@ -53,20 +48,9 @@ type MoneyRequestParticipantsSelectorProps = {
 
     /** The action of the IOU, i.e. create, split, move */
     action: IOUAction;
-
-    /** Whether we should display the Track Expense button at the top of the participants list */
-    shouldDisplayTrackExpenseButton?: boolean;
 };
 
-function MoneyRequestParticipantsSelector({
-    participants = CONST.EMPTY_ARRAY,
-    onTrackExpensePress,
-    onFinish,
-    onParticipantsAdded,
-    iouType,
-    action,
-    shouldDisplayTrackExpenseButton,
-}: MoneyRequestParticipantsSelectorProps) {
+function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onFinish, onParticipantsAdded, iouType, action}: MoneyRequestParticipantsSelectorProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
@@ -124,6 +108,9 @@ function MoneyRequestParticipantsSelector({
                 includeInvoiceRooms: iouType === CONST.IOU.TYPE.INVOICE,
                 action,
                 maxRecentReportsToShow: 0,
+                shouldSeparateSelfDMChat: true,
+                shouldSeparateWorkspaceChat: true,
+                includeSelfDM: true,
             },
         );
 
@@ -146,6 +133,8 @@ function MoneyRequestParticipantsSelector({
                 personalDetails: [],
                 currentUserOption: null,
                 headerMessage: '',
+                recentWorkspaceChats: [],
+                selfDMChat: null,
             };
         }
 
@@ -181,6 +170,17 @@ function MoneyRequestParticipantsSelector({
 
         newSections.push(formatResults.section);
 
+        newSections.push({
+            title: translate('workspace.common.workspace'),
+            data: chatOptions.recentWorkspaceChats ?? [],
+            shouldShow: (chatOptions.recentWorkspaceChats ?? []).length > 0,
+        });
+        newSections.push({
+            title: translate('workspace.invoices.paymentMethods.personal'),
+            data: chatOptions.selfDMChat ? [chatOptions.selfDMChat] : [],
+            shouldShow: !!chatOptions.selfDMChat,
+        });
+
         newSections.push({
             title: translate('common.recents'),
             data: chatOptions.recentReports,
@@ -222,6 +222,8 @@ function MoneyRequestParticipantsSelector({
         participants,
         chatOptions.recentReports,
         chatOptions.personalDetails,
+        chatOptions.selfDMChat,
+        chatOptions.recentWorkspaceChats,
         chatOptions.userToInvite,
         personalDetails,
         translate,
@@ -237,7 +239,7 @@ function MoneyRequestParticipantsSelector({
         (option: Participant) => {
             const newParticipants: Participant[] = [
                 {
-                    ...lodashPick(option, 'accountID', 'login', 'isPolicyExpenseChat', 'reportID', 'searchText', 'policyID'),
+                    ...lodashPick(option, 'accountID', 'login', 'isPolicyExpenseChat', 'reportID', 'searchText', 'policyID', 'isSelfDM'),
                     selected: true,
                     iouType,
                 },
@@ -254,7 +256,10 @@ function MoneyRequestParticipantsSelector({
             }
 
             onParticipantsAdded(newParticipants);
-            onFinish();
+
+            if (!option.isSelfDM) {
+                onFinish();
+            }
         },
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want to trigger this callback when iouType changes
         [onFinish, onParticipantsAdded, currentUserLogin],
@@ -347,22 +352,6 @@ function MoneyRequestParticipantsSelector({
 
     const shouldShowReferralBanner = !isDismissed && iouType !== CONST.IOU.TYPE.INVOICE && !shouldShowListEmptyContent;
 
-    const headerContent = useMemo(() => {
-        if (!shouldDisplayTrackExpenseButton) {
-            return;
-        }
-
-        // We only display the track expense button if the user is coming from the combined submit/track flow.
-        return (
-            <MenuItem
-                title={translate('iou.justTrackIt')}
-                shouldShowRightIcon
-                icon={Expensicons.Coins}
-                onPress={onTrackExpensePress}
-            />
-        );
-    }, [shouldDisplayTrackExpenseButton, translate, onTrackExpensePress]);
-
     const footerContent = useMemo(() => {
         if (isDismissed && !shouldShowSplitBillErrorMessage && !participants.length) {
             return;
@@ -448,7 +437,6 @@ function MoneyRequestParticipantsSelector({
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             onSelectRow={onSelectRow}
             shouldSingleExecuteRowSelect
-            headerContent={headerContent}
             footerContent={footerContent}
             listEmptyContent={<EmptySelectionListContent contentType={iouType} />}
             headerMessage={header}