Enhancement/#12245 - Show RRM extreme policy violation in success setup notification

assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/PolicyViolation.tsx

@@ -61,9 +61,16 @@ const PolicyViolation: FC< PolicyViolationProps > = ( {
 	onCTAClick,
 	policyViolationType,
 } ) => {
-	const contentPolicyState = useSelect( ( select: Select ) =>
-		select( MODULES_READER_REVENUE_MANAGER ).getContentPolicyState()
-	);
+	const isExtremeViolation = useSelect( ( select: Select ) => {
+		const contentPolicyState = select(
+			MODULES_READER_REVENUE_MANAGER
+		).getContentPolicyState();
+
+		return (
+			contentPolicyState ===
+			CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE_IMMEDIATE
+		);
+	} );
 
 	const { dismissItem } = useDispatch( CORE_USER );
 
@@ -72,15 +79,14 @@ const PolicyViolation: FC< PolicyViolationProps > = ( {
 
 		// Proactively dismiss the policy violation notification for the next 24 hours.
 		dismissItem(
-			contentPolicyState ===
-				CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE_IMMEDIATE
+			isExtremeViolation
 				? RRM_POLICY_VIOLATION_EXTREME_NOTIFICATION_ID
 				: RRM_POLICY_VIOLATION_MODERATE_HIGH_NOTIFICATION_ID,
 			{
 				expiresInSeconds: DAY_IN_SECONDS,
 			}
 		);
-	}, [ contentPolicyState, dismissItem, dismissNotice ] );
+	}, [ dismissItem, dismissNotice, isExtremeViolation ] );
 
 	const description =
 		policyViolationType === 'PENDING_POLICY_VIOLATION'
@@ -97,7 +103,7 @@ const PolicyViolation: FC< PolicyViolationProps > = ( {
 		<Notification gaTrackingEventArgs={ gaTrackingEventArgs }>
 			{ /* @ts-expect-error - The `NoticeNotification` component is not typed yet. */ }
 			<NoticeNotification
-				type={ TYPES.WARNING }
+				type={ isExtremeViolation ? TYPES.ERROR : TYPES.WARNING }
 				notificationID={ id }
 				gaTrackingEventArgs={ gaTrackingEventArgs }
 				title={ __(
@@ -109,7 +115,9 @@ const PolicyViolation: FC< PolicyViolationProps > = ( {
 					onClick: onDismiss,
 				} }
 				ctaButton={ {
-					label: __( 'View violations', 'google-site-kit' ),
+					label: isExtremeViolation
+						? __( 'Learn more', 'google-site-kit' )
+						: __( 'View violations', 'google-site-kit' ),
 					onClick: onCTAClick,
 					external: true,
 				} }

assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.stories.tsx

@@ -229,6 +229,20 @@ PolicyViolationActive.parameters = {
 };
 PolicyViolationActive.scenario = {};
 
+export const PolicyViolationExtreme = Template.bind( {} );
+PolicyViolationExtreme.storyName = 'Policy Violation - Extreme';
+PolicyViolationExtreme.parameters = {
+	query: {
+		notification: 'authentication_success',
+		slug: MODULE_SLUG_READER_REVENUE_MANAGER,
+	},
+	publicationOnboardingState:
+		PUBLICATION_ONBOARDING_STATES.PENDING_VERIFICATION,
+	contentPolicyState:
+		CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE_IMMEDIATE,
+};
+PolicyViolationExtreme.scenario = {};
+
 export default {
 	title: 'Modules/ReaderRevenueManager/Components/Dashboard/RRMSetupSuccessSubtleNotification',
 	component: RRMSetupSuccessSubtleNotification,

assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.test.tsx

@@ -468,29 +468,34 @@ describe( 'RRMSetupSuccessSubtleNotification', () => {
 	const policyViolationStatesData = [
 		[
 			CONTENT_POLICY_STATES.CONTENT_POLICY_VIOLATION_GRACE_PERIOD,
+			'View violations',
 			'Your account is linked, but your site has content that doesn’t follow the rules for Reader Revenue Manager. To keep your Reader Revenue Manager account active and CTAs public, you must resolve all policy violations.',
 		],
 		[
 			CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_GRACE_PERIOD,
+			'View violations',
 			'Your account is linked, but your site has content that doesn’t follow the rules for Reader Revenue Manager. To keep your Reader Revenue Manager account active and CTAs public, you must resolve all policy violations.',
 		],
 		[
 			CONTENT_POLICY_STATES.CONTENT_POLICY_VIOLATION_ACTIVE,
+			'View violations',
 			'Your account is connected but currently restricted because your site has content that doesn’t follow the rules for Reader Revenue Manager. To keep your Reader Revenue Manager account active and CTAs public, you must resolve all policy violations.',
 		],
 		[
 			CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE,
+			'View violations',
 			'Your account is connected but currently restricted because your site has content that doesn’t follow the rules for Reader Revenue Manager. To keep your Reader Revenue Manager account active and CTAs public, you must resolve all policy violations.',
 		],
 		[
 			CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE_IMMEDIATE,
+			'Learn more',
 			'Your account is connected but currently restricted because your site has content that doesn’t follow the rules for Reader Revenue Manager. To keep your Reader Revenue Manager account active and CTAs public, you must resolve all policy violations.',
 		],
 	];
 
 	describe.each( policyViolationStatesData )(
 		'for a publication with content policy state %s',
-		( contentPolicyState, expectedMessage ) => {
+		( contentPolicyState, expectedCTALabel, expectedMessage ) => {
 			beforeEach( () => {
 				muteFetch( dismissItemEndpoint );
 			} );
@@ -525,7 +530,9 @@ describe( 'RRMSetupSuccessSubtleNotification', () => {
 				expect( getByText( expectedMessage ) ).toBeInTheDocument();
 
 				expect(
-					getByRole( 'button', { name: /View violations/ } )
+					getByRole( 'button', {
+						name: new RegExp( expectedCTALabel ),
+					} )
 				).toBeInTheDocument();
 			} );
 
@@ -637,7 +644,7 @@ describe( 'RRMSetupSuccessSubtleNotification', () => {
 				);
 			} );
 
-			it( 'should open the policy info URL when the "View violations" CTA is clicked', () => {
+			it( `should open the policy info URL when the "${ expectedCTALabel }" CTA is clicked`, () => {
 				registry
 					.dispatch( MODULES_READER_REVENUE_MANAGER )
 					.receiveGetSettings( {
@@ -660,7 +667,7 @@ describe( 'RRMSetupSuccessSubtleNotification', () => {
 
 				fireEvent.click(
 					getByRole( 'button', {
-						name: /View violations/,
+						name: new RegExp( expectedCTALabel ),
 					} )
 				);
 
@@ -764,6 +771,10 @@ describe( 'RRMSetupSuccessSubtleNotification', () => {
 						contentPolicyState
 					) );
 
+			const isExtremePolicyViolation =
+				contentPolicyState ===
+				CONTENT_POLICY_STATES.CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE_IMMEDIATE;
+
 			it( 'should track the events when the notification is dismissed', async () => {
 				registry
 					.dispatch( MODULES_READER_REVENUE_MANAGER )
@@ -839,9 +850,14 @@ describe( 'RRMSetupSuccessSubtleNotification', () => {
 				);
 
 				// CTA button should be present.
-				const ctaButton = hasPolicyViolation
-					? getByText( 'View violations' )
-					: getByText( 'Get started' );
+				let ctaButton;
+				if ( isExtremePolicyViolation ) {
+					ctaButton = getByText( 'Learn more' );
+				} else if ( hasPolicyViolation ) {
+					ctaButton = getByText( 'View violations' );
+				} else {
+					ctaButton = getByText( 'Get started' );
+				}
 
 				expect( ctaButton ).toBeInTheDocument();