[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 contributors@expensify.com 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)