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

package/components/accept-terms.jsx

@@ -22,6 +22,8 @@ export function AcceptTerms ({
 	isPrintProduct = false,
 	specialTerms = null,
 	isSingleTerm = false,
+	isNewDigitalBuyFlowConsent = false,
+	hideConfirmTermsAndConditions = false,
 }) {
 	const divProps = {
 		id: 'acceptTermsField',
@@ -50,49 +52,66 @@ export function AcceptTerms ({
 
 	const authFirstStepTerms = (
 		<>
-			<ul className="o-typography-list ncf__accept-terms-list">
-				<li>
-					<span className="terms-auth-first-step">
-						For more information about how we use your data, please refer to our <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
-						</a> and&nbsp;
+			{
+				// TODO: clean up the code in https://financialtimes.atlassian.net/browse/ACQ-1593
+				// isNewDigitalBuyFlowConsent flag for new A/B testing of consents auth first buy flow
+				// after the test it will be one of the conditions for the below flow
+			}
+			{isNewDigitalBuyFlowConsent && (
+				<hr className=" ncf ncf__divider-horizontal" />
+			)}
+			{!isNewDigitalBuyFlowConsent && (
+				<ul className="o-typography-list ncf__accept-terms-list">
+					<li>
+						<span className="terms-auth-first-step">
+							For more information about how we use your data, please refer to
+							our{' '}
+							<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
+							</a>{' '}
+							and&nbsp;
+							<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
+							</a>{' '}
+							policies.
+						</span>
+					</li>
+				</ul>
+			)}
+			{!hideConfirmTermsAndConditions && (
+				<label className={labelClassName} htmlFor="termsAcceptance">
+					<input {...inputProps} />
+					<span className="o-forms-input__label terms-auth-first-step">
+						I confirm that I am {ageRestriction} years or older and agree to the
+						full{' '}
 						<a
 							className="ncf__link--external"
 							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
-							target='_blank'
+							target={isEmbedded ? '_top' : '_blank'}
 							rel="noopener noreferrer"
 							data-trackable="terms-and-conditions"
 						>
-							cookie
-						</a> policies.
+							Terms &amp; Conditions
+						</a>
+						.
 					</span>
-				</li>
-			</ul>
-			<label className={labelClassName} htmlFor="termsAcceptance">
-				<input {...inputProps} />
-				<span className="o-forms-input__label terms-auth-first-step">
-					I confirm that I am {ageRestriction} years or older and agree to the full {' '}
-					<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 &amp; Conditions
-					</a>
-					.
-				</span>
-				<p className="o-forms-input__error">
-					Please accept our terms &amp; conditions
-				</p>
-			</label>
+					<p className="o-forms-input__error">
+						Please accept our terms &amp; conditions
+					</p>
+				</label>
+			)}
 		</>
 	);
 
@@ -391,4 +410,6 @@ AcceptTerms.propTypes = {
 	isPrintProduct: PropTypes.bool,
 	specialTerms: PropTypes.string,
 	isSingleTerm: PropTypes.bool,
+	isNewDigitalBuyFlowConsent: PropTypes.bool,
+	hideConfirmTermsAndConditions: PropTypes.bool,
 };

package/components/accept-terms.stories.js

@@ -11,8 +11,35 @@ export default {
 				options: ['immediate', 'endOfTerm'],
 			},
 		},
+		isAuthFirstAccount: { control: 'boolean' },
+		isAuthFirstPayment: { control: 'boolean' },
+		hasError: { control: 'boolean' },
+		isSignup: { control: 'boolean' },
+		isRegister: { control: 'boolean' },
+		isChecked: { control: 'boolean' },
+		isB2b: { control: 'boolean' },
+		isB2cPartnership: { control: 'boolean' },
+		isEmbedded: { control: 'boolean' },
+		isCorpSignup: { control: 'boolean' },
+		isTrial: { control: 'boolean' },
+		isTransition: { control: 'boolean' },
+		isPrintProduct: { control: 'boolean' },
+		isSingleTerm: { control: 'boolean' },
+		isNewDigitalBuyFlowConsent: { control: 'boolean' },
+		hideConfirmTermsAndConditions: { control: 'boolean' },
 	},
 };
 
 export const Basic = (args) => <AcceptTerms {...args} />;
-Basic.parameters = {};
+Basic.args = {};
+
+export const NewBuyFlow = (args) => <AcceptTerms {...args} />;
+NewBuyFlow.args = {
+	isAuthFirstAccount: true,
+};
+
+export const NewBuyFlowEmailVerification = (args) => <AcceptTerms {...args} />;
+NewBuyFlowEmailVerification.args = {
+	isAuthFirstAccount: true,
+	hideConfirmTermsAndConditions: true,
+};

package/components/b2c-partnership-confirmation.jsx

@@ -19,7 +19,7 @@ export function B2CPartnershipConfirmation ({ ctaElement = null }) {
 				<div className="ncf__paragraph">
 					{
 						<h1 className="ncf__header ncf__header--confirmation">
-							{'Welcome to your three months\' Premium access'}
+							{'Welcome to your 30 days\' Premium access'}
 						</h1>
 					}
 				</div>

package/components/confirmation.jsx

@@ -7,6 +7,7 @@ export function Confirmation ({
 	// isTrial prop is needed for the floodlight pixel tracking.
 	isTrial = false,
 	isB2cPartnership = false,
+	b2cPartnershipCopy = [],
 	offer = '',
 	email = EMAIL_DEFAULT_TEXT,
 	details = null,
@@ -19,6 +20,8 @@ export function Confirmation ({
 		...(isTrial && { 'data-signup-is-trial': 'true' }),
 	};
 
+	const isB2cPartnershipCopyAvailable = isB2cPartnership && b2cPartnershipCopy.length > 0;
+
 	const detailElements = details && (
 		<React.Fragment>
 			<h2 className="ncf__header2--afterline">Your billing details</h2>
@@ -63,15 +66,18 @@ export function Confirmation ({
 			</div>
 
 			{nextActionTop}
+			{!isB2cPartnershipCopyAvailable && (
+				<p className="ncf__paragraph">
+					We’ve sent confirmation to {email}. Make sure you check your spam folder
+					if you don’t receive it.
+				</p>
+			)}
 
-			<p className="ncf__paragraph">
-				We’ve sent confirmation to {email}. Make sure you check your spam folder
-				if you don’t receive it.
-			</p>
-			{isB2cPartnership ? (
-				<p>
-					We&apos;ve also sent you an email to start your 90-day All Access
-					Digital subscription with The Washington Post.
+			{isB2cPartnershipCopyAvailable ? (
+				<p className="ncf__paragraph">
+					{b2cPartnershipCopy[0]}
+					<span className="ncf__legend">{` ${email}. `}</span>
+					{b2cPartnershipCopy[1]}
 				</p>
 			) : (
 				''
@@ -126,6 +132,7 @@ export function Confirmation ({
 Confirmation.propTypes = {
 	isTrial: PropTypes.bool,
 	isB2cPartnership: PropTypes.bool,
+	b2cPartnershipCopy: PropTypes.array,
 	offer: PropTypes.string.isRequired,
 	email: PropTypes.string,
 	details: PropTypes.arrayOf(

package/components/confirmation.spec.js

@@ -21,7 +21,7 @@ describe('Confirmation', () => {
 	});
 
 	it('renders appropriately if is B2C Partnership', () => {
-		const props = { isB2cPartnership: true };
+		const props = { isB2cPartnership: true, b2cDiscountCopy: ['Send email'] };
 
 		expect(Confirmation).toRenderCorrectly(props);
 	});

package/components/debug.jsx

@@ -8,18 +8,19 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	// entirely this component should be rethought.
 	const testEnvironment = `
 		<span class="ncf__debug-environment">
-			<a class="ncf__button ncf__button--inverse ncf__debug-button--test" onclick="setTestEnvironment('off');"><strong>TEST</strong> relax you are using the test API</a>
+			<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>
 		</span>
 	`;
 	const productionEnvironment = `
 		<span class="ncf__debug-environment">
-			<a class="ncf__button ncf__button--inverse ncf__debug-button--production" onclick="setTestEnvironment('on');"><strong>PRODUCTION</strong> careful you are using the production API</a>
+			<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>
 		</span>
 	`;
 	const testCards = `
-		<button id="ncf-copy-uk-visa" class="ncf__button ncf__button--inverse" onclick="copyToClipboard('ukVisa');" title="Copy UK Visa card number to clipboard">UK Visa</button>
-		<button id="ncf-copy-us-visa" class="ncf__button ncf__button--inverse" onclick="copyToClipboard('usVisa');" title="Copy US Visa card number to clipboard">US Visa</button>
-		<button id="ncf-copy-us-amex" class="ncf__button ncf__button--inverse" onclick="copyToClipboard('usAmex');" title="Copy US Amex card number to clipboard">US Amex</button>
+		<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 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>
 	`;
 	const linksString = Object.keys(links).map(
 		(link) =>
@@ -27,9 +28,9 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	);
 	const helpers = `
 		<span class="ncf__debug-helpers">
-			<button class="ncf__button ncf__button--inverse" onclick="logout();" title="Logout and refresh">Logout</button>
-			<button class="ncf__button ncf__button--inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
-			<button class="ncf__button ncf__button--inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
+			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="logout();" title="Logout and refresh">Logout</button>
+			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
+			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
 			${isTest ? testCards : ''}
 			${links.length ? linksString : ''}
 		</span>
@@ -55,7 +56,7 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 		GBR: 'EC4M9BT',
 		USA: '10028',
 		CAN: 'K0E 9Z9'
-	}
+	};
 
 	var debugData = {
 		billingCity: 'London',
@@ -79,9 +80,12 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 		postCode: postcodeByCountry[COUNTRY_CODE],
 		primaryTelephone: '0987654321',
 		responsibility: 'ADL',
-		ukVisa: '4111111111111111',
+		ukVisaWorldpay: '4111111111111111',
 		usAmex: '378282246310005',
-		usVisa: '4112344112344113'
+		usVisaWorldpay: '4112344112344113',
+		checkoutVisa: '4242424242424242',
+		checkout3dsChallenge: 'Checkout1!',
+		chaseVisa: '4011361100000010',
 	};
 
 	function logout () {
@@ -100,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);
@@ -157,6 +161,9 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	.ncf__debug-button--production {
 		background-color: #990000;
 	}
+	.ncf__button--debug {
+		padding: 0px 5px;
+	}
 	`,
 	};
 

package/components/debug.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Debug } from './debug';
+
+export default {
+	title: 'Debug helpers',
+	component: Debug,
+};
+
+export const Basic = (args) => <Debug {...args} />;
+Basic.args = {
+	isTest: true,
+	showHelpers: true,
+};

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,
 			},
 		},
 	},