@financial-times/n-conversion-forms 27.4.3 → 27.6.0

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

@@ -60,6 +60,7 @@ exports[`Debug renders with isTest 1`] = `
 		checkoutVisa: '4242424242424242',
 		checkout3dsChallenge: 'Checkout1!',
 		chaseVisa: '4011361100000010',
+		verificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',
 	};
 
 	function logout () {
@@ -219,6 +220,7 @@ exports[`Debug renders with showHelpers 1`] = `
 		checkoutVisa: '4242424242424242',
 		checkout3dsChallenge: 'Checkout1!',
 		chaseVisa: '4011361100000010',
+		verificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',
 	};
 
 	function logout () {

package/components/__snapshots__/deferred-billing-terms.spec.js.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeferredBillingTerms renders appropriately and checked 1`] = `""`;
+
+exports[`DeferredBillingTerms renders appropriately if a isDeferredBilling 1`] = `
+<p class="o-forms-input o-forms-input--checkbox">
+  <span class="ncf__paragraph">
+    I confirm I am 16 years or older and have read and agree to the
+    <a class="ncf__link--external"
+       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+       title="FT Legal Terms and Conditions help page"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-trackable="terms-and-conditions"
+    >
+      Terms &amp; Conditions
+    </a>
+    .
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox">
+  <span class="ncf__paragraph">
+    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 Customer Care through chat, phone or email.
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox">
+  <span class="ncf__paragraph">
+    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.
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox">
+  <span class="ncf__paragraph">
+    Find out more about our cancellation policy in our
+    <a class="ncf__link--external"
+       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+       title="FT Legal Terms and Conditions help page"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-trackable="terms-and-conditions"
+    >
+      Terms &amp; Conditions
+    </a>
+    .
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox">
+  <span class="ncf__paragraph">
+    Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.
+    <a class="ncf__link--external"
+       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+       title="FT Legal Terms and Conditions help page"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-trackable="terms-and-conditions"
+    >
+      Terms &amp; Conditions
+    </a>
+    .
+  </span>
+</p>
+<div id="acceptTermsField"
+     class="o-forms-field o-layout-typography ncf__validation-error"
+     data-validate="required,checked"
+>
+  <label class="o-forms-input o-forms-input--checkbox"
+         for="accept-deferred-billing-terms"
+         id="accept-deferred-terms"
+  >
+    <input type="checkbox"
+           id="accept-deferred-billing-terms"
+           name="accept-deferred-billing-terms"
+           value="true"
+           data-trackable="field-terms"
+           aria-required="true"
+           required
+    >
+    <span class="o-forms-input__label">
+      I agree with terms &amp; conditions.
+    </span>
+    <p class="o-forms-input__error">
+      Please accept our terms &amp;amp; conditions
+    </p>
+  </label>
+</div>
+`;
+
+exports[`DeferredBillingTerms renders appropriately if all props are set to false - no rendering of the component 1`] = `""`;
+
+exports[`DeferredBillingTerms renders appropriately if all props are set to true -  rendering of the component 1`] = `
+<p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
+  <span class="ncf__paragraph">
+    I confirm I am 16 years or older and have read and agree to the
+    <a class="ncf__link--external"
+       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+       title="FT Legal Terms and Conditions help page"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-trackable="terms-and-conditions"
+    >
+      Terms &amp; Conditions
+    </a>
+    .
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
+  <span class="ncf__paragraph">
+    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 Customer Care through chat, phone or email.
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
+  <span class="ncf__paragraph">
+    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.
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
+  <span class="ncf__paragraph">
+    Find out more about our cancellation policy in our
+    <a class="ncf__link--external"
+       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+       title="FT Legal Terms and Conditions help page"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-trackable="terms-and-conditions"
+    >
+      Terms &amp; Conditions
+    </a>
+    .
+  </span>
+</p>
+<p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
+  <span class="ncf__paragraph">
+    Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.
+    <a class="ncf__link--external"
+       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+       title="FT Legal Terms and Conditions help page"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-trackable="terms-and-conditions"
+    >
+      Terms &amp; Conditions
+    </a>
+    .
+  </span>
+</p>
+<div id="acceptTermsField"
+     class="o-forms-field o-layout-typography ncf__validation-error"
+     data-validate="required,checked"
+>
+  <label class="o-forms-input o-forms-input--checkbox o-forms-input--invalid"
+         for="accept-deferred-billing-terms"
+         id="accept-deferred-terms"
+  >
+    <input type="checkbox"
+           id="accept-deferred-billing-terms"
+           name="accept-deferred-billing-terms"
+           value="true"
+           data-trackable="field-terms"
+           aria-required="true"
+           required
+    >
+    <span class="o-forms-input__label">
+      I agree with terms &amp; conditions.
+    </span>
+    <p class="o-forms-input__error">
+      Please accept our terms &amp;amp; conditions
+    </p>
+  </label>
+</div>
+`;
+
+exports[`DeferredBillingTerms renders with an error 1`] = `""`;
+
+exports[`DeferredBillingTerms renders with default props 1`] = `""`;

package/components/debug.jsx

@@ -86,6 +86,7 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 		checkoutVisa: '4242424242424242',
 		checkout3dsChallenge: 'Checkout1!',
 		chaseVisa: '4011361100000010',
+		verificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',
 	};
 
 	function logout () {

package/components/deferred-billing-terms.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+const CONSENT_AGE = 16;
+export function DeferredBillingTerms ({ isDeferredBilling = false, checkBoxTrackableAttr = 'field-terms', trackableAttr = 'deferred-billing-terms', errorMessage = 'Please accept our terms & conditions', inputId = 'accept-deferred-billing-terms', fieldId = 'accept-deferred-terms', isChecked = false, hasError = false }) {
+	const labelClassName = classNames([
+		'o-forms-input',
+		'o-forms-input--checkbox',
+		{ 'o-forms-input--invalid': hasError },
+	]);
+
+	const inputProps = {
+		id: `${inputId}`,
+		type: 'checkbox',
+		name: `${inputId}`,
+		value: 'true',
+		'data-trackable': checkBoxTrackableAttr,
+		'aria-required': 'true',
+		required: true,
+		...(isChecked && { defaultChecked: true }),
+	};
+	const divProps = {
+		id: 'acceptTermsField',
+		className: 'o-forms-field o-layout-typography ncf__validation-error',
+		'data-validate': 'required,checked',
+		...(isChecked && { 'data-trackable': trackableAttr }),
+	};
+	return isDeferredBilling && (<>
+		<p className={labelClassName}>
+			<span className="ncf__paragraph">
+				I confirm I am {CONSENT_AGE} years or older and have read and agree to the
+				{' '}
+				<a
+					className="ncf__link--external"
+					href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+					title="FT Legal Terms and Conditions help page"
+					target="_blank"
+					rel="noopener noreferrer"
+					data-trackable="terms-and-conditions"
+				>
+					Terms &amp; Conditions
+				</a>
+				.
+			</span>
+		</p>
+		<p className={labelClassName}>
+			<span className="ncf__paragraph">
+				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 Customer Care through chat, phone or email.
+			</span>
+		</p>
+		<p className={labelClassName}>
+			<span className="ncf__paragraph">
+				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.
+			</span>
+		</p>
+		<p className={labelClassName}>
+			<span className="ncf__paragraph">
+				Find out more about our cancellation policy in our {' '}
+				<a
+					className="ncf__link--external"
+					href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+					title="FT Legal Terms and Conditions help page"
+					target="_blank"
+					rel="noopener noreferrer"
+					data-trackable="terms-and-conditions"
+				>
+					Terms &amp; Conditions
+				</a>
+				.
+			</span>
+		</p>
+		<p className={labelClassName}>
+			<span className="ncf__paragraph">
+				Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.
+				{' '}	<a
+					className="ncf__link--external"
+					href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+					title="FT Legal Terms and Conditions help page"
+					target="_blank"
+					rel="noopener noreferrer"
+					data-trackable="terms-and-conditions"
+				>
+					Terms &amp; Conditions
+				</a>
+				.
+			</span>
+		</p>
+		<div {...divProps}>
+			<label className={labelClassName} htmlFor={inputId} id={fieldId}>
+				<input {...inputProps} />
+				<span className="o-forms-input__label">
+					I agree with terms &amp; conditions.
+
+				</span>
+				<p className="o-forms-input__error">
+					{errorMessage}
+				</p>
+			</label>
+		</div>
+	</>);
+
+};
+
+DeferredBillingTerms.propTypes = {
+	hasError: PropTypes.bool,
+	isChecked: PropTypes.bool,
+	isDeferredBilling: PropTypes.bool,
+	fieldId: PropTypes.string,
+	inputId: PropTypes.string,
+	trackableAttr: PropTypes.string,
+	errorMessage: PropTypes.string
+};

package/components/deferred-billing-terms.spec.js

@@ -0,0 +1,42 @@
+import { DeferredBillingTerms } from './index';
+import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
+
+expect.extend(expectToRenderCorrectly);
+
+describe('DeferredBillingTerms', () => {
+	it('renders with default props', () => {
+		const props = {};
+
+		expect(DeferredBillingTerms).toRenderCorrectly(props);
+	});
+
+	it('renders with an error', () => {
+		const props = { hasError: true };
+
+		expect(DeferredBillingTerms).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately if a isDeferredBilling', () => {
+		const props = { isDeferredBilling: true };
+
+		expect(DeferredBillingTerms).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately and checked', () => {
+		const props = { isChecked: true };
+
+		expect(DeferredBillingTerms).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately if all props are set to false - no rendering of the component', () => {
+		const props = { isChecked: false, isDeferredBilling: false, hasError: false };
+
+		expect(DeferredBillingTerms).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately if all props are set to true -  rendering of the component', () => {
+		const props = { iisChecked: true, isDeferredBilling: true, hasError: true };
+
+		expect(DeferredBillingTerms).toRenderCorrectly(props);
+	});
+});

package/components/deferred-billing-terms.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DeferredBillingTerms } from './deferred-billing-terms';
+
+export default {
+	title: 'Deferred Billing Terms',
+	component: DeferredBillingTerms,
+	argTypes: {
+		hasError: { control: 'boolean' },
+		isChecked: { control: 'boolean' },
+		inputId: { control: 'string' },
+		fieldId: { control: 'string' },
+		trackableAttr: { control: 'string' },
+		errorMessage: { control: 'string' },
+		isDeferredBilling: { control: 'boolean' }
+	}
+};
+
+export const Basic = (args) => <DeferredBillingTerms {...args} />;
+Basic.args = {};
+
+export const CheckedFlow = (args) => <DeferredBillingTerms {...args} />;
+CheckedFlow.args = {
+	isChecked: true,
+	isDeferredBilling: true,
+	hasError: false
+};

package/components/index.jsx

@@ -54,3 +54,4 @@ export { GraduationDate } from './graduation-date';
 export { LiteSubConfirmation } from './lite-sub-confirmation';
 export { GoogleSignIn } from './google-sign-in';
 export { TextInput } from './text-input';
+export { DeferredBillingTerms } from './deferred-billing-terms';

package/dist/debug.js

@@ -33,7 +33,7 @@ function Debug(_ref) {
     __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
   };
   var javascript = {
-    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'delivery test3',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
+    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'delivery test3',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t\tverificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
   };
   var style = {
     __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t.ncf__button--debug {\n\t\tpadding: 0px 5px;\n\t}\n\t"

package/dist/deferred-billing-terms.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeferredBillingTerms = DeferredBillingTerms;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var CONSENT_AGE = 16;
+
+function DeferredBillingTerms(_ref) {
+  var _ref$isDeferredBillin = _ref.isDeferredBilling,
+      isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin,
+      _ref$checkBoxTrackabl = _ref.checkBoxTrackableAttr,
+      checkBoxTrackableAttr = _ref$checkBoxTrackabl === void 0 ? 'field-terms' : _ref$checkBoxTrackabl,
+      _ref$trackableAttr = _ref.trackableAttr,
+      trackableAttr = _ref$trackableAttr === void 0 ? 'deferred-billing-terms' : _ref$trackableAttr,
+      _ref$errorMessage = _ref.errorMessage,
+      errorMessage = _ref$errorMessage === void 0 ? 'Please accept our terms &amp; conditions' : _ref$errorMessage,
+      _ref$inputId = _ref.inputId,
+      inputId = _ref$inputId === void 0 ? 'accept-deferred-billing-terms' : _ref$inputId,
+      _ref$fieldId = _ref.fieldId,
+      fieldId = _ref$fieldId === void 0 ? 'accept-deferred-terms' : _ref$fieldId,
+      _ref$isChecked = _ref.isChecked,
+      isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError;
+  var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
+    'o-forms-input--invalid': hasError
+  }]);
+
+  var inputProps = _objectSpread({
+    id: "".concat(inputId),
+    type: 'checkbox',
+    name: "".concat(inputId),
+    value: 'true',
+    'data-trackable': checkBoxTrackableAttr,
+    'aria-required': 'true',
+    required: true
+  }, isChecked && {
+    defaultChecked: true
+  });
+
+  var divProps = _objectSpread({
+    id: 'acceptTermsField',
+    className: 'o-forms-field o-layout-typography ncf__validation-error',
+    'data-validate': 'required,checked'
+  }, isChecked && {
+    'data-trackable': trackableAttr
+  });
+
+  return isDeferredBilling && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "I confirm I am ", CONSENT_AGE, " years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
+    title: "FT Legal Terms and Conditions help page",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "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 Customer Care through chat, phone or email.")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "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("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "Find out more about our cancellation policy in our ", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
+    title: "FT Legal Terms and Conditions help page",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.", ' ', " ", /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
+    title: "FT Legal Terms and Conditions help page",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("label", {
+    className: labelClassName,
+    htmlFor: inputId,
+    id: fieldId
+  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label"
+  }, "I agree with terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "o-forms-input__error"
+  }, errorMessage))));
+}
+
+;
+DeferredBillingTerms.propTypes = {
+  hasError: _propTypes["default"].bool,
+  isChecked: _propTypes["default"].bool,
+  isDeferredBilling: _propTypes["default"].bool,
+  fieldId: _propTypes["default"].string,
+  inputId: _propTypes["default"].string,
+  trackableAttr: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string
+};

package/dist/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "DecisionMaker", {
     return _decisionMaker.DecisionMaker;
   }
 });
+Object.defineProperty(exports, "DeferredBillingTerms", {
+  enumerable: true,
+  get: function get() {
+    return _deferredBillingTerms.DeferredBillingTerms;
+  }
+});
 Object.defineProperty(exports, "DeliveryAddress", {
   enumerable: true,
   get: function get() {
@@ -450,4 +456,6 @@ var _liteSubConfirmation = require("./lite-sub-confirmation");
 
 var _googleSignIn = require("./google-sign-in");
 
-var _textInput = require("./text-input");
+var _textInput = require("./text-input");
+
+var _deferredBillingTerms = require("./deferred-billing-terms");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "27.4.3",
+  "version": "27.6.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": {