diff --git a/assets/images/connection-complete.svg b/assets/images/connection-complete.svg
new file mode 100644
index 000000000000..fbfb2b041358
--- /dev/null
+++ b/assets/images/connection-complete.svg
@@ -0,0 +1,330 @@
+
+
+
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 6e69d2d4e53f..64c59283d41d 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -55,6 +55,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),
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 725cab85f12b..f5a1e1017e2c 100644
--- a/src/SCREENS.ts
+++ b/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',
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index 822ae0a04a42..22117652c5f9 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -42,6 +42,7 @@ import Coins from '@assets/images/coins.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';
@@ -201,6 +202,7 @@ export {
Concierge,
ConciergeAvatar,
Connect,
+ ConnectionComplete,
Copy,
CreditCard,
DeletedRoomAvatar,
diff --git a/src/languages/en.ts b/src/languages/en.ts
index d8b012f3fe46..1f7f1915870b 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -359,6 +359,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',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 1a33e523f88a..9ecada16e0b8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -320,6 +320,10 @@ export default {
type: 'Tipo',
action: 'Acción',
},
+ 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.',
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index cacf0607fae5..e5fee6805c79 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -17,6 +17,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';
@@ -401,6 +402,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
getComponent={loadReceiptView}
listeners={modalScreenListeners}
/>
+
diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.tsx b/src/libs/Navigation/AppNavigator/PublicScreens.tsx
index 6b1557994627..faf6563a0ef3 100644
--- a/src/libs/Navigation/AppNavigator/PublicScreens.tsx
+++ b/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}
/>
+
['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,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index cf999631a803..2f8d66794bd5 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -813,6 +813,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 & {
@@ -847,6 +848,7 @@ type AuthScreensParamList = SharedScreensParamList & {
reportID: string;
transactionID: string;
};
+ [SCREENS.CONNECTION_COMPLETE]: undefined;
};
type SearchReportParamList = {
diff --git a/src/pages/ConnectionCompletePage.tsx b/src/pages/ConnectionCompletePage.tsx
new file mode 100644
index 000000000000..f41fa1dc3686
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {translate('connectionComplete.title')}
+
+ {translate('connectionComplete.supportingText')}
+
+
+
+
+
+
+ );
+}
+
+ConnectionCompletePage.displayName = 'ConnectionCompletePage';
+
+export default ConnectionCompletePage;