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 [email protected] 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[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

https://github.com/Expensify/App/blob/62ff507162d7712c2aa76b5eb96141f83ec2dd91/src/components/SettlementButton.js#L43-L71

key can be used to fix this. Now it will re render if the paypal address changes key={lodashGet(this.props, 'iouReport.submitterPayPalMeAddress')} https://github.com/Expensify/App/blob/62ff507162d7712c2aa76b5eb96141f83ec2dd91/src/pages/iou/IOUDetailsModal.js#L140

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 https://github.com/Expensify/App/blob/62ff507162d7712c2aa76b5eb96141f83ec2dd91/src/components/IOUConfirmationList.js#L353

[sakluger]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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

[jasperhuangg]

looks like we're still waiting for proposals on this one, not overdue

[jasperhuangg]

This seems to be relatively edge-casey, gonna mark it as a Weekly while we wait for proposals.

[mallenexpensify]

Bumped back to daily per our new BugZero process, internal Slack thread with deets

[mananjadhav]

Thanks for the proposal @daraksha-dk. I am not sure I follow your proposal. I don't see why/where would we need to add a key?

Also why do e need to update it with submitterPayPalMeAddress ? How does it handle refresh problem?

---

Still open for proposals.

[Delgee]

Proposal:

It looks like the issue is creating "buttonOptions" on the constructor. So "buttonOptions" not changed on prop change. https://github.com/Expensify/App/blob/dc0bb5db6dd835279dfb916e8b7b3ebd0703404f/src/components/SettlementButton.js#L43-L73

Solution:

Making a method to create "buttonOptions" so it will be changed if the prop changes.

-    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,
-        };
-    }
-
+getButtonOptionsFromProps() {
+  const buttonOptions = [];
+
+  if (this.props.currency === CONST.CURRENCY.USD && Permissions.canUsePayWithExpensify(this.props.betas) && Permissions.canUseWallet(this.props.betas)) {
+      buttonOptions.push({
+          text: this.props.translate('iou.settleExpensify'),
+          icon: Expensicons.Wallet,
+          value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
+      });
+  }

+  if (this.props.shouldShowPaypal) {
+      buttonOptions.push({
+          text: this.props.translate('iou.settlePaypalMe'),
+          icon: Expensicons.PayPal,
+          value: CONST.IOU.PAYMENT_TYPE.PAYPAL_ME,
+      });
+  }

+  buttonOptions.push({
+      text: this.props.translate('iou.settleElsewhere'),
+      icon: Expensicons.Cash,
+      value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
+  });

+  return buttonOptions;
+}

                             this.props.onPress(iouPaymentType);
                         }}
-                        options={this.state.buttonOptions}
+                        options={this.getButtonOptionsFromProps()}

[daraksha-dk]

The button is not updating because we are showing the previous options we need to re-render when the prop (PayPalMe address) changes

On passing key={lodashGet(this.props, 'iouReport.submitterPayPalMeAddress')} at SettlementButton the button will re-render with the latest option https://github.com/Expensify/App/blob/62ff507162d7712c2aa76b5eb96141f83ec2dd91/src/pages/iou/IOUDetailsModal.js#L140

[jasperhuangg]

@Delgee I like your proposal and I think it should work, let's go with it!

External Upwork post: https://www.upwork.com/jobs/~016bc1d3a553815351

[jasperhuangg]

@daraksha-dk thank you for your proposal, but I don't think your solution would work, because the SettlementButton sets its button styles in the constructor, and the constructor isn't invoked when props change.

[melvin-bot[bot]]

📣 @Delgee You have been assigned to this job by @jasperhuangg! Please apply to this job in Upwork 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 📖

[daraksha-dk]

@daraksha-dk thank you for your proposal, but I don't think your solution would work, because the SettlementButton sets its button styles in the constructor, and the constructor isn't invoked when props change.

My solution is to use key which will re-render the SettlementButton if the key value( submitterPayPalMeAddress ) changes so constructor will be invoked when props change. You can see this article https://medium.com/@albertogasparin/forcing-state-reset-on-a-react-component-by-using-the-key-prop-14b36cd7448e

[Delgee]

@jasperhuangg PR is ready for review. And created a proposal for Upwork.

[melvin-bot[bot]]

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:

• [ ] @sakluger A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:
• [ ] @mananjadhav @jasperhuangg The PR that introduced the bug has been identified. Link to the PR:
• [ ] @sakluger 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:
• [ ] @sakluger A discussion in #contributor-plus 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:
• [ ] @sakluger Payment has been made to the issue reporter (if applicable)
• [ ] @sakluger Payment has been made to the contributor that fixed the issue (if applicable)
• [ ] @sakluger Payment has been made to the contributor+ that helped on the issue (if applicable)

[mananjadhav]

@jasperhuangg @sakluger The last I could trace the changes was creation of SettlementButton in this PR. We've set buttonOptions in the constructor since the beginning and hence it wouldn't have refreshed the code. Now I am not sure if we had this code in some other component before this.

@jasperhuangg do you have the information on this?