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

package/build-state/npm-shrinkwrap.json

@@ -10,7 +10,6 @@
       "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
-        "@financial-times/o-tracking": "^4.5.0",
         "date-fns": "2.16.1",
         "fetchres": "^1.7.2",
         "form-serialize": "^0.7.2",
@@ -3379,22 +3378,6 @@
         "@financial-times/o-visual-effects": "^4.0.1"
       }
     },
-    "node_modules/@financial-times/o-tracking": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-tracking/-/o-tracking-4.5.0.tgz",
-      "integrity": "sha512-gPnAmMPqlYWf8xXNJkAYKQMpEWvHpjxajB4YnadbGhOGl2Zy8y5LJJqyzsfpqoBh51P7VDIc7yBF+A7fgaymYw==",
-      "dependencies": {
-        "ftdomdelegate": "^5"
-      },
-      "engines": {
-        "npm": "^7 || ^8"
-      }
-    },
-    "node_modules/@financial-times/o-tracking/node_modules/ftdomdelegate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ftdomdelegate/-/ftdomdelegate-5.0.0.tgz",
-      "integrity": "sha512-P9UmLMIq/ibxxFVBHlE2EIoHcFNDpamn3urRCwVWMnj3o9nAgLtqe64WVuqcGtkN4wujrBYeyxKCuN1/WO+bQw=="
-    },
     "node_modules/@financial-times/o-typography": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/@financial-times/o-typography/-/o-typography-7.5.0.tgz",
@@ -31403,21 +31386,6 @@
         "ftdomdelegate": "^4.0.6"
       }
     },
-    "@financial-times/o-tracking": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-tracking/-/o-tracking-4.5.0.tgz",
-      "integrity": "sha512-gPnAmMPqlYWf8xXNJkAYKQMpEWvHpjxajB4YnadbGhOGl2Zy8y5LJJqyzsfpqoBh51P7VDIc7yBF+A7fgaymYw==",
-      "requires": {
-        "ftdomdelegate": "^5"
-      },
-      "dependencies": {
-        "ftdomdelegate": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ftdomdelegate/-/ftdomdelegate-5.0.0.tgz",
-          "integrity": "sha512-P9UmLMIq/ibxxFVBHlE2EIoHcFNDpamn3urRCwVWMnj3o9nAgLtqe64WVuqcGtkN4wujrBYeyxKCuN1/WO+bQw=="
-        }
-      }
-    },
     "@financial-times/o-typography": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/@financial-times/o-typography/-/o-typography-7.5.0.tgz",

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,34 @@ const positionModal = ({ event, preferencesModal } = {}) => {
 	}
 };
 
-const preferenceModalShowAndHide = ({ event, preferencesModal }) => {
+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,7 +87,6 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 
 	try {
 		await myFtClient.remove('user', null, 'followed', 'concept', conceptId, { token: csrfToken });
-
 		preferenceModalShowAndHide({ preferencesModal });
 
 	} catch (error) {
@@ -91,8 +98,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 }) => {
@@ -213,7 +219,7 @@ 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 }));
 

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,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "30.4.4",
+  "version": "30.4.5",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -104,7 +104,6 @@
     "react": "^16.14.0"
   },
   "dependencies": {
-    "@financial-times/o-tracking": "^4.5.0",
     "date-fns": "2.16.1",
     "fetchres": "^1.7.2",
     "form-serialize": "^0.7.2",