@financial-times/n-myft-ui 30.4.4 → 31.0.0

package/components/jsx/follow-plus-instant-alerts/index.js

@@ -44,7 +44,22 @@ const instantAlertsIconUpdate = ({ event, followPlusInstantAlerts }) => {
 	toggleInstantAlertsClass({instantAlertsOn, followPlusInstantAlerts });
 };
 
+const instantAlertsIconOff = ({ event, followPlusInstantAlerts }) => {
+	const modalConceptId = followPlusInstantAlerts.dataset.conceptId;
+	if (!event || !modalConceptId) {
+		return;
+	}
 
+	const currentConcept = event.detail.subject === modalConceptId;
+	if (!currentConcept) {
+		return;
+	}
+
+	toggleInstantAlertsClass({
+		instantAlertsOn: false,
+		followPlusInstantAlerts,
+	});
+};
 
 
 const sendModalToggleEvent = ({ followPlusInstantAlerts }) => {
@@ -73,4 +88,5 @@ export default () => {
 	document.body.addEventListener('myft.user.followed.concept.load', (event) => instantAlertsIconLoad({event, followPlusInstantAlerts}));
 
 	document.body.addEventListener('myft.user.followed.concept.update', (event) => instantAlertsIconUpdate({event, followPlusInstantAlerts}));
+	document.body.addEventListener('myft.user.followed.concept.remove', (event) => instantAlertsIconOff({ event, followPlusInstantAlerts }));
 };

package/components/jsx/preferences-modal/index.js

@@ -1,6 +1,5 @@
 import myFtClient from 'next-myft-client';
 import getToken from '../../../myft/ui/lib/get-csrf-token';
-import oTracking from '@financial-times/o-tracking';
 
 const csrfToken = getToken();
 
@@ -46,25 +45,44 @@ const positionModal = ({ event, preferencesModal } = {}) => {
 	}
 };
 
-const preferenceModalShowAndHide = ({ event, preferencesModal }) => {
+const toggleCheckboxStatus = ({ instantAlertsCheckbox, isChecked }) => {
+	if (isChecked) {
+		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
+		instantAlertsCheckbox.checked = true;
+	} else {
+		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
+		instantAlertsCheckbox.checked = false;
+	}
+}
+
+const tracking = (conceptId) => {
+	const trackingData = {
+		category: 'component',
+		action: 'view',
+		concept_id: conceptId,
+		component: {
+			type: 'component',
+			name: 'pop-up-box',
+			id: '72de123e-5082-11ee-be56-0242ac120002',
+		}
+	}
+
+	const trackingEvent = new CustomEvent('oTracking.event', {
+		detail: trackingData,
+		bubbles: true
+	});
+
+	document.body.dispatchEvent(trackingEvent);
+};
+
+const preferenceModalShowAndHide = ({ event, preferencesModal, conceptId }) => {
 	preferencesModal.classList.toggle('n-myft-ui__preferences-modal--show');
 
 	if (preferencesModal.classList.contains('n-myft-ui__preferences-modal--show')) {
 		positionModal({ event, preferencesModal });
-		const opts = {
-			category: 'component',
-			selector: '[data-component-id="myft-preferences-modal"]',
-			getContextData: () => {
-				return {
-					component: {
-						type: 'component',
-						name: 'pop-up-box',
-						id: '72de123e-5082-11ee-be56-0242ac120002',
-					},
-				};
-			},
-		};
-		oTracking.view.init(opts);
+
+		tracking(conceptId);
+
 	} else {
 		// Remove existing errors when hiding the modal
 		renderError({
@@ -79,9 +97,7 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 
 	try {
 		await myFtClient.remove('user', null, 'followed', 'concept', conceptId, { token: csrfToken });
-
 		preferenceModalShowAndHide({ preferencesModal });
-
 	} catch (error) {
 		renderError({ message: 'Sorry, we are unable to remove this topic. Please try again later or try from <a href="/myft">myFT</a>', preferencesModal });
 	}
@@ -91,8 +107,7 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 
 const getAlertsPreferenceText = (addedTextBuffer) => {
 	const alertsEnabledText = `Your delivery channels: ${addedTextBuffer.join(', ')}.`;
-	const alertsDisabledText = 'You have previously disabled all delivery channels';
-	return Array.isArray(addedTextBuffer) && addedTextBuffer.length > 0 ? alertsEnabledText : alertsDisabledText;
+	return Array.isArray(addedTextBuffer) && addedTextBuffer.length > 0 ? alertsEnabledText : '';
 };
 
 const getAlertsPreferences = async ({ event, preferencesModal }) => {
@@ -138,13 +153,11 @@ const setCheckboxForAlertConcept = ({ event, preferencesModal }) => {
 	// 2. the said concept has instant alert enabled
 	// if so, check the checkbox within the modal
 	const currentConcept = event.detail.items.find(item => item && item.uuid === conceptId);
-	if (currentConcept && currentConcept._rel && currentConcept._rel.instant) {
-		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
-		instantAlertsCheckbox.checked = true;
-	} else {
-		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
-		instantAlertsCheckbox.checked = false;
-	}
+	const isChecked = currentConcept && currentConcept._rel && currentConcept._rel.instant;
+	toggleCheckboxStatus({
+		instantAlertsCheckbox,
+		isChecked,
+	});
 };
 
 const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModal }) => {
@@ -160,11 +173,13 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
 		token: csrfToken
 	};
 
+	toggleCheckboxStatus({
+		instantAlertsCheckbox,
+		isChecked: instantAlertsCheckbox.checked,
+	});
 	if (instantAlertsCheckbox.checked) {
-		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
 		data._rel = {instant: 'true'};
 	} else {
-		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
 		data._rel = {instant: 'false'};
 	}
 
@@ -184,6 +199,21 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
 	instantAlertsCheckbox.removeAttribute('disabled');
 };
 
+const setCheckboxForAlertConceptToOff =  ({ event, preferencesModal }) => {
+	const conceptId = preferencesModal.dataset.conceptId;
+	const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
+
+	const currentConcept = event.detail.subject === conceptId;
+	if (!currentConcept) {
+		return;
+	}
+
+	toggleCheckboxStatus({
+		instantAlertsCheckbox,
+		isChecked: false,
+	});
+}
+
 export default () => {
 	/**
 	 * This feature is part of a test
@@ -213,9 +243,10 @@ export default () => {
 
 	instantAlertsCheckbox.addEventListener('change', event => toggleInstantAlertsPreference({ event, conceptId, preferencesModal }));
 
-	document.addEventListener('myft.preference-modal.show-hide.toggle', event => preferenceModalShowAndHide({ event, preferencesModal }));
+	document.addEventListener('myft.preference-modal.show-hide.toggle', event => preferenceModalShowAndHide({ event, preferencesModal, conceptId }));
 
 	document.addEventListener('myft.user.preferred.preference.load', (event) => getAlertsPreferences({ event, preferencesModal }));
 
 	document.body.addEventListener('myft.user.followed.concept.load', (event) => setCheckboxForAlertConcept({ event, preferencesModal }));
+	document.body.addEventListener('myft.user.followed.concept.remove', (event) => setCheckboxForAlertConceptToOff({ event, preferencesModal }));
 };

package/components/jsx/preferences-modal/preferences-modal.jsx

@@ -26,7 +26,6 @@ export default function InstantAlertsPreferencesModal({ flags, conceptId, visibl
 			className={`n-myft-ui__preferences-modal ${visible ? 'n-myft-ui__preferences-modal--show' : ''}`}
 			data-component-id="myft-preferences-modal"
 			data-concept-id={conceptId}
-			data-o-tracking-view="true"
 		>
 			<div className="n-myft-ui__preferences-modal__content">
 				<span className="o-forms-input o-forms-input--checkbox">
@@ -37,6 +36,7 @@ export default function InstantAlertsPreferencesModal({ flags, conceptId, visibl
 							name="receive-instant-alerts"
 							value="receive-instant-alerts"
 							data-component-id="myft-preferences-modal-checkbox"
+							data-trackable-context-concept_id={conceptId}
 						/>
 						<span className="o-forms-input__label n-myft-ui__preferences-modal__checkbox__message">
 							Get instant alerts for this topic
@@ -45,9 +45,9 @@ export default function InstantAlertsPreferencesModal({ flags, conceptId, visibl
 				</span>
 
 				<p data-component-id="myft-preferences-modal-list" className="n-myft-ui__preferences-modal__text"></p>
-				<a className="n-myft-ui__preferences-modal__text" href="/myft/alerts" data-trackable="pop-up-box|contact-preference">Manage your preferences here</a>
+				<a className="n-myft-ui__preferences-modal__text" href="/myft/alerts" data-trackable="pop-up-box|contact-preference" data-trackable-context-concept_id={conceptId}>Manage your delivery channels here</a>
 				<span className="n-myft-ui__preferences-modal-error" data-component-id="myft-preference-modal-error"></span>
-				<button className="n-myft-ui__preferences-modal__remove-button" data-component-id="myft-preference-modal-remove" data-trackable="pop-up-box|remove-from-myFT">Remove from myFT</button>
+				<button className="n-myft-ui__preferences-modal__remove-button" data-component-id="myft-preference-modal-remove" data-trackable="pop-up-box|remove-from-myFT" data-trackable-context-concept_id={conceptId}>Remove from myFT</button>
 			</div>
 		</div>
 	);

package/dist/preferences-modal/preferences-modal.js

@@ -41,8 +41,7 @@ function InstantAlertsPreferencesModal(_ref) {
 		{
 			className: 'n-myft-ui__preferences-modal ' + (visible ? 'n-myft-ui__preferences-modal--show' : ''),
 			'data-component-id': 'myft-preferences-modal',
-			'data-concept-id': conceptId,
-			'data-o-tracking-view': 'true'
+			'data-concept-id': conceptId
 		},
 		_react2.default.createElement(
 			'div',
@@ -58,7 +57,8 @@ function InstantAlertsPreferencesModal(_ref) {
 						type: 'checkbox',
 						name: 'receive-instant-alerts',
 						value: 'receive-instant-alerts',
-						'data-component-id': 'myft-preferences-modal-checkbox'
+						'data-component-id': 'myft-preferences-modal-checkbox',
+						'data-trackable-context-concept_id': conceptId
 					}),
 					_react2.default.createElement(
 						'span',
@@ -70,13 +70,13 @@ function InstantAlertsPreferencesModal(_ref) {
 			_react2.default.createElement('p', { 'data-component-id': 'myft-preferences-modal-list', className: 'n-myft-ui__preferences-modal__text' }),
 			_react2.default.createElement(
 				'a',
-				{ className: 'n-myft-ui__preferences-modal__text', href: '/myft/alerts', 'data-trackable': 'pop-up-box|contact-preference' },
-				'Manage your preferences here'
+				{ className: 'n-myft-ui__preferences-modal__text', href: '/myft/alerts', 'data-trackable': 'pop-up-box|contact-preference', 'data-trackable-context-concept_id': conceptId },
+				'Manage your delivery channels here'
 			),
 			_react2.default.createElement('span', { className: 'n-myft-ui__preferences-modal-error', 'data-component-id': 'myft-preference-modal-error' }),
 			_react2.default.createElement(
 				'button',
-				{ className: 'n-myft-ui__preferences-modal__remove-button', 'data-component-id': 'myft-preference-modal-remove', 'data-trackable': 'pop-up-box|remove-from-myFT' },
+				{ className: 'n-myft-ui__preferences-modal__remove-button', 'data-component-id': 'myft-preference-modal-remove', 'data-trackable': 'pop-up-box|remove-from-myFT', 'data-trackable-context-concept_id': conceptId },
 				'Remove from myFT'
 			)
 		)

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "30.4.4",
+  "version": "31.0.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
-    "prepare": "npx snyk protect || npx snyk protect -d || true",
-    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
+    "prepare": "npx snyk protect || npx snyk protect -d || true"
   },
   "repository": {
     "type": "git",
@@ -20,48 +19,48 @@
   },
   "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
   "devDependencies": {
-    "@financial-times/dotcom-build-base": "^8.1.0",
-    "@financial-times/dotcom-build-code-splitting": "^8.1.0",
-    "@financial-times/dotcom-build-js": "^8.1.0",
-    "@financial-times/dotcom-build-sass": "^8.1.0",
-    "@financial-times/dotcom-server-handlebars": "^8.1.0",
-    "@financial-times/n-express": "^27.5.0",
-    "@financial-times/n-gage": "^8.3.2",
+    "@financial-times/dotcom-build-base": "^8.2.1",
+    "@financial-times/dotcom-build-code-splitting": "^8.2.1",
+    "@financial-times/dotcom-build-js": "^8.2.1",
+    "@financial-times/dotcom-build-sass": "^8.2.1",
+    "@financial-times/dotcom-server-handlebars": "^8.2.1",
+    "@financial-times/n-express": "^28.0.3",
+    "@financial-times/n-gage": "^9.0.1",
     "ascii-table": "0.0.9",
     "autoprefixer": "9.7.0",
     "aws-sdk-mock": "4.5.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.2.1",
+    "babel-core": "^6.26.3",
     "babel-loader": "7.1.4",
     "babel-plugin-add-module-exports": "^0.3.0",
     "babel-plugin-transform-async-to-generator": "^6.24.1",
-    "babel-plugin-transform-es2015-classes": "^6.8.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
+    "babel-plugin-transform-es2015-classes": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.24.1",
-    "babel-runtime": "^6.9.2",
-    "brotli": "^1.3.1",
-    "chai": "4.2.0",
+    "babel-runtime": "^6.26.0",
+    "brotli": "^1.3.3",
+    "chai": "4.3.8",
     "chalk": "2.4.2",
-    "check-engine": "^1.10.1",
+    "check-engine": "^1.12.0",
     "css-loader": "^0.23.1",
     "denodeify": "^1.2.1",
     "eslint": "6.5.1",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "extract-css-block-webpack-plugin": "^1.3.0",
     "fetch-mock": "^5.0.3",
-    "handlebars": "^4.0.6",
-    "handlebars-loader": "^1.4.0",
+    "handlebars": "^4.7.8",
+    "handlebars-loader": "^1.7.3",
     "http-server": "^0.11.1",
     "hyperons": "^0.4.1",
     "imports-loader": "0.8.0",
     "inject-loader": "^4.0.1",
     "karma": "4.4.1",
-    "karma-browserstack-launcher": "1.5.1",
+    "karma-browserstack-launcher": "1.6.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "3.1.0",
+    "karma-chrome-launcher": "3.2.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-html-reporter": "^0.2.6",
     "karma-mocha": "^1.3.0",
@@ -71,22 +70,23 @@
     "karma-viewport": "^1.0.9",
     "karma-webpack": "^4.0.2",
     "lintspaces-cli": "^0.7.0",
-    "lolex": "5.1.1",
+    "lolex": "5.1.2",
     "mocha": "6.2.2",
     "mockery": "2.1.0",
     "node-fetch": "2.6.0",
     "nodemon": "^1.9.2",
-    "npm-prepublish": "^1.2.1",
-    "pa11y-ci": "^2.1.1",
+    "npm-prepublish": "^1.2.3",
+    "pa11y-ci": "^3.0.1",
     "postcss-loader": "^0.9.1",
+    "puppeteer": "^18.2.1",
     "regenerator-runtime": "^0.13.3",
-    "sass": "^1.51.0",
+    "sass": "^1.68.0",
     "semver": "6.3.0",
     "sinon": "^7.1.0",
-    "sinon-chai": "^3.2.0",
-    "snyk": "^1.216.5",
+    "sinon-chai": "^3.7.0",
+    "snyk": "^1.1227.0",
     "sucrase": "^3.34.0",
-    "webpack": "^4.46.0",
+    "webpack": "^4.47.0",
     "webpack-cli": "^4.9.2"
   },
   "peerDependencies": {
@@ -104,8 +104,7 @@
     "react": "^16.14.0"
   },
   "dependencies": {
-    "@financial-times/o-tracking": "^4.5.0",
-    "date-fns": "2.16.1",
+    "date-fns": "2.30.0",
     "fetchres": "^1.7.2",
     "form-serialize": "^0.7.2",
     "ftdomdelegate": "^4.0.6",
@@ -115,12 +114,14 @@
     "ready-state": "^2.0.5",
     "superstore-sync": "^2.1.1"
   },
+  "overrides": {
+    "puppeteer": "$puppeteer"
+  },
   "volta": {
-    "node": "16.14.2",
-    "npm": "7.24.2"
+    "node": "18.18.0"
   },
   "engines": {
-    "node": "16.x",
+    "node": "16.x || 18.x",
     "npm": "7.x || 8.x || 9.x"
   },
   "x-dash": {