@financial-times/n-conversion-forms 20.3.3 → 20.3.4

package/components/job-title.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function JobTitle({
+export function JobTitle ({
 	value = '',
 	isDisabled = false,
 	hasError = false,

package/components/last-name.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function LastName({
+export function LastName ({
 	dataTrackable = 'field-lastname',
 	errorText = 'Please enter your last name',
 	fieldId = 'lastNameField',

package/components/licence-confirmation.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function LicenceConfirmation({
+export function LicenceConfirmation ({
 	isTrial = false,
 	isEmbedded = false,
 	duration = null,

package/components/licence-header.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { LicenceSignIn } from './licence-sign-in';
 import { LicenceTitle } from './licence-title';
 
-export function LicenceHeader(props) {
+export function LicenceHeader (props) {
 	const {
 		displayName = '',
 		isTrial = false,
@@ -11,7 +11,7 @@ export function LicenceHeader(props) {
 		welcomeText = '',
 		url = '',
 	} = props;
-	function createMarkup(text) {
+	function createMarkup (text) {
 		return { __html: text };
 	}
 

package/components/licence-sign-in.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function LicenceSignIn({ displayName = '', url = '' }) {
+export function LicenceSignIn ({ displayName = '', url = '' }) {
 	return (
 		<div className="ncf__center">
 			{renderSignInTitle(displayName)}
@@ -19,7 +19,7 @@ export function LicenceSignIn({ displayName = '', url = '' }) {
 	);
 }
 
-function renderSignInTitle(displayName) {
+function renderSignInTitle (displayName) {
 	let signInTitle;
 
 	if (displayName !== '') {

package/components/licence-title.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function LicenceTitle({
+export function LicenceTitle ({
 	displayName = '',
 	isTrial = false,
 	isB2cPartnershipLicence = false,
@@ -21,7 +21,7 @@ export function LicenceTitle({
 	}
 }
 
-function renderB2BTitle(displayName) {
+function renderB2BTitle (displayName) {
 	if (!displayName) {
 		return (
 			<h1 className="ncf__header ncf__center">Join your FT.com subscription</h1>

package/components/lite-sub-confirmation.jsx

@@ -17,7 +17,7 @@ const DetailsMobileView = ({ details }) => (
 	</dl>
 );
 
-export function LiteSubConfirmation({
+export function LiteSubConfirmation ({
 	productCode = '',
 	offerName = '',
 	subscriptionAmount = '',

package/components/loader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Loader({ children, showLoader, title, inElement }) {
+export function Loader ({ children, showLoader, title, inElement }) {
 	const label = title ? (
 		<div className="ncf__loader__content__title" id="loader-aria-label">
 			{title}

package/components/message.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Message({
+export function Message ({
 	title,
 	message,
 	additional = [],

package/components/organisation.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Organisation({
+export function Organisation ({
 	dataTrackable = 'organization',
 	errorText = 'Please enter your organisation',
 	fieldId = 'organisationField',

package/components/package-change.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function PackageChange({
+export function PackageChange ({
 	changePackageUrl,
 	currentPackage,
 	packageDescription,

package/components/password.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Password({
+export function Password ({
 	unknownUser = false,
 	hasError = false,
 	pattern = null,

package/components/payment-term.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export function PaymentTerm({
+export function PaymentTerm ({
 	fieldId = 'paymentTermField',
 	inputName = 'paymentTerm',
 	isPrintOrBundle = false,

package/components/payment-type.jsx

@@ -13,7 +13,7 @@ const PaypalCustomerCareMessage = () => {
 				<div className="o-message__container">
 					<div className="o-message__content">
 						<p className="o-message__content-main">
-							If you{"'"}d like to change your payment method to Paypal please{' '}
+							If you{'\''}d like to change your payment method to Paypal please{' '}
 							<a
 								className="o-message__actions__secondary"
 								href="https://help.ft.com"
@@ -29,7 +29,7 @@ const PaypalCustomerCareMessage = () => {
 	);
 };
 
-export function PaymentType({
+export function PaymentType ({
 	enableApplepay = false,
 	enableCreditcard = false,
 	enableDirectdebit = false,

package/components/personal-title.jsx

@@ -9,7 +9,7 @@ export const defaultPersonalTitles = [
 	{ code: 'Ms', description: 'Ms' },
 ];
 
-export function PersonalTitle({
+export function PersonalTitle ({
 	value,
 	isDisabled = false,
 	hasError = false,

package/components/phone.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import propTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Phone({
+export function Phone ({
 	hasError = false,
 	isB2b = false,
 	isDisabled = false,

package/components/position.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { demographics } from 'n-common-static-data';
 const defaultOptions = demographics.positions.positions;
 
-export function Position({
+export function Position ({
 	value,
 	isDisabled = false,
 	hasError = false,

package/components/progress-indicator.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function ProgressIndicator({ items = [], disableLinks = false }) {
-	function getElementsForComplete(item) {
+export function ProgressIndicator ({ items = [], disableLinks = false }) {
+	function getElementsForComplete (item) {
 		return disableLinks ? (
 			<span className="o-stepped-progress__step o-stepped-progress__step--complete">
 				<span className="o-stepped-progress__label">
@@ -26,7 +26,7 @@ export function ProgressIndicator({ items = [], disableLinks = false }) {
 		);
 	}
 
-	function getElementsForNonComplete(item) {
+	function getElementsForNonComplete (item) {
 		const nonCompleteDivClassName = classNames([
 			'o-stepped-progress__step',
 			{ 'o-stepped-progress__step--current': item.isCurrent },

package/components/province.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { canadianProvinces } from 'n-common-static-data';
 const defaultProvinces = canadianProvinces.provinces;
 
-export function Province({
+export function Province ({
 	value,
 	fieldId = 'provinceField',
 	selectId = 'province',

package/components/registration-confirmation.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const EMAIL_DEFAULT_TEXT = 'your email';
 
-export function RegistrationConfirmation({ email = EMAIL_DEFAULT_TEXT }) {
+export function RegistrationConfirmation ({ email = EMAIL_DEFAULT_TEXT }) {
 	return (
 		<div className="ncf ncf__wrapper">
 			<div className="ncf__center">

package/components/responsibility.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { demographics } from 'n-common-static-data';
 const defaultOptions = demographics.responsibilities.responsibilities;
 
-export function Responsibility({
+export function Responsibility ({
 	value,
 	isDisabled = false,
 	isRequired = true,

package/components/section.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function Section({ children }) {
+export function Section ({ children }) {
 	return (
 		<div className="o-forms-section o-forms-section--wide">
 			<div className="o-forms-section__message">{children}</div>

package/components/state.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { americanStates } from 'n-common-static-data';
 const defaultStates = americanStates.states;
 
-export function State({
+export function State ({
 	value,
 	fieldId = 'stateField',
 	selectId = 'state',

package/components/submit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Submit({
+export function Submit ({
 	id = 'submitButton',
 	isCentered = false,
 	isDisabled = false,

package/components/trial-banner.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function TrialBanner({ trialDuration = '' }) {
+export function TrialBanner ({ trialDuration = '' }) {
 	const durationMessage = trialDuration ? (
 		<>
 			<span className="ncf__strong">{trialDuration}</span>{' '}

package/dist/accept-terms.js

@@ -22,7 +22,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var DEFAULT_AGE_RESTRICTION = '16';
 
 function AcceptTerms(_ref) {
-  var _ref$hasError = _ref.hasError,
+  var _ref$isAuthFirstAccou = _ref.isAuthFirstAccount,
+      isAuthFirstAccount = _ref$isAuthFirstAccou === void 0 ? false : _ref$isAuthFirstAccou,
+      _ref$isAuthFirstPayme = _ref.isAuthFirstPayment,
+      isAuthFirstPayment = _ref$isAuthFirstPayme === void 0 ? false : _ref$isAuthFirstPayme,
+      _ref$hasError = _ref.hasError,
       hasError = _ref$hasError === void 0 ? false : _ref$hasError,
       _ref$isSignup = _ref.isSignup,
       isSignup = _ref$isSignup === void 0 ? false : _ref$isSignup,
@@ -79,6 +83,37 @@ function AcceptTerms(_ref) {
     defaultChecked: true
   });
 
+  var authFirstStepTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "o-typography-list ncf__accept-terms-list"
+  }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-auth-first-step"
+  }, "For more information about how we use your data, please refer to our ", /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "privacy"), " and\xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "cookie"), " policies."))), /*#__PURE__*/_react["default"].createElement("label", {
+    className: labelClassName,
+    htmlFor: "termsAcceptance"
+  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label terms-auth-first-step"
+  }, "I confirm that I am ", ageRestriction, " years or older and agree to the full ", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), "."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "o-forms-input__error"
+  }, "Please accept our terms & conditions")));
+
   var registerTerms = /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
@@ -125,7 +160,7 @@ function AcceptTerms(_ref) {
     rel: "noopener noreferrer"
   }, "customer care through chat, phone or email"), ".")), transitionType === 'immediate' ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--immediate"
-  }, "By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+  }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--other"
   }, "By placing my order, I acknowledge that my subscription will start", isSingleTerm ? ' and the chosen payment method will be charged ' : ' ', "on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition"
@@ -156,7 +191,7 @@ function AcceptTerms(_ref) {
     rel: "noopener noreferrer"
   }, "customer care through chat, phone or email"), ".")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-signup"
-  }, "By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+  }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-signup"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
@@ -181,9 +216,9 @@ function AcceptTerms(_ref) {
     className: "o-forms-input__error"
   }, "Please accept our terms & conditions"));
 
-  return /*#__PURE__*/_react["default"].createElement("div", divProps, isB2cPartnership ? b2cPartnershipTerms : isRegister ? registerTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, isB2cPartnership ? b2cPartnershipTerms : isRegister ? registerTerms : isAuthFirstAccount ? authFirstStepTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
     className: "o-typography-list ncf__accept-terms-list"
-  }, b2bTerms, corpSignupTerms, transitionTerms, signupTerms), /*#__PURE__*/_react["default"].createElement("label", {
+  }, !isAuthFirstPayment && b2bTerms, corpSignupTerms, transitionTerms, signupTerms), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {

package/dist/b2c-partnership-confirmation.js

@@ -32,7 +32,7 @@ function B2CPartnershipConfirmation(_ref) {
     className: "ncf__paragraph"
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ncf__header ncf__header--confirmation"
-  }, "Welcome to your three months' Premium access"))), /*#__PURE__*/_react["default"].createElement("p", {
+  }, 'Welcome to your three months\' Premium access'))), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"
   }, "Please check your email to confirm your account and set your password."), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"

package/dist/payment-type.js

@@ -33,7 +33,7 @@ var PaypalCustomerCareMessage = function PaypalCustomerCareMessage() {
     className: "o-message__content"
   }, /*#__PURE__*/_react["default"].createElement("p", {
     className: "o-message__content-main"
-  }, "If you", "'", "d like to change your payment method to Paypal please", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "If you", '\'', "d like to change your payment method to Paypal please", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "o-message__actions__secondary",
     href: "https://help.ft.com"
   }, "contact Customer Care"), ".")))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "20.3.3",
+  "version": "20.3.4",
   "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
   "main": "dist/index.js",
   "scripts": {
@@ -11,7 +11,8 @@
     "build-storybook": "build-storybook --docs --output-dir docs",
     "lint": "eslint . --ext .jsx,.js",
     "lint-fix": "eslint . --ext .jsx,.js --fix",
-    "prettier": "prettier --write '**/*.{js,jsx,json,scss}'"
+    "prettier": "prettier --write '**/*.{js,jsx,json,scss}'",
+    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
   },
   "repository": {
     "type": "git",
@@ -40,11 +41,12 @@
     "@financial-times/eslint-config-next": "^3.0.0",
     "@financial-times/n-gage": "^8.2.0",
     "@storybook/addon-a11y": "^6.0.10",
-    "@storybook/addon-essentials": "^6.0.10",
+    "@storybook/addon-essentials": "6.0.10",
     "@storybook/react": "^6.0.10",
     "@sucrase/jest-plugin": "^2.0.0",
     "bower": "^1.8.8",
     "chai": "^4.2.0",
+    "check-engines": "^1.5.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^8.1.0",
@@ -71,7 +73,8 @@
     "snyk": "1.230.7"
   },
   "engines": {
-    "node": "12.x"
+    "node": "12.x || 14.x",
+    "npm": "7.x || 8.x"
   },
   "lint-staged": {
     "**/*.{js,jsx,json,scss}": "prettier --write",
@@ -80,8 +83,8 @@
   "husky": {
     "hooks": {
       "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
-      "pre-commit": "node_modules/.bin/secret-squirrel && npm run lint && lint-staged && make test",
-      "pre-push": "npm run lint && make test"
+      "pre-commit": "node_modules/.bin/secret-squirrel && npm run lint",
+      "pre-push": "make test"
     }
   }
 }

package/test-jest/helpers/expect-to-render-correctly.js

@@ -1,7 +1,7 @@
 import ReactDOMServer from 'react-dom/server';
 
 export const expectToRenderCorrectly = {
-	toRenderCorrectly(reactComponent, props) {
+	toRenderCorrectly (reactComponent, props) {
 		// Render the React component with props.
 		const ReactComponentRendered = ReactDOMServer.renderToStaticMarkup(
 			reactComponent(props)

package/utils/app-banner.js

@@ -1,5 +1,5 @@
 class AppBanner {
-	constructor(window) {
+	constructor (window) {
 		if (!window) {
 			throw new Error('Please supply a Window object');
 		}

package/utils/apple-pay.js

@@ -38,7 +38,7 @@ class ApplePay {
 	 * @param {Object} options PaymentRequest API payment options object
 	 * @throws If browser doesn't support PaymentRequest API
 	 */
-	constructor(
+	constructor (
 		window,
 		methods = ApplePay.PAYMENT_METHODS,
 		details = ApplePay.PAYMENT_DETAILS,
@@ -63,7 +63,7 @@ class ApplePay {
 	 * Proxy call through to the request
 	 * @return {Promise<Boolean>}
 	 */
-	canMakePayment() {
+	canMakePayment () {
 		return this.request.canMakePayment();
 	}
 
@@ -72,7 +72,7 @@ class ApplePay {
 	 * @param {Object} paymentDetails Optional payment details object for update
 	 * @return {Promise<Object>} Response object from apple pay
 	 */
-	show(paymentDetails) {
+	show (paymentDetails) {
 		// Work around to enable the update of payment details for safari
 		// browsers as it seems not to be supported, regenerates PaymentRequest
 		if (paymentDetails) {
@@ -92,7 +92,7 @@ class ApplePay {
 	 * Validate ourselves via membership
 	 * @param {Object} event
 	 */
-	async handleMerchantValidation(event) {
+	async handleMerchantValidation (event) {
 		const merchantId = ApplePay.getMerchantId(this.methods);
 		const url = ApplePay.getMerchantValidationUrl(merchantId);
 		const data = {
@@ -123,7 +123,7 @@ class ApplePay {
 	 * @param {Array} methods
 	 * @return {String}
 	 */
-	static getMerchantId(methods = []) {
+	static getMerchantId (methods = []) {
 		const method = methods[0] || {};
 		return (
 			(method.data && method.data.merchantIdentifier) || ApplePay.MERCHANT_ID
@@ -135,7 +135,7 @@ class ApplePay {
 	 * @param {String} merchantId
 	 * @return {String}
 	 */
-	static getMerchantValidationUrl(merchantId) {
+	static getMerchantValidationUrl (merchantId) {
 		if (merchantId === ApplePay.TEST_MERCHANT_ID) {
 			return ApplePay.TEST_MERCHANT_VALIDATION_URL;
 		}
@@ -148,7 +148,7 @@ class ApplePay {
 	 * @param {String} currency ISO 3 digit currency code
 	 * @param {String} label Product name
 	 */
-	static getPaymentDetails(value, currency, label) {
+	static getPaymentDetails (value, currency, label) {
 		const details = ApplePay.PAYMENT_DETAILS;
 		details.total.label = label;
 		details.total.amount.value = value;
@@ -160,7 +160,7 @@ class ApplePay {
 	 * Expose the production merchant id
 	 * @return {String}
 	 */
-	static get MERCHANT_ID() {
+	static get MERCHANT_ID () {
 		return 'merchant.com.ft';
 	}
 
@@ -168,7 +168,7 @@ class ApplePay {
 	 * Expose the production merchant validation url
 	 * @return {String}
 	 */
-	static get MERCHANT_VALIDATION_URL() {
+	static get MERCHANT_VALIDATION_URL () {
 		return 'https://api.ft.com/idm/v1/apple-merchant-validation/validate';
 	}
 
@@ -176,7 +176,7 @@ class ApplePay {
 	 * Expose production payment methods
 	 * @return {Array}
 	 */
-	static get PAYMENT_METHODS() {
+	static get PAYMENT_METHODS () {
 		return [
 			{
 				supportedMethods: 'https://apple.com/apple-pay',
@@ -195,7 +195,7 @@ class ApplePay {
 	 * Default payment details
 	 * @return {Object}
 	 */
-	static get PAYMENT_DETAILS() {
+	static get PAYMENT_DETAILS () {
 		return {
 			total: {
 				label: 'FT.com',
@@ -211,7 +211,7 @@ class ApplePay {
 	 * Default payment options
 	 * @return {Object}
 	 */
-	static get PAYMENT_OPTIONS() {
+	static get PAYMENT_OPTIONS () {
 		return {
 			requestPayerName: false,
 			requestPayerEmail: false,
@@ -224,7 +224,7 @@ class ApplePay {
 	 * Expose the test merchant id
 	 * @return {String}
 	 */
-	static get TEST_MERCHANT_ID() {
+	static get TEST_MERCHANT_ID () {
 		return 'merchant.test.env.apple.pay';
 	}
 
@@ -232,7 +232,7 @@ class ApplePay {
 	 * Expose the test merchant validation url
 	 * @return {String}
 	 */
-	static get TEST_MERCHANT_VALIDATION_URL() {
+	static get TEST_MERCHANT_VALIDATION_URL () {
 		return 'https://api-t.ft.com/idm/v1/apple-merchant-validation/validate';
 	}
 
@@ -240,7 +240,7 @@ class ApplePay {
 	 * Expose the test payment methods
 	 * @return {Array}
 	 */
-	static get TEST_PAYMENT_METHODS() {
+	static get TEST_PAYMENT_METHODS () {
 		return [
 			{
 				supportedMethods: 'https://apple.com/apple-pay',

package/utils/billing-city.js

@@ -1,7 +1,7 @@
 const FormElement = require('./form-element');
 
 class BillingCity extends FormElement {
-	constructor(document) {
+	constructor (document) {
 		super(document, '.ncf #billingCityField');
 	}
 }

package/utils/billing-country.js

@@ -15,7 +15,7 @@ class BillingCountry {
 	 * @throws If the document not passed
 	 * @throws When the country element not found
 	 */
-	constructor(element) {
+	constructor (element) {
 		if (!element) {
 			throw new Error('Please supply a DOM element');
 		}
@@ -32,7 +32,7 @@ class BillingCountry {
 	 * Register an event listener
 	 * @param {Function} callback Called with event when changed
 	 */
-	onChange(callback = () => {}) {
+	onChange (callback = () => {}) {
 		return this.$billingCountry.addEventListener('change', callback);
 	}
 
@@ -41,7 +41,7 @@ class BillingCountry {
 	 * @return {String}
 	 * @throws If nothing has been selected
 	 */
-	getSelected() {
+	getSelected () {
 		const selected =
 			this.$billingCountry.options[this.$billingCountry.selectedIndex];
 		if (!selected) {

package/utils/billing-postcode.js

@@ -1,7 +1,7 @@
 const Postcode = require('./postcode');
 
 class BillingPostcode extends Postcode {
-	constructor(document) {
+	constructor (document) {
 		super(document, '.ncf #billingPostcodeField');
 	}
 }