Feature Description

This issue should refactor the GA4AdSenseLinkedNotification so that it uses the new datastore infrastructure to register and queue the notification. It should also incorporate the newly introduced SubtleNotification component as a new "layout"

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

Acceptance criteria

• The GA4AdSenseLinkedNotification component should be refactored so that it is registered and rendered (queued) using the new core/notifications datastore.
• This notification component should not be called directly (i.e. directly in <SubtleNotifications>) but only via the generic getQueuedNotifications selector.
• The refactored component should not contain any business logic that hides it / prevents it from rendering. This logic should be contained in a callback function defined during registration.
• It should make use of the newly introduced SubtleNotification component.

Implementation Brief

• Update GA4AdSenseLinkedNotification component
  • Check the PAXSetupSuccessSubtleNotification for the example
  • Include 2 new props - id and Notification
  • Wrap the component with Notification component passed as the prop
  • Instead of the currently rendered SubtleNotification component use the new layout - assets/js/components/notifications/SubtleNotification.js, with existing props.
  • In the useEffect hook that tracks ${ viewContext }_top-earning-pages-success-notification, remove the shouldShowNotification conditional check as notification will only show if these conditionals are met in checkRequirements. You can replace current hook with useMount one
• Update assets/js/googlesitekit/notifications/register-defaults.js
  • Register the notification, following the existing patterns already added
  • For checkRequirements transfer the existing checks from GA4AdSenseLinkedNotification component itself - the conditionals and their logic from shouldShowNotification variable, and it's usage can be removed. Checking for ! shouldShowNotification to return early is not needed, as showing of notification is handled in this checkRequirements property
    • The conditionals used in useEffect hook, and hook, to dispatch dismissNotificationForUser callback can remain within the notification, so tracking code and dismissal can be invoked.
  • For priority, bump it by 10 from the last added subtle notification (not including error ones, which start from 150).
  • Use NOTIFICATION_AREAS.BANNERS_BELOW_NAV for areaSlug
  • Include isDismissible property with true for value
• Remove GA4AdSenseLinkedNotification from the assets/js/components/notifications/SubtleNotifications.js

Test Coverage

• Update existing assets/js/components/notifications/GA4AdSenseLinkedNotification.test.js and assets/js/components/notifications/GA4AdSenseLinkedNotification.stories.js

QA Brief

• Reproduce the GA4AdSenseLinkedNotification and test for any regressions. Ensure the view and dismiss GA event fires when the notification is rendered and when clicking on "Got it" respectively. Ideally, test this issue once with a real scenario.
• To force this notification to appear:
  • Ensure GA4 and AdSense are both active and connected in Site Kit. Force Account and Site status as ready for AdSense in the Tester plugin if necessary. Now reload the dashboard and use the following code snippet in the console to mock linkage:

await googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(false);
await googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true);
await googlesitekit.data.dispatch('core/notifications').invalidateResolution('getQueuedNotifications' ,['mainDashboard']);

• For every subsequent test after dismissing the notification, ensure the top-earning-pages-success-notification value in the dismissed_items usermeta record in the DB is deleted.

Changelog entry

• Update the Analytics + AdSense linking notification to use the new notifications datastore.