@transferwise/components 0.0.0-experimental-85b9dd1 → 0.0.0-experimental-0db2ae7

package/src/phoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,210 @@
+import { isArray } from '@transferwise/neptune-validation';
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Size } from '../common';
+import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
+
+import countries from './data/countries';
+import {
+  explodeNumberModel,
+  isValidPhoneNumber,
+  cleanNumber,
+  setDefaultPrefix,
+  sortArrayByProperty,
+  groupCountriesByPrefix,
+  excludeCountries,
+} from './utils';
+
+const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
+
+const PhoneNumberInput = (props) => {
+  const {
+    id,
+    onChange,
+    searchPlaceholder,
+    disabled,
+    required,
+    size,
+    placeholder,
+    onFocus,
+    onBlur,
+    countryCode,
+    selectProps,
+    disabledCountries,
+  } = props;
+  const { locale } = useIntl();
+
+  const getInitialValue = () => {
+    const { initialValue } = props;
+
+    const cleanValue = initialValue ? cleanNumber(initialValue) : null;
+
+    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
+      return {
+        prefix: setDefaultPrefix(locale, countryCode),
+        suffix: '',
+      };
+    }
+
+    return explodeNumberModel(cleanValue);
+  };
+
+  const [internalValue, setInternalValue] = useState(getInitialValue());
+  const [broadcastedValue, setBroadcastedValue] = useState(null);
+
+  const getSelectOptions = () => {
+    const countriesList = excludeCountries(countries, disabledCountries);
+    const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
+
+    return listSortedByISO3.map((option) => {
+      const { phone, iso3, iso2, name } = option;
+      let note = '';
+
+      if (iso3) {
+        note = isArray(iso3) ? iso3.join(', ') : iso3;
+      } else if (iso2) {
+        note = isArray(iso2) ? iso2.join(', ') : iso2;
+      }
+
+      return {
+        type: 'option',
+        value: {
+          value: phone,
+          label: phone,
+          note: note,
+        },
+        filterMatchers: [phone, note, name],
+      };
+    });
+  };
+
+  const options = getSelectOptions();
+
+  const onPrefixChange = ({ value }) => {
+    setInternalValue({ prefix: value, suffix: internalValue.suffix });
+  };
+
+  const onSuffixChange = (event) => {
+    const { value = '' } = event.target;
+
+    if (ALLOWED_PHONE_CHARS.test(value)) {
+      setInternalValue({ prefix: internalValue.prefix, suffix: value });
+    }
+  };
+
+  const onPaste = (event) => {
+    if (!event.nativeEvent.clipboardData) {
+      return;
+    }
+
+    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(
+      /(\s|-)+/g,
+      '',
+    );
+    const { prefix: pastedPrefix, suffix: pastedSuffix } = explodeNumberModel(pastedValue);
+    const selectedPrefix = options.find(({ value }) => value.value === pastedPrefix);
+
+    if (selectedPrefix && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
+      setInternalValue({ prefix: pastedPrefix, suffix: pastedSuffix });
+    }
+  };
+
+  useEffect(() => {
+    if (broadcastedValue === null) {
+      return setBroadcastedValue(internalValue);
+    }
+
+    const internalPhoneNumber = internalValue.prefix + internalValue.suffix;
+    const broadcastedPhoneNumber = broadcastedValue.prefix + broadcastedValue.suffix;
+
+    if (internalPhoneNumber === broadcastedPhoneNumber) {
+      return;
+    }
+
+    const newValue = isValidPhoneNumber(internalPhoneNumber)
+      ? cleanNumber(internalPhoneNumber)
+      : null;
+
+    onChange(newValue, internalValue.prefix);
+    setBroadcastedValue(internalValue);
+  }, [onChange, broadcastedValue, internalValue]);
+
+  return (
+    <div className="tw-telephone">
+      <div className="tw-telephone__country-select">
+        <SelectInput
+          placeholder="Select an option..."
+          items={options}
+          value={options.find((item) => item.value.value === internalValue.prefix)?.value}
+          renderValue={(option, withinTrigger) => (
+            <SelectInputOptionContent
+              title={option.label}
+              note={withinTrigger ? undefined : option.note}
+            />
+          )}
+          filterable
+          filterPlaceholder={searchPlaceholder}
+          disabled={disabled}
+          size={size}
+          onChange={onPrefixChange}
+          {...selectProps}
+        />
+      </div>
+      <div className="tw-telephone__number-input">
+        <div className={`input-group input-group-${size}`}>
+          <input
+            id={id}
+            autoComplete="tel-national"
+            name="phoneNumber"
+            inputMode="numeric"
+            value={internalValue.suffix}
+            className="form-control"
+            disabled={disabled}
+            required={required}
+            placeholder={placeholder}
+            onChange={onSuffixChange}
+            onPaste={onPaste}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PhoneNumberInput.propTypes = {
+  id: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  countryCode: PropTypes.string,
+  searchPlaceholder: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  placeholder: PropTypes.string,
+  selectProps: PropTypes.object,
+  /** List of iso3 codes of countries to remove from the list */
+  disabledCountries: PropTypes.arrayOf(PropTypes.string),
+};
+
+PhoneNumberInput.defaultProps = {
+  id: null,
+  required: false,
+  disabled: false,
+  initialValue: null,
+  onFocus() {},
+  onBlur() {},
+  countryCode: null,
+  searchPlaceholder: 'Prefix',
+  size: Size.MEDIUM,
+  placeholder: '',
+  selectProps: {},
+  disabledCountries: [],
+};
+
+export default PhoneNumberInput;

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -37,7 +37,11 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set prefix control to default UK value', () => {
-      expect(select.props().value).toBe('+44');
+      expect(select.props().value).toStrictEqual({
+        value: '+44',
+        note: 'GBR, GGY, IMN, JEY',
+        label: '+44',
+      });
     });
 
     it('should set number control to empty', () => {
@@ -45,11 +49,11 @@ describe('Given a telephone number component', () => {
     });
 
     it('should not disable the select', () => {
-      expect(select.prop('disabled')).toBeFalsy();
+      expect(select.prop('disabled')).toBe(false);
     });
 
     it('should not disable the input', () => {
-      expect(input.prop('disabled')).toBeFalsy();
+      expect(input.prop('disabled')).toBe(false);
     });
   });
 
@@ -61,7 +65,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set control values correctly', () => {
-      expect(select.props().value).toBe('+39');
+      expect(select.props().value.value).toStrictEqual('+39');
       expect(input.prop('value')).toBe('123456789');
     });
   });
@@ -88,8 +92,8 @@ describe('Given a telephone number component', () => {
       input = component.find(NUMBER_SELECTOR);
     });
 
-    it('should render input with unspecified id', () => {
-      expect(input.prop('id')).toBeUndefined();
+    it('should render input with null id', () => {
+      expect(input.prop('id')).toBeNull();
     });
   });
 
@@ -114,7 +118,7 @@ describe('Given a telephone number component', () => {
       it(`${number} code should update the value properly`, () => {
         simulatePaste(component.find('input'), number);
 
-        expect(select().props().value).toBe(countryCode);
+        expect(select().props().value.value).toStrictEqual(countryCode);
         expect(input().prop('value')).toBe(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/(\s|-)+/g, ''), countryCode);
       });
@@ -122,28 +126,28 @@ describe('Given a telephone number component', () => {
 
     it('should not paste invalid characters', () => {
       simulatePaste(component.find('input'), '+36asdasdasd');
-      expect(select().props().value).toBe('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', () => {
       simulatePaste(component.find('input'), '+9992342343423');
-      expect(select().props().value).toBe('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", () => {
       simulatePaste(component.find('input'), '0+36303932551');
-      expect(select().props().value).toBe('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't contain a country code", () => {
       simulatePaste(component.find('input'), '06303932551');
-      expect(select().props().value).toBe('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
@@ -157,7 +161,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set the select to the longest matching prefix', () => {
-      expect(select.props().value).toBe('+1868');
+      expect(select.props().value.value).toStrictEqual('+1868');
     });
 
     it('should set the number input to the rest of the number', () => {
@@ -173,7 +177,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should empty the select', () => {
-      expect(select.props().value).toBeNull();
+      expect(select.props().value).toBeUndefined();
     });
 
     it('should put the whole value in the input without the plus', () => {
@@ -187,7 +191,7 @@ describe('Given a telephone number component', () => {
       select = component.find(PREFIX_SELECT_SELECTOR);
       input = component.find(NUMBER_SELECTOR);
 
-      expect(select.props().value).toBe('+44');
+      expect(select.props().value.value).toStrictEqual('+44');
       expect(input.prop('value')).toBe('');
     });
   });
@@ -250,7 +254,7 @@ describe('Given a telephone number component', () => {
       });
 
       it('should use the prefix of the supplied value', () => {
-        expect(select.props().value).toBe('+1');
+        expect(select.props().value.value).toBe('+1');
       });
     });
 
@@ -264,7 +268,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should default the prefix to the local country', () => {
-          expect(select.props().value).toBe('+34');
+          expect(select.props().value.value).toBe('+34');
         });
       });
 
@@ -277,7 +281,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should override locale prefix with country specific prefix', () => {
-          expect(select.props().value).toBe('+1');
+          expect(select.props().value.value).toBe('+1');
         });
       });
     });
@@ -345,7 +349,7 @@ describe('Given a telephone number component', () => {
 
     it('renders Select component with expected props', () => {
       const select = component.find(PREFIX_SELECT_SELECTOR);
-      expect(select.prop('className')).toBe('custom-class');
+      expect(select.prop('className')).toStrictEqual('custom-class');
     });
   });
 });

package/src/phoneNumberInput/data/{countries.ts → countries.js}

@@ -1,12 +1,4 @@
-export type Country = {
-  name: string;
-  iso2: string;
-  iso3: string;
-  phone: string;
-  phoneFormat?: string;
-};
-
-const countries: Country[] = [
+const countries = [
   {
     name: 'Afghanistan',
     iso2: 'AF',

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/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/excludeCountries/{excludeCountries.ts → excludeCountries.js}

@@ -1,7 +1,5 @@
-import type { Country } from '../../data/countries';
-
 // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
-const filterCountriesByIso3 = (countries: Country[], iso3Codes: string[]) => {
+const filterCountriesByIso3 = (countries, iso3Codes) => {
   const iso3CodesSet = new Set(iso3Codes);
   return countries.filter((country) => !iso3CodesSet.has(country.iso3));
 };
@@ -9,10 +7,11 @@ const filterCountriesByIso3 = (countries: Country[], iso3Codes: string[]) => {
 /**
  * Removes the countries sepecified in the second param
  *
- * @param countries list of country metadata objects
- * @param disabledCountries list of iso3 country codes to remove from the list
+ * @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: Country[], disabledCountries: string[]) => {
+export const excludeCountries = (countries, disabledCountries) => {
   return disabledCountries.length > 0
     ? filterCountriesByIso3(countries, disabledCountries)
     : countries;

package/src/phoneNumberInput/utils/excludeCountries/{excludeCountries.spec.ts → excludeCountries.spec.js}

@@ -4,7 +4,7 @@ import { excludeCountries } from './excludeCountries';
 
 describe('Exclude countries', () => {
   it('should return all the countries of list is empty', () => {
-    const remove: string[] = [];
+    const remove = [];
     const filteredCountries = excludeCountries(countries, remove);
     expect(filteredCountries).toHaveLength(countries.length);
   });

package/src/phoneNumberInput/utils/explodeNumberModel/{explodeNumberModel.spec.ts → explodeNumberModel.spec.js}

@@ -12,7 +12,7 @@ describe('explodeNumberModel', () => {
 
     it('should return an exploded number for three digit prefix', () => {
       expect(explodeNumberModel('+3727573135343')).toStrictEqual({
-        format: undefined,
+        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.ts → findCountryByCode.spec.js}

@@ -14,6 +14,7 @@ describe('findCountryByCode', () => {
 
   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/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/{index.ts → index.js}

@@ -4,6 +4,8 @@ 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';

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

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