[$250] WS - "Rule" tab has unnecessarly long input field for "Days" section

[IuliiaHerets]

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: v9.0.26-1
Reproducible in staging?: Y
Reproducible in production?: Can't check
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Access staging.new.expensify.com
2. Sign into a valid account
3. Go to Workspace > Workflow > Enable rules
4. Go to "Max Expense Age'" and input a very high number (Note that this field is for Flagging spend older than a specific number of days.)

Expected Result:

User expects that there is a limit of days that can be input and that this limit is reasonable

Actual Result:

User can input absurdly large number of days, numbers that are highly unrealistic for a field like this

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6586795_1724948360909.Absurd_number_of_days.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0183e993ca7b36650e
• Upwork Job ID: 1831043219902619216
• Last Price Increase: 2024-09-03
• Automatic offers:
• ishpaul777 | Reviewer | 103822043
• Nodebrute | Contributor | 103822045

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot]

Triggered auto assignment to @chiragsalian (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[puneetlath]

Demoting since rules are in beta

[neonbhai]

Proposal

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

"Rule" tab has unnecessarly long input field for "Days" section

What is the root cause of that problem?

We set the maxLength for this field to be 50 characters long:

App/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx

Line 83 in b188243

maxLength={CONST.FORM_CHARACTER_LIMIT}

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

We will update the maxLength here to a reasonable number, ex. 4 or 5

[Nodebrute]

Proposal

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

The "Rule" tab has unnecessarily long input field for the "Days" section

What is the root cause of that problem?

We are setting the maxlength to 50

App/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx

Line 83 in e054a71

maxLength={CONST.FORM_CHARACTER_LIMIT}

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

Remove maxLength from here

App/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx

Line 83 in e054a71

maxLength={CONST.FORM_CHARACTER_LIMIT}

and in here we should add the limit on digits we can do something like this

 // replace all characters that are not spaces or digits
        let validMaxExpenseAge = newValue.replace(/[^0-9]/g, '');
    // gets only the first 5 digits if the inputted number have more digits than that
        validMaxExpenseAge = validMaxExpenseAge.match(/(?:\d *){1,5}/)?.[0] ?? '';
        setMaxExpenseAgeValue(validMaxExpenseAge);

In the above code we can add limit of our choice. This is the same approach we follow in PaymentCardForm

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Lines 179 to 184 in b188243

	const onChangeCardNumber = useCallback((newValue: string) => {
	// replace all characters that are not spaces or digits
	let validCardNumber = newValue.replace(/[^\d ]/g, '');
	// gets only the first 16 digits if the inputted number have more digits than that
	validCardNumber = validCardNumber.match(/(?:\d *){1,16}/)?.[0] ?? '';

Why should we prefer this approach over using max_length? The difference is that when copying numbers with spaces and pasting them here, max_length will count the spaces as well, which can affect the input.

With `maxLength={5}`

Screen.Recording.2024-08-29.at.11.33.26.PM.mov

With my solution

Screen.Recording.2024-08-29.at.11.36.46.PM.mov

The proposed solution will make this field's behavior consistent with the other fields on the rules page. In this field max limit is 8

Screen.Recording.2024-08-29.at.11.39.10.PM.mov

What alternative solutions did you explore? (Optional)

[melvin-bot]

@anmurali, @chiragsalian Eep! 4 days overdue now. Issues have feelings too...

[chiragsalian]

marking issue as external

[melvin-bot]

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

[melvin-bot]

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

[ishpaul777]

will review proposals today.

[ishpaul777]

@Nodebrute's Proposal sounds good to me 👍

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @chiragsalian is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[chiragsalian]

Proposal LGTM, feel free to create the PR @Nodebrute.

[melvin-bot]

📣 @ishpaul777 🎉 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]

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

[Nodebrute]

@chiragsalian Could you please verify the number of digits allowed for the max expense age? Currently, I have set the limit to 5.

cc: @ishpaul777

[ishpaul777]

i defer decision to @chiragsalian

[chiragsalian]

Yup 5 for now sounds good to me. With 5 digits user can enter 99999 which is 273 years, so yeah that's more than good enough for me.

[Nodebrute]

@anmurali Hey, it was deployed to production in #48954. the payment is due today.

[Nodebrute]

@anmurali Bump for payment.

[melvin-bot]

This issue has not been updated in over 15 days. @anmurali, @chiragsalian, @Nodebrute, @ishpaul777 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[Nodebrute]

@anmurali gentle bump for payment

[ishpaul777]

Bumped this issue internally

[anmurali]

Done.