[$500] Wallet - No feature list is displayed in Wallet page

[lanitochka17]

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

---

Version Number: 1.4.7-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #32152

Action Performed:

Pre-requisite: user must be logged in and no accounts or wallet should have been connected

1. Go to Settings > Wallet

Expected Result:

If no BA or wallet has been connected, the feature list should be displayed

Actual Result:

No feature list is displayed in Wallet page even if no account or wallet has been connected

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6297777_1701458348934.bandicam_2023-12-01_13-49-02-242.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014f8c06a2b5c9f051
• Upwork Job ID: 1730706873964122112
• Last Price Increase: 2023-12-01

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014f8c06a2b5c9f051

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @burczu (External)

[Krishna2323]

Proposal

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

Wallet - No feature list is displayed in Wallet page.

What is the root cause of that problem?

We check if the userWallet object is empty or not to determine if the user has a connected wallet but the basic wallet details are added by default when the user signs-up so the object is never empty even if the user has not enabled the wallet.

App/src/pages/settings/Wallet/WalletPage/WalletPage.js

Line 68 in 414c08c

const hasWallet = !_.isEmpty(userWallet);

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

We need to add few more checks apart from !_.isEmpty to determine if the user has enabled the wallet or not. We can use some default properties in the userWallet object like hasAcceptedTerms or hasPaymentMethod .

Or we can check like we do in KYCWall :

App/src/components/KYCWall/BaseKYCWall.js

Line 162 in 414c08c

const hasActivatedWallet = this.props.userWallet.tierName && _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], this.props.userWallet.tierName);

Optional:

When we are at the feature list we can also show the Enable Expensify Wallet option when Add Payment Method button is clicked so that user has both options.

Result

[neonbhai]

Proposal

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

Wallet - No feature list is displayed in Wallet page.

What is the root cause of that problem?

The feature does not show as the variable hasWallet on WalletPage.js resolves to true.
This happens as even on new Account Creation, the user already has a wallet object:

The flow is for the user to activate the wallet using KYC.

So when checking if we want to show the WalletEmptyState component to the user, we should use hasActivatedWallet here.

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

We should change the line here:

App/src/pages/settings/Wallet/WalletPage/WalletPage.js

Line 71 in 414c08c

const shouldShowEmptyState = !hasBankAccount && !hasWallet && !hasAssignedCard;

to

const shouldShowEmptyState = !hasBankAccount && !hasActivatedWallet && !hasAssignedCard;

This will use the correct variable to calculate if we should show empty state.

Result

Screen.Recording.2023-12-02.at.6.56.10.AM.mov

[Pujan92]

Expected from here

[Krishna2323]

Actually that PR meant to show the WalletCard on Wallet Page in every case but we need to show the WalletEmptyState component when hasBankAccount, hasWallet & hasAssignedCard are false, here we can replace hasWallet with has any other variable which checks for walletLinkedAccountID or hasActivatedWallet variable that I mentioned in my proposal.

App/src/pages/settings/Wallet/WalletPage/WalletPage.js

Line 338 in 414c08c

{hasWallet && (

cc: @grgia