diff --git a/src/ROUTES.ts b/src/ROUTES.ts index e722caeed9054..47e854314fc88 100644 --- a/src/ROUTES.ts +++ b/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', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 526bcbaec7121..65b327b524a7f 100644 --- a/src/SCREENS.ts +++ b/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: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 9386978f77c4f..b8e213047068c 100755 --- a/src/languages/en.ts +++ b/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.', diff --git a/src/languages/es.ts b/src/languages/es.ts index e568c3012d342..edabca04bc163 100644 --- a/src/languages/es.ts +++ b/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.', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 5bb4659b2d09d..df74ad66ad1a4 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -261,6 +261,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/workspace/accounting/PolicyAccountingPage').default, [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require('../../../../pages/settings/Preferences/LanguagePage').default, [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../../pages/settings/Preferences/ThemePage').default, + [SCREENS.SETTINGS.PREFERENCES.PAYMENT_CURRENCY]: () => require('../../../../pages/settings/Preferences/PaymentCurrencyPage').default, [SCREENS.SETTINGS.CLOSE]: () => require('../../../../pages/settings/Security/CloseAccountPage').default, [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require('../../../../pages/settings/AppDownloadLinks').default, [SCREENS.SETTINGS.CONSOLE]: () => require('../../../../pages/settings/AboutPage/ConsolePage').default, diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts index 6e306eb7cba6d..7ba62538cafb1 100755 --- a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts +++ b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts @@ -25,7 +25,12 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial['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, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 9d2a12f8d70c0..5f3c43e6ec2bb 100644 --- a/src/libs/Navigation/types.ts +++ b/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; diff --git a/src/pages/settings/Preferences/PaymentCurrencyPage.tsx b/src/pages/settings/Preferences/PaymentCurrencyPage.tsx new file mode 100644 index 0000000000000..8a770253c2945 --- /dev/null +++ b/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 ( + + {({didScreenTransitionEnd}) => ( + <> + Navigation.goBack()} + /> + + {translate('billingCurrency.paymentCurrencyDescription')} + + { + if (!didScreenTransitionEnd) { + return; + } + if (option.currencyCode !== paymentCurrency) { + updateGeneralSettings(personalPolicyID, personalPolicy?.name ?? '', option.currencyCode); + } + Navigation.goBack(); + }} + initiallySelectedCurrencyCode={paymentCurrency} + /> + + )} + + ); +} + +PaymentCurrencyPage.displayName = 'PaymentCurrencyPage'; + +export default PaymentCurrencyPage; diff --git a/src/pages/settings/Preferences/PreferencesPage.tsx b/src/pages/settings/Preferences/PreferencesPage.tsx index 48cb8c99cf21e..1b640dac39ae9 100755 --- a/src/pages/settings/Preferences/PreferencesPage.tsx +++ b/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() { @@ -78,7 +84,7 @@ function PreferencesPage() { User.togglePlatformMute(platform, mutedPlatforms)} + onToggle={() => togglePlatformMute(platform, mutedPlatforms)} /> @@ -96,6 +102,13 @@ function PreferencesPage() { onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} wrapperStyle={styles.sectionMenuItemTopDescription} /> + Navigation.navigate(ROUTES.SETTINGS_PAYMENT_CURRENCY)} + wrapperStyle={styles.sectionMenuItemTopDescription} + />