[HOLD for payment 2024-03-26] [$500] [Wave Collect] [Ideal Nav] Area around account avatar icon is not actionable like chat icon

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.52-6
Reproducible in staging?: y
Reproducible in production?: new feature
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
Expensify/Expensify Issue URL:
Issue reported by: @mountiny
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710430323502599

Action Performed:

1. Open URL and sign in
2. Hover over the area surrounding the account avatar icon
3. Repeat the same with chat icon

Expected Result:

The area around the account icon should be pressable

Actual Result:

No area around the icon is pressable unlike chat icon

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.2852.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0159d68ee4dad5dcf1
• Upwork Job ID: 1768571011952791552
• Last Price Increase: 2024-03-18
• Automatic offers:
• paultsimura | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[bernhardoj]

Proposal

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

The are around the user profile avatar isn't clickable like the chat button.

What is the root cause of that problem?

The profile avatar button is wrapped with a View that has a center styling.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 89 to 91 in f1f22c7

	<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
	</View>

So, the clickable area is just the centered pressable.

If we look at the chat button, we also have the center style, but we apply it to the pressable itself, so the children are centered, but the whole element is still clickable.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 64 to 86 in f1f22c7

	<PressableWithFeedback
	onPress={() => {
	Navigation.navigate(ROUTES.HOME);
	}}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('common.chats')}
	wrapperStyle={styles.flex1}
	style={styles.bottomTabBarItem}
	>
	<Tooltip text={translate('common.chats')}>
	<View>
	<Icon
	src={Expensicons.ChatBubble}
	fill={currentTabName === SCREENS.HOME ? theme.iconMenu : theme.icon}
	width={variables.iconBottomBar}
	height={variables.iconBottomBar}
	/>
	{chatTabBrickRoad && (
	<View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />
	)}
	</View>
	</Tooltip>
	</PressableWithFeedback>

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

1. Remove the BottomTabAvatar View wrapper
2. In BottomTabAvatar, wrap the children with a pressable. The pressable with have the center style (the same style we have for the chat button).

let children;
if (emojiStatus) children = <AvatarWithOptionalStatus .../>
else children = <PressableAvatarWithIndicator .../>

return <PressableWithFeedback>{children}</PressableWithFeedback>

3. Remove the pressable from PressableAvatarWithIndicator (we will rename it to AvatarWithIndicator)
4. Replace the pressable in AvatarWithOptionalStatus with a View.

[ghost]

Proposal

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

Area around account avatar icon is not actionable like chat icon

What is the root cause of that problem?

The root cause of this issue is that here :

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 89 to 91 in f1f22c7

	<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
	</View>

The account avatar is wrapped in a view because of which the area around the account avatar is not actionable like the area around the chat icon.

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

To make the area around the account avatar actionable like the chat icon we need to wrap it with PressableWithFeedback in the same was as chat icon i.e. like this -

<PressableWithFeedback
                onPress={() => {
                    Navigation.navigate(ROUTES.HOME);
                }}
                role={CONST.ROLE.BUTTON}
                accessibilityLabel={translate('common.chats')}
                wrapperStyle={styles.flex1}
                style={styles.bottomTabBarItem}
            >
                <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
                    <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
                </View>
            </PressableWithFeedback>

What alternative solutions did you explore? (Optional)

N/A

Result :

Screen.Recording.2024-03-15.at.9.16.28.AM.mp4

[ghost]

Updated Proposal

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

⚠️ This issue has had its price increased by 4x or more. Please review the issue and ensure the price is correct.

[melvin-bot]

Upwork job price has been updated to $250

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @bernhardoj 🎉 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 📖

[mountiny]

@bernhardoj Can you raise a PR for this please?

[bernhardoj]

PR is here #38380

[ghost]

@mountiny @paultsimura i don't think that my proposal has been even checked out or even reviewed.

[attractive-ang-vue-react-dev]

The main issue is in the layout definition of these 3 elements using a flex grid.
Instead of display: flex; use block and inline-block properties for parent and child elements and set the static width of each element.

[melvin-bot]

📣 @attractive-vue-dev! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

⚠️ Unable to store contributor details.

[attractive-ang-vue-react-dev]

[attractive-ang-vue-react-dev]

Contributor details
Expensify account email: [[email protected]]
Upwork Profile Link: https://www.upwork.com/freelancers/~019904ef989290e55b

[paultsimura]

@mountiny could you please bump the price to $500 according to this?

[melvin-bot]

Upwork job price has been updated to $500

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.54-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix area around bottom tab avatar isn't clickable #38380

If no regressions arise, payment will be issued on 2024-03-26. 🎊

For reference, here are some details about the assignees on this issue:

• @paultsimura requires payment automatic offer (Reviewer)
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@paultsimura] The PR that introduced the bug has been identified. Link to the PR:
• [@paultsimura] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@paultsimura] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@paultsimura] Determine if we should create a regression test for this bug.
• [@paultsimura] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@stephanieelliott] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[stephanieelliott]

Hey @paultsimura can you please complete the BZ checklist when you get a sec?

[paultsimura]

This was an improvement follow-up request after the Ideal Nav PR, so nothing specific to blame as an offending PR.

• The PR that introduced the bug has been identified. Link to the PR:
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug: No – this component is quite static and doesn't change much, so I don't think we need a regression test. Please let me know if you think otherwise.

[stephanieelliott]

All paid! Summarizing payment on this issue:

• Contributor: @paultsimura $500 PAID via Upwork
• Contributor+: @bernhardoj $500 PAID via Upwork

Upwork job is here: https://www.upwork.com/jobs/~0159d68ee4dad5dcf1

[paultsimura]

@stephanieelliott sorry, but the agreed amount on this issue was $500 – context – it's also reflected in the issue title.

[stephanieelliott]

@paultsimura the Upwork job had been set at $250 so this was paid in 2 payments -- one $250 milestone payment, and one $250 bonus payment, so you should've received $500 total:

[paultsimura]

My bad: I just noticed the payment summary but didn't check Upwork. My apologies 🙇

[stephanieelliott]

No worries! That was my mistake on the summary, just updated it! 😄