RRM setup success notification for policy violations

[nfmohit]

Feature Description

The Reader Revenue Manager module setup success notification should have a new variation added for connected publications with policy violations.

• Read more in the design doc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

The Reader Revenue Manager module setup success notification should have new variations added connected publication with pending or active policy violations.

• The notice type, copy, UX, and placement should be according to the Figma designs.
• Clicking on the CTA should navigate the user to the “Violations” tab in the Publisher Center.

Implementation Brief

• The RRMSetupSuccessSubtleNotification component is already at the cyclomatic complexity limit, so we need to refactor it to add the new variation.
  • Create a new folder assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification and move the existing component there as index.tsx, along with its tests and stories.
  • Extract a new component to render the JSX for each of the current top-level variations. Create each component as a separate .tsx file in the new folder. Map the conditional blocks to components named as follows:
    • publicationOnboardingState === PENDING_VERIFICATION: PendingVerification
    • publicationOnboardingState === ONBOARDING_ACTION_REQUIRED: OnboardingActionRequired
    • publicationOnboardingState === ONBOARDING_COMPLETE: OnboardingComplete
• Create a new component, PolicyViolation, to render the JSX for the policy violation variations. This will render a warning notification, similar to OnboardingActionRequired.
  • It should accept a prop, policyViolationType, which can be one of the following values:
    • PENDING_POLICY_VIOLATION
    • ACTIVE_POLICY_VIOLATION
  • The copy will be as per the Figma design:
    • Title: Reader Revenue Manager is connected, but action is required
    • Content:
      • Pending policy violation: 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.
      • Active policy violation: 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.
    • Dismiss button: Got it
    • CTA button: View violations
  • Implement the onClick() handler for the CTA button in a similar way to the existing onCTAClick() handler in the RRMSetupSuccessSubtleNotification component. Set the SYNC_PUBLICATION form value to true and open the Publisher Center's "Violations" tab in a new browser tab. The URL for the "Violations" tab is retrieved from the getPolicyInfoURL() selector.
• Update the RRMSetupSuccessSubtleNotification component to render the new PolicyViolation component when a policy violation is detected.
  • To determine the type of policy violation, we need to check the contentPolicyState value, retrieved from the getContentPolicyState() selector.
    • For a pending policy violation, the value will be one of the following:
      • CONTENT_POLICY_VIOLATION_GRACE_PERIOD
      • CONTENT_POLICY_ORGANIZATION_VIOLATION_GRACE_PERIOD.
    • For an active policy violation, the values are:
      • CONTENT_POLICY_VIOLATION_ACTIVE
      • CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE
      • CONTENT_POLICY_ORGANIZATION_VIOLATION_IMMEDIATE.

Test Coverage

• Add JS tests, stories and VRTs for the new variants.

QA Brief

Policy violation testing

• Set up Site Kit and enable the rrmPolicyViolations feature flag.
• Start setting up Reader Revenue Manager.
• On the Connect Service screen, before clicking Complete setup, run the following snippet in the devtools console:

publicationID = googlesitekit.data.select('modules/reader-revenue-manager').getPublicationID();

googlesitekit.data.dispatch('modules/reader-revenue-manager').setSettings({
  contentPolicyStatus: {
    contentPolicyState: 'CONTENT_POLICY_VIOLATION_GRACE_PERIOD', // Alternatively, use 'CONTENT_POLICY_ORGANIZATION_VIOLATION_GRACE_PERIOD'
    policyInfoLink: 'https://publishercenter.google.com/reader-revenue-manager/settings/policy?publication=' + publicationID
  }
});

• Click Complete setup to proceed to the dashboard.
• Verify that the "pending enforcement" notification is displayed as per the Figma design.
• Click the CTA and verify that the user is navigated to the publication's "Policy violations" tab in Publisher Center.
• Repeat the above steps, but use 'CONTENT_POLICY_VIOLATION_ACTIVE', 'CONTENT_POLICY_ORGANIZATION_VIOLATION_ACTIVE', or 'CONTENT_POLICY_ORGANIZATION_VIOLATION_IMMEDIATE' for the contentPolicyState value, and verify that the "active enforcement" notification is displayed as per the Figma design.

Smoke testing

• For each of the onboarding states ONBOARDING_COMPLETE, ONBOARDING_ACTION_REQUIRED and PENDING_VERIFICATION:
  • Set up Site Kit and enable the rrmPolicyViolations feature flag.
  • Set up Reader Revenue Manager with a publication in the given onboarding state (use the Tester plugin to set the onboarding state if you don't have a publication in that state).
  • Verify that the notification is displayed according to the AC in Implement RRM module setup success banner #8840.

Changelog entry

• Add Reader Revenue Manager setup success notification variants for publications with policy violations.

[nfmohit]

IB ✅