App: [HOLD for payment 2024-04-09] [$500] Clicking on debit card option on the pay with Expensify button does nothing

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.4.54-1 Reproducible in staging?: y Reproducible in production?: y 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: @parasharrajat Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710845227712549

Action Performed:

  1. Open app and request money from workspace chat or from other user
  2. Open the IOU report
  3. Click on pay with expensify option from the top right corner of the page
  4. Select option debit card

Expected Result:

User taken to debit card adding flow

Actual Result:

Nothing happens clicking on debit card

Workaround:

unknown

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

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/38435837/5ce982d3-4817-45f0-9219-da37b8a49ffd

https://github.com/Expensify/App/assets/38435837/611e8f26-cefd-41b9-b871-c4bc5d7bbf2c

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01d862972a492e6ec4
  • Upwork Job ID: 1770414879181062144
  • Last Price Increase: 2024-03-20
  • Automatic offers:
    • abzokhattab | Contributor | 0

About this issue

  • Original URL
  • State: closed
  • Created 3 months ago
  • Comments: 29 (21 by maintainers)

Most upvoted comments

@abzokhattab’s proposal makes sense to me. IMO, ROUTES.IOU_SEND_ADD_DEBIT_CARD is the correct route for this.

Thanks for the proposal @GandalfGwaihir. There are always new opportunities waiting for solutions. Looking forward to your contributions there.

🎀 👀 🎀 C+ reviewed

Bump @stitesExpensify to final review for merge today if you can! ❤️

Thank you Rajat @parasharrajat for the ping, the PR will be ready today.

Proposal

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

Clicking on debit card option on the pay with Expensify button does nothing

What is the root cause of that problem?

the onItemSelected function is called with the CONST.PAYMENT_METHODS.DEBIT_CARD in case the the debit card option is selected. https://github.com/Expensify/App/blob/d74fffe2cfb50cff36ea08a0e5e37b9cbe8e65d4/src/components/AddPaymentMethodMenu.js#L110

then here we check if the selected option is debit card, then we navigate to the addDebitCardRoute passed in the props https://github.com/Expensify/App/blob/93c66ce5355ad9ab849faffc95371d53eddae868/src/components/KYCWall/BaseKYCWall.tsx#L124-L125

then we use the KYC in the SettlementButton and we pass to it the addDebitCardRoute passed from the component props:

https://github.com/Expensify/App/blob/e9306bd11b29127edad18c3faec86b229a13274b/src/components/SettlementButton.tsx#L222-L233

the issue appears because we dont pass the addDebitCardRoute in the SettlementButton

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

we should add addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD} same as we are doing here to the following files:

we can use the ROUTES.SETTINGS_ADD_DEBIT_CARD instead as well, but since we are using ROUTES.IOU_SEND_ADD_DEBIT_CARD in the MoneyRequestConfirmationList then we should keep it consistent i think.

https://github.com/Expensify/App/blob/26ab4aa0c21352f5b2917bd59df5daf460b36f33/src/components/MoneyReportHeader.tsx#L145-L158

https://github.com/Expensify/App/blob/26ab4aa0c21352f5b2917bd59df5daf460b36f33/src/components/MoneyReportHeader.tsx#L113-L127

https://github.com/Expensify/App/blob/e8eac0a6510b0d3538408b922c4ee410d45e5d5f/src/components/ReportActionItem/ReportPreview.tsx#L285-L304