Update Preferences page with push-to-page design

src/ROUTES.js

@@ -27,6 +27,8 @@ export default {
     SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select',
     SETTINGS_PRONOUNS: 'settings/profile/pronouns',
     SETTINGS_PREFERENCES: 'settings/preferences',
+    SETTINGS_PRIORITY_MODE: 'settings/preferences/priority-mode',
+    SETTINGS_LANGUAGE: 'settings/preferences/language',
     SETTINGS_WORKSPACES: 'settings/workspaces',
     SETTINGS_SECURITY: 'settings/security',
     SETTINGS_CLOSE: 'settings/security/closeAccount',

src/components/LocalePicker.js

@@ -34,11 +34,11 @@ const defaultProps = {
 const localesToLanguages = {
     default: {
         value: 'en',
-        label: Localize.translate('en', 'preferencesPage.languages.english'),
+        label: Localize.translate('en', 'languagePage.languages.en.label'),
     },
     es: {
         value: 'es',
-        label: Localize.translate('es', 'preferencesPage.languages.spanish'),
+        label: Localize.translate('es', 'languagePage.languages.es.label'),
     },
 };
 
@@ -49,7 +49,7 @@ const LocalePicker = (props) => {
 
     return (
         <Picker
-            label={props.size === 'normal' ? props.translate('preferencesPage.language') : null}
+            label={props.size === 'normal' ? props.translate('languagePage.language') : null}
             onInputChange={(locale) => {
                 if (locale === props.preferredLocale) {
                     return;

src/components/OptionRow.js

@@ -58,6 +58,9 @@ const propTypes = {
     /** Whether to show a line separating options in list */
     shouldHaveOptionSeparator: PropTypes.bool,
 
+    /** Whether to remove the lateral padding and align the content with the margins */
+    shouldDisableRowInnerPadding: PropTypes.bool,
+
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     ...withLocalizePropTypes,
@@ -74,6 +77,7 @@ const defaultProps = {
     optionIsFocused: false,
     style: null,
     shouldHaveOptionSeparator: false,
+    shouldDisableRowInnerPadding: false,
 };
 
 class OptionRow extends Component {
@@ -172,7 +176,7 @@ class OptionRow extends Component {
                                 styles.alignItemsCenter,
                                 styles.justifyContentBetween,
                                 styles.sidebarLink,
-                                styles.sidebarLinkInner,
+                                this.props.shouldDisableRowInnerPadding ? null : styles.sidebarLinkInner,
                                 this.props.optionIsFocused ? styles.sidebarLinkActive : null,
                                 hovered && !this.props.optionIsFocused ? this.props.hoverStyle : null,
                                 this.props.isDisabled && styles.cursorDisabled,

src/components/OptionsList/BaseOptionsList.js

@@ -172,6 +172,7 @@ class BaseOptionsList extends Component {
                 boldStyle={this.props.boldStyle}
                 isDisabled={isDisabled}
                 shouldHaveOptionSeparator={index > 0 && this.props.shouldHaveOptionSeparator}
+                shouldDisableRowInnerPadding={this.props.shouldDisableRowInnerPadding}
             />
         );
     }

src/components/OptionsList/optionsListPropTypes.js

@@ -70,6 +70,9 @@ const propTypes = {
 
     /** Whether to show a line separating options in list */
     shouldHaveOptionSeparator: PropTypes.bool,
+
+    /** Whether to disable the inner padding in rows */
+    shouldDisableRowInnerPadding: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -90,6 +93,7 @@ const defaultProps = {
     isDisabled: false,
     onLayout: undefined,
     shouldHaveOptionSeparator: false,
+    shouldDisableRowInnerPadding: false,
 };
 
 export {propTypes, defaultProps};

src/languages/en.js

@@ -493,16 +493,31 @@ export default {
         defaultPaymentMethod: 'Default',
     },
     preferencesPage: {
-        mostRecent: 'Most recent',
-        mostRecentModeDescription: 'This will display all chats by default, sorted by most recent, with pinned items at the top.',
-        focus: '#focus',
-        focusModeDescription: '#focus – This will only display unread and pinned chats, all sorted alphabetically.',
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
+    },
+    priorityModePage: {
         priorityMode: 'Priority mode',
+        explainerText: 'Choose whether to show all chats by default sorted with most recent with pinned items at the top, or #focus on unread pinned items, sorted alphabetically.',
+        priorityModes: {
+            default: {
+                label: 'Most recent',
+                description: 'Show all chats sorted by most recent',
+            },
+            gsd: {
+                label: '#focus',
+                description: 'Only show unread sorted alphabetically',
+            },
+        },
+    },
+    languagePage: {
         language: 'Language',
         languages: {
-            english: 'English',
-            spanish: 'Spanish',
+            en: {
+                label: 'English',
+            },
+            es: {
+                label: 'Spanish',
+            },
         },
     },
     signInPage: {

src/languages/es.js

@@ -493,16 +493,31 @@ export default {
         defaultPaymentMethod: 'Predeterminado',
     },
     preferencesPage: {
-        mostRecent: 'Más recientes',
-        mostRecentModeDescription: 'Esta opción muestra por defecto todos los chats, ordenados a partir del más reciente, con los chats destacados arriba de todo.',
-        focus: '#concentración',
-        focusModeDescription: '#concentración – Muestra sólo los chats no leídos y destacados ordenados alfabéticamente.',
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto',
+    },
+    priorityModePage: {
         priorityMode: 'Modo prioridad',
+        explainerText: 'Elija si desea mostrar por defecto todos los chats ordenados desde el más reciente y con los elementos anclados en la parte superior, o elija el modo #concentración, con los elementos no leídos anclados en la parte superior y ordenados alfabéticamente.',
+        priorityModes: {
+            default: {
+                label: 'Más recientes',
+                description: 'Mostrar todos los chats ordenados desde el más reciente',
+            },
+            gsd: {
+                label: '#concentración',
+                description: 'Mostrar sólo los no leídos ordenados alfabéticamente',
+            },
+        },
+    },
+    languagePage: {
         language: 'Idioma',
         languages: {
-            english: 'Inglés',
-            spanish: 'Español',
+            en: {
+                label: 'Inglés',
+            },
+            es: {
+                label: 'Español',
+            },
         },
     },
     signInPage: {

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -254,11 +254,25 @@ const SettingsModalStackNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const SettingsPreferencesPage = require('../../../pages/settings/PreferencesPage').default;
+            const SettingsPreferencesPage = require('../../../pages/settings/Preferences/PreferencesPage').default;
             return SettingsPreferencesPage;
         },
         name: 'Settings_Preferences',
     },
+    {
+        getComponent: () => {
+            const SettingsPreferencesPriorityModePage = require('../../../pages/settings/Preferences/PriorityModePage').default;
+            return SettingsPreferencesPriorityModePage;
+        },
+        name: 'Settings_Preferences_PriorityMode',
+    },
+    {
+        getComponent: () => {
+            const SettingsPreferencesLanguagePage = require('../../../pages/settings/Preferences/LanguagePage').default;
+            return SettingsPreferencesLanguagePage;
+        },
+        name: 'Settings_Preferences_Language',
+    },
     {
         getComponent: () => {
             const SettingsPasswordPage = require('../../../pages/settings/PasswordPage').default;

src/libs/Navigation/linkingConfig.js

@@ -44,6 +44,14 @@ export default {
                         path: ROUTES.SETTINGS_PREFERENCES,
                         exact: true,
                     },
+                    Settings_Preferences_PriorityMode: {
+                        path: ROUTES.SETTINGS_PRIORITY_MODE,
+                        exact: true,
+                    },
+                    Settings_Preferences_Language: {
+                        path: ROUTES.SETTINGS_LANGUAGE,
+                        exact: true,
+                    },
                     Settings_Close: {
                         path: ROUTES.SETTINGS_CLOSE,
                         exact: true,

src/libs/actions/User.js

@@ -402,6 +402,7 @@ function updateChatPriorityMode(mode) {
     API.write('UpdateChatPriorityMode', {
         value: mode,
     }, {optimisticData});
+    Navigation.navigate(ROUTES.SETTINGS_PREFERENCES);
 }
 
 /**

src/pages/settings/Preferences/LanguagePage.js

@@ -0,0 +1,77 @@
+import _ from 'underscore';
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import OptionsList from '../../../components/OptionsList';
+import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import * as App from '../../../libs/actions/App';
+
+const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** The preferred language of the App */
+    preferredLocale: PropTypes.string.isRequired,
+};
+
+const LanguagePage = (props) => {
+    const localesToLanguages = _.map(props.translate('languagePage.languages'),
+        (language, key) => (
+            {
+                value: key,
+                text: language.label,
+                keyForList: key,
+
+                // Include the green checkmark icon to indicate the currently selected value
+                customIcon: props.preferredLocale === key ? greenCheckmark : undefined,
+
+                // This property will make the currently selected value have bold text
+                boldStyle: props.preferredLocale === key,
+            }
+        ));
+
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <HeaderWithCloseButton
+                title={props.translate('languagePage.language')}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+            />
+            <OptionsList
+                sections={[{data: localesToLanguages}]}
+                onSelectRow={
+                    (language) => {
+                        if (language.value !== props.preferredLocale) {
+                            App.setLocale(language.value);
+                        }
+                        Navigation.navigate(ROUTES.SETTINGS_PREFERENCES);
+                    }
+                }
+                hideSectionHeaders
+                optionHoveredStyle={
+                    {
+                        ...styles.hoveredComponentBG,
+                        ...styles.mhn5,
+                        ...styles.ph5,
+                    }
+                }
+                shouldHaveOptionSeparator
+                shouldDisableRowInnerPadding
+                contentContainerStyles={[styles.ph5]}
+            />
+        </ScreenWrapper>
+    );
+};
+
+LanguagePage.displayName = 'LanguagePage';
+LanguagePage.propTypes = propTypes;
+
+export default withLocalize(LanguagePage);