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/components/notifications/FirstPartyModeSetupBanner.js

@@ -129,16 +129,9 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 		return null;
 	}
 
-	const getBannerSVG = () => {
-		if ( breakpoint === BREAKPOINT_SMALL ) {
-			return FPMSetupCTASVGMobile;
-		}
-
-		if ( breakpoint === BREAKPOINT_TABLET ) {
-			return FPMSetupCTASVGTablet;
-		}
-
-		return FPMSetupCTASVGDesktop;
+	const breakpointSVGMap = {
+		[ BREAKPOINT_SMALL ]: FPMSetupCTASVGMobile,
+		[ BREAKPOINT_TABLET ]: FPMSetupCTASVGTablet,
 	};
 
 	return (
@@ -180,7 +173,7 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 						} }
 					/>
 				}
-				SVG={ getBannerSVG() }
+				SVG={ breakpointSVGMap[ breakpoint ] || FPMSetupCTASVGDesktop }
 			/>
 		</Notification>
 	);

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,59 @@ export const selectors = {
 	 */
 	isNotificationDismissed: createRegistrySelector(
 		( select ) => ( state, id ) => {
+			const notification =
+				select( CORE_NOTIFICATIONS ).getNotification( id );
+
+			if ( notification === undefined ) {
+				return undefined;
+			}
+
+			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.
+	 */
+	isNotificationDismissalFinal: createRegistrySelector(
+		( select ) => ( state, id ) => {
+			const notification =
+				select( CORE_NOTIFICATIONS ).getNotification( id );
+
+			if ( notification === undefined ) {
+				return undefined;
+			}
+
+			invariant(
+				notification.isDismissible,
+				'Notification should be dismissible to check if a notification is on its final dismissal.'
+			);
+
+			// 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 {

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

@@ -21,6 +21,7 @@
  */
 import {
 	createTestRegistry,
+	provideNotifications,
 	untilResolved,
 } from '../../../../../tests/js/utils';
 import { render } from '../../../../../tests/js/test-utils';
@@ -42,6 +43,9 @@ describe( 'core/notifications Notifications', () => {
 	const fetchDismissItem = new RegExp(
 		'^/google-site-kit/v1/core/user/data/dismiss-item'
 	);
+	const fetchGetDismissedPrompts = new RegExp(
+		'^/google-site-kit/v1/core/user/data/dismissed-prompts'
+	);
 
 	let registry;
 	let store;
@@ -576,30 +580,105 @@ describe( 'core/notifications Notifications', () => {
 		} );
 
 		describe( 'isNotificationDismissed', () => {
-			let isNotificationDismissed;
-			beforeEach( () => {
-				( { isNotificationDismissed } =
-					registry.select( CORE_NOTIFICATIONS ) );
-			} );
+			describe( 'when using dismissed items', () => {
+				let isNotificationDismissed;
+				beforeEach( () => {
+					// Register the Gathering Data Notification as a test
+					provideNotifications( registry );
 
-			it( 'should return undefined if getDismissedItems selector is not resolved yet', async () => {
-				fetchMock.getOnce( fetchGetDismissedItems, { body: [] } );
-				expect( isNotificationDismissed( 'foo' ) ).toBeUndefined();
-				await untilResolved( registry, CORE_USER ).getDismissedItems();
-			} );
+					( { isNotificationDismissed } =
+						registry.select( CORE_NOTIFICATIONS ) );
+				} );
 
-			it( 'should return TRUE if the notification is dismissed', () => {
-				registry
-					.dispatch( CORE_USER )
-					.receiveGetDismissedItems( [ 'foo', 'bar' ] );
-				expect( isNotificationDismissed( 'foo' ) ).toBe( true );
+				it( 'should return undefined if getDismissedItems selector is not resolved yet', async () => {
+					fetchMock.getOnce( fetchGetDismissedItems, { body: [] } );
+					expect(
+						isNotificationDismissed( 'gathering-data-notification' )
+					).toBeUndefined();
+					await untilResolved(
+						registry,
+						CORE_USER
+					).getDismissedItems();
+				} );
+
+				it( 'should return TRUE if the notification is dismissed', () => {
+					registry
+						.dispatch( CORE_USER )
+						.receiveGetDismissedItems( [
+							'gathering-data-notification',
+							'some-other-notification',
+						] );
+					expect(
+						isNotificationDismissed( 'gathering-data-notification' )
+					).toBe( true );
+				} );
+
+				it( 'should return FALSE if the notification is not dismissed', () => {
+					registry
+						.dispatch( CORE_USER )
+						.receiveGetDismissedItems( [ 'foo', 'bar' ] );
+					expect(
+						isNotificationDismissed( 'gathering-data-notification' )
+					).toBe( false );
+				} );
 			} );
+			describe( 'when using dismissed prompts', () => {
+				let isNotificationDismissed;
+				beforeEach( () => {
+					provideNotifications( registry, {
+						'test-notification-using-prompts': {
+							Component: () => {},
+							areaSlug: NOTIFICATION_AREAS.BANNERS_ABOVE_NAV,
+							viewContexts: [ VIEW_CONTEXT_MAIN_DASHBOARD ],
+							priority: 11,
+							checkRequirements: () => true,
+							isDismissible: false,
+							dismissRetries: 1,
+						},
+					} );
+
+					( { isNotificationDismissed } =
+						registry.select( CORE_NOTIFICATIONS ) );
+				} );
+
+				it( 'should return undefined if getDismissedPrompts selector is not resolved yet', async () => {
+					fetchMock.getOnce( fetchGetDismissedPrompts, { body: [] } );
+					expect(
+						isNotificationDismissed(
+							'test-notification-using-prompts'
+						)
+					).toBeUndefined();
+					await untilResolved(
+						registry,
+						CORE_USER
+					).getDismissedPrompts();
+				} );
+
+				it( 'should return TRUE if the notification is dismissed', () => {
+					registry.dispatch( CORE_USER ).receiveGetDismissedPrompts( {
+						'test-notification-using-prompts': {
+							expires: 0,
+							count: 1,
+						},
+						'some-other-notification': { expires: 0, count: 2 },
+					} );
+					expect(
+						isNotificationDismissed(
+							'test-notification-using-prompts'
+						)
+					).toBe( true );
+				} );
 
-			it( 'should return FALSE if the notification is not dismissed', () => {
-				registry
-					.dispatch( CORE_USER )
-					.receiveGetDismissedItems( [ 'foo', 'bar' ] );
-				expect( isNotificationDismissed( 'baz' ) ).toBe( false );
+				it( 'should return FALSE if the notification is not dismissed', () => {
+					registry
+						.dispatch( CORE_USER )
+						.receiveGetDismissedPrompts( [ 'foo', 'bar' ] );
+					expect(
+						isNotificationDismissed(
+							'test-notification-using-prompts'
+						)
+					).toBe( false );
+				} );
 			} );
 		} );
 	} );

assets/js/modules/ads/datastore/settings.test.js

@@ -106,6 +106,17 @@ describe( 'modules/ads settings', () => {
 					FPM_SETUP_CTA_BANNER_NOTIFICATION,
 				] );
 
+			provideNotifications(
+				registry,
+				{
+					[ FPM_SETUP_CTA_BANNER_NOTIFICATION ]:
+						DEFAULT_NOTIFICATIONS[
+							FPM_SETUP_CTA_BANNER_NOTIFICATION
+						],
+				},
+				{ overwrite: true }
+			);
+
 			fetchMock.postOnce( settingsEndpoint, ( url, opts ) => ( {
 				body: JSON.parse( opts.body )?.data,
 				status: 200,

assets/js/modules/analytics-4/datastore/settings.test.js

@@ -518,6 +518,17 @@ describe( 'modules/analytics-4 settings', () => {
 						FPM_SETUP_CTA_BANNER_NOTIFICATION,
 					] );
 
+				provideNotifications(
+					registry,
+					{
+						[ FPM_SETUP_CTA_BANNER_NOTIFICATION ]:
+							DEFAULT_NOTIFICATIONS[
+								FPM_SETUP_CTA_BANNER_NOTIFICATION
+							],
+					},
+					{ overwrite: true }
+				);
+
 				const validSettings = {
 					accountID: fixtures.createProperty._accountID,
 					propertyID: fixtures.createProperty._id,