[$500] Dev: Web - The profile preview header displays "Profile avatar" instead of "Profile picture"

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to Settings > Profile
2. Upload a picture as your profile picture
3. Click on the profile picture
4. Click "View photo"

Expected Result:

The profile preview header should display "Profile picture" since "Avatar" is typically reserved for system pictures

Actual Result:

The profile preview header incorrectly shows "Profile avatar" instead of "Profile picture" when viewing the uploaded picture

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

**Version Number:**Dev 1.3.71.5
Reproducible in staging?: n
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-recording-2023-09-19-at-44945-pm_HFALdHpw.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ayazhussain79
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695124664035289

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019e666bdf8b410257
• Upwork Job ID: 1704134028522778624
• Last Price Increase: 2023-09-19

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019e666bdf8b410257

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Web - The profile preview header displays "Profile avatar" instead of "Profile picture"

What is the root cause of that problem?

The title is Profile avatar here

App/src/pages/settings/Profile/ProfilePage.js

Line 130 in 778f763

headerTitle={props.translate('profilePage.profileAvatar')}

What changes do you think we should make in order to solve the problem?

We should change the translation of this to Profile picture

App/src/pages/settings/Profile/ProfilePage.js

Line 130 in 778f763

headerTitle={props.translate('profilePage.profileAvatar')}

What alternative solutions did you explore? (Optional)

[getusha]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile preview header title is Profile avatar instead of profile picture.

What is the root cause of that problem?

Currently the header title is set to profileAvatar which means the title will remain even if the profile is not a default avatar.

App/src/pages/settings/Profile/ProfilePage.js

Line 130 in 778f763

headerTitle={props.translate('profilePage.profileAvatar')}

What changes do you think we should make in order to solve the problem?

We should check if the avatar is a default avatar and change the title accordingly we can change the title to 'Profile picture' or display the name of the account as the header title.

headerTitle={UserUtils.isDefaultAvatar(avatarURL) ? props.translate('profilePage.profileAvatar') : props.translate('profilePage.profilePicture') }

What alternative solutions did you explore? (Optional)

[jeet-dhandha]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Wrong Title is shown when previewing a Profile Photo.

What is the root cause of that problem?

• Its showing the title of Profile avatar instead of Profile picture.

• Add avatar preview feature #22145

Introduced in above PR.

• Add avatar preview feature #22145 (comment) (Comment which asked to change to Profile picture)

What changes do you think we should make in order to solve the problem?

• We will add translation key profilePicture in en.ts and es.ts

• EN - Profile picture

• ES - Foto de perfil

And we will make change in ProfilePage, changing profileAvatar to profilePicture.

What alternative solutions did you explore? (Optional)

[lcsvcn]

Proposal

Please re-state the problem that we are trying to solve in this issue

All Environments - The profile preview header displays "Profile avatar" instead of "Profile picture"

What is the root cause of that problem?

The cause of the problem is that there is no Profile Picture text in the language folder files. To solve it, we just need to add.

What changes do you think we should make in order to solve the problem?

Since we don't allow users to view its avatar, since we just show the "view photo" button when they add a photo for their profile picture, we should replace it in the headerTitle for the AvatarWithImagePicker, as the following:

At src/pages/settings/Profile/ProfilePage.js:

<AvatarWithImagePicker
    (...)
    headerTitle={props.translate('profilePage.profilePicture')}
/>

At en.ts:

profilePage: {
   (...)
    profilePicture: 'Profile picture', 
},

At es.ts:

profilePage: {
    (...)
    profilePicture: 'Imagen de perfil' // or 'Foto de perfil', but it would be more close to 'Profile Photo'
},

This is a screenshot working locally, with the changes that I mention above.

Screenshot

Here are my suggested changes for review

If my proposal is accepted, I can open a PR in a few hours to fix this. Thank you!

What alternative solutions did you explore? (Optional)

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Web - The profile preview header displays "Profile avatar" instead of "Profile picture"

What is the root cause of that problem?

We are using profileAvatar here

App/src/pages/settings/Profile/ProfilePage.js

Line 130 in 4969433

headerTitle={props.translate('profilePage.profileAvatar')}

Perhaps this is the root cause.

What changes do you think we should make in order to solve the problem?

We need to apply following changes:

• Add profilePicture: Profile picture here
  

  App/src/languages/en.ts

  Line 588 in 4969433

  profileAvatar: 'Profile avatar',

• Replace profileAvatar with profilePicture here
  

  App/src/pages/settings/Profile/ProfilePage.js

  Line 130 in 4969433

  headerTitle={props.translate('profilePage.profileAvatar')}

What alternative solutions did you explore? (Optional)

NA

Result:

[joekaufmanexpensify]

I don't think this is a bug. Discussing here.