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

[m-natarajan]

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

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

[melvin-bot]

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

[abzokhattab]

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]

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

[allgandalf]

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]

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]

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

[parasharrajat]

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

[allgandalf]

@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]

@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]

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