@financial-times/n-conversion-forms/components/accept-terms-subscription.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 AcceptTermsSubscription({
	hasError = false,
	isSignup = false,
	isEmbedded = false,
	isTrial = false,
	isPrintProduct = false,
	isSingleTerm = false,
	isNonRenewingSubscriptionTermType = false,
	isTransition = false,
	transitionType = null,
	isDeferredBilling = false,
	additionalClassNames = [],
}) {
	const divProps = {
		id: 'acceptTermsField',
		className: classNames([
			'o-forms-field',
			'o-layout-typography',
			'ncf__validation-error',
			...additionalClassNames,
		]),
		'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 autoRenewingTerms = !isSingleTerm && (
		<li>
			<span className="terms-auto-renew o3-type-body-base">
				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
					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>
	);

	if (isNonRenewingSubscriptionTermType) {
		return (
			<div {...divProps}>
				<ul className="o3-typography-ul ncf__accept-terms-list">
					<li>
						<span className="terms-transition terms-transition--immediate">
							I give consent for the chosen payment method to be charged
							automatically.
						</span>
					</li>
					<li>
						<span className="terms-transition terms-transition--immediate">
							By placing your order subject to the Terms & Conditions (save for
							section 2) referred to below, you are waiving your statutory right
							to cancel our contract within 14 days of payment. Your payment is
							a one-time payment collected at the time of checkout, and
							unsubscribing or cancelling at any point (whether before or after
							the 14-day period) will not entitle you to a refund.
						</span>
					</li>
					<li>
						<span className="terms-transition o3-type-body-base">
							Please see here for the complete{' '}
							<a
								href="http://help.ft.com/help/legal-privacy/terms-conditions/"
								target="_blank"
								rel="noopener noreferrer"
							>
								Terms &amp; Conditions
							</a>
							.
						</span>
					</li>
				</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>
		);
	}

	const transitionTerms = isTransition && (
		<>
			{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 o3-type-body-base">
					Find out more about our cancellation policy in our{' '}
					<a
						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 48 issues per yearly subscription terms (8 issues per yearly FT Weekend subscription term).';

	const printTerms = (
		<>
			<li>
				<span className="terms-print">{printSignupTermText}</span>
			</li>
			<li>
				<span className="terms-print o3-type-body-base">
					Find out more about your delivery start date in our{' '}
					<a
						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">
					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 o3-type-body-base">
					Find out more about our cancellation policy in our{' '}
					<a
						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="ncf__accept-terms-list">
				{autoRenewingTerms}
				{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,
	isNonRenewingSubscriptionTermType: PropTypes.bool,
	isTransition: PropTypes.bool,
	transitionType: PropTypes.string,
	isDeferredBilling: PropTypes.bool,
	additionalClassNames: PropTypes.arrayOf(PropTypes.string),
};