@financial-times/n-myft-ui 30.4.2 → 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/main.scss

@@ -11,6 +11,7 @@
 	border-radius: 10px;
 	border: 2px solid oColorsByName('black-5');
 	width: 275px;
+	text-transform: none;
 	z-index: 9999999;
 }
 

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/csrf-token/input.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CsrfToken;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {object} CsrfInputProperties
+ * @property {string} [csrfToken]
+ * 	A token to mitigate Cross Site Request Forgery
+ * @property {boolean} [cacheablePersonalisedUrl]
+ * 	An indicator to decide whether its safe to set the button state on the server side. eg. there is no cache or the cache is personalised
+ */
+
+/**
+ * Create a follow plus instant alerts button component
+ * @public
+ * @param {CsrfInputProperties}
+ * @returns {React.ReactElement}
+*/
+
+function CsrfToken(_ref) {
+  var csrfToken = _ref.csrfToken,
+      cacheablePersonalisedUrl = _ref.cacheablePersonalisedUrl;
+
+
+  var token = cacheablePersonalisedUrl ? csrfToken : '';
+  return _react2.default.createElement('input', {
+    'data-myft-csrf-token': true,
+    value: token,
+    type: 'hidden',
+    name: 'token' });
+}

package/dist/follow-plus-instant-alerts/follow-plus-instant-alerts.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = FollowPlusInstantAlerts;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _input = require('../csrf-token/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {object} FollowProperties
+ * @property {string} conceptId
+ * 	The ID for the concept
+ * @property {string} name
+ * 	The user facing label for the concept
+  * @property {string} [csrfToken]
+ * 	A token to mitigate Cross Site Request Forgery
+ * @property {boolean} [setFollowButtonStateToSelected]
+ * 	An indicator to state whether the button state should be set to selected on the server side
+ * @property {boolean} [cacheablePersonalisedUrl]
+ * 	An indicator to decide whether its safe to set the button state on the server side. eg. there is no cache or the cache is personalised
+ * @property {boolean} [setInstantAlertsOn]
+ * 	An indicator to switch the rendering to show instant alerts as turned on
+ * @property {object.<string, boolean>} flags
+ * 	FT.com feature flags
+ * @property {string} variant
+ * 	color variant of the follow button
+ */
+
+/**
+ * Create a follow plus instant alerts button component
+ * @public
+ * @param {FollowProperties}
+ * @returns {React.ReactElement}
+*/
+
+function FollowPlusInstantAlerts(_ref) {
+	var conceptId = _ref.conceptId,
+	    name = _ref.name,
+	    csrfToken = _ref.csrfToken,
+	    setFollowButtonStateToSelected = _ref.setFollowButtonStateToSelected,
+	    cacheablePersonalisedUrl = _ref.cacheablePersonalisedUrl,
+	    setInstantAlertsOn = _ref.setInstantAlertsOn,
+	    flags = _ref.flags,
+	    variant = _ref.variant;
+
+	if (!flags.myFtApiWrite) {
+		return null;
+	}
+
+	var dynamicFormAttributes = setFollowButtonStateToSelected && cacheablePersonalisedUrl ? {
+		'action': '/myft/remove/' + conceptId,
+		'data-js-action': '/__myft/api/core/followed/concept/' + conceptId + '?method=delete'
+	} : {
+		'action': '/myft/add/' + conceptId,
+		'data-js-action': '/__myft/api/core/followed/concept/' + conceptId + '?method=put'
+	};
+
+	var dynamicButtonAttributes = setFollowButtonStateToSelected && cacheablePersonalisedUrl ? {
+		'aria-label': 'Added ' + name + ' to myFT: click to manage alert preferences or remove from myFT',
+		'title': 'Manage ' + name + ' alert preferences or remove from myFT',
+		'data-alternate-label': 'Add to myFT: ' + name,
+		'aria-pressed': true,
+		'data-alternate-text': 'Add to myFT'
+	} : {
+		'aria-label': 'Add ' + name + ' to myFT',
+		'title': 'Add ' + name + ' to myFT',
+		'data-alternate-label': 'Added ' + name + ' to myFT: click to manage alert preferences or remove from myFT',
+		'aria-pressed': false,
+		'data-alternate-text': 'Added'
+	};
+
+	var buttonText = setFollowButtonStateToSelected && cacheablePersonalisedUrl ? 'Added' : 'Add to myFT';
+
+	return _react2.default.createElement(
+		'form',
+		_extends({}, dynamicFormAttributes, {
+			className: 'n-myft-ui n-myft-ui--follow',
+			method: 'GET',
+			'data-myft-ui': 'follow',
+			'data-concept-id': conceptId,
+			'data-myft-ui-variant': 'followPlusInstantAlerts' }),
+		_react2.default.createElement('div', {
+			className: 'n-myft-ui__announcement o-normalise-visually-hidden',
+			'aria-live': 'assertive',
+			'data-pressed-text': 'Now following ' + name + '.',
+			'data-unpressed-text': 'No longer following ' + name + '.'
+		}),
+		_react2.default.createElement(_input2.default, {
+			cacheablePersonalisedUrl: cacheablePersonalisedUrl,
+			csrfToken: csrfToken
+		}),
+		_react2.default.createElement(
+			'button',
+			_extends({}, dynamicButtonAttributes, {
+				className: 'n-myft-follow-button n-myft-follow-button--instant-alerts\n\t\t\t\t\t\t' + (setInstantAlertsOn ? 'n-myft-follow-button--instant-alerts--on' : '') + '\n\t\t\t\t\t\t' + (variant ? 'n-myft-follow-button--' + variant : ''),
+				'data-concept-id': conceptId,
+				'data-trackable': 'follow',
+				type: 'submit',
+				'data-component-id': 'myft-follow-plus-instant-alerts' }),
+			buttonText
+		)
+	);
+};

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

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.default = InstantAlertsPreferencesModal;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {Object} PreferencesProperties
+ * @property {string} conceptId
+ * Concept id of the concept which the modal controls
+ * @property {Record<string, boolean>} flags
+ * FT.com feature flags
+ * @property {boolean} visible
+ * Controls the visibility of the modal
+ */
+
+/**
+ * Create a popup modal to manage myFT alert preferences
+ * @public
+ * @param {PreferencesProperties}
+ * @returns {React.ReactElement}
+*/
+function InstantAlertsPreferencesModal(_ref) {
+	var flags = _ref.flags,
+	    conceptId = _ref.conceptId,
+	    visible = _ref.visible;
+
+	if (!flags.myFtApiWrite) {
+		return null;
+	}
+
+	return _react2.default.createElement(
+		'div',
+		{
+			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'
+		},
+		_react2.default.createElement(
+			'div',
+			{ className: 'n-myft-ui__preferences-modal__content' },
+			_react2.default.createElement(
+				'span',
+				{ className: 'o-forms-input o-forms-input--checkbox' },
+				_react2.default.createElement(
+					'label',
+					{ htmlFor: 'receive-instant-alerts' },
+					_react2.default.createElement('input', {
+						id: 'receive-instant-alerts',
+						type: 'checkbox',
+						name: 'receive-instant-alerts',
+						value: 'receive-instant-alerts',
+						'data-component-id': 'myft-preferences-modal-checkbox'
+					}),
+					_react2.default.createElement(
+						'span',
+						{ className: 'o-forms-input__label n-myft-ui__preferences-modal__checkbox__message' },
+						'Get instant alerts for this topic'
+					)
+				)
+			),
+			_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'
+			),
+			_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' },
+				'Remove from myFT'
+			)
+		)
+	);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "30.4.2",
+  "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
 	]
 };