@financial-times/n-conversion-forms 44.5.3 → 45.1.0

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "3458fef1dfadca812396e57ee0959e0f5f4742ba",
-  "tag": "v44.5.3",
-  "buildNumber": "17803"
+  "version": "e6f991fa97c43b0b96fe36ab96fdf35fc877333b",
+  "tag": "v45.1.0",
+  "buildNumber": "18109"
 }

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

@@ -1,5 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Confirmation renders appropriately if is 'Evergreen' subscription term type 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <p class="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
+      You are now subscribed to:
+    </p>
+    <h1 class="ncf__header ncf__header--confirmation">
+    </h1>
+  </div>
+  <p class="ncf__paragraph">
+    We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
+  </p>
+  <p class="ncf__paragraph">
+    Here’s a summary of your  subscription:
+  </p>
+  <div class="ncf__headed-paragraph">
+    <h3 class="ncf__header">
+      Something not right?
+    </h3>
+    <p class="ncf__paragraph o3-type-body-base">
+      Go to your
+      <a href="https://www.ft.com/myaccount/personal-details"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="yourAccount"
+      >
+        account settings
+      </a>
+      to view or edit your account. If you need to get in touch call us on
+      <a href="tel:+442077556248">
+        +44 (0) 207 755 6248
+      </a>
+      . Or contact us for additional support.
+    </p>
+  </div>
+  <p class="ncf__paragraph o3-type-body-base">
+    We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. See our
+    <a href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+       target="_top"
+       rel="noopener"
+    >
+      Terms &amp; Conditions
+    </a>
+    for details on how to cancel.
+  </p>
+</div>
+`;
+
 exports[`Confirmation renders appropriately if is 'Termed' subscription term type 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">

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">
-      Earliest available delivery date: 5th November 2019
+      Earliest available start date: 5th November 2019
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -51,7 +51,7 @@ exports[`DeliveryStartDate renders with a custom input max value 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date: 2
+      Earliest available start date: 2
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -89,7 +89,7 @@ exports[`DeliveryStartDate renders with a custom input min value 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -127,7 +127,7 @@ exports[`DeliveryStartDate renders with a custom input value 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -164,7 +164,7 @@ exports[`DeliveryStartDate renders with a disabled input 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -202,7 +202,7 @@ exports[`DeliveryStartDate renders with an error 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
@@ -239,7 +239,7 @@ exports[`DeliveryStartDate renders with appropriate start message when isAddress
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -263,6 +263,43 @@ exports[`DeliveryStartDate renders with appropriate start message when isAddress
 </label>
 `;
 
+exports[`DeliveryStartDate renders with appropriate start message when isPaperVoucherDeliveryOptionOnly 1`] = `
+<label id="deliveryStartDateField"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required"
+       for="deliveryStartDate"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main"
+          id="start-date-picker-title-span"
+    >
+      Start date
+    </span>
+    <span class="o-forms-title__prompt">
+      Earliest available start date:
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="date"
+           id="deliveryStartDate"
+           name="deliveryStartDate"
+           data-trackable="field-deliveryStartDate"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please select a valid start date
+    </span>
+  </span>
+  <p>
+    Your vouchers will be valid from:
+    <strong class="js-start-date-text">
+    </strong>
+  </p>
+</label>
+`;
+
 exports[`DeliveryStartDate renders with country different than default 1`] = `
 <label id="deliveryStartDateField"
        class="o-forms-field ncf__validation-error"
@@ -276,7 +313,7 @@ exports[`DeliveryStartDate renders with country different than default 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -313,7 +350,7 @@ exports[`DeliveryStartDate renders with default props 1`] = `
       Start date
     </span>
     <span class="o-forms-title__prompt">
-      Earliest available delivery date:
+      Earliest available start date:
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">

package/components/__snapshots__/graduation-date.spec.js.snap

@@ -71,9 +71,6 @@ exports[`GraduationDate renders with default props 1`] = `
                 name="graduationDateYear"
                 aria-required="false"
         >
-          <option value="2021">
-            2021
-          </option>
           <option value="2022">
             2022
           </option>
@@ -98,6 +95,9 @@ exports[`GraduationDate renders with default props 1`] = `
           <option value="2029">
             2029
           </option>
+          <option value="2030">
+            2030
+          </option>
         </select>
       </span>
     </div>

package/components/confirmation.jsx

@@ -8,7 +8,7 @@ export function Confirmation({
 	isTrial = false,
 	isB2cPartnership = false,
 	b2cPartnershipCopy = [],
-	isTermedSubscriptionTermType = false,
+	isEvergreenSubscriptionTermType = true,
 	offer = '',
 	email = EMAIL_DEFAULT_TEXT,
 	details = null,
@@ -114,7 +114,7 @@ export function Confirmation({
 				</p>
 			</div>
 			<p className="ncf__paragraph o3-type-body-base">
-				{!isTermedSubscriptionTermType
+				{isEvergreenSubscriptionTermType
 					? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. '
 					: ''}
 				{'See our '}
@@ -136,7 +136,7 @@ Confirmation.propTypes = {
 	isTrial: PropTypes.bool,
 	isB2cPartnership: PropTypes.bool,
 	b2cPartnershipCopy: PropTypes.array,
-	isTermedSubscriptionTermType: PropTypes.bool,
+	isEvergreenSubscriptionTermType: PropTypes.bool,
 	offer: PropTypes.string.isRequired,
 	email: PropTypes.string,
 	details: PropTypes.arrayOf(

package/components/confirmation.spec.js

@@ -29,8 +29,20 @@ describe('Confirmation', () => {
 		expect(Confirmation).toRenderCorrectly(props);
 	});
 
+	it("renders appropriately if is 'Evergreen' subscription term type", () => {
+		const props = {
+			isEvergreenSubscriptionTermType: true,
+			isTermedSubscriptionTermType: false,
+		};
+
+		expect(Confirmation).toRenderCorrectly(props);
+	});
+
 	it("renders appropriately if is 'Termed' subscription term type", () => {
-		const props = { isTermedSubscriptionTermType: true };
+		const props = {
+			isEvergreenSubscriptionTermType: false,
+			isTermedSubscriptionTermType: true,
+		};
 
 		expect(Confirmation).toRenderCorrectly(props);
 	});

package/components/delivery-option.jsx

@@ -10,6 +10,8 @@ export function DeliveryOption({
 	productCode = undefined,
 	options = [],
 	isSingle = false,
+	isEvergreenSubscriptionTermType = true,
+	isTermedSubscriptionTermType = false,
 }) {
 	const divClassName = classNames([
 		'o-forms-field',
@@ -34,6 +36,8 @@ export function DeliveryOption({
 						option,
 						shippingZone,
 						countryCode,
+						isEvergreenSubscriptionTermType,
+						isTermedSubscriptionTermType,
 					});
 
 					if (!isValidDeliveryOption || !deliveryOptionValue) {
@@ -96,4 +100,6 @@ DeliveryOption.propTypes = {
 		})
 	),
 	isSingle: PropTypes.bool,
+	isEvergreenSubscriptionTermType: PropTypes.bool,
+	isTermedSubscriptionTermType: PropTypes.bool,
 };

package/components/delivery-option.stories.js

@@ -34,6 +34,40 @@ Basic.args = {
 	],
 };
 
+export const UKPaperVoucherEvergreenDeliveryOptions = (args) => (
+	<div className="ncf">
+		<DeliveryOption {...args} />
+	</div>
+);
+UKPaperVoucherEvergreenDeliveryOptions.args = {
+	country: 'GBR',
+	options: [
+		{
+			value: 'PV',
+			isValidDeliveryOption: true,
+		},
+	],
+	isEvergreenSubscriptionTermType: true,
+	isTermedSubscriptionTermType: false,
+};
+
+export const UKPaperVoucherTermedDeliveryOptions = (args) => (
+	<div className="ncf">
+		<DeliveryOption {...args} />
+	</div>
+);
+UKPaperVoucherTermedDeliveryOptions.args = {
+	country: 'GBR',
+	options: [
+		{
+			value: 'PV',
+			isValidDeliveryOption: true,
+		},
+	],
+	isEvergreenSubscriptionTermType: false,
+	isTermedSubscriptionTermType: true,
+};
+
 export const UnitedStates5or6DaysWeekDeliveryOptions = (args) => (
 	<div className="ncf">
 		<DeliveryOption {...args} />

package/components/delivery-start-date.jsx

@@ -10,6 +10,7 @@ export function DeliveryStartDate({
 	max = null,
 	isDisabled = false,
 	isAddressUpdate = false,
+	isPaperVoucherDeliveryOptionOnly = false,
 }) {
 	const inputWrapperClassNames = classNames([
 		'o-forms-input',
@@ -30,9 +31,11 @@ export function DeliveryStartDate({
 		defaultValue: value,
 	};
 
-	const startMessage = isAddressUpdate
-		? 'We’ll start delivering to this address from:'
-		: 'The first print edition you will receive is:';
+	const startMessage = isPaperVoucherDeliveryOptionOnly
+		? 'Your vouchers will be valid from:'
+		: isAddressUpdate
+			? 'We’ll start delivering to this address from:'
+			: 'The first print edition you will receive is:';
 
 	return (
 		<label
@@ -46,7 +49,7 @@ export function DeliveryStartDate({
 					Start date
 				</span>
 				<span className="o-forms-title__prompt">
-					Earliest available delivery date: {date}
+					Earliest available start date: {date}
 				</span>
 			</span>
 
@@ -72,4 +75,5 @@ DeliveryStartDate.propTypes = {
 	max: PropTypes.string,
 	isDisabled: PropTypes.bool,
 	isAddressUpdate: PropTypes.bool,
+	isPaperVoucherDeliveryOptionOnly: PropTypes.bool,
 };

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

@@ -52,6 +52,12 @@ describe('DeliveryStartDate', () => {
 		expect(DeliveryStartDate).toRenderCorrectly(props);
 	});
 
+	it('renders with appropriate start message when isPaperVoucherDeliveryOptionOnly', () => {
+		const props = { isPaperVoucherDeliveryOptionOnly: true };
+
+		expect(DeliveryStartDate).toRenderCorrectly(props);
+	});
+
 	it('renders with country different than default', () => {
 		const props = { country: 'USA' };
 

package/components/payment-term.jsx

@@ -13,6 +13,7 @@ export function PaymentTerm({
 	largePrice = false,
 	optionsInARow = false,
 	billingCountry = '',
+	isEvergreenSubscriptionTermType = true,
 	isTermedSubscriptionTermType = false,
 }) {
 	/**
@@ -162,7 +163,6 @@ export function PaymentTerm({
 					</span>
 				),
 			renewsText: (renewalPeriod) =>
-				!isTermedSubscriptionTermType &&
 				Boolean(renewalPeriod) && (
 					<p className="ncf__payment-term__renews-text">
 						Renews every {renewalPeriod} unless cancelled
@@ -228,7 +228,8 @@ export function PaymentTerm({
 						<div className="ncf__payment-term__description">
 							{nameMap[option.name].price(option.price)}
 							{nameMap[option.name].monthlyPrice(option.monthlyPrice)}
-							{nameMap[option.name].renewsText()}
+							{isEvergreenSubscriptionTermType &&
+								nameMap[option.name].renewsText()}
 							{/* Remove this discount text temporarily in favour of monthly price */}
 							{/* <br />Save up to 25% when you pay annually */}
 						</div>
@@ -246,7 +247,8 @@ export function PaymentTerm({
 											option.value
 										)
 							)}
-							{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
+							{isEvergreenSubscriptionTermType &&
+								nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
 						</div>
 					) : (
 						<div>
@@ -342,20 +344,7 @@ export function PaymentTerm({
 
 			{showLegal && (
 				<div className="ncf__payment-term__legal">
-					{isTermedSubscriptionTermType ? (
-						<p className="o3-type-body-base">
-							Find out more about our cancellation policy in our{' '}
-							<a
-								href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-								title="FT Legal Terms and Conditions help page"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Terms &amp; Conditions
-							</a>
-							.
-						</p>
-					) : (
+					{isEvergreenSubscriptionTermType && (
 						<React.Fragment>
 							<p>
 								With all subscription types, we will automatically renew your
@@ -378,6 +367,21 @@ export function PaymentTerm({
 							</p>
 						</React.Fragment>
 					)}
+
+					{isTermedSubscriptionTermType && (
+						<p className="o3-type-body-base">
+							Find out more about our cancellation policy in our{' '}
+							<a
+								href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+								title="FT Legal Terms and Conditions help page"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Terms &amp; Conditions
+							</a>
+							.
+						</p>
+					)}
 				</div>
 			)}
 		</div>
@@ -411,6 +415,7 @@ PaymentTerm.propTypes = {
 			fulfilmentOption: PropTypes.string,
 		})
 	),
+	isEvergreenSubscriptionTermType: PropTypes.bool,
 	isTermedSubscriptionTermType: PropTypes.bool,
 	showLegal: PropTypes.bool,
 	largePrice: PropTypes.bool,

package/components/payment-term.spec.js

@@ -117,7 +117,75 @@ describe('PaymentTerm', () => {
 		});
 	});
 
-	describe('given isTermedSubscriptionTermType is true', () => {
+	describe('isEvergreenSubscriptionTermType is true; isTermedSubscriptionTermType is false', () => {
+		describe('pre-defined option name (i.e. frequency)', () => {
+			const ANNUAL_FREQUENCY = 'annual';
+			const QUARTERLY_FREQUENCY = 'quarterly';
+			const MONTHLY_FREQUENCY = 'monthly';
+
+			[ANNUAL_FREQUENCY, QUARTERLY_FREQUENCY, MONTHLY_FREQUENCY].forEach(
+				(frequency) => {
+					const FREQUENCY_TO_RENEWAL_TEXT_MAP = {
+						[ANNUAL_FREQUENCY]: 'Renews annually unless cancelled',
+						[QUARTERLY_FREQUENCY]: 'Renews quarterly unless cancelled',
+						[MONTHLY_FREQUENCY]: 'Renews monthly unless cancelled',
+					};
+
+					describe(`${frequency} option`, () => {
+						const options = [
+							{
+								name: frequency,
+								value: frequency,
+								price: '£20.00',
+							},
+						];
+
+						it(`renders '${FREQUENCY_TO_RENEWAL_TEXT_MAP[frequency]}' when true`, () => {
+							const wrapper = shallow(
+								<PaymentTerm
+									options={options}
+									isEvergreenSubscriptionTermType={true}
+									isTermedSubscriptionTermType={false}
+								/>
+							);
+							expect(
+								wrapper.find('.ncf__payment-term__renews-text').exists()
+							).toBe(true);
+							expect(
+								wrapper.find('.ncf__payment-term__renews-text').text()
+							).toBe(FREQUENCY_TO_RENEWAL_TEXT_MAP[frequency]);
+						});
+					});
+				}
+			);
+		});
+
+		describe('custom option with period provided', () => {
+			const options = [
+				{
+					price: '£50.00',
+					amount: '50.00',
+					currency: 'GBP',
+					value: 'P6M',
+				},
+			];
+
+			it('renders renewal text for custom terms that specify a period', () => {
+				const wrapper = shallow(
+					<PaymentTerm
+						options={options}
+						isEvergreenSubscriptionTermType={true}
+						isTermedSubscriptionTermType={false}
+					/>
+				);
+				expect(wrapper.find('.ncf__payment-term__renews-text').text()).toBe(
+					'Renews every 6 months unless cancelled'
+				);
+			});
+		});
+	});
+
+	describe('isEvergreenSubscriptionTermType is false; isTermedSubscriptionTermType is true', () => {
 		describe('options include duration expressed in weeks', () => {
 			const options = [
 				{
@@ -127,7 +195,11 @@ describe('PaymentTerm', () => {
 				},
 			];
 			const wrapper = shallow(
-				<PaymentTerm options={options} isTermedSubscriptionTermType={true} />
+				<PaymentTerm
+					options={options}
+					isEvergreenSubscriptionTermType={false}
+					isTermedSubscriptionTermType={true}
+				/>
 			);
 
 			it('renders subscription term as title', () => {
@@ -154,7 +226,11 @@ describe('PaymentTerm', () => {
 				},
 			];
 			const wrapper = shallow(
-				<PaymentTerm options={options} isTermedSubscriptionTermType={true} />
+				<PaymentTerm
+					options={options}
+					isEvergreenSubscriptionTermType={false}
+					isTermedSubscriptionTermType={true}
+				/>
 			);
 
 			it('renders subscription term as title', () => {
@@ -171,6 +247,29 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
+
+		describe('renewal text', () => {
+			const options = [
+				{
+					price: '£19.00',
+					amount: '19.00',
+					value: 'P8W',
+				},
+			];
+
+			it('does not render renewal text for custom terms', () => {
+				const wrapper = shallow(
+					<PaymentTerm
+						options={options}
+						isEvergreenSubscriptionTermType={false}
+						isTermedSubscriptionTermType={true}
+					/>
+				);
+				expect(wrapper.find('.ncf__payment-term__renews-text').exists()).toBe(
+					false
+				);
+			});
+		});
 	});
 
 	describe('getDisplayName', () => {

package/dist/confirmation.jsx

@@ -18,8 +18,8 @@ function Confirmation(_ref) {
     isB2cPartnership = _ref$isB2cPartnership === void 0 ? false : _ref$isB2cPartnership,
     _ref$b2cPartnershipCo = _ref.b2cPartnershipCopy,
     b2cPartnershipCopy = _ref$b2cPartnershipCo === void 0 ? [] : _ref$b2cPartnershipCo,
-    _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
-    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
+    _ref$isEvergreenSubsc = _ref.isEvergreenSubscriptionTermType,
+    isEvergreenSubscriptionTermType = _ref$isEvergreenSubsc === void 0 ? true : _ref$isEvergreenSubsc,
     _ref$offer = _ref.offer,
     offer = _ref$offer === void 0 ? '' : _ref$offer,
     _ref$email = _ref.email,
@@ -95,7 +95,7 @@ function Confirmation(_ref) {
     href: "tel:+442077556248"
   }, "+44 (0) 207 755 6248"), ". Or contact us for additional support.")), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph o3-type-body-base"
-  }, !isTermedSubscriptionTermType ? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. ' : '', 'See our ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, isEvergreenSubscriptionTermType ? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. ' : '', 'See our ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: "_top",
     rel: "noopener"
@@ -105,7 +105,7 @@ Confirmation.propTypes = {
   isTrial: _propTypes["default"].bool,
   isB2cPartnership: _propTypes["default"].bool,
   b2cPartnershipCopy: _propTypes["default"].array,
-  isTermedSubscriptionTermType: _propTypes["default"].bool,
+  isEvergreenSubscriptionTermType: _propTypes["default"].bool,
   offer: _propTypes["default"].string.isRequired,
   email: _propTypes["default"].string,
   details: _propTypes["default"].arrayOf(_propTypes["default"].shape({

package/dist/delivery-option.jsx

@@ -19,7 +19,11 @@ function DeliveryOption(_ref) {
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
     _ref$isSingle = _ref.isSingle,
-    isSingle = _ref$isSingle === void 0 ? false : _ref$isSingle;
+    isSingle = _ref$isSingle === void 0 ? false : _ref$isSingle,
+    _ref$isEvergreenSubsc = _ref.isEvergreenSubscriptionTermType,
+    isEvergreenSubscriptionTermType = _ref$isEvergreenSubsc === void 0 ? true : _ref$isEvergreenSubsc,
+    _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
   var divClassName = (0, _classnames["default"])(['o-forms-field', 'ncf__delivery-option', {
     'ncf__delivery-option--single': isSingle
   }]);
@@ -39,7 +43,9 @@ function DeliveryOption(_ref) {
       productCode: productCode,
       option: option,
       shippingZone: shippingZone,
-      countryCode: countryCode
+      countryCode: countryCode,
+      isEvergreenSubscriptionTermType: isEvergreenSubscriptionTermType,
+      isTermedSubscriptionTermType: isTermedSubscriptionTermType
     });
     if (!isValidDeliveryOption || !deliveryOptionValue) {
       return null;
@@ -81,5 +87,7 @@ DeliveryOption.propTypes = {
     flightMarket: _propTypes["default"].bool,
     mailDelivery: _propTypes["default"].bool
   })),
-  isSingle: _propTypes["default"].bool
+  isSingle: _propTypes["default"].bool,
+  isEvergreenSubscriptionTermType: _propTypes["default"].bool,
+  isTermedSubscriptionTermType: _propTypes["default"].bool
 };

package/dist/delivery-start-date.jsx

@@ -25,7 +25,9 @@ function DeliveryStartDate(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isAddressUpdate = _ref.isAddressUpdate,
-    isAddressUpdate = _ref$isAddressUpdate === void 0 ? false : _ref$isAddressUpdate;
+    isAddressUpdate = _ref$isAddressUpdate === void 0 ? false : _ref$isAddressUpdate,
+    _ref$isPaperVoucherDe = _ref.isPaperVoucherDeliveryOptionOnly,
+    isPaperVoucherDeliveryOptionOnly = _ref$isPaperVoucherDe === void 0 ? false : _ref$isPaperVoucherDe;
   var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
     'o-forms-input--invalid': hasError
   }]);
@@ -44,7 +46,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:';
+  var startMessage = isPaperVoucherDeliveryOptionOnly ? 'Your vouchers will be valid from:' : 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",
@@ -57,7 +59,7 @@ function DeliveryStartDate(_ref) {
     id: "start-date-picker-title-span"
   }, "Start date"), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__prompt"
-  }, "Earliest available delivery date: ", date)), /*#__PURE__*/_react["default"].createElement("span", {
+  }, "Earliest available start 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"
@@ -73,5 +75,6 @@ DeliveryStartDate.propTypes = {
   min: _propTypes["default"].string,
   max: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,
-  isAddressUpdate: _propTypes["default"].bool
+  isAddressUpdate: _propTypes["default"].bool,
+  isPaperVoucherDeliveryOptionOnly: _propTypes["default"].bool
 };

package/dist/payment-term.jsx

@@ -31,6 +31,8 @@ function PaymentTerm(_ref) {
     optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow,
     _ref$billingCountry = _ref.billingCountry,
     billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
+    _ref$isEvergreenSubsc = _ref.isEvergreenSubscriptionTermType,
+    isEvergreenSubscriptionTermType = _ref$isEvergreenSubsc === void 0 ? true : _ref$isEvergreenSubsc,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
     isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
   /**
@@ -160,7 +162,7 @@ function PaymentTerm(_ref) {
         }, _monthlyPrice), ' ', "per month");
       },
       renewsText: function renewsText(renewalPeriod) {
-        return !isTermedSubscriptionTermType && Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
+        return Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
           className: "ncf__payment-term__renews-text"
         }, "Renews every ", renewalPeriod, " unless cancelled");
       }
@@ -197,12 +199,12 @@ function PaymentTerm(_ref) {
         className: "ncf__payment-term__trial-price"
       }, option.trialPrice), /*#__PURE__*/_react["default"].createElement("br", null), nameMap[option.name] && nameMap[option.name].trialPrice(option.price)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, nameMap[option.name] ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "ncf__payment-term__description"
-      }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText()) :
+      }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), isEvergreenSubscriptionTermType && nameMap[option.name].renewsText()) :
       // this should cover the cases different than annual, quarterly and monthly
       // for those containing period on option.value, render custom template, for the rest keep legacy render
       isValidPeriod(option.value) ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "ncf__payment-term__description"
-      }, nameMap['custom'].price(option.price), nameMap['custom'].monthlyPrice(option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, nameMap['custom'].price(option.price), nameMap['custom'].monthlyPrice(option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), isEvergreenSubscriptionTermType && nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         className: largePrice ? 'ncf__payment-term__large-price' : ''
       }, option.price), option.chargeOnText && /*#__PURE__*/_react["default"].createElement("p", {
         className: "ncf__payment-term__charge-on-text"
@@ -256,21 +258,21 @@ function PaymentTerm(_ref) {
     return createPaymentTerm(option);
   })), showLegal && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__payment-term__legal"
-  }, isTermedSubscriptionTermType ? /*#__PURE__*/_react["default"].createElement("p", {
+  }, isEvergreenSubscriptionTermType && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "With all subscription types, we will automatically renew your subscription using the payment method provided unless you cancel before your renewal date."), /*#__PURE__*/_react["default"].createElement("p", {
     className: "o3-type-body-base"
-  }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "Terms & Conditions"), ".") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "With all subscription types, we will automatically renew your subscription using the payment method provided unless you cancel before your renewal date."), /*#__PURE__*/_react["default"].createElement("p", {
+  }, "Terms & Conditions"), ".")), isTermedSubscriptionTermType && /*#__PURE__*/_react["default"].createElement("p", {
     className: "o3-type-body-base"
-  }, "We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "Terms & Conditions"), "."))));
+  }, "Terms & Conditions"), ".")));
 }
 PaymentTerm.propTypes = {
   fieldId: _propTypes["default"].string,
@@ -297,6 +299,7 @@ PaymentTerm.propTypes = {
     chargeOnText: _propTypes["default"].string,
     fulfilmentOption: _propTypes["default"].string
   })),
+  isEvergreenSubscriptionTermType: _propTypes["default"].bool,
   isTermedSubscriptionTermType: _propTypes["default"].bool,
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,

package/package.json

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

@@ -28,27 +28,44 @@ const USA_COUNTRY_CODE = 'USA';
 const countryCodeToCustomDeliveryOptionsMap = {
 	[JAPAN_COUNTRY_CODE]: {
 		HD: {
-			description:
+			description: () =>
 				'Enjoy delivery of the newspaper to your home or office address.',
 		},
 		ML: {
-			description:
+			description: () =>
 				'Enjoy delivery of the newspaper to your home or office address.',
 		},
 	},
 	[UK_COUNTRY_CODE]: {
 		PV: {
 			title: 'Paper vouchers',
-			description:
-				'13-week voucher pack delivered quarterly and redeemable at retailers nationwide.',
+			description: ({
+				isEvergreenSubscriptionTermType,
+				isTermedSubscriptionTermType,
+			}) => {
+				if (isEvergreenSubscriptionTermType) {
+					return '13-week voucher pack delivered quarterly and redeemable at retailers nationwide.';
+				}
+
+				if (isTermedSubscriptionTermType) {
+					// Note: This wording relates to a specific offer: UK Retail Sampling
+					// • Production environment offer ID: f9f6383d-98fd-4655-9bc8-2b22bfda8bab
+					// • Test environment offer ID: 83fd2c19-2899-4e59-8929-aeb1e0cae096
+					// Should in the future there be additional offers for
+					// Termed subscriptions then this approach will need to be revised.
+					return '6 flexible vouchers that can be exchanged for a copy of FT Weekend over a 13-week period at retailers nationwide.';
+				}
+
+				return '';
+			},
 		},
 		HD: {
 			title: 'Hand delivery',
-			description: 'Free delivery to your home or office before 7am.',
+			description: () => 'Free delivery to your home or office before 7am.',
 		},
 		EV: {
 			title: 'Electronic vouchers',
-			description:
+			description: () =>
 				'Delivered via email and card, redeemable at retailers nationwide.',
 		},
 	},
@@ -309,12 +326,33 @@ function findCustomDeliveryOption(productCode, option, shippingZone) {
 	return deliveryOption;
 }
 
-function getDeliveryOption({ productCode, option, shippingZone, countryCode }) {
+function getDeliveryOption({
+	productCode,
+	option,
+	shippingZone,
+	countryCode,
+	isEvergreenSubscriptionTermType,
+	isTermedSubscriptionTermType,
+}) {
+	let deliveryOption;
+
 	// Custom delivery messages are displayed for certain countries
 	if (
 		Object.keys(countryCodeToCustomDeliveryOptionsMap).includes(countryCode)
 	) {
-		return countryCodeToCustomDeliveryOptionsMap[countryCode][option.value];
+		deliveryOption =
+			countryCodeToCustomDeliveryOptionsMap[countryCode][option.value];
+
+		const normalisedDeliveryOption = {
+			...deliveryOption,
+			// Set `description` value as string returned from function.
+			description: deliveryOption?.description({
+				isEvergreenSubscriptionTermType,
+				isTermedSubscriptionTermType,
+			}),
+		};
+
+		return normalisedDeliveryOption;
 	}
 
 	return (

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

@@ -141,8 +141,70 @@ describe('Find Custom Delivery Option', () => {
 		});
 	});
 
-	describe('Find UK Delivery Option', () => {
-		it('returns UK EV delivery option', () => {
+	describe('find UK Paper Vouchers delivery option', () => {
+		describe('Evergreen (i.e. recurring) subscription term type', () => {
+			it('returns UK Paper Vouchers delivery option for Evergreen subscription term type', () => {
+				const expected = {
+					title: 'Paper vouchers',
+					description:
+						'13-week voucher pack delivered quarterly and redeemable at retailers nationwide.',
+				};
+
+				const deliveryOption = getDeliveryOption({
+					productCode: sixDaysProductCode,
+					option: { value: 'PV' },
+					shippingZone: 'GBR',
+					countryCode: 'GBR',
+					isEvergreenSubscriptionTermType: true,
+					isTermedSubscriptionTermType: false,
+				});
+
+				expect(deliveryOption).toEqual(expected);
+			});
+		});
+
+		describe('Termed (i.e. single-term) subscription term type', () => {
+			it('returns UK Paper Vouchers delivery option for Termed subscription term type', () => {
+				const expected = {
+					title: 'Paper vouchers',
+					description:
+						'6 flexible vouchers that can be exchanged for a copy of FT Weekend over a 13-week period at retailers nationwide.',
+				};
+
+				const deliveryOption = getDeliveryOption({
+					productCode: sixDaysProductCode,
+					option: { value: 'PV' },
+					shippingZone: 'GBR',
+					countryCode: 'GBR',
+					isEvergreenSubscriptionTermType: false,
+					isTermedSubscriptionTermType: true,
+				});
+
+				expect(deliveryOption).toEqual(expected);
+			});
+		});
+	});
+
+	describe('find UK Hand delivery option', () => {
+		it('returns UK Hand delivery option', () => {
+			const expected = {
+				title: 'Hand delivery',
+				description: 'Free delivery to your home or office before 7am.',
+			};
+
+			const deliveryOption = getDeliveryOption({
+				productCode: sixDaysProductCode,
+				option: { value: 'HD' },
+				shippingZone: 'GBR',
+				countryCode: 'GBR',
+			});
+
+			expect(deliveryOption).toEqual(expected);
+		});
+	});
+
+	describe('find UK Electronic Vouchers delivery option', () => {
+		it('returns UK Electronic Vouchers delivery option', () => {
 			const expected = {
 				title: 'Electronic vouchers',
 				description: