[HOLD for payment 2022-11-22] [$250] Payment option doesn't update unless refresh or reopen IOU details page reported by @thesahindia

[kavimuru]

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

---

Action Performed:

1. Login with account A
2. Search for account B and request money
3. Open another browser > Login with account B
4. Go to chat with account A
5. Tap on pay button
6. Verify that you don't see the option Pay with PayPal.me at the button in iou details page
7. Close the modal
8. Go to account A
9. Go to settings > Payments > Add payment method
10. Click on PayPal.me > Add Paypal account
11. Go to account B again and click on pay button
12. Verify that you still don't see the option to Pay with PayPal.me
13. Refresh the page/ close and reopen the IOU details modal
14. Check if you see it now

Expected Result:

You payment options should update at the step 12

Actual Result:

The payment options doesn't update without refreshing or closing and re-opening the iou details page

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.21-4
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/198913299-f0272dd6-1db6-46a1-b7e7-22788a1d73ea.mp4
https://user-images.githubusercontent.com/43996225/198913319-4a89ce03-5f83-4957-83d3-72598f9cb85e.mov

Expensify/Expensify Issue URL:
Issue reported by: @thesahindia
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1667080453236989

View all open jobs on GitHub

[melvin-bot]

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

[daraksha-dk]

Proposal

The payment options are set at the state and when the option paypal is removed the old value is being used

App/src/components/SettlementButton.js

Lines 43 to 71 in 62ff507

	constructor(props) {
	super(props);
	const buttonOptions = [];
	if (props.currency === CONST.CURRENCY.USD && Permissions.canUsePayWithExpensify(props.betas) && Permissions.canUseWallet(props.betas)) {
	buttonOptions.push({
	text: props.translate('iou.settleExpensify'),
	icon: Expensicons.Wallet,
	value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
	});
	}
	if (props.shouldShowPaypal) {
	buttonOptions.push({
	text: props.translate('iou.settlePaypalMe'),
	icon: Expensicons.PayPal,
	value: CONST.IOU.PAYMENT_TYPE.PAYPAL_ME,
	});
	}
	buttonOptions.push({
	text: props.translate('iou.settleElsewhere'),
	icon: Expensicons.Cash,
	value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
	});
	this.state = {
	buttonOptions,

key can be used to fix this. Now it will re render if the paypal address changes
key={lodashGet(this.props, 'iouReport.submitterPayPalMeAddress')}

App/src/pages/iou/IOUDetailsModal.js

Line 140 in 62ff507

<SettlementButton

We can also use a variable for lodashGet(this.props, 'iouReport.submitterPayPalMeAddress') for keeping it clean

Same problem can be seen at IOUConfirmationList
Pass key={recipient.payPalMeAddress} at

App/src/components/IOUConfirmationList.js

Line 353 in 62ff507

<SettlementButton

[sakluger]

I confirmed that the Paypal payment option does not show up until I refresh the page. Adding the external label.

[melvin-bot]

Current assignee @sakluger is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

Internal Upwork post: https://www.upwork.com/ab/applicants/1587687358672089088/job-details
External Upwork post: https://www.upwork.com/jobs/~016bc1d3a553815351