[User Settings] Implement new Profile view

If you haven’t already, check out our contributing guidelines for onboarding!

---

We’re adding a new profile view that will display a right-docked modal with a user’s avatar, primary login, as well as their first name, last name, pronouns, and timezone (as applicable, depending on what data the user has filled out. This page will mimic the current SettingsPage.js view with a few key differences

• No Settings title
• No Sign Out button
• New (non-editable) fields with titles that are displayed/hidden depending on what the user has filled out in the personalDetails onyx key)
  • Email
  • Phone Number
  • Preferred Pronouns
  • Local Time

Deliverables:

• Update HeaderView.js to display a clickable icon associated with the given chat (report.icons)
  • 
  • You can reuse the MultipleAvatars.js component for this
  • If the chat has multiple participants (report.participants > 1) clicking on the icon should do nothing
  • Otherwise, the chat is a direct message (having only one participant) and clicking on the icon should open the Profile page for that report.participant
    • This works similarly to how the Settings page opens up when a user clicks on their own avatar in the sidebar
• Add two new routes to Routes.js
  • Profile: '/profile/:login
  • getProfileRoute: login => `/profile/${login}`
• Create the right-docked modal “Profile” page following the example of the “Settings” page and refactoring as necessary
  • The profile page should take in the login associated with the report.participant as a prop
  • That login will be used to get the associated personalDetail object for that user from the personalDetails onyx key
    • That object will contain the information to be displayed for this user on their Profile page.

Mobile

No Details Filled Out	All Details Filled Out

Web/Desktop

No Details Filled Out	All Details Filled Out

Upwork Link: https://www.upwork.com/jobs/~01f46c14a330e02af6

[Maftalion]

Thanks! I was totally using Expensify.cash, but it worked when using Expensify.com.

Mostly B I think haha.

Basically I think since we can get the report from the code i posted above, it’s no longer necessary to pass login through the route itself (it also made me have to make some changes to the right docked modal bc it didn’t support dynamic paths).

We would still need PERSONAL_DETAILS to get all the other data outside of login/avatar.

[NikkiWines]

Basically I think since we can get the report from the code i posted above, it’s no longer necessary to pass login through the route itself

Ah, I see what you’re saying. Since we have to click on the avatar of a currently viewed chat to open the profile modal we can use currentlyViewedReportID instead of explicitly passing the login. Nice, that sounds great to me, and it keeps things a little simpler which is always good.

We would still need PERSONAL_DETAILS to get all the other data outside of login/avatar.

Yes exactly. I was hoping you weren’t asking option A.

wrt your other three options, I think your original suggestion has the cleanest implementation - let’s go with that.