feat: Troubleshooting page & resetting Onyx state

src/ROUTES.ts

@@ -148,6 +148,7 @@ const ROUTES = {
     SETTINGS_STATUS_CLEAR_AFTER: 'settings/profile/status/clear-after',
     SETTINGS_STATUS_CLEAR_AFTER_DATE: 'settings/profile/status/clear-after/date',
     SETTINGS_STATUS_CLEAR_AFTER_TIME: 'settings/profile/status/clear-after/time',
+    SETTINGS_TROUBLESHOOTING: 'settings/troubleshooting',
 
     KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
 

src/SCREENS.ts

@@ -33,6 +33,7 @@ const SCREENS = {
         CLOSE: 'Settings_Close',
         TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth',
         REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',
+        TROUBLESHOOTING: 'Settings_Troubleshooting',
 
         PROFILE: {
             ROOT: 'Settings_Profile',

src/components/Icon/Expensicons.ts

@@ -47,6 +47,7 @@ import Download from '@assets/images/download.svg';
 import DragAndDrop from '@assets/images/drag-and-drop.svg';
 import DragHandles from '@assets/images/drag-handles.svg';
 import Emoji from '@assets/images/emoji.svg';
+import Lightbulb from '@assets/images/emojiCategoryIcons/light-bulb.svg';
 import EmptyStateAttachReceipt from '@assets/images/empty-state__attach-receipt.svg';
 import EmptyStateRoutePending from '@assets/images/emptystate__routepending.svg';
 import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
@@ -270,4 +271,5 @@ export {
     Instagram,
     ChatBubbleAdd,
     ChatBubbleUnread,
+    Lightbulb,
 };

src/components/LottieAnimations/index.tsx

@@ -62,6 +62,11 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         w: 375,
         h: 240,
     },
+    Desk: {
+        file: require('@assets/animations/Desk.lottie'),
+        w: 375,
+        h: 240,
+    },
 };
 
 export default DotLottieAnimations;

src/languages/en.ts

@@ -789,6 +789,7 @@ export default {
             viewTheCode: 'View the code',
             viewOpenJobs: 'View open jobs',
             reportABug: 'Report a bug',
+            troubleshooting: 'Troubleshoot',
         },
         appDownloadLinks: {
             android: {
@@ -801,6 +802,12 @@ export default {
                 label: 'macOS',
             },
         },
+        troubleshooting: {
+            resetAndRefresh: 'Reset and refresh stashed data',
+            viewConsole: 'View debug console',
+            description: 'Use the tools below to help troubleshoot the Expensify experience. If you encounter any issues, please',
+            submitBug: 'submit a bug',
+        },
         goToExpensifyClassic: 'Go to Expensify Classic',
         security: 'Security',
         signOut: 'Sign out',

src/languages/es.ts

@@ -783,6 +783,7 @@ export default {
             viewTheCode: 'Ver código',
             viewOpenJobs: 'Ver trabajos disponibles',
             reportABug: 'Reportar un error',
+            troubleshooting: 'Solución de problemas',
         },
         appDownloadLinks: {
             android: {
@@ -795,6 +796,12 @@ export default {
                 label: 'macOS',
             },
         },
+        troubleshooting: {
+            resetAndRefresh: 'Restablecer y actualizar los datos almacenados',
+            viewConsole: 'Ver la consola de depuración',
+            description: 'Utilice las herramientas que aparecen a continuación para solucionar los problemas de Expensify. Si tiene algún problema, por favor',
+            submitBug: 'envíe un error',
+        },
         security: 'Seguridad',
         signOut: 'Desconectar',
         signOutConfirmationText: 'Si cierras sesión perderás los cambios hechos mientras estabas desconectado',

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -206,6 +206,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType,
     [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require('../../../pages/settings/AppDownloadLinks').default as React.ComponentType,
     [SCREENS.SETTINGS.LOUNGE_ACCESS]: () => require('../../../pages/settings/Profile/LoungeAccessPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.TROUBLESHOOTING]: () => require('../../../pages/settings/AboutPage/TroubleshootingPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig.ts

@@ -231,6 +231,10 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
                             [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_TIME]: {
                                 path: ROUTES.SETTINGS_STATUS_CLEAR_AFTER_TIME,
                             },
+                            [SCREENS.SETTINGS.TROUBLESHOOTING]: {
+                                path: ROUTES.SETTINGS_TROUBLESHOOTING,
+                                exact: true,
+                            },
                             [SCREENS.WORKSPACE.INITIAL]: {
                                 path: ROUTES.WORKSPACE_INITIAL.route,
                             },

src/pages/settings/AboutPage/AboutPage.tsx

@@ -83,6 +83,11 @@ function AboutPage() {
                 },
                 link: CONST.UPWORK_URL,
             },
+            {
+                translationKey: 'initialSettingsPage.aboutPage.troubleshooting',
+                icon: Expensicons.Lightbulb,
+                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_TROUBLESHOOTING)),
+            },
             {
                 translationKey: 'initialSettingsPage.aboutPage.reportABug',
                 icon: Expensicons.Bug,

src/pages/settings/AboutPage/TroubleshootingPage.tsx

@@ -0,0 +1,105 @@
+import React, {useCallback, useMemo} from 'react';
+import {View} from 'react-native';
+import Onyx from 'react-native-onyx';
+import type {SvgProps} from 'react-native-svg';
+import * as Expensicons from '@components/Icon/Expensicons';
+import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
+import LottieAnimations from '@components/LottieAnimations';
+import MenuItemList from '@components/MenuItemList';
+import TestToolMenu from '@components/TestToolMenu';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useEnvironment from '@hooks/useEnvironment';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import * as App from '@userActions/App';
+import * as Report from '@userActions/Report';
+import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {OnyxKey} from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+
+const keysToPreserve: OnyxKey[] = [
+    ONYXKEYS.ACCOUNT,
+    ONYXKEYS.IS_CHECKING_PUBLIC_ROOM,
+    ONYXKEYS.IS_LOADING_APP,
+    ONYXKEYS.IS_SIDEBAR_LOADED,
+    ONYXKEYS.MODAL,
+    ONYXKEYS.NETWORK,
+    ONYXKEYS.SESSION,
+    ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
+    ONYXKEYS.NVP_TRY_FOCUS_MODE,
+];
+
+type BaseMenuItem = {
+    translationKey: TranslationPaths;
+    icon: React.FC<SvgProps>;
+    action: () => void;
+};
+
+function TroubleshootingPage() {
+    const {translate} = useLocalize();
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {isProduction} = useEnvironment();
+
+    const wipeOnyxData = useCallback(() => {
+        Onyx.clear(keysToPreserve).then(() => {
+            App.openApp();
+        });
+    }, []);
+
+    const menuItems = useMemo(() => {
+        const baseMenuItems: BaseMenuItem[] = [
+            {
+                translationKey: 'initialSettingsPage.troubleshooting.resetAndRefresh',
+                icon: Expensicons.RotateLeft,
+                action: wipeOnyxData,
+            },
+        ];
+
+        return baseMenuItems.map((item) => ({
+            key: item.translationKey,
+            title: translate(item.translationKey),
+            icon: item.icon,
+            onPress: item.action,
+        }));
+    }, [translate, wipeOnyxData]);
+
+    return (
+        <IllustratedHeaderPageLayout
+            title={translate('initialSettingsPage.aboutPage.troubleshooting')}
+            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOTING].backgroundColor}
+            illustration={LottieAnimations.Desk}
+        >
+            <View style={[styles.settingsPageBody, styles.ph5]}>
+                <Text style={[styles.textHeadline, styles.mb1]}>{translate('initialSettingsPage.aboutPage.troubleshooting')}</Text>
+                <Text style={styles.mb4}>
+                    <Text>{translate('initialSettingsPage.troubleshooting.description')}</Text>{' '}
+                    <TextLink
+                        style={styles.link}
+                        onPress={() => Report.navigateToConciergeChat()}
+                    >
+                        {translate('initialSettingsPage.troubleshooting.submitBug')}
+                    </TextLink>
+                </Text>
+            </View>
+            <MenuItemList
+                menuItems={menuItems}
+                shouldUseSingleExecution
+            />
+            {/* Enable additional test features in non-production environments */}
+            {!isProduction && (
+                <View style={[styles.ml5, styles.mr8, styles.mt6]}>
+                    <TestToolMenu />
+                </View>
+            )}
+        </IllustratedHeaderPageLayout>
+    );
+}
+
+export default TroubleshootingPage;

src/pages/settings/Preferences/PreferencesPage.js

@@ -7,9 +7,7 @@ import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Switch from '@components/Switch';
-import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
-import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -43,7 +41,6 @@ const defaultProps = {
 function PreferencesPage(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {isProduction} = useEnvironment();
     const {translate, preferredLocale} = useLocalize();
 
     return (
@@ -90,12 +87,6 @@ function PreferencesPage(props) {
                     description={translate('themePage.theme')}
                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
                 />
-                {/* Enable additional test features in non-production environments */}
-                {!isProduction && (
-                    <View style={[styles.ml5, styles.mr8, styles.mt6]}>
-                        <TestToolMenu />
-                    </View>
-                )}
             </View>
         </IllustratedHeaderPageLayout>
     );

src/styles/theme/themes/dark.ts

@@ -126,6 +126,10 @@ const darkTheme = {
             backgroundColor: colors.productDark200,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.SETTINGS.TROUBLESHOOTING]: {
+            backgroundColor: colors.blue700,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
         [SCREENS.SETTINGS.ABOUT]: {
             backgroundColor: colors.yellow600,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,

src/styles/theme/themes/light.ts

@@ -130,6 +130,10 @@ const lightTheme = {
             backgroundColor: colors.yellow600,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.SETTINGS.TROUBLESHOOTING]: {
+            backgroundColor: colors.blue700,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
         [SCREENS.REFERRAL_DETAILS]: {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,