Refactor `EnhancedMeasurementActivationBanner` to use the new Notifications datastore

[zutigrm]

Feature Description

This issue should refactor EnhancedMeasurementActivationBanner so that it uses the new datastore infrastructure to register and queue the notification. It should also incorporate a new "layout".

---

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

Acceptance criteria

• The EnhancedMeasurementActivationBanner 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. in BannerNotifications) 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.
• The component should not use the bloated BannerNotification component. Instead, it should be rendered using the new Notification component wrapper and a simpler "layout" component that solely encapsulates its structure and design.

Implementation Brief

• [ ] In assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/SetupBanner.js:
  • Check the GatheringDataNotification.js for an example
  • Include 2 new props - id and Notification
  • Wrap the component with Notification component passed as the prop
  • Instead of the currently rendered BannerNotification create a new layout - assets/js/components/notifications/layout/NotificationWithSVG.js, with existing props, if it was not previously created as part of another issue.
    • Extract the layout from BannerNotification, re-using the logic around WinImageSVG and showSmallWinImage
      • It displays image bellow the title or bellow the actions section, depending on the screen size and showSmallWinImage prop
    • You can check assets/js/googlesitekit/notifications/components/layout/NotificationWithSmallSVG.js for example. It should contain only the needed layout including the passed SVG, title, description and actions
• [ ] Update assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/SuccessBanner.js
  • Following the same logic as above, refactor the component to use new NotificationWithSVG with existing props
• [ ] Update assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/InProgressBanner.js
  • Following the same logic as above, refactor the component to use new NotificationWithSVG with existing props
• [ ] In assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/index.js
  • Remove the conditions that determine if banner should be shown https://github.com/google/site-kit-wp/blob/d912291cc95d81a8cd2bf70a5047585206334bb6/assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/index.js#L208
• [ ] Update assets/js/googlesitekit/notifications/register-defaults.js
  • Register the notification, following the existing patterns already added
  • For checkRequirements transfer the existing checks from assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/index.js component itself - Extract the conditions that determine if banner should be shown https://github.com/google/site-kit-wp/blob/d912291cc95d81a8cd2bf70a5047585206334bb6/assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/index.js#L208
  • For priority, bump it by 10 from the last added banner notification (not including error ones, which start from 150, regular ones start from 300).
  • Use NOTIFICATION_AREAS.BANNERS_ABOVE_NAV for areaSlug
  • Include isDismissible property with true for value
• [ ] Remove AudienceSegmentationSetupSuccessSubtleNotification from the assets/js/components/notifications/SubtleNotifications.js

Test Coverage

• Update assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/SetupBanner.stories.js, assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/InProgressBanner.stories.js and assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/SuccessBanner.stories.js to reflect the changes where needed

QA Brief

Changelog entry

[eugene-manuilov]

AC ✔️

[tofumatt]

IB ✅

[kelvinballoo]

QA ❌

I did per the QAB but the banner doesn't show up on develop branch. When I switch to latest release branch, then it shows up.

Test steps:

https://github.com/user-attachments/assets/257abef5-aa3c-4589-aaf3-236615b2cc7d

Switching to 'latest release':

https://github.com/user-attachments/assets/7fa144cd-65d8-4f2d-9013-f943c3b3649b

[jimmymadon]

@kelvinballoo As mentioned in this slack message, I will wait for the follow up PR of #10408 and the PR for #10003 to be merged. These PRs will fix the rendering of this banner. I will test this myself first.

c.c. @binnieshah

[kelvinballoo]

QA Update ✅

This was verified good as follows:

• The SetupBanner "Enable enhanced measurement" notification banner appears. #7461.

  • view_notification event is fired.

    

• Clicking the Enable now CTA will go to Oauth page. After granting the necessary permissions, the InProgress banner appears which is then switched to SuccessBanner version.

  https://github.com/user-attachments/assets/6449d7a9-ddfd-4f60-9e3f-eb158d47f081

  • confirm_notification event is fired for the main CTA click

    

  • view_notification event for the enhanced-measurement-success category for the third banner is fired.

    

• Clicking 'Ok, Got it' on the success banner dismisses it.

  • confirm_notification event is fired for the enhanced-measurement-success category.

    

  • Also, in the wp_user_meta table, the row with key wp_googlesitekitpersistent_dismissed_items now contains an entry for enhanced-measurement-notification with the i value to be 0 (permanent dismissal).

    

• Banner was retested with the edit scope being granted already. This skipped the InProgress banner variant.

  https://github.com/user-attachments/assets/5faeea09-11b4-438a-8cec-fd11f57e7a5e

• The banner was retested and this time, Maybe later was clicked. dismiss_notification was fired and a tooltip was displayed, with the relevant GA events. Dismissal in the DB was also recorded.

  https://github.com/user-attachments/assets/a75846c0-6cb6-4aac-a940-9ea06444f43b