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

[shawnborton]

Let's see if the @Expensify/marketing team has any ideas, but I think I like the first bullet of your suggestions.

[NickTooker]

Please enter a whole dollar amount before continuing.

I think this is fine.

[jamesdeanexpensify]

Double checking - the currency can only be dollars for Expensify Card limits right now, is that correct? Because otherwise "dollar amount" would be incorrect. I just want to make sure, thanks!

[slafortune]

@twilight294 would you like to update your proposal?

[rayane-djouah]

• Align the $ with the amount box

The alignment of the dollar sign with the amount box is being addressed in #50778

[nyomanjyotisa]

Proposal

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

Expensify Card - improvements to the Set a limit screen

What is the root cause of that problem?

We currently use invalidAmount error message here

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

Line 92 in 2d9a28f

errors.limit = translate('iou.error.invalidAmount');

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

Line 55 in 2d9a28f

errors.limit = translate('iou.error.invalidAmount');

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

Add new translations, need to confirm the right copy

invalidWholeDollarAmount: 'Please enter a whole dollar amount before continuing.',

invalidWholeDollarAmount: 'Por favor, introduce una cantidad en dólares enteros antes de continuar.',

And change the following code to use the new translation

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

Line 92 in 2d9a28f

errors.limit = translate('iou.error.invalidAmount');

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

Line 55 in 2d9a28f

errors.limit = translate('iou.error.invalidAmount');

errors.limit = translate('iou.error.invalidWholeDollarAmount');

For the alignment, is being addressed on another issue

What alternative solutions did you explore? (Optional)

[twilight2294]

@twilight294 would you like to update your proposal?

Yes i did update my proposal @slafortune @rayane-djouah here

Note: In my previous proposal I already proposed the steps we have to take where to make the changes and both english and spanish copies as well, even mentioned the edit limit page as well

[shawnborton]

Since we're addressing the currency symbol elsewhere and this is just a copy update, we should probably bump this down to something small like $62.50

[twilight2294]

$125 is fair i guess 😞

[shawnborton]

$125 is too much for a simple copy change.

[rayane-djouah]

The proposal by @twilight294 looks good to me

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @thienlnam, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rayane-djouah]

The proposal involves adding a new copy and adjusting the validation logic on both the "Issue New Card Limit" and "Edit Card Limit" screens. Let's see what @thienlnam thinks of a fair payment amount.

[thienlnam]

Proposal looks good, it's a pretty straightforward change. Perhaps we can just meet in between with $100. @slafortune is handling payment for this, so feel free to make a final decision here

[melvin-bot]

Upwork job price has been updated to $100

[twilight2294]

@thienlnam can you hire me here :)

[melvin-bot]

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

📣 @twilight294 You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[twilight2294]

PR ready for review @rayane-djouah

[twilight2294]

PR with a single line change was given $125 bounty(issue) where as our PR contains multiple changes and still lower bounty, can the bounty increase on our issue to be fair?

@slafortune

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.55-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Add integer validation to card limit #51011

If no regressions arise, payment will be issued on 2024-11-07. 🎊

For reference, here are some details about the assignees on this issue:

• @rayane-djouah requires payment automatic offer (Reviewer)
• @twilight2294 requires payment (Needs manual offer from BZ)

[melvin-bot]

@rayane-djouah @slafortune The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[rayane-djouah]

BugZero Checklist:

• Classify the bug:

  Bug classification

  Source of bug:

  • 1a. Result of the original design (eg. a case wasn't considered)
  • 1b. Mistake during implementation
  • 1c. Backend bug
  • 1z. Other:

  Where bug was reported:

  • 2a. Reported on production
  • 2b. Reported on staging (deploy blocker)
  • 2c. Reported on a PR
  • 2z. Other:

  Who reported the bug:

  • 3a. Expensify user
  • 3b. Expensify employee
  • 3c. Contributor
  • 3d. QA
  • 3z. Other:

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/44741/files#r1824316607

• If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• @slafortune Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

#### Precondition:

- Enable the Expensify Card and add a VBA.

#### Test:

1. Tap the profile icon > go to Workspaces > select a workspace.
2. Tap Expensify Cards.
3. Tap Issue Card > select a user > choose Physical Card.
4. Select Smart Limit.
5. Tap Next.
6. Enter a decimal number and tap Next.
7. Verify that the following error message appears: "Please enter a whole dollar amount before continuing."

Do we agree 👍 or 👎

[slafortune]

Offer sent here @twilight2294 The price for this job is $100 which was decided prior to you asking to be assigned. Perhaps the other PR you referenced should have been set to $100 as well, but this one had been discussed and agreed on.

[abekkala]

PAYMENT SUMMARY:

FIX: @twilight2294 [$100] Paid and Contract ended - thank you! 🎉
PR REVIEW: @rayane-djouah [$100] Paid and Contract ended - thank you! 🎉