diff --git a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/PolicyViolation.tsx b/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/PolicyViolation.tsx index 9815b62af88..78919f67a05 100644 --- a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/PolicyViolation.tsx +++ b/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 > = ( { { /* @ts-expect-error - The `NoticeNotification` component is not typed yet. */ } = ( { 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, } } diff --git a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.stories.tsx b/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.stories.tsx index 656929871b3..ce83609e3a4 100644 --- a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.stories.tsx +++ b/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, diff --git a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.test.tsx b/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.test.tsx index 01fa630bbdb..6f3d7ed828b 100644 --- a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification/index.test.tsx +++ b/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(); diff --git a/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_0_small.png new file mode 100644 index 00000000000..264b5c00fd6 Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_0_small.png differ diff --git a/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_1_medium.png new file mode 100644 index 00000000000..72468339840 Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_1_medium.png differ diff --git a/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_2_large.png new file mode 100644 index 00000000000..98f9ba84243 Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_ReaderRevenueManager_Components_Dashboard_RRMSetupSuccessSubtleNotification_Policy_Violation_-_Extreme_0_document_2_large.png differ