[PAID] [$250] [Payment card / Subscription] limit input field to 16 digits in add-payment-card screen field for card number

@blimpich

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Issue reported by: @blimpich

Action Performed:

Break down in numbered steps

create a new account
create a workspace on that account
go to https://staging.new.expensify.com/settings/subscription/add-payment-card
look at the card number field and type "abcdef01234567891234567"

Expected Result:

Describe what you think should've happened

Alphabet characters should not be allowed into the input field and the input field should be limited to 16 digits

Actual Result:

Describe what actually happened

"abcdef01234567891234567" shows up in the input field as typed

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0117d7a6e5f63d9c2e
Upwork Job ID: 1803868245221381580
Last Price Increase: 2024-06-20
Automatic offers:

fedirjh | Reviewer | 102858281
nkdengineer | Contributor | 102858284

Issue Owner

Current Issue Owner: @strepanier03

@strepanier03

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

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

@fedirjh

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

Proposal

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

Alphabet characters should not be allowed into the input field and the input field should be limited to 16 digits

What is the root cause of that problem?

This is a feature request.

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

Create a cardNumber state and use it for the card number input's value

value={cardNumber}

Implement onValueChange for card number input where we remove all non-digit characters:

onValueChange={(value) => {
    if (typeof value !== 'string') {
        return;
    }
    setCardNumber(value.replace(/\D/g, ''));
}}

Set maxLength={16}

By this, when we pasted a string with non-digit characters, the input would only keep the digits and we couldn't type non-digit characters as well.

What alternative solutions did you explore? (Optional)

We can optionally format the card number to the space-separated form (i.e. 0123 4567 8910) using the above approach. Additionally, we should write a util function extractCardNumber to extract the plain digits without spaces so the submit handler could use the minified value.

let formattedText = value.replace(/\D/g, '');
if (formattedText.length > 0) {
    formattedText = formattedText.match(/.{1,4}/g)?.join(' ') || formattedText;
}
setCardNumber(formattedText);

@fedirjh

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
[@fedirjh] 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:
[@fedirjh] A discussion in #expensify-bugs 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:
[@fedirjh] Determine if we should create a regression test for this bug.
[@fedirjh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@nkdengineer

@nkdengineer - I've paid and closed the contract in Upwork.

@fedirjh - I'll check tomorrow for the checklist and reg test steps above, then pay when that's completed.

Thank you both!

BugZero Checklist:

Link to the PR: N/A, this is a new feature
Link to comment: N/A
Link to discussion: N/A
Determine if we should create a regression test for this bug: Yes

Regression Test Proposal

1. Create a new account
2. Create a workspace on that account
3. Go to /settings/subscription/add-payment-card
4. Click at the card number field and type "abcdef01234567891234567"
5. Verify that the input field should adhere to the following guidelines:
    - Only numeric characters should be allowed; alphabet characters are not permitted.
    - The input field should be restricted to a maximum of 16 digits.
    - Spacing should be added between every 4 digits within the input field.

Do we agree 👍 or 👎

@strepanier03

@strepanier03 payment summary when you get a chance

@strepanier03

@strepanier03, @blimpich, @fedirjh, @nkdengineer Huh... This is 4 days overdue. Who can take care of this?

@fedirjh

Payment Summary

@fedirjh - $250 - Will request via New Expensify (I will cancel the Upwork contract)
@nkdengineer - $250 paid via Upwork automatic offer

@JmillsExpensify - Request incoming.

@fedirjh

$250 approved for @fedirjh

Looks great, thanks for confirming. Closing this now.

Navigation Menu

Repository navigation

[PAID] [$250] [Payment card / Subscription] limit input field to 16 digits in `add-payment-card` screen field for card number #44111

Action Performed:

Expected Result:

Actual Result:

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

42 remaining items

BugZero Checklist:

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[PAID] [$250] [Payment card / Subscription] limit input field to 16 digits in add-payment-card screen field for card number #44111

Description

Action Performed:

Expected Result:

Actual Result:

Activity

melvin-bot commented on Jun 20, 2024

melvin-bot commented on Jun 20, 2024

melvin-bot commented on Jun 20, 2024

gijoe0295 commented on Jun 20, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

42 remaining items

melvin-bot commented on Jul 15, 2024

strepanier03 commented on Jul 17, 2024

fedirjh commented on Jul 22, 2024

BugZero Checklist:

JmillsExpensify commented on Jul 22, 2024

melvin-bot commented on Jul 23, 2024

strepanier03 commented on Jul 23, 2024

Payment Summary

JmillsExpensify commented on Jul 23, 2024

strepanier03 commented on Jul 24, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[PAID] [$250] [Payment card / Subscription] limit input field to 16 digits in `add-payment-card` screen field for card number #44111