[HOLD for payment 2024-11-14] [$250] Splitting 9000 with 4 users, the confirmation page incorrectly displays the participant amounts as 0.

[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: 9.0.56-0.
Reproducible in staging?: y
Reproducible in production?: n
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Only in stand alone, Hybrid is not updated yet
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: @rayane-djouah
Slack conversation (hyperlinked to channel name): https://expensify.slack.com/archives/C049HHMV9SM/p1730291114159429

Action Performed:

1. Start a group
2. Split money (e.g 9000)
3. Enter the value in the BNP
4. Observe the individual split amount

Expected Result:

Should be 2250

Actual Result:

Showing as 0

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

381488319-be8b5291-471a-4fae-8a25-37aba3074166.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021852081957595400665
• Upwork Job ID: 1852081957595400665
• Last Price Increase: 2024-10-31

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.

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

[mkzie2]

Proposal

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

Unable to edit

What is the root cause of that problem?

It comes from #51202

The amount regex doesn't accept commas character

App/src/components/MoneyRequestAmountInput.tsx

Line 277 in 7216310

const regex = useMemo(() => MoneyRequestUtils.amountRegex(decimals), [decimals]);

App/src/libs/MoneyRequestUtils.ts

Lines 43 to 47 in 7216310

	function amountRegex(decimals: number, amountMaxLength: number = CONST.IOU.AMOUNT_MAX_LENGTH): string {
	return decimals === 0
	? `^\\d{0,${amountMaxLength}}$` // Don't allow decimal point if decimals === 0
	: `^\\d{0,${amountMaxLength}}(?:(?:\\.|\\,)\\d{0,${decimals}})?$`; // Allow the decimal point and the desired number of digits after the point
	}

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

We should update this function with another param, isAllowCommas, whose default value is false, and introduce a new prop, isAllowCommas, with the same default value in MoneyRequestAmountInput.

if isAllowCommas is true, we should return the regex that allows the commas

/**
 * Get amount regex string
 */
function amountRegex(decimals: number, amountMaxLength: number = CONST.IOU.AMOUNT_MAX_LENGTH, isAllowCommans = false): string {
    const amountRegexWithoutDecimals = isAllowCommans ? `(?:\\d{1,3})(?:,\\d{3}){0,${Math.floor((amountMaxLength - 1) / 3)}}$|^\\d{1,${amountMaxLength}}` : `\\d{0,${amountMaxLength}}`;
    return decimals === 0
        ? `^${amountRegexWithoutDecimals}$` // Don't allow decimal point if decimals === 0
        : `^${amountRegexWithoutDecimals}(?:(?:\\.|\\,)\\d{0,${decimals}})?$`; // Allow the decimal point and the desired number of digits after the point
}

App/src/libs/MoneyRequestUtils.ts

Lines 43 to 47 in 7216310

	function amountRegex(decimals: number, amountMaxLength: number = CONST.IOU.AMOUNT_MAX_LENGTH): string {
	return decimals === 0
	? `^\\d{0,${amountMaxLength}}$` // Don't allow decimal point if decimals === 0
	: `^\\d{0,${amountMaxLength}}(?:(?:\\.|\\,)\\d{0,${decimals}})?$`; // Allow the decimal point and the desired number of digits after the point
	}

Update this line to pass isAllowCommans prop

const regex = useMemo(() => MoneyRequestUtils.amountRegex(decimals, undefined, isAllowCommans), [decimals]);

App/src/components/MoneyRequestAmountInput.tsx

Line 277 in 7216310

const regex = useMemo(() => MoneyRequestUtils.amountRegex(decimals), [decimals]);

After that we can pass isAllowCommans={true} here

App/src/components/MoneyRequestConfirmationList.tsx

Line 548 in 224b633

<MoneyRequestAmountInput

What alternative solutions did you explore? (Optional)