Enhancement/9889 Refactor RRM Setup CTA Banner

assets/js/components/DashboardMainApp.js

@@ -46,7 +46,6 @@ import {
 	AudienceSegmentationSetupCTAWidget,
 	AudienceSelectionPanel,
 } from '../modules/analytics-4/components/audience-segmentation/dashboard';
-import ReaderRevenueManagerSetupCTABanner from '../modules/reader-revenue-manager/components/dashboard/ReaderRevenueManagerSetupCTABanner';
 import EntitySearchInput from './EntitySearchInput';
 import DateRangeSelector from './DateRangeSelector';
 import HelpMenu from './help/HelpMenu';
@@ -88,7 +87,6 @@ import {
 
 export default function DashboardMainApp() {
 	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
-	const readerRevenueManagerEnabled = useFeature( 'rrmModule' );
 
 	const [ showSurveyPortal, setShowSurveyPortal ] = useState( false );
 
@@ -276,14 +274,6 @@ export default function DashboardMainApp() {
 				</Fragment>
 			) }
 
-			{ ! viewOnlyDashboard && (
-				<Fragment>
-					{ readerRevenueManagerEnabled && (
-						<ReaderRevenueManagerSetupCTABanner />
-					) }
-				</Fragment>
-			) }
-
 			<Notifications
 				areaSlug={ NOTIFICATION_AREAS.BANNERS_BELOW_NAV }
 				groupID={ NOTIFICATION_GROUPS.SETUP_CTAS }

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

@@ -34,6 +34,7 @@ export default function ActionsCTALinkDismiss( {
 	ctaLabel,
 	onCTAClick,
 	onDismiss = () => {},
+	dismissLabelInitial,
 	dismissLabel = __( 'OK, Got it!', 'google-site-kit' ),
 	dismissExpires = 0,
 	dismissOptions = {},
@@ -57,6 +58,7 @@ export default function ActionsCTALinkDismiss( {
 			<Dismiss
 				id={ id }
 				primary={ false }
+				dismissLabelInitial={ dismissLabelInitial }
 				dismissLabel={ dismissLabel }
 				dismissExpires={ dismissExpires }
 				disabled={ isNavigatingToCTALink }

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

@@ -27,14 +27,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useDispatch } from 'googlesitekit-data';
+import { useDispatch, useSelect } from 'googlesitekit-data';
 import useNotificationEvents from '../../hooks/useNotificationEvents';
 import { CORE_NOTIFICATIONS } from '../../datastore/constants';
 import { Button } from 'googlesitekit-components';
 
 export default function Dismiss( {
 	id,
 	primary = true,
+	dismissLabelInitial,
 	dismissLabel = __( 'OK, Got it!', 'google-site-kit' ),
 	dismissExpires = 0,
 	disabled,
@@ -49,6 +50,10 @@ export default function Dismiss( {
 
 	const { dismissNotification } = useDispatch( CORE_NOTIFICATIONS );
 
+	const isDismissalFinal = useSelect( ( select ) =>
+		select( CORE_NOTIFICATIONS ).isNotificationRetryFinal( id )
+	);
+
 	const handleDismiss = async ( event ) => {
 		await onDismiss?.( event );
 		trackEvents.dismiss(
@@ -67,7 +72,7 @@ export default function Dismiss( {
 			onClick={ handleDismiss }
 			disabled={ disabled }
 		>
-			{ dismissLabel }
+			{ isDismissalFinal ? dismissLabel : dismissLabelInitial }
 		</Button>
 	);
 }

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

@@ -81,7 +81,10 @@ export default function NotificationWithSVG( {
 										</Cell>
 										<Cell
 											alignBottom
-											className={ `googlesitekit-setup-cta-banner__svg-wrapper--${ id }` }
+											className={ classNames(
+												'googlesitekit-setup-cta-banner__svg-wrapper',
+												`googlesitekit-setup-cta-banner__svg-wrapper--${ id }`
+											) }
 											{ ...svgSizeProps }
 										>
 											<SVG />

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

@@ -64,10 +64,11 @@ export const actions = {
 	 * @param {WPComponent}    [settings.Component]         React component used to display the contents of this notification.
 	 * @param {number}         [settings.priority]          Notification's priority for ordering (lower number is higher priority, like WordPress hooks). Ideally in increments of 10. Default 10.
 	 * @param {string}         [settings.areaSlug]          The slug of the area where the notification should be rendered, e.g. notification-area-banners-above-nav.
-	 * @param {string}         [settings.groupID]           The ID of the group of notifications that should be rendered in their own individual queue.
+	 * @param {string}         [settings.groupID]           Optional. The ID of the group of notifications that should be rendered in their own individual queue.
 	 * @param {Array.<string>} [settings.viewContexts]      Array of Site Kit contexts, e.g. VIEW_CONTEXT_MAIN_DASHBOARD.
 	 * @param {Function}       [settings.checkRequirements] Optional. Callback function to determine if the notification should be queued.
-	 * @param {boolean}        [settings.isDismissible]     Flag to check if the notification should be queued and is not dismissed.
+	 * @param {boolean}        [settings.isDismissible]     Optional. Flag to check if the notification should be queued and is not dismissed.
+	 * @param {number}         [settings.dismissRetries]    Optional. An integer number denoting how many times a notification should be shown again on dismissal.
 	 * @return {Object} Redux-style action.
 	 */
 	registerNotification(
@@ -80,6 +81,7 @@ export const actions = {
 			viewContexts,
 			checkRequirements,
 			isDismissible,
+			dismissRetries = 0,
 		}
 	) {
 		invariant(
@@ -117,6 +119,7 @@ export const actions = {
 					viewContexts,
 					checkRequirements,
 					isDismissible,
+					dismissRetries,
 				},
 			},
 			type: REGISTER_NOTIFICATION,
@@ -226,6 +229,25 @@ export const actions = {
 				return;
 			}
 
+			// Use prompts if a notification should be shown again until it
+			// is dismissed for a certain number of retries.
+			if ( notification.dismissRetries > 0 ) {
+				const dismissCount = registry
+					.select( CORE_USER )
+					.getPromptDismissCount( id );
+
+				const expirationInSeconds =
+					dismissCount < notification.dismissRetries
+						? expiresInSeconds
+						: 0;
+
+				return yield commonActions.await(
+					registry.dispatch( CORE_USER ).dismissPrompt( id, {
+						expiresInSeconds: expirationInSeconds,
+					} )
+				);
+			}
+
 			return yield commonActions.await(
 				registry
 					.dispatch( CORE_USER )
@@ -407,8 +429,8 @@ export const selectors = {
 	/**
 	 * Determines whether a notification is dismissed or not.
 	 *
-	 * Currently, this selector simply forwards the call to the dismissed items API.
-	 * We can potentially add more notification-specific logic here in the future.
+	 * If the notification should appear again for a certain number of times after dismissal,
+	 * then we store them as prompts. So we check for dismissed prompts instead of dismissed items.
 	 *
 	 * @since 1.132.0
 	 *
@@ -418,9 +440,46 @@ export const selectors = {
 	 */
 	isNotificationDismissed: createRegistrySelector(
 		( select ) => ( state, id ) => {
+			const notification =
+				select( CORE_NOTIFICATIONS ).getNotification( id );
+
+			if ( notification.dismissRetries > 0 ) {
+				return select( CORE_USER ).isPromptDismissed( id );
+			}
+
 			return select( CORE_USER ).isItemDismissed( id );
 		}
 	),
+	/**
+	 * Determines whether a notification that can reappear again for a fixed number of times
+	 * on dismissal is at its final appearance.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state Data store's state.
+	 * @param {string} id    Notification id.
+	 * @return {(boolean|undefined)} TRUE if notification is on its final retry, otherwise FALSE, `undefined` if not resolved yet.
+	 */
+	isNotificationRetryFinal: createRegistrySelector(
+		( select ) => ( state, id ) => {
+			const notification =
+				select( CORE_NOTIFICATIONS ).getNotification( id );
+
+			// If a notification does not have retries, it always will be on its final render.
+			if ( notification.dismissRetries === 0 ) {
+				return true;
+			}
+
+			const dismissCount =
+				select( CORE_USER ).getPromptDismissCount( id );
+
+			if ( dismissCount >= notification.dismissRetries ) {
+				return true;
+			}
+
+			return false;
+		}
+	),
 };
 
 export default {