[HOLD for payment 2024-11-07] [$100] Expensify Card - improvements to the Set a limit screen

[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.49-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

Pre-condition: Enable expensify card and add a VBA

1. Go to https://staging.new.expensify.com/home
2. Tap profile icon-- workspaces- workspace
3. Tap expensify cards
4. Tap +issue card - select a user -- physical card
5. Note smart limit checked
6. Tap next
7. Enter a decimal number and tap next

Expected Result:

In expensify card, issue a card section if we set limit in decimals, must not show error enter valid amount.

Actual Result:

In expensify card, issue a card section if we set limit in decimals, shows error enter valid amount.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6635041_1728983975900.Screenrecorder-2024-10-15-14-37-25-413_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846213635698721920
• Upwork Job ID: 1846213635698721920
• Last Price Increase: 2024-10-16
• Automatic offers:
• rayane-djouah | Reviewer | 104449939

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

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

[IuliiaHerets]

@slafortune FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-10-15 09:59:48 UTC.

Proposal

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

In expensify card, issue a card section if we set limit in decimals, shows error

What is the root cause of that problem?

We have check to give error on decimals:

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

Line 54 in b4b5965

if (!Number(values.limit) || !Number.isInteger(Number(values.limit))) {

We need to make thus error more specific

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

We should add a new valudation check will will throw an error if !Number.isInteger(Number(values.limit)), the error would be similar to Please enter a whole dollar amount before continuing and the spanish translation too

In en.ts and both es.ts we need to create a new copy as :

    const validate = useCallback(
        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => {
            const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.LIMIT]);

            // We only want integers to be sent as the limit
            if (!Number(values.limit)) {
                errors.limit = translate('iou.error.invalidAmount');
            }
            
            if(!Number.isInteger(Number(values.limit))){
            errors.limit = translate('iou.error.invalidDecimalAmount');
            }
            return errors;
        },
        [translate],
    );

Same should be done to the edit limit screen as well

[slafortune]

Yeah - I don't think that we would/should expect a decimal to be entered. I wonder if simply updating the error message to indicate that they need to enter a whole number would be good.

asking in design - https://expensify.slack.com/archives/C03TME82F/p1729001172189579

[slafortune]

Let's use this to make two updates to th Expensify Card Set Limit Screen

• Align the $ with the amount box
• Update the error message to the exact error
  • Current error message is Please enter a valid amount before continuing.

@Expensify/design can you chime in on what would be preferred language?

• Please enter a whole dollar amount before continuing.
• Enter only a whole dollar amount without a decimal point.
• ?

[melvin-bot]

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

[melvin-bot]

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