feat: add default output currency setting

src/ROUTES.ts

@@ -158,6 +158,7 @@ const ROUTES = {
     SETTINGS_SUBSCRIPTION_REQUEST_EARLY_CANCELLATION: 'settings/subscription/request-early-cancellation-survey',
     SETTINGS_PRIORITY_MODE: 'settings/preferences/priority-mode',
     SETTINGS_LANGUAGE: 'settings/preferences/language',
+    SETTINGS_PAYMENT_CURRENCY: 'setting/preferences/payment-currency',
     SETTINGS_THEME: 'settings/preferences/theme',
     SETTINGS_WORKSPACES: {route: 'settings/workspaces', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/workspaces', backTo)},
     SETTINGS_SECURITY: 'settings/security',

src/SCREENS.ts

@@ -108,6 +108,7 @@ const SCREENS = {
             PRIORITY_MODE: 'Settings_Preferences_PriorityMode',
             LANGUAGE: 'Settings_Preferences_Language',
             THEME: 'Settings_Preferences_Theme',
+            PAYMENT_CURRENCY: 'Settings_Payment_Currency',
         },
 
         WALLET: {

src/languages/en.ts

@@ -1437,6 +1437,7 @@ const translations = {
         changeBillingCurrency: 'Change billing currency',
         changePaymentCurrency: 'Change payment currency',
         paymentCurrency: 'Payment currency',
+        paymentCurrencyDescription: 'Select a standardized currency that all personal expenses should be converted to.',
         note: 'Note: Changing your payment currency can impact how much you’ll pay for Expensify. Refer to our',
         noteLink: 'pricing page',
         noteDetails: 'for full details.',

src/languages/es.ts

@@ -1436,6 +1436,7 @@ const translations = {
         changePaymentCurrency: 'Cambiar moneda de facturación',
         changeBillingCurrency: 'Cambiar la moneda de pago',
         paymentCurrency: 'Moneda de pago',
+        paymentCurrencyDescription: 'Selecciona una moneda estándar a la que se deben convertir todos los gastos personales.',
         note: 'Nota: Cambiar tu moneda de pago puede afectar cuánto pagarás por Expensify. Consulta nuestra',
         noteLink: 'página de precios',
         noteDetails: 'para conocer todos los detalles.',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -261,6 +261,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: () => require<ReactComponentModule>('../../../../pages/workspace/accounting/PolicyAccountingPage').default,
     [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require<ReactComponentModule>('../../../../pages/settings/Preferences/LanguagePage').default,
     [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require<ReactComponentModule>('../../../../pages/settings/Preferences/ThemePage').default,
+    [SCREENS.SETTINGS.PREFERENCES.PAYMENT_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/Preferences/PaymentCurrencyPage').default,
     [SCREENS.SETTINGS.CLOSE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/CloseAccountPage').default,
     [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require<ReactComponentModule>('../../../../pages/settings/AppDownloadLinks').default,
     [SCREENS.SETTINGS.CONSOLE]: () => require<ReactComponentModule>('../../../../pages/settings/AboutPage/ConsolePage').default,

src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts

@@ -25,7 +25,12 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<keyof SettingsSplitNavigatorPa
         SCREENS.SETTINGS.EXIT_SURVEY.RESPONSE,
         SCREENS.SETTINGS.EXIT_SURVEY.CONFIRM,
     ],
-    [SCREENS.SETTINGS.PREFERENCES.ROOT]: [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE, SCREENS.SETTINGS.PREFERENCES.LANGUAGE, SCREENS.SETTINGS.PREFERENCES.THEME],
+    [SCREENS.SETTINGS.PREFERENCES.ROOT]: [
+        SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE,
+        SCREENS.SETTINGS.PREFERENCES.LANGUAGE,
+        SCREENS.SETTINGS.PREFERENCES.THEME,
+        SCREENS.SETTINGS.PREFERENCES.PAYMENT_CURRENCY,
+    ],
     [SCREENS.SETTINGS.WALLET.ROOT]: [
         SCREENS.SETTINGS.WALLET.DOMAIN_CARD,
         SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE,

src/libs/Navigation/linkingConfig/config.ts

@@ -146,6 +146,10 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                             path: ROUTES.SETTINGS_THEME,
                             exact: true,
                         },
+                        [SCREENS.SETTINGS.PREFERENCES.PAYMENT_CURRENCY]: {
+                            path: ROUTES.SETTINGS_PAYMENT_CURRENCY,
+                            exact: true,
+                        },
                         [SCREENS.SETTINGS.CLOSE]: {
                             path: ROUTES.SETTINGS_CLOSE,
                             exact: true,

src/libs/Navigation/types.ts

@@ -102,6 +102,7 @@ type SettingsNavigatorParamList = {
         forwardTo?: Routes;
     };
     [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: undefined;
+    [SCREENS.SETTINGS.PREFERENCES.PAYMENT_CURRENCY]: undefined;
     [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: undefined;
     [SCREENS.SETTINGS.PREFERENCES.THEME]: undefined;
     [SCREENS.SETTINGS.CLOSE]: undefined;

src/pages/settings/Preferences/PaymentCurrencyPage.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import CurrencySelectionList from '@components/CurrencySelectionList';
+import type {CurrencyListItem} from '@components/CurrencySelectionList/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {updateGeneralSettings} from '@libs/actions/Policy/Policy';
+import Navigation from '@libs/Navigation/Navigation';
+import {getPersonalPolicy} from '@libs/PolicyUtils';
+import CONST from '@src/CONST';
+
+function PaymentCurrencyPage() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const personalPolicyID = getPersonalPolicy()?.id;
+    const personalPolicy = usePolicy(personalPolicyID);
+
+    const paymentCurrency = personalPolicy?.outputCurrency ?? CONST.CURRENCY.USD;
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={PaymentCurrencyPage.displayName}
+        >
+            {({didScreenTransitionEnd}) => (
+                <>
+                    <HeaderWithBackButton
+                        title={translate('billingCurrency.paymentCurrency')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.goBack()}
+                    />
+
+                    <Text style={[styles.mh5, styles.mv4]}>{translate('billingCurrency.paymentCurrencyDescription')}</Text>
+
+                    <CurrencySelectionList
+                        recentlyUsedCurrencies={[]}
+                        searchInputLabel={translate('common.search')}
+                        onSelect={(option: CurrencyListItem) => {
+                            if (!didScreenTransitionEnd) {
+                                return;
+                            }
+                            if (option.currencyCode !== paymentCurrency) {
+                                updateGeneralSettings(personalPolicyID, personalPolicy?.name ?? '', option.currencyCode);
+                            }
+                            Navigation.goBack();
+                        }}
+                        initiallySelectedCurrencyCode={paymentCurrency}
+                    />
+                </>
+            )}
+        </ScreenWrapper>
+    );
+}
+
+PaymentCurrencyPage.displayName = 'PaymentCurrencyPage';
+
+export default PaymentCurrencyPage;

src/pages/settings/Preferences/PreferencesPage.tsx

@@ -11,12 +11,15 @@ import Section from '@components/Section';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {togglePlatformMute, updateNewsletterSubscription} from '@libs/actions/User';
+import {getCurrencySymbol} from '@libs/CurrencyUtils';
 import getPlatform from '@libs/getPlatform';
 import LocaleUtils from '@libs/LocaleUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as User from '@userActions/User';
+import {getPersonalPolicy} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -29,6 +32,9 @@ function PreferencesPage() {
     const isPlatformMuted = mutedPlatforms[platform];
     const [user] = useOnyx(ONYXKEYS.USER);
     const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+    const personalPolicy = usePolicy(getPersonalPolicy()?.id);
+
+    const paymentCurrency = personalPolicy?.outputCurrency ?? CONST.CURRENCY.USD;
 
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
@@ -66,7 +72,7 @@ function PreferencesPage() {
                                     <Switch
                                         accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
                                         isOn={user?.isSubscribedToNewsletter ?? true}
-                                        onToggle={User.updateNewsletterSubscription}
+                                        onToggle={updateNewsletterSubscription}
                                     />
                                 </View>
                             </View>
@@ -78,7 +84,7 @@ function PreferencesPage() {
                                     <Switch
                                         accessibilityLabel={translate('preferencesPage.muteAllSounds')}
                                         isOn={isPlatformMuted ?? false}
-                                        onToggle={() => User.togglePlatformMute(platform, mutedPlatforms)}
+                                        onToggle={() => togglePlatformMute(platform, mutedPlatforms)}
                                     />
                                 </View>
                             </View>
@@ -96,6 +102,13 @@ function PreferencesPage() {
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                             />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={`${paymentCurrency} - ${getCurrencySymbol(paymentCurrency)}`}
+                                description={translate('billingCurrency.paymentCurrency')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENT_CURRENCY)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
                             <MenuItemWithTopDescription
                                 shouldShowRightIcon
                                 title={translate(`themePage.themes.${preferredTheme ?? CONST.THEME.DEFAULT}.label`)}