@financial-times/n-conversion-forms 27.7.2 → 28.0.1

package/components/payment-term.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {
-	Period,
-	Monthly,
-} from '@financial-times/n-pricing';
+import { Period, Monthly } from '@financial-times/n-pricing';
 
-export function PaymentTerm ({
+export function PaymentTerm({
 	fieldId = 'paymentTermField',
 	inputName = 'paymentTerm',
 	isPrintOrBundle = false,
@@ -18,7 +15,6 @@ export function PaymentTerm ({
 	largePrice = false,
 	optionsInARow = false,
 }) {
-
 	/**
 	 * Compute monthly price for given term name
 	 * @param {number} amount price in number format
@@ -39,11 +35,10 @@ export function PaymentTerm ({
 	 * @returns {string}
 	 */
 	const getTimeFromPeriod = (period) => {
-		const freq = period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+		const freq =
+			period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
 		const amount = period.substring(1, period.length - 1);
-		return (
-			period ? `${amount} ${freq}` : ''
-		);
+		return period ? `${amount} ${freq}` : '';
 	};
 
 	const isValidPeriod = (period) => {
@@ -144,7 +139,8 @@ export function PaymentTerm ({
 			trialPrice: (trialPrice, trialPeriod) => (
 				<React.Fragment>
 					Unless you cancel during your trial you will be billed{' '}
-					<span className="ncf__payment-term__price">{trialPrice}</span> per {trialPeriod}
+					<span className="ncf__payment-term__price">{trialPrice}</span> per{' '}
+					{trialPeriod}
 					after the trial period.
 				</React.Fragment>
 			),
@@ -152,18 +148,19 @@ export function PaymentTerm ({
 				Boolean(monthlyPrice) && (
 					<span className="ncf__payment-term__equivalent-price">
 						That’s equivalent to{' '}
-						<span className="ncf__payment-term__monthly-price">{monthlyPrice}</span>{' '}
+						<span className="ncf__payment-term__monthly-price">
+							{monthlyPrice}
+						</span>{' '}
 						per month
 					</span>
 				),
-			renewsText: (renewalPeriod) => (
+			renewsText: (renewalPeriod) =>
 				Boolean(renewalPeriod) && (
 					<p className="ncf__payment-term__renews-text">
 						Renews every {renewalPeriod} unless cancelled
 					</p>
-				)
-			),
-		}
+				),
+		},
 	};
 	const createPaymentTerm = (option) => {
 		const className = classNames([
@@ -186,7 +183,9 @@ export function PaymentTerm ({
 			return (
 				option.discount && (
 					<span className="ncf__payment-term__discount">
-						{option.bestOffer ? 'Best offer' : `Save ${option.discount} off RRP`}
+						{option.bestOffer
+							? 'Best offer'
+							: `Save ${option.discount} off RRP`}
 					</span>
 				)
 			);
@@ -194,7 +193,9 @@ export function PaymentTerm ({
 
 		const createB2cDiscountCopy = () => {
 			return (
-				option.name === 'annual' && option.b2cPartnership && option.b2cDiscountCopy && (
+				option.name === 'annual' &&
+				option.b2cPartnership &&
+				option.b2cDiscountCopy && (
 					<span className="ncf__payment-term__discount">
 						{option.b2cDiscountCopy}
 					</span>
@@ -222,40 +223,46 @@ export function PaymentTerm ({
 							{/* Remove this discount text temporarily in favour of monthly price */}
 							{/* <br />Save up to 25% when you pay annually */}
 						</div>
+					) : // this should cover the cases different than annual, quarterly and monthly
+					// for those containing period on option.value, render custom template, for the rest keep legacy render
+					isValidPeriod(option.value) ? (
+						<div className="ncf__payment-term__description">
+							{nameMap['custom'].price(option.price)}
+							{nameMap['custom'].monthlyPrice(
+								option.monthlyPrice && option.monthlyPrice !== '0'
+									? Number(option.monthlyPrice)
+									: getMontlyPriceFromPeriod(
+											option.amount,
+											option.currency,
+											option.value
+									  )
+							)}
+							{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
+						</div>
 					) : (
-						// this should cover the cases different than annual, quarterly and monthly
-						// for those containing period on option.value, render custom template, for the rest keep legacy render
-						isValidPeriod(option.value) ?
-							<div className="ncf__payment-term__description">
-								{nameMap['custom'].price(option.price)}
-								{nameMap['custom'].monthlyPrice(
-									option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMontlyPriceFromPeriod(option.amount, option.currency, option.value)
-								)}
-								{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
-							</div>
-							: (
-								<div>
-									<span className={largePrice ? 'ncf__payment-term__large-price' : ''}>
-										{option.price}
-									</span>
-									{option.chargeOnText && (
-										<p className="ncf__payment-term__charge-on-text">
-											{option.chargeOnText}
-										</p>
-									)}
-								</div>
-							)
+						<div>
+							<span
+								className={largePrice ? 'ncf__payment-term__large-price' : ''}
+							>
+								{option.price}
+							</span>
+							{option.chargeOnText && (
+								<p className="ncf__payment-term__charge-on-text">
+									{option.chargeOnText}
+								</p>
+							)}
+						</div>
 					)}
 				</React.Fragment>
 			);
 		};
 
 		const getTermDisplayName = () => {
-
 			const showTrialCopyInTitle =
 				option.isTrial && !isPrintOrBundle && !isEpaper;
 
-			const defaultTitle = (option.name && nameMap[option.name]) ? nameMap[option.name].title : '';
+			const defaultTitle =
+				option.name && nameMap[option.name] ? nameMap[option.name].title : '';
 
 			const title = isFixedTermOffer
 				? `${offerDisplayName} - ${defaultTitle}`
@@ -263,7 +270,9 @@ export function PaymentTerm ({
 
 			let termDisplayName = '';
 			if (showTrialCopyInTitle) {
-				const termName = option.displayName ? option.displayName : 'Premium Digital';
+				const termName = option.displayName
+					? option.displayName
+					: 'Premium Digital';
 				termDisplayName = `Trial: ${termName} - `;
 			}
 

package/components/payment-term.spec.js

@@ -161,13 +161,17 @@ describe('PaymentTerm', () => {
 			monthlyPrice: '£1.67',
 		};
 		describe('non-trial terms', () => {
-			const options = [{
-				...baseOptions,
-				isTrial: false,
-			}];
+			const options = [
+				{
+					...baseOptions,
+					isTrial: false,
+				},
+			];
 			it('renders with time period only if trial.option == false', () => {
 				const wrapper = shallow(<PaymentTerm options={options} />);
-				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(/^Monthly .*$/);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^Monthly .*$/
+				);
 			});
 		});
 		describe('getDisplayName', () => {
@@ -183,10 +187,12 @@ describe('PaymentTerm', () => {
 				);
 			});
 			it('renders using displayName if available', () => {
-				const options = [{
-					...trialOptions,
-					displayName: 'someDisplayName',
-				}];
+				const options = [
+					{
+						...trialOptions,
+						displayName: 'someDisplayName',
+					},
+				];
 				const wrapper = shallow(<PaymentTerm options={options} />);
 				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
 					/^Trial: someDisplayName - Monthly .*/

package/components/payment-term.stories.js

@@ -18,76 +18,76 @@ export const Basic = (args) => (
 Basic.args = {
 	options: [
 		{
-			'name': '2 yearly',
-			'isTrial': true,
-			'discount': '',
-			'selected': false,
-			'price': '$645.00',
-			'trialPrice': '$100.00',
-			'trialDuration': 'Trial period',
-			'monthlyPrice': '0',
-			'amount': '645.00',
-			'trialAmount': 100,
-			'value': 'P2Y',
-			'currency': 'USD'
+			name: '2 yearly',
+			isTrial: true,
+			discount: '',
+			selected: false,
+			price: '$645.00',
+			trialPrice: '$100.00',
+			trialDuration: 'Trial period',
+			monthlyPrice: '0',
+			amount: '645.00',
+			trialAmount: 100,
+			value: 'P2Y',
+			currency: 'USD',
 		},
 		{
-			'name': '3 yearly',
-			'isTrial': false,
-			'discount': '',
-			'selected': false,
-			'price': '$909.00',
-			'trialPrice': '$0.00',
-			'trialDuration': '',
-			'monthlyPrice': '0',
-			'amount': '909.00',
-			'trialAmount': null,
-			'value': 'P3Y',
-			'currency': 'USD'
-		  },
+			name: '3 yearly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '$909.00',
+			trialPrice: '$0.00',
+			trialDuration: '',
+			monthlyPrice: '0',
+			amount: '909.00',
+			trialAmount: null,
+			value: 'P3Y',
+			currency: 'USD',
+		},
 		{
-			'name': '6 monthly',
-			'isTrial': false,
-			'discount': '',
-			'selected': false,
-			'price': '$229.00',
-			'trialPrice': '$0.00',
-			'trialDuration': '',
-			'monthlyPrice': '0',
-			'amount': '229.00',
-			'trialAmount': null,
-			'value': 'P6M',
-			'currency': 'USD'
+			name: '6 monthly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '$229.00',
+			trialPrice: '$0.00',
+			trialDuration: '',
+			monthlyPrice: '0',
+			amount: '229.00',
+			trialAmount: null,
+			value: 'P6M',
+			currency: 'USD',
 		},
 		{
-			'name': 'annual',
-			'isTrial': false,
-			'discount': '',
-			'selected': true,
-			'price': '$385.00',
-			'trialPrice': '$0.00',
-			'trialDuration': '',
-			'monthlyPrice': '$32.09',
-			'amount': '385.00',
-			'trialAmount': null,
-			'value': 'P1Y',
-			'currency': 'USD'
+			name: 'annual',
+			isTrial: false,
+			discount: '',
+			selected: true,
+			price: '$385.00',
+			trialPrice: '$0.00',
+			trialDuration: '',
+			monthlyPrice: '$32.09',
+			amount: '385.00',
+			trialAmount: null,
+			value: 'P1Y',
+			currency: 'USD',
 		},
 		{
-			'name': 'quarterly',
-			'isTrial': false,
-			'discount': '',
-			'selected': false,
-			'price': '$95.00',
-			'trialPrice': '$0.00',
-			'trialDuration': '',
-			'monthlyPrice': '$31.67',
-			'amount': '95.00',
-			'trialAmount': null,
-			'value': 'P3M',
-			'currency': 'USD'
-		}
-	  ]
+			name: 'quarterly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '$95.00',
+			trialPrice: '$0.00',
+			trialDuration: '',
+			monthlyPrice: '$31.67',
+			amount: '95.00',
+			trialAmount: null,
+			value: 'P3M',
+			currency: 'USD',
+		},
+	],
 };
 
 export const FixedTermOffer = (args) => (

package/components/payment-type.jsx

@@ -13,7 +13,7 @@ const PaypalCustomerCareMessage = () => {
 				<div className="o-message__container">
 					<div className="o-message__content">
 						<p className="o-message__content-main">
-							If you{'\''}d like to change your payment method to Paypal please{' '}
+							If you{"'"}d like to change your payment method to Paypal please{' '}
 							<a
 								className="o-message__actions__secondary"
 								href="https://help.ft.com"
@@ -29,7 +29,7 @@ const PaypalCustomerCareMessage = () => {
 	);
 };
 
-export function PaymentType ({
+export function PaymentType({
 	enableApplepay = false,
 	enableCreditcard = false,
 	enableDirectdebit = false,
@@ -103,7 +103,7 @@ export function PaymentType ({
 			paymentTypePaypal(),
 			paymentTypeDirectDebit,
 			paymentTypeApplePay,
-			paymentTypeBankTransfer
+			paymentTypeBankTransfer,
 		];
 		return paymentTypes.map((type) => {
 			if (type.id === undefined) {
@@ -196,6 +196,7 @@ export function PaymentType ({
 	};
 
 	const createZuoraPanel = () => {
+		// eslint-disable-next-line react/no-unknown-property
 		return (
 			(enableDirectdebit || enableCreditcard) && (
 				<div className="ncf__payment-type-panel ncf__payment-type-panel--creditcard ncf__payment-type-panel--directdebit ncf__hidden">
@@ -207,7 +208,6 @@ export function PaymentType ({
 							overflow="visible"
 							scrolling="no"
 							frameBorder="0"
-							allowtransparency="true"
 							className="z_hppm_iframe"
 							style={{ display: 'block', width: '100%' }}
 						></iframe>

package/components/personal-title.jsx

@@ -9,7 +9,7 @@ export const defaultPersonalTitles = [
 	{ code: 'Ms', description: 'Ms' },
 ];
 
-export function PersonalTitle ({
+export function PersonalTitle({
 	value,
 	isDisabled = false,
 	hasError = false,

package/components/phone.jsx

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

package/components/position.jsx

@@ -5,7 +5,7 @@ import { b2b, demographics } from 'n-common-static-data';
 const B2CPositions = demographics.positions.positions;
 const B2BPositions = b2b.demographics.positions.positions;
 
-export function Position ({
+export function Position({
 	value,
 	isDisabled = false,
 	hasError = false,

package/components/progress-indicator.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function ProgressIndicator ({ items = [], disableLinks = false }) {
-	function getElementsForComplete (item) {
+export function ProgressIndicator({ items = [], disableLinks = false }) {
+	function getElementsForComplete(item) {
 		return disableLinks ? (
 			<span className="o-stepped-progress__step o-stepped-progress__step--complete">
 				<span className="o-stepped-progress__label">
@@ -26,7 +26,7 @@ export function ProgressIndicator ({ items = [], disableLinks = false }) {
 		);
 	}
 
-	function getElementsForNonComplete (item) {
+	function getElementsForNonComplete(item) {
 		const nonCompleteDivClassName = classNames([
 			'o-stepped-progress__step',
 			{ 'o-stepped-progress__step--current': item.isCurrent },

package/components/province.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { canadianProvinces } from 'n-common-static-data';
 const defaultProvinces = canadianProvinces.provinces;
 
-export function Province ({
+export function Province({
 	value,
 	fieldId = 'provinceField',
 	selectId = 'province',

package/components/registration-confirmation.jsx

@@ -33,7 +33,7 @@ const STORES = [
 	},
 ];
 
-export function RegistrationConfirmation ({
+export function RegistrationConfirmation({
 	email = EMAIL_DEFAULT_TEXT,
 	returnUrl = '/',
 }) {

package/components/responsibility.jsx

@@ -5,7 +5,7 @@ import { b2b, demographics } from 'n-common-static-data';
 const B2CResponsibilities = demographics.responsibilities.responsibilities;
 const B2BResponsibilities = b2b.demographics.responsibilities.responsibilities;
 
-export function Responsibility ({
+export function Responsibility({
 	value,
 	isDisabled = false,
 	isRequired = true,

package/components/section.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function Section ({ children }) {
+export function Section({ children }) {
 	return (
 		<div className="o-forms-section o-forms-section--wide">
 			<div className="o-forms-section__message">{children}</div>

package/components/state.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { americanStates } from 'n-common-static-data';
 const defaultStates = americanStates.states;
 
-export function State ({
+export function State({
 	value,
 	fieldId = 'stateField',
 	selectId = 'state',

package/components/submit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Submit ({
+export function Submit({
 	id = 'submitButton',
 	isCentered = false,
 	isDisabled = false,

package/components/text-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function TextInput ({
+export function TextInput({
 	dataTrackable,
 	errorText = 'Please enter a value',
 	fieldId,

package/components/trial-banner.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function TrialBanner ({ trialDuration = '' }) {
+export function TrialBanner({ trialDuration = '' }) {
 	const durationMessage = trialDuration ? (
 		<>
 			<span className="ncf__strong">{trialDuration}</span>{' '}

package/dist/deferred-billing-terms.js

@@ -73,7 +73,7 @@ function DeferredBillingTerms(_ref) {
     className: labelClassName
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "ncf__paragraph"
-  }, "Find out more about our cancellation policy in our ", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
@@ -84,7 +84,7 @@ function DeferredBillingTerms(_ref) {
     className: labelClassName
   }, /*#__PURE__*/_react["default"].createElement("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.", ' ', " ", /*#__PURE__*/_react["default"].createElement("a", {
+  }, "Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
@@ -101,7 +101,6 @@ function DeferredBillingTerms(_ref) {
     className: "o-forms-input__error"
   }, errorMessage))));
 }
-;
 DeferredBillingTerms.propTypes = {
   hasError: _propTypes["default"].bool,
   isChecked: _propTypes["default"].bool,

package/dist/payment-term.js

@@ -143,7 +143,7 @@ function PaymentTerm(_ref) {
       trialPrice: function trialPrice(_trialPrice, trialPeriod) {
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
           className: "ncf__payment-term__price"
-        }, _trialPrice), " per ", trialPeriod, "after the trial period.");
+        }, _trialPrice), " per", ' ', trialPeriod, "after the trial period.");
       },
       monthlyPrice: function monthlyPrice(_monthlyPrice) {
         return Boolean(_monthlyPrice) && /*#__PURE__*/_react["default"].createElement("span", {

package/dist/payment-type.js

@@ -24,7 +24,7 @@ var PaypalCustomerCareMessage = function PaypalCustomerCareMessage() {
     className: "o-message__content"
   }, /*#__PURE__*/_react["default"].createElement("p", {
     className: "o-message__content-main"
-  }, "If you", '\'', "d like to change your payment method to Paypal please", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "If you", "'", "d like to change your payment method to Paypal please", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "o-message__actions__secondary",
     href: "https://help.ft.com"
   }, "contact Customer Care"), ".")))));
@@ -141,6 +141,7 @@ function PaymentType(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("li", null, "This Guarantee is offered by all banks and building societies that accept instructions to pay Direct Debits."), /*#__PURE__*/_react["default"].createElement("li", null, "If there are any changes to the amount, date or frequency of your Direct Debit GoCardless re: The Financial Times will notify you 3 working days in advance of your account being debited or as otherwise agreed. If you request GoCardless Ltd re: The Financial Times to collect a payment, confirmation of the amount and date will be given to you at the time of the request."), /*#__PURE__*/_react["default"].createElement("li", null, "If an error is made in the payment of your Direct Debit, by GoCardless Ltd re: The Financial Times or your bank or building society, you are entitled to a full and immediate refund of the amount paid from your bank or building society."), /*#__PURE__*/_react["default"].createElement("li", null, "If you receive a refund you are not entitled to, you must pay it back when GoCardless Ltd re: The Financial Times asks you to."), /*#__PURE__*/_react["default"].createElement("li", null, "You can cancel a Direct Debit at any time by simply contacting your bank or building society. Written confirmation may be required. Please also notify us."))));
   };
   var createZuoraPanel = function createZuoraPanel() {
+    // eslint-disable-next-line react/no-unknown-property
     return (enableDirectdebit || enableCreditcard) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "ncf__payment-type-panel ncf__payment-type-panel--creditcard ncf__payment-type-panel--directdebit ncf__hidden"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -154,7 +155,6 @@ function PaymentType(_ref) {
       overflow: "visible",
       scrolling: "no",
       frameBorder: "0",
-      allowtransparency: "true",
       className: "z_hppm_iframe",
       style: {
         display: 'block',

package/helpers/index.js

@@ -1,12 +1,15 @@
 module.exports = {
 	'ncf-countries': require('./ncf-countries'),
 	'ncf-common-data': require('./ncf-common-data'),
-	'cemeaV1ISO': require('./supportedCountries').cemeaV1ISO,
-	'cemeaV2ISO': require('./supportedCountries').cemeaV2ISO,
-	'apacISO': require('./supportedCountries').apacISO,
-	'identifyFTShippingZone': require('./supportedCountries').identifyFTShippingZone,
-	'countriesSupported': require('./supportedCountries').countriesSupported,
-	'countriesSupportedISO': require('./supportedCountries').countriesSupportedISO,
-	'supportedPostcodeValidators': require('./supportedPostcodeValidators').supportedPostcodeValidators,
-	'allSupportedPostcodeExamples': require('./supportedPostcodeExamples').allSupportedPostcodeExamples,
+	cemeaV1ISO: require('./supportedCountries').cemeaV1ISO,
+	cemeaV2ISO: require('./supportedCountries').cemeaV2ISO,
+	apacISO: require('./supportedCountries').apacISO,
+	identifyFTShippingZone: require('./supportedCountries')
+		.identifyFTShippingZone,
+	countriesSupported: require('./supportedCountries').countriesSupported,
+	countriesSupportedISO: require('./supportedCountries').countriesSupportedISO,
+	supportedPostcodeValidators: require('./supportedPostcodeValidators')
+		.supportedPostcodeValidators,
+	allSupportedPostcodeExamples: require('./supportedPostcodeExamples')
+		.allSupportedPostcodeExamples,
 };

package/helpers/ncf-countries.spec.js

@@ -118,7 +118,7 @@ describe('ncf-countries', () => {
 	});
 });
 
-function generateCountryArray (length, { includeAllFrequent = true } = {}) {
+function generateCountryArray(length, { includeAllFrequent = true } = {}) {
 	return Array.from(Array(length), (item, index) => ({
 		code: `C-${index}`,
 	})).concat(