Update Payments Page to show wallet balance, empty state, and more! #3890

stitesExpensify · 2021-07-06T18:29:27Z

Details

This PR improves the Payments page and brings it more in line with the original design.
Specifically:

Adds the wallet balance
Removes the wallet as a payment method to fund the wallet
Adds the "Payment Methods" title
Adds the empty state for the payment methods list
Adds a loading indicator for when we don't have the wallet balance

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/169463

Tests / QA

Create a new account
Go to Settings -> Payments
Make sure you see this empty state
Log in with an account that has bank accounts/cards
Make sure you see this state

Tested On

Screenshots

…s-finishPaymentsPage 52.74.223.119 ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==

src/components/CurrentWalletBalance.js

src/libs/actions/PaymentMethods.js

jasperhuangg

Besides a super minor change and a quick question, the code looks great and tests well, good stuff :)

I'm wondering whether we should display a loader for the entire modal or disable the "Add Payment Method" button while we're waiting to grab the user's payment methods. Otherwise, it can cause the (kinda ugly/confusing) scenario depicted here where the user opens the dropdown but then the anchor for the dropdown moves:

2021-07-07_12-59-42.mp4

jasperhuangg · 2021-07-09T12:16:12Z

@stitesExpensify Were you able to look into that issue I mentioned above?

stitesExpensify · 2021-07-09T16:01:50Z

Hey there! Sorry for not updating you, but I'm adding a loading circle as we speak :)

stitesExpensify · 2021-07-09T21:37:25Z

Updated!

jasperhuangg · 2021-07-10T01:33:22Z

Hey @stitesExpensify, no worries! I just tested out your solution and it doesn't really seem like it fixes the problem I brought up earlier? I think we should just disable the "Add Payment Method" button until everything is loaded:

2021-07-10_09-30-59.mp4

@Expensify/design What are your thoughts?

shawnborton · 2021-07-12T16:23:49Z

Ah, I see. That makes sense to me. I think we could just "disable" the Add Payment row and make it like 50% opacity like we do with disabled buttons. Thoughts on something like that?

jasperhuangg · 2021-07-13T03:57:43Z

Ah, I see. That makes sense to me. I think we could just "disable" the Add Payment row and make it like 50% opacity like we do with disabled buttons. Thoughts on something like that?

Yup! I totally agree, that was my original recommendation. Should be a one-liner too.

cc @stitesExpensify

stitesExpensify · 2021-07-14T01:43:18Z

Updated to disable the input when loading :)

jasperhuangg · 2021-07-15T12:14:58Z

Hey @stitesExpensify sorry for the delay!

jasperhuangg

@stitesExpensify Looks good! Let's also get rid of the smaller loading spinner you added since it seems kinda redundant now?

stitesExpensify · 2021-07-19T18:14:42Z

since it seems kinda redundant now

I disagree, I think that showing when the methods are loading is still a useful UI element. A disabled button doesn't show that things are loading in and of itself. I think the loader should stay

…s-finishPaymentsPage

jasperhuangg · 2021-07-20T19:21:17Z

@stitesExpensify Sorry for the late response; I've been traveling back to LA. I know this PR is really simple and it's definitely been ongoing for a long time, so sorry for that as well!

I still don't really understand why we need both loaders still. Correct me if I'm wrong, but it looks like both loaders should disappear simultaneously once getPaymentMethods returns and updates all the Onyx keys that both loaders depend on in multiSet. Therefore, the original, large loader at the top of the page should suffice.

Also, from a pure UX standpoint, I think we should get someone from @Expensify/design to help us decide on how it looks. Personally, I think there should only be one loader for everything on the page.

Here's the screen recording (with both loaders) for reference:
https://user-images.githubusercontent.com/31285285/125147996-d2d23180-e161-11eb-9fda-f756f9079b99.mp4

shawnborton · 2021-07-20T19:47:29Z

Candidly I'm a little lost on what is going on here, but looking at the video that Jasper just posted, I agree that the two loading spinners feel strange. Could we just have one that loads everything?

stitesExpensify · 2021-07-20T20:10:04Z

🤦 You're right. Totally my bad, sorry. I forgot that the wallet balance also has a loader. I think we should just keep the balance loader and get rid of the smaller one. Sound good @shawnborton ?

shawnborton · 2021-07-20T20:12:53Z

Sounds good!

stitesExpensify · 2021-07-20T20:22:05Z

Sorry again about that @jasperhuangg. Updated!

jasperhuangg

Looks great! Thanks for your patience with the review :)

OSBotify · 2021-07-21T00:51:11Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2021-07-23T21:35:13Z

🚀 Deployed to staging in version: 1.0.79-5🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2021-07-28T21:08:41Z

🚀 Deployed to production in version: 1.0.80-2🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

Create new CurrentWalletBalance component

23406b8

stitesExpensify self-assigned this Jul 6, 2021

stitesExpensify added 6 commits July 6, 2021 14:34

Remove wallet from list

0335c7a

Remove unused icon

30e72fb

Add empty state message

0017116

Format wallet balance to always be 2 decimals

9f5e17f

Add title and translations

6990161

stitesExpensify marked this pull request as ready for review July 6, 2021 22:17

stitesExpensify requested a review from a team as a code owner July 6, 2021 22:17

MelvinBot requested review from jasperhuangg and removed request for a team July 6, 2021 22:18

stitesExpensify changed the title ~~Create new CurrentWalletBalance component~~ Update Payments Page to show wallet balance, empty state, and more! Jul 6, 2021

jasperhuangg reviewed Jul 7, 2021

View reviewed changes

src/components/CurrentWalletBalance.js Outdated Show resolved Hide resolved

jasperhuangg reviewed Jul 7, 2021

View reviewed changes

src/libs/actions/PaymentMethods.js Show resolved Hide resolved

jasperhuangg requested changes Jul 7, 2021

View reviewed changes

parasharrajat mentioned this pull request Jul 8, 2021

[HOLD for payment 2022-02-08] [HOLD for payment 2022-01-25] Add the Transfer Balance Page #3922

Closed

5 tasks

Fix wrong display name

353a5e4

stitesExpensify added 4 commits July 9, 2021 11:16

Move loading indicator next to the label instead of the payment list

f8e2fba

Style loader to be on the right side

b2f0e21

Remove testing logic

5eedcfe

Remove unused prop

a2bd2f7

disable add payments button while payments are loading

a34944e

jasperhuangg reviewed Jul 15, 2021

View reviewed changes

Merge branch 'main' of github.com:Expensify/Expensify.cash into stite…

cfd317f

…s-finishPaymentsPage

stitesExpensify added 2 commits July 20, 2021 14:19

remove second loading indicator

43f80af

Remove unnecessary view

f16db3b

Style

5655dbc

jasperhuangg approved these changes Jul 21, 2021

View reviewed changes

jasperhuangg merged commit 683bcf4 into main Jul 21, 2021

jasperhuangg deleted the stites-finishPaymentsPage branch July 21, 2021 00:50

OSBotify mentioned this pull request Jul 23, 2021

Deploy Checklist: Expensify.cash 2021-07-23 #4198

Closed

60 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Payments Page to show wallet balance, empty state, and more! #3890

Update Payments Page to show wallet balance, empty state, and more! #3890

stitesExpensify commented Jul 6, 2021 •

edited

Loading

jasperhuangg left a comment •

edited

Loading

jasperhuangg commented Jul 9, 2021

stitesExpensify commented Jul 9, 2021

stitesExpensify commented Jul 9, 2021

jasperhuangg commented Jul 10, 2021 •

edited

Loading

shawnborton commented Jul 12, 2021

jasperhuangg commented Jul 13, 2021

stitesExpensify commented Jul 14, 2021

jasperhuangg commented Jul 15, 2021

jasperhuangg left a comment •

edited

Loading

stitesExpensify commented Jul 19, 2021

jasperhuangg commented Jul 20, 2021 •

edited

Loading

shawnborton commented Jul 20, 2021

stitesExpensify commented Jul 20, 2021

shawnborton commented Jul 20, 2021

stitesExpensify commented Jul 20, 2021

jasperhuangg left a comment

OSBotify commented Jul 21, 2021

OSBotify commented Jul 23, 2021

OSBotify commented Jul 28, 2021

Update Payments Page to show wallet balance, empty state, and more! #3890

Update Payments Page to show wallet balance, empty state, and more! #3890

Conversation

stitesExpensify commented Jul 6, 2021 • edited Loading

Details

Fixed Issues

Tests / QA

Tested On

Screenshots

jasperhuangg left a comment • edited Loading

Choose a reason for hiding this comment

jasperhuangg commented Jul 9, 2021

stitesExpensify commented Jul 9, 2021

stitesExpensify commented Jul 9, 2021

jasperhuangg commented Jul 10, 2021 • edited Loading

shawnborton commented Jul 12, 2021

jasperhuangg commented Jul 13, 2021

stitesExpensify commented Jul 14, 2021

jasperhuangg commented Jul 15, 2021

jasperhuangg left a comment • edited Loading

Choose a reason for hiding this comment

stitesExpensify commented Jul 19, 2021

jasperhuangg commented Jul 20, 2021 • edited Loading

shawnborton commented Jul 20, 2021

stitesExpensify commented Jul 20, 2021

shawnborton commented Jul 20, 2021

stitesExpensify commented Jul 20, 2021

jasperhuangg left a comment

Choose a reason for hiding this comment

OSBotify commented Jul 21, 2021

OSBotify commented Jul 23, 2021

OSBotify commented Jul 28, 2021

stitesExpensify commented Jul 6, 2021 •

edited

Loading

jasperhuangg left a comment •

edited

Loading

jasperhuangg commented Jul 10, 2021 •

edited

Loading

jasperhuangg left a comment •

edited

Loading

jasperhuangg commented Jul 20, 2021 •

edited

Loading