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

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

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 1`] = `
+exports[`AcceptTerms renders a component matching snapshot when withPrivacyPolicyTerms is true 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"
      data-validate="required,checked"
 >
-  <div class="auth-first-step-terms">
+  <div class="privacy-policy-terms">
     <span class="consent-text--top">
       For more information about how we use your data, please refer to our
       <a class="ncf__link--external"
@@ -58,70 +58,6 @@ exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 1`] = `
 </div>
 `;
 
-exports[`AcceptTerms renders appropriately if a isAuthFirstPayment 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">
-  </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 appropriately if a registration 1`] = `
-<div id="acceptTermsField"
-     class="o-forms-field o-layout-typography ncf__validation-error"
-     data-validate="required,checked"
-     data-trackable="register-up-terms"
->
-  <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 terms-register">
-      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>
-    <p class="o-forms-input__error">
-      Please accept our terms &amp; conditions
-    </p>
-  </label>
-</div>
-`;
-
 exports[`AcceptTerms renders appropriately if a signup 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"
@@ -196,85 +132,6 @@ exports[`AcceptTerms renders appropriately if a signup 1`] = `
 </div>
 `;
 
-exports[`AcceptTerms renders appropriately if a signup and has special terms 1`] = `
-<div id="acceptTermsField"
-     class="o-forms-field o-layout-typography ncf__validation-error"
-     data-validate="required,checked"
-     data-trackable="sign-up-terms"
->
-  <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-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 class="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>
-    <li>
-      <span class="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 class="terms-signup">
-        Find out more about our cancellation policy in our
-        <a class="ncf__link--external"
-           href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-           target="_blank"
-           rel="noopener noreferrer"
-        >
-          Terms &amp; Conditions
-        </a>
-        .
-      </span>
-    </li>
-    <li>
-      <span class="terms-special">
-        Special terms text
-      </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 appropriately if a signup for the print product 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"

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>
+);