[HOLD for payment 2022-02-09] Selected payment Method is not highlighted - reported by @parasharrajat

[mvtglobally]

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. Open app
2. Navigate to Settings> Payments
3. Click on any payment method

Expected Result:

Selected payment Method should be highlighted

Actual Result:

Selected payment Method is not highlighted

Workaround:

unknown

Platform:

Where is this issue occurring?

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

Version Number: 1.1.31-0
Reproducible in staging?: Y
Reproducible in production?: n/a
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

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

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @MonilBhavsar (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

Proposal (if external)

Before triaging for the reason that I reported it.

1. Add a new props to PaymentMethodList activePaymentMethodID and actionPaymentMethodType to hightlight the paymentMethod from the list.

2. in PaymentMethodList, add to the paymentMethod object when it matches with the passed props.

   App/src/pages/settings/Payments/PaymentMethodList.js

   Lines 85 to 89 in 56ef069

   	combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({
   	...paymentMethod,
   	type: MENU_ITEM,
   	onPress: e => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData),
   	}));

iconFill: StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED),
wrapperStyle: StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED),

3. Pass selectedPaymentMethod and selectedPaymentMethodType these props.

Note: I am not taking selectedPaymentMethod and selectedPaymentMethodType as the prop names for a reason there is another feature in development that utilizes similar prop names.

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[NicMendonca]

Upwork job: https://www.upwork.com/jobs/~01dfe0d228f40d6a2f

[rushatgabhane]

Unassigning myself as Rajat doesn't need a C+ review

[marcochavezf]

@parasharrajat cool! That proposal looks good, assigning you.

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @marcochavezf!
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 📖

[botify]

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

• Highlight the 💳 Payment Method on the PaymentMethod list when its menu is active #7374

If no regressions arise, payment will be issued on 2022-02-09. 🎊

[NicMendonca]

paid for reporting & fixing! thank you!