[HOLD for payment Aug 4] [P2P in E.cash] Add the Balance Badge to the Payments Settings Option

[Jag96]

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 link: https://www.upwork.com/jobs/~017a88221b02e85314

New Feature

Master Issue
Doc Section

Solution:

1. Refactor the <EnvironmentBadge> component to just be called Badge
2. Add a BadgeText prop to the MenuItem component
3. Add a Badge component to MenuItem here.
4. If the BadgeText prop exists, show the Badge component
5. When rendering the settings page add a badgeText prop with a value equal to the ONYX.USER_WALLET.balance

View all open jobs on Upwork

[parasharrajat]

This is Straightforward.

1. I will update the MenuItem Component to Show an optional Badge near the arrow based on the prop badgeText.
2. We will get the balance from the ONYX.USER_WALLET.balance.
3. In the MenuItem Array we will check if the payments item is rendered show the balance. We have a unique translateKey but we can also add another key for matching purposes if we don't want to use the translateKey for matching.

App/src/pages/settings/InitialPage.js

Line 177 in 7e395c5

onPress={item.action}

4. We will show the formatted balance in the component with currency Sign.
Number(props.userWallet.balance).toFixed(2);

#Question:

1. Do we need to show only $ or we have to get the user's default currency from somewhere?
   e.g.
   We can get it from personalDetails

   // The personal details of the person who is logged in
    myPersonalDetails: PropTypes.shape({

        // Preferred Currency Code of the current user
        preferredCurrencyCode: PropTypes.string,

        // Currency Symbol of the Preferred Currency
        preferredCurrencySymbol: PropTypes.string,
    }),
    ```

[haseeb-islam]

• Yes Firstly I will create a badge view in Side Menu
• Then I will check if we have value in “ONYX.USER_WALLET.balance” if yes then show it if not then simply hide the view
• I will show balance in a formatted way. Like

function currencyFormat(num) {
return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

OutPut will be = $2,665.00

[Jag96]

@parasharrajat your proposal looks good, I've invited you to the Upwork job. Going to tag @stitesExpensify to confirm what the currency symbol should be set to here.

[arpitdeveloper]

1. I will create a Badge in MenuItem component near by right arrow
2. We will get the user current wallet balance(from CurrentWalletBalance.js)
3. Print the user current wallet balance in created badge with currency and formate

[stitesExpensify]

Hmm @kevinksullivan Is the wallet balance always in USD? Or should we localize it?

[kevinksullivan]

It should always be in USD, since users without a US bank account/SSN do not qualify for the Wallet. Pulling from the doc, we also limit who sees the badge in the first place:

All users with a USD personal policy currency will see the badge. Users with a non-USD personal policy currency will not see the balance badge unless they have upgraded to an Active wallet (i.e. international user that also has a SSN, and thus qualifies for an Active wallet)

[parasharrajat]

Great @kevinksullivan. that's what I assumed initially. PR is ready for review now.

[Jag96]

Paid!