Implement new wallet page layout

[roryabraham]

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:

Open Settings -> Wallet

Expected Result:

When you don't have an Expensify Wallet configured, it should look like this:

When you do have an Expensify Wallet configured, it should look like this:

Actual Result:

It doesn't look like that

Workaround:

n/a
View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @stephanieelliott (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[roryabraham]

@shawnborton I'm having difficulty finding the running money asset in DropBox. Can you help gather the assets we need here then we can make this external? Also lmk if you need help adjusting the aspect ratio on the lottie animation. Would be good to verify that before we make it external as well

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Implement new wallet page layout

What is the root cause of that problem?

It's a new feature

What changes do you think we should make in order to solve the problem?

1. When you don't have an Expensify Wallet configured

We will use IllustratedHeaderPageLayout to display the header with the background

and then for the children we can use FeatureList component to display the title, subtitle, and all the features

This case is the same with WorkspacesListPage

2. When you do have an Expensify Wallet configured

Each type of payment method can be wrapped in a Section component

This case is the same with WorkspaceReimburseView

What alternative solutions did you explore? (Optional)

[hungvu193]

Proposal

Please re-state the feature request that we are trying to solve in this issue.

Implement new wallet page layout

What is the root cause of that problem?

We're using ScreenWrapper for BaseWalletPage.

What changes do you think we should make in order to solve the problem?

1. Replace the ScreenWrapper with IllustratedHeaderPageLayout.
2. Remove HeaderWithBackButton and move all its props to IllustratedHeaderPageLayout. Also add shouldShowBackButton to make sure back button is visible.
3. Use FeatureList to display empty state.
4. Save the lottie animation json to our assets/animations, define it in LottieAnimations and pass it as illustration props in our IllustratedHeaderPageLayout, also add props backgroundColor with the value in issue description.
5. Update the listHeaderComponent and PaymentMethodList to match the new design. (We can use Section as we already used it for WorkspaceReimburseView). Since we updated the PaymentMethodList, ChooseTransferAccountPage will be updated as well.

What alternative solutions did you explore? (Optional)

N/A

[roryabraham]

I think @dukenv0307's proposal provides enough detail and LGTM, but I'm not going to make this external until we get the assets together

[shawnborton]

I think this is the correct animation: https://www.dropbox.com/scl/fi/a6l4rf8qzj29kimy3va8o/Expensify-Fast-Money-2-121322-kjs-1.json?rlkey=yi2d3pun1syf3dzaqy6j3w10x&dl=0

[shawnborton]

Also just wanted to double check with @grgia so we aren't doubling up on work here, as I think maybe this one might be being worked on as part of the Expensify Card project?

[grgia]

Yeah @roryabraham this is being done by Callstack as part of the card settings project #22871. Closing this as a duplicate

[grgia]

(PR in progress here - https://github.com/Expensify/App/pull/26406/files)