Add "Connection Complete" page

src/ROUTES.ts

@@ -44,6 +44,7 @@ const ROUTES = {
 
     TRANSITION_BETWEEN_APPS: 'transition',
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
+    CONNECTION_COMPLETE: 'connection-complete',
     GET_ASSISTANCE: {
         route: 'get-assistance/:taskID',
         getRoute: (taskID: string, backTo: string) => getUrlWithBackToParam(`get-assistance/${taskID}`, backTo),

src/SCREENS.ts

@@ -20,6 +20,7 @@ const SCREENS = {
     NOT_FOUND: 'not-found',
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
     VALIDATE_LOGIN: 'ValidateLogin',
+    CONNECTION_COMPLETE: 'ConnectionComplete',
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane',

src/components/Icon/Expensicons.ts

@@ -40,6 +40,7 @@ import ClosedSign from '@assets/images/closed-sign.svg';
 import Collapse from '@assets/images/collapse.svg';
 import Concierge from '@assets/images/concierge.svg';
 import Connect from '@assets/images/connect.svg';
+import ConnectionComplete from '@assets/images/connection-complete.svg';
 import Copy from '@assets/images/copy.svg';
 import CreditCard from '@assets/images/creditcard.svg';
 import DocumentPlus from '@assets/images/document-plus.svg';
@@ -197,6 +198,7 @@ export {
     Concierge,
     ConciergeAvatar,
     Connect,
+    ConnectionComplete,
     Copy,
     CreditCard,
     DeletedRoomAvatar,

src/languages/en.ts

@@ -351,6 +351,10 @@ export default {
         folderNotAllowedMessage: 'Uploading a folder is not allowed. Try a different file.',
         protectedPDFNotSupported: 'Password-protected PDF is not supported',
     },
+    connectionComplete: {
+        title: 'Connection Complete',
+        supportingText: 'You can close this window and head back to the Expensify app.',
+    },
     avatarCropModal: {
         title: 'Edit photo',
         description: 'Drag, zoom, and rotate your image to your preferred specifications',

src/languages/es.ts

@@ -312,6 +312,10 @@ export default {
             subtitleText3: '.',
         },
     },
+    connectionComplete: {
+        title: 'Conexión Completa',
+        supportingText: 'Ya puedes cerrar esta página y volver a la App de Expensify.',
+    },
     location: {
         useCurrent: 'Usar ubicación actual',
         notFound: 'No pudimos encontrar tu ubicación, inténtalo de nuevo o introduce una dirección manualmente.',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -16,6 +16,7 @@ import NetworkConnection from '@libs/NetworkConnection';
 import * as Pusher from '@libs/Pusher/pusher';
 import PusherConnectionManager from '@libs/PusherConnectionManager';
 import * as SessionUtils from '@libs/SessionUtils';
+import ConnectionCompletePage from '@pages/ConnectionCompletePage';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
 import SearchInputManager from '@pages/workspace/SearchInputManager';
@@ -390,6 +391,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                         getComponent={loadReceiptView}
                         listeners={modalScreenListeners}
                     />
+                    <RootStack.Screen
+                        name={SCREENS.CONNECTION_COMPLETE}
+                        options={defaultScreenOptions}
+                        component={ConnectionCompletePage}
+                    />
                 </RootStack.Navigator>
             </View>
         </OptionsListContextProvider>

src/libs/Navigation/AppNavigator/PublicScreens.tsx

@@ -1,6 +1,7 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import type {PublicScreensParamList} from '@navigation/types';
+import ConnectionCompletePage from '@pages/ConnectionCompletePage';
 import LogInWithShortLivedAuthTokenPage from '@pages/LogInWithShortLivedAuthTokenPage';
 import AppleSignInDesktopPage from '@pages/signin/AppleSignInDesktopPage';
 import GoogleSignInDesktopPage from '@pages/signin/GoogleSignInDesktopPage';
@@ -33,6 +34,11 @@ function PublicScreens() {
                 options={defaultScreenOptions}
                 component={ValidateLoginPage}
             />
+            <RootStack.Screen
+                name={SCREENS.CONNECTION_COMPLETE}
+                options={defaultScreenOptions}
+                component={ConnectionCompletePage}
+            />
             <RootStack.Screen
                 name={SCREENS.UNLINK_LOGIN}
                 options={defaultScreenOptions}

src/libs/Navigation/linkingConfig/config.ts

@@ -13,6 +13,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
         [SCREENS.VALIDATE_LOGIN]: ROUTES.VALIDATE_LOGIN,
         [SCREENS.UNLINK_LOGIN]: ROUTES.UNLINK_LOGIN,
         [SCREENS.TRANSITION_BETWEEN_APPS]: ROUTES.TRANSITION_BETWEEN_APPS,
+        [SCREENS.CONNECTION_COMPLETE]: ROUTES.CONNECTION_COMPLETE,
         [SCREENS.CONCIERGE]: ROUTES.CONCIERGE,
         [SCREENS.SIGN_IN_WITH_APPLE_DESKTOP]: ROUTES.APPLE_SIGN_IN,
         [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: ROUTES.GOOGLE_SIGN_IN,

src/libs/Navigation/types.ts

@@ -755,6 +755,7 @@ type PublicScreensParamList = SharedScreensParamList & {
     [SCREENS.SIGN_IN_WITH_APPLE_DESKTOP]: undefined;
     [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: undefined;
     [SCREENS.SAML_SIGN_IN]: undefined;
+    [SCREENS.CONNECTION_COMPLETE]: undefined;
 };
 
 type AuthScreensParamList = SharedScreensParamList & {
@@ -788,6 +789,7 @@ type AuthScreensParamList = SharedScreensParamList & {
         reportID: string;
         transactionID: string;
     };
+    [SCREENS.CONNECTION_COMPLETE]: undefined;
 };
 
 type RootStackParamList = PublicScreensParamList & AuthScreensParamList & ChatFinderNavigatorParamList;

src/pages/ConnectionCompletePage.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+
+function ConnectionCompletePage() {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    return (
+        <View style={styles.deeplinkWrapperContainer}>
+            <View style={styles.deeplinkWrapperMessage}>
+                <View style={styles.mb2}>
+                    <Icon
+                        width={272}
+                        height={188}
+                        src={Expensicons.ConnectionComplete}
+                    />
+                </View>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('connectionComplete.title')}</Text>
+                <View style={[styles.mt2, styles.mb2, {maxWidth: 280}]}>
+                    <Text style={styles.textAlignCenter}>{translate('connectionComplete.supportingText')}</Text>
+                </View>
+            </View>
+            <View style={styles.deeplinkWrapperFooter}>
+                <Icon
+                    width={variables.modalWordmarkWidth}
+                    height={variables.modalWordmarkHeight}
+                    fill={theme.success}
+                    src={Expensicons.ExpensifyWordmark}
+                />
+            </View>
+        </View>
+    );
+}
+
+ConnectionCompletePage.displayName = 'ConnectionCompletePage';
+
+export default ConnectionCompletePage;