@financial-times/n-conversion-forms 20.1.1 → 20.3.0

package/components/__snapshots__/accept-terms.spec.js.snap

@@ -1266,6 +1266,66 @@ exports[`AcceptTerms renders appropriately if is transition with transition type
 </div>
 `;
 
+exports[`AcceptTerms renders appropriately if is transition with transition type other than immediate and is single term 1`] = `
+<div id="acceptTermsField"
+     class="o-forms-field o-layout-typography ncf__validation-error"
+     data-validate="required,checked"
+>
+  <ul class="o-typography-list ncf__accept-terms-list">
+    <li>
+      <span class="terms-default">
+        I confirm I am 16 years or older and have read and agree to the
+        <a class="ncf__link--external"
+           href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+           target="_blank"
+           rel="noopener noreferrer"
+           data-trackable="terms-and-conditions"
+        >
+          Terms &amp; Conditions
+        </a>
+        .
+      </span>
+    </li>
+    <li>
+      <span class="terms-transition terms-transition--other">
+        By placing my order, I acknowledge that my subscription will start and the chosen payment method will be charged on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.
+      </span>
+    </li>
+    <li>
+      <span class="terms-transition">
+        Find out more about our cancellation policy in our
+        <a class="ncf__link--external"
+           href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+           target="_blank"
+           rel="noopener noreferrer"
+        >
+          Terms &amp; Conditions
+        </a>
+        .
+      </span>
+    </li>
+  </ul>
+  <label class="o-forms-input o-forms-input--checkbox"
+         for="termsAcceptance"
+  >
+    <input type="checkbox"
+           id="termsAcceptance"
+           name="termsAcceptance"
+           value="true"
+           data-trackable="field-terms"
+           aria-required="true"
+           required
+    >
+    <span class="o-forms-input__label">
+      I agree to the above terms &amp; conditions.
+    </span>
+    <p class="o-forms-input__error">
+      Please accept our terms &amp; conditions
+    </p>
+  </label>
+</div>
+`;
+
 exports[`AcceptTerms renders with an error 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"

package/components/__snapshots__/payment-term.spec.js.snap

@@ -18,9 +18,9 @@ exports[`PaymentTerm When using custom options renders when not using an option
         <span class="ncf__payment-term__discount">
           Best offer - 33% off RRP
         </span>
-        <span class="ncf__payment-term__title">
+        <span class="ncf__payment-term__title ncf__payment-term__title--large-price">
           Annual
-          <span class="ncf__regular">
+          <span class="ncf__regular ncf__payment-term__sub-title">
             (Renews annually unless cancelled)
           </span>
         </span>
@@ -48,7 +48,7 @@ exports[`PaymentTerm When using custom options renders when not using an option
         <span class="ncf__payment-term__discount">
           Save 10% off RRP
         </span>
-        <span class="ncf__payment-term__title">
+        <span class="ncf__payment-term__title ncf__payment-term__title--large-price">
           12 Month Subscription
         </span>
         <div>

package/components/__snapshots__/payment-type.spec.js.snap

@@ -523,6 +523,179 @@ exports[`PaymentType render with enablePaypal 1`] = `
 </div>
 `;
 
+exports[`PaymentType render with isSingleTerm 1`] = `
+<div class="ncf__security-seal">
+</div>
+<div id="paymentTypeField"
+     class="o-forms-field"
+>
+  <div class="o-forms-input o-forms-input--radio-box ncf__payment-type-selector">
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--creditcard ncf__hidden">
+      <label for="creditcard">
+        <input type="radio"
+               name="paymentType"
+               value="creditcard"
+               id="creditcard"
+               aria-label="Credit / Debit Card"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Credit / Debit Card
+        </span>
+      </label>
+    </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--paypal ncf__hidden">
+      <label for="paypal">
+        <input type="radio"
+               name="paymentType"
+               value="paypal"
+               id="paypal"
+               aria-label="PayPal"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          PayPal
+        </span>
+      </label>
+    </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--directdebit ncf__hidden">
+      <label for="directdebit">
+        <input type="radio"
+               name="paymentType"
+               value="directdebit"
+               id="directdebit"
+               aria-label="Direct Debit"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Direct Debit
+        </span>
+      </label>
+    </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--applepay ncf__hidden">
+      <label for="applepay">
+        <input type="radio"
+               name="paymentType"
+               value="applepay"
+               id="applepay"
+               aria-label="Apple Pay"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Apple Pay
+        </span>
+      </label>
+    </div>
+  </div>
+  <div class="o-forms-input__error">
+    Please enter a valid payment type
+  </div>
+  <label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
+         for="payFasterNextTime"
+  >
+    <input type="checkbox"
+           id="payFasterNextTime"
+           name="payFasterNextTime"
+           value="true"
+    >
+    <span class="o-forms-input__label">
+      Use these details to pay faster next time
+    </span>
+  </label>
+</div>
+`;
+
+exports[`PaymentType render with isSingleTermChecked 1`] = `
+<div class="ncf__security-seal">
+</div>
+<div id="paymentTypeField"
+     class="o-forms-field"
+>
+  <div class="o-forms-input o-forms-input--radio-box ncf__payment-type-selector">
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--creditcard ncf__hidden">
+      <label for="creditcard">
+        <input type="radio"
+               name="paymentType"
+               value="creditcard"
+               id="creditcard"
+               aria-label="Credit / Debit Card"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Credit / Debit Card
+        </span>
+      </label>
+    </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--paypal ncf__hidden">
+      <label for="paypal">
+        <input type="radio"
+               name="paymentType"
+               value="paypal"
+               id="paypal"
+               aria-label="PayPal"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          PayPal
+        </span>
+      </label>
+    </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--directdebit ncf__hidden">
+      <label for="directdebit">
+        <input type="radio"
+               name="paymentType"
+               value="directdebit"
+               id="directdebit"
+               aria-label="Direct Debit"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Direct Debit
+        </span>
+      </label>
+    </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--applepay ncf__hidden">
+      <label for="applepay">
+        <input type="radio"
+               name="paymentType"
+               value="applepay"
+               id="applepay"
+               aria-label="Apple Pay"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Apple Pay
+        </span>
+      </label>
+    </div>
+  </div>
+  <div class="o-forms-input__error">
+    Please enter a valid payment type
+  </div>
+  <label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
+         for="payFasterNextTime"
+  >
+    <input type="checkbox"
+           id="payFasterNextTime"
+           name="payFasterNextTime"
+           value="true"
+           checked
+    >
+    <span class="o-forms-input__label">
+      Use these details to pay faster next time
+    </span>
+  </label>
+</div>
+`;
+
 exports[`PaymentType render with value 1`] = `
 <div class="ncf__security-seal">
 </div>

package/components/__snapshots__/personal-title.spec.js.snap

@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PersonalTitle can render a disable select 1`] = `
+<label id="titleField"
+       class="o-forms-field ncf__validation-error"
+       for="title"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Title
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--select">
+    <select id="title"
+            name="title"
+            data-trackable="title"
+            aria-required="true"
+            required
+            disabled
+    >
+      <option value>
+        Please select a title
+      </option>
+      <option value="Mr">
+        Mr
+      </option>
+      <option value="Mrs">
+        Mrs
+      </option>
+      <option value="Miss">
+        Miss
+      </option>
+      <option value="Ms">
+        Ms
+      </option>
+    </select>
+    <span class="o-forms-input__error">
+      Please select your personal title
+    </span>
+  </span>
+</label>
+`;
+
+exports[`PersonalTitle can render an error message 1`] = `
+<label id="titleField"
+       class="o-forms-field ncf__validation-error"
+       for="title"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Title
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--select o-forms-input--invalid">
+    <select id="title"
+            name="title"
+            data-trackable="title"
+            aria-required="true"
+            required
+    >
+      <option value>
+        Please select a title
+      </option>
+      <option value="Mr">
+        Mr
+      </option>
+      <option value="Mrs">
+        Mrs
+      </option>
+      <option value="Miss">
+        Miss
+      </option>
+      <option value="Ms">
+        Ms
+      </option>
+    </select>
+    <span class="o-forms-input__error">
+      Please select your personal title
+    </span>
+  </span>
+</label>
+`;
+
+exports[`PersonalTitle can render an initial selected value 1`] = `
+<label id="titleField"
+       class="o-forms-field ncf__validation-error"
+       for="title"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Title
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--select">
+    <select id="title"
+            name="title"
+            data-trackable="title"
+            aria-required="true"
+            required
+    >
+      <option value>
+        Please select a title
+      </option>
+      <option value="Mr">
+        Mr
+      </option>
+      <option value="Mrs">
+        Mrs
+      </option>
+      <option value="Miss">
+        Miss
+      </option>
+      <option value="Ms">
+        Ms
+      </option>
+    </select>
+    <span class="o-forms-input__error">
+      Please select your personal title
+    </span>
+  </span>
+</label>
+`;
+
+exports[`PersonalTitle render a select with a label 1`] = `
+<label id="titleField"
+       class="o-forms-field ncf__validation-error"
+       for="title"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Title
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--select">
+    <select id="title"
+            name="title"
+            data-trackable="title"
+            aria-required="true"
+            required
+    >
+      <option value>
+        Please select a title
+      </option>
+      <option value="Mr">
+        Mr
+      </option>
+      <option value="Mrs">
+        Mrs
+      </option>
+      <option value="Miss">
+        Miss
+      </option>
+      <option value="Ms">
+        Ms
+      </option>
+    </select>
+    <span class="o-forms-input__error">
+      Please select your personal title
+    </span>
+  </span>
+</label>
+`;

package/components/__snapshots__/progress-indicator.spec.js.snap

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ProgressIndicator renders completed items with disabled links 1`] = `
+<div class="ncf__stepped-progress o-stepped-progress"
+     data-o-component="o-stepped-progress"
+>
+  <ol class="o-stepped-progress__steps">
+    <li>
+      <span class="o-stepped-progress__step o-stepped-progress__step--complete">
+        <span class="o-stepped-progress__label">
+          Item name
+          <span class="o-stepped-progress__status">
+            (completed)
+          </span>
+        </span>
+      </span>
+    </li>
+  </ol>
+</div>
+`;
+
 exports[`ProgressIndicator renders items that are complete 1`] = `
 <div class="ncf__stepped-progress o-stepped-progress"
      data-o-component="o-stepped-progress"

package/components/accept-terms.jsx

@@ -19,6 +19,7 @@ export function AcceptTerms({
 	transitionType = null,
 	isPrintProduct = false,
 	specialTerms = null,
+	isSingleTerm = false,
 }) {
 	const divProps = {
 		id: 'acceptTermsField',
@@ -132,22 +133,24 @@ export function AcceptTerms({
 
 	const transitionTerms = isTransition && (
 		<>
-			<li>
-				<span className="terms-transition">
-					I give consent for my chosen payment method to be charged
-					automatically at the end of each subscription term until I cancel it
-					by contacting{' '}
-					<a
-						className="ncf__link--external"
-						href="https://help.ft.com/help/contact-us/"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						customer care through chat, phone or email
-					</a>
-					.
-				</span>
-			</li>
+			{!isSingleTerm && (
+				<li>
+					<span className="terms-transition">
+						I give consent for my chosen payment method to be charged
+						automatically at the end of each subscription term until I cancel it
+						by contacting{' '}
+						<a
+							className="ncf__link--external"
+							href="https://help.ft.com/help/contact-us/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							customer care through chat, phone or email
+						</a>
+						.
+					</span>
+				</li>
+			)}
 			{transitionType === 'immediate' ? (
 				<li>
 					<span className="terms-transition terms-transition--immediate">
@@ -160,6 +163,9 @@ export function AcceptTerms({
 				<li>
 					<span className="terms-transition terms-transition--other">
 						By placing my order, I acknowledge that my subscription will start
+						{isSingleTerm
+							? ' and the chosen payment method will be charged '
+							: ' '}
 						on the date given above. Any cancellation notice received after that
 						date will take effect at the end of my subscription term and
 						previously paid amounts are non-refundable.
@@ -326,4 +332,5 @@ AcceptTerms.propTypes = {
 	transitionType: PropTypes.string,
 	isPrintProduct: PropTypes.bool,
 	specialTerms: PropTypes.string,
+	isSingleTerm: PropTypes.bool,
 };

package/components/accept-terms.spec.js

@@ -145,6 +145,16 @@ describe('AcceptTerms', () => {
 		expect(AcceptTerms).toRenderCorrectly(props);
 	});
 
+	it('renders appropriately if is transition with transition type other than immediate and is single term', () => {
+		const props = {
+			isTransition: true,
+			transitionType: 'foobar',
+			isSingleTerm: true,
+		};
+
+		expect(AcceptTerms).toRenderCorrectly(props);
+	});
+
 	it('renders appropriately if is B2C Partnership', () => {
 		const props = { isB2cPartnership: true };
 

package/components/index.jsx

@@ -29,6 +29,7 @@ export { FirstName } from './first-name';
 export { Form } from './form';
 export { Industry } from './industry';
 export { JobTitle } from './job-title';
+export { PersonalTitle } from './personal-title';
 export { LastName } from './last-name';
 export { LicenceConfirmation } from './licence-confirmation';
 export { LicenceHeader } from './licence-header';

package/components/payment-term.jsx

@@ -170,11 +170,18 @@ export function PaymentTerm({
 				>
 					{createDiscount()}
 
-					<span className="ncf__payment-term__title">
+					<span
+						className={classNames([
+							'ncf__payment-term__title',
+							{ 'ncf__payment-term__title--large-price': largePrice },
+						])}
+					>
 						{showTrialCopyInTitle ? 'Trial: Premium Digital - ' : ''}
 						{nameMap[option.name] ? title : option.title}{' '}
 						{option.subTitle && (
-							<span className="ncf__regular">{option.subTitle}</span>
+							<span className="ncf__regular ncf__payment-term__sub-title">
+								{option.subTitle}
+							</span>
 						)}
 					</span>
 

package/components/payment-type.jsx

@@ -39,6 +39,8 @@ export function PaymentType({
 	fieldId = 'paymentTypeField',
 	inputId = 'paymentType',
 	value,
+	isSingleTerm = false,
+	isSingleTermChecked = false,
 }) {
 	const createSecuritySeal = () => {
 		return (
@@ -220,6 +222,15 @@ export function PaymentType({
 		);
 	};
 
+	const inputCheckProps = {
+		id: 'payFasterNextTime',
+		type: 'checkbox',
+		name: 'payFasterNextTime',
+		value: 'true',
+		required: false,
+		...(isSingleTermChecked && { defaultChecked: true }),
+	};
+
 	return (
 		<React.Fragment>
 			{createSecuritySeal()}
@@ -236,6 +247,17 @@ export function PaymentType({
 				{createDirectDebitPanel()}
 
 				{createZuoraPanel()}
+
+				{isSingleTerm && (
+					<>
+						<label className='o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox' htmlFor="payFasterNextTime">
+							<input {...inputCheckProps}/>
+							<span className="o-forms-input__label">
+								Use these details to pay faster next time
+							</span>
+						</label>
+					</>
+				)}
 			</div>
 		</React.Fragment>
 	);
@@ -251,4 +273,6 @@ PaymentType.propTypes = {
 	fieldId: PropTypes.string,
 	inputId: PropTypes.string,
 	value: PropTypes.string,
+	isSingleTerm: PropTypes.bool,
+	isSingleTermChecked: PropTypes.bool,
 };

package/components/payment-type.spec.js

@@ -57,4 +57,21 @@ describe('PaymentType', () => {
 
 		expect(PaymentType).toRenderCorrectly({}, props);
 	});
+
+	it('render with isSingleTerm', () => {
+		const props = {
+			isSingleTerm: true,
+		};
+
+		expect(PaymentType).toRenderCorrectly(props);
+	});
+
+	it('render with isSingleTermChecked', () => {
+		const props = {
+			isSingleTerm: true,
+			isSingleTermChecked: true,
+		};
+
+		expect(PaymentType).toRenderCorrectly(props);
+	});
 });

package/components/personal-title.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const defaultPersonalTitles = [
+	{ code: 'Mr', description: 'Mr' },
+	{ code: 'Mrs', description: 'Mrs' },
+	{ code: 'Miss', description: 'Miss' },
+	{ code: 'Ms', description: 'Ms' },
+];
+
+export function PersonalTitle ({
+	value,
+	isDisabled = false,
+	hasError = false,
+	fieldId = 'titleField',
+	selectId = 'title',
+	selectName = 'title',
+	options = defaultPersonalTitles,
+	fieldLabel = 'Title',
+	isRequired = true,
+}) {
+	const inputWrapperClassName = classNames([
+		'o-forms-input',
+		'o-forms-input--select',
+		{ 'o-forms-input--invalid': hasError },
+	]);
+
+	const fieldTitleClassName = classNames([
+		'o-forms-title',
+		{ 'o-forms-field--optional': !isRequired },
+	]);
+
+	return (
+		<label
+			id={fieldId}
+			className="o-forms-field ncf__validation-error"
+			htmlFor={selectId}
+		>
+			<span className={fieldTitleClassName}>
+				<span className="o-forms-title__main">{fieldLabel}</span>
+			</span>
+			<span className={inputWrapperClassName}>
+				<select
+					id={selectId}
+					name={selectName}
+					data-trackable="title"
+					aria-required={isRequired}
+					required={isRequired}
+					disabled={isDisabled}
+					defaultValue={value}
+				>
+					<option value="">Please select a title</option>
+					{options.map(({ code, description }) => {
+						return (
+							<option key={code} value={code}>
+								{description}
+							</option>
+						);
+					})}
+				</select>
+				<span className="o-forms-input__error">
+					Please select your personal title
+				</span>
+			</span>
+		</label>
+	);
+}
+
+PersonalTitle.propTypes = {
+	value: PropTypes.string,
+	isDisabled: PropTypes.bool,
+	hasError: PropTypes.bool,
+	fieldId: PropTypes.string,
+	selectId: PropTypes.string,
+	selectName: PropTypes.string,
+	options: PropTypes.arrayOf(
+		PropTypes.shape({
+			code: PropTypes.string,
+			description: PropTypes.string,
+		})
+	),
+	fieldLabel: PropTypes.string,
+	isRequired: PropTypes.bool,
+};
+

package/components/personal-title.spec.js

@@ -0,0 +1,93 @@
+import { PersonalTitle } from './index';
+import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
+import { defaultPersonalTitles } from './personal-title';
+
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+expect.extend(expectToRenderCorrectly);
+
+describe('PersonalTitle', () => {
+	it('render a select with a label', () => {
+		const props = {
+			options: defaultPersonalTitles
+		};
+
+		expect(PersonalTitle).toRenderCorrectly(props);
+	});
+
+	it('can render an initial selected value', () => {
+		const props = {
+			options: defaultPersonalTitles,
+			value: 'mr',
+		};
+
+		expect(PersonalTitle).toRenderCorrectly(props);
+	});
+
+	it('can render a disable select', () => {
+		const props = {
+			options: defaultPersonalTitles,
+			isDisabled: true,
+		};
+
+		expect(PersonalTitle).toRenderCorrectly(props);
+	});
+
+	it('can render an error message', () => {
+		const props = {
+			options: defaultPersonalTitles,
+			hasError: true,
+		};
+
+		expect(PersonalTitle).toRenderCorrectly(props);
+	});
+
+	it('can override id and name for select', () => {
+		const props = {
+			selectId: 'selectId',
+			selectName: 'selectName',
+		};
+		const component = mount(PersonalTitle(props));
+		const select = component.find('select#selectId');
+
+		expect(select.exists()).toBe(true);
+	});
+
+	it('can override id for field', () => {
+		const props = {
+			fieldId: 'fieldID',
+		};
+		const component = mount(PersonalTitle(props));
+		const field = component.find('#fieldID');
+
+		expect(field.exists()).toBe(true);
+	});
+
+	it('renders with default label wording', () => {
+		const props = {};
+
+		const component = mount(PersonalTitle(props));
+
+		expect(component.find('.o-forms-title__main').text()).toEqual(
+			'Title'
+		);
+	});
+
+	it('renders with custom label wording', () => {
+		const props = { fieldLabel: 'PersonalTitle' };
+
+		const component = mount(PersonalTitle(props));
+
+		expect(component.find('.o-forms-title__main').text()).toEqual('PersonalTitle');
+	});
+
+	it('renders with optional title class, when not required', () => {
+		const props = { isRequired: false };
+		const component = mount(PersonalTitle(props));
+
+		expect(component.find('.o-forms-title.o-forms-field--optional').length).toEqual(1);
+	});
+});

package/components/personal-title.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PersonalTitle } from './personal-title';
+
+export default {
+	title: 'PersonalTitle',
+	component: PersonalTitle,
+};
+
+export const Basic = (args) => <PersonalTitle {...args} />;
+
+export const CustomPersonalTitle = (args) => <PersonalTitle {...args} />;
+CustomPersonalTitle.args = {
+	options: [
+		{ code: 'Mr', description: 'Mr' },
+		{ code: 'Mrs', description: 'Mrs' },
+	],
+};

package/components/progress-indicator.jsx

@@ -2,9 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function ProgressIndicator({ items = [] }) {
+export function ProgressIndicator({ items = [], disableLinks = false }) {
 	function getElementsForComplete(item) {
-		return (
+		return disableLinks? (
+			<span className="o-stepped-progress__step o-stepped-progress__step--complete">
+				<span className="o-stepped-progress__label">
+					{item.name}
+					<span className="o-stepped-progress__status">(completed)</span>
+				</span>
+			</span>
+		) : (
 			<a
 				href={item.url}
 				className="o-stepped-progress__step o-stepped-progress__step--complete"
@@ -66,4 +73,5 @@ ProgressIndicator.propTypes = {
 			url: PropTypes.string,
 		})
 	),
+	disableLinks: PropTypes.bool,
 };

package/components/progress-indicator.spec.js

@@ -61,4 +61,20 @@ describe('ProgressIndicator', () => {
 
 		expect(ProgressIndicator).toRenderCorrectly(props);
 	});
+
+	it('renders completed items with disabled links', () => {
+		const props = {
+			items: [
+				{
+					url: 'https://foo.com',
+					name: 'Item name',
+					isComplete: true,
+					isCurrent: false,
+				},
+			],
+			disableLinks: true,
+		};
+
+		expect(ProgressIndicator).toRenderCorrectly(props);
+	});
 });

package/components/progress-indicator.stories.js

@@ -29,3 +29,28 @@ Basic.args = {
 		},
 	],
 };
+
+export const WithLinksDisabled = (args) => <ProgressIndicator {...args} />;
+WithLinksDisabled.args = {
+	items: [
+		{
+			isComplete: true,
+			isCurrent: false,
+			name: 'Get Business',
+			url: 'https://ft.com',
+		},
+		{
+			isComplete: true,
+			isCurrent: true,
+			name: '????',
+			url: 'https://google.com',
+		},
+		{
+			isComplete: false,
+			isCurrent: false,
+			name: 'Profit',
+			url: 'https://ft.com',
+		},
+	],
+	disableLinks: true,
+};

package/dist/accept-terms.js

@@ -49,7 +49,9 @@ function AcceptTerms(_ref) {
       _ref$isPrintProduct = _ref.isPrintProduct,
       isPrintProduct = _ref$isPrintProduct === void 0 ? false : _ref$isPrintProduct,
       _ref$specialTerms = _ref.specialTerms,
-      specialTerms = _ref$specialTerms === void 0 ? null : _ref$specialTerms;
+      specialTerms = _ref$specialTerms === void 0 ? null : _ref$specialTerms,
+      _ref$isSingleTerm = _ref.isSingleTerm,
+      isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm;
 
   var divProps = _objectSpread(_objectSpread({
     id: 'acceptTermsField',
@@ -114,7 +116,7 @@ function AcceptTerms(_ref) {
     className: "terms-corp-signup"
   }, "This trial is to demonstrate the value of a group subscription and we\u2019ll contact you during your trial.")));
 
-  var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+  var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition"
   }, "I give consent for my chosen payment method to be charged automatically at the end of each subscription term until I cancel it by contacting", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
@@ -125,7 +127,7 @@ function AcceptTerms(_ref) {
     className: "terms-transition terms-transition--immediate"
   }, "By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--other"
-  }, "By placing my order, I acknowledge that my subscription will start on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+  }, "By placing my order, I acknowledge that my subscription will start", isSingleTerm ? ' and the chosen payment method will be charged ' : ' ', "on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
@@ -205,5 +207,6 @@ AcceptTerms.propTypes = {
   isTransition: _propTypes["default"].bool,
   transitionType: _propTypes["default"].string,
   isPrintProduct: _propTypes["default"].bool,
-  specialTerms: _propTypes["default"].string
+  specialTerms: _propTypes["default"].string,
+  isSingleTerm: _propTypes["default"].bool
 };

package/dist/index.js

@@ -189,6 +189,12 @@ Object.defineProperty(exports, "JobTitle", {
     return _jobTitle.JobTitle;
   }
 });
+Object.defineProperty(exports, "PersonalTitle", {
+  enumerable: true,
+  get: function get() {
+    return _personalTitle.PersonalTitle;
+  }
+});
 Object.defineProperty(exports, "LastName", {
   enumerable: true,
   get: function get() {
@@ -396,6 +402,8 @@ var _industry = require("./industry");
 
 var _jobTitle = require("./job-title");
 
+var _personalTitle = require("./personal-title");
+
 var _lastName = require("./last-name");
 
 var _licenceConfirmation = require("./licence-confirmation");

package/dist/payment-term.js

@@ -153,9 +153,11 @@ function PaymentTerm(_ref) {
       htmlFor: option.value,
       className: "o-forms-input__label ncf__payment-term__label"
     }, createDiscount(), /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ncf__payment-term__title"
+      className: (0, _classnames["default"])(['ncf__payment-term__title', {
+        'ncf__payment-term__title--large-price': largePrice
+      }])
     }, showTrialCopyInTitle ? 'Trial: Premium Digital - ' : '', nameMap[option.name] ? title : option.title, ' ', option.subTitle && /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ncf__regular"
+      className: "ncf__regular ncf__payment-term__sub-title"
     }, option.subTitle)), createDescription()));
   };
 

package/dist/payment-type.js

@@ -56,7 +56,11 @@ function PaymentType(_ref) {
       fieldId = _ref$fieldId === void 0 ? 'paymentTypeField' : _ref$fieldId,
       _ref$inputId = _ref.inputId,
       inputId = _ref$inputId === void 0 ? 'paymentType' : _ref$inputId,
-      value = _ref.value;
+      value = _ref.value,
+      _ref$isSingleTerm = _ref.isSingleTerm,
+      isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
+      _ref$isSingleTermChec = _ref.isSingleTermChecked,
+      isSingleTermChecked = _ref$isSingleTermChec === void 0 ? false : _ref$isSingleTermChec;
 
   var createSecuritySeal = function createSecuritySeal() {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -180,6 +184,16 @@ function PaymentType(_ref) {
     });
   };
 
+  var inputCheckProps = _objectSpread({
+    id: 'payFasterNextTime',
+    type: 'checkbox',
+    name: 'payFasterNextTime',
+    value: 'true',
+    required: false
+  }, isSingleTermChecked && {
+    defaultChecked: true
+  });
+
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, createSecuritySeal(), /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     className: "o-forms-field"
@@ -187,7 +201,12 @@ function PaymentType(_ref) {
     className: "o-forms-input o-forms-input--radio-box ncf__payment-type-selector"
   }, createPaymentTypes()), /*#__PURE__*/_react["default"].createElement("div", {
     className: "o-forms-input__error"
-  }, "Please enter a valid payment type"), createDirectDebitPanel(), createZuoraPanel()));
+  }, "Please enter a valid payment type"), createDirectDebitPanel(), createZuoraPanel(), isSingleTerm && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
+    className: "o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox",
+    htmlFor: "payFasterNextTime"
+  }, /*#__PURE__*/_react["default"].createElement("input", inputCheckProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label"
+  }, "Use these details to pay faster next time")))));
 }
 
 PaymentType.propTypes = {
@@ -199,5 +218,7 @@ PaymentType.propTypes = {
   showPaypalCustomerCareMessage: _propTypes["default"].bool,
   fieldId: _propTypes["default"].string,
   inputId: _propTypes["default"].string,
-  value: _propTypes["default"].string
+  value: _propTypes["default"].string,
+  isSingleTerm: _propTypes["default"].bool,
+  isSingleTermChecked: _propTypes["default"].bool
 };

package/dist/personal-title.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PersonalTitle = PersonalTitle;
+exports.defaultPersonalTitles = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var defaultPersonalTitles = [{
+  code: 'Mr',
+  description: 'Mr'
+}, {
+  code: 'Mrs',
+  description: 'Mrs'
+}, {
+  code: 'Miss',
+  description: 'Miss'
+}, {
+  code: 'Ms',
+  description: 'Ms'
+}];
+exports.defaultPersonalTitles = defaultPersonalTitles;
+
+function PersonalTitle(_ref) {
+  var value = _ref.value,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      _ref$fieldId = _ref.fieldId,
+      fieldId = _ref$fieldId === void 0 ? 'titleField' : _ref$fieldId,
+      _ref$selectId = _ref.selectId,
+      selectId = _ref$selectId === void 0 ? 'title' : _ref$selectId,
+      _ref$selectName = _ref.selectName,
+      selectName = _ref$selectName === void 0 ? 'title' : _ref$selectName,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? defaultPersonalTitles : _ref$options,
+      _ref$fieldLabel = _ref.fieldLabel,
+      fieldLabel = _ref$fieldLabel === void 0 ? 'Title' : _ref$fieldLabel,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? true : _ref$isRequired;
+  var inputWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var fieldTitleClassName = (0, _classnames["default"])(['o-forms-title', {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    htmlFor: selectId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: fieldTitleClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, fieldLabel)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassName
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    id: selectId,
+    name: selectName,
+    "data-trackable": "title",
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    value: ""
+  }, "Please select a title"), options.map(function (_ref2) {
+    var code = _ref2.code,
+        description = _ref2.description;
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: code,
+      value: code
+    }, description);
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, "Please select your personal title")));
+}
+
+PersonalTitle.propTypes = {
+  value: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  hasError: _propTypes["default"].bool,
+  fieldId: _propTypes["default"].string,
+  selectId: _propTypes["default"].string,
+  selectName: _propTypes["default"].string,
+  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    code: _propTypes["default"].string,
+    description: _propTypes["default"].string
+  })),
+  fieldLabel: _propTypes["default"].string,
+  isRequired: _propTypes["default"].bool
+};

package/dist/progress-indicator.js

@@ -15,10 +15,18 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function ProgressIndicator(_ref) {
   var _ref$items = _ref.items,
-      items = _ref$items === void 0 ? [] : _ref$items;
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$disableLinks = _ref.disableLinks,
+      disableLinks = _ref$disableLinks === void 0 ? false : _ref$disableLinks;
 
   function getElementsForComplete(item) {
-    return /*#__PURE__*/_react["default"].createElement("a", {
+    return disableLinks ? /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-stepped-progress__step o-stepped-progress__step--complete"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-stepped-progress__label"
+    }, item.name, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-stepped-progress__status"
+    }, "(completed)"))) : /*#__PURE__*/_react["default"].createElement("a", {
       href: item.url,
       className: "o-stepped-progress__step o-stepped-progress__step--complete",
       "data-trackable": "change-progress"
@@ -62,5 +70,6 @@ ProgressIndicator.propTypes = {
     isCurrent: _propTypes["default"].bool,
     name: _propTypes["default"].string,
     url: _propTypes["default"].string
-  }))
+  })),
+  disableLinks: _propTypes["default"].bool
 };

package/package.json

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

package/styles/payment-term.scss

@@ -7,7 +7,7 @@
 		@include oGridRespondTo(L) {
 			&__options-grid {
 				display: flex;
-				align-items: baseline;
+				align-items: flex-end;
 
 				> * {
 					flex: 1;
@@ -77,5 +77,13 @@
 			margin-bottom: 0;
 			margin-top: oSpacingByName('s1');
 		}
+
+		&__title--large-price {
+			@include oTypographySans($scale: 0, $include-font-family: false);
+		}
+
+		&__sub-title {
+			@include oTypographySans($scale: -1, $include-font-family: false);
+		}
 	}
 }

package/styles/payment-type.scss

@@ -110,3 +110,7 @@
 .ncf__payment-type-paypal-message {
 	margin-bottom: oSpacingByName('s3');
 }
+
+.o-forms-input.o-forms-input--checkbox.o-forms-input--suffix.ncf__payment-type-pay-faster-next-time-checkbox {
+	margin-top: oSpacingByName('s3');
+}