Card - Entering amount $55666666.52 and tapping next all errors are not displayed to proceed

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.57-3
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Login with account with expensify card enabled with bank account added, and few members invited in workspace
3. Go to workspace settings
4. Tap expensify card
5. Tap issue card - physical card - monthly - next
6. Enter an big amount $55666666.52
7. Tap next
8. Note error shown - please enter an amount less than $21474836
9. Delete digits before decimal
10. Now note error "please enter an whole dollar amount before continuing" shown

Expected Result:

Entering amount $55666666.52 and tapping next, both error please enter an amount less than $21474836 &"please enter an whole dollar amount before continuing" must be shown

Actual Result:

Entering amount $55666666.52 and tapping next all errors are not displayed to proceed. Only one error "please enter an amount less than $21474836" displayed and after correcting this other error displayed "please enter an whole dollar amount before continuing".

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6655238_1730795763953.Screenrecorder-2024-11-05-13-54-39-631_compress_1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Card - Entering amount $55666666.52 and tapping next all errors are not displayed to proceed

What is the root cause of that problem?

We replace the errors.limit so only one error message displayed

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Lines 51 to 59 in b1bffa6

	if (!Number(values.limit)) {
	errors.limit = translate('iou.error.invalidAmount');
	} else if (!Number.isInteger(Number(values.limit))) {
	errors.limit = translate('iou.error.invalidIntegerAmount');
	}
	if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
	errors.limit = translate('workspace.card.issueNewCard.cardLimitError');
	}

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

On the cardLimitError, if errors.limit already contains a message, add a newline (\n) before the new message, ensuring each error appears on a separate line

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Lines 57 to 59 in b1bffa6

	if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
	errors.limit = translate('workspace.card.issueNewCard.cardLimitError');
	}

            if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
                errors.limit = `${errors.limit ? `${errors.limit}\n` : ''}${translate('workspace.card.issueNewCard.cardLimitError')}`;
            }

Result

What alternative solutions did you explore? (Optional)

[Nodebrute]

Proposal

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

Entering amount $55666666.52 and tapping next all errors are not displayed to proceed

What is the root cause of that problem?

We update the error.limit value each time a new error occurs.

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Line 58 in b1bffa6

errors.limit = translate('workspace.card.issueNewCard.cardLimitError');

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

We can prevent users from entering decimals altogether by setting the prop fixedDecimals={0} here. This will ensure that users cannot input any decimal values.

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Line 88 in e3452de

<InputWrapper

Optional: we can remove this error the

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Lines 53 to 54 in e3452de

	} else if (!Number.isInteger(Number(values.limit))) {
	errors.limit = translate('iou.error.invalidIntegerAmount');

What alternative solutions did you explore? (Optional)

Instead of using error.limit we can use addErrorMessage

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Lines 49 to 59 in b1bffa6

	// We only want integers to be sent as the limit
	if (!Number(values.limit)) {
	errors.limit = translate('iou.error.invalidAmount');
	} else if (!Number.isInteger(Number(values.limit))) {
	errors.limit = translate('iou.error.invalidIntegerAmount');
	}
	if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
	errors.limit = translate('workspace.card.issueNewCard.cardLimitError');
	}

We can do something like this

  if (!Number(values.limit)) {
                ErrorUtils.addErrorMessage(errors,INPUT_IDS.LIMIT,translate('iou.error.invalidAmount'))
            } else if (!Number.isInteger(Number(values.limit))) {
                ErrorUtils.addErrorMessage(errors,INPUT_IDS.LIMIT,translate('iou.error.invalidIntegerAmount'))
            }

            if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
                ErrorUtils.addErrorMessage(errors,INPUT_IDS.LIMIT, translate('workspace.card.issueNewCard.cardLimitError'))

            }

Alternate 2

We can use the onChangeText prop to replace all non-numeric characters(including digits) and then set the new. The same approach we used here

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

Line 42 in 4603c82

let validMaxExpenseAge = newValue.replace(/[^0-9]/g, '');

and then set the new, cleaned value accordingly.

Optional:we can remove these errors

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Lines 51 to 55 in e3452de

	if (!Number(values.limit)) {
	errors.limit = translate('iou.error.invalidAmount');
	} else if (!Number.isInteger(Number(values.limit))) {
	errors.limit = translate('iou.error.invalidIntegerAmount');
	}

[bernhardoj]

Proposal

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

The OP expects that both error messages that state to enter a whole dollar amount and enter an amount less than the limit will be shown. I think one error message should be shown at a time, but the "enter a whole dollar amount" should be prioritized.

What is the root cause of that problem?

We started to add the maximum amount validation in this PR. However, the validation error overrides any previous validation error found.

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Lines 50 to 60 in b914945

	// We only want integers to be sent as the limit
	if (!Number(values.limit)) {
	errors.limit = translate('iou.error.invalidAmount');
	} else if (!Number.isInteger(Number(values.limit))) {
	errors.limit = translate('iou.error.invalidIntegerAmount');
	}
	if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
	errors.limit = translate('workspace.card.issueNewCard.cardLimitError');
	}
	return errors;

App/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitPage.tsx

Lines 90 to 100 in b914945

	// We only want integers to be sent as the limit
	if (!Number(values.limit)) {
	errors.limit = translate('iou.error.invalidAmount');
	} else if (!Number.isInteger(Number(values.limit))) {
	errors.limit = translate('iou.error.invalidIntegerAmount');
	}
	if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
	errors.limit = translate('workspace.card.issueNewCard.cardLimitError');
	}
	return errors;

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

We need to update the validation logic so it only sets the limit error if both previous validation passes.

if (!Number(values.limit)) {
    errors.limit = translate('iou.error.invalidAmount');
} else if (!Number.isInteger(Number(values.limit))) {
    errors.limit = translate('iou.error.invalidIntegerAmount');
} else if (Number(values.limit) > CONST.EXPENSIFY_CARD.LIMIT_VALUE) {
    errors.limit = translate('workspace.card.issueNewCard.cardLimitError');
}

[CortneyOfstad]

I'm going to be honest, this is a very niche error and the parameters are too specific to consider it an active bug. Because of that, I am going to close this.