[Self-guided tours v1] Add self-guided tours in Search Page Empty State

src/CONST.ts

@@ -753,6 +753,11 @@ const CONST = {
     DELAYED_SUBMISSION_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/reports/Automatically-submit-employee-reports',
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
+    NAVATTIC: {
+        ADMIN_TOUR: 'http://expensify.navattic.com/kh204a7',
+        EMPLOYEE_TOUR: 'http://expensify.navattic.com/35609gb',
+    },
+
     OLDDOT_URLS: {
         ADMIN_POLICIES_URL: 'admin_policies',
         ADMIN_DOMAINS_URL: 'admin_domains',

src/components/EmptyStateComponent/index.tsx

@@ -18,8 +18,7 @@ function EmptyStateComponent({
     SkeletonComponent,
     headerMediaType,
     headerMedia,
-    buttonText,
-    buttonAction,
+    buttons,
     containerStyles,
     title,
     titleStyles,
@@ -99,15 +98,19 @@ function EmptyStateComponent({
                     <View style={shouldUseNarrowLayout ? styles.p5 : styles.p8}>
                         <Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]}>{title}</Text>
                         {typeof subtitle === 'string' ? <Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}>{subtitle}</Text> : subtitle}
-                        {!!buttonText && !!buttonAction && (
-                            <Button
-                                success
-                                onPress={buttonAction}
-                                text={buttonText}
-                                style={[styles.mt5]}
-                                large
-                            />
-                        )}
+                        <View style={[styles.flexRow, styles.gap2, styles.justifyContentCenter]}>
+                            {buttons?.map(({buttonText, buttonAction, success}, index) => (
+                                <Button
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    key={index}
+                                    success={success}
+                                    onPress={buttonAction}
+                                    text={buttonText}
+                                    style={[styles.mt5, styles.w41]}
+                                    large
+                                />
+                            ))}
+                        </View>
                     </View>
                 </View>
             </View>

src/components/EmptyStateComponent/types.ts

@@ -15,8 +15,7 @@ type SharedProps<T> = {
     title: string;
     titleStyles?: StyleProp<TextStyle>;
     subtitle: string | React.ReactNode;
-    buttonText?: string;
-    buttonAction?: () => void;
+    buttons?: Array<{buttonText?: string; buttonAction?: () => void; success?: boolean}>;
     containerStyles?: StyleProp<ViewStyle>;
     headerStyles?: StyleProp<ViewStyle>;
     headerMediaType: T;

src/languages/en.ts

@@ -4244,6 +4244,10 @@ const translations = {
                 title: 'Nothing to show',
                 subtitle: 'Try creating something using the green + button.',
             },
+            emptyExpenseResults: {
+                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.',
+            },
             emptyTripResults: {
                 title: 'No trips to display',
                 subtitle: 'Get started by booking your first trip below.',
@@ -5078,6 +5082,9 @@ const translations = {
             hasMissingInvoiceBankAccount: 'Has missing invoice bank account',
         },
     },
+    emptySearchView: {
+        takeATour: 'Take a tour',
+    },
 };
 
 export default translations satisfies TranslationDeepObject<typeof translations>;

src/languages/es.ts

@@ -4291,6 +4291,10 @@ const translations = {
                 title: 'No hay nada que ver aquí',
                 subtitle: 'Por favor intenta crear algo usando el botón verde.',
             },
+            emptyExpenseResults: {
+                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.',
+            },
             emptyTripResults: {
                 title: 'No tienes viajes',
                 subtitle: 'Reserva tu primer viaje a continuación.',
@@ -5593,6 +5597,9 @@ const translations = {
             hasMissingInvoiceBankAccount: 'Falta la cuenta bancaria de la factura',
         },
     },
+    emptySearchView: {
+        takeATour: 'Take a tour',
+    },
 };
 
 export default translations satisfies TranslationDeepObject<typeof en>;

src/pages/Search/EmptySearchView.tsx

@@ -1,5 +1,6 @@
 import React, {useMemo, useState} from 'react';
 import {Linking, View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import type {FeatureListItem} from '@components/FeatureList';
@@ -13,9 +14,14 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import interceptAnonymousUser from '@libs/interceptAnonymousUser';
+import * as ReportUtils from '@libs/ReportUtils';
 import * as TripsResevationUtils from '@libs/TripReservationUtils';
 import variables from '@styles/variables';
+import * as IOU from '@userActions/IOU';
+import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 
 type EmptySearchViewProps = {
@@ -86,6 +92,9 @@ function EmptySearchView({type}: EmptySearchViewProps) {
         );
     }, [styles, translate, ctaErrorMessage]);
 
+    const [onboardingPurpose] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: (introSelected) => introSelected?.choice});
+    const navatticLink = onboardingPurpose === CONST.SELECTABLE_ONBOARDING_CHOICES.MANAGE_TEAM ? CONST.NAVATTIC.ADMIN_TOUR : CONST.NAVATTIC.EMPLOYEE_TOUR;
+
     const content = useMemo(() => {
         switch (type) {
             case CONST.SEARCH.DATA_TYPES.TRIP:
@@ -96,24 +105,42 @@ function EmptySearchView({type}: EmptySearchViewProps) {
                     title: translate('travel.title'),
                     titleStyles: {...styles.textAlignLeft},
                     subtitle: subtitleComponent,
-                    buttonText: translate('search.searchResults.emptyTripResults.buttonText'),
-                    buttonAction: () => TripsResevationUtils.bookATrip(translate, setCtaErrorMessage, ctaErrorMessage),
+                    buttons: [
+                        {
+                            buttonText: translate('search.searchResults.emptyTripResults.buttonText'),
+                            buttonAction: () => TripsResevationUtils.bookATrip(translate, setCtaErrorMessage, ctaErrorMessage),
+                            success: true,
+                        },
+                    ],
                 };
             case CONST.SEARCH.DATA_TYPES.CHAT:
             case CONST.SEARCH.DATA_TYPES.EXPENSE:
+                return {
+                    headerMedia: LottieAnimations.GenericEmptyState,
+                    headerStyles: [StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)],
+                    title: translate('search.searchResults.emptyExpenseResults.title'),
+                    subtitle: translate('search.searchResults.emptyExpenseResults.subtitle'),
+                    buttons: [
+                        {buttonText: translate('emptySearchView.takeATour'), buttonAction: () => Link.openExternalLink(navatticLink)},
+                        {
+                            buttonText: translate('iou.createExpense'),
+                            buttonAction: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.TYPE.CREATE, ReportUtils.generateReportID())),
+                            success: true,
+                        },
+                    ],
+                    headerContentStyles: styles.emptyStateFolderWebStyles,
+                };
             case CONST.SEARCH.DATA_TYPES.INVOICE:
             default:
                 return {
                     headerMedia: LottieAnimations.GenericEmptyState,
                     headerStyles: [StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)],
                     title: translate('search.searchResults.emptyResults.title'),
                     subtitle: translate('search.searchResults.emptyResults.subtitle'),
-                    buttonText: undefined,
-                    buttonAction: undefined,
                     headerContentStyles: styles.emptyStateFolderWebStyles,
                 };
         }
-    }, [type, StyleUtils, translate, theme, styles, subtitleComponent, ctaErrorMessage]);
+    }, [type, StyleUtils, translate, theme, styles, subtitleComponent, ctaErrorMessage, navatticLink]);
 
     return (
         <EmptyStateComponent
@@ -124,8 +151,7 @@ function EmptySearchView({type}: EmptySearchViewProps) {
             title={content.title}
             titleStyles={content.titleStyles}
             subtitle={content.subtitle}
-            buttonText={content.buttonText}
-            buttonAction={content.buttonAction}
+            buttons={content.buttons}
             headerContentStyles={[styles.h100, styles.w100, content.headerContentStyles]}
             lottieWebViewStyles={styles.emptyStateFolderWebStyles}
         />

src/styles/utils/sizing.ts

@@ -33,6 +33,10 @@ export default {
         width: '25%',
     },
 
+    w41: {
+        width: 164,
+    },
+
     mh100: {
         maxHeight: '100%',
     },