@financial-times/n-conversion-forms 39.0.0 → 39.2.0

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "78ce79e3d5055df8040fdc1e567d8b873a2b42fb",
-  "tag": "v39.0.0"
+  "version": "6b38e46e4b26d1c996751c0fe4a2ffcd8b6fecb6",
+  "tag": "v39.2.0"
 }

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

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DeliveryOption renders a print offer HD for LUX country 1`] = `
+<div id="deliveryOptionField"
+     class="o-forms-field ncf__delivery-option"
+     role="group"
+     aria-label="Delivery options"
+>
+  <span class="o-forms-input o-forms-input--radio-round">
+    <label class="ncf__delivery-option__item"
+           for="HD"
+    >
+      <input type="radio"
+             id="HD"
+             name="deliveryOption"
+             value="HD"
+             class="ncf__delivery-option__input"
+             checked
+      >
+      <span class="o-forms-input__label ncf__delivery-option__label">
+        <span class="ncf__delivery-option__title o-forms-title__main">
+          Hand delivery
+        </span>
+        <div class="ncf__delivery-option__description">
+          Enjoy delivery of the newspaper daily to your home or office address.
+        </div>
+      </span>
+    </label>
+  </span>
+</div>
+`;
+
 exports[`DeliveryOption renders with USA print offer 1`] = `
 <div id="deliveryOptionField"
      class="o-forms-field ncf__delivery-option"

package/components/__snapshots__/registration-confirmation.spec.js.snap

@@ -249,3 +249,161 @@ exports[`RegistrationConfirmation renders with default props 1`] = `
   </a>
 </div>
 `;
+
+exports[`RegistrationConfirmation renders with subscription finder banner 1`] = `
+<div class="ncf">
+  <div class="ncf__center ncf__margin">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <h1 class="ncf__header ncf__header--confirmation">
+      Success
+    </h1>
+    <p class="ncf__confirmation--message">
+      We’ve sent confirmation to your email.
+    </p>
+  </div>
+  <div class="ncf__confirmation__professional-subscription-check-banner"
+       data-trackable="professional-subscription-check-banner"
+  >
+    <div class="ncf__confirmation__professional-subscription-check-banner-header">
+      <h2 class="ncf__confirmation__professional-subscription-check-banner-title">
+        See if you can join the FT through your organisation
+      </h2>
+      <p class="ncf__confirmation__professional-subscription-check-banner-text">
+        Your email address matches the domain we have for an FT Professional subscription. This means your organisation may have an FT subscription you can join for free.
+      </p>
+    </div>
+    <ul class="ncf__confirmation__professional-subscription-check-banner-checklist">
+      <li class="ncf__confirmation__professional-subscription-check-banner-checklist-item">
+        Get the
+        <b class="ncf__confirmation__professional-subscription-check-banner-text--bold">
+          FT for free
+        </b>
+        through your organisation
+      </li>
+      <li class="ncf__confirmation__professional-subscription-check-banner-checklist-item">
+        Full access to Standard FT content
+      </li>
+      <li class="ncf__confirmation__professional-subscription-check-banner-checklist-item">
+        Unlimited access to Premium content and newsletters
+      </li>
+    </ul>
+    <a href="https://example.com"
+       class="ncf__button ncf__button--professional-inverse"
+       data-trackable="professional-subscription-check-banner-request"
+    >
+      Check if your organisation subscribes
+    </a>
+  </div>
+  <div class="ncf__divider-horizontal">
+  </div>
+  <div class="ncf__confirmation--links ncf__margin">
+    <div class="ncf__confirmation--socials">
+      <b>
+        Breaking news alerts, direct to your lock screen
+      </b>
+      <p class="ncf__confirmation--mobile">
+        Download our apps or follow us on our socials
+      </p>
+      <p class="ncf__confirmation--desktop">
+        Find us in the app and google play stores or follow us on our socials
+      </p>
+      <div class="ncf__confirmation--badges">
+        <div class="o-social-follow"
+             aria-label="Follow on social media"
+        >
+          <a href="https://www.instagram.com/financialtimes"
+             class="o-social-follow-icon o-social-follow-icon--instagram"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-instagram"
+          >
+            <span class="o-social-follow-icon__label">
+              on instagram
+            </span>
+          </a>
+          <a href="https://www.linkedin.com/company/financial-times"
+             class="o-social-follow-icon o-social-follow-icon--linkedin"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-linkedin"
+          >
+            <span class="o-social-follow-icon__label">
+              on linkedin
+            </span>
+          </a>
+          <a href="https://twitter.com/FT"
+             class="o-social-follow-icon o-social-follow-icon--twitter"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-twitter"
+          >
+            <span class="o-social-follow-icon__label">
+              on twitter
+            </span>
+          </a>
+          <a href="https://www.facebook.com/financialtimes"
+             class="o-social-follow-icon o-social-follow-icon--facebook"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-facebook"
+          >
+            <span class="o-social-follow-icon__label">
+              on facebook
+            </span>
+          </a>
+        </div>
+        <div class="ncf__confirmation--mobile ncf__confirmation--app-badges"
+             aria-label="Download the app"
+        >
+          <a href="https://apps.apple.com/app/apple-store/id1200842933"
+             class="ncf-icon ncf-icon--apple"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-app-apple"
+          >
+            <span class="o-social-follow-icon__label">
+              on apple
+            </span>
+          </a>
+          <a href="https://play.google.com/store/apps/details?id=com.ft.news"
+             class="ncf-icon ncf-icon--android"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-app-android"
+          >
+            <span class="o-social-follow-icon__label">
+              on android
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="ncf__confirmation--alerts">
+      <b>
+        Set up email alerts in
+        <span aria-label="myFT"
+              class="ncf-icon ncf-icon--myft"
+        >
+        </span>
+      </b>
+      <p>
+        Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
+      </p>
+      <a href="/myft"
+         class="margin-top-x4 ncf__button ncf__button--secondary"
+         data-trackable="register-personalise-my-alerts"
+      >
+        Personalise my alerts
+      </a>
+    </div>
+  </div>
+  <a href="/"
+     target="_parent"
+     class="ncf__confirmation--finish ncf__button ncf__button--submit"
+     data-trackable="register-finish"
+  >
+    Start reading
+  </a>
+</div>
+`;

package/components/delivery-address.jsx

@@ -7,10 +7,7 @@ import {
 	addressLine2AutoComplete,
 	addressLine3AutoComplete,
 } from '../helpers/constants';
-import {
-	identifyFTShippingZone,
-	countriesSupportedISO,
-} from '../helpers/supportedCountries';
+import { identifyShippingZone } from '../helpers/supportedCountries';
 
 export function DeliveryAddress({
 	fieldId = 'deliveryAddressFields',
@@ -29,7 +26,7 @@ export function DeliveryAddress({
 		'o-forms-input--text',
 		{ 'o-forms-input--invalid': hasError },
 	]);
-	const FTShippingZone = identifyFTShippingZone(country);
+	const shippingZone = identifyShippingZone(country);
 
 	const addressLine1 = (
 		<label
@@ -38,7 +35,7 @@ export function DeliveryAddress({
 		>
 			<span className="o-forms-title">
 				<span className="o-forms-title__main">
-					{deliveryAddressMap[addressType].addressLine1Title[FTShippingZone] ||
+					{deliveryAddressMap[addressType].addressLine1Title[shippingZone] ||
 						'Address line 1'}
 				</span>
 			</span>
@@ -51,8 +48,8 @@ export function DeliveryAddress({
 					autoComplete={addressLine1AutoComplete}
 					placeholder={
 						deliveryAddressMap[addressType].addressLine1Placeholder[
-							FTShippingZone
-						]
+							shippingZone
+						] || ''
 					}
 					maxLength={50}
 					aria-required="true"
@@ -83,12 +80,12 @@ export function DeliveryAddress({
 					data-trackable="field-deliveryAddressLine2"
 					autoComplete={
 						deliveryAddressMap[addressType].addressLine2AutoComplete[
-							FTShippingZone
+							shippingZone
 						] || addressLine2AutoComplete
 					}
 					placeholder={
 						deliveryAddressMap[addressType].addressLine2Placeholder[
-							FTShippingZone
+							shippingZone
 						] || ''
 					}
 					maxLength={50}
@@ -106,10 +103,10 @@ export function DeliveryAddress({
 		>
 			<span className="o-forms-title">
 				<span className="o-forms-title__main">
-					{deliveryAddressMap[addressType].addressLine3Title[FTShippingZone]}
+					{deliveryAddressMap[addressType].addressLine3Title[shippingZone]}
 				</span>
 				<span className="o-forms-title__prompt">
-					{deliveryAddressMap[addressType].addressLine3Prompt[FTShippingZone]}
+					{deliveryAddressMap[addressType].addressLine3Prompt[shippingZone]}
 				</span>
 			</span>
 			<span className={inputWrapperClassNames}>
@@ -120,12 +117,12 @@ export function DeliveryAddress({
 					data-trackable="field-deliveryAddressLine3"
 					autoComplete={
 						deliveryAddressMap[addressType].addressLine3AutoComplete[
-							FTShippingZone
+							shippingZone
 						] || addressLine3AutoComplete
 					}
 					placeholder={
 						deliveryAddressMap[addressType].addressLine3Placeholder[
-							FTShippingZone
+							shippingZone
 						] || 'e.g. Apt. 1'
 					}
 					maxLength={
@@ -141,7 +138,7 @@ export function DeliveryAddress({
 		addressLine1,
 		addressLine2,
 		addressLine3,
-		FTShippingZone
+		shippingZone
 	);
 
 	return (
@@ -159,6 +156,6 @@ DeliveryAddress.propTypes = {
 	line3: PropTypes.string,
 	isDisabled: PropTypes.bool,
 	isHidden: PropTypes.bool,
-	country: PropTypes.oneOf(countriesSupportedISO),
+	country: PropTypes.string,
 	addressType: PropTypes.oneOf(['home', 'company', 'pobox']),
 };

package/components/delivery-city.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {
-	countriesSupportedISO,
-	identifyFTShippingZone,
-} from '../helpers/supportedCountries';
+import { identifyShippingZone } from '../helpers/supportedCountries';
 
 export function DeliveryCity({
 	hasError = false,
@@ -24,15 +21,15 @@ export function DeliveryCity({
 		CAN: 'e.g. Montreal',
 		ARE: 'e.g. Dubai',
 	};
-	const FTShippingZone = identifyFTShippingZone(country);
+	const shippingZone = identifyShippingZone(country);
 
 	const labelMapping = {
 		ARE: 'Emirate or City',
 		APAC: 'City/Prefecture',
 		DEFAULT: 'City',
 	};
-	const inputLabel = labelMapping[FTShippingZone]
-		? labelMapping[FTShippingZone]
+	const inputLabel = labelMapping[shippingZone]
+		? labelMapping[shippingZone]
 		: labelMapping['DEFAULT'];
 
 	return (
@@ -72,5 +69,5 @@ DeliveryCity.propTypes = {
 	value: PropTypes.string,
 	isDisabled: PropTypes.bool,
 	maxlength: PropTypes.number,
-	country: PropTypes.oneOf(countriesSupportedISO),
+	country: PropTypes.string,
 };

package/components/delivery-instructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { identifyFTShippingZone } from '../helpers/supportedCountries';
+import { identifyShippingZone } from '../helpers/supportedCountries';
 
 const spanMessageByCountry = {
 	GBR: (
@@ -99,7 +99,7 @@ export function DeliveryInstructions({
 	fieldId = 'deliveryInstructionsField',
 	hasError = false,
 	inputId = 'deliveryInstructions',
-	maxlength = null,
+	maxlength = '',
 	rows = null,
 	isDisabled = false,
 	placeholder = '',
@@ -111,12 +111,12 @@ export function DeliveryInstructions({
 		'o-forms-input--textarea',
 		{ 'o-forms-input--invalid': hasError },
 	]);
-	const FTShippingZone = identifyFTShippingZone(country);
+	const shippingZone = identifyShippingZone(country);
 	const extraInstruction =
 		country === 'GBR'
 			? ''
 			: '\u000a- Special handling, e.g. place in plastic bag, 24/7 security on reception';
-	const defaultPlaceholder = {
+	const shippingZoneToPlaceholderMap = {
 		CEMEA_V1: `Enter instructions ${
 			maxlength && `(Max. ${maxlength} characters)`
 		}:\u000a- Door colour, letterbox location\u000a- Door entry codes, etc.`,
@@ -134,13 +134,20 @@ export function DeliveryInstructions({
 		}:\u000a- Door colour, driveway signage\u000a- Cross street${extraInstruction}`,
 	};
 
+	const defaultPlaceholder = `Enter instructions ${
+		maxlength && `(Max. ${maxlength} characters)`
+	}:\u000a- Door colour, letterbox location\u000a- Door entry codes, etc.`;
+
 	const textAreaProps = {
 		id: inputId,
 		name: inputId,
 		...(maxlength && { maxLength: maxlength }),
 		...(rows && { rows }),
 		'data-trackable': 'field-deliveryInstructions',
-		placeholder: placeholder ? placeholder : defaultPlaceholder[FTShippingZone],
+		placeholder:
+			placeholder ||
+			shippingZoneToPlaceholderMap[shippingZone] ||
+			defaultPlaceholder,
 		disabled: isDisabled,
 		defaultValue: value,
 	};
@@ -160,7 +167,7 @@ export function DeliveryInstructions({
 		>
 			<span className="o-forms-title">
 				<span className="o-forms-title__main">Delivery instructions</span>
-				{spanMessageByCountry[FTShippingZone]}
+				{spanMessageByCountry[shippingZone]}
 				{country === 'GBR' && deliveryInstructionsMessage}
 			</span>
 
@@ -177,5 +184,5 @@ DeliveryInstructions.propTypes = {
 	rows: PropTypes.number,
 	isDisabled: PropTypes.bool,
 	value: PropTypes.string,
-	country: PropTypes.oneOf(['GBR', 'USA', 'CAN']).isRequired,
+	country: PropTypes.string.isRequired,
 };

package/components/delivery-instructions.stories.js

@@ -10,17 +10,38 @@ export default {
 	},
 };
 
-export const Basic = (args) => <DeliveryInstructions {...args} />;
-Basic.args = {
+export const GreatBritainDeliveryInstructions = (args) => (
+	<DeliveryInstructions {...args} />
+);
+GreatBritainDeliveryInstructions.args = {
 	country: 'GBR',
+	maxlength: 50,
 };
 
-export const SpanMessageForUSA = (args) => <DeliveryInstructions {...args} />;
-SpanMessageForUSA.args = {
+export const UnitedStatesDeliveryInstructions = (args) => (
+	<DeliveryInstructions {...args} />
+);
+UnitedStatesDeliveryInstructions.args = {
 	country: 'USA',
 };
 
-export const SpanMessageForCAN = (args) => <DeliveryInstructions {...args} />;
-SpanMessageForCAN.args = {
+export const CanadaDeliveryInstructions = (args) => (
+	<DeliveryInstructions {...args} />
+);
+CanadaDeliveryInstructions.args = {
 	country: 'CAN',
 };
+
+export const LuxembourgDeliveryInstructions = (args) => (
+	<DeliveryInstructions {...args} />
+);
+LuxembourgDeliveryInstructions.args = {
+	country: 'LUX',
+};
+
+export const BosniaDeliveryInstructions = (args) => (
+	<DeliveryInstructions {...args} />
+);
+BosniaDeliveryInstructions.args = {
+	country: 'BIH',
+};

package/components/delivery-option.jsx

@@ -2,10 +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';
+import { identifyShippingZone } from '../helpers/supportedCountries';
 
 export function DeliveryOption({
 	fieldId = 'deliveryOptionField',
@@ -20,7 +17,7 @@ export function DeliveryOption({
 		{ 'ncf__delivery-option--single': isSingle },
 	]);
 
-	const shippingZone = identifyFTShippingZone(countryCode);
+	const shippingZone = identifyShippingZone(countryCode);
 
 	return (
 		<div
@@ -87,7 +84,7 @@ export function DeliveryOption({
 }
 
 DeliveryOption.propTypes = {
-	country: PropTypes.oneOf(countriesSupportedISO).isRequired,
+	country: PropTypes.string.isRequired,
 	productCode: PropTypes.string,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({

package/components/delivery-option.spec.js

@@ -128,4 +128,23 @@ describe('DeliveryOption', () => {
 
 		expect(DeliveryOption).toRenderCorrectly(props);
 	});
+
+	it('renders a print offer HD for LUX country', () => {
+		const props = {
+			country: 'LUX',
+			productCode: 'EPNWE',
+			options: [
+				{
+					value: 'HD',
+					isSelected: true,
+					isValidDeliveryOption: true,
+					deliveryOnPublicationDate: false,
+					flightMarket: true,
+					mailDelivery: false,
+				},
+			],
+		};
+
+		expect(DeliveryOption).toRenderCorrectly(props);
+	});
 });

package/components/delivery-option.stories.js

@@ -104,3 +104,23 @@ JapanDeliveryOptions.args = {
 		},
 	],
 };
+
+export const LuxembourgDeliveryOptions = (args) => (
+	<div className="ncf">
+		<DeliveryOption {...args} />
+	</div>
+);
+LuxembourgDeliveryOptions.args = {
+	country: 'LUX',
+	productCode: 'EPNWE',
+	options: [
+		{
+			value: 'HD',
+			isSelected: true,
+			isValidDeliveryOption: true,
+			deliveryOnPublicationDate: false,
+			flightMarket: true,
+			mailDelivery: false,
+		},
+	],
+};

package/components/registration-confirmation.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const EMAIL_DEFAULT_TEXT = 'your email';
+const DEFAULT_PROFESSIONAL_SUBSCRIPTION_CHECK_REQUEST_URL =
+	'https://find-your-subscription.ft.com/request';
 
 const SOCIALS = [
 	{
@@ -35,6 +37,8 @@ const STORES = [
 
 export function RegistrationConfirmation({
 	email = EMAIL_DEFAULT_TEXT,
+	showProfessionalSubscriptionCheckBanner = false,
+	professionalSubscriptionCheckRequestUrl = DEFAULT_PROFESSIONAL_SUBSCRIPTION_CHECK_REQUEST_URL,
 	returnUrl = '/',
 }) {
 	return (
@@ -47,6 +51,48 @@ export function RegistrationConfirmation({
 				</p>
 			</div>
 
+			{showProfessionalSubscriptionCheckBanner && (
+				<div
+					className="ncf__confirmation__professional-subscription-check-banner"
+					data-trackable="professional-subscription-check-banner"
+				>
+					<div className="ncf__confirmation__professional-subscription-check-banner-header">
+						<h2 className="ncf__confirmation__professional-subscription-check-banner-title">
+							See if you can join the FT through your organisation
+						</h2>
+						<p className="ncf__confirmation__professional-subscription-check-banner-text">
+							Your email address matches the domain we have for an FT
+							Professional subscription. This means your organisation may have
+							an FT subscription you can join for free.
+						</p>
+					</div>
+
+					<ul className="ncf__confirmation__professional-subscription-check-banner-checklist">
+						<li className="ncf__confirmation__professional-subscription-check-banner-checklist-item">
+							Get the{' '}
+							<b className="ncf__confirmation__professional-subscription-check-banner-text--bold">
+								FT for free
+							</b>{' '}
+							through your organisation
+						</li>
+						<li className="ncf__confirmation__professional-subscription-check-banner-checklist-item">
+							Full access to Standard FT content
+						</li>
+						<li className="ncf__confirmation__professional-subscription-check-banner-checklist-item">
+							Unlimited access to Premium content and newsletters
+						</li>
+					</ul>
+
+					<a
+						href={professionalSubscriptionCheckRequestUrl}
+						className="ncf__button ncf__button--professional-inverse"
+						data-trackable="professional-subscription-check-banner-request"
+					>
+						Check if your organisation subscribes
+					</a>
+				</div>
+			)}
+
 			<div className="ncf__divider-horizontal" />
 
 			<div className="ncf__confirmation--links ncf__margin">
@@ -130,4 +176,6 @@ export function RegistrationConfirmation({
 
 RegistrationConfirmation.propTypes = {
 	email: PropTypes.string,
+	showProfessionalSubscriptionCheckBanner: PropTypes.bool,
+	professionalSubscriptionCheckRequestUrl: PropTypes.string,
 };

package/components/registration-confirmation.spec.js

@@ -15,4 +15,13 @@ describe('RegistrationConfirmation', () => {
 
 		expect(RegistrationConfirmation).toRenderCorrectly(props);
 	});
+
+	it('renders with subscription finder banner', () => {
+		const props = {
+			showProfessionalSubscriptionCheckBanner: true,
+			professionalSubscriptionCheckRequestUrl: 'https://example.com',
+		};
+
+		expect(RegistrationConfirmation).toRenderCorrectly(props);
+	});
 });

package/components/registration-confirmation.stories.js

@@ -8,3 +8,11 @@ export default {
 
 export const Basic = (args) => <RegistrationConfirmation {...args} />;
 Basic.args = {};
+
+export const WithProfessionalSubscriptionCheckBanner = (args) => (
+	<RegistrationConfirmation {...args} />
+);
+WithProfessionalSubscriptionCheckBanner.args = {
+	...Basic.args,
+	showProfessionalSubscriptionCheckBanner: true,
+};

package/dist/delivery-address.jsx

@@ -36,7 +36,7 @@ function DeliveryAddress(_ref) {
   var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
     'o-forms-input--invalid': hasError
   }]);
-  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
+  var shippingZone = (0, _supportedCountries.identifyShippingZone)(country);
   var addressLine1 = /*#__PURE__*/_react["default"].createElement("label", {
     className: "o-forms-field ncf__validation-error",
     htmlFor: "deliveryAddressLine1"
@@ -44,7 +44,7 @@ function DeliveryAddress(_ref) {
     className: "o-forms-title"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__main"
-  }, _deliveryAddressMap["default"][addressType].addressLine1Title[FTShippingZone] || 'Address line 1')), /*#__PURE__*/_react["default"].createElement("span", {
+  }, _deliveryAddressMap["default"][addressType].addressLine1Title[shippingZone] || 'Address line 1')), /*#__PURE__*/_react["default"].createElement("span", {
     className: inputWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
@@ -52,7 +52,7 @@ function DeliveryAddress(_ref) {
     name: "deliveryAddressLine1",
     "data-trackable": "field-deliveryAddressLine1",
     autoComplete: _constants.addressLine1AutoComplete,
-    placeholder: _deliveryAddressMap["default"][addressType].addressLine1Placeholder[FTShippingZone],
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine1Placeholder[shippingZone] || '',
     maxLength: 50,
     "aria-required": "true",
     required: true,
@@ -75,8 +75,8 @@ function DeliveryAddress(_ref) {
     id: "deliveryAddressLine2",
     name: "deliveryAddressLine2",
     "data-trackable": "field-deliveryAddressLine2",
-    autoComplete: _deliveryAddressMap["default"][addressType].addressLine2AutoComplete[FTShippingZone] || _constants.addressLine2AutoComplete,
-    placeholder: _deliveryAddressMap["default"][addressType].addressLine2Placeholder[FTShippingZone] || '',
+    autoComplete: _deliveryAddressMap["default"][addressType].addressLine2AutoComplete[shippingZone] || _constants.addressLine2AutoComplete,
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine2Placeholder[shippingZone] || '',
     maxLength: 50,
     disabled: isDisabled,
     defaultValue: line2
@@ -88,22 +88,22 @@ function DeliveryAddress(_ref) {
     className: "o-forms-title"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__main"
-  }, _deliveryAddressMap["default"][addressType].addressLine3Title[FTShippingZone]), /*#__PURE__*/_react["default"].createElement("span", {
+  }, _deliveryAddressMap["default"][addressType].addressLine3Title[shippingZone]), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__prompt"
-  }, _deliveryAddressMap["default"][addressType].addressLine3Prompt[FTShippingZone])), /*#__PURE__*/_react["default"].createElement("span", {
+  }, _deliveryAddressMap["default"][addressType].addressLine3Prompt[shippingZone])), /*#__PURE__*/_react["default"].createElement("span", {
     className: inputWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     id: "deliveryAddressLine3",
     name: "deliveryAddressLine3",
     "data-trackable": "field-deliveryAddressLine3",
-    autoComplete: _deliveryAddressMap["default"][addressType].addressLine3AutoComplete[FTShippingZone] || _constants.addressLine3AutoComplete,
-    placeholder: _deliveryAddressMap["default"][addressType].addressLine3Placeholder[FTShippingZone] || 'e.g. Apt. 1',
+    autoComplete: _deliveryAddressMap["default"][addressType].addressLine3AutoComplete[shippingZone] || _constants.addressLine3AutoComplete,
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine3Placeholder[shippingZone] || 'e.g. Apt. 1',
     maxLength: _deliveryAddressMap["default"][addressType].addressLine3MaxLength[country] || 50,
     disabled: isDisabled,
     defaultValue: line3
   })));
-  var addressLines = _deliveryAddressMap["default"][addressType].template(addressLine1, addressLine2, addressLine3, FTShippingZone);
+  var addressLines = _deliveryAddressMap["default"][addressType].template(addressLine1, addressLine2, addressLine3, shippingZone);
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     "data-validate": "required",
@@ -118,6 +118,6 @@ DeliveryAddress.propTypes = {
   line3: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,
   isHidden: _propTypes["default"].bool,
-  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO),
+  country: _propTypes["default"].string,
   addressType: _propTypes["default"].oneOf(['home', 'company', 'pobox'])
 };

package/dist/delivery-city.jsx

@@ -27,13 +27,13 @@ function DeliveryCity(_ref) {
     CAN: 'e.g. Montreal',
     ARE: 'e.g. Dubai'
   };
-  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
+  var shippingZone = (0, _supportedCountries.identifyShippingZone)(country);
   var labelMapping = {
     ARE: 'Emirate or City',
     APAC: 'City/Prefecture',
     DEFAULT: 'City'
   };
-  var inputLabel = labelMapping[FTShippingZone] ? labelMapping[FTShippingZone] : labelMapping['DEFAULT'];
+  var inputLabel = labelMapping[shippingZone] ? labelMapping[shippingZone] : labelMapping['DEFAULT'];
   return /*#__PURE__*/_react["default"].createElement("label", {
     id: "deliveryCityField",
     className: "o-forms-field ncf__validation-error",
@@ -66,5 +66,5 @@ DeliveryCity.propTypes = {
   value: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,
   maxlength: _propTypes["default"].number,
-  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO)
+  country: _propTypes["default"].string
 };

package/dist/delivery-instructions.jsx

@@ -62,7 +62,7 @@ function DeliveryInstructions(_ref) {
     _ref$inputId = _ref.inputId,
     inputId = _ref$inputId === void 0 ? 'deliveryInstructions' : _ref$inputId,
     _ref$maxlength = _ref.maxlength,
-    maxlength = _ref$maxlength === void 0 ? null : _ref$maxlength,
+    maxlength = _ref$maxlength === void 0 ? '' : _ref$maxlength,
     _ref$rows = _ref.rows,
     rows = _ref$rows === void 0 ? null : _ref$rows,
     _ref$isDisabled = _ref.isDisabled,
@@ -75,15 +75,16 @@ function DeliveryInstructions(_ref) {
   var textAreaWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--textarea', {
     'o-forms-input--invalid': hasError
   }]);
-  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
+  var shippingZone = (0, _supportedCountries.identifyShippingZone)(country);
   var extraInstruction = country === 'GBR' ? '' : "\n- Special handling, e.g. place in plastic bag, 24/7 security on reception";
-  var defaultPlaceholder = {
+  var shippingZoneToPlaceholderMap = {
     CEMEA_V1: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc."),
     CEMEA_V2: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc."),
     GBR: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Placement i.e. letterbox delivery").concat(extraInstruction),
     USA: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, driveway signage\n- Cross street").concat(extraInstruction),
     CAN: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, driveway signage\n- Cross street").concat(extraInstruction)
   };
+  var defaultPlaceholder = "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc.");
   var textAreaProps = _objectSpread(_objectSpread(_objectSpread({
     id: inputId,
     name: inputId
@@ -93,7 +94,7 @@ function DeliveryInstructions(_ref) {
     rows: rows
   }), {}, {
     'data-trackable': 'field-deliveryInstructions',
-    placeholder: placeholder ? placeholder : defaultPlaceholder[FTShippingZone],
+    placeholder: placeholder || shippingZoneToPlaceholderMap[shippingZone] || defaultPlaceholder,
     disabled: isDisabled,
     defaultValue: value
   });
@@ -109,7 +110,7 @@ function DeliveryInstructions(_ref) {
     className: "o-forms-title"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__main"
-  }, "Delivery instructions"), spanMessageByCountry[FTShippingZone], country === 'GBR' && deliveryInstructionsMessage), /*#__PURE__*/_react["default"].createElement("span", {
+  }, "Delivery instructions"), spanMessageByCountry[shippingZone], country === 'GBR' && deliveryInstructionsMessage), /*#__PURE__*/_react["default"].createElement("span", {
     className: textAreaWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("textarea", textAreaProps)));
 }
@@ -119,5 +120,5 @@ DeliveryInstructions.propTypes = {
   rows: _propTypes["default"].number,
   isDisabled: _propTypes["default"].bool,
   value: _propTypes["default"].string,
-  country: _propTypes["default"].oneOf(['GBR', 'USA', 'CAN']).isRequired
+  country: _propTypes["default"].string.isRequired
 };

package/dist/delivery-option.jsx

@@ -23,7 +23,7 @@ function DeliveryOption(_ref) {
   var divClassName = (0, _classnames["default"])(['o-forms-field', 'ncf__delivery-option', {
     'ncf__delivery-option--single': isSingle
   }]);
-  var shippingZone = (0, _supportedCountries.identifyFTShippingZone)(countryCode);
+  var shippingZone = (0, _supportedCountries.identifyShippingZone)(countryCode);
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     className: divClassName,
@@ -72,7 +72,7 @@ function DeliveryOption(_ref) {
   })));
 }
 DeliveryOption.propTypes = {
-  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO).isRequired,
+  country: _propTypes["default"].string.isRequired,
   productCode: _propTypes["default"].string,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     value: _propTypes["default"].oneOf(['PV', 'HD', 'EV']),

package/dist/registration-confirmation.jsx

@@ -8,6 +8,7 @@ exports.RegistrationConfirmation = RegistrationConfirmation;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var EMAIL_DEFAULT_TEXT = 'your email';
+var DEFAULT_PROFESSIONAL_SUBSCRIPTION_CHECK_REQUEST_URL = 'https://find-your-subscription.ft.com/request';
 var SOCIALS = [{
   name: 'instagram',
   link: 'https://www.instagram.com/financialtimes'
@@ -31,6 +32,10 @@ var STORES = [{
 function RegistrationConfirmation(_ref) {
   var _ref$email = _ref.email,
     email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
+    _ref$showProfessional = _ref.showProfessionalSubscriptionCheckBanner,
+    showProfessionalSubscriptionCheckBanner = _ref$showProfessional === void 0 ? false : _ref$showProfessional,
+    _ref$professionalSubs = _ref.professionalSubscriptionCheckRequestUrl,
+    professionalSubscriptionCheckRequestUrl = _ref$professionalSubs === void 0 ? DEFAULT_PROFESSIONAL_SUBSCRIPTION_CHECK_REQUEST_URL : _ref$professionalSubs,
     _ref$returnUrl = _ref.returnUrl,
     returnUrl = _ref$returnUrl === void 0 ? '/' : _ref$returnUrl;
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -43,7 +48,30 @@ function RegistrationConfirmation(_ref) {
     className: "ncf__header ncf__header--confirmation"
   }, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__confirmation--message"
-  }, "We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "We\u2019ve sent confirmation to ", email, ".")), showProfessionalSubscriptionCheckBanner && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation__professional-subscription-check-banner",
+    "data-trackable": "professional-subscription-check-banner"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation__professional-subscription-check-banner-header"
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "ncf__confirmation__professional-subscription-check-banner-title"
+  }, "See if you can join the FT through your organisation"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation__professional-subscription-check-banner-text"
+  }, "Your email address matches the domain we have for an FT Professional subscription. This means your organisation may have an FT subscription you can join for free.")), /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "ncf__confirmation__professional-subscription-check-banner-checklist"
+  }, /*#__PURE__*/_react["default"].createElement("li", {
+    className: "ncf__confirmation__professional-subscription-check-banner-checklist-item"
+  }, "Get the", ' ', /*#__PURE__*/_react["default"].createElement("b", {
+    className: "ncf__confirmation__professional-subscription-check-banner-text--bold"
+  }, "FT for free"), ' ', "through your organisation"), /*#__PURE__*/_react["default"].createElement("li", {
+    className: "ncf__confirmation__professional-subscription-check-banner-checklist-item"
+  }, "Full access to Standard FT content"), /*#__PURE__*/_react["default"].createElement("li", {
+    className: "ncf__confirmation__professional-subscription-check-banner-checklist-item"
+  }, "Unlimited access to Premium content and newsletters")), /*#__PURE__*/_react["default"].createElement("a", {
+    href: professionalSubscriptionCheckRequestUrl,
+    className: "ncf__button ncf__button--professional-inverse",
+    "data-trackable": "professional-subscription-check-banner-request"
+  }, "Check if your organisation subscribes")), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__divider-horizontal"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__confirmation--links ncf__margin"
@@ -104,5 +132,7 @@ function RegistrationConfirmation(_ref) {
   }, "Start reading"));
 }
 RegistrationConfirmation.propTypes = {
-  email: _propTypes["default"].string
+  email: _propTypes["default"].string,
+  showProfessionalSubscriptionCheckBanner: _propTypes["default"].bool,
+  professionalSubscriptionCheckRequestUrl: _propTypes["default"].string
 };

package/helpers/index.js

@@ -4,8 +4,7 @@ module.exports = {
 	cemeaV1ISO: require('./supportedCountries').cemeaV1ISO,
 	cemeaV2ISO: require('./supportedCountries').cemeaV2ISO,
 	apacISO: require('./supportedCountries').apacISO,
-	identifyFTShippingZone: require('./supportedCountries')
-		.identifyFTShippingZone,
+	identifyShippingZone: require('./supportedCountries').identifyShippingZone,
 	countriesSupported: require('./supportedCountries').countriesSupported,
 	countriesSupportedISO: require('./supportedCountries').countriesSupportedISO,
 	supportedPostcodeValidators: require('./supportedPostcodeValidators')

package/helpers/index.spec.js

@@ -31,8 +31,8 @@ describe('helpers', () => {
 		expect(helpers).toHaveProperty('apacISO');
 	});
 
-	it('export identifyFTShippingZone', () => {
-		expect(helpers).toHaveProperty('identifyFTShippingZone');
+	it('export identifyShippingZone', () => {
+		expect(helpers).toHaveProperty('identifyShippingZone');
 	});
 
 	it('export countriesSupported', () => {

package/helpers/supportedCountries.js

@@ -60,7 +60,7 @@ const apacISO = Object.keys(supportedCountriesMasterList.apac);
 const countriesSupported = flattenObj(supportedCountriesMasterList);
 const countriesSupportedISO = Object.keys(countriesSupported);
 
-const identifyFTShippingZone = (country) => {
+const identifyShippingZone = (country) => {
 	if (cemeaV1ISO.includes(country)) {
 		return printRegions.cemeaV1;
 	}
@@ -79,5 +79,5 @@ module.exports = {
 	apacISO,
 	countriesSupported,
 	countriesSupportedISO,
-	identifyFTShippingZone,
+	identifyShippingZone,
 };

package/main.scss

@@ -256,6 +256,16 @@
 			);
 		}
 
+		&--professional-inverse {
+			@include oButtonsContent(
+				$opts: (
+					'size': 'big',
+					'theme': 'professional-inverse',
+					'type': 'primary',
+				)
+			);
+		}
+
 		&--secondary {
 			@include oButtonsContent(
 				$opts: (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "39.0.0",
+  "version": "39.2.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {

package/styles/confirmation.scss

@@ -31,6 +31,114 @@
 			}
 		}
 
+		&__professional-subscription-check-banner {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: oSpacingByName('s2');
+			padding: oSpacingByName('s6') oSpacingByName('s4');
+			padding-left: calc(oSpacingByName('m12') + oSpacingByName('s1'));
+			background-color: oColorsByName('slate');
+			color: oColorsByName('white');
+			margin: oSpacingByName('s8') calc((oSpacingByName('m12') + oSpacingByName('s1')));
+
+			@include oGridRespondTo($until: M) {
+				align-items: stretch;
+				padding: oSpacingByName('s4');
+				margin: oSpacingByName('s8') 0px;
+			}
+
+			&-header {
+				flex: 1;
+			}
+
+			&-title {
+				text-indent: calc(-1 * (oSpacingByName('m12') + oSpacingByName('s1')));
+				margin: 0px;
+
+				@include oTypographySans(
+					$scale: 1,
+					$weight: 'semibold',
+					$include-font-family: false
+				);
+
+				@include oGridRespondTo($until: M) {
+					display: flex;
+					align-items: center;
+					text-indent: 0px;
+
+					@include oTypographySans(
+						$scale: 0,
+						$weight: 'semibold',
+						$include-font-family: false
+					);
+				}
+
+				&::before {
+					@include oIconsContent(
+						$icon-name: 'info',
+						$color: oColorsByName('white'),
+						$size: 32
+					);
+					content: '';
+					color: oColorsByName('white');
+					vertical-align: middle;
+					margin-right: oSpacingByName('s2');
+					margin-left: oSpacingByName('s3');
+
+					@include oGridRespondTo($until: M) {
+						flex-shrink: 0;
+						margin: 0px;
+					}
+				}
+			}
+
+			&-text {
+				@include oTypographySans(
+					$scale: -1,
+					$weight: 'regular',
+					$include-font-family: false
+				);
+				margin: oSpacingByName('s2') 0px 0px;
+
+				&--bold {
+					font-weight: oFontsWeight('semibold');
+				}
+			}
+
+			&-checklist {
+				list-style-type: none;
+				list-style-position: outside;
+				padding: 0px;
+				margin: 0px;
+
+				@include oTypographySans(
+					$scale: -1,
+					$weight: 'regular',
+					$include-font-family: false
+				);
+
+				&-item {
+					margin: oSpacingByName('s1') 0px;
+					border-bottom: 1px solid oColorsMix('white-80', 'slate', 20);
+
+					&:last-child {
+						border-bottom: none;
+					}
+
+					&::before {
+						@include oIconsContent(
+							$icon-name: 'tick',
+							$color: oColorsByName('mint'),
+							$size: 32
+						);
+						content: '';
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+
 		&--links {
 			display: grid;
 			grid-template-rows: 1fr 1fr;

package/styles/ft-edit-registration-confirmation.scss

@@ -38,6 +38,114 @@
 			}
 		}
 
+		&__professional-subscription-check-banner {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: oSpacingByName('s2');
+			padding: oSpacingByName('s6') oSpacingByName('s4');
+			padding-left: calc(oSpacingByName('m12') + oSpacingByName('s1'));
+			background-color: oColorsByName('slate');
+			color: oColorsByName('white');
+			margin: oSpacingByName('s8') calc((oSpacingByName('m12') + oSpacingByName('s1')));
+
+			@include oGridRespondTo($until: M) {
+				align-items: stretch;
+				padding: oSpacingByName('s4');
+				margin: oSpacingByName('s8') 0px;
+			}
+
+			&-header {
+				flex: 1;
+			}
+
+			&-title {
+				text-indent: calc(-1 * (oSpacingByName('m12') + oSpacingByName('s1')));
+				margin: 0px;
+
+				@include oTypographySans(
+					$scale: 1,
+					$weight: 'semibold',
+					$include-font-family: false
+				);
+
+				@include oGridRespondTo($until: M) {
+					display: flex;
+					align-items: center;
+					text-indent: 0px;
+
+					@include oTypographySans(
+						$scale: 0,
+						$weight: 'semibold',
+						$include-font-family: false
+					);
+				}
+
+				&::before {
+					@include oIconsContent(
+						$icon-name: 'info',
+						$color: oColorsByName('white'),
+						$size: 32
+					);
+					content: '';
+					color: oColorsByName('white');
+					vertical-align: middle;
+					margin-right: oSpacingByName('s2');
+					margin-left: oSpacingByName('s3');
+
+					@include oGridRespondTo($until: M) {
+						flex-shrink: 0;
+						margin: 0px;
+					}
+				}
+			}
+
+			&-text {
+				@include oTypographySans(
+					$scale: -1,
+					$weight: 'regular',
+					$include-font-family: false
+				);
+				margin: oSpacingByName('s2') 0px 0px;
+
+				&--bold {
+					font-weight: oFontsWeight('semibold');
+				}
+			}
+
+			&-checklist {
+				list-style-type: none;
+				list-style-position: outside;
+				padding: 0px;
+				margin: 0px;
+
+				@include oTypographySans(
+					$scale: -1,
+					$weight: 'regular',
+					$include-font-family: false
+				);
+
+				&-item {
+					margin: oSpacingByName('s1') 0px;
+					border-bottom: 1px solid oColorsMix('white-80', 'slate', 20);
+
+					&:last-child {
+						border-bottom: none;
+					}
+
+					&::before {
+						@include oIconsContent(
+							$icon-name: 'tick',
+							$color: oColorsByName('mint'),
+							$size: 32
+						);
+						content: '';
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+
 		&--links {
 			display: grid;
 			grid-template-rows: 1fr 1fr;

package/utils/delivery-option-messages.js

@@ -250,6 +250,15 @@ const deliveryOptionMessages = [
 	},
 ];
 
+// Default delivery options based on delivery type
+const defaultDeliveryOptionsMap = {
+	HD: {
+		title: 'Hand delivery',
+		description:
+			'Enjoy delivery of the newspaper daily to your home or office address.',
+	},
+};
+
 function includesDeliveryFrequency(productCode = '', item) {
 	return item.deliveryFrequency.find((freq) => {
 		const productCodePattern = deliveryFrequencyProductsMapping[freq];
@@ -308,7 +317,10 @@ function getDeliveryOption({ productCode, option, shippingZone, countryCode }) {
 		return countryCodeToCustomDeliveryOptionsMap[countryCode][option.value];
 	}
 
-	return findCustomDeliveryOption(productCode, option, shippingZone);
+	return (
+		findCustomDeliveryOption(productCode, option, shippingZone) ||
+		defaultDeliveryOptionsMap[option.value]
+	);
 }
 
 module.exports = {

package/utils/delivery-option-messages.spec.js

@@ -1,5 +1,11 @@
 const { getDeliveryOption } = require('./delivery-option-messages');
 
+const defaultHandDeliveryOption = {
+	title: 'Hand delivery',
+	description:
+		'Enjoy delivery of the newspaper daily to your home or office address.',
+};
+
 describe('Find Custom Delivery Option', () => {
 	const stubOption = { value: 'HD' };
 	const sixDaysProductCode = 'P2N6D';
@@ -20,7 +26,7 @@ describe('Find Custom Delivery Option', () => {
 					shippingZone: 'AAA',
 					countryCode: 'AAA',
 				})
-			).toBeUndefined();
+			).toEqual(defaultHandDeliveryOption);
 		});
 
 		it('returns undefined when invalid distributor type code', () => {
@@ -45,7 +51,7 @@ describe('Find Custom Delivery Option', () => {
 					shippingZone: 'AAA',
 					countryCode: 'AAA',
 				})
-			).toBeUndefined();
+			).toEqual(defaultHandDeliveryOption);
 		});
 	});