@financial-times/n-myft-ui 30.3.0 → 30.4.0

package/components/jsx/csrf-token/input.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ * @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}
+*/
+
+export default function CsrfToken({ csrfToken, cacheablePersonalisedUrl }) {
+
+	const token = cacheablePersonalisedUrl ? csrfToken : '';
+	return (
+		<input
+			data-myft-csrf-token
+			value={token}
+			type="hidden"
+			name="token" />
+	)
+}

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import CsrfToken from '../csrf-token/input';
+
+/**
+ * @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}
+*/
+
+export default function FollowPlusInstantAlerts({ conceptId, name, csrfToken, setFollowButtonStateToSelected, cacheablePersonalisedUrl, setInstantAlertsOn, flags, variant }) {
+	if (!flags.myFtApiWrite) {
+		return null;
+	}
+
+	const 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`
+	};
+
+	const 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'
+	};
+
+	const buttonText = setFollowButtonStateToSelected && cacheablePersonalisedUrl ?
+		'Added' :
+		'Add to myFT';
+
+	return (
+		<form
+			{...dynamicFormAttributes}
+			className="n-myft-ui n-myft-ui--follow"
+			method="GET"
+			data-myft-ui="follow"
+			data-concept-id={conceptId}
+			data-myft-ui-variant="followPlusInstantAlerts">
+			<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}.`}
+			></div>
+			<CsrfToken
+				cacheablePersonalisedUrl={cacheablePersonalisedUrl}
+				csrfToken={csrfToken}
+			/>
+			<button
+				{...dynamicButtonAttributes}
+				className={
+					`n-myft-follow-button n-myft-follow-button--instant-alerts
+						${setInstantAlertsOn ? 'n-myft-follow-button--instant-alerts--on' : ''}
+						${variant ? `n-myft-follow-button--${variant}` : ''}`
+				}
+				data-concept-id={conceptId}
+				data-trackable="follow"
+				type="submit"
+				data-component-id="myft-follow-plus-instant-alerts">
+				{buttonText}
+			</button>
+		</form>
+	);
+};

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

@@ -0,0 +1,76 @@
+const toggleInstantAlertsClass = ({ instantAlertsOn,followPlusInstantAlerts }) => {
+	// Update the button icon to reflect the instant alert preference
+	if (instantAlertsOn) {
+		followPlusInstantAlerts.classList.add('n-myft-follow-button--instant-alerts--on');
+	} else {
+		followPlusInstantAlerts.classList.remove('n-myft-follow-button--instant-alerts--on');
+	}
+};
+
+const instantAlertsIconLoad = ({ event, followPlusInstantAlerts }) => {
+	const modalConceptId = followPlusInstantAlerts.dataset.conceptId;
+
+	if (!event || !modalConceptId) {
+		return;
+	}
+
+	const currentConcept = event.detail.items
+		.find(item => item && item.uuid === modalConceptId);
+
+	if (!currentConcept) {
+		return;
+	}
+
+
+	const instantAlertsOn = Boolean(currentConcept && currentConcept._rel && currentConcept._rel.instant);
+	toggleInstantAlertsClass({instantAlertsOn, followPlusInstantAlerts });
+};
+
+const instantAlertsIconUpdate = ({ event, followPlusInstantAlerts }) => {
+	const modalConceptId = followPlusInstantAlerts.dataset.conceptId;
+
+	if (!event || !modalConceptId) {
+		return;
+	}
+
+	const currentConcept = event.detail.results
+		.find(item => item && item.subject && item.subject.properties && item.subject.properties.uuid === modalConceptId);
+
+	if (!currentConcept) {
+		return;
+	}
+
+
+	const instantAlertsOn = Boolean(currentConcept && currentConcept.rel && currentConcept.rel.properties && currentConcept.rel.properties.instant);
+	toggleInstantAlertsClass({instantAlertsOn, followPlusInstantAlerts });
+};
+
+
+
+
+const sendModalToggleEvent = ({ followPlusInstantAlerts }) => {
+	const preferenceModalToggleEvent = new CustomEvent('myft.preference-modal.show-hide.toggle', { bubbles: true });
+	followPlusInstantAlerts.dispatchEvent(preferenceModalToggleEvent);
+	followPlusInstantAlerts.classList.toggle('n-myft-follow-button--instant-alerts--open');
+
+};
+
+
+export default () => {
+	/**
+	 * This feature is part of a test
+	 * Therefore we have built it to work within the known parameters of that test
+	 * For example we know it will only once appear in the page next to the primary add button on articles
+	 * If this was to be used in other locations it would need some additional work to avoid being singleton
+	 */
+	const followPlusInstantAlerts = document.querySelector('[data-component-id="myft-follow-plus-instant-alerts"]');
+
+	if (!followPlusInstantAlerts) {
+		return;
+	}
+
+	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/follow-plus-instant-alerts/main.scss

@@ -0,0 +1,64 @@
+@import '../../../mixins/lozenge/main.scss';
+
+@import "@financial-times/o-icons/main";
+@import "@financial-times/o-colors/main";
+
+@mixin bellOffIcon($color, $background) {
+	@include oIconsContent(
+		$icon-name: 'mute-notifications',
+		$color: oColorsMix(
+			$color: $color,
+			$background: $background,
+			$percentage: 60,
+		),
+		$size: 10
+	);
+	background-size: 21px;
+}
+
+@mixin bellOnIcon($color) {
+	@include oIconsContent(
+		$icon-name: 'notifications',
+		$color: $color,
+		$size: 10
+	);
+	background-size: 21px;
+}
+
+@mixin arrowIcon($icon-name, $color) {
+	content: "";
+	@include oIconsContent(
+		$icon-name: $icon-name,
+		$color: $color,
+		$size: 10
+	);
+	background-size: 21px;
+	background-position: 50% 41%;
+	margin-left: 12px;
+}
+
+@mixin myftFollowButtonPlusToggleIcons($theme: standard) {
+	@include withTheme($theme) {
+		&.n-myft-follow-button--instant-alerts[aria-pressed=true]::before {
+			@include bellOffIcon(getThemeColor(text), getThemeColor(background));
+		}
+
+		&.n-myft-follow-button--instant-alerts--on[aria-pressed=true]::before {
+			@include bellOnIcon(getThemeColor(text));
+		}
+
+		&.n-myft-follow-button--instant-alerts[aria-pressed=true]::after {
+			@include arrowIcon('arrow-down', getThemeColor(text));
+		}
+
+		&.n-myft-follow-button--instant-alerts--open[aria-pressed=true]::after {
+			@include arrowIcon('arrow-up', getThemeColor(text));
+		}
+	}
+}
+
+@each $theme in map-keys($myft-lozenge-themes) {
+	.n-myft-follow-button#{getThemeModifier($theme)} {
+		@include myftFollowButtonPlusToggleIcons($theme);
+	}
+}

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

@@ -0,0 +1,182 @@
+import myFtClient from 'next-myft-client';
+import getToken from '../../../myft/ui/lib/get-csrf-token';
+
+const csrfToken = getToken();
+
+const renderError = ({ message, preferencesModal }) => {
+	const errorElement = preferencesModal.querySelector('[data-component-id="myft-preference-modal-error"]');
+
+	errorElement.innerHTML = message;
+};
+
+/**
+ * This preference modal is part of a test
+ * Therefore we have built the positioning function to work within the known parameters of that test
+ * For example we know it will only appear next to the primary add button on articles
+ * If this was to be used in other locations this function would need further improvements
+ */
+const positionModal = ({ event, preferencesModal } = {}) => {
+	const eventTrigger = event.target;
+
+	if (!eventTrigger) {
+		return;
+	}
+
+	const modalHorizontalCentering = (eventTrigger.offsetLeft + (eventTrigger.offsetWidth / 2)) - (preferencesModal.offsetWidth / 2);
+	const verticalPadding = 15;
+	const leftPadding = '5px';
+
+	preferencesModal.style.top = `${eventTrigger.offsetTop + eventTrigger.offsetHeight + verticalPadding}px`;
+	preferencesModal.style.left = `${modalHorizontalCentering}px`;
+
+	const modalPositionRelativeToScreen = preferencesModal.getBoundingClientRect();
+
+	if (modalPositionRelativeToScreen.left < 0) {
+		preferencesModal.style.left = leftPadding;
+	}
+
+	if (modalPositionRelativeToScreen.right > window.screen.width) {
+		const triggerRightPosition = eventTrigger.offsetLeft + eventTrigger.offsetWidth;
+		const modalShiftLeftPosition = triggerRightPosition - preferencesModal.offsetWidth;
+
+		preferencesModal.style.left = modalShiftLeftPosition > 0
+			? `${modalShiftLeftPosition}px`
+			: leftPadding;
+	}
+};
+
+const preferenceModalShowAndHide = ({ event, preferencesModal }) => {
+	preferencesModal.classList.toggle('n-myft-ui__preferences-modal--show');
+
+	if (preferencesModal.classList.contains('n-myft-ui__preferences-modal--show')) {
+		positionModal({ event, preferencesModal });
+	} else {
+		// Remove existing errors when hiding the modal
+		renderError({
+			message: '',
+			preferencesModal,
+		});
+	}
+};
+
+const removeTopic = async ({ event, conceptId, preferencesModal }) => {
+	event.target.setAttribute('disabled', true);
+
+	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 });
+	}
+
+	event.target.removeAttribute('disabled');
+};
+
+const getAlertsPreferences = async ({ event, preferencesModal }) => {
+	const preferencesList = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-list"]');
+
+	if (!preferencesList) {
+		return;
+	}
+	const addedTextBuffer = [];
+
+	event.detail.items.forEach(item => {
+		if (item.uuid === 'email-instant') {
+			addedTextBuffer.push(' email');
+		}
+		else if (item.uuid === 'app-instant') {
+			addedTextBuffer.push(' app');
+		}
+	});
+
+	try {
+		// We need the service worker registration to check for a subscription
+		const serviceWorkerRegistration = await navigator.serviceWorker.ready;
+		const subscription = await serviceWorkerRegistration.pushManager.getSubscription();
+		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;
+};
+
+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.checked = true;
+	} else {
+		instantAlertsCheckbox.checked = false;
+	}
+};
+
+const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModal }) => {
+	const instantAlertsToggle = event.target;
+
+	instantAlertsToggle.setAttribute('disabled', true);
+
+	const data = {
+		token: csrfToken
+	};
+
+	if (instantAlertsToggle.checked) {
+		data._rel = {instant: 'true'};
+	} else {
+		data._rel = {instant: 'false'};
+	}
+
+	try {
+		await myFtClient.updateRelationship('user', null, 'followed', 'concept', conceptId, data);
+	} catch (error) {
+		renderError({
+			message: 'Sorry, we are unable to change your instant alert preference. Please try again later or try from <a href="/myft">myFT</a>',
+			preferencesModal
+		});
+
+		instantAlertsToggle.checked = instantAlertsToggle.checked
+			? false
+			: true;
+	}
+
+	instantAlertsToggle.removeAttribute('disabled');
+};
+
+export default () => {
+	/**
+	 * This feature is part of a test
+	 * Therefore we have built it to work within the known parameters of that test
+	 * For example we know it will only once appear in the page next to the primary add button on articles
+	 * 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"]');
+	const conceptId = preferencesModal.dataset.conceptId;
+
+	if (!preferencesModal || !conceptId) {
+		return;
+	}
+
+	const removeTopicButton = preferencesModal.querySelector('[data-component-id="myft-preference-modal-remove"]');
+	const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
+
+	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.user.preferred.preference.load', (event) => getAlertsPreferences({ event, preferencesModal }));
+
+	document.body.addEventListener('myft.user.followed.concept.load', (event) => setCheckboxForAlertConcept({ event, preferencesModal }));
+};

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

@@ -0,0 +1,59 @@
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-forms/main';
+@include oForms();
+
+.n-myft-ui__preferences-modal {
+	display: none;
+	visibility: hidden;
+	position: absolute;
+	color: oColorsByName('black');
+	background-color: oColorsByName('white-80');
+	border-radius: 10px;
+	border: 2px solid oColorsByName('black-5');
+	width: 275px;
+	z-index: 9999999;
+}
+
+.n-myft-ui__preferences-modal__content {
+	position: relative;
+	margin: 20px 20px 24px;
+}
+
+.n-myft-ui__preferences-modal__checkbox__message {
+	@include oTypographySans($scale: 0, $weight: 'semibold', $style: 'normal');
+}
+
+.n-myft-ui__preferences-modal__text {
+	@include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
+	margin-bottom: 0;
+}
+
+.n-myft-ui__preferences-modal__remove-button {
+	margin-top: 20px;
+	height: 32px;
+	width: 100%;
+	border-radius: 20px;
+	border: 2px solid oColorsByName('black-20');
+	background-color: oColorsByName('white-80');
+	@include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
+	color: oColorsByName('black-80');
+}
+
+.n-myft-ui__preferences-modal__remove-button:not([disabled]):hover,
+.n-myft-ui__preferences-modal__remove-button:not([disabled]):focus {
+	border: 2px solid oColorsByName('claret-60');
+	background-color: oColorsMix($color: 'claret-60', $percentage: 20);
+	color: oColorsByName('claret-60');
+}
+
+.n-myft-ui__preferences-modal--show {
+	display: block;
+	visibility: visible;
+}
+
+.n-myft-ui__preferences-modal-error {
+	display: block;
+	@include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
+	color: oColorsByName('claret');
+	text-align: center;
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+/**
+ * @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}
+*/
+export default function InstantAlertsPreferencesModal({ flags, conceptId, visible }) {
+	if (!flags.myFtApiWrite) {
+		return null;
+	}
+
+	return (
+		<div
+			className={`n-myft-ui__preferences-modal ${visible ? 'n-myft-ui__preferences-modal--show' : ''}`}
+			data-component-id="myft-preferences-modal"
+			data-concept-id={conceptId}
+		>
+			<div className="n-myft-ui__preferences-modal__content">
+				<span className="o-forms-input o-forms-input--checkbox">
+					<label htmlFor="receive-instant-alerts">
+						<input
+							id="receive-instant-alerts"
+							type="checkbox"
+							name="receive-instant-alerts"
+							value="receive-instant-alerts"
+							data-component-id="myft-preferences-modal-checkbox"
+						/>
+						<span className="o-forms-input__label n-myft-ui__preferences-modal__checkbox__message">
+							Get instant alerts for this topic
+						</span>
+					</label>
+				</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>
+				<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>
+			</div>
+		</div>
+	);
+};

package/demos/app.js

@@ -1,3 +1,5 @@
+require('sucrase/register');
+
 const nExpress = require('@financial-times/n-express');
 const chalk = require('chalk');
 const errorHighlight = chalk.bold.red;
@@ -12,7 +14,9 @@ const fixtures = {
 	collections: require('./fixtures/collections'),
 	conceptList: require('./fixtures/concept-list'),
 	pinButton: require('./fixtures/pin-button'),
-	instantAlert: require('./fixtures/instant-alert')
+	instantAlert: require('./fixtures/instant-alert'),
+	followPlusInstantAlerts: require('./fixtures/jsx/follow-plus-instant-alerts'),
+	instantAlertsPreferencesModal: require('./fixtures/jsx/preferences-modal'),
 };
 
 const app = module.exports = nExpress({

package/demos/fixtures/jsx/follow-plus-instant-alerts.json

@@ -0,0 +1,4 @@
+{
+    "conceptId": "00000000-0000-0000-0000-000000000055",
+    "name": "Hidden Haiku"
+}

package/demos/fixtures/jsx/preferences-modal.json

@@ -0,0 +1,3 @@
+{
+    "conceptId": "00000000-0000-0000-0000-000000000055"
+}

package/demos/src/demo.scss

@@ -7,7 +7,9 @@ $system-code: "n-myft-ui-demo";
 @import '../../components/concept-pill/main';
 @import '../../components/button/main';
 @import '../../components/follow-button/main';
+@import '../../components/jsx/follow-plus-instant-alerts/main';
 @import '../../components/onboarding-cta/main';
+@import '../../components/jsx/preferences-modal/main';
 
 @import '../../components/digest-promo/main';
 .n-myft-digest-promo {