Allow decimals and currencies for number component

[srtalbot]

As a form builder, I need to collect financial information in multiple currencies
when I am evaluating a grant or contribution
so that I can evaluate international bids

Context

Client from the Gs&Cs presentation. They attended in Oct and started trying out GC Forms. Previously Strategic Innovation Fund (SIF), now Strategic Response Fund at ISED collecting project costs . They need to collect multiple different types of currencies. Client has one of the largest grant and contribution in government with funding for projects of at least 20 million dollars.

Acceptance criteria:

• Form builders can select a "number component"
• Form builders can allow or block negative numbers
• Form fillers can input decimals as "numbers"
• Form builders can select what currency they would like to collect (use custom dropdown for v1)

To be discussed with client

• Do end-users need to select their currency?
• Does the client want to only allow specific currencies?

[anikbrazeau]

Related: #4899, #5063, #5951

[anikbrazeau]

Preliminary options analysis

Workarounds with current GC Forms functionality - separate questions

• "Short answer" or "Dropdown" or "Searchable list" field following "Number" field for user to specify currency.
• "Hint text" to demand user to enter amounts in a specific currency.

New Currency Selector Combined with Amount Input

• Dropdown to choose currency from list
• Default to CAD
• Allow currency switch without changing number input
• Different formatting/order/decimal separator in French and English
• Specify decimal places

Parsing logic to allow for entering inputs with ISO code prefix

Automatic calculation / conversion engine to display a unified amount in multiple currencies

• Would need a source of truth for currency conversion accessible? with current exchange rates
• Might not be ideal for this given time-based factor

Considerations

• different EN/FR symbol, operator separator, decimal, precision, format
• localization
• validation
• feasibility
• need decimals
• backward compatibility
• other numeric formats and units
• measurement standard
• error handling
• scalability to other types of units (ex: km/hr, liter, gram)
• significant digits / rounding
• other similar predefined number formats (%, fixed digits, scientific, units)

Potential schema specifications

{
  "value": "23234235.56"
  "prefix": "$"
  "formattedvalue": "23,234,234.56"
  "label": "Currency"
  "fixedDecimalScale": "true", 
  "allowNegative": "true"
  "displayType": "string",
  "currencyCode": "CAD", 
  "displayCountry": "Canada"
  "inputFormat": "Number",
  "validate.min": false,
  "validate.max": false,
  "validate.step": false,
  "validate.integer": false,
  "truncateMultipleSpaces": false,
  "input": true,
  "delimiter": true
}

Inspirations

References

• https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters
• https://dribbble.com/search/currency-input
• https://docs.appian.com/suite/help/25.4/recipe-define-a-simple-currency-component.html
• https://shopify.dev/docs/api/app-home/polaris-web-components/forms/moneyfield
• https://www.npmjs.com/package/react-currency-format
• https://stackoverflow.com/questions/68736844/is-there-any-library-to-format-currency-values-in-java
• https://www.codeproject.com/articles/Money-pattern#comments-section
• https://dribbble.com/search/currency%20form?timeframe=
• https://currency.js.org/
• https://support.microsoft.com/en-us/office/format-a-number-or-currency-field-e48f2312-67f0-4921-aca0-15d36b7f9c3b
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
• https://docs.oracle.com/en/cloud/saas/planning-budgeting-cloud/pfusa/designing_forms_for_multiple_currencies.html

[anikbrazeau]

Connect with Vivian On tech feasibility, constraints, etc.

• I'm pretty sure every currency symbol is UTF-8 safe.

From Bryan: Including symbols could get tricky to convert to CSV / Excel or other spreadsheet platforms.

[ShadeWyrm]

The schema and functionality all seems reasonable.

https://en.wikipedia.org/wiki/Currency_Symbols_(Unicode_block)

Currency Symbols are part of the UTF-8 block, and so we'd just need a list of acceptable currencies. (Should that also be a custiomization point?)

The only point of contention is currency conversion, as we need a source of truth which means an API we can hit to get conversion rates - so unless ISED has an easy to access variant for that, we can't provide that feasibly. Outside that, the rest of it should be a fairly straightforward component.

[anikbrazeau]

More on the client's needs

cc @ShadeWyrm

"We just want to be able to control the structure of how monetary amounts are input and displayed in the form. Right now, on our test form, we are using the short answer field for any currency data; but leveraging the help text area to help users input their data. We chose this method over the “number” function you have, as we wanted users to be as precise as possible with putting in the cost; that is, we want them to put in the dollar sign, spaces, decimal points, commas, etc., which aren’t available in the “numbers” field. However, if you can make a field that only accepts numbers, but auto-formats them in a way as CAD currency, then that would be precisely what we are looking for."
+
Currency format by language
ENG: $20 000 000.00
FRE: 20 000 000,00 $

[anikbrazeau]

Working on mocking up some design options here: https://www.figma.com/design/golP8hLjm20wT3427Vpxiw/Custom-validation-for-inputs?node-id=9037-794&p=f&t=2eRxmzCd3HpJrUEX-0

[anikbrazeau]

Formatting numbers for currency

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

• https://support.google.com/docs/answer/56470?visit_id=639009026249171966-1204213763&p=drive_custom_numbers&rd=1

• https://docs.medusajs.com/ui/components/currency-input

• https://codepen.io/poralcode/pen/oNQQQyp

• https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes

• https://flowbite.com/docs/forms/number-input/

• https://www.lightningdesignsystem.com/2e1ef8501/p/8268ee-input

[anikbrazeau]

Latest progress: https://www.figma.com/design/golP8hLjm20wT3427Vpxiw/Custom-validation-for-inputs?node-id=9064-1017&t=2BWgfD2IVq96oSPh-4

[anikbrazeau]

Feedback from sprint review

--> Get feedback from client
--> Element to build trust
--> Consider what this means for having (fuller) modal
--> What is the simplest option that meets needs now
--> How might this scale in the future

[timarney]

Built in JS function might be helpful

const en_number = 10000
console.log(new Intl.NumberFormat("en-CA").format(number));

const fr_number = 10000
console.log(new Intl.NumberFormat("fr-CA").format(number));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

[anikbrazeau]

PR: #6589