@financial-times/n-conversion-forms 26.0.0 → 27.0.0

package/dist/registration-confirmation.js

@@ -12,43 +12,101 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var EMAIL_DEFAULT_TEXT = 'your email';
+var SOCIALS = [{
+  name: 'instagram',
+  link: 'https://www.instagram.com/financialtimes'
+}, {
+  name: 'linkedin',
+  link: 'https://www.linkedin.com/company/financial-times'
+}, {
+  name: 'twitter',
+  link: 'https://twitter.com/FT'
+}, {
+  name: 'facebook',
+  link: 'https://www.facebook.com/financialtimes'
+}];
+var STORES = [{
+  name: 'apple',
+  link: 'https://apps.apple.com/app/apple-store/id1200842933'
+}, {
+  name: 'android',
+  link: 'https://play.google.com/store/apps/details?id=com.ft.news'
+}];
 
 function RegistrationConfirmation(_ref) {
   var _ref$email = _ref.email,
-      email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email;
+      email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
+      _ref$returnUrl = _ref.returnUrl,
+      returnUrl = _ref$returnUrl === void 0 ? '/' : _ref$returnUrl;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf ncf__wrapper"
+    className: "ncf"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__center"
+    className: "ncf__center ncf__margin"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__icon ncf__icon--tick ncf__icon--large"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__paragraph"
-  }, /*#__PURE__*/_react["default"].createElement("h1", {
+  }), /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ncf__header ncf__header--confirmation"
-  }, "Welcome to FT.com"))), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
-  }, "We\u2019ve sent confirmation of your new account to ", email, "."), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__headed-paragraph"
-  }, /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "ncf__header"
-  }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
-  }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link ncf__link--external",
-    href: "https://www.ft.com/myaccount/personal-details",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    "data-trackable": "yourAccount"
-  }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    href: "tel:+442077556248",
-    className: "ncf__link ncf__link--external"
-  }, "+44 (0) 207 755 6248"), ". Or contact us for additional support.")), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__center"
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    href: "/products ",
-    className: "ncf__button ncf__button--submit"
-  }, "See our subscription packages")));
+  }, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation--message"
+  }, "We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__divider-horizontal"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--links ncf__margin"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--socials"
+  }, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation--mobile"
+  }, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation--desktop"
+  }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--badges"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "o-social-follow",
+    "aria-label": "Follow on social media"
+  }, SOCIALS.map(function (_ref2) {
+    var name = _ref2.name,
+        link = _ref2.link;
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: name,
+      href: link,
+      className: "o-social-follow-icon o-social-follow-icon--".concat(name),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-trackable": "register-social-".concat(name)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-social-follow-icon__label"
+    }, "on ", name));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--mobile ncf__confirmation--app-badges",
+    "aria-label": "Download the app"
+  }, STORES.map(function (_ref3) {
+    var name = _ref3.name,
+        link = _ref3.link;
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: name,
+      href: link,
+      className: "ncf-icon ncf-icon--".concat(name),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-trackable": "register-app-".concat(name)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-social-follow-icon__label"
+    }, "on ", name));
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--alerts"
+  }, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
+    "aria-label": "myFT",
+    className: "ncf-icon ncf-icon--myft"
+  })), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
+    href: "/myft",
+    className: "margin-top-x4 ncf__button ncf__button--secondary",
+    "data-trackable": "register-personalise-my-alerts"
+  }, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
+    href: returnUrl,
+    target: "_parent",
+    className: "ncf__confirmation--finish ncf__button ncf__button--submit",
+    "data-trackable": "register-finish"
+  }, "Finish"));
 }
 
 RegistrationConfirmation.propTypes = {

package/dist/responsibility.js

@@ -15,7 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _nCommonStaticData = require("n-common-static-data");
 
-var defaultOptions = _nCommonStaticData.demographics.responsibilities.responsibilities;
+var B2CResponsibilities = _nCommonStaticData.demographics.responsibilities.responsibilities;
+var B2BResponsibilities = _nCommonStaticData.b2b.demographics.responsibilities.responsibilities;
 
 function Responsibility(_ref) {
   var value = _ref.value,
@@ -31,8 +32,10 @@ function Responsibility(_ref) {
       selectId = _ref$selectId === void 0 ? 'responsibility' : _ref$selectId,
       _ref$selectName = _ref.selectName,
       selectName = _ref$selectName === void 0 ? 'responsibility' : _ref$selectName,
+      _ref$isB2B = _ref.isB2B,
+      isB2B = _ref$isB2B === void 0 ? false : _ref$isB2B,
       _ref$options = _ref.options,
-      options = _ref$options === void 0 ? defaultOptions : _ref$options,
+      options = _ref$options === void 0 ? isB2B ? B2BResponsibilities : B2CResponsibilities : _ref$options,
       _ref$fieldLabel = _ref.fieldLabel,
       fieldLabel = _ref$fieldLabel === void 0 ? 'Which best describes your job responsibility?' : _ref$fieldLabel;
   var inputWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
@@ -81,6 +84,7 @@ Responsibility.propTypes = {
   fieldId: _propTypes["default"].string,
   selectId: _propTypes["default"].string,
   selectName: _propTypes["default"].string,
+  isB2B: _propTypes["default"].bool,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     code: _propTypes["default"].string,
     description: _propTypes["default"].string

package/dist/text-input.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = TextInput;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function TextInput(_ref) {
+  var dataTrackable = _ref.dataTrackable,
+      _ref$errorText = _ref.errorText,
+      errorText = _ref$errorText === void 0 ? 'Please enter a value' : _ref$errorText,
+      fieldId = _ref.fieldId,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      inputId = _ref.inputId,
+      inputName = _ref.inputName,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$placeHolder = _ref.placeHolder,
+      placeHolder = _ref$placeHolder === void 0 ? '' : _ref$placeHolder,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      description = _ref.description;
+  // Use inputId if inputName is not explicitly passed.
+  inputName = inputName || inputId;
+  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }, {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: inputId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, label), description ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, description) : null), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: inputId,
+    name: inputName,
+    placeholder: placeHolder,
+    "data-trackable": dataTrackable,
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, errorText)));
+}
+
+TextInput.propTypes = {
+  dataTrackable: _propTypes["default"].string,
+  errorText: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  inputId: _propTypes["default"].string,
+  inputName: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  description: _propTypes["default"].string
+};

package/helpers/constants.js

@@ -0,0 +1,7 @@
+const printRegions = {
+	cemeaV1: 'CEMEA_V1',
+	cemeaV2: 'CEMEA_V2',
+	apac: 'APAC'
+};
+
+module.exports = { printRegions };

package/helpers/deliveryAddressMap.js

@@ -0,0 +1,167 @@
+const React = require('react');
+
+const addressTemplateGenerator = (addressLine1, addressLine2, addressLine3) => (<>
+	{' '}
+	{addressLine1}
+	{addressLine2}
+	{addressLine3}{' '}
+</>);
+
+const deliveryAddressMap = {
+	'home': {
+		addressLine1Placeholder: {
+			GBR: 'e.g. 10 Elm Street',
+			USA: 'e.g. 10 Elm St.',
+			CAN: 'e.g. 36 Poirier Blvd.',
+			CEMEA_V1: 'Street and House Number',
+			CEMEA_V2: 'House Number and Street',
+			APAC: 'Street name',
+			ARE: 'PO Box 12345'
+		},
+		addressLine2Placeholder: {
+			CEMEA_V1: 'Apt No./Floor/Building',
+			CEMEA_V2: 'Apt No./Floor/Building',
+			APAC: 'House/Apartment/Building name',
+		},
+		addressLine3Placeholder: {
+			USA: 'e.g Apt 2C / FL 10 / STE 50',
+			CAN: 'e.g Apt 2C / FL 10 / STE 50',
+			CEMEA_V1: ' ',
+			CEMEA_V2: ' ',
+			APAC: 'District/County/Province/Ward',
+		},
+		addressLine1Title:{
+			'ARE': 'PO Box',
+		},
+		addressLine3Title:  {
+			GBR: 'Address line 3',
+			USA: 'APT/FL/STE',
+			CAN: 'APT/FL/STE',
+			CEMEA_V1: 'Address line 3',
+			CEMEA_V2: 'Address line 3',
+		},
+		addressLine3Prompt: {
+			USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+			CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+		},
+		template: (addressLine1, addressLine2, addressLine3, region) => {
+			const addressLines = {
+				GBR: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				USA: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+				CAN: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+
+				CEMEA_V1: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				CEMEA_V2: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				APAC: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				ARE:(
+					<>
+						{' '}
+						{addressLine1}{' '}
+					</>
+				)
+			};
+			return addressLines[region];
+		}
+	},
+	'company': {
+		addressLine1Placeholder: {
+			GBR: 'e.g. 10 Elm Street',
+			USA: 'e.g. 10 Elm St.',
+			CAN: 'e.g. 36 Poirier Blvd.',
+			CEMEA_V1: 'Street and House Number',
+			CEMEA_V2: 'House Number and Street',
+			APAC: 'Street name',
+			ARE: 'PO Box 12345'
+		},
+		addressLine2Placeholder: {
+			CEMEA_V1: 'Apt No./Floor/Building/Department',
+			CEMEA_V2: 'Apt No./Floor/Building/Department',
+			APAC: 'House/Apartment/Building name',
+		},
+		addressLine3Placeholder: {
+			USA: 'e.g Apt 2C / FL 10 / STE 50',
+			CAN: 'e.g Apt 2C / FL 10 / STE 50',
+			CEMEA_V1: 'Department name/job title',
+			CEMEA_V2: 'Department name/job title',
+			APAC: 'District/County/Province/Ward',
+		},
+		addressLine3Title:  {
+			GBR: 'Address line 3',
+			USA: 'APT/FL/STE',
+			CAN: 'APT/FL/STE',
+			CEMEA_V1: 'Address line 3',
+			CEMEA_V3: 'Address line 3',
+		},
+		addressLine3Prompt: {
+			USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+			CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+		},
+		addressLine1Title:{
+			'ARE': 'PO Box',
+		},
+		template: (addressLine1, addressLine2, addressLine3, region) => {
+			const addressLines = {
+				GBR: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				USA: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+				CAN: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+
+				CEMEA_V1: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				CEMEA_V2: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				APAC: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				ARE:(
+					<>
+						{' '}
+						{addressLine1}{' '}
+					</>
+				)
+			};
+			return addressLines[region];
+		}
+	},
+	'pobox': {
+		addressLine1Placeholder: {
+			GBR: 'e.g. 10 Elm Street',
+			USA: 'e.g. 10 Elm St.',
+			CAN: 'e.g. 36 Poirier Blvd.',
+			CEMEA_V1: 'P.O. Box',
+			CEMEA_V2: 'P.O. Box',
+		},
+		addressLine2Placeholder: {
+		},
+		addressLine3Placeholder: {
+		},
+		addressLine1Title:{},
+		addressLine3Title:  {
+			GBR: 'Address line 3',
+			USA: 'APT/FL/STE',
+			CAN: 'APT/FL/STE',
+		},
+		addressLine3Prompt: {
+			USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+			CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+		},
+		template: (addressLine1, addressLine2, addressLine3, region) => {
+			const addressLines = {
+				GBR: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+				USA: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+				CAN: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+
+				CEMEA_V1: (
+					<>
+						{' '}
+						{addressLine1}{' '}
+					</>
+				),
+				CEMEA_V2:(
+					<>
+						{' '}
+						{addressLine1}{' '}
+					</>
+				)
+			};
+			return addressLines[region];
+		}
+	},
+};
+
+module.exports = deliveryAddressMap;

package/helpers/index.js

@@ -1,4 +1,11 @@
 module.exports = {
 	'ncf-countries': require('./ncf-countries'),
 	'ncf-common-data': require('./ncf-common-data'),
+	'cemeaV1ISO': require('./supportedCountries').cemeaV1ISO,
+	'cemeaV2ISO': require('./supportedCountries').cemeaV2ISO,
+	'apacISO': require('./supportedCountries').apacISO,
+	'countriesSupported': require('./supportedCountries').countriesSupported,
+	'countriesSupportedISO': require('./supportedCountries').countriesSupportedISO,
+	'supportedPostcodeValidators': require('./supportedPostcodeValidators').supportedPostcodeValidators,
+	'allSupportedPostcodeExamples': require('./supportedPostcodeExamples').allSupportedPostcodeExamples,
 };

package/helpers/index.spec.js

@@ -0,0 +1,11 @@
+const helpers = require('.');
+
+describe('helpers', () => {
+	it('exports a "ncf-common-data" helper', () => {
+		expect(helpers).toHaveProperty('ncf-common-data');
+	});
+
+	it('exports a "ncf-countries" helper', () => {
+		expect(helpers).toHaveProperty('ncf-countries');
+	});
+});

package/helpers/ncf-common-data.spec.js

@@ -0,0 +1,34 @@
+const mockCommonModule = {
+	example: 'example',
+	another: 'sample',
+	nested: {
+		property: 'no-problem',
+	},
+};
+jest.mock('n-common-static-data', () => mockCommonModule);
+const helper = require('./ncf-common-data');
+
+describe('ncf-common-data', () => {
+	let stub;
+
+	beforeEach(() => {
+		stub = jest.fn();
+	});
+
+	it('imports and exports the properties as defined', () => {
+		const hash = { import: 'example', export: 'whatever' };
+		helper({ hash, fn: stub });
+		const context = stub.mock.calls[0][0];
+		expect(context).toHaveProperty(hash.export, mockCommonModule[hash.import]);
+	});
+
+	it('can import nested properties', () => {
+		const hash = { import: 'nested.property', export: 'whatever' };
+		helper({ hash, fn: stub });
+		const context = stub.mock.calls[0][0];
+		expect(context).toHaveProperty(
+			hash.export,
+			mockCommonModule.nested.property
+		);
+	});
+});

package/helpers/ncf-countries.spec.js

@@ -0,0 +1,136 @@
+let mockCountries = generateCountryArray(100, { includeAllFrequent: true });
+jest.mock('n-common-static-data', () => {
+	return {
+		billingCountries: { countries: mockCountries },
+	};
+});
+jest.mock('n-common-static-data');
+const helper = require('./ncf-countries');
+
+describe('ncf-countries', () => {
+	let stub;
+
+	beforeEach(() => {
+		stub = jest.fn();
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('filter', () => {
+		it('does not filter if not present', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[1].countries).toEqual(mockCountries);
+		});
+
+		it('does not filter if not an array', () => {
+			helper({ hash: { filterList: 'C-1' }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[1].countries).toEqual(mockCountries);
+		});
+
+		it('filters and return only countries in array', () => {
+			helper({ hash: { filterList: ['C-1'] }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries).toEqual([{ code: 'C-1' }]);
+		});
+	});
+
+	describe('select', () => {
+		it('does not mark any countries selected if no value passed', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(
+				context.countries.find((country) => country.selected)
+			).not.toBeDefined();
+		});
+
+		it('does not mark any countries selected if incorrect value passed', () => {
+			helper({ hash: { value: 'Test' }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(
+				context.countries.find((country) => country.selected)
+			).not.toBeDefined();
+		});
+
+		it('marks a country as selected if value matches code', () => {
+			const value = 'C-2';
+			helper({ hash: { value }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(
+				context.countries[1].countries.find((country) => country.code === value)
+			).toBeDefined();
+		});
+	});
+
+	describe('group', () => {
+		it('does not group if frequently used countries under limit', () => {
+			helper({ hash: { filterList: ['CAN', 'FRA', 'JPN', 'USA'] }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[0]).not.toHaveProperty('label');
+		});
+
+		it('groups countries over limits', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[0]).toHaveProperty('label');
+		});
+
+		it('sorts the group of frequently used countries', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+			const correctOrder = ['GBR', 'USA', 'JPN', 'FRA', 'CAN'];
+			const frequentlyUsed = context.countries[0].countries;
+
+			frequentlyUsed.forEach((item, index) => {
+				expect(correctOrder[index]).toEqual(item.code);
+			});
+		});
+
+		it('selects only one country if it exists in two places', () => {
+			const value = 'GBR';
+			helper({ hash: { value }, fn: stub });
+			const context = stub.mock.calls[0][0];
+			const frequentlyUsed = context.countries[0].countries;
+			const alphabetical = context.countries[1].countries;
+
+			expect(frequentlyUsed.find((item) => item.code === value)).toEqual(
+				expect.objectContaining({
+					selected: true,
+				})
+			);
+			expect(alphabetical.find((item) => item.code === value)).toEqual(
+				expect.objectContaining({
+					selected: false,
+				})
+			);
+		});
+	});
+});
+
+function generateCountryArray (length, { includeAllFrequent = true } = {}) {
+	return Array.from(Array(length), (item, index) => ({
+		code: `C-${index}`,
+	})).concat(
+		// prettier-ignore
+		includeAllFrequent
+			? [
+				{ code: 'JPN' },
+				{ code: 'FRA' },
+				{ code: 'USA' },
+				{ code: 'CAN' },
+				{ code: 'GBR' },
+			]
+			: []
+	);
+}