Fix: disable currency abbreviations in custom amounts

[JoshuaHungDinh]

Resolves GIVE-1985

Description

References:
cchanxzy/react-currency-input-field#255
https://github.com/cchanxzy/react-currency-input-field#abbreviations

Some languages in certain browsers update the CustomAmount on forms with abbreviated letters for the value. This results in an issue where the input can render NaN & adds "000" for every additional 0 included.

This PR addresses the issue by disabling the abbreviations.

Affects

Donation Forms

Visuals

Disable Abbreviations

Screen.Recording.2024-11-15.at.6.58.00.AM.mov

With calculated separators

Screen.Recording.2024-11-21.at.10.51.33.AM.mov

Testing Instructions

• Create a form.
• Using Chrome browser change the preferred language to Swedish.
• Update currency from settings to Swedish krona/SEK.
• View Form and enter amounts in the custom field, were testing that the correct number of "0"s are added each time and that NaN errors do not occur.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Self Review of code and UX completed

[kjohnson]

@JoshuaHungDinh the screen recording in the PR description suggests that the abbreviation is still used. Is that correct?

[JoshuaHungDinh]

@kjohnson I logged a couple of items coming from the input field. We are only using the value. It looks like it might replace the letter with a space in the display.

[kjohnson]

Oh, ok, so the underlying issue was that it was interpreting the k as an abbreviations for thousand, which was being converted from 1k to 1,000. Interesting. That would explain why it was intermittent based on the currency.

Abbreviations

It can parse values with abbreviations k, m and b

Examples:

1k = 1,000
2.5m = 2,500,000
3.456B = 3,456,000,000

This can be turned off by passing in disableAbbreviations.

[JoshuaHungDinh]

@kjohnson Yea, Im not the biggest fan of the formatted display not reintroducing the proper group separator. There was another suggestion to calculate the group and decimal separators outside of react-currency-input & then provide them to the component as props. I've updated this PR to include both suggestions.

cchanxzy/react-currency-input-field#266