fix: formatting issues with the decimal separator of the user locale

outaTiME · Jan 20, 2024 · e21eb99 · e21eb99
1 parent 0d9692e
commit e21eb99
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/packages/client/components/AppContainer.js b/packages/client/components/AppContainer.js
@@ -947,19 +947,24 @@ const withPurchases = (Component) => (props) => {
 };
 
 const withLocalization = (Component) => (props) => {
-  const [{ digitGroupingSeparator, decimalSeparator }] =
-    Localization.useLocales();
+  const [locale] = Localization.useLocales();
   const [reloadKey, setReloadKey] = React.useState();
   React.useEffect(() => {
-    AmbitoDolar.setDelimiters({
-      thousands: digitGroupingSeparator,
-      decimal: decimalSeparator,
-    });
-    if (__DEV__) {
-      console.log('💫 Locale updated', AmbitoDolar.getDelimiters());
+    if (locale) {
+      AmbitoDolar.setDelimiters({
+        thousands: locale.digitGroupingSeparator,
+        decimal: locale.decimalSeparator,
+      });
+      if (__DEV__) {
+        console.log('💫 User locale updated', AmbitoDolar.getDelimiters());
+      }
+      setReloadKey(Date.now());
+    } else {
+      if (__DEV__) {
+        console.warn('User locale not available');
+      }
     }
-    setReloadKey(Date.now());
-  }, [digitGroupingSeparator, decimalSeparator]);
+  }, [locale]);
   if (reloadKey) {
     return <Component key={reloadKey} {...props} />;
   }

diff --git a/packages/client/utilities/Helper.js b/packages/client/utilities/Helper.js
@@ -61,8 +61,6 @@ const getJson = (url, opts = {}) => {
     }) */
 };
 
-const { decimal: DECIMAL_SEPARATOR } = AmbitoDolar.getDelimiters();
-
 const FRACTION_DIGITS = AmbitoDolar.FRACTION_DIGITS;
 
 const formatNumber = AmbitoDolar.formatNumber;
@@ -75,18 +73,17 @@ const formatCurrency = AmbitoDolar.formatCurrency;
 
 // https://github.com/realadvisor/rifm/blob/master/pages/number-format/index.js#L39
 
-const numberAccept = new RegExp(`[\\d${DECIMAL_SEPARATOR}]+`, 'g');
-
-const parseNumber = (string) => (string.match(numberAccept) || []).join('');
-
 const formatFloatingPointNumber = (value, maxDigits = FRACTION_DIGITS) => {
   if (typeof value === 'number') {
     return formatNumber(value, maxDigits, false);
   }
-  const parsed = parseNumber(value);
-  let [head, tail] = parsed.split(DECIMAL_SEPARATOR);
-  // add 0 on head when value starts with DECIMAL_SEPARATOR
-  if (parsed.indexOf(DECIMAL_SEPARATOR) === 0) {
+  // handles delimiter updates due to system settings or initial boot
+  const { decimal: decimalSeparator } = AmbitoDolar.getDelimiters();
+  const numberAccept = new RegExp(`[\\d${decimalSeparator}]+`, 'g');
+  const parsed = (value.match(numberAccept) || []).join('');
+  let [head, tail] = parsed.split(decimalSeparator);
+  // add 0 on head when value starts with decimalSeparator
+  if (parsed.indexOf(decimalSeparator) === 0) {
     head = 0;
   }
   // avoid rounding errors at toLocaleString as when user enters 1.239 and maxDigits=2 we
@@ -97,16 +94,16 @@ const formatFloatingPointNumber = (value, maxDigits = FRACTION_DIGITS) => {
     return '';
   }
   const formatted = formatNumber(number, maxDigits, false);
-  if (parsed.includes(DECIMAL_SEPARATOR)) {
-    const [formattedHead] = formatted.split(DECIMAL_SEPARATOR);
+  if (parsed.includes(decimalSeparator)) {
+    const [formattedHead] = formatted.split(decimalSeparator);
     // skip zero at digits position for non fixed floats
     // as at digits 2 for non fixed floats numbers like 1.50 has no sense, just 1.5 allowed
     // but 1.0 has sense as otherwise you will not be able to enter 1.05 for example
     const formattedTail =
       scaledTail !== '' && scaledTail[maxDigits - 1] === '0'
         ? scaledTail.slice(0, -1)
         : scaledTail;
-    return `${formattedHead}${DECIMAL_SEPARATOR}${formattedTail}`;
+    return `${formattedHead}${decimalSeparator}${formattedTail}`;
   }
   return formatted;
 };