[Update Account Settings] Preferences, About, Security

src/components/Section/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Lottie from '@components/Lottie';
@@ -42,8 +42,8 @@ type SectionProps = ChildrenProps & {
     /** Customize the Section container */
     containerStyles?: StyleProp<ViewStyle>;
 
-    /** Customize the Section container */
-    titleStyles?: StyleProp<ViewStyle>;
+    /** Customize the Section title */
+    titleStyles?: StyleProp<TextStyle>;
 
     /** Customize the Section container */
     subtitleStyles?: StyleProp<ViewStyle>;
@@ -114,9 +114,9 @@ function Section({
                     </View>
                 )}
                 <View style={[styles.w100, isCentralPane && (isSmallScreenWidth ? styles.p5 : styles.p8)]}>
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, titleStyles]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1]}>
                         <View style={[styles.flexShrink1]}>
-                            <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
+                            <Text style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}>{title}</Text>
                         </View>
                         {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
                             <IconSection
@@ -127,7 +127,7 @@ function Section({
                     </View>
 
                     {!!subtitle && (
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, subtitleStyles]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt2, subtitleStyles]}>
                             <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
                         </View>
                     )}

src/components/TestToolMenu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import * as Network from '@userActions/Network';
@@ -14,7 +13,6 @@ import Button from './Button';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
-import Text from './Text';
 
 type TestToolMenuOnyxProps = {
     /** User object in Onyx */
@@ -29,17 +27,9 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT
 
 function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
     const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
-    const styles = useThemeStyles();
 
     return (
         <>
-            <Text
-                style={[styles.textLabelSupporting, styles.mb4]}
-                numberOfLines={1}
-            >
-                Test Preferences
-            </Text>
-
             {/* Option to switch between staging and default api endpoints.
         This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
         This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */}

src/components/TestToolRow.tsx

@@ -14,7 +14,7 @@ type TestToolRowProps = {
 function TestToolRow({title, children}: TestToolRowProps) {
     const styles = useThemeStyles();
     return (
-        <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
+        <View style={styles.testRowContainer}>
             <View style={styles.flex2}>
                 <Text>{title}</Text>
             </View>

src/languages/en.ts

@@ -711,6 +711,14 @@ export default {
         offline: 'Offline',
         syncing: 'Syncing',
         profileAvatar: 'Profile avatar',
+        publicSection: {
+            title: 'Public',
+            subtitle: 'These details are displayed on your public profile, available for people to see.',
+        },
+        privateSection: {
+            title: 'Private',
+            subtitle: 'These details are used for travel and payments. They are never shown on your public profile.',
+        },
     },
     loungeAccessPage: {
         loungeAccess: 'Lounge access',
@@ -1037,6 +1045,14 @@ export default {
         defaultPaymentMethod: 'Default',
     },
     preferencesPage: {
+        appSection: {
+            title: 'App preferences',
+            subtitle: 'That is when you can experience true joy, when you have no fear.',
+        },
+        testSection: {
+            title: 'Test preferences',
+            subtitle: 'That is when you can experience true joy, when you have no fear.',
+        },
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
     },
     priorityModePage: {

src/languages/es.ts

@@ -705,6 +705,14 @@
         offline: 'Desconectado',
         syncing: 'Sincronizando',
         profileAvatar: 'Perfil avatar',
+        publicSection: {
+            title: 'Público',
+            subtitle: 'Estos detalles se muestran en tu perfil público, a disposición de los demás.',
+        },
+        privateSection: {
+            title: 'Privada',
+            subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.',
+        },
     },
     loungeAccessPage: {
         loungeAccess: 'Acceso a la sala vip',
@@ -1033,7 +1041,7 @@
         addFirstPaymentMethod: 'Añade un método de pago para enviar y recibir pagos directamente desde la aplicación.',
         defaultPaymentMethod: 'Predeterminado',
     },
     preferencesPage: {
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto',
     },
     priorityModePage: {

src/pages/settings/Preferences/PreferencesPage.js

@@ -1,11 +1,13 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import Switch from '@components/Switch';
 import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
@@ -49,58 +51,86 @@ function PreferencesPage(props) {
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('common.preferences')}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
-            illustration={LottieAnimations.PreferencesDJ}
-            shouldShowBackButton={isSmallScreenWidth}
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
         >
-            <View style={styles.mb6}>
-                <Text
-                    style={[styles.textLabelSupporting, styles.mb2, styles.ml5, styles.mr8]}
-                    numberOfLines={1}
-                >
-                    {translate('common.notifications')}
-                </Text>
-                <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.ml5, styles.mr8]}>
-                    <View style={styles.flex4}>
-                        <Text>{translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}</Text>
-                    </View>
-                    <View style={[styles.flex1, styles.alignItemsEnd]}>
-                        <Switch
-                            accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
-                            isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
-                            onToggle={User.updateNewsletterSubscription}
-                        />
-                    </View>
+            <HeaderWithBackButton
+                title={translate('common.workspaces')}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('preferencesPage.appSection.title')}
+                        subtitle={translate('preferencesPage.appSection.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.PreferencesDJ}
+                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                    >
+                        <View style={[styles.flex1, styles.mt5]}>
+                            <Text
+                                style={[styles.textLabelSupporting, styles.mb2]}
+                                numberOfLines={1}
+                            >
+                                {translate('common.notifications')}
+                            </Text>
+                            <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.sectionMenuItemTopDescription]}>
+                                <View style={styles.flex4}>
+                                    <Text>{translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}</Text>
+                                </View>
+                                <View style={[styles.flex1, styles.alignItemsEnd]}>
+                                    <Switch
+                                        accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
+                                        isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
+                                        onToggle={User.updateNewsletterSubscription}
+                                    />
+                                </View>
+                            </View>
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
+                                description={translate('priorityModePage.priorityMode')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`languagePage.languages.${preferredLocale}.label`)}
+                                description={translate('languagePage.language')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
+                                description={translate('themePage.theme')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                        </View>
+                    </Section>
+                    {!isProduction && (
+                        <Section
+                            title={translate('preferencesPage.testSection.title')}
+                            subtitle={translate('preferencesPage.testSection.subtitle')}
+                            isCentralPane
+                            subtitleMuted
+                            titleStyles={styles.accountSettingsSectionTitle}
+                        >
+                            <View style={styles.mt5}>
+                                <TestToolMenu />
+                            </View>
+                        </Section>
+                    )}
                 </View>
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
-                    description={translate('priorityModePage.priorityMode')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
-                />
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`languagePage.languages.${preferredLocale}.label`)}
-                    description={translate('languagePage.language')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
-                />
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
-                    description={translate('themePage.theme')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
-                />
-                {/* Enable additional test features in non-production environments */}
-                {!isProduction && (
-                    <View style={[styles.ml5, styles.mr8, styles.mt6]}>
-                        <TestToolMenu />
-                    </View>
-                )}
-            </View>
-        </IllustratedHeaderPageLayout>
+            </ScrollView>
+        </ScreenWrapper>
     );
 }