@financial-times/n-conversion-forms 27.7.1 → 28.0.0

package/components/__snapshots__/payment-type.spec.js.snap

@@ -461,7 +461,6 @@ exports[`PaymentType render with enableCreditcard 1`] = `
               overflow="visible"
               scrolling="no"
               frameborder="0"
-              allowtransparency="true"
               class="z_hppm_iframe"
               style="display:block;width:100%"
       >
@@ -611,7 +610,6 @@ exports[`PaymentType render with enableDirectdebit 1`] = `
               overflow="visible"
               scrolling="no"
               frameborder="0"
-              allowtransparency="true"
               class="z_hppm_iframe"
               style="display:block;width:100%"
       >

package/components/accept-terms.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 const DEFAULT_AGE_RESTRICTION = '16';
 
-export function AcceptTerms ({
+export function AcceptTerms({
 	isAuthFirstAccount = false,
 	isAuthFirstPayment = false,
 	hasError = false,
@@ -52,7 +52,7 @@ export function AcceptTerms ({
 
 	const authFirstStepTerms = (
 		<>
-			{(
+			{
 				<ul className="o-typography-list ncf__accept-terms-list">
 					<li>
 						<span className="terms-auth-first-step">
@@ -81,7 +81,7 @@ export function AcceptTerms ({
 						</span>
 					</li>
 				</ul>
-			)}
+			}
 			{!hideConfirmTermsAndConditions && (
 				<label className={labelClassName} htmlFor="termsAcceptance">
 					<input {...inputProps} />
@@ -216,11 +216,12 @@ export function AcceptTerms ({
 				<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.
+						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>
 			) : (
@@ -299,12 +300,13 @@ export function AcceptTerms ({
 					</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.
+							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>
@@ -335,8 +337,8 @@ export function AcceptTerms ({
 	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.
+				Please note if you fail to make payment for your deferred billing plan
+				within due date your subscription will be automatically cancelled.
 			</span>
 		</li>
 	);

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',

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,
@@ -20,7 +20,8 @@ export function Confirmation ({
 		...(isTrial && { 'data-signup-is-trial': 'true' }),
 	};
 
-	const isB2cPartnershipCopyAvailable = isB2cPartnership && b2cPartnershipCopy.length > 0;
+	const isB2cPartnershipCopyAvailable =
+		isB2cPartnership && b2cPartnershipCopy.length > 0;
 
 	const detailElements = details && (
 		<React.Fragment>
@@ -68,8 +69,8 @@ export function Confirmation ({
 			{nextActionTop}
 			{!isB2cPartnershipCopyAvailable && (
 				<p className="ncf__paragraph">
-					We’ve sent confirmation to {email}. Make sure you check your spam folder
-					if you don’t receive it.
+					We’ve sent confirmation to {email}. Make sure you check your spam
+					folder if you don’t receive it.
 				</p>
 			)}
 

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/deferred-billing-terms.jsx

@@ -2,7 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 const CONSENT_AGE = 16;
-export function DeferredBillingTerms ({ isDeferredBilling = false, checkBoxTrackableAttr = 'field-terms', trackableAttr = 'deferred-billing-terms', errorMessage = 'Please accept our terms & conditions', inputId = 'accept-deferred-billing-terms', fieldId = 'accept-deferred-terms', isChecked = false, hasError = false }) {
+export function DeferredBillingTerms({
+	isDeferredBilling = false,
+	checkBoxTrackableAttr = 'field-terms',
+	trackableAttr = 'deferred-billing-terms',
+	errorMessage = 'Please accept our terms & conditions',
+	inputId = 'accept-deferred-billing-terms',
+	fieldId = 'accept-deferred-terms',
+	isChecked = false,
+	hasError = false,
+}) {
 	const labelClassName = classNames([
 		'o-forms-input',
 		'o-forms-input--checkbox',
@@ -25,81 +34,88 @@ export function DeferredBillingTerms ({ isDeferredBilling = false, checkBoxTrack
 		'data-validate': 'required,checked',
 		...(isChecked && { 'data-trackable': trackableAttr }),
 	};
-	return isDeferredBilling && (<>
-		<p className={labelClassName}>
-			<span className="ncf__paragraph">
-				I confirm I am {CONSENT_AGE} years or older and have read and agree to the
-				{' '}
-				<a
-					className="ncf__link--external"
-					href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-					title="FT Legal Terms and Conditions help page"
-					target="_blank"
-					rel="noopener noreferrer"
-					data-trackable="terms-and-conditions"
-				>
-					Terms &amp; Conditions
-				</a>
-				.
-			</span>
-		</p>
-		<p className={labelClassName}>
-			<span className="ncf__paragraph">
-				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 Customer Care through chat, phone or email.
-			</span>
-		</p>
-		<p className={labelClassName}>
-			<span className="ncf__paragraph">
-				By placing my order, I acknowledge that my subscription will start 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>
-		</p>
-		<p className={labelClassName}>
-			<span className="ncf__paragraph">
-				Find out more about our cancellation policy in our {' '}
-				<a
-					className="ncf__link--external"
-					href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-					title="FT Legal Terms and Conditions help page"
-					target="_blank"
-					rel="noopener noreferrer"
-					data-trackable="terms-and-conditions"
-				>
-					Terms &amp; Conditions
-				</a>
-				.
-			</span>
-		</p>
-		<p className={labelClassName}>
-			<span className="ncf__paragraph">
-				Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.
-				{' '}	<a
-					className="ncf__link--external"
-					href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-					title="FT Legal Terms and Conditions help page"
-					target="_blank"
-					rel="noopener noreferrer"
-					data-trackable="terms-and-conditions"
-				>
-					Terms &amp; Conditions
-				</a>
-				.
-			</span>
-		</p>
-		<div {...divProps}>
-			<label className={labelClassName} htmlFor={inputId} id={fieldId}>
-				<input {...inputProps} />
-				<span className="o-forms-input__label">
-					I agree with terms &amp; conditions.
-
-				</span>
-				<p className="o-forms-input__error">
-					{errorMessage}
+	return (
+		isDeferredBilling && (
+			<>
+				<p className={labelClassName}>
+					<span className="ncf__paragraph">
+						I confirm I am {CONSENT_AGE} years or older and have read and agree
+						to the{' '}
+						<a
+							className="ncf__link--external"
+							href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+							title="FT Legal Terms and Conditions help page"
+							target="_blank"
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							Terms &amp; Conditions
+						</a>
+						.
+					</span>
 				</p>
-			</label>
-		</div>
-	</>);
-
-};
+				<p className={labelClassName}>
+					<span className="ncf__paragraph">
+						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 Customer Care through chat, phone or email.
+					</span>
+				</p>
+				<p className={labelClassName}>
+					<span className="ncf__paragraph">
+						By placing my order, I acknowledge that my subscription will start
+						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>
+				</p>
+				<p className={labelClassName}>
+					<span className="ncf__paragraph">
+						Find out more about our cancellation policy in our{' '}
+						<a
+							className="ncf__link--external"
+							href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+							title="FT Legal Terms and Conditions help page"
+							target="_blank"
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							Terms &amp; Conditions
+						</a>
+						.
+					</span>
+				</p>
+				<p className={labelClassName}>
+					<span className="ncf__paragraph">
+						Please note that if you fail to make payment for your Deferred
+						Billing Plan within the due date your subscription will be
+						automatically cancelled.{' '}
+						<a
+							className="ncf__link--external"
+							href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+							title="FT Legal Terms and Conditions help page"
+							target="_blank"
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							Terms &amp; Conditions
+						</a>
+						.
+					</span>
+				</p>
+				<div {...divProps}>
+					<label className={labelClassName} htmlFor={inputId} id={fieldId}>
+						<input {...inputProps} />
+						<span className="o-forms-input__label">
+							I agree with terms &amp; conditions.
+						</span>
+						<p className="o-forms-input__error">{errorMessage}</p>
+					</label>
+				</div>
+			</>
+		)
+	);
+}
 
 DeferredBillingTerms.propTypes = {
 	hasError: PropTypes.bool,
@@ -108,5 +124,5 @@ DeferredBillingTerms.propTypes = {
 	fieldId: PropTypes.string,
 	inputId: PropTypes.string,
 	trackableAttr: PropTypes.string,
-	errorMessage: PropTypes.string
+	errorMessage: PropTypes.string,
 };

package/components/deferred-billing-terms.spec.js

@@ -29,7 +29,11 @@ describe('DeferredBillingTerms', () => {
 	});
 
 	it('renders appropriately if all props are set to false - no rendering of the component', () => {
-		const props = { isChecked: false, isDeferredBilling: false, hasError: false };
+		const props = {
+			isChecked: false,
+			isDeferredBilling: false,
+			hasError: false,
+		};
 
 		expect(DeferredBillingTerms).toRenderCorrectly(props);
 	});

package/components/deferred-billing-terms.stories.js

@@ -11,8 +11,8 @@ export default {
 		fieldId: { control: 'string' },
 		trackableAttr: { control: 'string' },
 		errorMessage: { control: 'string' },
-		isDeferredBilling: { control: 'boolean' }
-	}
+		isDeferredBilling: { control: 'boolean' },
+	},
 };
 
 export const Basic = (args) => <DeferredBillingTerms {...args} />;
@@ -22,5 +22,5 @@ export const CheckedFlow = (args) => <DeferredBillingTerms {...args} />;
 CheckedFlow.args = {
 	isChecked: true,
 	isDeferredBilling: true,
-	hasError: false
+	hasError: false,
 };

package/components/delivery-address-type.jsx

@@ -7,13 +7,13 @@ const addressTypes = [
 	{ id: 'pobox', label: 'P.O. Box' },
 ];
 
-export function DeliveryAddressType ({
+export function DeliveryAddressType({
 	value = 'home',
 	fieldId = 'deliveryAddressTypeField',
 	inputName = 'deliveryAddressType',
 	options = ['home', 'company', 'pobox'],
 	editMode = false,
-	titlePrompt = ''
+	titlePrompt = '',
 }) {
 	return (
 		<div
@@ -39,7 +39,7 @@ export function DeliveryAddressType ({
 								name={inputName}
 								value={type.id}
 								className="ncf__delivery-address-type__input"
-								disabled={editMode && (type.id !== value)}
+								disabled={editMode && type.id !== value}
 								defaultChecked={type.id === value}
 							/>
 							<span
@@ -61,5 +61,5 @@ DeliveryAddressType.propTypes = {
 	inputName: PropTypes.string,
 	value: PropTypes.oneOf(['home', 'company', 'pobox']),
 	options: PropTypes.arrayOf(PropTypes.oneOf(['home', 'company', 'pobox'])),
-	titlePrompt:PropTypes.string,
+	titlePrompt: PropTypes.string,
 };

package/components/delivery-address.jsx

@@ -12,7 +12,7 @@ import {
 	countriesSupportedISO,
 } from '../helpers/supportedCountries';
 
-export function DeliveryAddress ({
+export function DeliveryAddress({
 	fieldId = 'deliveryAddressFields',
 	hasError = false,
 	line1 = '',

package/components/delivery-city.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { countriesSupportedISO, identifyFTShippingZone } from '../helpers/supportedCountries';
+import {
+	countriesSupportedISO,
+	identifyFTShippingZone,
+} from '../helpers/supportedCountries';
 
-
-export function DeliveryCity ({
+export function DeliveryCity({
 	hasError = false,
 	value = '',
 	isDisabled = false,
@@ -20,7 +22,7 @@ export function DeliveryCity ({
 		GBR: 'e.g. Bath',
 		USA: 'e.g. Los Angeles',
 		CAN: 'e.g. Montreal',
-		ARE: 'e.g. Dubai'
+		ARE: 'e.g. Dubai',
 	};
 	const FTShippingZone = identifyFTShippingZone(country);
 
@@ -29,7 +31,9 @@ export function DeliveryCity ({
 		APAC: 'City/Prefecture',
 		DEFAULT: 'City',
 	};
-	const inputLabel = labelMapping[FTShippingZone] ? labelMapping[FTShippingZone] : labelMapping['DEFAULT'];
+	const inputLabel = labelMapping[FTShippingZone]
+		? labelMapping[FTShippingZone]
+		: labelMapping['DEFAULT'];
 
 	return (
 		<label

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,