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

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

@@ -45,11 +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 });
+
+		tracking(conceptId);
+
 	} else {
 		// Remove existing errors when hiding the modal
 		renderError({
@@ -64,7 +87,6 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 
 	try {
 		await myFtClient.remove('user', null, 'followed', 'concept', conceptId, { token: csrfToken });
-
 		preferenceModalShowAndHide({ preferencesModal });
 
 	} catch (error) {
@@ -74,6 +96,11 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 	event.target.removeAttribute('disabled');
 };
 
+const getAlertsPreferenceText = (addedTextBuffer) => {
+	const alertsEnabledText = `Your delivery channels: ${addedTextBuffer.join(', ')}.`;
+	return Array.isArray(addedTextBuffer) && addedTextBuffer.length > 0 ? alertsEnabledText : '';
+};
+
 const getAlertsPreferences = async ({ event, preferencesModal }) => {
 	const preferencesList = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-list"]');
 
@@ -91,6 +118,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 +127,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;
+
+	if (!instantAlertsCheckbox) {
+		return;
+	}
 
-	instantAlertsToggle.setAttribute('disabled', true);
+	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 +182,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,19 +198,28 @@ 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 }));
+	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

@@ -36,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
@@ -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" 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">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

@@ -57,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',
@@ -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' },
-				'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' },
+				{ 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.3",
+  "version": "30.4.5",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {

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
 	]
 };