@financial-times/n-conversion-forms 28.10.0 → 29.0.0

package/components/accept-terms-business.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export function AcceptTermsBusiness({
+	hasError = false,
+	isB2b = false,
+	isEmbedded = false,
+	isTrial = false,
+}) {
+	const divProps = {
+		id: 'acceptTermsField',
+		className: 'o-forms-field o-layout-typography ncf__validation-error',
+		'data-validate': 'required,checked',
+	};
+	const labelClassName = classNames([
+		'o-forms-input',
+		'o-forms-input--checkbox',
+		{
+			'o-forms-input--invalid': hasError,
+		},
+	]);
+
+	const inputProps = {
+		id: 'termsAcceptance',
+		type: 'checkbox',
+		name: 'termsAcceptance',
+		value: 'true',
+		'data-trackable': 'field-terms',
+		'aria-required': 'true',
+		required: true,
+	};
+
+	const b2bTerms = isB2b ? (
+		<li>
+			<span className="terms-b2b">
+				By submitting this form, you indicate your consent to also being
+				contacted by Financial Times by email, post, or phone about our other
+				products, services or special offers unless you untick this box.
+			</span>
+		</li>
+	) : (
+		<li>
+			<span className="terms-default">
+				I confirm I am 16 years or older and have read and agree to the{' '}
+				<a
+					className="ncf__link--external"
+					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+					target={isEmbedded ? '_top' : '_blank'}
+					rel="noopener noreferrer"
+					data-trackable="terms-and-conditions"
+				>
+					Terms &amp; Conditions
+				</a>
+				.
+			</span>
+		</li>
+	);
+
+	const corpSignupTerms = (
+		<>
+			<li>
+				<span className="terms-corp-signup">
+					Your organisation’s administrator(s) may view basic usage and profile
+					data about your account and have the ability to set up myFT topic
+					follows on your behalf.
+				</span>
+			</li>
+			<li>
+				<span className="terms-corp-signup">
+					Basic usage and profile data about your account can include; for
+					example, your job title and profile information, the date you last
+					visited, volume of content consumed, etc.
+				</span>
+			</li>
+			<li>
+				<span className="terms-corp-signup">
+					myFT topics may be selected on your behalf by your company
+					administrator or FT representative for you to follow. You can unfollow
+					these topics or unsubscribe from the myFT digest through the Contact
+					preferences section on myFT.
+				</span>
+			</li>
+			{isTrial && (
+				<li>
+					<span className="terms-corp-signup">
+						This trial is to demonstrate the value of a group subscription and
+						we’ll contact you during your trial.
+					</span>
+				</li>
+			)}
+		</>
+	);
+
+	return (
+		<div {...divProps}>
+			<ul className="o-typography-list ncf__accept-terms-list">
+				{b2bTerms}
+				{corpSignupTerms}
+			</ul>
+
+			<label className={labelClassName} htmlFor="termsAcceptance">
+				<input {...inputProps} />
+				<span className="o-forms-input__label">
+					I agree to the above terms &amp; conditions.
+				</span>
+				<p className="o-forms-input__error">
+					Please accept our terms &amp; conditions
+				</p>
+			</label>
+		</div>
+	);
+}
+
+AcceptTermsBusiness.propTypes = {
+	hasError: PropTypes.bool,
+	isChecked: PropTypes.bool,
+	isB2b: PropTypes.bool,
+	isEmbedded: PropTypes.bool,
+	isTrial: PropTypes.bool,
+};

package/components/accept-terms-business.spec.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { AcceptTermsBusiness } from './index';
+
+describe('AcceptTermsPrivacyPolicy', () => {
+	it('renders with "o-forms-input--invalid" class when hasError prop is true', () => {
+		const props = { hasError: true };
+
+		const component = mount(<AcceptTermsBusiness {...props} />);
+
+		const labelElement = component.find('label');
+		expect(labelElement.hasClass('o-forms-input--invalid')).toBe(true);
+	});
+
+	it('renders the B2B terms when isB2b prop is true', () => {
+		const props = {
+			isB2b: true,
+		};
+
+		const component = mount(<AcceptTermsBusiness {...props} />);
+
+		const b2bTerms = component.find('.terms-b2b');
+		expect(b2bTerms.exists()).toBe(true);
+	});
+
+	it('renders the external link with target="_blank" when isEmbedded prop is false', () => {
+		const props = {
+			isEmbedded: false,
+		};
+
+		const component = mount(<AcceptTermsBusiness {...props} />);
+
+		const externalLink = component.find('.ncf__link--external');
+		expect(externalLink.prop('target')).toBe('_blank');
+	});
+
+	it('renders the trial terms when isTrial prop is true', () => {
+		const props = {
+			isTrial: true,
+		};
+
+		const component = mount(<AcceptTermsBusiness {...props} />);
+
+		const trialTerms = component.find('.terms-corp-signup');
+		expect(trialTerms.exists()).toBe(true);
+	});
+});

package/components/accept-terms-business.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AcceptTermsBusiness } from './accept-terms-business';
+
+export default {
+	title: 'Accept Terms Business',
+	component: AcceptTermsBusiness,
+};
+
+export const Basic = (args) => <AcceptTermsBusiness {...args} />;
+Basic.args = {};
+
+export const AcceptTermsBusinessB2b = (args) => (
+	<AcceptTermsBusiness {...args} />
+);
+AcceptTermsBusinessB2b.args = {
+	isB2b: true,
+};
+
+export const AcceptTermsBusinessTrial = (args) => (
+	<AcceptTermsBusiness {...args} />
+);
+AcceptTermsBusinessTrial.args = {
+	isTrial: true,
+};
+
+export const AcceptTermsBusinessTrialAndB2b = (args) => (
+	<AcceptTermsBusiness {...args} />
+);
+AcceptTermsBusinessTrialAndB2b.args = {
+	isTrial: true,
+	isB2b: true,
+};

package/components/accept-terms-privacy-policy.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export function AcceptTermsPrivacyPolicy({
+	hasError = false,
+	isEmbedded = false,
+	children,
+}) {
+	const divProps = {
+		id: 'acceptTermsField',
+		className: 'o-forms-field o-layout-typography ncf__validation-error',
+		'data-validate': 'required,checked',
+	};
+
+	const labelClassName = classNames([
+		'o-forms-input',
+		'o-forms-input--checkbox',
+		{
+			'o-forms-input--invalid': hasError,
+		},
+	]);
+	const inputProps = {
+		id: 'termsAcceptance',
+		type: 'checkbox',
+		name: 'termsAcceptance',
+		value: 'true',
+		'data-trackable': 'field-terms',
+		'aria-required': 'true',
+		required: true,
+	};
+
+	return (
+		<div {...divProps}>
+			<div className="privacy-policy-terms">
+				<label className={labelClassName} htmlFor="termsAcceptance">
+					<input {...inputProps} />
+					<span className="o-forms-input__label">
+						I confirm that I am 16 years or older and agree to the full{' '}
+						<a
+							className="ncf__link--external"
+							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+							target={isEmbedded ? '_top' : '_blank'}
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							Terms &amp; Conditions
+						</a>
+						.
+					</span>
+					<p className="o-forms-input__error">
+						Please accept our terms &amp; conditions
+					</p>
+				</label>
+
+				{children && <div className="children-container">{children}</div>}
+
+				<span className={`consent-text--bottom`}>
+					For more information about how we use your data, please refer to our{' '}
+					<a
+						className="ncf__link--external"
+						href="https://help.ft.com/legal-privacy/privacy-policy/"
+						target="_blank"
+						rel="noopener noreferrer"
+						data-trackable="privacy-policy-info"
+					>
+						privacy
+					</a>{' '}
+					and&nbsp;
+					<a
+						className="ncf__link--external"
+						href="https://help.ft.com/legal-privacy/cookies/"
+						target="_blank"
+						rel="noopener noreferrer"
+						data-trackable="cookies-info"
+					>
+						cookie
+					</a>{' '}
+					policies.
+				</span>
+			</div>
+		</div>
+	);
+}
+
+AcceptTermsPrivacyPolicy.propTypes = {
+	hasError: PropTypes.bool,
+	isEmbedded: PropTypes.bool,
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
+};

package/components/accept-terms-privacy-policy.spec.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { AcceptTermsPrivacyPolicy } from './index';
+
+describe('AcceptTermsPrivacyPolicy', () => {
+	it('renders with "o-forms-input--invalid" class when hasError prop is true', () => {
+		const props = { hasError: true };
+
+		const component = mount(<AcceptTermsPrivacyPolicy {...props} />);
+
+		const labelElement = component.find('label');
+		expect(labelElement.hasClass('o-forms-input--invalid')).toBe(true);
+	});
+
+	it('renders the external link with target="_top" when isEmbedded prop is true', () => {
+		const props = {
+			isEmbedded: true,
+		};
+
+		const component = mount(<AcceptTermsPrivacyPolicy {...props} />);
+
+		const externalLink = component.find('.ncf__link--external').first();
+		expect(externalLink.prop('target')).toBe('_top');
+	});
+
+	it('renders children when children prop is provided', () => {
+		const props = {
+			children: <div className="child-component">Child Component</div>,
+		};
+
+		const component = mount(<AcceptTermsPrivacyPolicy {...props} />);
+
+		const childElement = component.find('.child-component');
+		expect(childElement.exists()).toBe(true);
+		expect(childElement.text()).toBe('Child Component');
+	});
+});

package/components/accept-terms-privacy-policy.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AcceptTermsPrivacyPolicy } from './accept-terms-privacy-policy';
+import { Submit } from './submit';
+
+export default {
+	title: 'Accept Terms Privacy Policy',
+	component: AcceptTermsPrivacyPolicy,
+};
+
+export const Basic = (args) => <AcceptTermsPrivacyPolicy {...args} />;
+Basic.args = {};
+
+export const AcceptTermsError = (args) => (
+	<AcceptTermsPrivacyPolicy {...args} />
+);
+AcceptTermsError.args = {
+	hasError: true,
+};
+
+export const AcceptTermsWithChildren = (args) => (
+	<AcceptTermsPrivacyPolicy {...args}>
+		<Submit />
+	</AcceptTermsPrivacyPolicy>
+);

package/components/accept-terms-subscription.jsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export function AcceptTermsSubscription({
+	hasError = false,
+	isSignup = false,
+	isEmbedded = false,
+	isTrial = false,
+	isPrintProduct = false,
+	isSingleTerm = false,
+	isTransition = false,
+	transitionType = null,
+	isDeferredBilling = false,
+}) {
+	const divProps = {
+		id: 'acceptTermsField',
+		className: 'o-forms-field o-layout-typography ncf__validation-error',
+		'data-validate': 'required,checked',
+		...(isSignup && { 'data-trackable': 'sign-up-terms' }),
+	};
+	const labelClassName = classNames([
+		'o-forms-input',
+		'o-forms-input--checkbox',
+		{
+			'o-forms-input--invalid': hasError,
+		},
+	]);
+
+	const inputProps = {
+		id: 'termsAcceptance',
+		type: 'checkbox',
+		name: 'termsAcceptance',
+		value: 'true',
+		'data-trackable': 'field-terms',
+		'aria-required': 'true',
+		required: true,
+	};
+
+	const transitionTerms = isTransition && (
+		<>
+			{!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">
+						By placing my order, my subscription will start immediately and I am
+						aware and agree that I will therefore lose my statutory right to
+						cancel my subscription within 14 days of acceptance of my order. Any
+						notice of cancellation that I provide will only take effect at the
+						end of my subscription period and previously paid amounts are
+						non-refundable, except in the event that there is a fault in the
+						provision of the services.
+					</span>
+				</li>
+			) : (
+				<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.
+					</span>
+				</li>
+			)}
+			<li>
+				<span className="terms-transition">
+					Find out more about our cancellation policy in our{' '}
+					<a
+						className="ncf__link--external"
+						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Terms &amp; Conditions
+					</a>
+					.
+				</span>
+			</li>
+		</>
+	);
+
+	const deferredBillingTerms = isDeferredBilling && (
+		<li>
+			<span className="terms-deferred">
+				Please note if you fail to make payment for your deferred billing plan
+				within due date your subscription will be automatically cancelled.
+			</span>
+		</li>
+	);
+
+	const printSignupTermText = isTrial
+		? 'Credits for delivery suspension or delivery failure are not available during introductory offer periods.'
+		: 'Credit for delivery suspensions is only available for hand-delivered subscriptions and is limited to a maximum of 24 issues per yearly subscription terms (4 issues per yearly FT Weekend subscription term).';
+
+	const printTerms = (
+		<>
+			<li>
+				<span className="terms-print">{printSignupTermText}</span>
+			</li>
+			<li>
+				<span className="terms-print">
+					Find out more about your delivery start date in our{' '}
+					<a
+						className="ncf__link--external"
+						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+						target={isEmbedded ? '_top' : '_blank'}
+						rel="noopener noreferrer"
+					>
+						Terms &amp; Conditions
+					</a>
+					.
+				</span>
+			</li>
+		</>
+	);
+
+	const nonPrintTerms = (
+		<>
+			<li>
+				<span className="terms-signup">
+					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={isEmbedded ? '_top' : '_blank'}
+						rel="noopener noreferrer"
+					>
+						customer care through chat, phone or email
+					</a>
+					.
+				</span>
+			</li>
+			<li>
+				<span className="terms-signup">
+					By placing my order, my subscription will start immediately and I am
+					aware and agree that I will therefore lose my statutory right to
+					cancel my subscription within 14 days of acceptance of my order. Any
+					notice of cancellation that I provide will only take effect at the end
+					of my subscription period and previously paid amounts are
+					non-refundable, except in the event that there is a fault in the
+					provision of the services.
+				</span>
+			</li>
+			<li>
+				<span className="terms-signup">
+					Find out more about our cancellation policy in our{' '}
+					<a
+						className="ncf__link--external"
+						href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+						target={isEmbedded ? '_top' : '_blank'}
+						rel="noopener noreferrer"
+					>
+						Terms &amp; Conditions
+					</a>
+					.
+				</span>
+			</li>
+		</>
+	);
+
+	const signupTerms = <>{isPrintProduct ? printTerms : nonPrintTerms}</>;
+
+	return (
+		<div {...divProps}>
+			<ul className="o-typography-list ncf__accept-terms-list">
+				{transitionTerms}
+				{signupTerms}
+				{deferredBillingTerms}
+			</ul>
+			<label className={labelClassName} htmlFor="termsAcceptance">
+				<input {...inputProps} />
+				<span className="o-forms-input__label">
+					I agree to the above terms &amp; conditions.
+				</span>
+				<p className="o-forms-input__error">
+					Please accept our terms &amp; conditions
+				</p>
+			</label>
+		</div>
+	);
+}
+
+AcceptTermsSubscription.propTypes = {
+	hasError: PropTypes.bool,
+	isSignup: PropTypes.bool,
+	isEmbedded: PropTypes.bool,
+	isTrial: PropTypes.bool,
+	isPrintProduct: PropTypes.bool,
+	isSingleTerm: PropTypes.bool,
+	isTransition: PropTypes.bool,
+	transitionType: PropTypes.string,
+	isDeferredBilling: PropTypes.bool,
+};

package/components/accept-terms-subscription.spec.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { AcceptTermsSubscription } from './index';
+
+describe('AcceptTermsSubscription', () => {
+	it('renders with "o-forms-input--invalid" class when hasError prop is true', () => {
+		const props = { hasError: true };
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const labelElement = component.find('label');
+		expect(labelElement.hasClass('o-forms-input--invalid')).toBe(true);
+	});
+
+	it('renders without data-trackable attribute when isSignup prop is false', () => {
+		const props = {
+			isSignup: false,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const labelElement = component.find(
+			'label[data-trackable="sign-up-terms"]'
+		);
+		expect(labelElement.exists()).toBe(false);
+	});
+
+	it('renders the external link with target="_top" when isEmbedded prop is true', () => {
+		const props = {
+			isEmbedded: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const externalLink = component.find('.ncf__link--external').first();
+		expect(externalLink.prop('target')).toBe('_top');
+	});
+
+	it('does not render the trial-specific terms when isTrial prop is false', () => {
+		const props = {
+			isTrial: false,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const trialTerms = component.find('.terms-print');
+		expect(trialTerms.exists()).toBe(false);
+	});
+
+	it('renders the print-specific terms when isPrintProduct prop is true', () => {
+		const props = {
+			isPrintProduct: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const printTerms = component.find('.terms-print');
+		expect(printTerms.exists()).toBe(true);
+	});
+
+	it('renders the transition terms when isSingleTerm prop is true and isTransition prop is true', () => {
+		const props = {
+			isSingleTerm: true,
+			isTransition: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const transitionTerms = component.find('.terms-transition');
+		expect(transitionTerms.exists()).toBe(true);
+	});
+
+	it('does not render the transition terms when transitionType prop is null', () => {
+		const props = {
+			transitionType: null,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const transitionTerms = component.find('.terms-transition');
+		expect(transitionTerms.exists()).toBe(false);
+	});
+
+	it('renders the deferred billing terms when isDeferredBilling prop is true', () => {
+		const props = {
+			isDeferredBilling: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const deferredBillingTerms = component.find('.terms-deferred');
+		expect(deferredBillingTerms.exists()).toBe(true);
+	});
+});

package/components/accept-terms-subscription.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { AcceptTermsSubscription } from './accept-terms-subscription';
+
+export default {
+	title: 'Accept Terms Subscription',
+	component: AcceptTermsSubscription,
+};
+
+export const Basic = (args) => <AcceptTermsSubscription {...args} />;
+Basic.args = {};
+
+export const PrintProduct = (args) => <AcceptTermsSubscription {...args} />;
+
+PrintProduct.args = {
+	isPrintProduct: true,
+};
+
+export const PrintProductTrial = (args) => (
+	<AcceptTermsSubscription {...args} />
+);
+
+PrintProductTrial.args = {
+	isPrintProduct: true,
+	isTrial: true,
+};
+
+export const isSingleTerm = (args) => <AcceptTermsSubscription {...args} />;
+
+isSingleTerm.args = {
+	isSingleTerm: true,
+};
+
+export const isTransition = (args) => <AcceptTermsSubscription {...args} />;
+
+isTransition.args = {
+	isTransition: true,
+};
+
+export const transitionType = (args) => <AcceptTermsSubscription {...args} />;
+
+transitionType.args = {
+	transitionType: true,
+};
+
+export const isDeferredBilling = (args) => (
+	<AcceptTermsSubscription {...args} />
+);
+
+isDeferredBilling.args = {
+	isDeferredBilling: true,
+};

package/components/index.jsx

@@ -1,4 +1,7 @@
 export { AcceptTerms } from './accept-terms';
+export { AcceptTermsPrivacyPolicy } from './accept-terms-privacy-policy';
+export { AcceptTermsSubscription } from './accept-terms-subscription';
+export { AcceptTermsBusiness } from './accept-terms-business';
 export { AppBanner } from './app-banner';
 export { BillingCity } from './billing-city';
 export { BillingCountry } from './billing-country';

package/dist/accept-terms-business.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AcceptTermsBusiness = AcceptTermsBusiness;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function AcceptTermsBusiness(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$isB2b = _ref.isB2b,
+    isB2b = _ref$isB2b === void 0 ? false : _ref$isB2b,
+    _ref$isEmbedded = _ref.isEmbedded,
+    isEmbedded = _ref$isEmbedded === void 0 ? false : _ref$isEmbedded,
+    _ref$isTrial = _ref.isTrial,
+    isTrial = _ref$isTrial === void 0 ? false : _ref$isTrial;
+  var divProps = {
+    id: 'acceptTermsField',
+    className: 'o-forms-field o-layout-typography ncf__validation-error',
+    'data-validate': 'required,checked'
+  };
+  var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var inputProps = {
+    id: 'termsAcceptance',
+    type: 'checkbox',
+    name: 'termsAcceptance',
+    value: 'true',
+    'data-trackable': 'field-terms',
+    'aria-required': 'true',
+    required: true
+  };
+  var b2bTerms = isB2b ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-b2b"
+  }, "By submitting this form, you indicate your consent to also being contacted by Financial Times by email, post, or phone about our other products, services or special offers unless you untick this box.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-default"
+  }, "I confirm I am 16 years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), "."));
+  var corpSignupTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-corp-signup"
+  }, "Your organisation\u2019s administrator(s) may view basic usage and profile data about your account and have the ability to set up myFT topic follows on your behalf.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-corp-signup"
+  }, "Basic usage and profile data about your account can include; for example, your job title and profile information, the date you last visited, volume of content consumed, etc.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-corp-signup"
+  }, "myFT topics may be selected on your behalf by your company administrator or FT representative for you to follow. You can unfollow these topics or unsubscribe from the myFT digest through the Contact preferences section on myFT.")), isTrial && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-corp-signup"
+  }, "This trial is to demonstrate the value of a group subscription and we\u2019ll contact you during your trial.")));
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "o-typography-list ncf__accept-terms-list"
+  }, b2bTerms, corpSignupTerms), /*#__PURE__*/_react["default"].createElement("label", {
+    className: labelClassName,
+    htmlFor: "termsAcceptance"
+  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label"
+  }, "I agree to the above terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "o-forms-input__error"
+  }, "Please accept our terms & conditions")));
+}
+AcceptTermsBusiness.propTypes = {
+  hasError: _propTypes["default"].bool,
+  isChecked: _propTypes["default"].bool,
+  isB2b: _propTypes["default"].bool,
+  isEmbedded: _propTypes["default"].bool,
+  isTrial: _propTypes["default"].bool
+};

package/dist/accept-terms-business.spec.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _index = require("./index");
+describe('AcceptTermsPrivacyPolicy', function () {
+  it('renders with "o-forms-input--invalid" class when hasError prop is true', function () {
+    var props = {
+      hasError: true
+    };
+    var component = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index.AcceptTermsBusiness, props));
+    var labelElement = component.find('label');
+    expect(labelElement.hasClass('o-forms-input--invalid')).toBe(true);
+  });
+  it('renders the B2B terms when isB2b prop is true', function () {
+    var props = {
+      isB2b: true
+    };
+    var component = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index.AcceptTermsBusiness, props));
+    var b2bTerms = component.find('.terms-b2b');
+    expect(b2bTerms.exists()).toBe(true);
+  });
+  it('renders the external link with target="_blank" when isEmbedded prop is false', function () {
+    var props = {
+      isEmbedded: false
+    };
+    var component = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index.AcceptTermsBusiness, props));
+    var externalLink = component.find('.ncf__link--external');
+    expect(externalLink.prop('target')).toBe('_blank');
+  });
+  it('renders the trial terms when isTrial prop is true', function () {
+    var props = {
+      isTrial: true
+    };
+    var component = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index.AcceptTermsBusiness, props));
+    var trialTerms = component.find('.terms-corp-signup');
+    expect(trialTerms.exists()).toBe(true);
+  });
+});

package/dist/accept-terms-privacy-policy.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AcceptTermsPrivacyPolicy = AcceptTermsPrivacyPolicy;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function AcceptTermsPrivacyPolicy(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$isEmbedded = _ref.isEmbedded,
+    isEmbedded = _ref$isEmbedded === void 0 ? false : _ref$isEmbedded,
+    children = _ref.children;
+  var divProps = {
+    id: 'acceptTermsField',
+    className: 'o-forms-field o-layout-typography ncf__validation-error',
+    'data-validate': 'required,checked'
+  };
+  var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var inputProps = {
+    id: 'termsAcceptance',
+    type: 'checkbox',
+    name: 'termsAcceptance',
+    value: 'true',
+    'data-trackable': 'field-terms',
+    'aria-required': 'true',
+    required: true
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "privacy-policy-terms"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: labelClassName,
+    htmlFor: "termsAcceptance"
+  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label"
+  }, "I confirm that I am 16 years or older and agree to the full", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), "."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "o-forms-input__error"
+  }, "Please accept our terms & conditions")), children && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "children-container"
+  }, children), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "consent-text--bottom"
+  }, "For more information about how we use your data, please refer to our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/privacy-policy/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "privacy-policy-info"
+  }, "privacy"), ' ', "and\xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/cookies/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "cookies-info"
+  }, "cookie"), ' ', "policies.")));
+}
+AcceptTermsPrivacyPolicy.propTypes = {
+  hasError: _propTypes["default"].bool,
+  isEmbedded: _propTypes["default"].bool,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node])
+};

package/dist/accept-terms-subscription.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AcceptTermsSubscription = AcceptTermsSubscription;
+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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function AcceptTermsSubscription(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$isSignup = _ref.isSignup,
+    isSignup = _ref$isSignup === void 0 ? false : _ref$isSignup,
+    _ref$isEmbedded = _ref.isEmbedded,
+    isEmbedded = _ref$isEmbedded === void 0 ? false : _ref$isEmbedded,
+    _ref$isTrial = _ref.isTrial,
+    isTrial = _ref$isTrial === void 0 ? false : _ref$isTrial,
+    _ref$isPrintProduct = _ref.isPrintProduct,
+    isPrintProduct = _ref$isPrintProduct === void 0 ? false : _ref$isPrintProduct,
+    _ref$isSingleTerm = _ref.isSingleTerm,
+    isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
+    _ref$isTransition = _ref.isTransition,
+    isTransition = _ref$isTransition === void 0 ? false : _ref$isTransition,
+    _ref$transitionType = _ref.transitionType,
+    transitionType = _ref$transitionType === void 0 ? null : _ref$transitionType,
+    _ref$isDeferredBillin = _ref.isDeferredBilling,
+    isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin;
+  var divProps = _objectSpread({
+    id: 'acceptTermsField',
+    className: 'o-forms-field o-layout-typography ncf__validation-error',
+    'data-validate': 'required,checked'
+  }, isSignup && {
+    'data-trackable': 'sign-up-terms'
+  });
+  var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var inputProps = {
+    id: 'termsAcceptance',
+    type: 'checkbox',
+    name: 'termsAcceptance',
+    value: 'true',
+    'data-trackable': 'field-terms',
+    'aria-required': 'true',
+    required: true
+  };
+  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",
+    href: "https://help.ft.com/help/contact-us/",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "customer care through chat, phone or email"), ".")), transitionType === 'immediate' ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-transition terms-transition--immediate"
+  }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")) : /*#__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", 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",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "Terms & Conditions"), ".")));
+  var deferredBillingTerms = isDeferredBilling && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-deferred"
+  }, "Please note if you fail to make payment for your deferred billing plan within due date your subscription will be automatically cancelled."));
+  var printSignupTermText = isTrial ? 'Credits for delivery suspension or delivery failure are not available during introductory offer periods.' : 'Credit for delivery suspensions is only available for hand-delivered subscriptions and is limited to a maximum of 24 issues per yearly subscription terms (4 issues per yearly FT Weekend subscription term).';
+  var printTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-print"
+  }, printSignupTermText)), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-print"
+  }, "Find out more about your delivery start date in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer"
+  }, "Terms & Conditions"), ".")));
+  var nonPrintTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-signup"
+  }, "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",
+    href: "https://help.ft.com/help/contact-us/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer"
+  }, "customer care through chat, phone or email"), ".")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-signup"
+  }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-signup"
+  }, "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/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer"
+  }, "Terms & Conditions"), ".")));
+  var signupTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isPrintProduct ? printTerms : nonPrintTerms);
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "o-typography-list ncf__accept-terms-list"
+  }, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
+    className: labelClassName,
+    htmlFor: "termsAcceptance"
+  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label"
+  }, "I agree to the above terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "o-forms-input__error"
+  }, "Please accept our terms & conditions")));
+}
+AcceptTermsSubscription.propTypes = {
+  hasError: _propTypes["default"].bool,
+  isSignup: _propTypes["default"].bool,
+  isEmbedded: _propTypes["default"].bool,
+  isTrial: _propTypes["default"].bool,
+  isPrintProduct: _propTypes["default"].bool,
+  isSingleTerm: _propTypes["default"].bool,
+  isTransition: _propTypes["default"].bool,
+  transitionType: _propTypes["default"].string,
+  isDeferredBilling: _propTypes["default"].bool
+};

package/dist/index.js

@@ -9,6 +9,24 @@ Object.defineProperty(exports, "AcceptTerms", {
     return _acceptTerms.AcceptTerms;
   }
 });
+Object.defineProperty(exports, "AcceptTermsBusiness", {
+  enumerable: true,
+  get: function get() {
+    return _acceptTermsBusiness.AcceptTermsBusiness;
+  }
+});
+Object.defineProperty(exports, "AcceptTermsPrivacyPolicy", {
+  enumerable: true,
+  get: function get() {
+    return _acceptTermsPrivacyPolicy.AcceptTermsPrivacyPolicy;
+  }
+});
+Object.defineProperty(exports, "AcceptTermsSubscription", {
+  enumerable: true,
+  get: function get() {
+    return _acceptTermsSubscription.AcceptTermsSubscription;
+  }
+});
 Object.defineProperty(exports, "AppBanner", {
   enumerable: true,
   get: function get() {
@@ -346,6 +364,9 @@ Object.defineProperty(exports, "TrialBanner", {
   }
 });
 var _acceptTerms = require("./accept-terms");
+var _acceptTermsPrivacyPolicy = require("./accept-terms-privacy-policy");
+var _acceptTermsSubscription = require("./accept-terms-subscription");
+var _acceptTermsBusiness = require("./accept-terms-business");
 var _appBanner = require("./app-banner");
 var _billingCity = require("./billing-city");
 var _billingCountry = require("./billing-country");

package/package.json

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