[$500] Debit Card - When adding a Card for the first time, an incorrect form of fill-in is loaded

[lanitochka17]

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: 1.3.89-6

Reproducible in staging?: Yes

Reproducible in production?: Yes

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: Applause - Internal Team

Slack conversation:

Action Performed:

1. Open New Expensify app
2. Sign in with a new acccount
3. Navigate to Settings\Wallet
4. Navigate to the Add a Debit Card menu
5. Return back to Wallet
6. Navigate to the Add a Debit Card menu again

Expected Result:

The first time you add a debit card you should be brought to the Add debit card page.

Actual Result:

When adding a Debit Card for the first time you are directed to the "Add bank account" page. The second time you try you will get to the "Add debit card" page.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Kind of... but it sucks.

Platforms:

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

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6247980_1698093400662.Recording__588.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b98a768b454991e7
• Upwork Job ID: 1716606223516532736
• Last Price Increase: 2023-10-24

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[OSBotify]

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

[melvin-bot]

Triggered auto assignment to @marcaaron (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[marcaaron]

Logging in with a prepared account

What is a "prepared account" and "correct fill-in form"?

I am not sure what the issue is. What are you expecting to happen @lanitochka17? Can you say it another way?

[marcaaron]

Oh I see now. It's taking you to the page to add a bank account and not the debit card page.

[marcaaron]

This can be reproduced on production. The catch is that you have to sign in with a new account. The second time you try to add a debit card it will bring you to the correct page.

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

Alright with Marc's summary here: #30214 (comment)

I'm going to assign it as an External

[saraelsa]

Proposal

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

The first time (with respect to the lifetime of their log-in session) a user tries to add a debit card, they are instead taken to a page where they can link their bank account.

What is the root cause of that problem?

The DebitCard page has two objects of interest: props.formData.setupComplete and prevFormDataSetupComplete (corresponding to the previous value of the property).

An effect has a filter such that the code of interests runs only if prevFormDataSetupComplete is false and props.formData.setupComplete is true. Effectively, if props.formData.setupComplete changes to true, the code runs.

Immediately once the component initializes, the method clearDebitCardFormErrorAndSubmit is called which changes setupComplete to true and stores this in Onyx.

The first time the user navigates to this page, because setupComplete changes from its default false to true, this code runs. Subsequent navigations to this page do not lead to this because setupComplete had been true since the beginning.

continueSetup calls kycWallRef.current.continue where available which calls the continue method of the current KYC wall (BaseKycWall.js). According to the doc comments, this will:

• get them to add a payment method if none exists
• otherwise, send them to the enable payments page if they haven't completed KYC
• otherwise, send them to the action they requested

According to this logic, the user will be made to add a payment method and directed to add a bank account (there is more logic as to why specifically bank account but that is not relevant here).

It appears to me that setupComplete should only be set to true by the API once the debit card has successfully been set up to allow the user to complete the payments onboarding process, and that clearDebitCardFormErrorAndSubmit setting setupComplete to true is an error and it should set it to false instead. This is supported by the fact that the method is meant to reset the form back to its initial state as described by its documentation comments. The initial state is defined as defaultProps in AddDebitCardPage and has setupComplete set to false.

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

Change the value setupComplete is set to from true to false in clearDebitCardFormErrorAndSubmit (PaymentMethods.ts).

What alternative solutions did you explore? (Optional)

None.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[tienifr]

seems dupe of #30024

[alexpensify]

Ahhh good catch @tienifr! I'm going to close this out.