Fix: disable currency abbreviations in custom amounts

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,13 +23,18 @@ type CustomAmountProps = {
 const CustomAmount = (
     {defaultValue, fieldError, currency, value, onValueChange}: CustomAmountProps
 ) => {
+    const {groupSeparator, decimalSeparator} = useCurrencySeparator();
+
     return (
         <div className={classNames('givewp-fields-amount__input-container', {invalid: fieldError})}>
             <CurrencyInput
                 intlConfig={{
                     locale: navigator.language,
                     currency,
                 }}
+                disableAbbreviations
+                decimalSeparator={decimalSeparator}
+                groupSeparator={groupSeparator}
                 className="givewp-fields-amount__input givewp-fields-amount__input-custom"
                 aria-invalid={fieldError ? 'true' : 'false'}
                 id="amount-custom"
@@ -36,7 +43,7 @@ const CustomAmount = (
                 defaultValue={defaultValue}
                 value={value}
                 decimalsLimit={2}
-                onValueChange={(value) => onValueChange(value !== undefined ? value : '')}
+                onValueChange={(value) => {onValueChange(value !== undefined ? value : '')}}
             />
         </div>
     );

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 };
+};
+