Merge the feature-payment-card-subscription feature branch into main

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',

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',

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.',

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.',

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 (
         <Stack.Navigator screenOptions={options}>
             <Stack.Screen

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -39,6 +39,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
     [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;

src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts

@@ -13,6 +13,7 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record<BottomTabName, CentralPaneName[]> = {
         SCREENS.SETTINGS.WORKSPACES,
         SCREENS.SETTINGS.SAVE_THE_WORLD,
         SCREENS.SETTINGS.TROUBLESHOOT,
+        SCREENS.SETTINGS.SUBSCRIPTION.ROOT,
     ],
 };
 

src/libs/Navigation/linkingConfig/config.ts

@@ -68,6 +68,7 @@ const config: LinkingOptions<RootStackParamList>['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]: '*',

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;

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 (
+        <ScreenWrapper testID={SubscriptionSettingsPage.displayName}>
+            <HeaderWithBackButton
+                title={translate('workspace.common.subscription')}
+                onBackButtonPress={() => Navigation.goBack()}
+                shouldShowBackButton={isSmallScreenWidth}
+                icon={Illustrations.CreditCardsNew}
+            />
+        </ScreenWrapper>
+    );
+}
+
+SubscriptionSettingsPage.displayName = 'SubscriptionSettingsPage';
+
+export default SubscriptionSettingsPage;