@transferwise/components 45.12.0 → 45.13.0

package/src/phoneNumberInput/data/countries.spec.js

@@ -0,0 +1,12 @@
+import countries from './countries';
+
+describe('Given a list of countries', () => {
+  countries.forEach((country) => {
+    it('each country should have a valid format', () => {
+      expect(country).toHaveProperty('phone');
+      expect(country).toHaveProperty('name');
+      expect(country).toHaveProperty('iso3');
+      expect(country).toHaveProperty('iso2');
+    });
+  });
+});

package/src/phoneNumberInput/index.js

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

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.js

@@ -0,0 +1,4 @@
+const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
+
+export const cleanNumber = (number) =>
+  (number.match(DIGITS_MATCH) && number.match(DIGITS_MATCH).join('')) || '';

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.spec.js

@@ -0,0 +1,17 @@
+import { cleanNumber } from '.';
+
+const TESTS = [
+  { input: '', output: '' },
+  { input: '+23456', output: '+23456' },
+  { input: '+23456--', output: '+23456' },
+  { input: '+23456--  77777+8980', output: '+23456777778980' },
+  { input: '+23456--+777+77+8980', output: '+23456777778980' },
+  { input: '+23456--  777 77+89 -- =80', output: '+23456777778980' },
+];
+describe('cleanNumber', () => {
+  TESTS.forEach((test) => {
+    it('strips the incorrect chars', () => {
+      expect(cleanNumber(test.input)).toBe(test.output);
+    });
+  });
+});

package/src/phoneNumberInput/utils/cleanNumber/index.js

@@ -0,0 +1 @@
+export { cleanNumber } from './cleanNumber';

package/src/phoneNumberInput/utils/excludeCountries/excludeCountries.js

@@ -0,0 +1,18 @@
+// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+const filterCountriesByIso3 = (countries, iso3Codes) => {
+  const iso3CodesSet = new Set(iso3Codes);
+  return countries.filter((country) => !iso3CodesSet.has(country.iso3));
+};
+
+/**
+ * Removes the countries sepecified in the second param
+ *
+ * @param {Array} countries: list of country metadata objects
+ * @param {Array} disabledCountries: list of iso3 country codes to remove from the list
+ * @returns
+ */
+export const excludeCountries = (countries, disabledCountries) => {
+  return disabledCountries.length > 0
+    ? filterCountriesByIso3(countries, disabledCountries)
+    : countries;
+};

package/src/phoneNumberInput/utils/excludeCountries/excludeCountries.spec.js

@@ -0,0 +1,23 @@
+import countries from '../../data/countries';
+
+import { excludeCountries } from './excludeCountries';
+
+describe('Exclude countries', () => {
+  it('should return all the countries of list is empty', () => {
+    const remove = [];
+    const filteredCountries = excludeCountries(countries, remove);
+    expect(filteredCountries).toHaveLength(countries.length);
+  });
+
+  it('should remove the specified countries from the list', () => {
+    const remove = ['USA', 'EGY'];
+    const filteredCountries = excludeCountries(countries, remove);
+    expect(filteredCountries).toHaveLength(countries.length - 2);
+  });
+
+  it('should remove countries with multiple entries', () => {
+    const remove = ['DOM'];
+    const filteredCountries = excludeCountries(countries, remove);
+    expect(filteredCountries).toHaveLength(countries.length - 3);
+  });
+});

package/src/phoneNumberInput/utils/excludeCountries/index.js

@@ -0,0 +1 @@
+export { excludeCountries } from './excludeCountries';

package/src/phoneNumberInput/utils/explodeNumberModel/explodeNumberModel.spec.js

@@ -0,0 +1,21 @@
+import { explodeNumberModel } from '.';
+
+describe('explodeNumberModel', () => {
+  describe('when a valid number is provided', () => {
+    it('should return an exploded number for two digit prefix', () => {
+      expect(explodeNumberModel('+447573135343')).toStrictEqual({
+        format: '**** *** ***',
+        prefix: '+44',
+        suffix: '7573135343',
+      });
+    });
+
+    it('should return an exploded number for three digit prefix', () => {
+      expect(explodeNumberModel('+3727573135343')).toStrictEqual({
+        format: '',
+        prefix: '+372',
+        suffix: '7573135343',
+      });
+    });
+  });
+});

package/src/phoneNumberInput/utils/explodeNumberModel/index.js

@@ -0,0 +1,27 @@
+import { findCountryByPrefix } from '../findCountryByPrefix';
+
+/**
+ * Given a sting in a valid format ex:'+447573135343' it returns an object of shape
+ * {prefix=+44 ,suffix=7573135343}
+ *
+ * @param {string} number - a string that defines a phone number.
+ * @returns {{prefix: (string|*), suffix: string, format: string}}
+ */
+export const explodeNumberModel = (number) => {
+  let prefix = '';
+  let suffix = '';
+  let format = '';
+  const country = findCountryByPrefix(number);
+
+  if (country) {
+    prefix = country.phone;
+    suffix = number.slice(country.phone.length);
+    format = country.phoneFormat || '';
+  } else {
+    prefix = '';
+    suffix = number.slice(1);
+    format = '';
+  }
+
+  return { prefix, suffix, format };
+};

package/src/phoneNumberInput/utils/filterOptionsForQuery/filterOptionsForQuery.spec.js

@@ -0,0 +1,36 @@
+import { filterOptionsForQuery } from '..';
+
+const OPTIONS = [
+  {
+    name: 'test1',
+    iso2: 'TT',
+    iso3: 'TT1',
+    phone: '+93',
+  },
+  {
+    name: 'something',
+    iso2: 'ST',
+    iso3: 'SMT',
+    phone: '+33',
+  },
+];
+
+describe('filterOptionsForQuery', () => {
+  it('filters options based on all properties', () => {
+    const option1 = OPTIONS[0];
+    const option2 = OPTIONS[1];
+
+    expect(filterOptionsForQuery(OPTIONS, option1.name)).toStrictEqual([option1]);
+    expect(filterOptionsForQuery(OPTIONS, option1.iso2)).toStrictEqual([option1]);
+    expect(filterOptionsForQuery(OPTIONS, option1.iso3)).toStrictEqual([option1]);
+    expect(filterOptionsForQuery(OPTIONS, option1.phone)).toStrictEqual([option1]);
+    expect(filterOptionsForQuery(OPTIONS, option2.name)).toStrictEqual([option2]);
+    expect(filterOptionsForQuery(OPTIONS, option2.iso2)).toStrictEqual([option2]);
+    expect(filterOptionsForQuery(OPTIONS, option2.iso3)).toStrictEqual([option2]);
+    expect(filterOptionsForQuery(OPTIONS, option2.phone)).toStrictEqual([option2]);
+  });
+
+  it('should return an emtpy array if option cannot be found', () => {
+    expect(filterOptionsForQuery(OPTIONS, 'AA')).toStrictEqual([]);
+  });
+});

package/src/phoneNumberInput/utils/filterOptionsForQuery/index.js

@@ -0,0 +1,11 @@
+import { isOptionAndFitsQuery } from '../isOptionAndFitsQuery';
+
+/**
+ * Filters a set of options based on search string
+ *
+ * @param options
+ * @param query
+ * @returns {*}
+ */
+export const filterOptionsForQuery = (options, query) =>
+  options.filter((option) => isOptionAndFitsQuery(option, query));

package/src/phoneNumberInput/utils/findCountryByCode/findCountryByCode.spec.js

@@ -0,0 +1,21 @@
+import { findCountryByCode } from '.';
+
+describe('findCountryByCode', () => {
+  it('should return a country with the longest matching prefix', () => {
+    const testCountry = {
+      iso2: 'AQ',
+      iso3: 'ATA',
+      name: 'Australian Antarctic Territory',
+      phone: '+672',
+    };
+    expect(findCountryByCode('AQ')).toStrictEqual(testCountry);
+    expect(findCountryByCode('aq')).toStrictEqual(testCountry);
+  });
+
+  it('should return null for invalid code', () => {
+    expect(findCountryByCode('Wrong')).toBeNull();
+    expect(findCountryByCode(null)).toBeNull();
+    expect(findCountryByCode('')).toBeNull();
+    expect(findCountryByCode('  ')).toBeNull();
+  });
+});

package/src/phoneNumberInput/utils/findCountryByCode/index.js

@@ -0,0 +1,10 @@
+import countries from '../../data/countries';
+import { longestMatchingPrefix } from '../longestMatchingPrefix';
+
+export const findCountryByCode = (code) => {
+  let matchingCodes;
+  if (code && code.length === 2) {
+    matchingCodes = countries.filter((country) => code.toUpperCase() === country.iso2);
+  }
+  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
+};

package/src/phoneNumberInput/utils/findCountryByPrefix/findCountryByPrefix.spec.js

@@ -0,0 +1,16 @@
+import { findCountryByPrefix } from '.';
+
+describe('findCountryByPrefix', () => {
+  it('should return a country with the longest matching prefix', () => {
+    expect(findCountryByPrefix('+1')).toStrictEqual({
+      iso2: 'US',
+      iso3: 'USA',
+      name: 'United States of America',
+      phone: '+1',
+    });
+  });
+
+  it('should return null for invalid code', () => {
+    expect(findCountryByPrefix('Wrong')).toBeNull();
+  });
+});

package/src/phoneNumberInput/utils/findCountryByPrefix/index.js

@@ -0,0 +1,11 @@
+import countries from '../../data/countries';
+import { longestMatchingPrefix } from '../longestMatchingPrefix';
+
+export const findCountryByPrefix = (number) => {
+  let matchingCodes = null;
+  if (number && number.length > 1) {
+    matchingCodes = countries.filter((country) => number.indexOf(country.phone) === 0);
+  }
+
+  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
+};

package/src/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.js

@@ -0,0 +1,26 @@
+import { isArray } from '@transferwise/neptune-validation';
+
+export const groupCountriesByPrefix = (countries) => {
+  const groupedArray = countries.reduce((accumulator, country) => {
+    const { name, iso2, iso3, phone } = country;
+    if (accumulator[phone]) {
+      const previousValue = accumulator[phone];
+      accumulator[phone] = {
+        ...previousValue,
+        name: isArray(previousValue.name)
+          ? [...previousValue.name, name]
+          : [previousValue.name, name],
+        iso2: isArray(previousValue.iso2)
+          ? [...previousValue.iso2, iso2]
+          : [previousValue.iso2, iso2],
+        iso3: isArray(previousValue.iso3)
+          ? [...previousValue.iso3, iso3]
+          : [previousValue.iso3, iso3],
+      };
+    } else {
+      accumulator[phone] = country;
+    }
+    return accumulator;
+  }, {});
+  return Object.values(groupedArray);
+};

package/src/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.spec.js

@@ -0,0 +1,67 @@
+import { groupCountriesByPrefix } from '.';
+
+const countries = [
+  {
+    name: 'Canada',
+    iso2: 'CA',
+    iso3: 'CAN',
+    phone: '+1',
+  },
+  {
+    name: 'United States of America',
+    iso2: 'US',
+    iso3: 'USA',
+    phone: '+1',
+  },
+  {
+    name: 'United States Minor Outlying Islands',
+    iso2: 'UM',
+    iso3: 'UMI',
+    phone: '+1',
+  },
+  {
+    name: 'United Kingdom',
+    iso2: 'GB',
+    iso3: 'GBR',
+    phone: '+44',
+  },
+  {
+    name: 'Guernsey',
+    iso2: 'GG',
+    iso3: 'GGY',
+    phone: '+44',
+  },
+  {
+    name: 'Guinea',
+    iso2: 'GN',
+    iso3: 'GIN',
+    phone: '+224',
+  },
+];
+
+const groupedCountries = [
+  {
+    name: ['Canada', 'United States of America', 'United States Minor Outlying Islands'],
+    iso2: ['CA', 'US', 'UM'],
+    iso3: ['CAN', 'USA', 'UMI'],
+    phone: '+1',
+  },
+  {
+    name: ['United Kingdom', 'Guernsey'],
+    iso2: ['GB', 'GG'],
+    iso3: ['GBR', 'GGY'],
+    phone: '+44',
+  },
+  {
+    name: 'Guinea',
+    iso2: 'GN',
+    iso3: 'GIN',
+    phone: '+224',
+  },
+];
+
+describe('groupCountriesByPrefix', () => {
+  it('groups countries by prefix', () => {
+    expect(groupCountriesByPrefix(countries)).toStrictEqual(groupedCountries);
+  });
+});

package/src/phoneNumberInput/utils/groupCountriesByPrefix/index.js

@@ -0,0 +1 @@
+export { groupCountriesByPrefix } from './groupCountriesByPrefix';

package/src/phoneNumberInput/utils/index.js

@@ -0,0 +1,13 @@
+export { setDefaultPrefix } from './setDefaultPrefix';
+export { isValidPhoneNumber } from './isValidPhoneNumber';
+export { explodeNumberModel } from './explodeNumberModel';
+export { longestMatchingPrefix } from './longestMatchingPrefix';
+export { findCountryByPrefix } from './findCountryByPrefix';
+export { findCountryByCode } from './findCountryByCode';
+export { filterOptionsForQuery } from './filterOptionsForQuery';
+export { isOptionAndFitsQuery } from './isOptionAndFitsQuery';
+export { cleanNumber } from './cleanNumber';
+export { isStringNumeric } from './isStringNumeric';
+export { sortArrayByProperty } from './sortArrayByProperty';
+export { groupCountriesByPrefix } from './groupCountriesByPrefix';
+export { excludeCountries } from './excludeCountries';

package/src/phoneNumberInput/utils/isOptionAndFitsQuery/index.js

@@ -0,0 +1 @@
+export { isOptionAndFitsQuery, startsWith } from './isOptionAndFitsQuery';

package/src/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.js

@@ -0,0 +1,25 @@
+import { isArray } from '@transferwise/neptune-validation';
+/**
+ * Checks if query is contained into object properties.
+ *
+ * @param {object} option - the select option
+ * @param {string} query - the current search query
+ * @returns {boolean}
+ */
+export const isOptionAndFitsQuery = (option, query) =>
+  startsWith(option.iso3, query) ||
+  startsWith(option.iso2, query) ||
+  startsWith(option.name, query) ||
+  startsWith(option.phone, query);
+
+export const startsWith = (property, query) => {
+  if (isArray(property)) {
+    return (
+      property.filter((proper) => normalizeValue(proper).indexOf(normalizeValue(query)) === 0)
+        .length > 0
+    );
+  }
+  return normalizeValue(property).indexOf(normalizeValue(query)) === 0;
+};
+
+const normalizeValue = (value) => value.toLowerCase().replace('+', '');

package/src/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.spec.js

@@ -0,0 +1,66 @@
+import { startsWith, isOptionAndFitsQuery } from '.';
+
+const DATA_TEST = [
+  {
+    name: 'test1',
+    iso2: 'TT',
+    iso3: 'TT1',
+    phone: '+93',
+  },
+  {
+    name: 'test1',
+    iso2: ['TT', 'AA'],
+    iso3: 'TT1',
+    phone: '+93',
+  },
+  {
+    name: 'something',
+    iso2: 'ST',
+    iso3: 'SMT',
+    phone: '+33',
+  },
+];
+
+describe('isOptionAndFitsQuery', () => {
+  describe('when option is given', () => {
+    it('should return true if query is relevant', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[0], 'TT')).toBe(true);
+    });
+
+    it('should return true if query is relevant and one of the array values', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[1], 'TT')).toBe(true);
+    });
+
+    it('should return false if query is not relevant and not one of the array values', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[1], 'BB')).toBe(false);
+    });
+
+    it('should return false if query is not relevant', () => {
+      expect(isOptionAndFitsQuery(DATA_TEST[0], 'AA')).toBe(false);
+    });
+  });
+});
+
+describe('startWith', () => {
+  describe('when property is given', () => {
+    it('returns true if any of the values starts with the query', () => {
+      expect(startsWith('AA', 'AA')).toBe(true);
+    });
+
+    it(`returns false if value doesn't start with`, () => {
+      expect(startsWith('AABB', 'BB')).toBe(false);
+    });
+
+    it('should return true if query is contained in grouped options', () => {
+      expect(startsWith(['AA', 'BB'], 'BB')).toBe(true);
+    });
+
+    it("returns false if any value in an array doesn't start with", () => {
+      expect(startsWith(['CCAA', 'CCBB'], 'BB')).toBe(false);
+    });
+
+    it('returns false for an empty value', () => {
+      expect(startsWith('', 'BB')).toBe(false);
+    });
+  });
+});

package/src/phoneNumberInput/utils/isStringNumeric/index.js

@@ -0,0 +1 @@
+export { isStringNumeric } from './isStringNumeric';

package/src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.js

@@ -0,0 +1 @@
+export const isStringNumeric = (value) => /^\+?[\d-\s]+$/.test(value);

package/src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.spec.js

@@ -0,0 +1,15 @@
+import { isStringNumeric } from '.';
+
+describe('isStringNumeric', () => {
+  it('should return true when numeric sting is provided', () => {
+    expect(isStringNumeric('+23456')).toBe(true);
+    expect(isStringNumeric('23456')).toBe(true);
+    expect(isStringNumeric(23456)).toBe(true);
+  });
+
+  it('should return false when string is provided', () => {
+    expect(isStringNumeric('USA')).toBe(false);
+    expect(isStringNumeric('+')).toBe(false);
+    expect(isStringNumeric('')).toBe(false);
+  });
+});

package/src/phoneNumberInput/utils/isValidPhoneNumber/index.js

@@ -0,0 +1 @@
+export { isValidPhoneNumber } from './isValidPhoneNumber';

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js

@@ -0,0 +1,10 @@
+/**
+ *
+ * @param phoneNumber
+ * @returns {boolean} - returns true for number that starts with '+' and contains a mix of digits and spaces with
+ * at least 4 digits.
+ */
+export const isValidPhoneNumber = (phoneNumber) =>
+  /^\+[\d-\s]+$/.test(phoneNumber) &&
+  phoneNumber.match(/\d+/g) &&
+  phoneNumber.match(/\d+/g).join('').length >= 4;

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.spec.js

@@ -0,0 +1,17 @@
+import { isValidPhoneNumber } from '..';
+
+describe('isValidPhoneNumber', () => {
+  it('should return true for valid string numbers', () => {
+    expect(isValidPhoneNumber('+393892712')).toBe(true);
+  });
+
+  it('should return true for formatted string numbers', () => {
+    expect(isValidPhoneNumber('+39 3892 - 712')).toBe(true);
+  });
+
+  it('should return false for invalid numbers', () => {
+    expect(isValidPhoneNumber('+441')).toBe(false);
+    expect(isValidPhoneNumber(44)).toBe(false);
+    expect(isValidPhoneNumber('44123')).toBe(false);
+  });
+});

package/src/phoneNumberInput/utils/longestMatchingPrefix/index.js

@@ -0,0 +1,2 @@
+export const longestMatchingPrefix = (matchingCodes) =>
+  matchingCodes.reduce((a, b) => (a.phone.length > b.phone.length ? a : b));

package/src/phoneNumberInput/utils/longestMatchingPrefix/longestMatchingPrefix.spec.js

@@ -0,0 +1,21 @@
+import { longestMatchingPrefix } from '.';
+
+describe('longestMatchingPrefix', () => {
+  const matchingcodes = [
+    {
+      name: 'Some country',
+      iso2: 'AB',
+      iso3: 'ABC',
+      phone: '+34',
+    },
+    {
+      name: 'Some country with same ISO code',
+      iso2: 'AB',
+      iso3: 'ABC',
+      phone: '+123',
+    },
+  ];
+  it('should return a country with the longest matching prefix', () => {
+    expect(longestMatchingPrefix(matchingcodes)).toStrictEqual(matchingcodes[1]);
+  });
+});

package/src/phoneNumberInput/utils/setDefaultPrefix/index.js

@@ -0,0 +1,25 @@
+import { getCountryFromLocale } from '../../../common/locale';
+import { findCountryByCode } from '../findCountryByCode';
+
+/**
+ * Default phone code, the UK one `+44`
+ */
+const DEFAULT_PHONE_CODE = '+44';
+
+/**
+ * Given a valid locale it returns the correspondent prefix if found or +44 otherwise.
+ *
+ * @param {string} locale - a string that represent the locale ex:'es-ES'
+ * @param countryCode
+ * @returns {string}
+ */
+export const setDefaultPrefix = (locale, countryCode) => {
+  const country =
+    findCountryByCode(countryCode) ||
+    // when `locale` code has explicit region: `en-GB`, `en-US`, `ar-AE`
+    findCountryByCode(getCountryFromLocale(locale)) ||
+    // when `locale` code is only two chars value: `fr`, `es`
+    findCountryByCode(locale);
+
+  return country?.phone || DEFAULT_PHONE_CODE;
+};

package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.js

@@ -0,0 +1,34 @@
+import { setDefaultPrefix } from '..';
+
+describe('setDefaultPrefix', () => {
+  it.each([
+    ['en-GB', '+44'],
+    ['en-US', '+1'],
+    ['en', '+44'],
+    ['fr', '+33'],
+    ['ua', '+380'],
+    ['ar-ae', '+971'],
+    ['ar', '+54'],
+    ['ar', '+54'],
+    ['it-IT', '+39'],
+    ['it', '+39'],
+  ])('should return right prefix when locale is passed ("%s" -> "%s")', (locale, expectedValue) => {
+    expect(setDefaultPrefix(locale)).toBe(expectedValue);
+  });
+
+  it('should return right prefix when valid locale is passed', () => {
+    expect(setDefaultPrefix('it-IT')).toBe('+39');
+  });
+
+  it('should return default prefix when invalid locale is passed', () => {
+    expect(setDefaultPrefix('en-Wrong')).toBe('+44');
+  });
+
+  it('should override prefix from locale if correct country ISO2 code provided', () => {
+    expect(setDefaultPrefix('it-IT', 'US')).toBe('+1');
+  });
+
+  it('should return prefix based on locale if country code is invalid', () => {
+    expect(setDefaultPrefix('it-IT', 'WRONG')).toBe('+39');
+  });
+});

package/src/phoneNumberInput/utils/sortArrayByProperty/index.js

@@ -0,0 +1 @@
+export { sortArrayByProperty } from './sortArrayByProperty';

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.js

@@ -0,0 +1,3 @@
+// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+export const sortArrayByProperty = (arrayToSort, property) =>
+  [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));