@financial-times/n-conversion-forms 26.0.0 → 27.0.0

package/components/delivery-security-instructions.spec.js

@@ -104,11 +104,11 @@ describe('DeliverySecurityInstructions', () => {
 				expect(textAreaProps.name).toBe('inputId');
 			});
 
-			it('set maxLength to 10', () => {
+			it('sets maxLength to 10', () => {
 				expect(textAreaProps.maxLength).toBe(10);
 			});
 
-			it('set rows to 3', () => {
+			it('sets rows to 3', () => {
 				expect(textAreaProps.rows).toBe(3);
 			});
 
@@ -120,7 +120,7 @@ describe('DeliverySecurityInstructions', () => {
 				expect(textAreaProps.disabled).toBeTrue;
 			});
 
-			it('set value', () => {
+			it('sets value', () => {
 				expect(textAreaProps.defaultValue).toBe('value');
 			});
 		});

package/components/graduation-date.spec.js

@@ -24,7 +24,7 @@ describe('GraduationDate', () => {
 		).toBe(true);
 	});
 
-	it('should display graduationDateMonth options as English month names', () => {
+	it('displays graduationDateMonth options as English month names', () => {
 		const wrapper = shallow(<GraduationDate />);
 		const values = wrapper
 			.find('#graduationDateMonth option')
@@ -45,7 +45,7 @@ describe('GraduationDate', () => {
 		]);
 	});
 
-	it('should store graduationDateMonth values as two-digit numbers', () => {
+	it('stores graduationDateMonth values as two-digit numbers', () => {
 		const wrapper = shallow(<GraduationDate />);
 		const values = wrapper
 			.find('#graduationDateMonth option')
@@ -85,13 +85,13 @@ describe('GraduationDate', () => {
 	describe('given a valid value prop is passed', () => {
 		const wrapper = shallow(<GraduationDate value="2020-08-28" />);
 
-		it('should set the default month', () => {
+		it('sets the default month', () => {
 			expect(wrapper.find('#graduationDateMonth').prop('defaultValue')).toEqual(
 				'08'
 			);
 		});
 
-		it('should set the default year', () => {
+		it('sets the default year', () => {
 			expect(wrapper.find('#graduationDateYear').prop('defaultValue')).toEqual(
 				'2020'
 			);
@@ -101,7 +101,7 @@ describe('GraduationDate', () => {
 	describe('given an invalid value prop is passed', () => {
 		const wrapper = shallow(<GraduationDate value="invalid" />);
 
-		it('should not set any default values', () => {
+		it('does not set any default values', () => {
 			expect(
 				wrapper.find('#graduationDateMonth').prop('defaultValue')
 			).toBeFalsy();
@@ -114,7 +114,7 @@ describe('GraduationDate', () => {
 	describe('given the isDisabled prop is set to true', () => {
 		const wrapper = shallow(<GraduationDate isDisabled={true} />);
 
-		it('should disable both select fields', () => {
+		it('disables both select fields', () => {
 			expect(
 				wrapper.find('#graduationDateMonth').prop('disabled')
 			).toBeTruthy();
@@ -125,7 +125,7 @@ describe('GraduationDate', () => {
 	describe('given the isRequired prop is set to true', () => {
 		const wrapper = shallow(<GraduationDate isRequired={true} />);
 
-		it('should make both fields required', () => {
+		it('makes both fields required', () => {
 			expect(
 				wrapper.find('#graduationDateMonth').prop('required')
 			).toBeTruthy();
@@ -136,7 +136,7 @@ describe('GraduationDate', () => {
 	describe('given the hasError prop is set to true', () => {
 		const wrapper = shallow(<GraduationDate hasError={true} />);
 
-		it('should add an invalid modifier class', () => {
+		it('adds an invalid modifier class', () => {
 			expect(wrapper.find('div.o-forms-input').prop('className')).toMatch(
 				'o-forms-input--invalid'
 			);

package/components/index.jsx

@@ -1,6 +1,5 @@
 export { AcceptTerms } from './accept-terms';
 export { AppBanner } from './app-banner';
-export { B2cPartnershipPaymentTerm } from './b2c-partnership-payment-term';
 export { BillingCity } from './billing-city';
 export { BillingCountry } from './billing-country';
 export { BillingPostcode } from './billing-postcode';
@@ -54,3 +53,4 @@ export { EducationJobTitle } from './education-job-title';
 export { GraduationDate } from './graduation-date';
 export { LiteSubConfirmation } from './lite-sub-confirmation';
 export { GoogleSignIn } from './google-sign-in';
+export { TextInput } from './text-input';

package/components/message.jsx

@@ -87,7 +87,7 @@ const actionType = PropTypes.shape({
 	link: PropTypes.string.isRequired,
 	isSecondary: PropTypes.bool,
 	text: PropTypes.string,
-	target: '_self',
+	target: PropTypes.oneOf(['_self']),
 });
 
 Message.propTypes = {

package/components/payment-term.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {
+	Period,
+	Monthly,
+} from '@financial-times/n-pricing';
+
 export function PaymentTerm ({
 	fieldId = 'paymentTermField',
 	inputName = 'paymentTerm',
@@ -8,11 +13,50 @@ export function PaymentTerm ({
 	isEpaper = false,
 	options = [],
 	isFixedTermOffer = false,
-	displayName,
+	offerDisplayName,
 	showLegal = true,
 	largePrice = false,
 	optionsInARow = false,
 }) {
+
+	/**
+	 * Compute monthly price for given term name
+	 * @param {number} amount price in number format
+	 * @param {string} currency country id of the currency
+	 * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+	 * @returns {string}
+	 */
+	const getMontlyPriceFromPeriod = (amount, currency, period) => {
+		const periodObj = new Period(period);
+		const monthlyPrice = periodObj.calculatePrice('P1M', amount);
+		return new Monthly({ value: monthlyPrice, currency }).getAmount('monthly');
+	};
+
+	/**
+	 * returns period converted to time if found
+	 * otherwise returns empty string to avoid show information not mapped
+	 * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+	 * @returns {string}
+	 */
+	const getTimeFromPeriod = (period) => {
+		const freq = period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+		const amount = period.substring(1, period.length - 1);
+		return (
+			period ? `${amount} ${freq}` : ''
+		);
+	};
+
+	const isValidPeriod = (period) => {
+		try {
+			// Period should throw an error if it is not properly provided
+			// in order to validate it, we just send in case type is string
+			new Period(typeof period === 'string' ? period : '');
+			return true;
+		} catch (e) {
+			return false;
+		}
+	};
+
 	const nameMap = {
 		annual: {
 			title: 'Annual',
@@ -89,6 +133,37 @@ export function PaymentTerm ({
 				);
 			},
 		},
+		custom: {
+			price: (price) => (
+				<React.Fragment>
+					Single{' '}
+					<span className="ncf__payment-term__price ncf__strong">{price}</span>{' '}
+					payment
+				</React.Fragment>
+			),
+			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}
+					after the trial period.
+				</React.Fragment>
+			),
+			monthlyPrice: (monthlyPrice) =>
+				Boolean(monthlyPrice) && (
+					<span className="ncf__payment-term__equivalent-price">
+						That’s equivalent to{' '}
+						<span className="ncf__payment-term__monthly-price">{monthlyPrice}</span>{' '}
+						per month
+					</span>
+				),
+			renewsText: (renewalPeriod) => (
+				Boolean(renewalPeriod) && (
+					<p className="ncf__payment-term__renews-text">
+						Renews every {renewalPeriod} unless cancelled
+					</p>
+				)
+			),
+		}
 	};
 	const createPaymentTerm = (option) => {
 		const className = classNames([
@@ -106,18 +181,22 @@ export function PaymentTerm ({
 				'o-forms-input__radio o-forms-input__radio--right ncf__payment-term__input',
 			...(option.selected && { defaultChecked: true }),
 		};
-		const showTrialCopyInTitle =
-			option.isTrial && !isPrintOrBundle && !isEpaper;
-		const defaultTitle = option.name ? nameMap[option.name].title : '';
-		const title = isFixedTermOffer
-			? `${displayName} - ${defaultTitle}`
-			: defaultTitle;
+
 		const createDiscount = () => {
 			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>
+				)
+			);
+		};
+
+		const createB2cDiscountCopy = () => {
+			return (
+				option.name === 'annual' && option.b2cPartnership && option.b2cDiscountCopy && (
+					<span className="ncf__payment-term__discount">
+						{option.b2cDiscountCopy}
 					</span>
 				)
 			);
@@ -144,23 +223,69 @@ export function PaymentTerm ({
 							{/* <br />Save up to 25% when you pay annually */}
 						</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>
+						// 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>
+							)
 					)}
 				</React.Fragment>
 			);
 		};
 
+		const getTermDisplayName = () => {
+
+			const showTrialCopyInTitle =
+				option.isTrial && !isPrintOrBundle && !isEpaper;
+
+			const defaultTitle = (option.name && nameMap[option.name]) ? nameMap[option.name].title : '';
+
+			const title = isFixedTermOffer
+				? `${offerDisplayName} - ${defaultTitle}`
+				: defaultTitle;
+
+			let termDisplayName = '';
+			if (showTrialCopyInTitle) {
+				const termName = option.displayName ? option.displayName : 'Premium Digital';
+				termDisplayName = `Trial: ${termName} - `;
+			}
+
+			const getTermPeriod = () => {
+				// annual, quarterly and monthly
+				if (nameMap[option.name]) {
+					return title;
+				}
+				// custom offer with period provided
+				if (isValidPeriod(option.value)) {
+					return getTimeFromPeriod(option.value);
+				}
+				// custom legacy cases, where period is not provided
+				return option.title;
+			};
+
+			const termPeriod = getTermPeriod();
+			termDisplayName = `${termDisplayName}${termPeriod} `;
+
+			return termDisplayName;
+		};
+
 		return (
 			<div key={option.value} className={className}>
 				<input {...props} />
@@ -169,6 +294,7 @@ export function PaymentTerm ({
 					className="o-forms-input__label ncf__payment-term__label"
 				>
 					{createDiscount()}
+					{createB2cDiscountCopy()}
 
 					<span
 						className={classNames([
@@ -176,8 +302,7 @@ export function PaymentTerm ({
 							{ 'ncf__payment-term__title--large-price': largePrice },
 						])}
 					>
-						{showTrialCopyInTitle ? 'Trial: Premium Digital - ' : ''}
-						{nameMap[option.name] ? title : option.title}{' '}
+						{getTermDisplayName()}
 						{option.subTitle && (
 							<span className="ncf__regular ncf__payment-term__sub-title">
 								{option.subTitle}
@@ -250,6 +375,8 @@ PaymentTerm.propTypes = {
 	isEpaper: PropTypes.bool,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({
+			b2cDiscountCopy: PropTypes.string,
+			isB2cPartnership: PropTypes.bool,
 			discount: PropTypes.string,
 			isTrial: PropTypes.bool,
 			name: PropTypes.string.isRequired,
@@ -257,7 +384,7 @@ PaymentTerm.propTypes = {
 			selected: PropTypes.bool,
 			trialDuration: PropTypes.string,
 			trialPrice: PropTypes.string,
-			amount: PropTypes.number,
+			amount: PropTypes.string,
 			trialAmount: PropTypes.number,
 			value: PropTypes.string.isRequired,
 			monthlyPrice: PropTypes.string,
@@ -268,7 +395,7 @@ PaymentTerm.propTypes = {
 		})
 	),
 	isFixedTermOffer: PropTypes.bool,
-	displayName: PropTypes.string,
+	offerDisplayName: PropTypes.string,
 	showLegal: PropTypes.bool,
 	largePrice: PropTypes.bool,
 	optionsInARow: PropTypes.bool,

package/components/payment-term.spec.js

@@ -130,29 +130,71 @@ describe('PaymentTerm', () => {
 			<PaymentTerm
 				isFixedTermOffer={true}
 				options={options}
-				displayName="Mix & Match"
+				offerDisplayName="Mix & Match"
 			/>
 		);
 
-		it('should not include renewal text', () => {
+		it('does not include renewal text', () => {
 			expect(
 				wrapper.find('.ncf__payment-term__renews-text').text()
 			).not.toMatch(/Renews (annually|monthly|quarterly) unless cancelled/);
 		});
 
-		it('should render fixed term renewal text in English', () => {
+		it('renders fixed term renewal text in English', () => {
 			expect(wrapper.find('.ncf__payment-term__renews-text').text()).toMatch(
 				/This subscription is for 3 months, charged monthly. You can cancel at anytime/
 			);
 		});
 
-		it('should render offer name on payment term title', () => {
+		it('renders offer name on payment term title', () => {
 			expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
 				'Mix & Match - Monthly'
 			);
 		});
 	});
 
+	describe('getDisplayName', () => {
+		const baseOptions = {
+			name: 'monthly',
+			value: 'monthly',
+			price: '£20.00',
+			monthlyPrice: '£1.67',
+		};
+		describe('non-trial terms', () => {
+			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 .*$/);
+			});
+		});
+		describe('getDisplayName', () => {
+			const trialOptions = {
+				...baseOptions,
+				isTrial: true,
+			};
+			it('defaults to `Premium digital`', () => {
+				const options = [trialOptions];
+				const wrapper = shallow(<PaymentTerm options={options} />);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^Trial: Premium Digital - Monthly .*$/
+				);
+			});
+			it('renders using displayName if available', () => {
+				const options = [{
+					...trialOptions,
+					displayName: 'someDisplayName',
+				}];
+				const wrapper = shallow(<PaymentTerm options={options} />);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^Trial: someDisplayName - Monthly .*/
+				);
+			});
+		});
+	});
+
 	describe('[data-base-amount]', () => {
 		it('renders option.amount as data-base-amount if isTrial is false', () => {
 			const options = [

package/components/payment-term.stories.js

@@ -14,25 +14,80 @@ export const Basic = (args) => (
 		</Fieldset>
 	</div>
 );
+
 Basic.args = {
 	options: [
 		{
-			name: 'monthly',
-			price: '£49.99',
-			value: 49.99,
-			isTrial: false,
-			discount: '33%',
-			selected: false,
+			'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: 'annual',
-			price: '£299.99',
-			value: 299.99,
-			isTrial: false,
-			discount: null,
-			selected: true,
+			'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': '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'
+		}
+	  ]
 };
 
 export const FixedTermOffer = (args) => (
@@ -51,7 +106,7 @@ FixedTermOffer.args = {
 		},
 	],
 	isFixedTermOffer: true,
-	displayName: 'Mix & Match',
+	offerDisplayName: 'Mix & Match',
 };
 
 export const RenewOffers = (args) => (

package/components/payment-type.jsx

@@ -228,6 +228,7 @@ export function PaymentType ({
 		name: 'payFasterNextTime',
 		value: 'true',
 		required: false,
+		checked: true,
 		...(isSingleTermChecked && { defaultChecked: true }),
 	};
 
@@ -247,7 +248,8 @@ export function PaymentType ({
 				{createDirectDebitPanel()}
 
 				{createZuoraPanel()}
-
+			</div>
+			<div className="o-forms-field">
 				{isSingleTerm && (
 					<>
 						<label

package/components/position.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { demographics } from 'n-common-static-data';
-const defaultOptions = demographics.positions.positions;
+import { b2b, demographics } from 'n-common-static-data';
+const B2CPositions = demographics.positions.positions;
+const B2BPositions = b2b.demographics.positions.positions;
 
 export function Position ({
 	value,
@@ -11,7 +12,8 @@ export function Position ({
 	fieldId = 'positionField',
 	selectId = 'position',
 	selectName = 'position',
-	options = defaultOptions,
+	isB2B = false,
+	options = isB2B ? B2BPositions : B2CPositions,
 	isRequired = true,
 	fieldLabel = 'What’s your job position?',
 }) {
@@ -70,6 +72,7 @@ Position.propTypes = {
 	fieldId: PropTypes.string,
 	selectId: PropTypes.string,
 	selectName: PropTypes.string,
+	isB2B: PropTypes.bool,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({
 			code: PropTypes.string,

package/components/position.spec.js

@@ -1,7 +1,7 @@
 import { Position } from './index';
 import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
 import { demographics } from 'n-common-static-data';
-const defaultOptions = demographics.positions.positions;
+const B2CPositions = demographics.positions.positions;
 
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -12,7 +12,7 @@ expect.extend(expectToRenderCorrectly);
 describe('Position', () => {
 	it('render a select with a label', () => {
 		const props = {
-			options: defaultOptions,
+			options: B2CPositions,
 		};
 
 		expect(Position).toRenderCorrectly(props);
@@ -20,7 +20,7 @@ describe('Position', () => {
 
 	it('can render an initial selected value', () => {
 		const props = {
-			options: defaultOptions,
+			options: B2CPositions,
 			value: 'CP',
 		};
 
@@ -29,7 +29,7 @@ describe('Position', () => {
 
 	it('can render a disable select', () => {
 		const props = {
-			options: defaultOptions,
+			options: B2CPositions,
 			isDisabled: true,
 		};
 
@@ -38,7 +38,7 @@ describe('Position', () => {
 
 	it('can render an error message', () => {
 		const props = {
-			options: defaultOptions,
+			options: B2CPositions,
 			hasError: true,
 		};
 
@@ -68,4 +68,14 @@ describe('Position', () => {
 			component.find('.o-forms-title.o-forms-field--optional').length
 		).toEqual(1);
 	});
+
+	it('defaults to B2B options if isB2B is true', () => {
+		const props = { isB2B: true };
+		const component = mount(Position(props));
+
+		// Look for an option which is only present in the default B2B data set and not in the B2C one.
+		const optionValue = component.find('option').at(1).instance().value;
+
+		expect(optionValue).toBe('OW');
+	});
 });