From a6dab4c88dc5d1e91dfaedb42ec167320b062c13 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Thu, 14 Nov 2024 13:59:24 -0800 Subject: [PATCH 1/4] fix: disable abbreviations --- .../registrars/templates/fields/Amount/CustomAmount.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx index 1341222877..fd50287d91 100644 --- a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx +++ b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx @@ -28,6 +28,7 @@ const CustomAmount = ( locale: navigator.language, currency, }} + disableAbbreviations className="givewp-fields-amount__input givewp-fields-amount__input-custom" aria-invalid={fieldError ? 'true' : 'false'} id="amount-custom" From 6251549b3f882ebae8b25fbbe81e3d7ed017ad18 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Thu, 21 Nov 2024 10:44:47 -0800 Subject: [PATCH 2/4] feature: use currency separators --- .../templates/fields/Amount/CustomAmount.tsx | 8 +++++- .../fields/Amount/useCurrencySeparators.tsx | 26 +++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx index fd50287d91..a67f4fe5ad 100644 --- a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx +++ b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx @@ -2,6 +2,8 @@ import classNames from 'classnames'; import {__} from '@wordpress/i18n'; import CurrencyInput from 'react-currency-input-field'; import { CurrencyInputOnChangeValues } from "react-currency-input-field/dist/components/CurrencyInputProps"; +import {useEffect, useState} from "react"; +import useCurrencySeparator from "@givewp/forms/registrars/templates/fields/Amount/useCurrencySeparators"; /** * @since 3.0.0 @@ -21,6 +23,8 @@ type CustomAmountProps = { const CustomAmount = ( {defaultValue, fieldError, currency, value, onValueChange}: CustomAmountProps ) => { + const {groupSeparator, decimalSeparator} = useCurrencySeparator(); + return (
onValueChange(value !== undefined ? value : '')} + onValueChange={(value) => {onValueChange(value !== undefined ? value : '')}} />
); diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx new file mode 100644 index 0000000000..71a27a1754 --- /dev/null +++ b/src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx @@ -0,0 +1,26 @@ +import { useState, useEffect } from 'react'; + +/** + * Custom hook to determine the group and decimal separators based on locale. + */ +export default function useCurrencySeparator(){ + const [groupSeparator, setGroupSeparator] = useState(','); + const [decimalSeparator, setDecimalSeparator] = useState('.'); + + useEffect(() => { + const formatter = new Intl.NumberFormat(); + const getGroupSeparator = formatter.format(1000).replace(/[0-9]/g, ''); + const getDecimalSeparator = formatter.format(1.1).replace(/[0-9]/g, ''); + + // Ensure separators are not the same. + if (getGroupSeparator === getDecimalSeparator) { + setDecimalSeparator(getDecimalSeparator === '.' ? ',' : '.'); + } else { + setGroupSeparator(getGroupSeparator); + setDecimalSeparator(getDecimalSeparator); + } + }, []); + + return { groupSeparator, decimalSeparator }; +}; + From 73f413b6456b5dd6821fe38a4c374067cba20b53 Mon Sep 17 00:00:00 2001 From: "Kyle B. Johnson" Date: Fri, 6 Dec 2024 14:36:37 -0500 Subject: [PATCH 3/4] Refactor: Replace separator hook --- .../templates/fields/Amount/CustomAmount.tsx | 7 ++--- .../fields/Amount/useCurrencySeparators.tsx | 26 ------------------- 2 files changed, 4 insertions(+), 29 deletions(-) delete mode 100644 src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx index a67f4fe5ad..abc42041e2 100644 --- a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx +++ b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx @@ -2,8 +2,6 @@ import classNames from 'classnames'; import {__} from '@wordpress/i18n'; import CurrencyInput from 'react-currency-input-field'; import { CurrencyInputOnChangeValues } from "react-currency-input-field/dist/components/CurrencyInputProps"; -import {useEffect, useState} from "react"; -import useCurrencySeparator from "@givewp/forms/registrars/templates/fields/Amount/useCurrencySeparators"; /** * @since 3.0.0 @@ -17,13 +15,16 @@ type CustomAmountProps = { onValueChange?: (value: string, name?: string, values?: CurrencyInputOnChangeValues) => void; }; +const formatter = new Intl.NumberFormat(); +const groupSeparator = formatter.format(1000).replace(/[0-9]/g, ''); +const decimalSeparator = formatter.format(1.1).replace(/[0-9]/g, ''); + /** * @since 3.0.0 */ const CustomAmount = ( {defaultValue, fieldError, currency, value, onValueChange}: CustomAmountProps ) => { - const {groupSeparator, decimalSeparator} = useCurrencySeparator(); return (
diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx deleted file mode 100644 index 71a27a1754..0000000000 --- a/src/DonationForms/resources/registrars/templates/fields/Amount/useCurrencySeparators.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useState, useEffect } from 'react'; - -/** - * Custom hook to determine the group and decimal separators based on locale. - */ -export default function useCurrencySeparator(){ - const [groupSeparator, setGroupSeparator] = useState(','); - const [decimalSeparator, setDecimalSeparator] = useState('.'); - - useEffect(() => { - const formatter = new Intl.NumberFormat(); - const getGroupSeparator = formatter.format(1000).replace(/[0-9]/g, ''); - const getDecimalSeparator = formatter.format(1.1).replace(/[0-9]/g, ''); - - // Ensure separators are not the same. - if (getGroupSeparator === getDecimalSeparator) { - setDecimalSeparator(getDecimalSeparator === '.' ? ',' : '.'); - } else { - setGroupSeparator(getGroupSeparator); - setDecimalSeparator(getDecimalSeparator); - } - }, []); - - return { groupSeparator, decimalSeparator }; -}; - From 096c0b6f1be7aa17f320f4a6115e03dbd0879d0f Mon Sep 17 00:00:00 2001 From: "Kyle B. Johnson" Date: Fri, 6 Dec 2024 14:47:40 -0500 Subject: [PATCH 4/4] Fix: Prevent conflict with suffix separator --- .../templates/fields/Amount/CustomAmount.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx index abc42041e2..e0cb0b147c 100644 --- a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx +++ b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx @@ -15,7 +15,7 @@ type CustomAmountProps = { onValueChange?: (value: string, name?: string, values?: CurrencyInputOnChangeValues) => void; }; -const formatter = new Intl.NumberFormat(); +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, ''); @@ -35,7 +35,13 @@ const CustomAmount = ( }} disableAbbreviations decimalSeparator={decimalSeparator} - groupSeparator={groupSeparator} + 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, ' ') + } className="givewp-fields-amount__input givewp-fields-amount__input-custom" aria-invalid={fieldError ? 'true' : 'false'} id="amount-custom"