Feature: Notifications System

.eslintrc.js

@@ -38,6 +38,7 @@ module.exports = {
 	},
 	globals: {
 		getComputedStyle: 'readonly',
+		MutationObserver: 'readonly',
 	},
 	rules: {
 		'@wordpress/i18n-text-domain': [

.externalized.json

@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/preferences","@wordpress/primitives","@wordpress/url","@wordpress/viewport","jquery","lodash","react","react-dom"]
+["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/preferences","@wordpress/primitives","@wordpress/url","@wordpress/viewport","jquery","lodash","react","react-dom","~/notifications-system/woo-marketing-notifications-slot"]

js/src/constants.js

@@ -162,3 +162,7 @@ export const GEN_AI_ASSET_TYPES = {
 
 export const EU_POLITICAL_ADVERTISING_DECLARATION_REQUIRED_ERROR_CODE =
 	'eu_political_advertising_declaration_required';
+
+// Notification hooks
+export const GLA_NOTIFICATION_DISMISSED =
+	'gla_notifications_system_notification_dismissed';

js/src/data/action-types.js

@@ -67,6 +67,8 @@ const TYPES = {
 	RECEIVE_CYO_INCENTIVES: 'RECEIVE_CYO_INCENTIVES',
 	RECEIVE_GEN_AI_MEDIA_ASSETS: 'RECEIVE_GEN_AI_MEDIA_ASSETS',
 	RECEIVE_GEN_AI_TEXT_ASSETS: 'RECEIVE_GEN_AI_TEXT_ASSETS',
+	RECEIVE_NOTIFICATIONS: 'RECEIVE_NOTIFICATIONS',
+	DISMISS_NOTIFICATION: 'DISMISS_NOTIFICATION',
 };
 
 export default TYPES;

js/src/data/actions.js

@@ -1510,3 +1510,43 @@ export function* disconnectYouTubeAccount() {
 		throw error;
 	}
 }
+
+/**
+ * @param {Array} notifications
+ * @return {Object} Action object.
+ */
+export function receiveNotifications( notifications ) {
+	return {
+		type: TYPES.RECEIVE_NOTIFICATIONS,
+		notifications,
+	};
+}
+
+/**
+ * Dismiss a notification by ID.
+ *
+ * @param {string} id Notification ID.
+ * @throws Will throw an error if the request failed.
+ */
+export function* dismissNotification( id ) {
+	try {
+		yield apiFetch( {
+			path: `${ API_NAMESPACE }/notifications/${ id }`,
+			method: 'DELETE',
+		} );
+
+		return {
+			type: TYPES.DISMISS_NOTIFICATION,
+			id,
+		};
+	} catch ( error ) {
+		handleApiError(
+			error,
+			__(
+				'There was an error dismissing the notification.',
+				'google-listings-and-ads'
+			)
+		);
+		throw error;
+	}
+}

js/src/data/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { registerStore, useDispatch, dispatch } from '@wordpress/data';
+import { registerStore, select, useDispatch, dispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { getHistory } from '@woocommerce/navigation';
 
@@ -18,49 +18,56 @@ import reducer from './reducer';
 import { createErrorResponseCatcher } from './apiFetchMiddlewares';
 import { getReconnectAccountUrl } from '~/utils/urls';
 
-registerStore( STORE_KEY, {
-	actions,
-	selectors,
-	resolvers,
-	controls,
-	reducer,
-} );
+// This module is bundled separately per script entry, so more than one entry
+// (e.g. the main app and the notifications-system bundle) can import it on
+// the same page. Guard against re-running this setup — and re-registering
+// the store, which `@wordpress/data` only warns about rather than prevents —
+// so only the first bundle to load performs it.
+if ( ! select( STORE_KEY ) ) {
+	registerStore( STORE_KEY, {
+		actions,
+		selectors,
+		resolvers,
+		controls,
+		reducer,
+	} );
 
-dispatch( STORE_KEY ).hydratePrefetchedData( glaData.initialWpData );
+	dispatch( STORE_KEY ).hydratePrefetchedData( glaData.initialWpData );
 
-apiFetch.use(
-	createErrorResponseCatcher( ( response ) => {
-		if ( glaData.mcSetupComplete && response.status === 401 ) {
-			return ( response.json || response.text )
-				.call( response )
-				.then( ( errorInfo ) => {
-					if ( typeof errorInfo === 'string' ) {
-						return { message: errorInfo };
-					}
-					return errorInfo;
-				} )
-				.then( ( errorInfo ) => {
-					const url = getReconnectAccountUrl( errorInfo.code );
+	apiFetch.use(
+		createErrorResponseCatcher( ( response ) => {
+			if ( glaData.mcSetupComplete && response.status === 401 ) {
+				return ( response.json || response.text )
+					.call( response )
+					.then( ( errorInfo ) => {
+						if ( typeof errorInfo === 'string' ) {
+							return { message: errorInfo };
+						}
+						return errorInfo;
+					} )
+					.then( ( errorInfo ) => {
+						const url = getReconnectAccountUrl( errorInfo.code );
 
-					if ( url ) {
-						getHistory().replace( url );
-					}
+						if ( url ) {
+							getHistory().replace( url );
+						}
 
-					return errorInfo;
-				} )
-				.then( ( errorInfo ) => {
-					// Inject the status code to let the subsequent handlers can identify the 401 response error.
-					return Promise.reject( {
-						...errorInfo,
-						statusCode: response.status,
+						return errorInfo;
+					} )
+					.then( ( errorInfo ) => {
+						// Inject the status code to let the subsequent handlers can identify the 401 response error.
+						return Promise.reject( {
+							...errorInfo,
+							statusCode: response.status,
+						} );
 					} );
-				} );
-		}
+			}
 
-		// Throws error response to subsequent middlewares
-		throw response;
-	} )
-);
+			// Throws error response to subsequent middlewares
+			throw response;
+		} )
+	);
+}
 
 export { STORE_KEY };
 

js/src/data/reducer.js

@@ -78,6 +78,7 @@ const DEFAULT_STATE = {
 		budgetMetrics: {},
 		settings: null,
 	},
+	notifications: [],
 	gtinMigrationStatus: null,
 	price_benchmark: {
 		suggestions: {
@@ -737,6 +738,17 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 			return setIn( state, 'mc.accounts.youtube', null );
 		}
 
+		case TYPES.RECEIVE_NOTIFICATIONS: {
+			return setIn( state, 'notifications', action.notifications );
+		}
+
+		case TYPES.DISMISS_NOTIFICATION: {
+			const notifications = state.notifications.filter(
+				( notification ) => notification.id !== action.id
+			);
+			return setIn( state, 'notifications', notifications );
+		}
+
 		case TYPES.DISCONNECT_ACCOUNTS_ALL:
 		default:
 			return state;

js/src/data/resolvers.js

@@ -30,7 +30,6 @@ import {
 	adaptRaiseAdsBudgetRecommendations,
 } from './adapters';
 import { fetchWithHeaders, awaitPromise, recordGlaDataEvent } from './controls';
-
 import {
 	fetchShippingRates,
 	fetchShippingTimes,
@@ -63,6 +62,7 @@ import {
 	receiveCYOIncentives,
 	receiveEnhancedConversionsStatus,
 	receiveAdsSettings,
+	receiveNotifications,
 } from './actions';
 
 /**
@@ -847,3 +847,25 @@ getYouTubeAccount.shouldInvalidate = ( action ) => {
 		action.invalidateRelatedState
 	);
 };
+
+export function* getNotifications() {
+	try {
+		const response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/notifications`,
+		} );
+
+		yield receiveNotifications( response.notifications ?? [] );
+	} catch ( error ) {
+		handleApiError(
+			error,
+			__(
+				'There was an error loading notifications.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}
+
+getNotifications.shouldInvalidate = ( action ) => {
+	return action.type === TYPES.DISMISS_NOTIFICATION;
+};

js/src/data/selectors.js

@@ -606,3 +606,17 @@ export const getGenAITextAssets = ( state, url, assetType ) => {
 
 	return textAssets;
 };
+
+/**
+ * @typedef {Object} Notification
+ * @property {string} id Notification ID.
+ * @property {number} triggered_at Unix timestamp of when the notification was triggered.
+ */
+
+/**
+ * @param {Object} state
+ * @return {Array<Notification>} Current notifications, or empty array if none.
+ */
+export const getNotifications = ( state ) => {
+	return state.notifications ?? [];
+};

js/src/data/test/reducer.test.js

@@ -80,6 +80,7 @@ describe( 'reducer', () => {
 				budgetMetrics: {},
 				settings: null,
 			},
+			notifications: [],
 			gtinMigrationStatus: null,
 			price_benchmark: {
 				suggestions: {
@@ -1077,6 +1078,44 @@ describe( 'reducer', () => {
 		);
 	} );
 
+	describe( 'Notifications', () => {
+		const notifications = [
+			{ id: 'notif-1', triggered_at: 1000 },
+			{ id: 'notif-2', triggered_at: 2000 },
+		];
+
+		it( 'RECEIVE_NOTIFICATIONS populates state.notifications', () => {
+			const state = reducer( prepareState(), {
+				type: TYPES.RECEIVE_NOTIFICATIONS,
+				notifications,
+			} );
+
+			expect( state.notifications ).toEqual( notifications );
+		} );
+
+		it( 'DISMISS_NOTIFICATION removes the matching notification by id', () => {
+			const initial = prepareState( 'notifications', notifications );
+			const state = reducer( initial, {
+				type: TYPES.DISMISS_NOTIFICATION,
+				id: 'notif-1',
+			} );
+
+			expect( state.notifications ).toEqual( [
+				{ id: 'notif-2', triggered_at: 2000 },
+			] );
+		} );
+
+		it( 'DISMISS_NOTIFICATION with unknown id leaves notifications unchanged', () => {
+			const initial = prepareState( 'notifications', notifications );
+			const state = reducer( initial, {
+				type: TYPES.DISMISS_NOTIFICATION,
+				id: 'notif-99',
+			} );
+
+			expect( state.notifications ).toEqual( notifications );
+		} );
+	} );
+
 	describe( 'Detailed errors', () => {
 		const path = 'detailed_errors';
 

js/src/data/test/selectors.test.js

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { getNotifications } from '../selectors';
+
+describe( 'getNotifications', () => {
+	it( 'returns state.notifications when present', () => {
+		const notifications = [
+			{ id: 'notif-1', triggered_at: 1000 },
+			{ id: 'notif-2', triggered_at: 2000 },
+		];
+
+		expect( getNotifications( { notifications } ) ).toEqual(
+			notifications
+		);
+	} );
+
+	it( 'returns empty array when state.notifications is undefined', () => {
+		expect( getNotifications( {} ) ).toEqual( [] );
+	} );
+
+	it( 'returns empty array when state.notifications is null', () => {
+		expect( getNotifications( { notifications: null } ) ).toEqual( [] );
+	} );
+} );