diff --git a/admin/class-yoast-notification.php b/admin/class-yoast-notification.php
index 3191827b11e..dd01300cf85 100644
--- a/admin/class-yoast-notification.php
+++ b/admin/class-yoast-notification.php
@@ -355,6 +355,15 @@ public function render() {
return '
' . $message . '
' . PHP_EOL;
}
+ /**
+ * Get the message for the notification.
+ *
+ * @return string The message.
+ */
+ public function get_message() {
+ return wpautop( $this->message );
+ }
+
/**
* Wraps the message with a Yoast SEO icon.
*
diff --git a/packages/js/src/dashboard/store/alert-center.js b/packages/js/src/dashboard/store/alert-center.js
new file mode 100644
index 00000000000..135958e77fd
--- /dev/null
+++ b/packages/js/src/dashboard/store/alert-center.js
@@ -0,0 +1,67 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { get } from "lodash";
+
+/**
+ * @returns {Object} The initial state.
+ */
+export const createInitialAlertCenterState = () => ( {
+ notifications: {
+ active: get( window, "wpseoScriptData.notifications.active", [] ),
+ dismissed: get( window, "wpseoScriptData.notifications.dismissed", [] ),
+ },
+ problems: {
+ active: get( window, "wpseoScriptData.problems.active", [] ),
+ dismissed: get( window, "wpseoScriptData.problems.dismissed", [] ),
+ },
+} );
+
+/**
+ * Change alert visability.
+ *
+ * @param {object} state The state.
+ * @param {string} type The type of the alert.
+ * @param {string} target The target visability of the alert.
+ * @param {string} id The id of the alert to hide.
+ *
+ * @returns {void}
+ */
+const changeAlertVisibility = ( state, type, target, id ) => {
+ const statuses = [ "active", "dismissed" ];
+ const source = statuses.find( ( status ) => status !== target );
+
+ const alertToShow = state[ type ][ source ].find( ( alert ) => alert.id === id );
+ if ( alertToShow ) {
+ state[ type ][ source ] = state[ type ].active.filter( ( alert ) => alert.id !== id );
+ state[ type ][ target ].push( alertToShow );
+ }
+};
+
+const slice = createSlice( {
+ name: "alertCenter",
+ initialState: createInitialAlertCenterState(),
+ reducers: {
+ hideNotification: ( state, action ) => {
+ changeAlertVisibility( state, "notifications", "dismissed", action.payload );
+ },
+ hideProblem: ( state, action ) => {
+ changeAlertVisibility( state, "problems", "dismissed", action.payload );
+ },
+ showNotification: ( state, action ) => {
+ changeAlertVisibility( state, "notifications", "active", action.payload );
+ },
+ showProblem: ( state, action ) => {
+ changeAlertVisibility( state, "problems", "active", action.payload );
+ },
+ },
+} );
+
+export const alertCenterSelectors = {
+ selectActiveProblems: ( state ) => get( state, "alertCenter.problems.active", [] ),
+ selectDismissedProblems: ( state ) => get( state, "alertCenter.problems.dismissed", [] ),
+ selectActiveNotifications: ( state ) => get( state, "alertCenter.notifications.active", [] ),
+ selectDismissedNotifications: ( state ) => get( state, "alertCenter.notifications.dismissed", [] ),
+};
+
+export const alertCenterActions = slice.actions;
+
+export default slice.reducer;
diff --git a/packages/js/src/dashboard/store/index.js b/packages/js/src/dashboard/store/index.js
index f16cf812f3e..c276418d818 100644
--- a/packages/js/src/dashboard/store/index.js
+++ b/packages/js/src/dashboard/store/index.js
@@ -4,6 +4,7 @@ import { merge } from "lodash";
import { getInitialLinkParamsState, LINK_PARAMS_NAME, linkParamsActions, linkParamsReducer, linkParamsSelectors } from "../../shared-admin/store";
import { STORE_NAME } from "../constants";
import preferences, { createInitialPreferencesState, preferencesActions, preferencesSelectors } from "./preferences";
+import alertCenter, { alertCenterActions, alertCenterSelectors, createInitialAlertCenterState } from "./alert-center";
/** @typedef {import("@wordpress/data/src/types").WPDataStore} WPDataStore */
@@ -16,22 +17,26 @@ const createStore = ( { initialState } ) => {
actions: {
...linkParamsActions,
...preferencesActions,
+ ...alertCenterActions,
},
selectors: {
...linkParamsSelectors,
...preferencesSelectors,
+ ...alertCenterSelectors,
},
initialState: merge(
{},
{
[ LINK_PARAMS_NAME ]: getInitialLinkParamsState(),
preferences: createInitialPreferencesState(),
+ alertCenter: createInitialAlertCenterState(),
},
initialState
),
reducer: combineReducers( {
[ LINK_PARAMS_NAME ]: linkParamsReducer,
preferences,
+ alertCenter,
} ),
} );
diff --git a/src/helpers/notification-helper.php b/src/helpers/notification-helper.php
index c06ca22dd05..100d0a06687 100644
--- a/src/helpers/notification-helper.php
+++ b/src/helpers/notification-helper.php
@@ -75,13 +75,19 @@ function ( $notification ) {
return [
'dismissed' => \array_map(
static function ( $notification ) {
- return $notification->to_array();
+ return [
+ 'id' => $notification->get_id(),
+ 'message' => $notification->get_message(),
+ ];
},
$dismissed_notifications
),
'active' => \array_map(
static function ( $notification ) {
- return $notification->to_array();
+ return [
+ 'id' => $notification->get_id(),
+ 'message' => $notification->get_message(),
+ ];
},
$active_notifications
),
@@ -113,13 +119,19 @@ function ( $notification ) {
return [
'dismissed' => \array_map(
static function ( $notification ) {
- return $notification->to_array();
+ return [
+ 'id' => $notification->get_id(),
+ 'message' => $notification->get_message(),
+ ];
},
$dismissed_problems
),
'active' => \array_map(
static function ( $notification ) {
- return $notification->to_array();
+ return [
+ 'id' => $notification->get_id(),
+ 'message' => $notification->get_message(),
+ ];
},
$active_problems
),