@transferwise/comparison-components 22.1.3 → 22.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "22.1.3",
+  "version": "22.1.4",
   "description": "Display a comparison table of providers given a route and amount.",
   "homepage": "https://wise.com/gb/compare/",
   "main": "dist/umd/comparison-components.js",

package/src/common/parseAmount/index.js

@@ -0,0 +1 @@
+export { parseAmount as default } from './parseAmount';

package/src/common/parseAmount/parseAmount.spec.ts

@@ -0,0 +1,36 @@
+import { parseAmount } from './parseAmount';
+
+describe('Number formatting', () => {
+  it('parses localized numbers', () => {
+    [
+      ['1234.56', 'en-GB'],
+      ['1,23,4.56', 'en-US'],
+    ].forEach(([number, locale]) => {
+      expect(parseAmount(number, 'gbp', locale)).toBe(1234.56);
+    });
+  });
+
+  it('parses numbers with invalid locale', () => {
+    expect(parseAmount('123.45', 'gbp', '12345de_DE')).toBe(123.45);
+  });
+
+  it('parses negative numbers into positive ones', () => {
+    expect(parseAmount('-123.45', 'gbp', 'en-GB')).toBe(123.45);
+  });
+
+  it.each([
+    ['0---9(s.t.r!@#$%^&*()_+^[]{};’,<>?', 9],
+    ['$12.341', 12.34],
+    ['$12.347', 12.35],
+    ['.asd121', 0.12],
+    ['.asd129', 0.13],
+    [',asd129', 129],
+    ['123.123.123', 123.12],
+    ['asda', NaN],
+  ])(
+    "parses strings by removing the non-numerical characters; case: '%s', expected: '%s'",
+    (testValue, expectedValue) => {
+      expect(parseAmount(testValue, 'gbp', 'en-GB')).toBe(expectedValue);
+    },
+  );
+});

package/src/common/parseAmount/parseAmount.ts

@@ -0,0 +1,81 @@
+// TODO: This is a dup of https://github.com/transferwise/neptune-web/blob/main/packages/components/src/moneyInput/currencyFormatting.js
+// It's not exported out of neptune-web correctly and cannot get it working with Jest.
+
+const currencyDecimals: Record<string, number> = {
+  BIF: 0,
+  BYR: 0,
+  CLP: 0,
+  DJF: 0,
+  GNF: 0,
+  JPY: 0,
+  KMF: 0,
+  KRW: 0,
+  MGA: 0,
+  PYG: 0,
+  RWF: 0,
+  VND: 0,
+  VUV: 0,
+  XAF: 0,
+  XOF: 0,
+  XPF: 0,
+  // technically HUF does have decimals, but due to the exchange rate banks
+  // do not accept decimal amounts
+  HUF: 0,
+
+  BHD: 3,
+  JOD: 3,
+  KWD: 3,
+  OMR: 3,
+  TND: 3,
+};
+
+const DEFAULT_LOCALE = 'en-GB';
+const DEFAULT_CURRENCY_DECIMALS = 2;
+
+function isNumberLocaleSupported() {
+  const number = 1234;
+  const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);
+  return numberString === '1,234';
+}
+
+function getValidLocale(locale: string) {
+  if (!locale) {
+    return DEFAULT_LOCALE;
+  }
+  try {
+    const noUnderscoreLocale = locale.replace(/_/, '-');
+
+    Intl.NumberFormat(noUnderscoreLocale);
+    return noUnderscoreLocale;
+  } catch {
+    return DEFAULT_LOCALE;
+  }
+}
+
+const getCurrencyDecimals = (currency = ''): number => {
+  const upperCaseCurrency = currency.toUpperCase();
+  if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
+    return currencyDecimals[upperCaseCurrency];
+  }
+  return DEFAULT_CURRENCY_DECIMALS;
+};
+
+const getDecimalSeparator = (locale: string) => {
+  return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
+};
+
+export function parseAmount(number: string, currency: string, locale: string): number {
+  const validLocale = getValidLocale(locale);
+
+  const precision = getCurrencyDecimals(currency);
+  const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
+  const decimalSeparator = getDecimalSeparator(validLocale);
+  const numberWithStandardDecimalSeparator = (number ? `${number}` : '')
+    .replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
+    .replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.')
+    .replace(/[^0-9.]/g, '');
+  const parsedAmount = parseFloat(
+    parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),
+  );
+  return Math.abs(parsedAmount);
+}

package/src/provider-comparison-widget/__test__/AmountInput.spec.jsx

@@ -4,15 +4,14 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 
+import * as parseAmount from '../../common/parseAmount';
 import translations from '../assets/translations/translations.json';
 import AmountInput from '../components/AmountInput';
 
 jest.mock('@transferwise/formatting', () => ({
   formatAmount: jest.fn(),
 }));
-jest.mock('@transferwise/components', () => ({
-  parseAmount: jest.fn(),
-}));
+
 const mountRenderComponent = (renderProps) =>
   mount(
     <IntlProvider locale="en" messages={translations.en}>
@@ -24,7 +23,7 @@ const mountRenderComponent = (renderProps) =>
     },
   );
 
-const currencyParsing = require('@transferwise/components');
+const parseAmountSpy = jest.spyOn(parseAmount, 'default');
 const currencyFormatting = require('@transferwise/formatting');
 
 describe('AmountInput', () => {
@@ -75,7 +74,7 @@ describe('AmountInput', () => {
       children: <AmountInput {...{ ...props, locale: 'en-US' }} />,
     });
     component.update();
-    jest.spyOn(currencyParsing, 'parseAmount').mockImplementation(parseFloat);
+    parseAmountSpy.mockImplementation(parseFloat);
     enterAmount('123.45');
     component.update();
     expect(amountInput().prop('value')).toBe('123.45');
@@ -94,7 +93,7 @@ describe('AmountInput', () => {
     });
 
     component.update();
-    jest.spyOn(currencyParsing, 'parseAmount').mockImplementation((amount, currency, locale) => {
+    parseAmountSpy.mockImplementation((amount, currency, locale) => {
       expect(amount).toBe('500.1234');
       expect(locale).toBe('es-ES');
       expect(currency).toBe('eur');
@@ -117,7 +116,7 @@ describe('AmountInput', () => {
       children: <AmountInput {...{ ...props, onAmountChange }} />,
     });
     component.update();
-    jest.spyOn(currencyParsing, 'parseAmount').mockImplementation(() => NaN);
+    parseAmountSpy.mockImplementation(() => NaN);
     enterAmount('cannot parse this yo');
     expect(onAmountChange).not.toHaveBeenCalled();
   });

package/src/provider-comparison-widget/components/AmountInput.jsx

@@ -1,9 +1,9 @@
-import { parseAmount } from '@transferwise/components';
 import { formatAmount } from '@transferwise/formatting';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import parseAmount from '../../common/parseAmount';
 import createClassNamesFromStyles from '../../resources/createClassNamesFromStyles';
 import style from '../ProviderComparisonWidget.module.less';
 

package/src/travel-money/components/AmountInput.jsx

@@ -1,9 +1,9 @@
-import { parseAmount } from '@transferwise/components';
 import { formatAmount } from '@transferwise/formatting';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import parseAmount from '../../common/parseAmount';
 import createClassNamesFromStyles from '../../resources/createClassNamesFromStyles';
 import style from '../TravelMoney.module.less';