From 96595708cd458dd96aa4f5cd3778c53446989e2c Mon Sep 17 00:00:00 2001 From: c3024 Date: Sat, 21 Sep 2024 11:31:14 +0530 Subject: [PATCH 1/8] improve order of options in submit expense flow --- src/libs/OptionsListUtils.ts | 30 ++++++++++++++++--- .../MoneyRequestParticipantsSelector.tsx | 1 + 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index afedd308371..031bf87d23d 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1571,7 +1571,7 @@ function createOptionFromReport(report: Report, personalDetails: OnyxEntry new Date(option?.lastIOUTime ?? '1970-01-01').getTime() : 0, + preferRecentExpenseReports ? (option) => option?.isPolicyExpenseChat : 0, ], - ['asc'], + ['asc', 'desc', 'desc'], ); } @@ -1978,6 +1986,18 @@ function getOptions( } else { recentReportOptions.push(reportOption); } + + // Add a field to sort the recent reports by the time of last IOU request + if (!!action) { + const iouReportID = reportOption.iouReportID; + if (iouReportID) { + const iouReportActions = allSortedReportActions[iouReportID] ?? []; + const lastIOUAction = iouReportActions.find((iouAction) => iouAction.actionName === "IOU"); + if (lastIOUAction) { + reportOption.lastIOUTime = lastIOUAction.lastModified; + } + } + } // Add this login to the exclude list so it won't appear when we process the personal details if (reportOption.login) { @@ -2027,7 +2047,8 @@ function getOptions( recentReportOptions.push(...personalDetailsOptions); personalDetailsOptions = []; } - recentReportOptions = orderOptions(recentReportOptions, searchValue, {preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action}); + // recentReportOptions = orderOptions(recentReportOptions, searchValue, {preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action}); + recentReportOptions = orderOptions(recentReportOptions, searchValue, {preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action, preferRecentExpenseReports: !!action}); } return { @@ -2391,6 +2412,7 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt excludeLogins = [], preferChatroomsOverThreads = false, preferPolicyExpenseChat = false, + action?, } = config ?? {}; if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) { return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)}; @@ -2472,7 +2494,7 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt return { personalDetails, - recentReports: orderOptions(recentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat}), + recentReports: orderOptions(recentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat, preferRecentExpenseReports: !!action}), userToInvite, currentUserOption: matchResults.currentUserOption, categoryOptions: [], diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index f10575f8c1d..582dfcd6fd5 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -169,6 +169,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF excludeLogins: CONST.EXPENSIFY_EMAILS, maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW, preferPolicyExpenseChat: isPaidGroupPolicy, + action, }); return newOptions; }, [areOptionsInitialized, defaultOptions, debouncedSearchTerm, participants, isPaidGroupPolicy, canUseP2PDistanceRequests, iouRequestType, isCategorizeOrShareAction]); From 1e181070dafce1aca3fa1f9fa7884a173267e282 Mon Sep 17 00:00:00 2001 From: c3024 Date: Sat, 21 Sep 2024 12:34:43 +0530 Subject: [PATCH 2/8] fix type and lint errors --- src/libs/OptionsListUtils.ts | 20 ++++++++++++------- src/libs/ReportUtils.ts | 1 + .../MoneyRequestParticipantsSelector.tsx | 3 +-- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 031bf87d23d..4e327201d09 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -222,6 +222,8 @@ type PreviewConfig = {showChatPreviewLine?: boolean; forcePolicyNamePreview?: bo type FilterOptionsConfig = Pick & { preferChatroomsOverThreads?: boolean; preferPolicyExpenseChat?: boolean; + preferRecentExpenseReports?: boolean; + action?: IOUAction; }; /** @@ -1571,7 +1573,11 @@ function createOptionFromReport(report: Report, personalDetails: OnyxEntry iouAction.actionName === "IOU"); + const lastIOUAction = iouReportActions.find((iouAction) => iouAction.actionName === 'IOU'); if (lastIOUAction) { reportOption.lastIOUTime = lastIOUAction.lastModified; } + } } - } // Add this login to the exclude list so it won't appear when we process the personal details if (reportOption.login) { @@ -2412,7 +2418,7 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt excludeLogins = [], preferChatroomsOverThreads = false, preferPolicyExpenseChat = false, - action?, + action, } = config ?? {}; if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) { return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)}; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 8746490ecd3..a54f05fcaea 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -459,6 +459,7 @@ type OptionData = { tabIndex?: 0 | -1; isConciergeChat?: boolean; isBold?: boolean; + lastIOUTime?: string; } & Report; type OnyxDataTaskAssigneeChat = { diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 582dfcd6fd5..d9ae901b517 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -172,8 +172,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF action, }); return newOptions; - }, [areOptionsInitialized, defaultOptions, debouncedSearchTerm, participants, isPaidGroupPolicy, canUseP2PDistanceRequests, iouRequestType, isCategorizeOrShareAction]); - + }, [areOptionsInitialized, defaultOptions, debouncedSearchTerm, participants, isPaidGroupPolicy, canUseP2PDistanceRequests, iouRequestType, isCategorizeOrShareAction, action]); /** * Returns the sections needed for the OptionsSelector * @returns {Array} From 0d6b7761dc7cb4e1194bcf884d9247d1920f50e4 Mon Sep 17 00:00:00 2001 From: c3024 Date: Sat, 21 Sep 2024 13:45:44 +0530 Subject: [PATCH 3/8] get IOU Report from reportPreviewAction --- src/libs/OptionsListUtils.ts | 10 +++++++--- src/pages/home/ReportScreen.tsx | 1 + .../iou/request/MoneyRequestParticipantsSelector.tsx | 1 + 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 4e327201d09..884d90b6066 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1995,10 +1995,14 @@ function getOptions( // Add a field to sort the recent reports by the time of last IOU request if (action) { - const iouReportID = reportOption.iouReportID; - if (iouReportID) { + const reportPreviewAction = allSortedReportActions[reportOption.reportID]?.find((reportAction) => + ReportActionUtils.isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW), + ); + + if (reportPreviewAction) { + const iouReportID = ReportActionUtils.getIOUReportIDFromReportActionPreview(reportPreviewAction); const iouReportActions = allSortedReportActions[iouReportID] ?? []; - const lastIOUAction = iouReportActions.find((iouAction) => iouAction.actionName === 'IOU'); + const lastIOUAction = iouReportActions.find((iouAction) => iouAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU); if (lastIOUAction) { reportOption.lastIOUTime = lastIOUAction.lastModified; } diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index b8b551a345c..239adf062f5 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -695,6 +695,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro const lastRoute = usePrevious(route); const lastReportActionIDFromRoute = usePrevious(reportActionIDFromRoute); + // Define here because reportActions are recalculated before mount, allowing data to display faster than useEffect can trigger. // If we have cached reportActions, they will be shown immediately. // We aim to display a loader first, then fetch relevant reportActions, and finally show them. diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index d9ae901b517..517a1220318 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -173,6 +173,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF }); return newOptions; }, [areOptionsInitialized, defaultOptions, debouncedSearchTerm, participants, isPaidGroupPolicy, canUseP2PDistanceRequests, iouRequestType, isCategorizeOrShareAction, action]); + /** * Returns the sections needed for the OptionsSelector * @returns {Array} From 39b2172400f4c6ecfc923642137c54792618df6b Mon Sep 17 00:00:00 2001 From: c3024 Date: Sat, 21 Sep 2024 13:57:45 +0530 Subject: [PATCH 4/8] string comparsion and comment --- src/libs/OptionsListUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 884d90b6066..96b692350cf 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1611,7 +1611,8 @@ function orderOptions( // When option.login is an exact match with the search value, returning 0 puts it at the top of the option list return 0; }, - preferRecentExpenseReports ? (option) => new Date(option?.lastIOUTime ?? '1970-01-01').getTime() : 0, + // For Submit Expense flow, prioritze the most recent expense reports and then policy expense chats (without expense requests) + preferRecentExpenseReports ? (option) => option?.lastIOUTime ?? '' : '', preferRecentExpenseReports ? (option) => option?.isPolicyExpenseChat : 0, ], ['asc', 'desc', 'desc'], @@ -2057,7 +2058,6 @@ function getOptions( recentReportOptions.push(...personalDetailsOptions); personalDetailsOptions = []; } - // recentReportOptions = orderOptions(recentReportOptions, searchValue, {preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action}); recentReportOptions = orderOptions(recentReportOptions, searchValue, {preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action, preferRecentExpenseReports: !!action}); } From 3fa7a8f216dd8266fdd77815b0795f29ccf3eecf Mon Sep 17 00:00:00 2001 From: c3024 Date: Mon, 23 Sep 2024 10:07:39 +0530 Subject: [PATCH 5/8] new order only for create action --- src/libs/OptionsListUtils.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 96b692350cf..3ea84688295 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1994,8 +1994,8 @@ function getOptions( recentReportOptions.push(reportOption); } - // Add a field to sort the recent reports by the time of last IOU request - if (action) { + // Add a field to sort the recent reports by the time of last IOU request for create actions + if (action === CONST.IOU.ACTION.CREATE) { const reportPreviewAction = allSortedReportActions[reportOption.reportID]?.find((reportAction) => ReportActionUtils.isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW), ); @@ -2058,7 +2058,11 @@ function getOptions( recentReportOptions.push(...personalDetailsOptions); personalDetailsOptions = []; } - recentReportOptions = orderOptions(recentReportOptions, searchValue, {preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action, preferRecentExpenseReports: !!action}); + recentReportOptions = orderOptions(recentReportOptions, searchValue, { + preferChatroomsOverThreads: true, + preferPolicyExpenseChat: !!action, + preferRecentExpenseReports: action === CONST.IOU.ACTION.CREATE, + }); } return { @@ -2504,7 +2508,7 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt return { personalDetails, - recentReports: orderOptions(recentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat, preferRecentExpenseReports: !!action}), + recentReports: orderOptions(recentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat, preferRecentExpenseReports: action === CONST.IOU.ACTION.CREATE}), userToInvite, currentUserOption: matchResults.currentUserOption, categoryOptions: [], From 277bea763bc845556b5d8d19a6541d0144e31520 Mon Sep 17 00:00:00 2001 From: c3024 Date: Mon, 23 Sep 2024 17:04:03 +0530 Subject: [PATCH 6/8] extract comparison to preferRecentExpenseReports --- src/libs/OptionsListUtils.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 3ea84688295..5a42c42afbb 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1936,6 +1936,8 @@ function getOptions( let recentReportOptions = []; let personalDetailsOptions: ReportUtils.OptionData[] = []; + const preferRecentExpenseReports = action === CONST.IOU.ACTION.CREATE; + if (includeRecentReports) { for (const reportOption of allReportOptions) { /** @@ -1995,7 +1997,7 @@ function getOptions( } // Add a field to sort the recent reports by the time of last IOU request for create actions - if (action === CONST.IOU.ACTION.CREATE) { + if (preferRecentExpenseReports) { const reportPreviewAction = allSortedReportActions[reportOption.reportID]?.find((reportAction) => ReportActionUtils.isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW), ); @@ -2061,7 +2063,7 @@ function getOptions( recentReportOptions = orderOptions(recentReportOptions, searchValue, { preferChatroomsOverThreads: true, preferPolicyExpenseChat: !!action, - preferRecentExpenseReports: action === CONST.IOU.ACTION.CREATE, + preferRecentExpenseReports, }); } From 9c9634e415294dc3b3f62626c72185d5847058bd Mon Sep 17 00:00:00 2001 From: c3024 Date: Mon, 23 Sep 2024 17:38:18 +0530 Subject: [PATCH 7/8] pass boolean instead of action in config --- src/libs/OptionsListUtils.ts | 5 ++--- src/pages/iou/request/MoneyRequestParticipantsSelector.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 5a42c42afbb..35bc10ea5e2 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -223,7 +223,6 @@ type FilterOptionsConfig = Pick 0) { return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)}; @@ -2510,7 +2509,7 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt return { personalDetails, - recentReports: orderOptions(recentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat, preferRecentExpenseReports: action === CONST.IOU.ACTION.CREATE}), + recentReports: orderOptions(recentReports, searchValue, {preferChatroomsOverThreads, preferPolicyExpenseChat, preferRecentExpenseReports}), userToInvite, currentUserOption: matchResults.currentUserOption, categoryOptions: [], diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 517a1220318..9be8635b14e 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -169,7 +169,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF excludeLogins: CONST.EXPENSIFY_EMAILS, maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW, preferPolicyExpenseChat: isPaidGroupPolicy, - action, + preferRecentExpenseReports: action === CONST.IOU.ACTION.CREATE, }); return newOptions; }, [areOptionsInitialized, defaultOptions, debouncedSearchTerm, participants, isPaidGroupPolicy, canUseP2PDistanceRequests, iouRequestType, isCategorizeOrShareAction, action]); From b76fb4555e8390a3cb5f1188aebb36a894172ca8 Mon Sep 17 00:00:00 2001 From: c3024 Date: Thu, 26 Sep 2024 17:27:06 +0530 Subject: [PATCH 8/8] rename variable for better clarity --- src/libs/OptionsListUtils.ts | 8 ++++---- src/libs/ReportUtils.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 35bc10ea5e2..bc122ec5cac 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1588,7 +1588,7 @@ function orderOptions( if (option.isSelfDM) { return 0; } - if (preferRecentExpenseReports && !!option?.lastIOUTime) { + if (preferRecentExpenseReports && !!option?.lastIOUCreationDate) { return 1; } if (preferRecentExpenseReports && option.isPolicyExpenseChat) { @@ -1610,8 +1610,8 @@ function orderOptions( // When option.login is an exact match with the search value, returning 0 puts it at the top of the option list return 0; }, - // For Submit Expense flow, prioritze the most recent expense reports and then policy expense chats (without expense requests) - preferRecentExpenseReports ? (option) => option?.lastIOUTime ?? '' : '', + // For Submit Expense flow, prioritize the most recent expense reports and then policy expense chats (without expense requests) + preferRecentExpenseReports ? (option) => option?.lastIOUCreationDate ?? '' : '', preferRecentExpenseReports ? (option) => option?.isPolicyExpenseChat : 0, ], ['asc', 'desc', 'desc'], @@ -2006,7 +2006,7 @@ function getOptions( const iouReportActions = allSortedReportActions[iouReportID] ?? []; const lastIOUAction = iouReportActions.find((iouAction) => iouAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU); if (lastIOUAction) { - reportOption.lastIOUTime = lastIOUAction.lastModified; + reportOption.lastIOUCreationDate = lastIOUAction.lastModified; } } } diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 8b9dc13f1a6..d118b77b87f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -459,7 +459,7 @@ type OptionData = { tabIndex?: 0 | -1; isConciergeChat?: boolean; isBold?: boolean; - lastIOUTime?: string; + lastIOUCreationDate?: string; } & Report; type OnyxDataTaskAssigneeChat = {