@transferwise/components 46.5.0 → 46.7.0

package/src/phoneNumberInput/PhoneNumberInput.spec.js

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

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
+
+import countries from './data/countries';
+import {
+  explodeNumberModel,
+  isValidPhoneNumber,
+  cleanNumber,
+  setDefaultPrefix,
+  sortArrayByProperty,
+  groupCountriesByPrefix,
+  excludeCountries,
+  findCountryByPrefix,
+} from './utils';
+import { PhoneNumber } from './utils/explodeNumberModel';
+
+const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
+
+export interface PhoneNumberInputProps {
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  initialValue?: string;
+  onChange: (value: string | null, prefix: string) => void;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  countryCode?: string;
+  searchPlaceholder?: string;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  placeholder?: string;
+  selectProps?: Partial<SelectInputProps<string | null>>;
+  /** List of iso3 codes of countries to remove from the list */
+  disabledCountries?: string[];
+}
+
+const defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];
+const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];
+
+const PhoneNumberInput = ({
+  id,
+  required,
+  disabled,
+  initialValue,
+  onChange,
+  onFocus,
+  onBlur,
+  countryCode,
+  searchPlaceholder = 'Prefix',
+  size = Size.MEDIUM,
+  placeholder,
+  selectProps = defaultSelectProps,
+  disabledCountries = defaultDisabledCountries,
+}: PhoneNumberInputProps) => {
+  const { locale } = useIntl();
+
+  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
+    const cleanValue = initialValue ? cleanNumber(initialValue) : null;
+
+    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
+      return {
+        prefix: setDefaultPrefix(locale, countryCode),
+        suffix: '',
+      };
+    }
+
+    return explodeNumberModel(cleanValue);
+  });
+  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
+
+  const countriesByPrefix = useMemo(
+    () =>
+      groupCountriesByPrefix(
+        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),
+      ),
+    [disabledCountries],
+  );
+
+  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const suffix = event.target.value;
+    if (ALLOWED_PHONE_CHARS.test(suffix)) {
+      setInternalValue((prev) => ({ ...prev, suffix }));
+    }
+  };
+
+  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    if (!event.nativeEvent.clipboardData) {
+      return;
+    }
+
+    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(
+      /(\s|-)+/g,
+      '',
+    );
+    const pastedNumber = explodeNumberModel(pastedValue);
+
+    if (
+      pastedNumber.prefix != null &&
+      countriesByPrefix.has(pastedNumber.prefix) &&
+      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)
+    ) {
+      setInternalValue(pastedNumber);
+    }
+  };
+
+  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 ?? '', // TODO: Allow `null` in public API
+    );
+    setBroadcastedValue(internalValue);
+  }, [onChange, broadcastedValue, internalValue]);
+
+  return (
+    <div className="tw-telephone">
+      <div className="tw-telephone__country-select">
+        <SelectInput
+          placeholder="Select an option…"
+          items={[...countriesByPrefix].map(([prefix, countries]) => ({
+            type: 'option',
+            value: prefix,
+            filterMatchers: [
+              prefix,
+              ...countries.map((country) => country.name),
+              ...countries.map((country) => country.iso3),
+            ],
+          }))}
+          value={internalValue.prefix}
+          renderValue={(prefix, withinTrigger) => (
+            <SelectInputOptionContent
+              title={prefix}
+              note={
+                withinTrigger
+                  ? undefined
+                  : countriesByPrefix
+                      .get(prefix)
+                      ?.map((country) => country.iso3)
+                      .join(', ')
+              }
+            />
+          )}
+          filterable
+          filterPlaceholder={searchPlaceholder}
+          disabled={disabled}
+          size={size}
+          onChange={(prefix) => {
+            const country = prefix != null ? findCountryByPrefix(prefix) : null;
+            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
+          }}
+          {...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>
+  );
+};
+
+export default PhoneNumberInput;

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

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

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts

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

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

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

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

@@ -1,5 +1,7 @@
+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, iso3Codes) => {
+const filterCountriesByIso3 = (countries: Country[], iso3Codes: string[]) => {
   const iso3CodesSet = new Set(iso3Codes);
   return countries.filter((country) => !iso3CodesSet.has(country.iso3));
 };
@@ -7,11 +9,10 @@ const filterCountriesByIso3 = (countries, iso3Codes) => {
 /**
  * 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
+ * @param countries list of country metadata objects
+ * @param disabledCountries list of iso3 country codes to remove from the list
  */
-export const excludeCountries = (countries, disabledCountries) => {
+export const excludeCountries = (countries: Country[], disabledCountries: string[]) => {
   return disabledCountries.length > 0
     ? filterCountriesByIso3(countries, disabledCountries)
     : countries;

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

@@ -12,7 +12,7 @@ describe('explodeNumberModel', () => {
 
     it('should return an exploded number for three digit prefix', () => {
       expect(explodeNumberModel('+3727573135343')).toStrictEqual({
-        format: '',
+        format: undefined,
         prefix: '+372',
         suffix: '7573135343',
       });

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

@@ -0,0 +1,24 @@
+import { findCountryByPrefix } from '../findCountryByPrefix';
+
+export interface PhoneNumber {
+  prefix: string | null;
+  suffix: string;
+  format?: string;
+}
+
+/**
+ * @param number Phone number in a format like "+447573135343"
+ */
+export const explodeNumberModel = (number: string): PhoneNumber => {
+  const country = findCountryByPrefix(number);
+  return country
+    ? {
+        prefix: country.phone,
+        suffix: number.slice(country.phone.length),
+        format: country.phoneFormat,
+      }
+    : {
+        prefix: null,
+        suffix: number.slice(1),
+      };
+};

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

@@ -14,7 +14,6 @@ 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.ts

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

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

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

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

@@ -0,0 +1,102 @@
+import { Country } from '../../data/countries';
+
+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 = new Map<string, Country[]>([
+  [
+    '+1',
+    [
+      {
+        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',
+      },
+    ],
+  ],
+  [
+    '+44',
+    [
+      {
+        name: 'United Kingdom',
+        iso2: 'GB',
+        iso3: 'GBR',
+        phone: '+44',
+      },
+      {
+        name: 'Guernsey',
+        iso2: 'GG',
+        iso3: 'GGY',
+        phone: '+44',
+      },
+    ],
+  ],
+  [
+    '+224',
+    [
+      {
+        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/groupCountriesByPrefix.ts

@@ -0,0 +1,12 @@
+import { Country } from '../../data/countries';
+
+export const groupCountriesByPrefix = (countries: Country[]) => {
+  const countriesByPrefix = new Map<string, Country[]>();
+  countries.forEach((country) => {
+    countriesByPrefix.set(country.phone, [
+      ...(countriesByPrefix.get(country.phone) ?? []),
+      country,
+    ]);
+  });
+  return countriesByPrefix;
+};

package/src/phoneNumberInput/utils/{index.js → index.ts}

@@ -4,8 +4,6 @@ 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/isStringNumeric/{isStringNumeric.spec.js → isStringNumeric.spec.ts}

@@ -4,7 +4,6 @@ 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', () => {

package/src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.ts

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

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

@@ -11,7 +11,7 @@ describe('isValidPhoneNumber', () => {
 
   it('should return false for invalid numbers', () => {
     expect(isValidPhoneNumber('+441')).toBe(false);
-    expect(isValidPhoneNumber(44)).toBe(false);
+    expect(isValidPhoneNumber('44')).toBe(false);
     expect(isValidPhoneNumber('44123')).toBe(false);
   });
 });

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param phoneNumber
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ */
+export const isValidPhoneNumber = (phoneNumber: string) =>
+  /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;

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

@@ -0,0 +1,4 @@
+import { Country } from '../../data/countries';
+
+export const longestMatchingPrefix = (matchingCodes: Country[]) =>
+  matchingCodes.reduce((a, b) => (a.phone.length > b.phone.length ? a : b));

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

@@ -0,0 +1,20 @@
+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 locale BCP 47 language tag of locale, e.g. `"es-ES"`.
+ * @param countryCode Two-letter country code (ISO 3166-1 alpha-2).
+ */
+export const setDefaultPrefix = (locale: string, countryCode?: string) => {
+  const country =
+    (countryCode != null ? findCountryByCode(countryCode) : null) ??
+    findCountryByCode(getCountryFromLocale(locale) ?? locale);
+  return country?.phone ?? DEFAULT_PHONE_CODE;
+};

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts

@@ -0,0 +1,6 @@
+export function sortArrayByProperty<T extends Record<PropertyKey, string>>(
+  arrayToSort: T[],
+  property: keyof T,
+) {
+  return [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
+}

package/src/select/Select.css

@@ -152,10 +152,6 @@
   border-radius: var(--radius-small);
   color: #37517e;
   color: var(--color-content-primary);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;