Add new Profile page

src/ONYXKEYS.js

@@ -45,6 +45,9 @@ export default {
     // Contains all the personalDetails the user has access to
     PERSONAL_DETAILS: 'personalDetails',
 
+    // Contains all the personalDetails the user has access to, keyed by accountID
+    PERSONAL_DETAILS_LIST: 'personalDetailsList',
+
     // Contains all the private personal details of the user
     PRIVATE_PERSONAL_DETAILS: 'private_personalDetails',
 

src/ROUTES.js

@@ -114,10 +114,12 @@ export default {
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',
     getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`,
+    PROFILE: 'a/:accountID',
+    getProfileRoute: (accountID) => `a/${accountID}`,
     REPORT_PARTICIPANTS: 'r/:reportID/participants',
     getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`,
-    REPORT_PARTICIPANT: 'r/:reportID/participants/details',
-    getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/details?login=${encodeURIComponent(login)}`,
+    REPORT_PARTICIPANT: 'r/:reportID/participants/a/:accountID',
+    getReportParticipantRoute: (reportID, accountID) => `r/${reportID}/participants/a/${accountID}`,
     REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
     getReportDetailsRoute: (reportID) => `r/${reportID}/details`,
     REPORT_SETTINGS: 'r/:reportID/settings',

src/components/BlockingViews/BlockingView.js

@@ -20,7 +20,7 @@ const propTypes = {
     title: PropTypes.string.isRequired,
 
     /** Subtitle message below the title */
-    subtitle: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
 
     /** Link message below the subtitle */
     link: PropTypes.string,
@@ -40,6 +40,7 @@ const propTypes = {
 
 const defaultProps = {
     iconColor: themeColors.offline,
+    subtitle: '',
     shouldShowLink: false,
     link: 'notFound.goBackHome',
     iconWidth: variables.iconSizeSuperLarge,

src/components/ReportWelcomeText.js

@@ -55,6 +55,7 @@ const ReportWelcomeText = (props) => {
     const isChatRoom = ReportUtils.isChatRoom(props.report);
     const isDefault = !(isChatRoom || isPolicyExpenseChat);
     const participants = lodashGet(props.report, 'participants', []);
+    const participantAccountIDs = lodashGet(props.report, 'participantAccountIDs', []);
     const isMultipleParticipant = participants.length > 1;
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails), isMultipleParticipant);
     const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(props.report);
@@ -97,7 +98,7 @@ const ReportWelcomeText = (props) => {
                                 <Tooltip text={tooltip}>
                                     <Text
                                         style={[styles.textStrong]}
-                                        onPress={() => Navigation.navigate(ROUTES.getDetailsRoute(participants[index]))}
+                                        onPress={() => Navigation.navigate(ROUTES.getProfileRoute(participantAccountIDs[index]))}
                                     >
                                         {displayName}
                                     </Text>

src/languages/en.js

@@ -44,6 +44,7 @@ export default {
         and: 'and',
         details: 'Details',
         privacy: 'Privacy',
+        hidden: 'Hidden',
         delete: 'Delete',
         archived: 'archived',
         contacts: 'Contacts',

src/languages/es.js

@@ -43,6 +43,7 @@ export default {
         and: 'y',
         details: 'Detalles',
         privacy: 'Privacidad',
+        hidden: 'Oculto',
         delete: 'Eliminar',
         archived: 'archivado',
         contacts: 'Contactos',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -131,6 +131,16 @@ const DetailsModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const ProfileModalStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const ProfilePage = require('../../../pages/ProfilePage').default;
+            return ProfilePage;
+        },
+        name: 'Profile_Root',
+    },
+]);
+
 const ReportDetailsModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
@@ -223,8 +233,8 @@ const ReportParticipantsModalStackNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const DetailsPage = require('../../../pages/DetailsPage').default;
-            return DetailsPage;
+            const ProfilePage = require('../../../pages/ProfilePage').default;
+            return ProfilePage;
         },
         name: 'ReportParticipants_Details',
     },
@@ -725,6 +735,7 @@ export {
     IOUSendModalStackNavigator,
     SplitDetailsModalStackNavigator,
     DetailsModalStackNavigator,
+    ProfileModalStackNavigator,
     ReportDetailsModalStackNavigator,
     TaskModalStackNavigator,
     ReportSettingsModalStackNavigator,

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js

@@ -34,6 +34,11 @@ function RigthModalNavigator() {
                 options={defaultModalScreenOptions}
                 component={ModalStackNavigators.DetailsModalStackNavigator}
             />
+            <Stack.Screen
+                name="Profile"
+                options={defaultModalScreenOptions}
+                component={ModalStackNavigators.ProfileModalStackNavigator}
+            />
             <Stack.Screen
                 name="Report_Details"
                 options={defaultModalScreenOptions}

src/libs/Navigation/linkingConfig.js

@@ -278,6 +278,11 @@ export default {
                             Details_Root: ROUTES.DETAILS,
                         },
                     },
+                    Profile: {
+                        screens: {
+                            Profile_Root: ROUTES.PROFILE,
+                        },
+                    },
                     Participants: {
                         screens: {
                             ReportParticipants_Root: ROUTES.REPORT_PARTICIPANTS,

src/libs/ReportUtils.js

@@ -1057,14 +1057,14 @@ function getReport(reportID) {
  * @param {Object} report
  */
 function navigateToDetailsPage(report) {
-    const participants = lodashGet(report, 'participants', []);
+    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
 
     if (isChatRoom(report) || isPolicyExpenseChat(report) || isThread(report)) {
         Navigation.navigate(ROUTES.getReportDetailsRoute(report.reportID));
         return;
     }
-    if (participants.length === 1) {
-        Navigation.navigate(ROUTES.getDetailsRoute(participants[0]));
+    if (participantAccountIDs.length === 1) {
+        Navigation.navigate(ROUTES.getProfileRoute(participantAccountIDs[0]));
         return;
     }
     Navigation.navigate(ROUTES.getReportParticipantsRoute(report.reportID));

src/libs/actions/PersonalDetails.js

@@ -310,6 +310,49 @@ function openPersonalDetailsPage() {
     API.read('OpenPersonalDetailsPage');
 }
 
+/**
+ * Fetches public profile info about a given user.
+ * The API will only return the accountID, displayName, and avatar for the user
+ * but the profile page will use other info (e.g. contact methods and pronouns) if they are already available in Onyx
+ * @param {Number} accountID
+ */
+function openPublicProfilePage(accountID) {
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+            value: {
+                [accountID]: {
+                    isLoading: true,
+                },
+            },
+        },
+    ];
+    const successData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+            value: {
+                [accountID]: {
+                    isLoading: false,
+                },
+            },
+        },
+    ];
+    const failureData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+            value: {
+                [accountID]: {
+                    isLoading: false,
+                },
+            },
+        },
+    ];
+    API.read('OpenPublicProfilePage', {accountID}, {optimisticData, successData, failureData});
+}
+
 /**
  * Updates the user's avatar image
  *
@@ -427,6 +470,7 @@ export {
     deleteAvatar,
     openMoneyRequestModalPage,
     openPersonalDetailsPage,
+    openPublicProfilePage,
     extractFirstAndLastNameFromAvailableDetails,
     updateDisplayName,
     updateLegalName,