[HOLD for payment on July 8] Add icons to the IOU payment methods

[trjExpensify]

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

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

---

Deliverables

• Add icons to all of the IOU payment methods in the payment method selector within the IOUDetails modal

Reproduction Steps

1. Click the + icon and select Request Money
2. Enter an amount and click next
3. Select an attendee and then click confirm
4. Log-in to the account you just sent the request to
5. Click the badge icon on the chat row in the LHN to access the IOUDetails modal
6. Click the v on the confirmation button to access the payment method selector

Platform:

All Platforms

Version Number: v1.0.74-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

CC: @shawnborton can you post the assets for this?

---

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @jboniface (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

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

[jboniface]

lgtm

[shawnborton]

I included the cash, PayPal, and Venmo icons here: PaymentIcons.zip

The wallet icon already exists in the E.cash repo.

[parasharrajat]

Seems like a quick one. We need to pass the icon to menu items here https://github.com/Expensify/Expensify.cash/blob/b49e2221f74f04e664f10a0675c4d4fe7cc5de07/src/pages/iou/IOUDetailsModal.js#L260.

Thus we update our Button component to add support for an optional Icon. We can pass custom ContentComponent to the Button but I think it would be best to support icon natively in the button Component.

Then based on the selected payment Option we pass down the Icon as well as text to the Button.

[MelvinBot]

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

[parasharrajat]

Please let me know if I am good to submit a PR. Thanks.

[Jag96]

Thus we update our Button component to add support for an optional Icon. We can pass custom ContentComponent to the Button but I think it would be best to support icon natively in the button Component.

I'm not 100% clear on this, what Button component needs to be updated? Couldn't we just create a paymentTypeIconOptions map like we do for paymentTypeTextOptions and set the icon value where we set the text?

[parasharrajat]

I added that step as I think when we select a payment mode that option should be visible on the button with its icon. If this is not required and we can skip this step.

[Jag96]

Gotcha, I think that's a good clarification so let's double-check with @trjExpensify: after selecting the payment method, should the button below include the icon or just the text (The green Pay with Expensify button)?

If we do decide to add the icon to the button, that part of your proposal looks good to me @parasharrajat, so feel free to submit a PR once we clarify that last piece.

[trjExpensify]

Nah, we're not looking to add the icons to the confirmation button. 👍

[Jag96]

Reopening to keep track of payment

[Jag96]

Paid!