diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 2bc04c4a99ea..47e96f0a501a 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -88,6 +88,7 @@ const ROUTES = { SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select', SETTINGS_PRONOUNS: 'settings/profile/pronouns', SETTINGS_PREFERENCES: 'settings/preferences', + SETTINGS_SUBSCRIPTION: 'settings/subscription', SETTINGS_PRIORITY_MODE: 'settings/preferences/priority-mode', SETTINGS_LANGUAGE: 'settings/preferences/language', SETTINGS_THEME: 'settings/preferences/theme', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index f74002312623..4e7243d0eb2c 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -103,6 +103,10 @@ const SCREENS = { RESPONSE: 'Settings_ExitSurvey_Response', CONFIRM: 'Settings_ExitSurvey_Confirm', }, + + SUBSCRIPTION: { + ROOT: 'Settings_Subscription', + }, }, SAVE_THE_WORLD: { ROOT: 'SaveTheWorld_Root', diff --git a/src/languages/en.ts b/src/languages/en.ts index f8d122f3b69a..635248caaf88 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1921,6 +1921,7 @@ export default { distanceRates: 'Distance rates', welcomeNote: ({workspaceName}: WelcomeNoteParams) => `You have been invited to ${workspaceName || 'a workspace'}! Download the Expensify mobile app at use.expensify.com/download to start tracking your expenses.`, + subscription: 'Subscription', }, qbo: { importDescription: 'Choose which coding configurations are imported from QuickBooks Online to Expensify.', diff --git a/src/languages/es.ts b/src/languages/es.ts index 536a6182f393..0886e614273a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1945,6 +1945,7 @@ export default { distanceRates: 'Tasas de distancia', welcomeNote: ({workspaceName}: WelcomeNoteParams) => `¡Has sido invitado a ${workspaceName}! Descargue la aplicación móvil Expensify en use.expensify.com/download para comenzar a rastrear sus gastos.`, + subscription: 'Suscripción', }, qbo: { importDescription: 'Elige que configuraciónes de codificación son importadas desde QuickBooks Online a Expensify.', diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 884cfbeb2494..afca6a978361 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -23,6 +23,7 @@ const settingsScreens = { [SCREENS.SETTINGS.ABOUT]: () => require('../../../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, + [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: () => require('../../../../../pages/settings/Subscription/SubscriptionSettingsPage').default as React.ComponentType, } satisfies Screens; function BaseCentralPaneNavigator() { @@ -34,6 +35,7 @@ function BaseCentralPaneNavigator() { // Prevent unnecessary scrolling cardStyle: styles.cardStyleNavigator, }; + return ( > = [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER], [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE], [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT_RHP], + [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [], }; export default CENTRAL_PANE_TO_RHP_MAPPING; diff --git a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts index 9e40a3dc0d4c..15b83314e84e 100755 --- a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts @@ -13,6 +13,7 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record = { SCREENS.SETTINGS.WORKSPACES, SCREENS.SETTINGS.SAVE_THE_WORLD, SCREENS.SETTINGS.TROUBLESHOOT, + SCREENS.SETTINGS.SUBSCRIPTION.ROOT, ], }; diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index a093b778360e..e9b86993ad43 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -68,6 +68,7 @@ const config: LinkingOptions['config'] = { [SCREENS.SETTINGS.WORKSPACES]: ROUTES.SETTINGS_WORKSPACES, [SCREENS.SEARCH.CENTRAL_PANE]: ROUTES.SEARCH.route, [SCREENS.SETTINGS.SAVE_THE_WORLD]: ROUTES.SETTINGS_SAVE_THE_WORLD, + [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: ROUTES.SETTINGS_SUBSCRIPTION, }, }, [SCREENS.NOT_FOUND]: '*', diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index e4820df10df9..2ce08ca99923 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -66,6 +66,7 @@ type CentralPaneNavigatorParamList = { query: string; }; [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined; + [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: undefined; }; type BackToParams = { @@ -98,6 +99,7 @@ type SettingsNavigatorParamList = { backTo: Routes; }; [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined; + [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: undefined; [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: undefined; [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: undefined; [SCREENS.SETTINGS.PREFERENCES.THEME]: undefined; diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx new file mode 100644 index 000000000000..83ede1532efc --- /dev/null +++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Illustrations from '@components/Icon/Illustrations'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import Navigation from '@libs/Navigation/Navigation'; + +function SubscriptionSettingsPage() { + const {isSmallScreenWidth} = useWindowDimensions(); + const {translate} = useLocalize(); + + return ( + + Navigation.goBack()} + shouldShowBackButton={isSmallScreenWidth} + icon={Illustrations.CreditCardsNew} + /> + + ); +} + +SubscriptionSettingsPage.displayName = 'SubscriptionSettingsPage'; + +export default SubscriptionSettingsPage;