[$250] Need mocks for Edit profile option in personal RHP profile

[tpalmerton]

Problem: Customers open their own profile in the RHP (right hand pane) and try to edit their profile, but click around to figure out that’s not a function. Then they get frustrated because they want to update their profile but are unsure how to do so.

Solution: Implement a direct link within the personal profile page in the RHP that routes customers to their profile settings. This will streamline the process, allowing them to easily update their information without additional navigation.

https://expensify.slack.com/archives/C07HPDRELLD/p1741099233250809

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897151208532805125
• Upwork Job ID: 1897151208532805125
• Last Price Increase: 2025-03-05
• Automatic offers:
• twilight2294 | Contributor | 106432980

Issue Owner

Current Issue Owner: @jayeshmangwani

[dubielzyk-expensify]

Added mock to original post

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

Triggered auto assignment to @jliexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Current assignee @dubielzyk-expensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[twilight2294]

Proposal

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

Add new edit profile button

What is the root cause of that problem?

feature request

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

We need to introduce a new menuItem and route to profile page if the page is a self dm profile here here

{isCurrentUser && (
    <MenuItem
        shouldShowRightIcon
        title={'Edit your Profile'} // This wil be trasnalted in es.ts file as well
        icon={Expensicons.Pencil}
        onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
    />
)}

We can use isSelfDM check as well:

Minor style adjustments will be done during PR phase

Screen.Recording.2025-03-05.at.11.08.04.AM.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A UI bug, but we can write up a UI test which will render the profile screen for self dm and will check to see if we have the option to edit your profile

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

Add Edit profile option in personal RHP profile

What is the root cause of that problem?

New feature

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

Test branch: https://github.com/nkdengineer/App/tree/fix/57809

1. Add the Edit profile row here, we also need to add the translation for Edit your Profile

{isCurrentUser && (
    <MenuItem
        shouldShowRightIcon
        title={'Edit your Profile'}
        icon={Expensicons.Pencil}
        onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE.getRoute(Navigation.getActiveRoute()))}
    />
)}

App/src/pages/ProfilePage.tsx

Line 280 in ad7462d

</View>

2. We need to add backTo parameter to the profile setting page. Then, we can use this to go back to the profile RHP when clicking on the back button in the settings on the profile page on the small screen.

SETTINGS_PROFILE: {
    route: 'settings/profile',
    getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile', backTo),
},

App/src/ROUTES.ts

Line 130 in ad7462d

SETTINGS_PROFILE: 'settings/profile',

const route = useRoute<PlatformStackRouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.ROOT>>();
onBackButtonPress={() => Navigation.goBack(route.params?.backTo)}

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

Line 151 in ad7462d

onBackButtonPress={() => Navigation.goBack()}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is the new UI, I think we don't need to test it. If we want to add a test, we can render ProfilePage with the accountID param is the current user accountID and verify that the Edit your profile route appears.

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2025-03-05.at.13.43.26.mov

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[twilight2294]

Note

note to C+ reviewer that the navigation would had been easily done during the PR phase and my proposal fixes the original feature request, so please consider that during PR review. as the other contributors proposal is just an extension of my proposal

[jayeshmangwani]

Thanks for the proposals, @twilight2294 and @nkdengineer!

This is a new feature, and the implementation should be straightforward. @nkdengineer you added additional details for onBackButtonPress, but in my opinion, that could have been handled during PR testing. So, I think we can proceed with @twilight2294's Proposal. Thanks! 🙏

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[twilight2294]

bump for assignment @yuwenmemon

[jayeshmangwani]

@yuwenmemon, whenever you get a chance, please review this comment for the selected proposal. Thanks! 🙏

[melvin-bot]

📣 @twilight2294 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[twilight2294]

PR ready for review @jayeshmangwani