@financial-times/n-conversion-forms 32.10.0 → 32.12.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": "b79816d6c6908ec0ab098d2724e89a89f204cba1",
-  "tag": "v32.10.0"
+  "version": "c7bf91fc151991e214cb6ee5d430825c6f9adefa",
+  "tag": "v32.12.0"
 }

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/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/payment-term.jsx

@@ -17,6 +17,8 @@ export function PaymentTerm({
 	billingCountry = '',
 	is7DayPassExperiment = false,
 	isTermedSubscriptionTermType = false,
+	isTrialOfferAsNonTrialOverride = false,
+	labelOverride = '', // this is a temporary hack for the February 2024 campaign
 }) {
 	/**
 	 * Compute monthly price for given term name
@@ -25,7 +27,7 @@ export function PaymentTerm({
 	 * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
 	 * @returns {string}
 	 */
-	const getMontlyPriceFromPeriod = (amount, currency, period) => {
+	const getMonthlyPriceFromPeriod = (amount, currency, period) => {
 		const periodObj = new Period(period);
 		const monthlyPrice = periodObj.calculatePrice('P1M', amount);
 		return new Monthly({ value: monthlyPrice, currency }).getAmount('monthly');
@@ -268,7 +270,7 @@ export function PaymentTerm({
 							{nameMap['custom'].monthlyPrice(
 								option.monthlyPrice && option.monthlyPrice !== '0'
 									? Number(option.monthlyPrice)
-									: getMontlyPriceFromPeriod(
+									: getMonthlyPriceFromPeriod(
 											option.amount,
 											option.currency,
 											option.value
@@ -298,6 +300,16 @@ export function PaymentTerm({
 			const showTrialCopyInTitle =
 				option.isTrial && !isPrintOrBundle && !isEpaper;
 
+			// https://financialtimes.atlassian.net/browse/ACQ-2592
+			// We need to have one specific trial offer to have terms displayed as non-trial.
+			// The offer is a trial offer and should use trial mechanics but should show as non-trial.
+			// There is nothing in the offer payload to identify when this should happen, we need to rely on the offer id.
+			// This is a TEMPORARY hack and will be removed once the campaign is over.
+			// A ticket as been raised already to deal with the clean up: https://financialtimes.atlassian.net/browse/ACQ-2593.
+			if (isTrialOfferAsNonTrialOverride && labelOverride) {
+				return labelOverride;
+			}
+
 			const defaultTitle = (() => {
 				if (is7DayPassExperiment) {
 					return '';
@@ -461,4 +473,5 @@ PaymentTerm.propTypes = {
 	largePrice: PropTypes.bool,
 	optionsInARow: PropTypes.bool,
 	billingCountry: PropTypes.string,
+	isTrialOfferAsNonTrialOverride: PropTypes.bool,
 };

package/components/payment-term.spec.js

@@ -261,7 +261,7 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
-		describe('getDisplayName', () => {
+		describe('getDisplayName trial', () => {
 			const trialOptions = {
 				...baseOptions,
 				isTrial: true,
@@ -273,6 +273,19 @@ describe('PaymentTerm', () => {
 					/^Trial: Premium Digital - Monthly .*$/
 				);
 			});
+			it('handles trial to non-trial payment term display name', () => {
+				const options = [trialOptions];
+				const wrapper = shallow(
+					<PaymentTerm
+						options={options}
+						labelOverride={'some term label'}
+						isTrialOfferAsNonTrialOverride={true}
+					/>
+				);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^some term label.*$/
+				);
+			});
 			it('renders using displayName if available', () => {
 				const options = [
 					{
@@ -318,7 +331,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', () => {
@@ -334,7 +347,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

@@ -183,3 +183,38 @@ RenewOffers.args = {
 	],
 	optionsInARow: true,
 };
+
+// https://financialtimes.atlassian.net/browse/ACQ-2592
+// We need to have one specific trial offer to have terms displayed as non-trial.
+// The offer is a trial offer and should use trial mechanics but should show as non-trial.
+// There is nothing in the offer payload to identify when this should happen, we need to rely on the offer id.
+// This is a TEMPORARY hack and will be removed once the campaign is over.
+// A ticket as been raised already to deal with the clean up: https://financialtimes.atlassian.net/browse/ACQ-2593.
+export const PaymentTermLabelOverride = (args) => (
+	<div className="ncf">
+		<Fieldset>
+			<PaymentTerm {...args} />
+		</Fieldset>
+	</div>
+);
+
+PaymentTermLabelOverride.args = {
+	isTrialOfferAsNonTrialOverride: true,
+	labelOverride: 'some fancy payment term',
+	options: [
+		{
+			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',
+		},
+	],
+};

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', () => {

package/dist/payment-term.jsx

@@ -37,7 +37,11 @@ function PaymentTerm(_ref) {
     _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
     is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
-    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
+    _ref$isTrialOfferAsNo = _ref.isTrialOfferAsNonTrialOverride,
+    isTrialOfferAsNonTrialOverride = _ref$isTrialOfferAsNo === void 0 ? false : _ref$isTrialOfferAsNo,
+    _ref$labelOverride = _ref.labelOverride,
+    labelOverride = _ref$labelOverride === void 0 ? '' : _ref$labelOverride;
   /**
    * Compute monthly price for given term name
    * @param {number} amount price in number format
@@ -45,7 +49,7 @@ function PaymentTerm(_ref) {
    * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
    * @returns {string}
    */
-  var getMontlyPriceFromPeriod = function getMontlyPriceFromPeriod(amount, currency, period) {
+  var getMonthlyPriceFromPeriod = function getMonthlyPriceFromPeriod(amount, currency, period) {
     var periodObj = new _nPricing.Period(period);
     var monthlyPrice = periodObj.calculatePrice('P1M', amount);
     return new _nPricing.Monthly({
@@ -222,7 +226,7 @@ function PaymentTerm(_ref) {
       // for those containing period on option.value, render custom template, for the rest keep legacy render
       isValidPeriod(option.value) ? /*#__PURE__*/_react["default"].createElement("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))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, nameMap['custom'].price(option.price), nameMap['custom'].monthlyPrice(option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         className: largePrice ? 'ncf__payment-term__large-price' : ''
       }, option.price), option.chargeOnText && /*#__PURE__*/_react["default"].createElement("p", {
         className: "ncf__payment-term__charge-on-text"
@@ -230,6 +234,16 @@ function PaymentTerm(_ref) {
     };
     var getTermDisplayName = function getTermDisplayName() {
       var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isEpaper;
+
+      // https://financialtimes.atlassian.net/browse/ACQ-2592
+      // We need to have one specific trial offer to have terms displayed as non-trial.
+      // The offer is a trial offer and should use trial mechanics but should show as non-trial.
+      // There is nothing in the offer payload to identify when this should happen, we need to rely on the offer id.
+      // This is a TEMPORARY hack and will be removed once the campaign is over.
+      // A ticket as been raised already to deal with the clean up: https://financialtimes.atlassian.net/browse/ACQ-2593.
+      if (isTrialOfferAsNonTrialOverride && labelOverride) {
+        return labelOverride;
+      }
       var defaultTitle = function () {
         if (is7DayPassExperiment) {
           return '';
@@ -330,5 +344,6 @@ PaymentTerm.propTypes = {
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,
   optionsInARow: _propTypes["default"].bool,
-  billingCountry: _propTypes["default"].string
+  billingCountry: _propTypes["default"].string,
+  isTrialOfferAsNonTrialOverride: _propTypes["default"].bool
 };

package/helpers/ncf-countries.spec.js

@@ -48,7 +48,7 @@ describe('ncf-countries', () => {
 
 			expect(
 				context.countries.find((country) => country.selected)
-			).not.toBeDefined();
+			).toBeUndefined();
 		});
 
 		it('does not mark any countries selected if incorrect value passed', () => {
@@ -57,7 +57,7 @@ describe('ncf-countries', () => {
 
 			expect(
 				context.countries.find((country) => country.selected)
-			).not.toBeDefined();
+			).toBeUndefined();
 		});
 
 		it('marks a country as selected if value matches code', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "32.10.0",
+  "version": "32.12.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {
@@ -25,61 +25,59 @@
   },
   "homepage": "https://github.com/Financial-Times/n-conversion-forms#readme",
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "@financial-times/n-pricing": "6.0.0",
-    "classnames": "2.3.2",
+    "@babel/runtime": "^7.23.9",
+    "@financial-times/n-pricing": "7.1.0",
+    "classnames": "2.5.1",
     "fetchres": "1.7.2",
     "lodash.get": "4.4.2",
     "n-common-static-data": "github:Financial-Times/n-common-static-data#v2.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.15",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@dotcom-tool-kit/babel": "^3.1.3",
-    "@dotcom-tool-kit/component": "^4.0.4",
-    "@dotcom-tool-kit/eslint": "^3.1.3",
-    "@dotcom-tool-kit/frontend-app": "^3.1.9",
-    "@dotcom-tool-kit/jest": "^3.2.0",
-    "@dotcom-tool-kit/lint-staged-npm": "^3.1.6",
-    "@dotcom-tool-kit/logger": "^3.1.1",
-    "@dotcom-tool-kit/prettier": "^3.1.6",
-    "@financial-times/eslint-config-next": "^6.0.0",
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@dotcom-tool-kit/babel": "3.1.6",
+    "@dotcom-tool-kit/component": "4.1.2",
+    "@dotcom-tool-kit/eslint": "3.2.0",
+    "@dotcom-tool-kit/frontend-app": "3.2.3",
+    "@dotcom-tool-kit/jest": "3.4.0",
+    "@dotcom-tool-kit/lint-staged-npm": "3.2.0",
+    "@dotcom-tool-kit/logger": "3.4.0",
+    "@dotcom-tool-kit/prettier": "3.2.0",
+    "@financial-times/eslint-config-next": "7.1.0",
     "@financial-times/jest-browser-resolver": "^1.0.2",
-    "@snyk/protect": "1.1193.0",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
+    "@snyk/protect": "1.1278.0",
+    "@storybook/addon-a11y": "^7.6.13",
+    "@storybook/addon-essentials": "7.6.13",
+    "@storybook/react": "^7.6.13",
+    "@storybook/react-webpack5": "^7.6.13",
     "@sucrase/jest-plugin": "^3.0.0",
-    "check-engines": "^1.5.0",
-    "dotcom-tool-kit": "^3.2.1",
+    "check-engines": "^1.6.0",
+    "dotcom-tool-kit": "3.4.4",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
-    "eslint": "^8.28.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^27.6.1",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "fetch-mock": "^7.2.0",
-    "html-webpack-plugin": "^5.5.3",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-serializer-html": "^7.1.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^24.0.0",
     "jsdom-global": "^3.0.2",
-    "lint-staged": "^13.0.4",
-    "pa11y-ci": "2.4.2",
-    "prop-types": "15.7.2",
+    "pa11y-ci": "3.1.0",
+    "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-is": "^16.13.1",
     "sass": "^1.55.0",
     "sass-loader": "^10.2.1",
-    "storybook": "^7.4.0",
-    "webpack": "^5.88.2",
+    "storybook": "^7.6.13",
+    "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4"
   },
   "engines": {

package/test-jest/helpers/expect-to-render-correctly.js

@@ -7,6 +7,7 @@ export const expectToRenderCorrectly = {
 			reactComponent(props)
 		);
 
+		// eslint-disable-next-line jest/no-standalone-expect
 		expect(ReactComponentRendered).toMatchSnapshot();
 
 		// This point is reached when the above assertions were successful.

package/utils/apple-pay.spec.js

@@ -138,7 +138,7 @@ describe('Apple Pay', () => {
 
 			it('returns merchant id from methods data', () => {
 				const methods = [{ data: { merchantIdentifier: 'test' } }];
-				expect(ApplePay.getMerchantId(methods)).toEqual('test');
+				expect(ApplePay.getMerchantId(methods)).toBe('test');
 			});
 		});
 

package/utils/billing-postcode.spec.js

@@ -81,7 +81,7 @@ describe('BillingPostcode', () => {
 					placeholder: 'Enter your postcode',
 				});
 				billingPostcode.changePostcodeReferenceForCountry = 'GBR';
-				expect(querySelectorStub).toBeCalledWith('input');
+				expect(querySelectorStub).toHaveBeenCalledWith('input');
 			});
 
 			it('sets postcode placeholder to `Enter your postcode` by default', () => {
@@ -89,7 +89,7 @@ describe('BillingPostcode', () => {
 					placeholder: 'Enter your zip code',
 				});
 				billingPostcode.changePostcodeReferenceForCountry = 'GBR';
-				expect(billingPostcode.postcodeInput.placeholder).toEqual(
+				expect(billingPostcode.postcodeInput.placeholder).toBe(
 					'Enter your postcode'
 				);
 			});
@@ -99,7 +99,7 @@ describe('BillingPostcode', () => {
 					placeholder: 'Enter your postcode',
 				});
 				billingPostcode.changePostcodeReferenceForCountry = 'USA';
-				expect(billingPostcode.postcodeInput.placeholder).toEqual(
+				expect(billingPostcode.postcodeInput.placeholder).toBe(
 					'Enter your zip code'
 				);
 			});
@@ -109,7 +109,7 @@ describe('BillingPostcode', () => {
 					placeholder: 'Enter your zip code',
 				});
 				billingPostcode.changePostcodeReferenceForCountry = 'CAN';
-				expect(billingPostcode.postcodeInput.placeholder).toEqual(
+				expect(billingPostcode.postcodeInput.placeholder).toBe(
 					'Enter your postal code'
 				);
 			});
@@ -117,20 +117,20 @@ describe('BillingPostcode', () => {
 	});
 
 	describe('getPostcodeReferenceByCountry', () => {
-		it('returns post code by default ', () => {
-			expect(BillingPostcode.getPostcodeReferenceByCountry('ZAR')).toEqual(
+		it('returns post code by default', () => {
+			expect(BillingPostcode.getPostcodeReferenceByCountry('ZAR')).toBe(
 				'postcode'
 			);
 		});
 
 		it('returns postal code when country is Canada', () => {
-			expect(BillingPostcode.getPostcodeReferenceByCountry('CAN')).toEqual(
+			expect(BillingPostcode.getPostcodeReferenceByCountry('CAN')).toBe(
 				'postal code'
 			);
 		});
 
 		it('returns zip code when country is USA', () => {
-			expect(BillingPostcode.getPostcodeReferenceByCountry('USA')).toEqual(
+			expect(BillingPostcode.getPostcodeReferenceByCountry('USA')).toBe(
 				'zip code'
 			);
 		});

package/utils/company-name.spec.js

@@ -31,7 +31,7 @@ describe('Company Name - Util', () => {
 			expect(document.querySelector('#companyNameField')).toBeDefined();
 			expect(
 				document.querySelector('.o-forms-field--optional #companyNameField')
-			).toBe(null);
+			).toBeNull();
 		});
 	});
 });

package/utils/delivery-address-type.spec.js

@@ -39,7 +39,7 @@ describe('Delivery Address Type - Util', () => {
 			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(
 				document
 			);
-			expect(deliveryAdressTypeUtilInstance.getSelected()).toEqual('home');
+			expect(deliveryAdressTypeUtilInstance.getSelected()).toBe('home');
 		});
 
 		it('returns the option selected different than the default', () => {

package/utils/delivery-option.spec.js

@@ -48,12 +48,12 @@ describe('Delivery Option - Util', () => {
 			deliveryoptionUtilInstance.showItem('PV');
 			expect(document.querySelector('.ncf__hidden #HD')).toBeDefined();
 			expect(document.querySelector('#PV')).toBeDefined();
-			expect(document.querySelector('.ncf__hidden #PV')).toBe(null);
+			expect(document.querySelector('.ncf__hidden #PV')).toBeNull();
 			deliveryoptionUtilInstance.showItem('HD');
 			deliveryoptionUtilInstance.hideItem('PV');
 			expect(document.querySelector('.ncf__hidden #PV')).toBeDefined();
 			expect(document.querySelector('#HD')).toBeDefined();
-			expect(document.querySelector('.ncf__hidden #HD')).toBe(null);
+			expect(document.querySelector('.ncf__hidden #HD')).toBeNull();
 		});
 	});
 

package/utils/delivery-postcode.spec.js

@@ -89,7 +89,7 @@ describe('DeliveryPostcode', () => {
 					placeholder: 'Enter your zip code',
 				});
 				deliveryPostcode.changePostcodeReferenceForCountry = 'GBR';
-				expect(deliveryPostcode.postcodeInput.placeholder).toEqual(
+				expect(deliveryPostcode.postcodeInput.placeholder).toBe(
 					'Enter your postcode'
 				);
 			});
@@ -99,7 +99,7 @@ describe('DeliveryPostcode', () => {
 					placeholder: 'Enter your postcode',
 				});
 				deliveryPostcode.changePostcodeReferenceForCountry = 'USA';
-				expect(deliveryPostcode.postcodeInput.placeholder).toEqual(
+				expect(deliveryPostcode.postcodeInput.placeholder).toBe(
 					'Enter your zip code'
 				);
 			});
@@ -109,7 +109,7 @@ describe('DeliveryPostcode', () => {
 					placeholder: 'Enter your zip code',
 				});
 				deliveryPostcode.changePostcodeReferenceForCountry = 'CAN';
-				expect(deliveryPostcode.postcodeInput.placeholder).toEqual(
+				expect(deliveryPostcode.postcodeInput.placeholder).toBe(
 					'Enter your postal code'
 				);
 			});
@@ -117,20 +117,20 @@ describe('DeliveryPostcode', () => {
 	});
 
 	describe('getPostcodeReferenceByCountry', () => {
-		it('returns post code by default ', () => {
-			expect(DeliveryPostcode.getPostcodeReferenceByCountry('ZAR')).toEqual(
+		it('returns post code by default', () => {
+			expect(DeliveryPostcode.getPostcodeReferenceByCountry('ZAR')).toBe(
 				'postcode'
 			);
 		});
 
 		it('returns postal code when country is Canada', () => {
-			expect(DeliveryPostcode.getPostcodeReferenceByCountry('CAN')).toEqual(
+			expect(DeliveryPostcode.getPostcodeReferenceByCountry('CAN')).toBe(
 				'postal code'
 			);
 		});
 
 		it('returns zip code when country is USA', () => {
-			expect(DeliveryPostcode.getPostcodeReferenceByCountry('USA')).toEqual(
+			expect(DeliveryPostcode.getPostcodeReferenceByCountry('USA')).toBe(
 				'zip code'
 			);
 		});

package/utils/delivery-start-date.spec.js

@@ -121,10 +121,8 @@ describe('DeliveryStartDate', () => {
 
 		it('updates the page according to the response from the API call', async () => {
 			await setup();
-			expect(startDateFieldStub.value).toEqual('2019-04-13');
-			expect(startDateTextStub.innerHTML).toEqual(
-				'Saturday 13th of April 2019'
-			);
+			expect(startDateFieldStub.value).toBe('2019-04-13');
+			expect(startDateTextStub.innerHTML).toBe('Saturday 13th of April 2019');
 		});
 
 		it('clears errors and return true if the fetch call succeeds', async () => {

package/utils/form-element.spec.js

@@ -65,7 +65,7 @@ describe('FormElement', () => {
 
 	describe('value', () => {
 		it('returns the value', () => {
-			expect(formElement.value()).toEqual('test');
+			expect(formElement.value()).toBe('test');
 		});
 	});
 });

package/utils/loader.spec.js

@@ -54,7 +54,7 @@ describe('Loader', () => {
 			it('cleares the content of the partial', () => {
 				loader.setContent('<div>Baz</div>');
 				loader.clearContent();
-				expect(elementStub.innerHTML).toEqual('');
+				expect(elementStub.innerHTML).toBe('');
 			});
 		});
 
@@ -69,11 +69,11 @@ describe('Loader', () => {
 			});
 			it('sets the title of the partial', () => {
 				loader.setContent({ title: 'Hooray!' });
-				expect(elementStub.innerHTML).toEqual('Hooray!');
+				expect(elementStub.innerHTML).toBe('Hooray!');
 			});
 			it('sets the content of the partial', () => {
 				loader.setContent({ content: '<div>Baz</div>' });
-				expect(elementStub.innerHTML).toEqual('<div>Baz</div>');
+				expect(elementStub.innerHTML).toBe('<div>Baz</div>');
 			});
 		});
 

package/utils/password.spec.js

@@ -53,13 +53,13 @@ describe('Password', () => {
 		it('sets the input type to text', () => {
 			passwordElement.type = 'password';
 			password.toggleMask(false);
-			expect(passwordElement.type).toEqual('text');
+			expect(passwordElement.type).toBe('text');
 		});
 
 		it('sets the input type to password', () => {
 			passwordElement.type = 'text';
 			password.toggleMask(true);
-			expect(passwordElement.type).toEqual('password');
+			expect(passwordElement.type).toBe('password');
 		});
 	});
 });

package/utils/payment-term.spec.js

@@ -111,7 +111,7 @@ describe('PaymentTerm', () => {
 						price: '£1.01',
 					},
 				});
-				expect(priceStub.innerHTML).toEqual('£1.01');
+				expect(priceStub.innerHTML).toBe('£1.01');
 			});
 
 			it('replaces the trial price with the correct updated trial price', () => {
@@ -127,7 +127,7 @@ describe('PaymentTerm', () => {
 						trialPrice: '£1.01',
 					},
 				});
-				expect(trialPriceStub.innerHTML).toEqual('£1.01');
+				expect(trialPriceStub.innerHTML).toBe('£1.01');
 			});
 
 			it('replaces the monthly price with the correct updated monthly price', () => {
@@ -143,7 +143,7 @@ describe('PaymentTerm', () => {
 						monthlyPrice: '£1.01',
 					},
 				});
-				expect(monthlyPriceStub.innerHTML).toEqual('£1.01');
+				expect(monthlyPriceStub.innerHTML).toBe('£1.01');
 			});
 
 			describe('updating base amount', () => {

package/utils/payment-type.spec.js

@@ -98,7 +98,7 @@ describe('PaymentType', () => {
 		describe('removeError', () => {
 			it('removes a class to the paymentType element', () => {
 				paymentType.removeError();
-				expect(elementStub.classList.remove).toHaveBeenCalled;
+				expect(elementStub.classList.remove).toHaveBeenCalled();
 			});
 		});
 

package/utils/postcode.spec.js

@@ -29,17 +29,15 @@ describe('postcode', () => {
 
 	describe('getPostcodeReferenceByCountry', () => {
 		it('returns postcode by default', () => {
-			expect(Postcode.getPostcodeReferenceByCountry('GBR')).toEqual('postcode');
+			expect(Postcode.getPostcodeReferenceByCountry('GBR')).toBe('postcode');
 		});
 
 		it('returns zip code when country code is USA', () => {
-			expect(Postcode.getPostcodeReferenceByCountry('USA')).toEqual('zip code');
+			expect(Postcode.getPostcodeReferenceByCountry('USA')).toBe('zip code');
 		});
 
 		it('returns postal when country code is CAN', () => {
-			expect(Postcode.getPostcodeReferenceByCountry('CAN')).toEqual(
-				'postal code'
-			);
+			expect(Postcode.getPostcodeReferenceByCountry('CAN')).toBe('postal code');
 		});
 	});
 
@@ -55,7 +53,7 @@ describe('postcode', () => {
 		describe('postcode reference name', () => {
 			it('calls querySelector with [data-reference]', () => {
 				postcode.changePostcodeReferenceForCountry = 'GBR';
-				expect(querySelectorAllStub).toBeCalledWith(
+				expect(querySelectorAllStub).toHaveBeenCalledWith(
 					'[data-reference=postcode]'
 				);
 			});
@@ -102,9 +100,7 @@ describe('postcode', () => {
 					placeholder: 'Enter your zip code',
 				});
 				postcode.changePostcodeReferenceForCountry = 'GBR';
-				expect(postcode.postcodeInput.placeholder).toEqual(
-					'Enter your postcode'
-				);
+				expect(postcode.postcodeInput.placeholder).toBe('Enter your postcode');
 			});
 
 			it('sets postcode placeholder to `Enter your zip code` when country code is USA', () => {
@@ -112,9 +108,7 @@ describe('postcode', () => {
 					placeholder: 'Enter your postcode',
 				});
 				postcode.changePostcodeReferenceForCountry = 'USA';
-				expect(postcode.postcodeInput.placeholder).toEqual(
-					'Enter your zip code'
-				);
+				expect(postcode.postcodeInput.placeholder).toBe('Enter your zip code');
 			});
 
 			it('sets postcode placeholder to `Enter your postal code` when country code is Canada', () => {
@@ -122,7 +116,7 @@ describe('postcode', () => {
 					placeholder: 'Enter your zip code',
 				});
 				postcode.changePostcodeReferenceForCountry = 'CAN';
-				expect(postcode.postcodeInput.placeholder).toEqual(
+				expect(postcode.postcodeInput.placeholder).toBe(
 					'Enter your postal code'
 				);
 			});

package/utils/salesforce.spec.js

@@ -12,7 +12,7 @@ describe('salesforce', () => {
 		});
 
 		it('returns the salesforce name for a country', () => {
-			expect(isoCodeToSalesforceName('GBR')).toEqual('United Kingdom');
+			expect(isoCodeToSalesforceName('GBR')).toBe('United Kingdom');
 		});
 	});
 
@@ -24,7 +24,7 @@ describe('salesforce', () => {
 		});
 
 		it('returns the ISO country code for Salesforce country', () => {
-			expect(salesforceNameToIsoCode('United Kingdom')).toEqual('GBR');
+			expect(salesforceNameToIsoCode('United Kingdom')).toBe('GBR');
 		});
 	});
 });

package/utils/submit.spec.js

@@ -51,7 +51,7 @@ describe('Submit', () => {
 
 			it('updates the innerHTML of the button', () => {
 				submit.updateText(newString);
-				expect(elementStub.innerHTML).toEqual('test');
+				expect(elementStub.innerHTML).toBe('test');
 			});
 		});
 

package/utils/validation.spec.js

@@ -74,13 +74,13 @@ describe('Validation - Util', () => {
 			});
 			validationTest.init();
 
-			expect(global.window.onbeforeunload).not.toBeDefined();
+			expect(global.window.onbeforeunload).toBeUndefined();
 		});
 	});
 
 	describe('onbeforeunload', () => {
 		it('returns null by default', () => {
-			expect(global.window.onbeforeunload()).toBe(null);
+			expect(global.window.onbeforeunload()).toBeNull();
 		});
 
 		it('returns true if the form has changed', () => {

package/utils/zuora.spec.js

@@ -110,6 +110,7 @@ describe('Zuora', () => {
 			expect(error instanceof Zuora.ZuoraErrorInvalidPaymentType).toBe(true);
 		});
 
+		// eslint-disable-next-line jest/valid-title
 		describe(PaymentType.CREDITCARD, () => {
 			it('calls validate', async () => {
 				window.Z.validate.mockImplementation((callback) =>
@@ -144,6 +145,7 @@ describe('Zuora', () => {
 			});
 		});
 
+		// eslint-disable-next-line jest/valid-title
 		describe(PaymentType.DIRECTDEBIT, () => {
 			it('calls validate', async () => {
 				zuora.onDirectDebitConfirmation = jest.fn((callback) => callback(true));