Merge pull request Expensify#52059 from FitseTLT/fix-empty-search-view

Fix - Search - When plenty of expenses are created already, haven't created expenses message shown
mollfpr · Dec 6, 2024 · 34f3e8a · 34f3e8a
2 parents 0973428 + 4eb86b4
commit 34f3e8a
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 36 deletions.
diff --git 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 (
             <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
-                <EmptySearchView type={type} />
+                <EmptySearchView
+                    type={type}
+                    hasResults={searchResults.search.hasResults}
+                />
             </View>
         );
     }

diff --git 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
@@ -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
@@ -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
@@ -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;