@financial-times/n-conversion-forms 20.3.2 → 20.4.0

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

@@ -1,5 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 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">
+    <li>
+      <span class="terms-auth-first-step">
+        For more information about how we use your data, please refer to our
+        <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"
+        >
+          privacy
+        </a>
+        and 
+        <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"
+        >
+          cookie
+        </a>
+        policies.
+      </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 terms-auth-first-step">
+      I confirm that I am 16 years or older and agree to the full
+      <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 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"
@@ -72,7 +160,7 @@ exports[`AcceptTerms renders appropriately if a signup 1`] = `
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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>
@@ -146,7 +234,7 @@ exports[`AcceptTerms renders appropriately if a signup and has special terms 1`]
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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>
@@ -408,7 +496,7 @@ exports[`AcceptTerms renders appropriately if a signup not for the print product
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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>
@@ -482,7 +570,7 @@ exports[`AcceptTerms renders appropriately if a signup not for the print product
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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>
@@ -556,7 +644,7 @@ exports[`AcceptTerms renders appropriately if a signup not for the print product
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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>
@@ -1155,7 +1243,7 @@ exports[`AcceptTerms renders appropriately if is transition with transition type
     </li>
     <li>
       <span class="terms-transition terms-transition--immediate">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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>

package/components/__snapshots__/delivery-address.spec.js.snap

@@ -185,7 +185,7 @@ exports[`DeliveryAddress renders with country different than default 1`] = `
   >
     <span class="o-forms-title">
       <span class="o-forms-title__main">
-        Apt/Floor/Suite
+        APT/FL/STE
       </span>
       <span class="o-forms-title__prompt">
         Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”
@@ -197,7 +197,7 @@ exports[`DeliveryAddress renders with country different than default 1`] = `
              name="deliveryAddressLine3"
              data-trackable="field-deliveryAddressLine3"
              autocomplete="address-line3"
-             placeholder="e.g Apt 2c / FL 10 / STE 5"
+             placeholder="e.g Apt 2C / FL 10 / STE 50"
              maxlength="50"
              value
       >

package/components/__snapshots__/graduation-date.spec.js.snap

@@ -71,9 +71,6 @@ exports[`GraduationDate renders with default props 1`] = `
                 name="graduationDateYear"
                 aria-required="false"
         >
-          <option value="2017">
-            2017
-          </option>
           <option value="2018">
             2018
           </option>
@@ -98,6 +95,9 @@ exports[`GraduationDate renders with default props 1`] = `
           <option value="2025">
             2025
           </option>
+          <option value="2026">
+            2026
+          </option>
         </select>
       </span>
     </div>

package/components/accept-terms.jsx

@@ -4,7 +4,9 @@ import classNames from 'classnames';
 
 const DEFAULT_AGE_RESTRICTION = '16';
 
-export function AcceptTerms({
+export function AcceptTerms ({
+	isAuthFirstAccount = false,
+	isAuthFirstPayment = false,
 	hasError = false,
 	isSignup = false,
 	isRegister = false,
@@ -46,6 +48,54 @@ export function AcceptTerms({
 		...(isChecked && { defaultChecked: true }),
 	};
 
+	const authFirstStepTerms = (
+		<>
+			<ul className="o-typography-list ncf__accept-terms-list">
+				<li>
+					<span className="terms-auth-first-step">
+						For more information about how we use your data, please refer to our <a
+							className="ncf__link--external"
+							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+							target='_blank'
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							privacy
+						</a> and&nbsp;
+						<a
+							className="ncf__link--external"
+							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+							target='_blank'
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							cookie
+						</a> policies.
+					</span>
+				</li>
+			</ul>
+			<label className={labelClassName} htmlFor="termsAcceptance">
+				<input {...inputProps} />
+				<span className="o-forms-input__label terms-auth-first-step">
+					I confirm that I am {ageRestriction} 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>
+		</>
+	);
+
 	const registerTerms = (
 		<label className={labelClassName} htmlFor="termsAcceptance">
 			<input {...inputProps} />
@@ -154,9 +204,12 @@ export function AcceptTerms({
 			{transitionType === 'immediate' ? (
 				<li>
 					<span className="terms-transition terms-transition--immediate">
-						By placing my order, my subscription will start immediately.
-						Cancellation notice would take effect at the end of the subscription
-						period and previously paid amounts are non-refundable.
+						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>
 			) : (
@@ -192,6 +245,7 @@ export function AcceptTerms({
 	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 signupTerms = isSignup && (
 		<>
 			{isPrintProduct ? (
@@ -234,10 +288,12 @@ export function AcceptTerms({
 					</li>
 					<li>
 						<span className="terms-signup">
-							By placing my order, my subscription will start immediately.
-							Cancellation notice would take effect at the end of the
-							subscription period and previously paid amounts are
-							non-refundable.
+							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>
@@ -294,10 +350,12 @@ export function AcceptTerms({
 				b2cPartnershipTerms
 			) : isRegister ? (
 				registerTerms
+			) : isAuthFirstAccount ? (
+				authFirstStepTerms
 			) : (
 				<>
 					<ul className="o-typography-list ncf__accept-terms-list">
-						{b2bTerms}
+						{!isAuthFirstPayment && b2bTerms}
 						{corpSignupTerms}
 						{transitionTerms}
 						{signupTerms}

package/components/accept-terms.spec.js

@@ -16,6 +16,18 @@ describe('AcceptTerms', () => {
 		expect(AcceptTerms).toRenderCorrectly(props);
 	});
 
+	it('renders appropriately if a isAuthFirstAccount', () => {
+		const props = { isAuthFirstAccount: true };
+
+		expect(AcceptTerms).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately if a isAuthFirstPayment', () => {
+		const props = { isAuthFirstPayment: true };
+
+		expect(AcceptTerms).toRenderCorrectly(props);
+	});
+
 	it('renders appropriately if a signup', () => {
 		const props = { isSignup: true };
 

package/components/app-banner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function AppBanner() {
+export function AppBanner () {
 	return (
 		<div id="appBanner" className="ncf ncf__app-banner">
 			<div className="ncf__app-banner-inner">

package/components/b2c-partnership-confirmation.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function B2CPartnershipConfirmation({ ctaElement = null }) {
+export function B2CPartnershipConfirmation ({ ctaElement = null }) {
 	const readingLinkProps = {
 		href: '/',
 		className: 'ncf__link',
@@ -19,7 +19,7 @@ export function B2CPartnershipConfirmation({ ctaElement = null }) {
 				<div className="ncf__paragraph">
 					{
 						<h1 className="ncf__header ncf__header--confirmation">
-							{"Welcome to your three months' Premium access"}
+							{'Welcome to your three months\' Premium access'}
 						</h1>
 					}
 				</div>

package/components/b2c-partnership-payment-term.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function B2cPartnershipPaymentTerm({
+export function B2cPartnershipPaymentTerm ({
 	fieldId = 'paymentTermField',
 	inputName = 'paymentTerm',
 	options = [],

package/components/billing-city.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function BillingCity({
+export function BillingCity ({
 	hasError = false,
 	value = '',
 	isDisabled = false,

package/components/billing-country.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getCountries } from '../utils/countries';
 
-export function BillingCountry({
+export function BillingCountry ({
 	fieldId = 'billingCountryField',
 	filterList = [],
 	hasError = false,

package/components/billing-postcode.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function BillingPostcode({
+export function BillingPostcode ({
 	postcodeReference,
 	value = '',
 	pattern = null,

package/components/company-name.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function CompanyName({
+export function CompanyName ({
 	fieldId = 'companyNameField',
 	hasError = false,
 	inputId = 'companyName',

package/components/confirmation.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const EMAIL_DEFAULT_TEXT = 'your email';
 
-export function Confirmation({
+export function Confirmation ({
 	// isTrial prop is needed for the floodlight pixel tracking.
 	isTrial = false,
 	isB2cPartnership = false,

package/components/continue-reading.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function ContinueReading({
+export function ContinueReading ({
 	link = null,
 	quote = '',
 	isEmbedded = false,

package/components/continue-reading.stories.js

@@ -9,6 +9,6 @@ export default {
 export const Basic = (args) => <ContinueReading {...args} />;
 Basic.args = {
 	quote:
-		"The problem with quotes found on the internet, is that they're often not true - Abraham Lincoln",
+		'The problem with quotes found on the internet, is that they\'re often not true - Abraham Lincoln',
 	link: 'https://ft.com/world',
 };

package/components/country.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getCountries } from '../utils/countries';
 
-export function Country({
+export function Country ({
 	fieldId = 'countryField',
 	filterList = [],
 	hasError = false,

package/components/customer-care.jsx

@@ -6,7 +6,7 @@ const DEFAULT_HEADER_TEXT = 'Sorry, this is not available online';
 const DEFAULT_MESSAGE_TEXT =
 	'Speak now to our Customer Care team to discuss your options';
 
-export function CustomerCare({
+export function CustomerCare ({
 	header = DEFAULT_HEADER_TEXT,
 	isCompact = false,
 	message = DEFAULT_MESSAGE_TEXT,

package/components/debug.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function Debug({ isTest = false, showHelpers = false, links = {} }) {
+export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	// Strings are used rather than JSX as this component is injected into HTML
 	// along with onclick handlers, styles and javascript. JSX will escape and
 	// modify the HTML which we do not want. Once our applications are on JSX

package/components/decision-maker.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function DecisionMaker({ hasError = false, value = 'yes' }) {
+export function DecisionMaker ({ hasError = false, value = 'yes' }) {
 	const radioButtonsWrapperClassNames = classNames([
 		'o-forms-input',
 		'o-forms-input--radio-box',

package/components/decision-maker.spec.js

@@ -16,7 +16,7 @@ describe('DecisionMaker', () => {
 		expect(DecisionMaker).toRenderCorrectly(props);
 	});
 
-	it("renders with 'no' as default state for radio buttons", () => {
+	it('renders with \'no\' as default state for radio buttons', () => {
 		const props = { value: 'no' };
 
 		expect(DecisionMaker).toRenderCorrectly(props);

package/components/delivery-address-type.jsx

@@ -7,7 +7,7 @@ const addressTypes = [
 	{ id: 'pobox', label: 'P.O. Box' },
 ];
 
-export function DeliveryAddressType({
+export function DeliveryAddressType ({
 	value = 'home',
 	fieldId = 'deliveryAddressTypeField',
 	inputName = 'deliveryAddressType',

package/components/delivery-address.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function DeliveryAddress({
+export function DeliveryAddress ({
 	fieldId = 'deliveryAddressFields',
 	hasError = false,
 	line1 = '',
@@ -22,8 +22,8 @@ export function DeliveryAddress({
 
 	const addressLine3Title = {
 		GBR: 'Address line 3',
-		USA: 'Apt/Floor/Suite',
-		CAN: 'Apt/Floor/Suite',
+		USA: 'APT/FL/STE',
+		CAN: 'APT/FL/STE',
 	};
 
 	const addressLine3Prompt = {
@@ -32,8 +32,8 @@ export function DeliveryAddress({
 	};
 
 	const addressLine3Placeholder = {
-		USA: 'e.g Apt 2c / FL 10 / STE 5',
-		CAN: 'e.g Apt 2c / FL 10 / STE 5',
+		USA: 'e.g Apt 2C / FL 10 / STE 50',
+		CAN: 'e.g Apt 2C / FL 10 / STE 50',
 	};
 
 	const addressLine1Placeholder = {

package/components/delivery-city.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function DeliveryCity({
+export function DeliveryCity ({
 	hasError = false,
 	value = '',
 	isDisabled = false,

package/components/delivery-county.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function DeliveryCounty({
+export function DeliveryCounty ({
 	hasError = false,
 	value = '',
 	isDisabled = false,

package/components/delivery-instructions.jsx

@@ -34,7 +34,7 @@ const spanMessageByCountry = {
 	),
 };
 
-export function DeliveryInstructions({
+export function DeliveryInstructions ({
 	fieldId = 'deliveryInstructionsField',
 	hasError = false,
 	inputId = 'deliveryInstructions',

package/components/delivery-option.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getDeliveryOption } from '../utils/delivery-option-messages';
 
-export function DeliveryOption({
+export function DeliveryOption ({
 	fieldId = 'deliveryOptionField',
 	country,
 	productCode = undefined,

package/components/delivery-po-box.jsx

@@ -7,7 +7,7 @@ const message = {
 	CAN: 'A P.O. Box address is only deliverable by Canada Post, and is subject to a delay of up to 3 business days. For delivery on the publication day, we recommend you enter a residential or business address.',
 };
 
-export function DeliveryPOBox({
+export function DeliveryPOBox ({
 	fieldId = 'deliveryPOBoxField',
 	inputId = 'deliveryPOBox',
 	hasError = false,

package/components/delivery-postcode.jsx

@@ -17,7 +17,7 @@ const placeholderLabel = {
 	CAN: 'e.g. M4W 2C6',
 };
 
-export function DeliveryPostcode({
+export function DeliveryPostcode ({
 	value = '',
 	country = '',
 	isDisabled = false,

package/components/delivery-security-instructions.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function DeliverySecurityInstructions({
+export function DeliverySecurityInstructions ({
 	fieldId = 'deliverySecurityInstructionsField',
 	hasError = false,
 	inputId = 'deliverySecurityInstructions',

package/components/delivery-start-date.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function DeliveryStartDate({
+export function DeliveryStartDate ({
 	hasError = false,
 	date = '',
 	value = '',

package/components/education-job-title.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function EducationJobTitle({
+export function EducationJobTitle ({
 	value = '',
 	isDisabled = false,
 	hasError = false,

package/components/email.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Email({
+export function Email ({
 	dataTrackable = 'field-email',
 	description = 'Please enter an email address',
 	errorText = 'This email address is not valid',

package/components/error-page.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function ErrorPage({
+export function ErrorPage ({
 	children,
 	header = 'Sorry, something went wrong',
 	message = 'Speak to our Customer Care team now so we can help.',

package/components/fieldset.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Fieldset({
+export function Fieldset ({
 	children = null,
 	name = null,
 	legend = null,