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

package/components/__snapshots__/debug.spec.js.snap

@@ -78,7 +78,7 @@ exports[`Debug renders with isTest 1`] = `
 
 		var inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);
 		inputs.forEach(function (input) {
-			if (!/hidden/i.test(input.type)) {
+			if (!/hidden/i.test(input.type) && input.disabled === false) {
 				var value = debugData[input.name];
 				input.value = value;
 				input.dispatchEvent(changeEvent);
@@ -237,7 +237,7 @@ exports[`Debug renders with showHelpers 1`] = `
 
 		var inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);
 		inputs.forEach(function (input) {
-			if (!/hidden/i.test(input.type)) {
+			if (!/hidden/i.test(input.type) && input.disabled === false) {
 				var value = debugData[input.name];
 				input.value = value;
 				input.dispatchEvent(changeEvent);

package/components/__snapshots__/delivery-postcode.spec.js.snap

@@ -175,7 +175,7 @@ exports[`Delivery Postcode renders a postcode input with a label set as postal c
     <input type="text"
            id="deliveryPostcode"
            name="deliveryPostcode"
-           placeholder="e.g. M4W 2C6"
+           placeholder="e.g. M5H 3E5"
            autocomplete="postal-code"
            data-trackable="delivery-postcode"
            aria-required="true"

package/components/debug.jsx

@@ -18,7 +18,7 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	`;
 	const testCards = `
 		<button id="ncf-copy-visa-checkout-card" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkoutVisa');" title="Copy Checkout Visa test card number to clipboard">EU Visa (cvv:100)</button>
-		<button id="ncf-copy-visa-checkout-3ds" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkout3dsChallenge');" title="Copy Checkout cvv number (default success) to clipboard">EU 3ds challenge</button>
+		<button id="ncf-copy-visa-checkout-3ds" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkout3dsChallenge');" title="Copy Checkout challenge code -Checkout1!- to clipboard">EU 3ds challenge</button>
 		<button id="ncf-copy-visa-chase-card" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('chaseVisa');" title="Copy Chase card number to clipboard">US Visa (exp:1230,cvv:111)</button>
 		<button id="ncf-link-checkout-cards" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');" title="Checkout test cards documentation">Doc:Checkout</button>
 	`;
@@ -104,7 +104,7 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 
 		var inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);
 		inputs.forEach(function (input) {
-			if (!/hidden/i.test(input.type)) {
+			if (!/hidden/i.test(input.type) && input.disabled === false) {
 				var value = debugData[input.name];
 				input.value = value;
 				input.dispatchEvent(changeEvent);

package/components/delivery-address.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
+import deliveryAddressMap from '../helpers/deliveryAddressMap';
+import { identifyFTShippingZone, countriesSupportedISO } from '../helpers/supportedCountries';
 export function DeliveryAddress ({
 	fieldId = 'deliveryAddressFields',
 	hasError = false,
@@ -11,36 +12,16 @@ export function DeliveryAddress ({
 	isDisabled = false,
 	isHidden = false,
 	country = 'GBR',
+	addressType = 'home',
 }) {
 	const divClassNames = classNames([{ ncf__hidden: isHidden }]);
-
 	const inputWrapperClassNames = classNames([
 		'o-forms-input',
 		'o-forms-input--text',
 		{ 'o-forms-input--invalid': hasError },
 	]);
+	const FTShippingZone = identifyFTShippingZone(country);
 
-	const addressLine3Title = {
-		GBR: 'Address line 3',
-		USA: 'APT/FL/STE',
-		CAN: 'APT/FL/STE',
-	};
-
-	const 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”',
-	};
-
-	const addressLine3Placeholder = {
-		USA: 'e.g Apt 2C / FL 10 / STE 50',
-		CAN: 'e.g Apt 2C / FL 10 / STE 50',
-	};
-
-	const addressLine1Placeholder = {
-		GBR: 'e.g. 10 Elm Street',
-		USA: 'e.g. 10 Elm St.',
-		CAN: 'e.g. 36 Poirier Blvd.',
-	};
 
 	const addressLine1 = (
 		<label
@@ -48,7 +29,9 @@ export function DeliveryAddress ({
 			htmlFor="deliveryAddressLine1"
 		>
 			<span className="o-forms-title">
-				<span className="o-forms-title__main">Address line 1</span>
+				<span className="o-forms-title__main">
+					{deliveryAddressMap[addressType].addressLine1Title[FTShippingZone] || 'Address line 1'}
+				</span>
 			</span>
 			<span className={inputWrapperClassNames}>
 				<input
@@ -57,7 +40,7 @@ export function DeliveryAddress ({
 					name="deliveryAddressLine1"
 					data-trackable="field-deliveryAddressLine1"
 					autoComplete="address-line1"
-					placeholder={addressLine1Placeholder[country]}
+					placeholder={deliveryAddressMap[addressType].addressLine1Placeholder[FTShippingZone]}
 					maxLength={50}
 					aria-required="true"
 					required
@@ -86,7 +69,7 @@ export function DeliveryAddress ({
 					name="deliveryAddressLine2"
 					data-trackable="field-deliveryAddressLine2"
 					autoComplete="address-line2"
-					placeholder=""
+					placeholder={deliveryAddressMap[addressType].addressLine2Placeholder[FTShippingZone] || ''}
 					maxLength={50}
 					disabled={isDisabled}
 					defaultValue={line2}
@@ -102,10 +85,10 @@ export function DeliveryAddress ({
 		>
 			<span className="o-forms-title">
 				<span className="o-forms-title__main">
-					{addressLine3Title[country]}
+					{deliveryAddressMap[addressType].addressLine3Title[FTShippingZone]}
 				</span>
 				<span className="o-forms-title__prompt">
-					{addressLine3Prompt[country]}
+					{deliveryAddressMap[addressType].addressLine3Prompt[FTShippingZone]}
 				</span>
 			</span>
 			<span className={inputWrapperClassNames}>
@@ -115,7 +98,7 @@ export function DeliveryAddress ({
 					name="deliveryAddressLine3"
 					data-trackable="field-deliveryAddressLine3"
 					autoComplete="address-line3"
-					placeholder={addressLine3Placeholder[country] || 'e.g. Apt. 1'}
+					placeholder={deliveryAddressMap[addressType].addressLine3Placeholder[FTShippingZone] || 'e.g. Apt. 1'}
 					maxLength={50}
 					disabled={isDisabled}
 					defaultValue={line3}
@@ -123,37 +106,16 @@ export function DeliveryAddress ({
 			</span>
 		</label>
 	);
-
-	const addressLines = {
-		GBR: (
-			<>
-				{' '}
-				{addressLine1}
-				{addressLine2}
-				{addressLine3}{' '}
-			</>
-		),
-		USA: (
-			<>
-				{' '}
-				{addressLine1}
-				{addressLine3}
-				{addressLine2}{' '}
-			</>
-		),
-		CAN: (
-			<>
-				{' '}
-				{addressLine1}
-				{addressLine3}
-				{addressLine2}{' '}
-			</>
-		),
-	};
+	const addressLines = deliveryAddressMap[addressType].template(
+		addressLine1,
+		addressLine2,
+		addressLine3,
+		FTShippingZone
+	);
 
 	return (
 		<div id={fieldId} data-validate="required" className={divClassNames}>
-			{addressLines[country]}
+			{addressLines}
 		</div>
 	);
 }
@@ -166,5 +128,6 @@ DeliveryAddress.propTypes = {
 	line3: PropTypes.string,
 	isDisabled: PropTypes.bool,
 	isHidden: PropTypes.bool,
-	country: PropTypes.oneOf(['GBR', 'USA', 'CAN']),
+	country: PropTypes.oneOf(countriesSupportedISO),
+	addressType: PropTypes.oneOf(['home', 'company', 'pobox']),
 };

package/components/delivery-address.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DeliveryAddress } from './delivery-address';
+import { countriesSupportedISO } from '../helpers/supportedCountries';
 
 export default {
 	title: 'Delivery Address',
@@ -12,6 +13,12 @@ export default {
 		line3: { control: 'string' },
 		isDisabled: { control: 'boolean' },
 		isHidden: { control: 'boolean' },
+		country: {
+			control: {
+				type: 'inline-radio',
+				options: countriesSupportedISO,
+			},
+		},
 	},
 };
 

package/components/delivery-city.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { countriesSupportedISO } from '../helpers/supportedCountries';
+
 
 export function DeliveryCity ({
 	hasError = false,
@@ -37,7 +39,7 @@ export function DeliveryCity ({
 					name="deliveryCity"
 					data-trackable="field-deliveryCity"
 					autoComplete="address-level2"
-					placeholder={inputPlaceholder[country]}
+					placeholder={inputPlaceholder[country] || ''}
 					maxLength={40}
 					aria-required="true"
 					required
@@ -57,5 +59,5 @@ DeliveryCity.propTypes = {
 	value: PropTypes.string,
 	isDisabled: PropTypes.bool,
 	maxlength: PropTypes.number,
-	country: PropTypes.oneOf(['GBR', 'USA', 'CAN']),
+	country: PropTypes.oneOf(countriesSupportedISO),
 };

package/components/delivery-city.stories.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import { DeliveryCity } from './delivery-city';
+import { countriesSupportedISO } from '../helpers/supportedCountries';
 
 export default {
 	title: 'Delivery City',
 	component: DeliveryCity,
+	argTypes: {
+		country: {
+			control: {
+				type: 'inline-radio',
+				options: countriesSupportedISO,
+			},
+		},
+	},
 };
 
 export const Basic = (args) => <DeliveryCity {...args} />;

package/components/delivery-option.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getDeliveryOption } from '../utils/delivery-option-messages';
+import { identifyFTShippingZone, countriesSupportedISO } from '../helpers/supportedCountries';
 
 export function DeliveryOption ({
 	fieldId = 'deliveryOptionField',
@@ -16,6 +17,8 @@ export function DeliveryOption ({
 		{ 'ncf__delivery-option--single': isSingle },
 	]);
 
+	const FTShippingZone = identifyFTShippingZone(country);
+
 	return (
 		<div
 			id={fieldId}
@@ -26,11 +29,10 @@ export function DeliveryOption ({
 			<span className="o-forms-input o-forms-input--radio-round">
 				{options.map((option) => {
 					const { value, isValidDeliveryOption, isSelected } = option;
-
 					const deliveryOptionValue = getDeliveryOption(
 						productCode,
 						option,
-						country
+						FTShippingZone
 					);
 
 					if (!isValidDeliveryOption || !deliveryOptionValue) {
@@ -73,7 +75,7 @@ export function DeliveryOption ({
 }
 
 DeliveryOption.propTypes = {
-	country: PropTypes.oneOf(['GBR', 'USA', 'CAN']).isRequired,
+	country: PropTypes.oneOf(countriesSupportedISO).isRequired,
 	productCode: PropTypes.string,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({

package/components/delivery-option.stories.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import { DeliveryOption } from './delivery-option';
+import { countriesSupportedISO } from '../helpers/supportedCountries';
 
 export default {
 	title: 'Delivery Options',
 	component: DeliveryOption,
 	argTypes: {
 		options: { control: 'array' },
-		country: { control: 'string' },
+		country: {
+			control: {
+				type: 'inline-radio',
+				options: countriesSupportedISO,
+			},
+		},
 		productCode: { control: 'string' },
 	},
 };

package/components/delivery-postcode.jsx

@@ -1,22 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { countriesSupported } from '../helpers/supportedCountries';
+import { allSupportedPostcodeExamples } from '../helpers/supportedPostcodeExamples';
 
-const postcodeLabel = {
-	USA: 'Zip Code',
-	CAN: 'Postal Code',
-};
-
-const promptLabel = {
-	USA: 'Please enter your 5 digit Zip Code',
-	CAN: 'Please enter your 6 digit postal code',
-};
+const postcodeLabel = Object.keys(countriesSupported).reduce((previous, countryCode) => {
+	if (countryCode === 'USA') {
+		previous[countryCode] = 'Zip Code';
+	} else if (countryCode === 'GBR') {
+		previous[countryCode] = 'Postcode';
+	} else {
+		previous[countryCode] = 'Postal Code';
+	}
+	return previous;
+}
+, {}
+);
 
-const placeholderLabel = {
-	USA: 'e.g. 60411',
-	CAN: 'e.g. M4W 2C6',
-};
+const promptLabel = Object.keys(countriesSupported).reduce((previous, countryCode) => {
+	if (countryCode === 'USA') {
+		previous[countryCode] = 'Please enter your 5 digit Zip Code';
+	} else if (countryCode === 'CAN') {
+		previous[countryCode] = 'Please enter your 6 digit postal code';
+	} else if (countryCode !== 'GBR') { //GBR has no label
+		previous[countryCode] = 'Please enter your postal code';
+	}
+	return previous;
+}
+, {}
+);
 
+const placeholderLabel = Object.keys(allSupportedPostcodeExamples).reduce((previous, countryCode) => {
+	previous[countryCode] = 'e.g. ' + allSupportedPostcodeExamples[countryCode];
+	return previous;
+}
+, {}
+);
 export function DeliveryPostcode ({
 	value = '',
 	country = '',

package/components/delivery-postcode.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DeliveryPostcode } from './delivery-postcode';
+import { countriesSupportedISO } from '../helpers/supportedCountries';
 
 export default {
 	title: 'Delivery Postcode',
@@ -9,7 +10,7 @@ export default {
 		country: {
 			control: {
 				type: 'inline-radio',
-				options: ['USA', 'CAN', 'Other'],
+				options: countriesSupportedISO,
 			},
 		},
 	},

package/dist/debug.js

@@ -24,7 +24,7 @@ function Debug(_ref) {
   // entirely this component should be rethought.
   var testEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test\" onclick=\"setTestEnvironment('off');\"><strong>TEST</strong> relax you are using the test API</a>\n\t\t</span>\n\t";
   var productionEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production\" onclick=\"setTestEnvironment('on');\"><strong>PRODUCTION</strong> careful you are using the production API</a>\n\t\t</span>\n\t";
-  var testCards = "\n\t\t<button id=\"ncf-copy-visa-checkout-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkoutVisa');\" title=\"Copy Checkout Visa test card number to clipboard\">EU Visa (cvv:100)</button>\n\t\t<button id=\"ncf-copy-visa-checkout-3ds\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkout3dsChallenge');\" title=\"Copy Checkout cvv number (default success) to clipboard\">EU 3ds challenge</button>\n\t\t<button id=\"ncf-copy-visa-chase-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('chaseVisa');\" title=\"Copy Chase card number to clipboard\">US Visa (exp:1230,cvv:111)</button>\n\t\t<button id=\"ncf-link-checkout-cards\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');\" title=\"Checkout test cards documentation\">Doc:Checkout</button>\n\t";
+  var testCards = "\n\t\t<button id=\"ncf-copy-visa-checkout-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkoutVisa');\" title=\"Copy Checkout Visa test card number to clipboard\">EU Visa (cvv:100)</button>\n\t\t<button id=\"ncf-copy-visa-checkout-3ds\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkout3dsChallenge');\" title=\"Copy Checkout challenge code -Checkout1!- to clipboard\">EU 3ds challenge</button>\n\t\t<button id=\"ncf-copy-visa-chase-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('chaseVisa');\" title=\"Copy Chase card number to clipboard\">US Visa (exp:1230,cvv:111)</button>\n\t\t<button id=\"ncf-link-checkout-cards\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');\" title=\"Checkout test cards documentation\">Doc:Checkout</button>\n\t";
   var linksString = Object.keys(links).map(function (link) {
     return "<a key=".concat(link, " class=\"ncf__button ncf__button--inverse ncf__link\" href=\"").concat(links[link], "\">").concat(link, "</a>");
   });
@@ -33,7 +33,7 @@ function Debug(_ref) {
     __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
   };
   var javascript = {
-    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'delivery test3',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type)) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
+    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'delivery test3',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
   };
   var style = {
     __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t.ncf__button--debug {\n\t\tpadding: 0px 5px;\n\t}\n\t"

package/dist/delivery-address.js

@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _deliveryAddressMap = _interopRequireDefault(require("../helpers/deliveryAddressMap"));
+
+var _supportedCountries = require("../helpers/supportedCountries");
+
 function DeliveryAddress(_ref) {
   var _ref$fieldId = _ref.fieldId,
       fieldId = _ref$fieldId === void 0 ? 'deliveryAddressFields' : _ref$fieldId,
@@ -29,31 +33,16 @@ function DeliveryAddress(_ref) {
       _ref$isHidden = _ref.isHidden,
       isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
       _ref$country = _ref.country,
-      country = _ref$country === void 0 ? 'GBR' : _ref$country;
+      country = _ref$country === void 0 ? 'GBR' : _ref$country,
+      _ref$addressType = _ref.addressType,
+      addressType = _ref$addressType === void 0 ? 'home' : _ref$addressType;
   var divClassNames = (0, _classnames["default"])([{
     ncf__hidden: isHidden
   }]);
   var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
     'o-forms-input--invalid': hasError
   }]);
-  var addressLine3Title = {
-    GBR: 'Address line 3',
-    USA: 'APT/FL/STE',
-    CAN: 'APT/FL/STE'
-  };
-  var 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”'
-  };
-  var addressLine3Placeholder = {
-    USA: 'e.g Apt 2C / FL 10 / STE 50',
-    CAN: 'e.g Apt 2C / FL 10 / STE 50'
-  };
-  var addressLine1Placeholder = {
-    GBR: 'e.g. 10 Elm Street',
-    USA: 'e.g. 10 Elm St.',
-    CAN: 'e.g. 36 Poirier Blvd.'
-  };
+  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
 
   var addressLine1 = /*#__PURE__*/_react["default"].createElement("label", {
     className: "o-forms-field ncf__validation-error",
@@ -62,7 +51,7 @@ function DeliveryAddress(_ref) {
     className: "o-forms-title"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__main"
-  }, "Address line 1")), /*#__PURE__*/_react["default"].createElement("span", {
+  }, _deliveryAddressMap["default"][addressType].addressLine1Title[FTShippingZone] || 'Address line 1')), /*#__PURE__*/_react["default"].createElement("span", {
     className: inputWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
@@ -70,7 +59,7 @@ function DeliveryAddress(_ref) {
     name: "deliveryAddressLine1",
     "data-trackable": "field-deliveryAddressLine1",
     autoComplete: "address-line1",
-    placeholder: addressLine1Placeholder[country],
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine1Placeholder[FTShippingZone],
     maxLength: 50,
     "aria-required": "true",
     required: true,
@@ -95,7 +84,7 @@ function DeliveryAddress(_ref) {
     name: "deliveryAddressLine2",
     "data-trackable": "field-deliveryAddressLine2",
     autoComplete: "address-line2",
-    placeholder: "",
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine2Placeholder[FTShippingZone] || '',
     maxLength: 50,
     disabled: isDisabled,
     defaultValue: line2
@@ -108,9 +97,9 @@ function DeliveryAddress(_ref) {
     className: "o-forms-title"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__main"
-  }, addressLine3Title[country]), /*#__PURE__*/_react["default"].createElement("span", {
+  }, _deliveryAddressMap["default"][addressType].addressLine3Title[FTShippingZone]), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__prompt"
-  }, addressLine3Prompt[country])), /*#__PURE__*/_react["default"].createElement("span", {
+  }, _deliveryAddressMap["default"][addressType].addressLine3Prompt[FTShippingZone])), /*#__PURE__*/_react["default"].createElement("span", {
     className: inputWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
@@ -118,22 +107,19 @@ function DeliveryAddress(_ref) {
     name: "deliveryAddressLine3",
     "data-trackable": "field-deliveryAddressLine3",
     autoComplete: "address-line3",
-    placeholder: addressLine3Placeholder[country] || 'e.g. Apt. 1',
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine3Placeholder[FTShippingZone] || 'e.g. Apt. 1',
     maxLength: 50,
     disabled: isDisabled,
     defaultValue: line3
   })));
 
-  var addressLines = {
-    GBR: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' ', addressLine1, addressLine2, addressLine3, ' '),
-    USA: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' ', addressLine1, addressLine3, addressLine2, ' '),
-    CAN: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' ', addressLine1, addressLine3, addressLine2, ' ')
-  };
+  var addressLines = _deliveryAddressMap["default"][addressType].template(addressLine1, addressLine2, addressLine3, FTShippingZone);
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     "data-validate": "required",
     className: divClassNames
-  }, addressLines[country]);
+  }, addressLines);
 }
 
 DeliveryAddress.propTypes = {
@@ -144,5 +130,6 @@ DeliveryAddress.propTypes = {
   line3: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,
   isHidden: _propTypes["default"].bool,
-  country: _propTypes["default"].oneOf(['GBR', 'USA', 'CAN'])
+  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO),
+  addressType: _propTypes["default"].oneOf(['home', 'company', 'pobox'])
 };

package/dist/delivery-city.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _supportedCountries = require("../helpers/supportedCountries");
+
 function DeliveryCity(_ref) {
   var _ref$hasError = _ref.hasError,
       hasError = _ref$hasError === void 0 ? false : _ref$hasError,
@@ -47,7 +49,7 @@ function DeliveryCity(_ref) {
     name: "deliveryCity",
     "data-trackable": "field-deliveryCity",
     autoComplete: "address-level2",
-    placeholder: inputPlaceholder[country],
+    placeholder: inputPlaceholder[country] || '',
     maxLength: 40,
     "aria-required": "true",
     required: true,
@@ -63,5 +65,5 @@ DeliveryCity.propTypes = {
   value: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,
   maxlength: _propTypes["default"].number,
-  country: _propTypes["default"].oneOf(['GBR', 'USA', 'CAN'])
+  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO)
 };

package/dist/delivery-option.js

@@ -15,6 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _deliveryOptionMessages = require("../utils/delivery-option-messages");
 
+var _supportedCountries = require("../helpers/supportedCountries");
+
 function DeliveryOption(_ref) {
   var _ref$fieldId = _ref.fieldId,
       fieldId = _ref$fieldId === void 0 ? 'deliveryOptionField' : _ref$fieldId,
@@ -28,6 +30,7 @@ function DeliveryOption(_ref) {
   var divClassName = (0, _classnames["default"])(['o-forms-field', 'ncf__delivery-option', {
     'ncf__delivery-option--single': isSingle
   }]);
+  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     className: divClassName,
@@ -39,7 +42,7 @@ function DeliveryOption(_ref) {
     var value = option.value,
         isValidDeliveryOption = option.isValidDeliveryOption,
         isSelected = option.isSelected;
-    var deliveryOptionValue = (0, _deliveryOptionMessages.getDeliveryOption)(productCode, option, country);
+    var deliveryOptionValue = (0, _deliveryOptionMessages.getDeliveryOption)(productCode, option, FTShippingZone);
 
     if (!isValidDeliveryOption || !deliveryOptionValue) {
       return null;
@@ -70,7 +73,7 @@ function DeliveryOption(_ref) {
 }
 
 DeliveryOption.propTypes = {
-  country: _propTypes["default"].oneOf(['GBR', 'USA', 'CAN']).isRequired,
+  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO).isRequired,
   productCode: _propTypes["default"].string,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     value: _propTypes["default"].oneOf(['PV', 'HD', 'EV']),

package/dist/delivery-postcode.js

@@ -13,18 +13,37 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var postcodeLabel = {
-  USA: 'Zip Code',
-  CAN: 'Postal Code'
-};
-var promptLabel = {
-  USA: 'Please enter your 5 digit Zip Code',
-  CAN: 'Please enter your 6 digit postal code'
-};
-var placeholderLabel = {
-  USA: 'e.g. 60411',
-  CAN: 'e.g. M4W 2C6'
-};
+var _supportedCountries = require("../helpers/supportedCountries");
+
+var _supportedPostcodeExamples = require("../helpers/supportedPostcodeExamples");
+
+var postcodeLabel = Object.keys(_supportedCountries.countriesSupported).reduce(function (previous, countryCode) {
+  if (countryCode === 'USA') {
+    previous[countryCode] = 'Zip Code';
+  } else if (countryCode === 'GBR') {
+    previous[countryCode] = 'Postcode';
+  } else {
+    previous[countryCode] = 'Postal Code';
+  }
+
+  return previous;
+}, {});
+var promptLabel = Object.keys(_supportedCountries.countriesSupported).reduce(function (previous, countryCode) {
+  if (countryCode === 'USA') {
+    previous[countryCode] = 'Please enter your 5 digit Zip Code';
+  } else if (countryCode === 'CAN') {
+    previous[countryCode] = 'Please enter your 6 digit postal code';
+  } else if (countryCode !== 'GBR') {
+    //GBR has no label
+    previous[countryCode] = 'Please enter your postal code';
+  }
+
+  return previous;
+}, {});
+var placeholderLabel = Object.keys(_supportedPostcodeExamples.allSupportedPostcodeExamples).reduce(function (previous, countryCode) {
+  previous[countryCode] = 'e.g. ' + _supportedPostcodeExamples.allSupportedPostcodeExamples[countryCode];
+  return previous;
+}, {});
 
 function DeliveryPostcode(_ref) {
   var _ref$value = _ref.value,

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/supportedCountries.js

@@ -0,0 +1,76 @@
+const { flattenObj } = require('./utilities');
+const { printRegions } = require('./constants');
+
+const supportedCountriesMasterList = {
+	cemeaV1: {
+		AUT: 'Austria',
+		ARE: 'United Arab Emirates',
+		BEL: 'Belgium',
+		BGR: 'Bulgaria',
+		HRV: 'Croatia',
+		CZE: 'Czechia',
+		DNK: 'Denmark',
+		FIN: 'Finland',
+		DEU: 'Germany',
+		GRC: 'Greece',
+		HUN: 'Hungary',
+		ISL: 'Iceland',
+		ITA: 'Italy',
+		LIE: 'Liechtenstein',
+		LTU: 'Lithuania',
+		NLD: 'Netherlands',
+		NOR: 'Norway',
+		POL: 'Poland',
+		PRT: 'Portugal',
+		QAT: 'Qatar',
+		ROU: 'Romania',
+		RUS: 'Russian Federation',
+		SVK: 'Slovakia',
+		SVN: 'Slovenia',
+		ZAF: 'South Africa',
+		ESP: 'Spain',
+		SWE: 'Sweden',
+		CHE: 'Switzerland'
+	},
+	cemeaV2: { FRA: 'France', LUX: 'Luxembourg', MCO: 'Monaco' },
+	apac: {
+		CHN: 'China',
+		HKG: 'Hong Kong',
+		IND: 'India',
+		IDN: 'Indonesia',
+		JPN: 'Japan',
+		KOR: 'Korea, Republic of',
+		MYS: 'Malaysia',
+		PHL: 'Philippines',
+		SGP: 'Singapore',
+		TWN: 'Taiwan, Province of China',
+		THA: 'Thailand'
+	},
+	other: {
+		GBR: 'United Kingdom',
+		USA: 'United States',
+		CAN: 'Canada'
+	}
+};
+
+const cemeaV1ISO = Object.keys(supportedCountriesMasterList.cemeaV1);
+const cemeaV2ISO = Object.keys(supportedCountriesMasterList.cemeaV2);
+const apacISO = Object.keys(supportedCountriesMasterList.apac);
+
+const countriesSupported = flattenObj(supportedCountriesMasterList);
+const countriesSupportedISO = Object.keys(countriesSupported);
+
+const identifyFTShippingZone = (country) => {
+	if (cemeaV1ISO.includes(country)) {
+		return printRegions.cemeaV1;
+	}
+	if (cemeaV2ISO.includes(country)) {
+		return printRegions.cemeaV2;
+	}
+	if (apacISO.includes(country)) {
+		return printRegions.apac;
+	}
+	return country;
+};
+
+module.exports = { cemeaV1ISO, cemeaV2ISO, apacISO, countriesSupported, countriesSupportedISO, identifyFTShippingZone };

package/helpers/supportedPostcodeExamples.js

@@ -0,0 +1,57 @@
+const { flattenObj } = require('./utilities');
+
+const supportedPostcodeExamples = {
+	cemeaV1: {
+		AUT: '17087',
+		ARE: '', //match anything
+		BEL: '6596',
+		BGR: '4000',
+		HRV: '10000',
+		CZE: '00 100',
+		DNK: '1819',
+		FIN: '39500',
+		DEU: '17087',
+		GRC: '241 00',
+		HUN: '3821',
+		ISL: '60411',
+		ITA: '23844',
+		LIE: '9480',
+		LTU: 'LT-12345',
+		NLD: '6971 HJ',
+		NOR: '1608',
+		POL: '43-190',
+		PRT: '2525-517',
+		QAT: '',//match anything
+		ROU: '71234',
+		RUS: '191028',
+		SVK: '98401',
+		SVN: '8263',
+		ZAF: '5189',
+		ESP: '37752',
+		SWE: '260 38',
+		CHE: '9424'
+	},
+	cemeaV2: { FRA: '95000', LUX: '1009', MCO: '98000' },
+	apac: {
+		CHN: '610000',
+		HKG: '', //match anything
+		IND: '401107',
+		IDN: '55165',
+		JPN: '100-0001',
+		KOR: '46500',
+		MYS: '59100',
+		PHL: '2799',
+		SGP: '58416',
+		TWN: '100',
+		THA: '10330'
+	},
+	other: {
+		GBR: 'EC4M 9BT',
+		USA: '60411',
+		CAN: 'M5H 3E5'
+	}
+};
+
+const allSupportedPostcodeExamples = flattenObj(supportedPostcodeExamples);
+
+module.exports = { allSupportedPostcodeExamples };

package/helpers/supportedPostcodeValidators.js

@@ -0,0 +1,53 @@
+const supportedPostcodeValidators = {
+	cemeaV1: {
+		AUT: /^\\d{4}$/,
+		ARE: /.*$/, //match anything
+		BEL: /^\\d{4}$/,
+		BGR: /^\\d{4}$/,
+		HRV: /^\\d{5}$/,
+		CZE: /^\\d{5}\\s\\(\\d{3}\\s\\d{2}\\)$/,
+		DNK: /^\\d{4}$/,
+		FIN: /^\\d{5}$/,
+		DEU: /^\\d{5}$/,
+		GRC: /^\\d{3}\\s{0,1}\\d{2}$/,
+		HUN: /^\\d{4}$/,
+		ISL: /^\\d{3}$/,
+		ITA: /^\\d{5}$/,
+		LIE: /^\\d{4}$/,
+		LTU: /^[Ll][Tt][- ]{0,1}\\d{5}$/,
+		NLD: /^\\d{4}\\s{0,1}[A-Za-z]{2}$/,
+		NOR: /^\\d{4}$/,
+		POL: /^\\d{2}[- ]{0,1}\\d{3}$/,
+		PRT: /^\\d{4}$/,
+		QAT: /.*$/,//match anything
+		ROU: /^\\d{6}$/,
+		RUS: /^\\d{6}$/,
+		SVK: /^\\d{5}\\s\\(\\d{3}\\s\\d{2}\\)$/,
+		SVN: /^([Ss][Ii][- ]{0,1}){0,1}\\d{4}$/,
+		ZAF: /^\\d{4}$/,
+		ESP: /^\\d{5}$/,
+		SWE: /^\\d{3}\\s*\\d{2}$/,
+		CHE: /^\\d{4}$/
+	},
+	cemeaV2: { FRA: /^[0-9]{5}$/, LUX: /^\\d{4}$/, MCO: /^980\\d{2}$/ },
+	apac: {
+		CHN: /^\\d{6}$/,
+		HKG: /.*$/, //match anything
+		IND: /^\\d{6}$/,
+		IDN: /^\\d{5}$/,
+		JPN: /^\\d{7}\\s\\(\\d{3}-\\d{4}\\)$/,
+		KOR: /^\\d{6}\\s\\(\\d{3}-\\d{3}\\)$/,
+		MYS: /^\\d{5}$/,
+		PHL: /^\\d{4}$/,
+		SGP: /^\\d{2}$/,
+		TWN: /^\\d{5}$/,
+		THA: /^\\d{5}$/
+	},
+	other: {
+		GBR: /^[A-Za-z]{1,2}[0-9][0-9A-Za-z]?[\s-]?[0-9][A-Za-z]{2}$/,
+		USA: /^[0-9]{5}$/,
+		CAN: /^[A-Za-z]\d[A-Za-z][\s-]?\d[A-Za-z]\d$/
+	}
+};
+
+module.exports = { supportedPostcodeValidators };

package/helpers/utilities.js

@@ -0,0 +1,14 @@
+//Recursively flattens a nested object.
+//For example: input: {a:{b:1}}  -> output: {b:1}
+const flattenObj = (obj, out={}) => {
+	Object.keys(obj).forEach(key => {
+		if (typeof obj[key] === 'object') {
+			out = flattenObj(obj[key], out); //recursively call for nesteds
+		} else {
+			out[key] = obj[key]; //direct assign for values
+		}
+	});
+	return out;
+};
+
+module.exports = { flattenObj };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "25.2.0",
+  "version": "27.0.0",
   "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": {

package/utils/delivery-option-messages.js

@@ -1,3 +1,5 @@
+const { printRegions } = require('../helpers/constants');
+
 // Delivery Frequency codes
 const ONLY_WEEKEND_DELIVERY_FREQ = 'A1';
 const FIVE_DAYS_WEEK_DELIVERY_FREQ = 'A5';
@@ -103,6 +105,19 @@ const deliveryOptionMessages = [
 		description:
 			'Enjoy delivery of the newspaper daily to your home or office address. \nPlease note: Your FT Weekend will be delivered on Sunday or Monday.',
 	},
+	{
+		deliveryFrequency: [
+			FIVE_DAYS_WEEK_DELIVERY_FREQ,
+			SIX_DAYS_WEEK_DELIVERY_FREQ,
+		],
+		distributorType: HAND_DELIVERY,
+		deliveryOnPublicationDate: true,
+		flightMarket: false,
+		country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
+		title: 'Hand delivery',
+		description:
+			'Enjoy the delivery of the newspaper to your home or office address. Please note we fly the newspaper to your location which means delivery is subject to flight delays/cancellations outside of the FT’s control. In those circumstances, your newspaper will be delivered the next delivery day. Please also be aware that your FT weekend will be delivered on Sunday.',
+	},
 	{
 		deliveryFrequency: [
 			FIVE_DAYS_WEEK_DELIVERY_FREQ,