track-expense and submit-expense deep links

.well-known/apple-app-site-association

@@ -91,6 +91,14 @@
                     {
                         "/": "/money2020/*",
                         "comment": "Money 2020"
+                    },
+                    {
+                        "/": "/track-expense/*",
+                        "comment": "Track Expense"
+                    },
+                    {
+                        "/": "/submit-expense/*",
+                        "comment": "Submit Expense"
                     }
                 ]
             }

android/app/src/main/AndroidManifest.xml

@@ -73,6 +73,8 @@
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/send"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/pay"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/money2020"/>
+                <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/track-expense"/>
+                <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/submit-expense"/>
 
                 <!-- Staging URLs -->
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/r"/>
@@ -94,6 +96,8 @@
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/send"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/pay"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/money2020"/>
+                <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/track-expense"/>
+                <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/submit-expense"/>
             </intent-filter>
         </activity>
 

src/ROUTES.ts

@@ -67,6 +67,8 @@ const ROUTES = {
 
     // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated
     CONCIERGE: 'concierge',
+    TRACK_EXPENSE: 'track-expense',
+    SUBMIT_EXPENSE: 'submit-expense',
     FLAG_COMMENT: {
         route: 'flag/:reportID/:reportActionID',
         getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}` as const,

src/SCREENS.ts

@@ -8,6 +8,8 @@ const PROTECTED_SCREENS = {
     HOME: 'Home',
     CONCIERGE: 'Concierge',
     ATTACHMENTS: 'Attachments',
+    TRACK_EXPENSE: 'TrackExpense',
+    SUBMIT_EXPENSE: 'SubmitExpense',
 } as const;
 
 const SCREENS = {

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -74,6 +74,8 @@ const loadReportAttachments = () => require<ReactComponentModule>('../../../page
 const loadValidateLoginPage = () => require<ReactComponentModule>('../../../pages/ValidateLoginPage').default;
 const loadLogOutPreviousUserPage = () => require<ReactComponentModule>('../../../pages/LogOutPreviousUserPage').default;
 const loadConciergePage = () => require<ReactComponentModule>('../../../pages/ConciergePage').default;
+const loadTrackExpensePage = () => require<ReactComponentModule>('../../../pages/TrackExpensePage').default;
+const loadSubmitExpensePage = () => require<ReactComponentModule>('../../../pages/SubmitExpensePage').default;
 const loadProfileAvatar = () => require<ReactComponentModule>('../../../pages/settings/Profile/ProfileAvatar').default;
 const loadWorkspaceAvatar = () => require<ReactComponentModule>('../../../pages/workspace/WorkspaceAvatar').default;
 const loadReportAvatar = () => require<ReactComponentModule>('../../../pages/ReportAvatar').default;
@@ -375,6 +377,16 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                         options={defaultScreenOptions}
                         getComponent={loadConciergePage}
                     />
+                    <RootStack.Screen
+                        name={SCREENS.TRACK_EXPENSE}
+                        options={defaultScreenOptions}
+                        getComponent={loadTrackExpensePage}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.SUBMIT_EXPENSE}
+                        options={defaultScreenOptions}
+                        getComponent={loadSubmitExpensePage}
+                    />
                     <RootStack.Screen
                         name={SCREENS.ATTACHMENTS}
                         options={{

src/libs/Navigation/linkingConfig/config.ts

@@ -17,6 +17,8 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
         [SCREENS.TRANSITION_BETWEEN_APPS]: ROUTES.TRANSITION_BETWEEN_APPS,
         [SCREENS.CONNECTION_COMPLETE]: ROUTES.CONNECTION_COMPLETE,
         [SCREENS.CONCIERGE]: ROUTES.CONCIERGE,
+        [SCREENS.TRACK_EXPENSE]: ROUTES.TRACK_EXPENSE,
+        [SCREENS.SUBMIT_EXPENSE]: ROUTES.SUBMIT_EXPENSE,
         [SCREENS.SIGN_IN_WITH_APPLE_DESKTOP]: ROUTES.APPLE_SIGN_IN,
         [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: ROUTES.GOOGLE_SIGN_IN,
         [SCREENS.SAML_SIGN_IN]: ROUTES.SAML_SIGN_IN,

src/libs/Navigation/types.ts

@@ -1224,6 +1224,8 @@ type PublicScreensParamList = SharedScreensParamList & {
 type AuthScreensParamList = CentralPaneScreensParamList &
     SharedScreensParamList & {
         [SCREENS.CONCIERGE]: undefined;
+        [SCREENS.TRACK_EXPENSE]: undefined;
+        [SCREENS.SUBMIT_EXPENSE]: undefined;
         [SCREENS.ATTACHMENTS]: {
             reportID: string;
             source: string;

src/pages/SubmitExpensePage.tsx

@@ -0,0 +1,56 @@
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
+import interceptAnonymousUser from '@libs/interceptAnonymousUser';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as App from '@userActions/App';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+
+/*
+ * This is a "utility page", that does this:
+ *     - If the user is authenticated, start Submit Expense
+ *     - Else re-route to the login page
+ */
+function SubmitExpensePage() {
+    const styles = useThemeStyles();
+    const isUnmounted = useRef(false);
+
+    useFocusEffect(() => {
+        interceptAnonymousUser(() => {
+            App.confirmReadyToOpenApp();
+            Navigation.isNavigationReady().then(() => {
+                if (isUnmounted.current) {
+                    return;
+                }
+                Navigation.goBack();
+                IOU.startMoneyRequest(CONST.IOU.TYPE.SUBMIT, ReportUtils.generateReportID());
+            });
+        });
+    });
+
+    useEffect(
+        () => () => {
+            isUnmounted.current = true;
+        },
+        [],
+    );
+
+    return (
+        <ScreenWrapper testID={SubmitExpensePage.displayName}>
+            <View style={[styles.borderBottom]}>
+                <ReportHeaderSkeletonView onBackButtonPress={Navigation.goBack} />
+            </View>
+            <ReportActionsSkeletonView />
+        </ScreenWrapper>
+    );
+}
+
+SubmitExpensePage.displayName = 'SubmitExpensePage';
+
+export default SubmitExpensePage;

src/pages/TrackExpensePage.tsx

@@ -0,0 +1,72 @@
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import interceptAnonymousUser from '@libs/interceptAnonymousUser';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as App from '@userActions/App';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+/*
+ * This is a "utility page", that does this:
+ *     - If the user is authenticated, find their self DM and and start a Track Expense
+ *     - Else re-route to the login page
+ */
+function TrackExpensePage() {
+    const styles = useThemeStyles();
+    const isUnmounted = useRef(false);
+    const {isOffline} = useNetwork();
+    const [hasSeenTrackTraining] = useOnyx(ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING);
+
+    useFocusEffect(() => {
+        interceptAnonymousUser(() => {
+            App.confirmReadyToOpenApp();
+            Navigation.isNavigationReady().then(() => {
+                if (isUnmounted.current) {
+                    return;
+                }
+                Navigation.goBack();
+                IOU.startMoneyRequest(
+                    CONST.IOU.TYPE.TRACK,
+                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                    ReportUtils.findSelfDMReportID() || ReportUtils.generateReportID(),
+                );
+
+                if (!hasSeenTrackTraining && !isOffline) {
+                    setTimeout(() => {
+                        Navigation.navigate(ROUTES.TRACK_TRAINING_MODAL);
+                    }, CONST.ANIMATED_TRANSITION);
+                }
+            });
+        });
+    });
+
+    useEffect(
+        () => () => {
+            isUnmounted.current = true;
+        },
+        [],
+    );
+
+    return (
+        <ScreenWrapper testID={TrackExpensePage.displayName}>
+            <View style={[styles.borderBottom]}>
+                <ReportHeaderSkeletonView onBackButtonPress={Navigation.goBack} />
+            </View>
+            <ReportActionsSkeletonView />
+        </ScreenWrapper>
+    );
+}
+
+TrackExpensePage.displayName = 'TrackExpensePage';
+
+export default TrackExpensePage;