@financial-times/n-conversion-forms 39.3.0 → 40.0.0

package/components/debug.jsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { allSupportedPostcodeExamples } from '../helpers/supportedPostcodeExamples';
+import { getCountries } from '../utils/countries';
 
-export function Debug({ isTest = false, showHelpers = false, links = {} }) {
+export function Debug({
+	isTest = false,
+	showHelpers = false,
+	links = {},
+	countries = [],
+}) {
 	// Strings are used rather than JSX as this component is injected into HTML
 	// along with onclick handlers, styles and javascript. JSX will escape and
 	// modify the HTML which we do not want. Once our applications are on JSX
@@ -26,11 +33,43 @@ export function Debug({ isTest = false, showHelpers = false, links = {} }) {
 		(link) =>
 			`<a key=${link} class="ncf__button ncf__button--inverse ncf__link" href="${links[link]}">${link}</a>`
 	);
+
+	// Builds a Country dropdown component to allow the user to select a country and reload the page with the selected country
+	// This is useful for testing the form with different countries without having to change the URL manually
+	// The dropdown is built using the getCountries function which groups countries into frequently used and alphabetical
+	const filteredCountries = getCountries({ filter: countries });
+
+	const createOption = (country) =>
+		`<option key="${country.code}" value="${country.code}">${country.name}</option>`;
+
+	const createOptGroup = (countryGroup) =>
+		`<optgroup key="${countryGroup.label}" label="${countryGroup.label}">
+			${countryGroup.countries.reduce(
+				(options, country) => `${options} ${createOption(country)}`
+			)}
+		</optgroup>`;
+
+	const optionsToRender = filteredCountries.reduce(
+		(options, country) =>
+			`${options} ${
+				country.label ? createOptGroup(country) : createOption(country)
+			}`,
+		''
+	);
+	const countriesDropDown = `
+		<select class="ncf__button ncf__button--debug ncf__button--inverse ncf__button--max-with" id="ncf-country" onchange="reloadWithSelectedCountry();">
+			<option value="">Change country</option>
+			<hr />
+			${optionsToRender}
+		</select>
+	`;
+
 	const helpers = `
 		<span class="ncf__debug-helpers">
 			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="logout();" title="Logout and refresh">Logout</button>
 			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
 			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
+			${countriesDropDown}
 			${isTest ? testCards : ''}
 			${links.length ? linksString : ''}
 		</span>
@@ -52,11 +91,7 @@ export function Debug({ isTest = false, showHelpers = false, links = {} }) {
 	var SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';
 	var COUNTRY_CODE = window.FT && window.FT.country || 'GBR';
 
-	var postcodeByCountry = {
-		GBR: 'EC4M9BT',
-		USA: '10028',
-		CAN: 'K0E 9Z9'
-	};
+	var postcodeByCountry = ${JSON.stringify(allSupportedPostcodeExamples)};
 
 	var debugData = {
 		billingCity: 'London',
@@ -140,6 +175,17 @@ export function Debug({ isTest = false, showHelpers = false, links = {} }) {
 		document.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';
 		window.location.reload();
 	}
+	
+	function reloadWithSelectedCountry () {
+		var countryBox = document.getElementById("ncf-country");
+		var selectedValue = countryBox.options[countryBox.selectedIndex].value;
+		if (selectedValue) {
+			const url = new URL(window.location);
+			url.searchParams.set("countryCode", selectedValue);
+			history.pushState({}, "", url);
+			window.location.reload();
+		}
+	}
 	`,
 	};
 	const style = {
@@ -185,4 +231,5 @@ Debug.propTypes = {
 	isTest: PropTypes.bool,
 	showHelpers: PropTypes.bool,
 	links: PropTypes.object,
+	countries: PropTypes.array,
 };

package/components/debug.stories.js

@@ -11,3 +11,10 @@ Basic.args = {
 	isTest: true,
 	showHelpers: true,
 };
+
+export const WithCustomCountries = (args) => <Debug {...args} />;
+WithCustomCountries.args = {
+	isTest: true,
+	showHelpers: true,
+	countries: ['GBR', 'USA', 'JPN', 'FRA', 'CAN'],
+};

package/components/payment-term.jsx

@@ -190,15 +190,6 @@ export function PaymentTerm({
 		};
 
 		const createDiscount = () => {
-			// We need to display a specific text in the discount tile for H2 campaign offers.
-			// This is a TEMPORARY hack and will be removed once the campaign is over (Monday, October 28th).
-			// A ticket has been raised to deal with the clean-up: https://financialtimes.atlassian.net/browse/ACQ-2970.
-			if (option.specialOffer) {
-				return (
-					<span className="ncf__payment-term__discount">Special offer</span>
-				);
-			}
-
 			return (
 				option.discount && (
 					<span className="ncf__payment-term__discount">
@@ -254,7 +245,7 @@ export function PaymentTerm({
 											option.amount,
 											option.currency,
 											option.value
-										)
+									  )
 							)}
 							{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
 						</div>
@@ -429,7 +420,6 @@ PaymentTerm.propTypes = {
 			title: PropTypes.string,
 			subTitle: PropTypes.string,
 			bestOffer: PropTypes.bool,
-			specialOffer: PropTypes.bool,
 			chargeOnText: PropTypes.string,
 			fulfilmentOption: PropTypes.string,
 		})

package/components/payment-term.stories.js

@@ -132,17 +132,6 @@ RenewOffers.args = {
 			selected: false,
 			chargeOnText: 'You will be charged on May 1, 2021',
 		},
-		{
-			title: 'Annual',
-			subTitle: '(Renews annually unless cancelled)',
-			price: '€ 150.00',
-			value: 150.0,
-			isTrial: false,
-			discount: '25%',
-			specialOffer: true,
-			selected: false,
-			chargeOnText: 'You will be charged on May 1, 2021',
-		},
 		{
 			title: '12 Month Subscription',
 			price: '€ 300.00',

package/dist/debug.jsx

@@ -7,13 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.Debug = Debug;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _supportedPostcodeExamples = require("../helpers/supportedPostcodeExamples");
+var _countries = require("../utils/countries");
 function Debug(_ref) {
   var _ref$isTest = _ref.isTest,
     isTest = _ref$isTest === void 0 ? false : _ref$isTest,
     _ref$showHelpers = _ref.showHelpers,
     showHelpers = _ref$showHelpers === void 0 ? false : _ref$showHelpers,
     _ref$links = _ref.links,
-    links = _ref$links === void 0 ? {} : _ref$links;
+    links = _ref$links === void 0 ? {} : _ref$links,
+    _ref$countries = _ref.countries,
+    countries = _ref$countries === void 0 ? [] : _ref$countries;
   // Strings are used rather than JSX as this component is injected into HTML
   // along with onclick handlers, styles and javascript. JSX will escape and
   // modify the HTML which we do not want. Once our applications are on JSX
@@ -24,12 +28,31 @@ function Debug(_ref) {
   var linksString = Object.keys(links).map(function (link) {
     return "<a key=".concat(link, " class=\"ncf__button ncf__button--inverse ncf__link\" href=\"").concat(links[link], "\">").concat(link, "</a>");
   });
-  var helpers = "\n\t\t<span class=\"ncf__debug-helpers\">\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm();\" title=\"Fill form with debug data\">Fill</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm(); submitForm();\" title=\"Fill form with debug data and submit\">Fill &amp; Submit</button>\n\t\t\t".concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
+
+  // Builds a Country dropdown component to allow the user to select a country and reload the page with the selected country
+  // This is useful for testing the form with different countries without having to change the URL manually
+  // The dropdown is built using the getCountries function which groups countries into frequently used and alphabetical
+  var filteredCountries = (0, _countries.getCountries)({
+    filter: countries
+  });
+  var createOption = function createOption(country) {
+    return "<option key=\"".concat(country.code, "\" value=\"").concat(country.code, "\">").concat(country.name, "</option>");
+  };
+  var createOptGroup = function createOptGroup(countryGroup) {
+    return "<optgroup key=\"".concat(countryGroup.label, "\" label=\"").concat(countryGroup.label, "\">\n\t\t\t").concat(countryGroup.countries.reduce(function (options, country) {
+      return "".concat(options, " ").concat(createOption(country));
+    }), "\n\t\t</optgroup>");
+  };
+  var optionsToRender = filteredCountries.reduce(function (options, country) {
+    return "".concat(options, " ").concat(country.label ? createOptGroup(country) : createOption(country));
+  }, '');
+  var countriesDropDown = "\n\t\t<select class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__button--max-with\" id=\"ncf-country\" onchange=\"reloadWithSelectedCountry();\">\n\t\t\t<option value=\"\">Change country</option>\n\t\t\t<hr />\n\t\t\t".concat(optionsToRender, "\n\t\t</select>\n\t");
+  var helpers = "\n\t\t<span class=\"ncf__debug-helpers\">\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm();\" title=\"Fill form with debug data\">Fill</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm(); submitForm();\" title=\"Fill form with debug data and submit\">Fill &amp; Submit</button>\n\t\t\t".concat(countriesDropDown, "\n\t\t\t").concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
   var html = {
     __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
   };
   var javascript = {
-    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'APT 2C',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t\tverificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
+    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = ".concat(JSON.stringify(_supportedPostcodeExamples.allSupportedPostcodeExamples), ";\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'APT 2C',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t\tverificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t\n\tfunction reloadWithSelectedCountry () {\n\t\tvar countryBox = document.getElementById(\"ncf-country\");\n\t\tvar selectedValue = countryBox.options[countryBox.selectedIndex].value;\n\t\tif (selectedValue) {\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set(\"countryCode\", selectedValue);\n\t\t\thistory.pushState({}, \"\", url);\n\t\t\twindow.location.reload();\n\t\t}\n\t}\n\t")
   };
   var style = {
     __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t.ncf__button--debug {\n\t\tpadding: 0px 5px;\n\t}\n\t"
@@ -46,5 +69,6 @@ function Debug(_ref) {
 Debug.propTypes = {
   isTest: _propTypes["default"].bool,
   showHelpers: _propTypes["default"].bool,
-  links: _propTypes["default"].object
+  links: _propTypes["default"].object,
+  countries: _propTypes["default"].array
 };

package/dist/payment-term.jsx

@@ -185,14 +185,6 @@ function PaymentTerm(_ref) {
       defaultChecked: true
     });
     var createDiscount = function createDiscount() {
-      // We need to display a specific text in the discount tile for H2 campaign offers.
-      // This is a TEMPORARY hack and will be removed once the campaign is over (Monday, October 28th).
-      // A ticket has been raised to deal with the clean-up: https://financialtimes.atlassian.net/browse/ACQ-2970.
-      if (option.specialOffer) {
-        return /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__discount"
-        }, "Special offer");
-      }
       return option.discount && /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__discount"
       }, option.bestOffer ? 'Best offer' : "Save ".concat(option.discount, " off RRP"));
@@ -314,7 +306,6 @@ PaymentTerm.propTypes = {
     title: _propTypes["default"].string,
     subTitle: _propTypes["default"].string,
     bestOffer: _propTypes["default"].bool,
-    specialOffer: _propTypes["default"].bool,
     chargeOnText: _propTypes["default"].string,
     fulfilmentOption: _propTypes["default"].string
   })),

package/main.scss

@@ -308,6 +308,10 @@
 		&--margin {
 			margin: 20px 0;
 		}
+
+		&--max-with {
+			max-width: 120px;
+		}
 	}
 
 	&__center {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "39.3.0",
+  "version": "40.0.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {
@@ -37,14 +37,13 @@
     "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@dotcom-tool-kit/babel": "3.2.1",
-    "@dotcom-tool-kit/component": "4.1.5",
-    "@dotcom-tool-kit/eslint": "3.2.2",
-    "@dotcom-tool-kit/frontend-app": "3.2.6",
-    "@dotcom-tool-kit/jest": "3.4.1",
-    "@dotcom-tool-kit/lint-staged-npm": "3.2.1",
-    "@dotcom-tool-kit/logger": "3.4.1",
-    "@dotcom-tool-kit/prettier": "3.2.1",
+    "@dotcom-tool-kit/babel": "^4.0.2",
+    "@dotcom-tool-kit/component": "^5.0.3",
+    "@dotcom-tool-kit/eslint": "^4.0.2",
+    "@dotcom-tool-kit/jest": "^4.0.2",
+    "@dotcom-tool-kit/lint-staged-npm": "^4.0.2",
+    "@dotcom-tool-kit/logger": "^4.0.0",
+    "@dotcom-tool-kit/prettier": "^4.0.2",
     "@financial-times/eslint-config-next": "7.1.0",
     "@financial-times/jest-browser-resolver": "^1.0.2",
     "@snyk/protect": "1.1278.0",
@@ -54,7 +53,7 @@
     "@storybook/react-webpack5": "^7.6.13",
     "@sucrase/jest-plugin": "^3.0.0",
     "check-engines": "^1.6.0",
-    "dotcom-tool-kit": "3.5.2",
+    "dotcom-tool-kit": "^4.0.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "eslint-config-prettier": "^9.1.0",
@@ -85,7 +84,7 @@
     "npm": "8.x || 9.x || 10.x"
   },
   "volta": {
-    "node": "22.7.0"
+    "node": "22.11.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,json,scss}": "dotcom-tool-kit format:staged test:staged --"

package/toolkit/run-storybook/.toolkitrc.yml

@@ -1 +1,4 @@
-// Need any empty for plugin to work, based on this link https://github.com/Financial-Times/dotcom-tool-kit/blob/35a6f7754c33f58789b201594ed5d1000e029f1c/docs/custom-plugins.md#common-plugin-structure
+version: 2
+
+tasks:
+  RunStorybook: ./index.js

package/toolkit/run-storybook/index.js

@@ -1,4 +1,4 @@
-const { Task } = require('@dotcom-tool-kit/types');
+const { Task } = require('@dotcom-tool-kit/base');
 const { exec } = require('child_process');
 const { hookFork, waitOnExit } = require('@dotcom-tool-kit/logger');
 
@@ -12,6 +12,4 @@ class RunStorybook extends Task {
 	}
 }
 
-RunStorybook.description = 'Run storybook';
-
-exports.tasks = [RunStorybook];
+module.exports = RunStorybook;