diff --git a/src/pages/Search/EmptySearchView.tsx b/src/pages/Search/EmptySearchView.tsx index fdba56e7f3db..046fcf4699a8 100644 --- a/src/pages/Search/EmptySearchView.tsx +++ b/src/pages/Search/EmptySearchView.tsx @@ -168,6 +168,16 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps const viewTourReportID = introSelected?.viewTour; const [viewTourReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${viewTourReportID}`, {canBeMissing: true}); + // Default 'Folder' lottie animation, along with its background styles + const defaultViewItemHeader = useMemo( + () => ({ + headerMedia: LottieAnimations.GenericEmptyState, + headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], + lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, + }), + [StyleUtils, styles.emptyStateFolderWebStyles, theme.emptyFolderBG], + ); + const content: EmptySearchViewItem = useMemo(() => { // Begin by going through all of our To-do searches, and returning their empty state // if it exists @@ -202,12 +212,18 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps // If we are grouping by reports, show a custom message rather than a type-specific message if (groupBy === CONST.SEARCH.GROUP_BY.REPORTS) { + if (hasResults) { + return { + ...defaultViewItemHeader, + title: translate('search.searchResults.emptyResults.title'), + subtitle: translate('search.searchResults.emptyResults.subtitle'), + }; + } + return { - headerMedia: LottieAnimations.GenericEmptyState, + ...defaultViewItemHeader, title: translate('search.searchResults.emptyReportResults.title'), subtitle: translate(hasSeenTour ? 'search.searchResults.emptyReportResults.subtitleWithOnlyCreateButton' : 'search.searchResults.emptyReportResults.subtitle'), - headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], - lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, buttons: [ ...(!hasSeenTour ? [ @@ -272,7 +288,7 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps case CONST.SEARCH.DATA_TYPES.EXPENSE: if (!hasResults) { return { - headerMedia: LottieAnimations.GenericEmptyState, + ...defaultViewItemHeader, title: translate('search.searchResults.emptyExpenseResults.title'), subtitle: translate(hasSeenTour ? 'search.searchResults.emptyExpenseResults.subtitleWithOnlyCreateButton' : 'search.searchResults.emptyExpenseResults.subtitle'), buttons: [ @@ -297,8 +313,6 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps success: true, }, ], - headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], - lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, }; } // We want to display the default nothing to show message if there is any filter applied. @@ -306,7 +320,6 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps case CONST.SEARCH.DATA_TYPES.INVOICE: if (!hasResults) { return { - headerMedia: LottieAnimations.GenericEmptyState, title: translate('search.searchResults.emptyInvoiceResults.title'), subtitle: translate(hasSeenTour ? 'search.searchResults.emptyInvoiceResults.subtitleWithOnlyCreateButton' : 'search.searchResults.emptyInvoiceResults.subtitle'), buttons: [ @@ -331,19 +344,16 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps success: true, }, ], - headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], - lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, + ...defaultViewItemHeader, }; } // eslint-disable-next-line no-fallthrough case CONST.SEARCH.DATA_TYPES.CHAT: default: return { - headerMedia: LottieAnimations.GenericEmptyState, + ...defaultViewItemHeader, title: translate('search.searchResults.emptyResults.title'), subtitle: translate('search.searchResults.emptyResults.subtitle'), - headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], - lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, }; } }, [ @@ -354,13 +364,14 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps translate, StyleUtils, theme.todoBG, - theme.emptyFolderBG, theme.travelBG, styles.emptyStateFireworksWebStyles, styles.emptyStateFolderWebStyles, styles.textAlignLeft, styles.tripEmptyStateLottieWebView, introSelected?.choice, + hasResults, + defaultViewItemHeader, hasSeenTour, isBetaEnabled, groupPoliciesWithChatEnabled, @@ -368,7 +379,6 @@ function EmptySearchView({hash, type, groupBy, hasResults}: EmptySearchViewProps activePolicyID, currentUserPersonalDetails, tripViewChildren, - hasResults, shouldRedirectToExpensifyClassic, viewTourReport, viewTourReportID,