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

package/build-state/npm-shrinkwrap.json

@@ -10,6 +10,7 @@
       "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",
@@ -3378,6 +3379,22 @@
         "@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",
@@ -31386,6 +31403,21 @@
         "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/follow-plus-instant-alerts/index.js

@@ -40,7 +40,6 @@ const instantAlertsIconUpdate = ({ event, followPlusInstantAlerts }) => {
 		return;
 	}
 
-
 	const instantAlertsOn = Boolean(currentConcept && currentConcept.rel && currentConcept.rel.properties && currentConcept.rel.properties.instant);
 	toggleInstantAlertsClass({instantAlertsOn, followPlusInstantAlerts });
 };
@@ -72,5 +71,6 @@ export default () => {
 	followPlusInstantAlerts.addEventListener('click', () => sendModalToggleEvent({followPlusInstantAlerts}));
 
 	document.body.addEventListener('myft.user.followed.concept.load', (event) => instantAlertsIconLoad({event, followPlusInstantAlerts}));
+
 	document.body.addEventListener('myft.user.followed.concept.update', (event) => instantAlertsIconUpdate({event, followPlusInstantAlerts}));
 };

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

@@ -1,5 +1,6 @@
 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();
 
@@ -50,6 +51,20 @@ const preferenceModalShowAndHide = ({ event, preferencesModal }) => {
 
 	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);
 	} else {
 		// Remove existing errors when hiding the modal
 		renderError({
@@ -74,6 +89,12 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 	event.target.removeAttribute('disabled');
 };
 
+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;
+};
+
 const getAlertsPreferences = async ({ event, preferencesModal }) => {
 	const preferencesList = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-list"]');
 
@@ -91,6 +112,8 @@ const getAlertsPreferences = async ({ event, preferencesModal }) => {
 		}
 	});
 
+	preferencesList.innerHTML = getAlertsPreferenceText(addedTextBuffer);
+
 	try {
 		// We need the service worker registration to check for a subscription
 		const serviceWorkerRegistration = await navigator.serviceWorker.ready;
@@ -98,43 +121,50 @@ const getAlertsPreferences = async ({ event, preferencesModal }) => {
 		if (subscription) {
 			addedTextBuffer.push('browser');
 		}
-
 	} catch (error) {
 		// eslint-disable-next-line no-console
 		console.warn('There was an error fetching the browser notification preferences', error);
 	}
-	const alertsEnabledText = `Your delivery channels: ${addedTextBuffer.join(', ')}.`;
-	const alertsDisabledText = 'You have previously disabled all delivery channels';
-	preferencesList.innerHTML = addedTextBuffer.length > 0 ? alertsEnabledText : alertsDisabledText;
+
+	preferencesList.innerHTML = getAlertsPreferenceText(addedTextBuffer);
 };
 
 const setCheckboxForAlertConcept = ({ event, preferencesModal }) => {
 	const conceptId = preferencesModal.dataset.conceptId;
 	const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
+
 	// search through all the concepts that the user has followed and check whether
 	// 1. the concept which this instant alert modal controls is within them, AND;
 	// 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 toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModal }) => {
-	const instantAlertsToggle = event.target;
+	const instantAlertsCheckbox = event.target;
 
-	instantAlertsToggle.setAttribute('disabled', true);
+	if (!instantAlertsCheckbox) {
+		return;
+	}
+
+	instantAlertsCheckbox.setAttribute('disabled', true);
 
 	const data = {
 		token: csrfToken
 	};
 
-	if (instantAlertsToggle.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'};
 	}
 
@@ -146,12 +176,12 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
 			preferencesModal
 		});
 
-		instantAlertsToggle.checked = instantAlertsToggle.checked
+		instantAlertsCheckbox.checked = instantAlertsCheckbox.checked
 			? false
 			: true;
 	}
 
-	instantAlertsToggle.removeAttribute('disabled');
+	instantAlertsCheckbox.removeAttribute('disabled');
 };
 
 export default () => {
@@ -162,16 +192,25 @@ export default () => {
 	 * If this was to be used in other locations it would need some additional work to avoid being singleton
 	 */
 	const preferencesModal = document.querySelector('[data-component-id="myft-preferences-modal"]');
+
+	if (!preferencesModal) {
+		return;
+	}
 	const conceptId = preferencesModal.dataset.conceptId;
 
-	if (!preferencesModal || !conceptId) {
+	if (!conceptId) {
 		return;
 	}
 
 	const removeTopicButton = preferencesModal.querySelector('[data-component-id="myft-preference-modal-remove"]');
 	const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
 
+	if (!removeTopicButton || !instantAlertsCheckbox) {
+		return;
+	}
+
 	removeTopicButton.addEventListener('click', event => removeTopic({ event, conceptId, preferencesModal }));
+
 	instantAlertsCheckbox.addEventListener('change', event => toggleInstantAlertsPreference({ event, conceptId, preferencesModal }));
 
 	document.addEventListener('myft.preference-modal.show-hide.toggle', event => preferenceModalShowAndHide({ event, preferencesModal }));

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

@@ -26,6 +26,7 @@ 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">
@@ -44,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">Manage your preferences here</a>
+				<a className="n-myft-ui__preferences-modal__text" href="/myft/alerts" data-trackable="pop-up-box|contact-preference">Manage your preferences 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">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">Remove from myFT</button>
 			</div>
 		</div>
 	);

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

@@ -41,7 +41,8 @@ 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-concept-id': conceptId,
+			'data-o-tracking-view': 'true'
 		},
 		_react2.default.createElement(
 			'div',
@@ -69,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' },
+				{ className: 'n-myft-ui__preferences-modal__text', href: '/myft/alerts', 'data-trackable': 'pop-up-box|contact-preference' },
 				'Manage your preferences 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' },
+				{ 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'
 			)
 		)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "30.4.3",
+  "version": "30.4.4",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -104,6 +104,7 @@
     "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",

package/secrets.js

@@ -6,6 +6,7 @@ module.exports = {
 		'190b4443-dc03-bd53-e79b-b4b6fbd04e64', // segment ID for subscribe URL
 		'ce23dd51-4421-32fc-23df-30099f38f1a4', // segment ID for USG test https://financialtimes.atlassian.net/browse/UG-1191
 		'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx', // regex for uuid generator
-		'a5676e20-5c92-47f3-a76c-11f9761121f5' // test/navigationAlphaTest.spec.js
+		'a5676e20-5c92-47f3-a76c-11f9761121f5', // test/navigationAlphaTest.spec.js
+		'72de123e-5082-11ee-be56-0242ac120002' // components/jsx/preferences-modal/index.js
 	]
 };