MPDX-7786 Don't round donations

[caleballdrin]

Description

https://jira.cru.org/browse/MPDX-7786
The donations should always be shown with 2 decimal places unless it's '.00' in which case it can just be rendered without any decimal places.

I think we could get away with only doing this fix on the New MPDX since we're hopefuilly moving away from the old version soon.

Example pages this will need to be fixed on:
Contacts donation
Donations page
Tools
Reports

Changes I made

• Change formatCurrency to show 2 decimal places but remove trailing 0's
• Add formatCurrencyNoSymbol to format the number without the currency symbol
• Replace math.round with the currency formatters

Checklist:

• I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
• I have requested a review from another person on the project

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-833.d3dytjb8adxkk5.amplifyapp.com

[canac]

Since you're already touching all the places where currency is formatted, we should be using currencyFormat whenever we're dealing with money instead of manually appending the currency code like some components currently do.

[caleballdrin]

@canac In some places we want to have both the currency symbol and the currency code. For example: $10 USD.

Other places we don't want the symbol in front of the number. Mainly because some countries don't have a symbol so it does this: UGX 10 UGX

On places like the donation report and 14 month report, there isn't much space and the numbers get cut off when there is a currency with no symbol and it shows the currency code twice.

I don't think there is a way to set the type to currency and then turn off the symbol. That is why I made formatCurrencyNoSymbol.

[canac]

@caleballdrin Sorry, I'm still a little confused.

In some places we want to have both the currency symbol and the currency code. For example: $10 USD.

Why is that? Why don't we just trust the browser to do this for us? Also, that looks fine for English but looks weird in locales that put the symbol after the amount, i.e. new Intl.NumberFormat('de', { style: 'currency', currency: 'USD' }).format(10) + currency shows 10,00 $ USD.

Other places we don't want the symbol in front of the number. Mainly because some countries don't have a symbol so it does this: UGX 10 UGX

Why don't we want it to display like this with only one symbol: 10 UGX?

On places like the donation report and 14 month report, there isn't much space and the numbers get cut off when there is a currency with no symbol and it shows the currency code twice.

I see your point about not putting symbols in the table because there's not much space, but I'm still confused why we'd display an amount like $10 USD (with both the symbol and the currency code). Is it to make extra clear which currency we mean because some amounts refer to foreign currencies?

[caleballdrin]

@caleballdrin Sorry, I'm still a little confused.

In some places we want to have both the currency symbol and the currency code. For example: $10 USD.

Why is that? Why don't we just trust the browser to do this for us? Also, that looks fine for English but looks weird in locales that put the symbol after the amount, i.e. new Intl.NumberFormat('de', { style: 'currency', currency: 'USD' }).format(10) + currency shows 10,00 $ USD.

We don't have to have that I suppose. Americans are used to seeing the $ sign in front of money and that is the way it currently is. We could trust the browser, but there are certain places where we want to make it clear what the currency is. Since some currencies use the same symbol. So in most places we want the code 'USD' to distinguish and in other places it is not necessary so just the code is enough.

Other places we don't want the symbol in front of the number. Mainly because some countries don't have a symbol so it does this: UGX 10 UGX

Why don't we want it to display like this with only one symbol: 10 UGX?

This is exactly the issue. We can't make something like 10 UGX with Intl.NumberFormat('ug', { style: 'currency', currency: 'UGX'. This is because by using style:'currency' it will automatically put the UGX at the front.

On places like the donation report and 14 month report, there isn't much space and the numbers get cut off when there is a currency with no symbol and it shows the currency code twice.

I see your point about not putting symbols in the table because there's not much space, but I'm still confused why we'd display an amount like $10 USD (with both the symbol and the currency code). Is it to make extra clear which currency we mean because some amounts refer to foreign currencies?

Yes, we want it to be clear when there are multiple currencies. Since some share the same symbol.

[canac]

Since some currencies use the same symbol.

If that's true, we definitely want to disambiguate like you're saying. But do you have an example? I know that, for example, USD and CAD are shown differently (e.g. $10 vs CA$10, respectively).

This is exactly the issue. We can't make something like 10 UGX with Intl.NumberFormat('ug', { style: 'currency', currency: 'UGX'. This is because by using style:'currency' it will automatically put the UGX at the front.

I'm suggesting letting the browser handle whether to put it in the front or at the end based on the ISO formatting rules for that currency.

Yes, we want it to be clear when there are multiple currencies. Since some share the same symbol.

I agree in theory, but I wasn't able to find any currencies that use the same symbol.

Thanks for clarifying. I trust your judgement, so feel free to leave it the way you have it if you think that's best. It just seems more accurate to let the browser handle currency formatting the correct way for each currency instead of universally putting the symbol after the amount. I'm assuming that there aren't any ambiguous symbols since I used a script to check all currency codes listed here and none produced identical output after formatting.

Feel free to use your approach if you prefer

[caleballdrin]

If that's true, we definitely want to disambiguate like you're saying. But do you have an example? I know that, for example, USD and CAD are shown differently (e.g. $10 vs CA$10, respectively).

I agree in theory, but I wasn't able to find any currencies that use the same symbol.

When you click 'Add New Donation' the modal gives you the option to choose a currency. It shows both the currency code and the symbol. Many symbols use $. Like TTD, SRD, SGD, NZD, NAD, MXN all use the $. But I think you are right that when it actually formats it, it adds the letters in addition to the $. So maybe that is enough to distinguish.

I wonder if we need to talk to someone higher up about this decision. Because it seems kind of weird that they haven't used the symbols all this time. And instead, they manually put the currency code.

[canac]

Good point about the new donation modal. Those options come from the server constants, which isn't based on the browser's i18n data. There are duplicates in those symbols, like you pointed out. Maybe we can ask Scott what he thinks at standup this afternoon.

[canac]

Great work! Almost there!

[canac]

One last comment from something I missed last time. Also, the test for the NaN case is failing.

[dr-bizz]

This is amazing! Thank you for doing this! It looks great.

[canac]

Great work pushing this across the finish line! 🎉