@financial-times/n-conversion-forms/components/accept-terms-subscription-updated-ui.jsx

Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

export function AcceptTermsSubscriptionUpdatedUI({
	hasError = false,
	transitionType = null,
	additionalClassNames = [],
}) {
	const divProps = {
		id: 'acceptTermsField',
		className: classNames([
			'o-forms-field',
			'o-layout-typography',
			'ncf__validation-error',
			...additionalClassNames,
		]),
		'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 updatedUiTransitionTerms = (
		<>
			{transitionType === 'immediate' ? (
				<li>
					<span className="terms-updated-ui-transition terms-updated-ui-transition--immediate">
						I consent to payment being taken at the end of each subscription
						term until I cancel. I understand and agree that I will lose my
						statutory right to cancel within 14 days of accepting my order, and
						that any notice to cancel will only take effect at the end of my
						subscription period. Previously paid amounts are non-refundable,
						except in the event of a fault in the provision of services.
					</span>
				</li>
			) : (
				<li>
					<span className="terms-updated-ui-transition terms-updated-ui-transition--end-of-term">
						I consent to payment being taken at the end of each subscription
						term until I cancel. By placing my order, I acknowledge that my
						subscription will start on the date given above. I understand and
						agree that I will lose my statutory right to cancel within 14 days
						of accepting my order, and that any notice to cancel will only take
						effect at the end of my subscription period. Previously paid amounts
						are non-refundable, except in the event of a fault in the provision
						of services.
					</span>
				</li>
			)}
			<li>
				<span className="terms-updated-ui-transition o3-type-body-base">
					For more information, see our full{' '}
					<a
						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
						target="_blank"
						rel="noopener noreferrer"
					>
						Terms &amp; Conditions
					</a>
					.
				</span>
			</li>
		</>
	);

	return (
		<div {...divProps}>
			<ul className="ncf__accept-terms-list">{updatedUiTransitionTerms}</ul>
			<label className={labelClassName} htmlFor="termsAcceptance">
				<input {...inputProps} />
				<span className="o-forms-input__label">
					I agree to the full Terms &amp; Conditions.
				</span>
				<p className="o-forms-input__error">
					Please accept the full Terms &amp; Conditions.
				</p>
			</label>
		</div>
	);
}

AcceptTermsSubscriptionUpdatedUI.propTypes = {
	hasError: PropTypes.bool,
	transitionType: PropTypes.string,
	additionalClassNames: PropTypes.arrayOf(PropTypes.string),
};