diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 1eb916acd2df..07f23a96424d 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -343,7 +343,10 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo if (shouldShowEmptyState) { return ( - + ); } diff --git a/src/languages/en.ts b/src/languages/en.ts index c7526a8d2c6b..0cab2b81bf99 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -4536,6 +4536,10 @@ const translations = { title: "You haven't created any expenses yet", subtitle: 'Use the green button below to create an expense or take a tour of Expensify to learn more.', }, + emptyInvoiceResults: { + title: "You haven't created any \ninvoices yet", + subtitle: 'Use the green button below to send an invoice or take a tour of Expensify to learn more.', + }, emptyTripResults: { title: 'No trips to display', subtitle: 'Get started by booking your first trip below.', diff --git a/src/languages/es.ts b/src/languages/es.ts index c860a4cd00b7..c56a8e02c6b9 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -4585,6 +4585,10 @@ const translations = { title: 'Aún no has creado ningún gasto', subtitle: 'Usa el botón verde de abajo para crear un gasto o haz un tour por Expensify para aprender más.', }, + emptyInvoiceResults: { + title: 'Aún no has creado \nninguna factura', + subtitle: 'Usa el botón verde de abajo para crear una factura o haz un tour por Expensify para aprender más.', + }, emptyTripResults: { title: 'No tienes viajes', subtitle: 'Reserva tu primer viaje a continuación.', diff --git a/src/pages/Search/EmptySearchView.tsx b/src/pages/Search/EmptySearchView.tsx index a77363375caf..16d72818f936 100644 --- a/src/pages/Search/EmptySearchView.tsx +++ b/src/pages/Search/EmptySearchView.tsx @@ -35,6 +35,7 @@ import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; type EmptySearchViewProps = { type: SearchDataTypes; + hasResults: boolean; }; const tripsFeatures: FeatureListItem[] = [ @@ -48,7 +49,7 @@ const tripsFeatures: FeatureListItem[] = [ }, ]; -function EmptySearchView({type}: EmptySearchViewProps) { +function EmptySearchView({type, hasResults}: EmptySearchViewProps) { const theme = useTheme(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -135,41 +136,81 @@ function EmptySearchView({type}: EmptySearchViewProps) { lottieWebViewStyles: {backgroundColor: theme.travelBG, ...styles.emptyStateFolderWebStyles}, }; case CONST.SEARCH.DATA_TYPES.EXPENSE: - return { - headerMedia: LottieAnimations.GenericEmptyState, - title: translate('search.searchResults.emptyExpenseResults.title'), - subtitle: translate('search.searchResults.emptyExpenseResults.subtitle'), - buttons: [ - ...(!hasSeenTour - ? [ - { - buttonText: translate('emptySearchView.takeATour'), - buttonAction: () => { - Link.openExternalLink(navatticURL); - Welcome.setSelfTourViewed(); - Task.completeTask(viewTourTaskReport); + if (!hasResults) { + return { + headerMedia: LottieAnimations.GenericEmptyState, + title: translate('search.searchResults.emptyExpenseResults.title'), + subtitle: translate('search.searchResults.emptyExpenseResults.subtitle'), + buttons: [ + ...(!hasSeenTour + ? [ + { + buttonText: translate('emptySearchView.takeATour'), + buttonAction: () => { + Link.openExternalLink(navatticURL); + Welcome.setSelfTourViewed(); + Task.completeTask(viewTourTaskReport); + }, }, - }, - ] - : []), - { - buttonText: translate('iou.createExpense'), - buttonAction: () => - interceptAnonymousUser(() => { - if (shouldRedirectToExpensifyClassic) { - setModalVisible(true); - return; - } - IOU.startMoneyRequest(CONST.IOU.TYPE.CREATE, ReportUtils.generateReportID()); - }), - success: true, - }, - ], - headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], - lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, - }; - case CONST.SEARCH.DATA_TYPES.CHAT: + ] + : []), + { + buttonText: translate('iou.createExpense'), + buttonAction: () => + interceptAnonymousUser(() => { + if (shouldRedirectToExpensifyClassic) { + setModalVisible(true); + return; + } + IOU.startMoneyRequest(CONST.IOU.TYPE.CREATE, ReportUtils.generateReportID()); + }), + 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. + // eslint-disable-next-line no-fallthrough case CONST.SEARCH.DATA_TYPES.INVOICE: + if (!hasResults) { + return { + headerMedia: LottieAnimations.GenericEmptyState, + title: translate('search.searchResults.emptyInvoiceResults.title'), + subtitle: translate('search.searchResults.emptyInvoiceResults.subtitle'), + buttons: [ + ...(!hasSeenTour + ? [ + { + buttonText: translate('emptySearchView.takeATour'), + buttonAction: () => { + Link.openExternalLink(navatticURL); + Welcome.setSelfTourViewed(); + Task.completeTask(viewTourTaskReport); + }, + }, + ] + : []), + { + buttonText: translate('workspace.invoices.sendInvoice'), + buttonAction: () => + interceptAnonymousUser(() => { + if (shouldRedirectToExpensifyClassic) { + setModalVisible(true); + return; + } + IOU.startMoneyRequest(CONST.IOU.TYPE.INVOICE, ReportUtils.generateReportID()); + }), + success: true, + }, + ], + headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)], + lottieWebViewStyles: {backgroundColor: theme.emptyFolderBG, ...styles.emptyStateFolderWebStyles}, + }; + } + // eslint-disable-next-line no-fallthrough + case CONST.SEARCH.DATA_TYPES.CHAT: default: return { headerMedia: LottieAnimations.GenericEmptyState, @@ -191,8 +232,9 @@ function EmptySearchView({type}: EmptySearchViewProps) { hasSeenTour, ctaErrorMessage, navatticURL, - viewTourTaskReport, shouldRedirectToExpensifyClassic, + hasResults, + viewTourTaskReport, ]); return ( diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts index bd5502e76a5f..9a72574ab0a7 100644 --- a/src/types/onyx/SearchResults.ts +++ b/src/types/onyx/SearchResults.ts @@ -54,6 +54,10 @@ type SearchResultsInfo = { /** Whether the user can fetch more search results */ hasMoreResults: boolean; + /** Whether the user has any valid data on the current search type, for instance, + * whether they have created any invoice yet when the search type is invoice */ + hasResults: boolean; + /** Whether the search results are currently loading */ isLoading: boolean;