Enhancement/8981 Refactor RRM Setup Success Notification

assets/js/components/notifications/Notifications.js

@@ -43,7 +43,7 @@ export default function Notifications( { areaSlug } ) {
 	}
 
 	const { id, Component: ActiveNotification } = queuedNotifications[ 0 ];
-	const props = { id, ...getNotificationComponentProps( id ) };
+	const props = { ...getNotificationComponentProps( id ) };
 
 	return <ActiveNotification { ...props } />;
 }

assets/js/components/notifications/SubtleNotifications.js

@@ -26,15 +26,13 @@ import { Fragment } from '@wordpress/element';
  */
 import { useFeature } from '../../hooks/useFeature';
 import AudienceSegmentationSetupSuccessSubtleNotification from '../../modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
-import { RRMSetupSuccessSubtleNotification } from '../../modules/reader-revenue-manager/components/dashboard';
 import useViewContext from '../../hooks/useViewContext';
 import Notifications from './Notifications';
 import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
 
 export default function SubtleNotifications() {
 	const viewContext = useViewContext();
 	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
-	const rrmModuleEnabled = useFeature( 'rrmModule' );
 
 	// Each notification component rendered here has its own logic to determine
 	// whether it should be displayed; in most cases none of these components
@@ -48,7 +46,6 @@ export default function SubtleNotifications() {
 			{ audienceSegmentationEnabled && (
 				<AudienceSegmentationSetupSuccessSubtleNotification />
 			) }
-			{ rrmModuleEnabled && <RRMSetupSuccessSubtleNotification /> }
 			<Notifications
 				viewContext={ viewContext }
 				areaSlug={ NOTIFICATION_AREAS.BANNERS_BELOW_NAV }

assets/js/googlesitekit-modules-reader-revenue-manager.js

@@ -21,10 +21,13 @@
  */
 import Data from 'googlesitekit-data';
 import Modules from 'googlesitekit-modules';
+import Notifications from 'googlesitekit-notifications';
 import {
 	registerStore,
 	registerModule,
+	registerNotifications,
 } from './modules/reader-revenue-manager';
 
 registerStore( Data );
 registerModule( Modules );
+registerNotifications( Notifications );

assets/js/googlesitekit/notifications/components/Notification/index.js

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * WordPress dependencies
  */
@@ -26,7 +31,12 @@ import ViewedStateObserver from './ViewedStateObserver';
 import { useHasBeenViewed } from '../../hooks/useHasBeenViewed';
 import useNotificationEvents from '../../hooks/useNotificationEvents';
 
-export default function Notification( { id, className, children } ) {
+export default function Notification( {
+	id,
+	className,
+	gaViewEventLabel,
+	children,
+} ) {
 	const ref = useRef();
 	const viewed = useHasBeenViewed( id );
 	const trackEvents = useNotificationEvents( id );
@@ -36,10 +46,10 @@ export default function Notification( { id, className, children } ) {
 	// Track view once.
 	useEffect( () => {
 		if ( ! isViewedOnce && viewed ) {
-			trackEvents.view();
+			trackEvents.view( gaViewEventLabel );
 			setIsViewedOnce( true );
 		}
-	}, [ viewed, trackEvents, isViewedOnce ] );
+	}, [ viewed, trackEvents, isViewedOnce, gaViewEventLabel ] );
 
 	return (
 		<section id={ id } ref={ ref } className={ className }>
@@ -56,3 +66,10 @@ export default function Notification( { id, className, children } ) {
 		</section>
 	);
 }
+
+Notification.propTypes = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	gaViewEventLabel: PropTypes.string,
+	children: PropTypes.node,
+};

assets/js/googlesitekit/notifications/components/common/CTALinkSubtle.js

@@ -0,0 +1,83 @@
+/**
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { useDispatch } from 'googlesitekit-data';
+import { CORE_LOCATION } from '../../../datastore/location/constants';
+import useNotificationEvents from '../../hooks/useNotificationEvents';
+import { Button } from 'googlesitekit-components';
+import ExternalSVG from '../../../../../svg/icons/external.svg';
+
+export default function CTALinkSubtle( {
+	id,
+	ctaLink,
+	ctaLabel,
+	onCTAClick,
+	isCTALinkExternal = false,
+	gaConfirmEventLabel,
+} ) {
+	const trackEvents = useNotificationEvents( id );
+	const { navigateTo } = useDispatch( CORE_LOCATION );
+
+	const handleCTAClick = async ( event ) => {
+		if ( ! event.defaultPrevented ) {
+			event.preventDefault();
+		}
+
+		await onCTAClick?.( event );
+
+		await trackEvents.confirm( gaConfirmEventLabel );
+
+		if ( isCTALinkExternal ) {
+			global.open( ctaLink, '_blank' );
+		} else {
+			navigateTo( ctaLink );
+		}
+	};
+
+	return (
+		<Button
+			className="googlesitekit-subtle-notification__cta"
+			href={ ctaLink }
+			onClick={ handleCTAClick }
+			target={ isCTALinkExternal ? '_blank' : '_self' }
+			trailingIcon={
+				isCTALinkExternal ? (
+					<ExternalSVG width={ 14 } height={ 14 } />
+				) : undefined
+			}
+		>
+			{ ctaLabel }
+		</Button>
+	);
+}
+
+// eslint-disable-next-line sitekit/acronym-case
+CTALinkSubtle.propTypes = {
+	id: PropTypes.string,
+	ctaLink: PropTypes.string,
+	ctaLabel: PropTypes.string,
+	onCTAClick: PropTypes.func,
+	isCTALinkExternal: PropTypes.bool,
+	gaConfirmEventLabel: PropTypes.string,
+};

assets/js/googlesitekit/notifications/components/common/Dismiss.js

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * WordPress dependencies
  */
@@ -34,14 +39,15 @@ export default function Dismiss( {
 	dismissExpires = 0,
 	disabled,
 	onDismiss = () => {},
+	gaDismissEventLabel,
 } ) {
 	const trackEvents = useNotificationEvents( id );
 
 	const { dismissNotification } = useDispatch( CORE_NOTIFICATIONS );
 
 	const handleDismiss = async ( event ) => {
 		await onDismiss?.( event );
-		trackEvents.dismiss();
+		trackEvents.dismiss( gaDismissEventLabel );
 		dismissNotification( id, { expiresInSeconds: dismissExpires } );
 	};
 
@@ -55,3 +61,13 @@ export default function Dismiss( {
 		</Button>
 	);
 }
+
+Dismiss.propTypes = {
+	id: PropTypes.string,
+	primary: PropTypes.bool,
+	dismissLabel: PropTypes.string,
+	dismissExpires: PropTypes.number,
+	disabled: PropTypes.bool,
+	onDismiss: PropTypes.func,
+	gaDismissEventLabel: PropTypes.string,
+};

assets/js/googlesitekit/notifications/components/layout/SubtleNotification.js

@@ -20,37 +20,56 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import CheckFill from '../../../../../svg/icons/check-fill.svg';
+import WarningSVG from '../../../../../svg/icons/warning.svg';
 import { Grid, Cell, Row } from '../../../../material-components';
 
 export default function SubtleNotification( {
 	title,
 	description,
 	dismissCTA,
 	additionalCTA,
+	type = 'success',
 } ) {
 	return (
 		<Grid>
 			<Row>
 				<Cell
 					alignMiddle
 					size={ 12 }
-					className="googlesitekit-subtle-notification"
+					className={ classnames(
+						'googlesitekit-subtle-notification',
+						{
+							'googlesitekit-subtle-notification--success':
+								type === 'success',
+							'googlesitekit-subtle-notification--warning':
+								type === 'warning',
+						}
+					) }
 				>
 					<div className="googlesitekit-subtle-notification__icon">
-						<CheckFill width={ 24 } height={ 24 } />
+						{ type === 'success' && (
+							<CheckFill width={ 24 } height={ 24 } />
+						) }
+						{ type === 'warning' && (
+							<WarningSVG width={ 24 } height={ 24 } />
+						) }
 					</div>
+
 					<div className="googlesitekit-subtle-notification__content">
 						<p>{ title }</p>
 						<p className="googlesitekit-subtle-notification__secondary_description">
 							{ description }
 						</p>
 					</div>
+
 					{ dismissCTA }
+
 					{ additionalCTA }
 				</Cell>
 			</Row>
@@ -63,4 +82,5 @@ SubtleNotification.propTypes = {
 	description: PropTypes.node,
 	dismissCTA: PropTypes.node,
 	additionalCTA: PropTypes.node,
+	type: PropTypes.string,
 };

assets/js/googlesitekit/notifications/datastore/notifications.js

@@ -155,6 +155,15 @@ export const actions = {
 				};
 			}
 
+			const notification = registry
+				.select( CORE_NOTIFICATIONS )
+				.getNotification( id );
+
+			// Skip persisting notification dismissal in database if the notification is not dismissible.
+			if ( notification?.isDismissible === false ) {
+				return;
+			}
+
 			return registry
 				.dispatch( CORE_USER )
 				.dismissItem( id, { expiresInSeconds } );
@@ -281,6 +290,18 @@ export const selectors = {
 	getNotifications: ( state ) => {
 		return state.notifications;
 	},
+	/**
+	 * Fetches a registered notification by ID from state.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state Data store's state.
+	 * @param {string} id    Notification ID.
+	 * @return {(Object|undefined)} The registered notification object or undefined if a notification with the given ID is not registered.
+	 */
+	getNotification: ( state, id ) => {
+		return state.notifications[ id ];
+	},
 	/**
 	 * Fetches the queue of registered notifications which are filtered and sorted.
 	 *