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;