@financial-times/n-conversion-forms 37.2.0 → 37.2.2

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "e6de5072ce6f5873fcf887ed859149b61ca0ed6b",
-  "tag": "v37.2.0"
+  "version": "c9dd25fe954591fd5d8e7167bdd51ff78d765bb3",
+  "tag": "v37.2.2"
 }

package/components/__snapshots__/delivery-start-date.spec.js.snap

@@ -13,7 +13,7 @@ exports[`DeliveryStartDate renders with a custom date 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is: 5th November 2019
+      Earliest available delivery date: 5th November 2019
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -29,6 +29,12 @@ exports[`DeliveryStartDate renders with a custom date 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+      5th November 2019
+    </strong>
+  </p>
 </label>
 `;
 
@@ -45,7 +51,7 @@ exports[`DeliveryStartDate renders with a custom input max value 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is: 2
+      Earliest available delivery date: 2
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -61,6 +67,12 @@ exports[`DeliveryStartDate renders with a custom input max value 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+      2
+    </strong>
+  </p>
 </label>
 `;
 
@@ -77,7 +89,7 @@ exports[`DeliveryStartDate renders with a custom input min value 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -94,6 +106,11 @@ exports[`DeliveryStartDate renders with a custom input min value 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
 </label>
 `;
 
@@ -110,7 +127,7 @@ exports[`DeliveryStartDate renders with a custom input value 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -126,6 +143,11 @@ exports[`DeliveryStartDate renders with a custom input value 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
 </label>
 `;
 
@@ -142,7 +164,7 @@ exports[`DeliveryStartDate renders with a disabled input 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -159,6 +181,11 @@ exports[`DeliveryStartDate renders with a disabled input 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
 </label>
 `;
 
@@ -175,7 +202,7 @@ exports[`DeliveryStartDate renders with an error 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
@@ -191,6 +218,11 @@ exports[`DeliveryStartDate renders with an error 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
 </label>
 `;
 
@@ -207,7 +239,7 @@ exports[`DeliveryStartDate renders with appropriate start message when isAddress
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -244,7 +276,7 @@ exports[`DeliveryStartDate renders with country different than default 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -260,6 +292,11 @@ exports[`DeliveryStartDate renders with country different than default 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
 </label>
 `;
 
@@ -276,7 +313,7 @@ exports[`DeliveryStartDate renders with default props 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      The first print edition you will receive is:
+      Earliest available delivery date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -292,5 +329,10 @@ exports[`DeliveryStartDate renders with default props 1`] = `
       Please select a valid start date
     </span>
   </span>
+  <p>
+    The first print edition you will receive is:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
 </label>
 `;

package/components/delivery-option.jsx

@@ -9,7 +9,7 @@ import {
 
 export function DeliveryOption({
 	fieldId = 'deliveryOptionField',
-	country,
+	country: countryCode,
 	productCode = undefined,
 	options = [],
 	isSingle = false,
@@ -20,7 +20,7 @@ export function DeliveryOption({
 		{ 'ncf__delivery-option--single': isSingle },
 	]);
 
-	const FTShippingZone = identifyFTShippingZone(country);
+	const shippingZone = identifyFTShippingZone(countryCode);
 
 	return (
 		<div
@@ -32,12 +32,12 @@ export function DeliveryOption({
 			<span className="o-forms-input o-forms-input--radio-round">
 				{options.map((option) => {
 					const { value, isValidDeliveryOption, isSelected } = option;
-					const deliveryOptionValue = getDeliveryOption(
+					const deliveryOptionValue = getDeliveryOption({
 						productCode,
 						option,
-						FTShippingZone,
-						country
-					);
+						shippingZone,
+						countryCode,
+					});
 
 					if (!isValidDeliveryOption || !deliveryOptionValue) {
 						return null;

package/components/delivery-start-date.jsx

@@ -30,6 +30,10 @@ export function DeliveryStartDate({
 		defaultValue: value,
 	};
 
+	const startMessage = isAddressUpdate
+		? 'We’ll start delivering to this address from:'
+		: 'The first print edition you will receive is:';
+
 	return (
 		<label
 			id="deliveryStartDateField"
@@ -42,7 +46,7 @@ export function DeliveryStartDate({
 					Start date
 				</span>
 				<span className="o-forms-title__prompt">
-					The first print edition you will receive is: {date}
+					Earliest available delivery date: {date}
 				</span>
 			</span>
 
@@ -53,12 +57,9 @@ export function DeliveryStartDate({
 				</span>
 			</span>
 
-			{isAddressUpdate && (
-				<p>
-					We’ll start delivering to this address from:{' '}
-					<strong className="js-start-date-text">{date}</strong>
-				</p>
-			)}
+			<p>
+				{startMessage} <strong className="js-start-date-text">{date}</strong>
+			</p>
 		</label>
 	);
 }

package/dist/delivery-option.jsx

@@ -13,7 +13,7 @@ var _supportedCountries = require("../helpers/supportedCountries");
 function DeliveryOption(_ref) {
   var _ref$fieldId = _ref.fieldId,
     fieldId = _ref$fieldId === void 0 ? 'deliveryOptionField' : _ref$fieldId,
-    country = _ref.country,
+    countryCode = _ref.country,
     _ref$productCode = _ref.productCode,
     productCode = _ref$productCode === void 0 ? undefined : _ref$productCode,
     _ref$options = _ref.options,
@@ -23,7 +23,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);
+  var shippingZone = (0, _supportedCountries.identifyFTShippingZone)(countryCode);
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     className: divClassName,
@@ -35,7 +35,12 @@ function DeliveryOption(_ref) {
     var value = option.value,
       isValidDeliveryOption = option.isValidDeliveryOption,
       isSelected = option.isSelected;
-    var deliveryOptionValue = (0, _deliveryOptionMessages.getDeliveryOption)(productCode, option, FTShippingZone, country);
+    var deliveryOptionValue = (0, _deliveryOptionMessages.getDeliveryOption)({
+      productCode: productCode,
+      option: option,
+      shippingZone: shippingZone,
+      countryCode: countryCode
+    });
     if (!isValidDeliveryOption || !deliveryOptionValue) {
       return null;
     }

package/dist/delivery-start-date.jsx

@@ -44,6 +44,7 @@ function DeliveryStartDate(_ref) {
     disabled: isDisabled,
     defaultValue: value
   });
+  var startMessage = isAddressUpdate ? 'We’ll start delivering to this address from:' : 'The first print edition you will receive is:';
   return /*#__PURE__*/_react["default"].createElement("label", {
     id: "deliveryStartDateField",
     className: "o-forms-field ncf__validation-error",
@@ -56,11 +57,11 @@ function DeliveryStartDate(_ref) {
     id: "start-date-picker-title-span"
   }, "Start date"), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__prompt"
-  }, "The first print edition you will receive is: ", date)), /*#__PURE__*/_react["default"].createElement("span", {
+  }, "Earliest available delivery date: ", date)), /*#__PURE__*/_react["default"].createElement("span", {
     className: inputWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-input__error"
-  }, "Please select a valid start date")), isAddressUpdate && /*#__PURE__*/_react["default"].createElement("p", null, "We\u2019ll start delivering to this address from:", ' ', /*#__PURE__*/_react["default"].createElement("strong", {
+  }, "Please select a valid start date")), /*#__PURE__*/_react["default"].createElement("p", null, startMessage, " ", /*#__PURE__*/_react["default"].createElement("strong", {
     className: "js-start-date-text"
   }, date)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "37.2.0",
+  "version": "37.2.2",
   "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/utils/delivery-option-messages.js

@@ -257,38 +257,38 @@ function includesDeliveryFrequency(productCode = '', item) {
 	});
 }
 
-function mailStrategy(productCode, option, FTShippingZone, item) {
+function mailStrategy(productCode, shippingZone, item) {
 	return (
 		includesDeliveryFrequency(productCode, item) &&
 		item.distributorType === MAIL &&
-		item.country.includes(FTShippingZone)
+		item.country.includes(shippingZone)
 	);
 }
 
-function handDeliveryStrategy(productCode, option, FTShippingZone, item) {
+function handDeliveryStrategy(productCode, option, shippingZone, item) {
 	return (
 		includesDeliveryFrequency(productCode, item) &&
 		item.distributorType === HAND_DELIVERY &&
 		item.deliveryOnPublicationDate === option.deliveryOnPublicationDate &&
 		item.flightMarket === option.flightMarket &&
-		item.country.includes(FTShippingZone)
+		item.country.includes(shippingZone)
 	);
 }
 
 /**
- * Method to find a specific delivery option based on the delivery frequency, FTShippingZone and option values.
+ * Method to find a specific delivery option based on the delivery frequency, shippingZone and option values.
  * There are two different strategies, one for options with mailDelivery = true and other by the opposite.
  * Both cases are represented by system option code 'HD', but differ on the mailDelivery property value.
  * If no message matchs, then undefined is returned.
  */
-function findCustomDeliveryOption(productCode, option, FTShippingZone) {
+function findCustomDeliveryOption(productCode, option, shippingZone) {
 	let deliveryOption;
 
 	if (option.value === HAND_DELIVERY) {
 		const filteredMessages = deliveryOptionMessages.filter((item) => {
 			return option.mailDelivery
-				? mailStrategy(productCode, option, FTShippingZone, item)
-				: handDeliveryStrategy(productCode, option, FTShippingZone, item);
+				? mailStrategy(productCode, shippingZone, item)
+				: handDeliveryStrategy(productCode, option, shippingZone, item);
 		});
 
 		if (filteredMessages.length) {
@@ -300,13 +300,15 @@ function findCustomDeliveryOption(productCode, option, FTShippingZone) {
 	return deliveryOption;
 }
 
-function getDeliveryOption(productCode, option, FTShippingZone, country) {
+function getDeliveryOption({ productCode, option, shippingZone, countryCode }) {
 	// Custom delivery messages are displayed for certain countries
-	if (Object.keys(countryCodeToCustomDeliveryOptionsMap).includes(country)) {
-		return countryCodeToCustomDeliveryOptionsMap[country][option.value];
+	if (
+		Object.keys(countryCodeToCustomDeliveryOptionsMap).includes(countryCode)
+	) {
+		return countryCodeToCustomDeliveryOptionsMap[countryCode][option.value];
 	}
 
-	return findCustomDeliveryOption(productCode, option, FTShippingZone);
+	return findCustomDeliveryOption(productCode, option, shippingZone);
 }
 
 module.exports = {

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

@@ -14,14 +14,24 @@ describe('Find Custom Delivery Option', () => {
 
 		it('returns undefined when other country than custom messages', () => {
 			expect(
-				getDeliveryOption(sixDaysProductCode, stubOption, 'AAA', 'AAA')
+				getDeliveryOption({
+					productCode: sixDaysProductCode,
+					option: stubOption,
+					shippingZone: 'AAA',
+					countryCode: 'AAA',
+				})
 			).toBeUndefined();
 		});
 
 		it('returns undefined when invalid distributor type code', () => {
 			const option = { ...stubOption, value: 'ZZ' };
 			expect(
-				getDeliveryOption(sixDaysProductCode, option, 'USA', 'USA')
+				getDeliveryOption({
+					productCode: sixDaysProductCode,
+					option: option,
+					shippingZone: 'USA',
+					countryCode: 'USA',
+				})
 			).toBeUndefined();
 		});
 
@@ -29,7 +39,12 @@ describe('Find Custom Delivery Option', () => {
 			stubOption.deliveryOnPublicationDate = undefined;
 			stubOption.flightMarket = undefined;
 			expect(
-				getDeliveryOption(sixDaysProductCode, stubOption, 'AAA', 'AAA')
+				getDeliveryOption({
+					productCode: sixDaysProductCode,
+					option: stubOption,
+					shippingZone: 'AAA',
+					countryCode: 'AAA',
+				})
 			).toBeUndefined();
 		});
 	});
@@ -48,12 +63,12 @@ describe('Find Custom Delivery Option', () => {
 					'Enjoy delivery of the newspaper daily to your home or office address.',
 			};
 
-			const deliveryOption = getDeliveryOption(
-				sixDaysProductCode,
-				stubOption,
-				'USA',
-				'USA'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: sixDaysProductCode,
+				option: stubOption,
+				shippingZone: 'USA',
+				countryCode: 'USA',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -67,12 +82,12 @@ describe('Find Custom Delivery Option', () => {
 					'Enjoy delivery of the newspaper daily to your home or office address. \nPlease note: Your FT Weekend will be delivered on Sunday.',
 			};
 
-			const deliveryOption = getDeliveryOption(
-				weekendProductCode,
-				stubOption,
-				'USA',
-				'USA'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: weekendProductCode,
+				option: stubOption,
+				shippingZone: 'USA',
+				countryCode: 'USA',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -91,12 +106,12 @@ describe('Find Custom Delivery Option', () => {
 					"We can only deliver the newspaper to your location by postal mail which means your delivery will arrive up to 5 business days after the date of publication and will not include the HTSI Magazine. We also fly the newspaper to your location which means delivery is subject to flight delays/cancellations outside the FT's control. If you prefer to read the printed content on the day of publication, please proceed to subscribe to the FT ePaper - a digital replica of the print edition.",
 			};
 
-			const deliveryOption = getDeliveryOption(
-				sixDaysProductCode,
-				stubOption,
-				'USA',
-				'USA'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: sixDaysProductCode,
+				option: stubOption,
+				shippingZone: 'USA',
+				countryCode: 'USA',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -109,12 +124,12 @@ describe('Find Custom Delivery Option', () => {
 					"We can only deliver the FT Weekend newspaper to your location by postal mail which means your delivery will arrive up to 5 business days after the date of publication and will not include the HTSI Magazine. We also fly the newspaper to your location which means delivery is subject to flight delays/cancellations outside the FT's control. If you prefer to read the printed content on the day of publication, please proceed to subscribe to the FT ePaper - a digital replica of the print edition.",
 			};
 
-			const deliveryOption = getDeliveryOption(
-				weekendProductCode,
-				stubOption,
-				'CAN',
-				'CAN'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: weekendProductCode,
+				option: stubOption,
+				shippingZone: 'CAN',
+				countryCode: 'CAN',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -128,12 +143,12 @@ describe('Find Custom Delivery Option', () => {
 					'Delivered via email and card, redeemable at retailers nationwide.',
 			};
 
-			const deliveryOption = getDeliveryOption(
-				sixDaysProductCode,
-				{ value: 'EV' },
-				'GBR',
-				'GBR'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: sixDaysProductCode,
+				option: { value: 'EV' },
+				shippingZone: 'GBR',
+				countryCode: 'GBR',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -146,12 +161,12 @@ describe('Find Custom Delivery Option', () => {
 					'Enjoy delivery of the newspaper to your home or office address.',
 			};
 
-			const deliveryOption = getDeliveryOption(
-				sixDaysProductCode,
-				stubOption,
-				'APAC',
-				'JPN'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: sixDaysProductCode,
+				option: stubOption,
+				shippingZone: 'APAC',
+				countryCode: 'JPN',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -168,12 +183,12 @@ describe('Find Custom Delivery Option', () => {
 					'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.',
 			};
 
-			const deliveryOption = getDeliveryOption(
-				'N6D',
-				stubOption,
-				'CEMEA_V1',
-				'BGR'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: 'N6D',
+				option: stubOption,
+				shippingZone: 'CEMEA_V1',
+				countryCode: 'BGR',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});
@@ -188,12 +203,12 @@ describe('Find Custom Delivery Option', () => {
 					'Enjoy delivery of the newspaper to your home or office address. Note this is a postal delivery - expect delivery after the day of publication. If you would prefer to read the newspaper on the day of publication, purchase an FT ePaper subscription, our digital replica of each daily edition.',
 			};
 
-			const deliveryOption = getDeliveryOption(
-				'N6D',
-				stubOption,
-				'APAC',
-				'HKG'
-			);
+			const deliveryOption = getDeliveryOption({
+				productCode: 'N6D',
+				option: stubOption,
+				shippingZone: 'APAC',
+				countryCode: 'HKG',
+			});
 
 			expect(deliveryOption).toEqual(expected);
 		});