Fix: disable currency abbreviations in custom amounts

[JoshuaHungDinh]

Resolves #7537
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

[kjohnson]

There was another suggestion to calculate the group and decimal separators outside of react-currency-input & then provide them to the component as props.

@JoshuaHungDinh is this a second, related issue being addressed?

[kjohnson]

This will override the browser's locale and assume a US locale for separators.

While is does prevent the NaN issue, we shouldn't do so by locking the local config.

[kjohnson]

Also, I don't think we need a hook for this, since the value shouldn't change after page load. Instead, we could initialize these variables at the top of the component file,

import ...

const formatter = new Intl.NumberFormat();
// ...

const Component = () => {
    // ...
}

export default Component;

[kjohnson]

@JoshuaHungDinh I updated this to use the browser locale configuration and replaced the non-breaking space on the group separator to avoid any conflicts with the suffix separator used by the <CurrencyInput /> component.

const formatter = new Intl.NumberFormat(navigator.language);
const groupSeparator = formatter.format(1000).replace(/[0-9]/g, '');
const decimalSeparator = formatter.format(1.1).replace(/[0-9]/g, '');

  //
  groupSeparator={
    /**
     * Replace non-breaking space to avoid conflict with the suffix separator.
     * @link https://github.com/cchanxzy/react-currency-input-field/issues/266
     */
    groupSeparator.replace(/\u00A0/g, ' ')
  }
  //

[JoshuaHungDinh]

Awesome, these changes make sense.

Thanks for helping me move this forward. I'll send it to QA.

[kjohnson]

@JoshuaHungDinh good job researching the underlying conflict!

[kjohnson]

Build for QA, see https://github.com/impress-org/givewp/actions/runs/12205301456.