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

m-natarajan · 2024-03-19T19:09:53Z

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:

Open app and request money from workspace chat or from other user
Open the IOU report
Click on pay with expensify option from the top right corner of the page
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?

Screenshots/Videos

Add any screenshot/video evidence

Recording.2876.mp4

Screen.Recording.2024-03-19.at.4.16.07.PM.mov

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

The text was updated successfully, but these errors were encountered:

melvin-bot · 2024-03-19T19:10:06Z

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

abzokhattab · 2024-03-19T19:28:20Z

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.

App/src/components/AddPaymentMethodMenu.js

Line 110 in d74fffe

onSelected: () => onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),

then here we check if the selected option is debit card, then we navigate to the addDebitCardRoute passed in the props

App/src/components/KYCWall/BaseKYCWall.tsx

Lines 124 to 125 in 93c66ce

    
           } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) { 
        
               Navigation.navigate(addDebitCardRoute);

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

App/src/components/SettlementButton.tsx

Lines 222 to 233 in e9306bd

    
               onSuccessfulKYC={onPress} 
        
               enablePaymentsRoute={enablePaymentsRoute} 
        
               addBankAccountRoute={addBankAccountRoute} 
        
               addDebitCardRoute={addDebitCardRoute} 
        
               isDisabled={isOffline} 
        
               source={CONST.KYC_WALL_SOURCE.REPORT} 
        
               chatReportID={chatReportID} 
        
               iouReport={iouReport} 
        
               anchorAlignment={kycWallAnchorAlignment} 
        
               shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption} 
        
           > 
        
               {(triggerKYCFlow, buttonRef) => (

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.

App/src/components/MoneyReportHeader.tsx

Lines 145 to 158 in 26ab4aa

    
           <SettlementButton 
        
               currency={moneyRequestReport.currency} 
        
               policyID={moneyRequestReport.policyID} 
        
               chatReportID={moneyRequestReport.chatReportID} 
        
               iouReport={moneyRequestReport} 
        
               // @ts-expect-error TODO: Remove this once IOU (https://github.com/Expensify/App/issues/24926) is migrated to TypeScript. 
        
               onPress={(paymentType: PaymentType) => IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)} 
        
               enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} 
        
               addBankAccountRoute={bankAccountRoute} 
        
               shouldHidePaymentOptions={!shouldShowPayButton} 
        
               shouldShowApproveButton={shouldShowApproveButton} 
        
               formattedAmount={formattedAmount} 
        
               isDisabled={!canAllowSettlement} 
        
           />

App/src/components/MoneyReportHeader.tsx

Lines 113 to 127 in 26ab4aa

    
           <SettlementButton 
        
               currency={moneyRequestReport.currency} 
        
               policyID={moneyRequestReport.policyID} 
        
               chatReportID={chatReport?.reportID} 
        
               iouReport={moneyRequestReport} 
        
               // @ts-expect-error TODO: Remove this once IOU (https://github.com/Expensify/App/issues/24926) is migrated to TypeScript. 
        
               onPress={(paymentType: PaymentType) => IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)} 
        
               enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} 
        
               addBankAccountRoute={bankAccountRoute} 
        
               shouldHidePaymentOptions={!shouldShowPayButton} 
        
               shouldShowApproveButton={shouldShowApproveButton} 
        
               style={[styles.pv2]} 
        
               formattedAmount={formattedAmount} 
        
               isDisabled={!canAllowSettlement} 
        
           />

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 285 to 304 in e8eac0a

    
           <SettlementButton 
        
               currency={iouReport?.currency} 
        
               policyID={policyID} 
        
               chatReportID={chatReportID} 
        
               iouReport={iouReport} 
        
               onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)} 
        
               enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} 
        
               addBankAccountRoute={bankAccountRoute} 
        
               shouldHidePaymentOptions={!shouldShowPayButton} 
        
               shouldShowApproveButton={shouldShowApproveButton} 
        
               kycWallAnchorAlignment={{ 
        
                   horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, 
        
                   vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, 
        
               }} 
        
               paymentMethodDropdownAnchorAlignment={{ 
        
                   horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, 
        
                   vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, 
        
               }} 
        
               isDisabled={!canAllowSettlement} 
        
           />

parasharrajat · 2024-03-19T19:41:51Z

That's what I was thinking the issue might be.

allgandalf · 2024-03-19T19:48:01Z

Proposal

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

What is the root cause of that problem?

We have default empty value in settlement button for addDebitCardRoute

App/src/components/SettlementButton.tsx

Lines 99 to 100 in e9306bd

    
           function SettlementButton({ 
        
               addDebitCardRoute = '',

This in turn doesn't give us any action on click to the add debit card button as we have no route mentioned:

App/src/components/SettlementButton.tsx

Lines 221 to 225 in e9306bd

    
           <KYCWall 
        
               onSuccessfulKYC={onPress} 
        
               enablePaymentsRoute={enablePaymentsRoute} 
        
               addBankAccountRoute={addBankAccountRoute} 
        
               addDebitCardRoute={addDebitCardRoute}

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

I assume we must always enable the debit card option on every request, so better is to update the default value of addDebitCardRoute to:

function SettlementButton({ 
     addDebitCardRoute ={ROUTES.SETTINGS_ADD_DEBIT_CARD},

What alternative solutions did you explore? (Optional)

N/A

allgandalf · 2024-03-19T19:50:33Z

Note

I think we should use SETTINGS_ADD_DEBIT_CARD than IOU_SEND_ADD_DEBIT_CARD, as this would then set the wallet card as well

abzokhattab · 2024-03-19T20:02:29Z

Updated the proposal: optionally we can use the SETTINGS_ADD_DEBIT_CARD instead of the IOU_SEND_ADD_DEBIT_CARD

parasharrajat · 2024-03-20T09:12:19Z

@abzokhattab's proposal makes sense to me. @dylanexpensify Let's roll here.

allgandalf · 2024-03-20T09:21:45Z

@parasharrajat , what do you think about my proposal?

Doesn’t it make sense to have the route in the base component itself, I guess in the roadmap we plan to add this settlement button in invoices too, so maybe it’s more future proof??

c.c. @dylanexpensify

parasharrajat · 2024-03-20T10:47:23Z

@GandalfGwaihir That is better but can not be given more weight regarding proposals. I would call that implementation detail. The main idea still lies around setting the missing param with the correct value.

melvin-bot · 2024-03-20T11:39:36Z

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

melvin-bot · 2024-03-20T11:39:40Z

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

dylanexpensify · 2024-03-20T11:40:01Z

rock and roll @parasharrajat

allgandalf · 2024-03-20T11:41:02Z

@GandalfGwaihir That is better but can not be given more weight regarding proposals. I would call that implementation detail. The main idea still lies around setting the missing param with the correct value.

But i think it would be important to consider right approach over here :)

parasharrajat · 2024-03-20T11:51:48Z

I agree that we should move with the right approach but setting a default value or writing a code in a specific way is just implementation details. These things are cleared up in the PRs. I also thought of setting a default value when I found this bug.

allgandalf · 2024-03-20T11:52:42Z

ohh cool, no worries, fine with whatever decision you and the internal engineer take

parasharrajat · 2024-03-20T11:54:08Z

@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

melvin-bot · 2024-03-20T11:54:23Z

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

melvin-bot · 2024-03-21T01:05:57Z

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

parasharrajat · 2024-03-22T13:25:54Z

@abzokhattab When can we expect the PR?

abzokhattab · 2024-03-22T13:42:06Z

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

abzokhattab · 2024-03-23T19:48:55Z

The PR is ready! please check it out and let me know if you have any comments.

dylanexpensify · 2024-03-27T08:13:51Z

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

stitesExpensify · 2024-03-27T16:55:30Z

Merged!

melvin-bot · 2024-04-02T10:55:59Z

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

melvin-bot · 2024-04-02T10:56:03Z

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

Open the iou debit card page when clicking on pay with debit card #38885

If no regressions arise, payment will be issued on 2024-04-09. 🎊

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

@parasharrajat requires payment through NewDot Manual Requests
@abzokhattab requires payment automatic offer (Contributor)
@parasharrajat requires payment through NewDot Manual Requests

melvin-bot · 2024-04-02T10:56:04Z

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:

[@parasharrajat] The PR that introduced the bug has been identified. Link to the PR:
[@parasharrajat] 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:
[@parasharrajat] 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:
[@parasharrajat] Determine if we should create a regression test for this bug.
[@parasharrajat] 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.
[@dylanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

parasharrajat · 2024-04-02T13:02:08Z

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:

[@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: Update Expense Report View / Headers #22484
[@parasharrajat] 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/22484/files#r1547835195
[@parasharrajat] 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: Not needed
[@parasharrajat] Determine if we should create a regression test for this bug. Yes
[@parasharrajat] 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.

Regression Test Steps

Open the app and request money from workspace chat or from another user
Login with other user and Open the IOU report
Click on pay with expensify option from the top right corner of the report.
Select debit card.
Verify that the iou debit card page is opened

Do you agree 👍 or 👎 ?

dylanexpensify · 2024-04-09T08:02:17Z

Payment summary:

contributor: @abzokhattab $500
contributor+: @parasharrajat $500

Please apply or request!

dylanexpensify · 2024-04-09T08:04:20Z

Done

parasharrajat · 2024-06-14T05:28:19Z

Payment requested as per #38641 (comment)

JmillsExpensify · 2024-06-17T15:56:36Z

$500 approved for @parasharrajat

m-natarajan added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Mar 19, 2024

melvin-bot bot assigned dylanexpensify Mar 19, 2024

dylanexpensify added the External Added to denote the issue can be worked on by a contributor label Mar 20, 2024

melvin-bot bot changed the title ~~Clicking on debit card option on the pay with Expensify button does nothing~~ [$500] Clicking on debit card option on the pay with Expensify button does nothing Mar 20, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 20, 2024

dylanexpensify assigned parasharrajat Mar 20, 2024

melvin-bot bot assigned jjcoffee Mar 20, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 20, 2024

dylanexpensify unassigned jjcoffee Mar 20, 2024

melvin-bot bot assigned stitesExpensify Mar 20, 2024

stitesExpensify assigned abzokhattab Mar 21, 2024

abzokhattab mentioned this issue Mar 23, 2024

Open the iou debit card page when clicking on pay with debit card #38885

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Mar 23, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Apr 2, 2024

melvin-bot bot changed the title ~~[$500] Clicking on debit card option on the pay with Expensify button does nothing~~ [HOLD for payment 2024-04-09] [$500] Clicking on debit card option on the pay with Expensify button does nothing Apr 2, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Apr 2, 2024

parasharrajat mentioned this issue Apr 2, 2024

Update Expense Report View / Headers #22484

Merged

67 tasks

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Apr 8, 2024

melvin-bot bot removed the Overdue label Apr 9, 2024

dylanexpensify closed this as completed Apr 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

m-natarajan commented Mar 19, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Mar 19, 2024

abzokhattab commented Mar 19, 2024 •

edited

Loading

parasharrajat commented Mar 19, 2024

allgandalf commented Mar 19, 2024

allgandalf commented Mar 19, 2024

abzokhattab commented Mar 19, 2024

parasharrajat commented Mar 20, 2024

allgandalf commented Mar 20, 2024

parasharrajat commented Mar 20, 2024

melvin-bot bot commented Mar 20, 2024

melvin-bot bot commented Mar 20, 2024

dylanexpensify commented Mar 20, 2024

allgandalf commented Mar 20, 2024

parasharrajat commented Mar 20, 2024

allgandalf commented Mar 20, 2024 •

edited

Loading

parasharrajat commented Mar 20, 2024 •

edited

Loading

melvin-bot bot commented Mar 20, 2024

melvin-bot bot commented Mar 21, 2024

parasharrajat commented Mar 22, 2024

abzokhattab commented Mar 22, 2024

abzokhattab commented Mar 23, 2024

dylanexpensify commented Mar 27, 2024

stitesExpensify commented Mar 27, 2024

melvin-bot bot commented Apr 2, 2024

melvin-bot bot commented Apr 2, 2024

melvin-bot bot commented Apr 2, 2024

parasharrajat commented Apr 2, 2024

dylanexpensify commented Apr 9, 2024

dylanexpensify commented Apr 9, 2024

parasharrajat commented Jun 14, 2024

JmillsExpensify commented Jun 17, 2024

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

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

Comments

m-natarajan commented Mar 19, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Mar 19, 2024

abzokhattab commented Mar 19, 2024 • edited Loading

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?

parasharrajat commented Mar 19, 2024

allgandalf commented Mar 19, 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)

allgandalf commented Mar 19, 2024

abzokhattab commented Mar 19, 2024

parasharrajat commented Mar 20, 2024

allgandalf commented Mar 20, 2024

parasharrajat commented Mar 20, 2024

melvin-bot bot commented Mar 20, 2024

melvin-bot bot commented Mar 20, 2024

dylanexpensify commented Mar 20, 2024

allgandalf commented Mar 20, 2024

parasharrajat commented Mar 20, 2024

allgandalf commented Mar 20, 2024 • edited Loading

parasharrajat commented Mar 20, 2024 • edited Loading

melvin-bot bot commented Mar 20, 2024

melvin-bot bot commented Mar 21, 2024

parasharrajat commented Mar 22, 2024

abzokhattab commented Mar 22, 2024

abzokhattab commented Mar 23, 2024

dylanexpensify commented Mar 27, 2024

stitesExpensify commented Mar 27, 2024

melvin-bot bot commented Apr 2, 2024

melvin-bot bot commented Apr 2, 2024

melvin-bot bot commented Apr 2, 2024

parasharrajat commented Apr 2, 2024

Regression Test Steps

dylanexpensify commented Apr 9, 2024

dylanexpensify commented Apr 9, 2024

parasharrajat commented Jun 14, 2024

JmillsExpensify commented Jun 17, 2024

m-natarajan commented Mar 19, 2024 •

edited by melvin-bot bot

Loading

abzokhattab commented Mar 19, 2024 •

edited

Loading

allgandalf commented Mar 20, 2024 •

edited

Loading

parasharrajat commented Mar 20, 2024 •

edited

Loading