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

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:

Refactor the <EnvironmentBadge> component to just be called Badge
Add a BadgeText prop to the MenuItem component
Add a Badge component to MenuItem here.
If the BadgeText prop exists, show the Badge component
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

This is Straightforward.

I will update the MenuItem Component to Show an optional Badge near the arrow based on the prop badgeText.
We will get the balance from the ONYX.USER_WALLET.balance.
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:

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,
    }),
    ```

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

@parasharrajat

@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.

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

@kevinksullivan

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

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)

@kevinksullivan

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

Paid!

Navigation Menu

Repository navigation

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

New Feature

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

New Feature

Activity

parasharrajat commented on Jul 22, 2021

haseeb-islam commented on Jul 23, 2021

Jag96 commented on Jul 23, 2021

arpitdeveloper commented on Jul 23, 2021

stitesExpensify commented on Jul 23, 2021

kevinksullivan commented on Jul 26, 2021

parasharrajat commented on Jul 26, 2021

Jag96 commented on Aug 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions