[$500] [MEDIUM] Web - IOU - "Category no longer valid" error message overlaps Category selection

[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!

---

Version Number: 1.4.32-2
Reproducible in staging?: y
Reproducible in production?: y
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Employee creates manual request with category selected on collect workspace chat
2. Admin disable the selected category on Old Dot
3. Employee navigates to detailed IOU request

Expected Result:

"Category no longer valid" error message should be under Category selection

Actual Result:

"Category no longer valid" error message overlaps Category selection

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

Bug6355201_1706220758310.Recording__1935.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01295a0277d76bca59
• Upwork Job ID: 1750645264825552896
• Last Price Increase: 2024-01-25

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #wave6-collect-submitters
CC @greg-schroeder

[eucool]

Proposal

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

"Category no longer valid" error message overlaps Category selection

What is the root cause of that problem?

Currently we display the violation message right below the category section in MoneyRequestView, as seen below:

App/src/components/ReportActionItem/MoneyRequestView.js

Lines 336 to 347 in ac94dc5

	<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
	<MenuItemWithTopDescription
	description={translate('common.category')}
	title={transactionCategory}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
	brickRoadIndicator={hasViolations('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
	/>
	{canUseViolations && <ViolationMessages violations={getViolationsForField('category')} />}
	</OfflineWithFeedback>

Also we pass negative margin in the Violation message component

App/src/components/ViolationMessages.tsx

Line 15 in ac94dc5

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

Hence the violation message goes at the top.

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

Add appropriate styling to display it right below at the end of category section. Remove the negative top margin and we're good to go

What alternative solutions did you explore? (Optional)

N/A

[BhuvaneshPatil]

Proposal

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

Web - IOU - "Category no longer valid" error message overlaps Category selection

What is the root cause of that problem?

We have added negative top margin in ViolationMessages component.

App/src/components/ViolationMessages.tsx

Line 15 in ac94dc5

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

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

We shall remove that negative margin. Because this can happen in all places as well where we're using violation message.

example -

Further, we can add top margin if the text is close to container of menu item. Depends on designer's approval.

What alternative solutions did you explore? (Optional)

We shall pass a prop styles to ViolationMessages, so we can only change the component at places we want.
For example here -

App/src/components/ReportActionItem/MoneyRequestView.js

Line 346 in ac94dc5

{canUseViolations && <ViolationMessages violations={getViolationsForField('category')} />}

This solution can handle the places we want, not global fix

result -

[Krishna2323]

This is a dupe, trying to find the original one.

[ikevin127]

Dupes: #35163 #34539
Only diff is they are looking for different expected result than the current one.

[BhuvaneshPatil]

@ikevin127 I don't think they are dupes.

[Krishna2323]

They are not, will tag the right one if I can find, its been only 3-4 days for it to be opened on GH.

[BhuvaneshPatil]

sure @Krishna2323

[greg-schroeder]

Awaiting proposal review

[BhuvaneshPatil]

Just a heads up @Ollyws , this Proposal was updated after I posted mine. Before that it didn't mention about negative margin.

[Ollyws]

Thanks I will get to these on Monday.

[Krishna2323]

Its being fixed here #34303
Dupe: #34944

[Ollyws]

Thanks @Krishna2323
I think we're good to close this one or hold on #34303

[amyevans]

Thanks! Probably simplest to just close it