[User Settings] Add new Settings/Profile view

[trjExpensify]

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

---

Having added four new menu items to the Settings page, we now need to begin linking those menu items to actual pages. This issue pertains to the Profile page.

The Profile view will be displayed when the "Profile" menu item is clicked. It will display a header with a left-facing arrow on the left-hand side, a title, and an X button to close the view on the right-hand side. The view will contain the following:

• Non-Editable User Avatar
• A prompt stating Tell us about yourself, we would love to get to know you!
• Fields for First Name and Last Name
• A preferred pronoun dropdown
  • If the user selected Self-select from the dropdown we will display a text field below the dropdown
• A text field for an email address or phone number, depending on which is the user's primary login
• A dropdown for selecting a time zone
• A check box with the label set my timezone automatically
• A save button

Deliverables

• Clicking on the Profile menu item on the Settings page will route the user to settings/profile via ROUTES.getSettingsRoute and display the new view
• Pressing X should close the right-handle modal and redirect the user to their last viewed report
• Pressing < should route the user back to the main settings page:
• The first name, last name, pronouns, and timezone should be filled with data from the myPersonalDetails onyx key if it has been filled out
  • If no values have been filled for the first and last name we should display placeholder values John and Doe for the first and last name, respectively.
  • Use the react-native-picker-select library to implement the dropdown for pronouns selection
  • In the user chooses Self-Select then we should display a text field for the user to enter their pronouns of choice

Overall Display:

Primary Login:

• Get the user's primary login from myPersonalDetails.login and display it in the text box associated with that login type (Email/Phone Number). This field should be un-editable.

Pronouns Dropdown:

Pronouns Dropdown	Self Select with Text Field

TimeZone:

• Get timezone.selected and timezone.automatic from the myPersonalDetails onyx key

• Use moment-timezone to get a list of timezones to display in the timezone dropdown

  • The timezone should default to timezone.selected if it exists and to "America/Los_Angeles" if it doesn't

• The Set my timezone automatically checkbox should default to timezone.automatic if it exists and true if it doesn't

• Save:

  • Call PersonalDetails.setPersonalDetails with an object containing the user's avatarURL, first name, last name, pronouns, and timeZone

Upwork Link: https://www.upwork.com/jobs/~0180f7fc7a6469866e

[Maftalion]

Proposal

• On the Profile page, I'd set up the form to match the screenshots above. fields being prefilled based on the data from myPersonalDetails
• Special handling on the Preferred Pronouns field to add an additional text field if Self-select is selected and send that value instead
• Email/PN field will be determined using myPersonalDetails.login using isSMSLogin from the Str utils
• timezone will be defaulted to selected and America/Los_Angeles. Using moment-timezone to get the list to populate the dropdown and if automatic is set then the value be set to the users timezone automatically and disabled
• Save button will call both setPersonalDetails and PersonalDetails.setTimezone

Questions

• The user's secondary login modifications will be saved when we call User.addSecondaryLogin so there is no need to save it here.

What do you mean by this?

• What should occur once save is successful/unsuccessful
• The bottom screenshots have an "edit photo" button, is that part of this ticket?
• I don't see PersonalDetails.setTimezone where does that action live?

[pathakarjun]

Hi, I would love the opportunity to work on this issue!

My proposal:

• When the user clicks on Profile menu item, route the user to settings/profile using the already available route.

• Use the existing close and < buttons to handle the action related to either going to last report or navigating back to main setting.

• Use react-native-picker-select library to implement dropdown for pronoun selection of the user.

• If user selects Self Select, allow them to enter their pronoun using a text input field component already available.

• Connect with Onyx Store and load the user details.

• Use the details for the login type from myPersonalDetails.login to show un-editable fields of primary login detail.

• Get timezone detail from Onyx and use moment-timezone to display the timezone dropdown.

• Finally, save Personal Details calling the PersonalDetails.set function with required variables.

• Also, call PersonalDetails.setTimeZone with the selected timezone.

[NikkiWines]

@Maftalion to answer your questions:

The user's secondary login modifications will be saved when we call User.addSecondaryLogin so there is no need to save it here.

Ah, that's in here by mistake sorry - removed.

What should occur once save is successful/unsuccessful

We were originally considering a snackbar/growl for success/failure but considered it out of scope for this issue - there doesn't need to be any sort of indicator for success at this time.

The bottom screenshots have an "edit photo" button, is that part of this ticket?

Nope, that'll be handled in a follow-up issue!

I don't see PersonalDetails.setTimezone where does that action live?

This is a little out of date sorry - the timezone will be updated if you include it in the details object passed to setPersonalDetails() - updated the OP to reflect this.