@financial-times/n-conversion-forms 32.11.0 → 33.0.0

package/.circleci/config.yml

@@ -1,7 +1,7 @@
 # CONFIG GENERATED BY DOTCOM-TOOL-KIT, DO NOT EDIT BY HAND
 version: 2.1
 orbs:
-  tool-kit: financial-times/dotcom-tool-kit@4
+  tool-kit: financial-times/dotcom-tool-kit@5
 executors:
   node:
     docker:
@@ -31,8 +31,6 @@ workflows:
           filters:
             branches:
               only: /(^renovate-.*|^nori/.*)/
-            tags:
-              only: /^v\d+\.\d+\.\d+(-.+)?/
       - tool-kit/setup:
           name: tool-kit/setup-<< matrix.executor >>
           requires:

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "321a6a0d8b6b67274c78f87926fb9f9ce111da60",
-  "tag": "v32.11.0"
+  "version": "a095aefdcff4fca917872327a21f932adbf4b010",
+  "tag": "v33.0.0"
 }

package/components/__snapshots__/package-change.spec.js.snap

@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PackageChange annual render when is7DayPassExperiment is true 1`] = `
-<div class="ncf__package-change">
-  <div class="ncf__package-change__package">
-    <div class="ncf__package-change__content">
-      <p>
-        You have chosen
-        <span class="ncf__strong">
-          Trial
-        </span>
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`PackageChange annual render with defaults 1`] = `
 <div class="ncf__package-change">
   <div class="ncf__package-change__package">

package/components/accept-terms-subscription.jsx

@@ -9,7 +9,6 @@ export function AcceptTermsSubscription({
 	isTrial = false,
 	isPrintProduct = false,
 	isSingleTerm = false,
-	is7DayPassExperiment = false,
 	isTermedSubscriptionTermType = false,
 	isTransition = false,
 	transitionType = null,
@@ -39,56 +38,6 @@ export function AcceptTermsSubscription({
 		required: true,
 	};
 
-	if (is7DayPassExperiment) {
-		return (
-			<div {...divProps}>
-				<ul className="o-typography-list ncf__accept-terms-list">
-					<li>
-						<span className="terms-transition terms-transition--immediate">
-							I give consent for my chosen payment method to be charged
-							automatically.
-						</span>
-					</li>
-					<li>
-						<span className="terms-transition terms-transition--immediate">
-							By placing your order subject to the Terms & Conditions (save for
-							section 2) referred to below, you agree that we may start your
-							7-day pass immediately upon our acceptance of your order and that
-							you are waiving your statutory right to cancel our contract within
-							14 days of confirmation. Your payment is a one-time payment
-							collected at the time of checkout, and cancelling at any point
-							(whether before or after the 14-day period) will not entitle you
-							to a refund.
-						</span>
-					</li>
-					<li>
-						<span className="terms-transition">
-							Please see here for the complete{' '}
-							<a
-								className="ncf__link--external"
-								href="http://help.ft.com/help/legal-privacy/terms-conditions/"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Terms &amp; Conditions
-							</a>
-							.
-						</span>
-					</li>
-				</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>
-		);
-	}
-
 	if (isTermedSubscriptionTermType) {
 		return (
 			<div {...divProps}>
@@ -309,7 +258,6 @@ AcceptTermsSubscription.propTypes = {
 	isTrial: PropTypes.bool,
 	isPrintProduct: PropTypes.bool,
 	isSingleTerm: PropTypes.bool,
-	is7DayPassExperiment: PropTypes.bool,
 	isTermedSubscriptionTermType: PropTypes.bool,
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,

package/components/accept-terms-subscription.spec.js

@@ -81,13 +81,13 @@ describe('AcceptTermsSubscription', () => {
 		const transitionTerms2 = component.find('.terms-transition').at(1);
 		const transitionTerms3 = component.find('.terms-transition').at(2);
 
-		expect(transitionTerms1.text()).toEqual(
+		expect(transitionTerms1.text()).toBe(
 			'I give consent for the chosen payment method to be charged automatically.'
 		);
-		expect(transitionTerms2.text()).toEqual(
+		expect(transitionTerms2.text()).toBe(
 			'By placing your order subject to the Terms & Conditions (save for section 2) referred to below, you are waiving your statutory right to cancel our contract within 14 days of payment. Your payment is a one-time payment collected at the time of checkout, and unsubscribing or cancelling at any point (whether before or after the 14-day period) will not entitle you to a refund.'
 		);
-		expect(transitionTerms3.text()).toEqual(
+		expect(transitionTerms3.text()).toBe(
 			'Please see here for the complete Terms & Conditions.'
 		);
 	});

package/components/company-name.spec.js

@@ -69,9 +69,7 @@ describe('CompanyName', () => {
 
 		const component = mount(CompanyName(props));
 
-		expect(component.find('.o-forms-title__main').text()).toEqual(
-			'Company name'
-		);
+		expect(component.find('.o-forms-title__main').text()).toBe('Company name');
 	});
 
 	it('renders with custom label wording', () => {
@@ -79,7 +77,7 @@ describe('CompanyName', () => {
 
 		const component = mount(CompanyName(props));
 
-		expect(component.find('.o-forms-title__main').text()).toEqual(
+		expect(component.find('.o-forms-title__main').text()).toBe(
 			'Organisation name'
 		);
 	});

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

@@ -10,7 +10,7 @@ describe('DeliverySecurityInstructions', () => {
 			wrapper = shallow(<DeliverySecurityInstructions />);
 		});
 
-		test('contains textAreaProps id set to default: deliverySecurityInstructionsField ', () => {
+		test('contains textAreaProps id set to default: deliverySecurityInstructionsField', () => {
 			expect(wrapper.prop('id')).toBe('deliverySecurityInstructionsField');
 		});
 
@@ -55,11 +55,11 @@ describe('DeliverySecurityInstructions', () => {
 			});
 
 			it('does not set maxLength when no value is given', () => {
-				expect(textAreaProps.maxLength).toBeUndefined;
+				expect(textAreaProps.maxLength).toBeUndefined();
 			});
 
 			it('does not set rows when no value is given', () => {
-				expect(textAreaProps.rows).toBeUndefined;
+				expect(textAreaProps.rows).toBeUndefined();
 			});
 
 			it('sets data-trackable to field-deliverySecurityInstructions', () => {
@@ -75,11 +75,11 @@ describe('DeliverySecurityInstructions', () => {
 			});
 
 			it('sets disabled to false', () => {
-				expect(textAreaProps.disabled).toBeFalse;
+				expect(textAreaProps.disabled).toBe(false);
 			});
 
 			it('does not set value when no value is given', () => {
-				expect(textAreaProps.defaultValue).toBeUndefined;
+				expect(textAreaProps.defaultValue).toBe('');
 			});
 		});
 
@@ -117,7 +117,7 @@ describe('DeliverySecurityInstructions', () => {
 			});
 
 			it('sets disabled to true', () => {
-				expect(textAreaProps.disabled).toBeTrue;
+				expect(textAreaProps.disabled).toBe(true);
 			});
 
 			it('sets value', () => {

package/components/graduation-date.spec.js

@@ -86,13 +86,13 @@ describe('GraduationDate', () => {
 		const wrapper = shallow(<GraduationDate value="2020-08-28" />);
 
 		it('sets the default month', () => {
-			expect(wrapper.find('#graduationDateMonth').prop('defaultValue')).toEqual(
+			expect(wrapper.find('#graduationDateMonth').prop('defaultValue')).toBe(
 				'08'
 			);
 		});
 
 		it('sets the default year', () => {
-			expect(wrapper.find('#graduationDateYear').prop('defaultValue')).toEqual(
+			expect(wrapper.find('#graduationDateYear').prop('defaultValue')).toBe(
 				'2020'
 			);
 		});

package/components/index.js

@@ -49,7 +49,6 @@ export { Province } from './province';
 export { RegistrationConfirmation } from './registration-confirmation';
 export { Responsibility } from './responsibility';
 export { Section } from './section';
-export { SevenDayPassExperimentConfirmation } from './seven-day-pass-experiment-confirmation';
 export { State } from './state';
 export { Submit } from './submit';
 export { TrialBanner } from './trial-banner';

package/components/industry.spec.js

@@ -71,7 +71,7 @@ describe('Industry', () => {
 
 		const component = mount(Industry(props));
 
-		expect(component.find('.o-forms-title__main').text()).toEqual(
+		expect(component.find('.o-forms-title__main').text()).toBe(
 			'In which industry do you work?'
 		);
 	});
@@ -81,7 +81,7 @@ describe('Industry', () => {
 
 		const component = mount(Industry(props));
 
-		expect(component.find('.o-forms-title__main').text()).toEqual('Industry');
+		expect(component.find('.o-forms-title__main').text()).toBe('Industry');
 	});
 
 	it('renders with optional title class, when not required', () => {
@@ -89,7 +89,7 @@ describe('Industry', () => {
 		const component = mount(Industry(props));
 
 		expect(
-			component.find('.o-forms-title.o-forms-field--optional').length
-		).toEqual(1);
+			component.find('.o-forms-title.o-forms-field--optional')
+		).toHaveLength(1);
 	});
 });

package/components/job-title.spec.js

@@ -64,7 +64,7 @@ describe('JobTitle', () => {
 		const component = mount(JobTitle(props));
 
 		expect(
-			component.find('.o-forms-title.o-forms-field--optional').length
-		).toEqual(1);
+			component.find('.o-forms-title.o-forms-field--optional')
+		).toHaveLength(1);
 	});
 });

package/components/package-change.jsx

@@ -5,7 +5,6 @@ export function PackageChange({
 	changePackageUrl,
 	currentPackage,
 	packageDescription,
-	is7DayPassExperiment,
 }) {
 	return (
 		<div className="ncf__package-change">
@@ -21,17 +20,15 @@ export function PackageChange({
 						</p>
 					)}
 				</div>
-				{!is7DayPassExperiment && (
-					<div className="ncf__package-change__actions">
-						<a
-							href={changePackageUrl}
-							className="ncf__button ncf__button--mono ncf__button--baseline"
-							data-trackable="change"
-						>
-							Change
-						</a>
-					</div>
-				)}
+				<div className="ncf__package-change__actions">
+					<a
+						href={changePackageUrl}
+						className="ncf__button ncf__button--mono ncf__button--baseline"
+						data-trackable="change"
+					>
+						Change
+					</a>
+				</div>
 			</div>
 		</div>
 	);
@@ -41,5 +38,4 @@ PackageChange.propTypes = {
 	changePackageUrl: PropTypes.string.isRequired,
 	currentPackage: PropTypes.string.isRequired,
 	packageDescription: PropTypes.string,
-	is7DayPassExperiment: PropTypes.bool,
 };

package/components/package-change.spec.js

@@ -74,23 +74,6 @@ describe('PackageChange', () => {
 
 				expect(PackageChange).toRenderCorrectly(props);
 			});
-
-			it('render when is7DayPassExperiment is true', () => {
-				const props = {
-					changePackageUrl: 'https://www.ft.com',
-					currentPackage: 'Trial',
-					is7DayPassExperiment: true,
-					terms: [
-						{
-							name: term,
-							price: '£4.99',
-							weeklyPrice: '£4.99',
-						},
-					],
-				};
-
-				expect(PackageChange).toRenderCorrectly(props);
-			});
 		});
 	});
 });

package/components/package-change.stories.js

@@ -18,11 +18,3 @@ WithPackageDescription.args = {
 	changePackageUrl: 'https://ft.com/products',
 	packageDescription: 'Personalised email briefings and alerts',
 };
-
-export const SevenDayPassExperiment = (args) => <PackageChange {...args} />;
-SevenDayPassExperiment.args = {
-	currentPackage: 'Premium Digital',
-	changePackageUrl: 'https://ft.com/products',
-	packageDescription: 'Personalised email briefings and alerts',
-	is7DayPassExperiment: true,
-};

package/components/payment-term.jsx

@@ -15,7 +15,6 @@ export function PaymentTerm({
 	largePrice = false,
 	optionsInARow = false,
 	billingCountry = '',
-	is7DayPassExperiment = false,
 	isTermedSubscriptionTermType = false,
 	isTrialOfferAsNonTrialOverride = false,
 	labelOverride = '', // this is a temporary hack for the February 2024 campaign
@@ -121,22 +120,11 @@ export function PaymentTerm({
 		},
 		monthly: {
 			title: 'Monthly',
-			price: (price, is7DayPassExperiment) => {
-				const paymentIntervalTextToDisplay = (() => {
-					if (is7DayPassExperiment) {
-						return ' one-time payment';
-					}
-
-					return ' per month';
-				})();
-
-				return (
-					<React.Fragment>
-						<span className="ncf__payment-term__price">{price}</span>
-						{paymentIntervalTextToDisplay}
-					</React.Fragment>
-				);
-			},
+			price: (price) => (
+				<React.Fragment>
+					<span className="ncf__payment-term__price">{price}</span> per month
+				</React.Fragment>
+			),
 			trialPrice: (price) => (
 				<React.Fragment>
 					Unless you cancel during your trial you will be billed{' '}
@@ -146,17 +134,9 @@ export function PaymentTerm({
 			),
 			monthlyPrice: () => {},
 			renewsText: (isFixedTermOffer) => {
-				const textToDisplay = (() => {
-					if (is7DayPassExperiment) {
-						return 'This subscription is for 7 days, charged at the outset.';
-					}
-
-					if (isFixedTermOffer) {
-						return 'This subscription is for 3 months, charged monthly. You can cancel at anytime';
-					}
-
-					return 'Renews monthly unless cancelled';
-				})();
+				const textToDisplay = isFixedTermOffer
+					? 'This subscription is for 3 months, charged monthly. You can cancel at anytime'
+					: 'Renews monthly unless cancelled';
 
 				return (
 					<p className="ncf__payment-term__renews-text">{textToDisplay}</p>
@@ -253,12 +233,9 @@ export function PaymentTerm({
 				<React.Fragment>
 					{nameMap[option.name] ? (
 						<div className="ncf__payment-term__description">
-							{nameMap[option.name].price(option.price, is7DayPassExperiment)}
+							{nameMap[option.name].price(option.price)}
 							{nameMap[option.name].monthlyPrice(option.monthlyPrice)}
-							{nameMap[option.name].renewsText(
-								isFixedTermOffer,
-								is7DayPassExperiment
-							)}
+							{nameMap[option.name].renewsText(isFixedTermOffer)}
 							{/* Remove this discount text temporarily in favour of monthly price */}
 							{/* <br />Save up to 25% when you pay annually */}
 						</div>
@@ -310,20 +287,11 @@ export function PaymentTerm({
 				return labelOverride;
 			}
 
-			const defaultTitle = (() => {
-				if (is7DayPassExperiment) {
-					return '';
-				}
-
-				if (Boolean(option.name && nameMap[option.name])) {
-					return nameMap[option.name].title;
-				}
-
-				return '';
-			})();
+			const defaultTitle =
+				option.name && nameMap[option.name] ? nameMap[option.name].title : '';
 
 			const title = isFixedTermOffer
-				? [offerDisplayName, defaultTitle].filter(Boolean).join(' - ')
+				? `${offerDisplayName} - ${defaultTitle}`
 				: defaultTitle;
 
 			let termDisplayName = '';

package/components/payment-term.spec.js

@@ -153,37 +153,6 @@ describe('PaymentTerm', () => {
 		});
 	});
 
-	describe('given is7DayPassExperiment is true', () => {
-		const options = [
-			{
-				name: 'monthly',
-				price: '$5.00',
-				value: 'monthly',
-				monthlyPrice: '$5.00',
-			},
-		];
-		const wrapper = shallow(
-			<PaymentTerm
-				isFixedTermOffer={true}
-				options={options}
-				offerDisplayName="7-day pass"
-				is7DayPassExperiment={true}
-			/>
-		);
-
-		it('renders renewal text that actually reflects how the 7-day pass is a fixed term subscription with a one-off payment made at the outset', () => {
-			expect(wrapper.find('.ncf__payment-term__renews-text').text()).toMatch(
-				/This subscription is for 7 days, charged at the outset./
-			);
-		});
-
-		it('renders offer name and omits payment term title', () => {
-			expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
-				'7-day pass'
-			);
-		});
-	});
-
 	describe('given isTermedSubscriptionTermType is true', () => {
 		describe('options include duration expressed in weeks', () => {
 			const options = [
@@ -299,22 +268,6 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
-		describe('7-day pass experiment', () => {
-			const options = [
-				{
-					...baseOptions,
-					isTrial: false,
-				},
-			];
-			it('renders with time period only if trial.option == false', () => {
-				const wrapper = shallow(
-					<PaymentTerm options={options} is7DayPassExperiment={true} />
-				);
-				expect(wrapper.find('.ncf__payment-term__label').text().trim()).toMatch(
-					'£20.00 one-time paymentThis subscription is for 7 days, charged at the outset.'
-				);
-			});
-		});
 	});
 
 	describe('[data-base-amount]', () => {
@@ -331,7 +284,7 @@ describe('PaymentTerm', () => {
 				},
 			];
 			const wrapper = shallow(<PaymentTerm options={options} />);
-			expect(wrapper.find('input').prop('data-base-amount')).toEqual(100);
+			expect(wrapper.find('input').prop('data-base-amount')).toBe(100);
 		});
 
 		it('renders option.trialAmount as data-base-amount if isTrial is true', () => {
@@ -347,7 +300,7 @@ describe('PaymentTerm', () => {
 				},
 			];
 			const wrapper = shallow(<PaymentTerm options={options} />);
-			expect(wrapper.find('input').prop('data-base-amount')).toEqual(1);
+			expect(wrapper.find('input').prop('data-base-amount')).toBe(1);
 		});
 	});
 

package/components/payment-term.stories.js

@@ -109,26 +109,6 @@ FixedTermOffer.args = {
 	offerDisplayName: 'Mix & Match',
 };
 
-export const SevenDayPassExperimentOffer = (args) => (
-	<div className="ncf">
-		<Fieldset>
-			<PaymentTerm {...args} />
-		</Fieldset>
-	</div>
-);
-SevenDayPassExperimentOffer.args = {
-	options: [
-		{
-			name: 'monthly',
-			price: '$5.00',
-			value: 5.0,
-		},
-	],
-	isFixedTermOffer: true,
-	is7DayPassExperiment: true,
-	offerDisplayName: '7-day pass',
-};
-
 export const TermedSubscriptionTermType = (args) => (
 	<div className="ncf">
 		<Fieldset>

package/components/personal-title.spec.js

@@ -71,7 +71,7 @@ describe('PersonalTitle', () => {
 
 		const component = mount(PersonalTitle(props));
 
-		expect(component.find('.o-forms-title__main').text()).toEqual('Title');
+		expect(component.find('.o-forms-title__main').text()).toBe('Title');
 	});
 
 	it('renders with custom label wording', () => {
@@ -79,9 +79,7 @@ describe('PersonalTitle', () => {
 
 		const component = mount(PersonalTitle(props));
 
-		expect(component.find('.o-forms-title__main').text()).toEqual(
-			'PersonalTitle'
-		);
+		expect(component.find('.o-forms-title__main').text()).toBe('PersonalTitle');
 	});
 
 	it('renders with optional title class, when not required', () => {
@@ -89,7 +87,7 @@ describe('PersonalTitle', () => {
 		const component = mount(PersonalTitle(props));
 
 		expect(
-			component.find('.o-forms-title.o-forms-field--optional').length
-		).toEqual(1);
+			component.find('.o-forms-title.o-forms-field--optional')
+		).toHaveLength(1);
 	});
 });

package/components/phone.spec.js

@@ -55,7 +55,7 @@ describe('Phone', () => {
 		const component = mount(Phone(props));
 
 		expect(
-			component.find('.o-forms-title.o-forms-field--optional').length
-		).toEqual(1);
+			component.find('.o-forms-title.o-forms-field--optional')
+		).toHaveLength(1);
 	});
 });

package/components/position.spec.js

@@ -65,7 +65,7 @@ describe('Position', () => {
 		const component = mount(Position(props));
 
 		expect(
-			component.find('.o-forms-title.o-forms-field--optional').length
-		).toEqual(1);
+			component.find('.o-forms-title.o-forms-field--optional')
+		).toHaveLength(1);
 	});
 });

package/components/responsibility.spec.js

@@ -71,7 +71,7 @@ describe('Responsibility', () => {
 		const component = mount(Responsibility(props));
 
 		expect(
-			component.find('.o-forms-title.o-forms-field--optional').length
-		).toEqual(1);
+			component.find('.o-forms-title.o-forms-field--optional')
+		).toHaveLength(1);
 	});
 });

package/components/text-input.spec.js

@@ -31,7 +31,7 @@ describe('Text Input', () => {
 		const errorMsg = component.find('.o-forms-input__error');
 
 		expect(element.exists()).toBe(true);
-		expect(errorMsg.text()).toEqual('Invalid value');
+		expect(errorMsg.text()).toBe('Invalid value');
 	});
 
 	it('renders a field with custom input id', () => {
@@ -59,7 +59,7 @@ describe('Text Input', () => {
 		const component = mount(TextInput(props));
 		const element = component.find('input');
 
-		expect(element.prop('defaultValue')).toEqual('foobar');
+		expect(element.prop('defaultValue')).toBe('foobar');
 	});
 
 	it('renders with disabled input', () => {
@@ -77,7 +77,7 @@ describe('Text Input', () => {
 		const component = mount(TextInput(props));
 		const label = component.find('.o-forms-title__main');
 
-		expect(label.text()).toEqual('');
+		expect(label.text()).toBe('');
 	});
 
 	it('renders with custom label wording', () => {
@@ -86,7 +86,7 @@ describe('Text Input', () => {
 		const component = mount(TextInput(props));
 		const label = component.find('.o-forms-title__main');
 
-		expect(label.text()).toEqual('Code');
+		expect(label.text()).toBe('Code');
 	});
 
 	it('renders with custom description wording', () => {
@@ -95,7 +95,7 @@ describe('Text Input', () => {
 		const component = mount(TextInput(props));
 		const description = component.find('.o-forms-title__prompt');
 
-		expect(description.text()).toEqual('Description text');
+		expect(description.text()).toBe('Description text');
 	});
 
 	it('renders as required field', () => {