[HOLD for payment 2024-03-11] [$500] Required label in push row should be removed if value is present

[m-natarajan]

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.42-1
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1708010208553859

Action Performed:

You need to have a workspace that required categories and tags

1. go to workspace chat
2. Click + and request money
3. Go to Manual
4. Add amount
5. Click continue
6. Add a category and a tag

Expected Result:

"Required" shouldn't appear on the category, tag, or merchant fields if already a value present. Note the required label isn't showing on the merchant field in the screenshot below because the PR to add that was just merged and I pulled the screenshot from stagign

Actual Result:

The required label persists even after the value is there.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012f130f43465b030a
• Upwork Job ID: 1758185700555239424
• Last Price Increase: 2024-02-15
• Automatic offers:
• aimane-chnaif | Reviewer | 0
• Pujan92 | Contributor | 0

[melvin-bot]

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

[mkhutornyi]

Proposal

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

Required label in push row should be removed if value is present

What is the root cause of that problem?

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 762 in d20ada6

rightLabel={isCategoryRequired ? translate('common.required') : ''}

There's no logic to hide Required label when field is empty

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

update condition like this: !iouCategory && isCategoryRequired ? translate('common.required') : ''

Apply same to tag, merchant

[Pujan92]

Proposal

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

Required label shows even though the value is present for the push row

What is the root cause of that problem?

At the moment we do not have any condition to not show the required label when the value for the push item is present.

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

As I am seeing rightLabel added only for showing the required value for the MenuItems at the moment, we can update the prop name like showRequiredLabel with the type boolean. We can consider the title value to prevent rendering the required label.

{!title && showRequiredLabel && (
    <View style={styles.justifyContentCenter}>
        <Text style={styles.rightLabelMenuItem}>{translate('common.required')}</Text>
    </View>
)}

App/src/components/MenuItem.tsx

Lines 612 to 616 in 20ca041

	{!!rightLabel && (
	<View style={styles.justifyContentCenter}>
	<Text style={styles.rightLabelMenuItem}>{rightLabel}</Text>
	</View>
	)}

Old

I can see we used rightLabel only for showing the required value for the MenuItems, so to generic solution we can consider the title value to prevent rendering the rightLabel.

!title && !!rightLabel

App/src/components/MenuItem.tsx

Lines 605 to 609 in 2fe384c

	{!!rightLabel && (
	<View style={styles.justifyContentCenter}>
	<Text style={styles.rightLabelMenuItem}>{rightLabel}</Text>
	</View>
	)}

Result

Screen.Recording.2024-02-15.at.22.54.57.mov

[aimane-chnaif]

This is exactly the same issue I reported here.
Happy to take this as C+

[melvin-bot]

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

[melvin-bot]

Current assignee @aimane-chnaif is eligible for the Internal assigner, not assigning anyone new.