[$250] Expense-When there is more than an expense,transaction thread header is not tappable

[izarutskaya]

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

---

Version Number: 1.4.67-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4522261
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Launch app
2. Tap on a report with no prior conversation
3. Create a submit expense
4. Open newly created expense and tap header
5. Note tapping header user directed to details page and transaction thread header is tappable.
6. Create another submit expense
7. Tap on header in details page of 2nd created expense
8. Note transaction thread header is not tappable. Tapping header doesn't trigger any action.
9. Now open 1st created expense and tap on header in details page
10. Now note for 1st expense also, transaction thread is not tappable.

Expected Result:

When there is more than one expense also , the transaction thread header must be tappable.

Actual Result:

When there is only one expense, the header is tappable. But, when there is more than one expense, the transaction thread header is not tappable.

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

Bug6464613_1714379187298.ippu.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f6dab494ed59d319
• Upwork Job ID: 1786024164842852352
• Last Price Increase: 2024-05-02
• Automatic offers:
• dukenv0307 | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[izarutskaya]

We think this issue might be related to the #collect project.

[bernhardoj]

Proposal

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

The report name in transaction thread is unclickable, but clickable when it's a one transaction page.

What is the root cause of that problem?

In one transaction page, the header is rendered with MoneyReportHeader which enable the shouldEnableDetailPageNavigation so the name is clickable and will open the report details page.

App/src/components/MoneyReportHeader.tsx

Lines 194 to 196 in 30bfabc

	<HeaderWithBackButton
	shouldShowReportAvatarWithDisplay
	shouldEnableDetailPageNavigation

In the transaction thread, the header uses MoneyRequestHeader which doesn't have shouldEnableDetailPageNavigation prop, so only the avatar is clickable and the user profile will open if clicked.

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

Enable shouldEnableDetailPageNavigation in MoneyRequestHeader too

OR

Disable shouldEnableDetailPageNavigation if it's a one-transaction page.
shouldEnableDetailPageNavigation={!transactionThreadReport}

What alternative solutions did you explore? (Optional)

Wrap the report name too with the pressable so it's clickable and will open the user profile page.

App/src/components/AvatarWithDisplayName.tsx

Lines 111 to 156 in 30bfabc

	<PressableWithoutFeedback
	onPress={showActorDetails}
	accessibilityLabel={title}
	role={CONST.ROLE.BUTTON}
	>
	{shouldShowSubscriptAvatar ? (
	<SubscriptAvatar
	backgroundColor={avatarBorderColor}
	mainAvatar={icons[0]}
	secondaryAvatar={icons[1]}
	size={size}
	/>
	) : (
	<MultipleAvatars
	icons={icons}
	size={size}
	secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
	/>
	)}
	</PressableWithoutFeedback>
	<View style={[styles.flex1, styles.flexColumn]}>
	<DisplayNames
	fullTitle={title}
	displayNamesWithTooltips={displayNamesWithTooltips}
	tooltipEnabled
	numberOfLines={1}
	textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
	shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
	/>
	{Object.keys(parentNavigationSubtitleData).length > 0 && (
	<ParentNavigationSubtitle
	parentNavigationSubtitleData={parentNavigationSubtitleData}
	parentReportID={report?.parentReportID}
	parentReportActionID={report?.parentReportActionID}
	pressableStyles={[styles.alignSelfStart, styles.mw100]}
	/>
	)}
	{!!subtitle && (
	<Text
	style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre]}
	numberOfLines={1}
	>
	{subtitle}
	</Text>
	)}
	</View>

[melvin-bot]

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

[melvin-bot]

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