Update account settings/profile

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

src/languages/es.ts

@@ -705,6 +705,14 @@ export default {
         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',

src/pages/settings/Profile/ProfilePage.js

@@ -1,23 +1,26 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Expensicons from '@components/Icon/Expensicons';
-import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as UserUtils from '@libs/UserUtils';
-import userPropTypes from '@pages/settings/userPropTypes';
-import * as App from '@userActions/App';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -36,7 +39,21 @@ const propTypes = {
         }),
     ),
 
-    user: userPropTypes,
+    /** User's private personal details */
+    privatePersonalDetails: PropTypes.shape({
+        legalFirstName: PropTypes.string,
+        legalLastName: PropTypes.string,
+        dob: PropTypes.string,
+
+        /** User's home address */
+        address: PropTypes.shape({
+            street: PropTypes.string,
+            city: PropTypes.string,
+            state: PropTypes.string,
+            zip: PropTypes.string,
+            country: PropTypes.string,
+        }),
+    }),
 
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
@@ -45,12 +62,26 @@ const propTypes = {
 
 const defaultProps = {
     loginList: {},
-    user: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
+    privatePersonalDetails: {
+        legalFirstName: '',
+        legalLastName: '',
+        dob: '',
+        address: {
+            street: '',
+            street2: '',
+            city: '',
+            state: '',
+            zip: '',
+            country: '',
+        },
+    },
 };
 
 function ProfilePage(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const getPronouns = () => {
         let pronounsKey = lodashGet(props.currentUserPersonalDetails, 'pronouns', '');
         if (pronounsKey.startsWith(CONST.PRONOUNS.PREFIX)) {
@@ -65,8 +96,13 @@ function ProfilePage(props) {
     const currentUserDetails = props.currentUserPersonalDetails || {};
     const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList);
     const emojiCode = lodashGet(props, 'currentUserPersonalDetails.status.emojiCode', '');
+    const {isSmallScreenWidth} = useWindowDimensions();
+    usePrivatePersonalDetails();
+    const privateDetails = props.privatePersonalDetails || {};
+    const legalName = `${privateDetails.legalFirstName || ''} ${privateDetails.legalLastName || ''}`.trim();
+    const isLoadingPersonalDetails = lodashGet(props.privatePersonalDetails, 'isLoading', true);
 
-    const profileSettingsOptions = [
+    const publicOptions = [
         {
             description: props.translate('displayNamePage.headerTitle'),
             title: lodashGet(currentUserDetails, 'displayName', ''),
@@ -78,13 +114,11 @@ function ProfilePage(props) {
             pageRoute: ROUTES.SETTINGS_CONTACT_METHODS.route,
             brickRoadIndicator: contactMethodBrickRoadIndicator,
         },
-        ...[
-            {
-                description: props.translate('statusPage.status'),
-                title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '',
-                pageRoute: ROUTES.SETTINGS_STATUS,
-            },
-        ],
+        {
+            description: props.translate('statusPage.status'),
+            title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '',
+            pageRoute: ROUTES.SETTINGS_STATUS,
+        },
         {
             description: props.translate('pronounsPage.pronouns'),
             title: getPronouns(),
@@ -97,9 +131,23 @@ function ProfilePage(props) {
         },
     ];
 
-    useEffect(() => {
-        App.openProfile(props.currentUserPersonalDetails);
-    }, [props.currentUserPersonalDetails]);
+    const privateOptions = [
+        {
+            description: props.translate('privatePersonalDetails.legalName'),
+            title: legalName,
+            pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME,
+        },
+        {
+            description: props.translate('common.dob'),
+            title: privateDetails.dob || '',
+            pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH,
+        },
+        {
+            description: props.translate('privatePersonalDetails.address'),
+            title: PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails),
+            pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS,
+        },
+    ];
 
     return (
         <ScreenWrapper
@@ -113,34 +161,53 @@ function ProfilePage(props) {
                 shouldShowBackButton={props.isSmallScreenWidth}
             />
             <ScrollView>
-                <View style={[styles.mt4]}>
-                    {_.map(profileSettingsOptions, (detail, index) => (
-                        <MenuItemWithTopDescription
-                            key={`${detail.title}_${index}`}
-                            shouldShowRightIcon
-                            title={detail.title}
-                            description={detail.description}
-                            onPress={() => Navigation.navigate(detail.pageRoute)}
-                            brickRoadIndicator={detail.brickRoadIndicator}
-                        />
-                    ))}
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={props.translate('profilePage.publicSection.title')}
+                        subtitle={props.translate('profilePage.publicSection.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        childrenStyles={styles.pt3}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                    >
+                        {_.map(publicOptions, (detail, index) => (
+                            <MenuItemWithTopDescription
+                                key={`${detail.title}_${index}`}
+                                shouldShowRightIcon
+                                title={detail.title}
+                                description={detail.description}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                                onPress={() => Navigation.navigate(detail.pageRoute)}
+                                brickRoadIndicator={detail.brickRoadIndicator}
+                            />
+                        ))}
+                    </Section>
+                    <Section
+                        title={props.translate('profilePage.privateSection.title')}
+                        subtitle={props.translate('profilePage.privateSection.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        childrenStyles={styles.pt3}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                    >
+                        {isLoadingPersonalDetails ? (
+                            <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative, StyleUtils.getBackgroundColorStyle(theme.cardBG)]} />
+                        ) : (
+                            <>
+                                {_.map(privateOptions, (detail, index) => (
+                                    <MenuItemWithTopDescription
+                                        key={`${detail.title}_${index}`}
+                                        shouldShowRightIcon
+                                        title={detail.title}
+                                        description={detail.description}
+                                        wrapperStyle={styles.sectionMenuItemTopDescription}
+                                        onPress={() => Navigation.navigate(detail.pageRoute)}
+                                    />
+                                ))}
+                            </>
+                        )}
+                    </Section>
                 </View>
-                <MenuItem
-                    title={props.translate('privatePersonalDetails.personalDetails')}
-                    icon={Expensicons.User}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS)}
-                    shouldShowRightIcon
-                />
-                {props.user.hasLoungeAccess && (
-                    <MenuItem
-                        title={props.translate('loungeAccessPage.loungeAccess')}
-                        icon={Expensicons.LoungeAccess}
-                        iconWidth={40}
-                        iconHeight={40}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_LOUNGE_ACCESS)}
-                        shouldShowRightIcon
-                    />
-                )}
             </ScrollView>
         </ScreenWrapper>
     );
@@ -158,6 +225,9 @@ export default compose(
         loginList: {
             key: ONYXKEYS.LOGIN_LIST,
         },
+        privatePersonalDetails: {
+            key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+        },
         user: {
             key: ONYXKEYS.USER,
         },

src/pages/workspace/reimburse/WorkspaceReimburseView.js

@@ -151,7 +151,7 @@ function WorkspaceReimburseView(props) {
                             description={translate('workspace.reimburse.trackDistanceRate')}
                             shouldShowRightIcon
                             onPress={() => Navigation.navigate(ROUTES.WORKSPACE_RATE_AND_UNIT.getRoute(props.policy.id))}
-                            wrapperStyle={[styles.mt3, styles.ph8, styles.mhn8, styles.wAuto]}
+                            wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3]}
                             brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR}
                         />
                     </OfflineWithFeedback>

src/styles/index.ts

@@ -2578,13 +2578,23 @@ const styles = (theme: ThemeColors) =>
             color: theme.textSupporting,
         },
 
+        accountSettingsSectionTitle: {
+            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+        },
+
         sectionMenuItem: {
             borderRadius: 8,
             paddingHorizontal: 8,
             height: 56,
             alignItems: 'center',
         },
 
+        sectionMenuItemTopDescription: {
+            ...spacing.ph8,
+            ...spacing.mhn8,
+            width: 'auto',
+        },
+
         selectCircle: {
             width: variables.componentSizeSmall,
             height: variables.componentSizeSmall,
@@ -3359,7 +3369,8 @@ const styles = (theme: ThemeColors) =>
         },
 
         cardSectionTitle: {
-            lineHeight: variables.lineHeightXXLarge,
+            fontSize: variables.fontSizeLarge,
+            lineHeight: variables.lineHeightXLarge,
         },
 
         cardMenuItem: {

src/styles/variables.ts

@@ -187,7 +187,7 @@ export default {
     bankCardHeight: 26,
     workspaceTypeIconWidth: 34,
     sectionMargin: 16,
-    workspaceSectionMaxWidth: 600,
+    workspaceSectionMaxWidth: 680,
     sectionIllustrationHeight: 240,
     photoUploadPopoverWidth: 335,