Merge pull request #35662 from software-mansion-labs/update-account-s…

…ettings/profile

contributingGuides/NAVIGATION.md

@@ -30,7 +30,7 @@ When creating RHP flows, you have to remember a couple things:
 
 - Since you can deeplink to different pages inside the RHP navigator, it is important to provide the possibility for the user to properly navigate back from any page with UP press (`HeaderWithBackButton` component).
 
-- An example can be deeplinking to `/settings/profile/personal-details`. From there, when pressing the UP button, you should navigate to `/settings/profile`, so in order for it to work, you should provide the correct route in `onBackButtonPress` prop of `HeaderWithBackButton` (`Navigation.goBack(ROUTES.SETTINGS_PROFILE)` in this example). 
+- An example can be deeplinking to `/settings/profile/timezone/select`. From there, when pressing the UP button, you should navigate to `/settings/profile/timezone`, so in order for it to work, you should provide the correct route in `onBackButtonPress` prop of `HeaderWithBackButton` (`Navigation.goBack(ROUTES.SETTINGS_PROFILE)` in this example). 
 
 - We use a custom `goBack` function to handle the browser and the `react-navigation` history stack. Under the hood, it resolves to either replacing the current screen with the one we navigate to (deeplinking scenario) or just going back if we reached the current page by navigating in App (pops the screen). It ensures the requested behaviors on web, which is navigating back to the place from where you deeplinked when going into the RHP flow by it.
 

src/ROUTES.ts

@@ -125,13 +125,12 @@ const ROUTES = {
         route: 'settings/wallet/card/:domain/activate',
         getRoute: (domain: string) => `settings/wallet/card/${domain}/activate` as const,
     },
-    SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details',
-    SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name',
-    SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth',
-    SETTINGS_PERSONAL_DETAILS_ADDRESS: 'settings/profile/personal-details/address',
-    SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY: {
-        route: 'settings/profile/personal-details/address/country',
-        getRoute: (country: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/personal-details/address/country?country=${country}`, backTo),
+    SETTINGS_LEGAL_NAME: 'settings/profile/legal-name',
+    SETTINGS_DATE_OF_BIRTH: 'settings/profile/date-of-birth',
+    SETTINGS_ADDRESS: 'settings/profile/address',
+    SETTINGS_ADDRESS_COUNTRY: {
+        route: 'settings/profile/address/country',
+        getRoute: (country: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/address/country?country=${country}`, backTo),
     },
     SETTINGS_CONTACT_METHODS: {
         route: 'settings/profile/contact-methods',

src/SCREENS.ts

@@ -49,14 +49,10 @@ const SCREENS = {
             PRONOUNS: 'Settings_Pronouns',
             TIMEZONE: 'Settings_Timezone',
             TIMEZONE_SELECT: 'Settings_Timezone_Select',
-
-            PERSONAL_DETAILS: {
-                INITIAL: 'Settings_PersonalDetails_Initial',
-                LEGAL_NAME: 'Settings_PersonalDetails_LegalName',
-                DATE_OF_BIRTH: 'Settings_PersonalDetails_DateOfBirth',
-                ADDRESS: 'Settings_PersonalDetails_Address',
-                ADDRESS_COUNTRY: 'Settings_PersonalDetails_Address_Country',
-            },
+            LEGAL_NAME: 'Settings_LegalName',
+            DATE_OF_BIRTH: 'Settings_DateOfBirth',
+            ADDRESS: 'Settings_Address',
+            ADDRESS_COUNTRY: 'Settings_Address_Country',
         },
 
         PREFERENCES: {

src/components/CountrySelector.tsx

@@ -47,7 +47,7 @@ function CountrySelector({errorText = '', value: countryCode, onInputChange}: Co
                 description={translate('common.country')}
                 onPress={() => {
                     const activeRoute = Navigation.getActiveRouteWithoutParams();
-                    Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute));
+                    Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute));
                 }}
             />
             <View style={styles.ml5}>

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/hooks/usePrivatePersonalDetails.ts

@@ -15,6 +15,6 @@ export default function usePrivatePersonalDetails() {
             return;
         }
 
-        PersonalDetails.openPersonalDetailsPage();
+        PersonalDetails.openPersonalDetails();
     }, [network?.isOffline]);
 }

src/languages/en.ts

@@ -713,6 +713,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

@@ -707,6 +707,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/libs/API/types.ts

@@ -287,7 +287,7 @@ const READ_COMMANDS = {
     OPEN_WORKSPACE_VIEW: 'OpenWorkspaceView',
     GET_MAPBOX_ACCESS_TOKEN: 'GetMapboxAccessToken',
     OPEN_PAYMENTS_PAGE: 'OpenPaymentsPage',
-    OPEN_PERSONAL_DETAILS_PAGE: 'OpenPersonalDetailsPage',
+    OPEN_PERSONAL_DETAILS: 'OpenPersonalDetailsPage',
     OPEN_PUBLIC_PROFILE_PAGE: 'OpenPublicProfilePage',
     OPEN_PLAID_BANK_LOGIN: 'OpenPlaidBankLogin',
     OPEN_PLAID_BANK_ACCOUNT_SELECTOR: 'OpenPlaidBankAccountSelector',
@@ -321,7 +321,7 @@ type ReadCommandParameters = {
     [READ_COMMANDS.OPEN_WORKSPACE_VIEW]: EmptyObject;
     [READ_COMMANDS.GET_MAPBOX_ACCESS_TOKEN]: EmptyObject;
     [READ_COMMANDS.OPEN_PAYMENTS_PAGE]: EmptyObject;
-    [READ_COMMANDS.OPEN_PERSONAL_DETAILS_PAGE]: EmptyObject;
+    [READ_COMMANDS.OPEN_PERSONAL_DETAILS]: EmptyObject;
     [READ_COMMANDS.OPEN_PUBLIC_PROFILE_PAGE]: Parameters.OpenPublicProfilePageParams;
     [READ_COMMANDS.OPEN_PLAID_BANK_LOGIN]: Parameters.OpenPlaidBankLoginParams;
     [READ_COMMANDS.OPEN_PLAID_BANK_ACCOUNT_SELECTOR]: Parameters.OpenPlaidBankAccountSelectorParams;

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -208,11 +208,10 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PROFILE.DISPLAY_NAME]: () => require('../../../pages/settings/Profile/DisplayNamePage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.TIMEZONE]: () => require('../../../pages/settings/Profile/TimezoneInitialPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: () => require('../../../pages/settings/Profile/TimezoneSelectPage').default as React.ComponentType,
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL]: () => require('../../../pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage').default as React.ComponentType,
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default as React.ComponentType,
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default as React.ComponentType,
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType,
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY]: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PROFILE.ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: () => require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: () => require('../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: () => require('../../../pages/settings/Profile/Contacts/NewContactMethodPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -14,11 +14,10 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.SETTINGS.PROFILE.PRONOUNS,
         SCREENS.SETTINGS.PROFILE.TIMEZONE,
         SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT,
-        SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL,
-        SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME,
-        SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH,
-        SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS,
-        SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY,
+        SCREENS.SETTINGS.PROFILE.LEGAL_NAME,
+        SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH,
+        SCREENS.SETTINGS.PROFILE.ADDRESS,
+        SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY,
     ],
     [SCREENS.SETTINGS.PREFERENCES.ROOT]: [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE, SCREENS.SETTINGS.PREFERENCES.LANGUAGE, SCREENS.SETTINGS.PREFERENCES.THEME],
     [SCREENS.SETTINGS.WALLET.ROOT]: [

src/libs/Navigation/linkingConfig/config.ts

@@ -190,24 +190,20 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL]: {
-                            path: ROUTES.SETTINGS_PERSONAL_DETAILS,
+                        [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: {
+                            path: ROUTES.SETTINGS_LEGAL_NAME,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: {
-                            path: ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME,
+                        [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: {
+                            path: ROUTES.SETTINGS_DATE_OF_BIRTH,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: {
-                            path: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH,
+                        [SCREENS.SETTINGS.PROFILE.ADDRESS]: {
+                            path: ROUTES.SETTINGS_ADDRESS,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: {
-                            path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS,
-                            exact: true,
-                        },
-                        [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY]: {
-                            path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.route,
+                        [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: {
+                            path: ROUTES.SETTINGS_ADDRESS_COUNTRY.route,
                             exact: true,
                         },
                         [SCREENS.SETTINGS.TWO_FACTOR_AUTH]: {

src/libs/Navigation/types.ts

@@ -88,11 +88,10 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.PROFILE.DISPLAY_NAME]: undefined;
     [SCREENS.SETTINGS.PROFILE.TIMEZONE]: undefined;
     [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: undefined;
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL]: undefined;
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: undefined;
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: undefined;
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: undefined;
-    [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY]: undefined;
+    [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: undefined;
+    [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: undefined;
+    [SCREENS.SETTINGS.PROFILE.ADDRESS]: undefined;
+    [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: undefined;
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: undefined;
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: undefined;
     [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: undefined;

src/libs/actions/PersonalDetails.ts

@@ -112,7 +112,7 @@ function updateLegalName(legalFirstName: string, legalLastName: string) {
         ],
     });
 
-    Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS);
+    Navigation.goBack();
 }
 
 /**
@@ -133,7 +133,7 @@ function updateDateOfBirth({dob}: DateOfBirthForm) {
         ],
     });
 
-    Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS);
+    Navigation.goBack();
 }
 
 function updateAddress(street: string, street2: string, city: string, state: string, zip: string, country: string) {
@@ -170,7 +170,7 @@ function updateAddress(street: string, street2: string, city: string, state: str
         ],
     });
 
-    Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS);
+    Navigation.goBack();
 }
 
 /**
@@ -241,7 +241,7 @@ function updateSelectedTimezone(selectedTimezone: SelectedTimezone) {
 /**
  * Fetches additional personal data like legal name, date of birth, address
  */
-function openPersonalDetailsPage() {
+function openPersonalDetails() {
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -272,7 +272,7 @@ function openPersonalDetailsPage() {
         },
     ];
 
-    API.read(READ_COMMANDS.OPEN_PERSONAL_DETAILS_PAGE, {}, {optimisticData, successData, failureData});
+    API.read(READ_COMMANDS.OPEN_PERSONAL_DETAILS, {}, {optimisticData, successData, failureData});
 }
 
 /**
@@ -455,7 +455,7 @@ export {
     clearAvatarErrors,
     deleteAvatar,
     getPrivatePersonalDetails,
-    openPersonalDetailsPage,
+    openPersonalDetails,
     openPublicProfilePage,
     updateAddress,
     updateAutomaticTimezone,

src/pages/settings/Profile/PersonalDetails/AddressPage.js

@@ -12,7 +12,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -122,7 +121,7 @@ function AddressPage({privatePersonalDetails, route}) {
             <HeaderWithBackButton
                 title={translate('privatePersonalDetails.address')}
                 shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
+                onBackButtonPress={() => Navigation.goBack()}
             />
             {isLoadingPersonalDetails ? (
                 <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />

src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js

@@ -18,7 +18,6 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -69,7 +68,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
         >
             <HeaderWithBackButton
                 title={translate('common.dob')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
+                onBackButtonPress={() => Navigation.goBack()}
             />
             {isLoadingPersonalDetails ? (
                 <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />

src/pages/settings/Profile/PersonalDetails/LegalNamePage.js

@@ -20,7 +20,6 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -90,7 +89,7 @@ function LegalNamePage(props) {
         >
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.legalName')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
+                onBackButtonPress={() => Navigation.goBack()}
             />
             {isLoadingPersonalDetails ? (
                 <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />