[Due for payment 2025-02-26] [$250] Track expense - Track expense preview shows expense category, but no option to edit it

[vincdargento]

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: 9.0.86-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5460923
Email or phone of affected tester (no customers): Mac 15.0 / Chrome
Issue reported by: Applause Internal Team
Device used: applausetester+100106kh@applause.expensifail.com
App Component: Money Requests

Action Performed:

1. Go to staging.expensify.com
2. Go to Expenses.
3. Create an unreported expense with a category.
4. Go to staging.new.expensify.com
5. Go to self DM.
6. Click on the expense preview.

Expected Result:

In Step 5, since the preview shows expense category, there should be an option to edit it in the transaction thread, or it should be hidden from the expense preview.

Actual Result:

The expense preview shows expense category, but there is no way to edit it.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021880190438649522811
• Upwork Job ID: 1880190438649522811
• Last Price Increase: 2025-02-05

Issue Owner

Current Issue Owner: @laurenreidexpensify

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (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.

[bernhardoj]

Proposal

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

Track expense preview shows expense category even though we can't edit it.

What is the root cause of that problem?

Currently, we always show the category as long as it exists.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 151 in 5133090

const shouldShowCategoryOrTag = shouldShowTag || !!category;

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

We can follow the same condition of shouldShowTag by only showing it on a policy expense chat.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 150 to 151 in 5133090

	const shouldShowTag = !!tag && isPolicyExpenseChat;
	const shouldShowCategoryOrTag = shouldShowTag || !!category;

const shouldShowCategory = !!category && isPolicyExpenseChat
const shouldShowCategoryOrTag = shouldShowTag || shouldShowCategory;

We need to update the category condition here too to use shouldShowCategory.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 437 to 440 in 5133090

	{shouldShowCategoryOrTag && (
	<View style={[styles.flexRow, styles.pt1, styles.alignItemsCenter]}>
	{!!category && (
	<View

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

We can do a UI test of MoneyRequestPreviewContent and pass it a self DM chatReport and a transaction with category and assert that the category text doesn't show.

[daledah]

Proposal

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

The expense preview shows expense category, but there is no way to edit it.

What is the root cause of that problem?

We only show the category in:

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 181 in 5133090

const shouldShowCategory = isPolicyExpenseChat && (transactionCategory || OptionsListUtils.hasEnabledOptions(policyCategories ?? {}));

if it is isPolicyExpenseChat, so track expense preview shows expense category, but no option to edit it.

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

We can update the condition to show the category to:

    const shouldShowCategory = (isTrackExpense && transactionCategory) || (isPolicyExpenseChat && (transactionCategory || OptionsListUtils.hasEnabledOptions(policyCategories ?? {})));

Then update the ability to edit this field:

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 620 to 621 in 5133090

	interactive={canEdit}
	shouldShowRightIcon={canEdit}

                            interactive={canEdit && !isTrackExpense}
                            shouldShowRightIcon={canEdit && !isTrackExpense}

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

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @daledah Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

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

[melvin-bot]

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

[fedirjh]

In Step 5, since the preview shows expense category, there should be an option to edit it in the transaction thread, or it should be hidden from the expense preview.

cc @laurenreidexpensify What should be expected results in this case :

1. Hide category from expense preview.
2. Display the category option in the transaction thread with a disabled state.
3. Display the category option in the transaction and add the functionality to edit it ? (I think this not currently implemented)