From 3b1040bc9ae23ff7546c0623fe96629cf838d0f7 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Wed, 17 Apr 2024 18:26:50 -0700 Subject: [PATCH 1/6] WIP: Add ConnectionComplete page --- src/ROUTES.ts | 1 + src/SCREENS.ts | 1 + src/languages/en.ts | 5 ++ src/languages/es.ts | 4 ++ .../Navigation/AppNavigator/PublicScreens.tsx | 6 +++ src/libs/Navigation/linkingConfig/config.ts | 1 + src/libs/Navigation/types.ts | 1 + src/pages/ConnectionCompletePage.tsx | 51 +++++++++++++++++++ 8 files changed, 70 insertions(+) create mode 100644 src/pages/ConnectionCompletePage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 7d73d8e55503..ce731f5be7da 100644 --- a/src/ROUTES.ts +++ b/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), diff --git a/src/SCREENS.ts b/src/SCREENS.ts index d474945d332e..b682388d6cf6 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/languages/en.ts b/src/languages/en.ts index ed2587e5e2c6..2a124ffe157e 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -350,6 +350,11 @@ export default { notAllowedExtension: 'This file type is not allowed', folderNotAllowedMessage: 'Uploading a folder is not allowed. Try a different file.', protectedPDFNotSupported: 'Password-protected PDF is not supported', + connectionComplete: 'Connection Complete', + }, + connectionComplete: { + title: 'Connection Complete', + supportingText: 'You can close this window and head back to the Expensify app.', }, avatarCropModal: { title: 'Edit photo', diff --git a/src/languages/es.ts b/src/languages/es.ts index beb654cf0bc4..0bf68c48de59 100644 --- a/src/languages/es.ts +++ b/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.', diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.tsx b/src/libs/Navigation/AppNavigator/PublicScreens.tsx index 6b1557994627..69d5f8214c49 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.tsx +++ b/src/libs/Navigation/AppNavigator/PublicScreens.tsx @@ -8,6 +8,7 @@ import SAMLSignInPage from '@pages/signin/SAMLSignInPage'; import SignInPage from '@pages/signin/SignInPage'; import UnlinkLoginPage from '@pages/UnlinkLoginPage'; import ValidateLoginPage from '@pages/ValidateLoginPage'; +import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import defaultScreenOptions from './defaultScreenOptions'; @@ -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 7dd2f274aa9e..1392ba342186 100644 --- a/src/libs/Navigation/types.ts +++ b/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 & { diff --git a/src/pages/ConnectionCompletePage.tsx b/src/pages/ConnectionCompletePage.tsx new file mode 100644 index 000000000000..47cad9e00750 --- /dev/null +++ b/src/pages/ConnectionCompletePage.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import {View} from 'react-native'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import Lottie from '@components/Lottie'; +import LottieAnimations from '@components/LottieAnimations'; +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; From 471398a14ca8fdad95f8a400a6c729acc4593764 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Wed, 17 Apr 2024 18:33:04 -0700 Subject: [PATCH 2/6] Enable ConnectionComplete screen for authenticated user --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 6 ++++++ src/libs/Navigation/types.ts | 1 + 2 files changed, 7 insertions(+) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 9157d7486c9e..40adf2de889d 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -18,6 +18,7 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as SessionUtils from '@libs/SessionUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; +import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import SearchInputManager from '@pages/workspace/SearchInputManager'; import * as App from '@userActions/App'; import * as Download from '@userActions/Download'; @@ -390,6 +391,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie getComponent={loadReceiptView} listeners={modalScreenListeners} /> + diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 1392ba342186..39fadf9b1ae5 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -789,6 +789,7 @@ type AuthScreensParamList = SharedScreensParamList & { reportID: string; transactionID: string; }; + [SCREENS.CONNECTION_COMPLETE]: undefined; }; type RootStackParamList = PublicScreensParamList & AuthScreensParamList & ChatFinderNavigatorParamList; From dc6f3be18de81ede9f9356d0970432d74f8a27f0 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Thu, 18 Apr 2024 11:17:07 -0700 Subject: [PATCH 3/6] Add ConnectionComplete icon --- assets/images/connection-complete.svg | 330 ++++++++++++++++++++++++++ src/components/Icon/Expensicons.ts | 2 + src/pages/ConnectionCompletePage.tsx | 12 +- 3 files changed, 336 insertions(+), 8 deletions(-) create mode 100644 assets/images/connection-complete.svg 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/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 877e4972a3ec..13b79acf7a06 100644 --- a/src/components/Icon/Expensicons.ts +++ b/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, diff --git a/src/pages/ConnectionCompletePage.tsx b/src/pages/ConnectionCompletePage.tsx index 47cad9e00750..034c771a7366 100644 --- a/src/pages/ConnectionCompletePage.tsx +++ b/src/pages/ConnectionCompletePage.tsx @@ -2,8 +2,6 @@ import React from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import Lottie from '@components/Lottie'; -import LottieAnimations from '@components/LottieAnimations'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; @@ -19,12 +17,10 @@ function ConnectionCompletePage() { - From 18694a48f1693dd9a3f0d45780432c7c2b2b5a60 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Thu, 18 Apr 2024 12:47:26 -0700 Subject: [PATCH 4/6] Fix translation --- src/languages/en.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 2a124ffe157e..6b6c40ca1006 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -350,7 +350,6 @@ export default { notAllowedExtension: 'This file type is not allowed', folderNotAllowedMessage: 'Uploading a folder is not allowed. Try a different file.', protectedPDFNotSupported: 'Password-protected PDF is not supported', - connectionComplete: 'Connection Complete', }, connectionComplete: { title: 'Connection Complete', From 51c0c84d1fd2c157fc41c8f63d7c72356c1462d1 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Thu, 18 Apr 2024 12:57:25 -0700 Subject: [PATCH 5/6] Update image dimensions --- src/pages/ConnectionCompletePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ConnectionCompletePage.tsx b/src/pages/ConnectionCompletePage.tsx index 034c771a7366..e12a1b0d1fd7 100644 --- a/src/pages/ConnectionCompletePage.tsx +++ b/src/pages/ConnectionCompletePage.tsx @@ -18,8 +18,8 @@ function ConnectionCompletePage() { From 3cf796caf8c11b2cb8e4b68d0d1fea3ad2550df4 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Thu, 18 Apr 2024 14:40:02 -0700 Subject: [PATCH 6/6] Prettier --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 2 +- src/libs/Navigation/AppNavigator/PublicScreens.tsx | 2 +- src/pages/ConnectionCompletePage.tsx | 5 +---- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 40adf2de889d..a26977ee6c8c 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -16,9 +16,9 @@ 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 ConnectionCompletePage from '@pages/ConnectionCompletePage'; import SearchInputManager from '@pages/workspace/SearchInputManager'; import * as App from '@userActions/App'; import * as Download from '@userActions/Download'; diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.tsx b/src/libs/Navigation/AppNavigator/PublicScreens.tsx index 69d5f8214c49..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'; @@ -8,7 +9,6 @@ import SAMLSignInPage from '@pages/signin/SAMLSignInPage'; import SignInPage from '@pages/signin/SignInPage'; import UnlinkLoginPage from '@pages/UnlinkLoginPage'; import ValidateLoginPage from '@pages/ValidateLoginPage'; -import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import defaultScreenOptions from './defaultScreenOptions'; diff --git a/src/pages/ConnectionCompletePage.tsx b/src/pages/ConnectionCompletePage.tsx index e12a1b0d1fd7..f41fa1dc3686 100644 --- a/src/pages/ConnectionCompletePage.tsx +++ b/src/pages/ConnectionCompletePage.tsx @@ -8,7 +8,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; - function ConnectionCompletePage() { const theme = useTheme(); const styles = useThemeStyles(); @@ -23,9 +22,7 @@ function ConnectionCompletePage() { src={Expensicons.ConnectionComplete} /> - - {translate('connectionComplete.title')} - + {translate('connectionComplete.title')} {translate('connectionComplete.supportingText')}