Repository navigation
[HOLD for payment on July 8] Add icons to the IOU payment methods #3791
Description
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
- Click the
+icon and selectRequest Money - Enter an amount and click
next - Select an attendee and then click
confirm - Log-in to the account you just sent the request to
- Click the badge icon on the chat row in the LHN to access the IOUDetails modal
- Click the
von 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?
Activity
MelvinBot commentedon Jun 29, 2021
Triggered auto assignment to @jboniface (
AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.MelvinBot commentedon Jun 29, 2021
Triggered auto assignment to @MonilBhavsar (
Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.jboniface commentedon Jun 29, 2021
lgtm
shawnborton commentedon Jun 29, 2021
I included the cash, PayPal, and Venmo icons here: PaymentIcons.zip
The wallet icon already exists in the E.cash repo.
parasharrajat commentedon Jun 29, 2021
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 commentedon Jun 30, 2021
Triggered auto assignment to @Jag96 (
External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.3 remaining items
parasharrajat commentedon Jul 1, 2021
Please let me know if I am good to submit a PR. Thanks.
Jag96 commentedon Jul 1, 2021
I'm not 100% clear on this, what Button component needs to be updated? Couldn't we just create a
paymentTypeIconOptionsmap like we do forpaymentTypeTextOptionsand set theiconvalue where we set the text?parasharrajat commentedon Jul 1, 2021
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 commentedon Jul 1, 2021
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 Expensifybutton)?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 commentedon Jul 1, 2021
Nah, we're not looking to add the icons to the confirmation button. 👍
[-]Add icons to the IOU payment methods[/-][+][HOLD for payment on July 8] Add icons to the IOU payment methods[/+]Jag96 commentedon Jul 1, 2021
Reopening to keep track of payment
Jag96 commentedon Jul 9, 2021
Paid!