Refactor the PAXSetupSuccessSubtleNotification to use the new Notifications datastore

[jimmymadon]

Feature Description

This is the second issue that refactors another "subtle notifications" in the plugin as part of Phase 1 of the Banner Notifications Refactoring epic. It should refactor the PAXSetupSuccessSubtleNotification 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 PAXSetupSuccessSubtleNotification 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 and refactor this reusable component as a new "layout" within the new notifications framework.

Implementation Brief

• Create a new "layout" for subtle notifications
  • [x] Move assets/js/modules/analytics-4/components/SubtleNotification.js into assets/js/googlesitekit/notifications/components/layout/.
• In assets/js/modules/ads/components/notifications/PAXSetupSuccessSubtleNotification.js
  • [x] Use the assets/js/components/notifications/GatheringDataNotification.js as an example here.
  • [x] Include 2 new props - id and Notification
  • [x] Wrap the component with Notification component passed as the prop.
  • [x] Use the SubtleNotification layout component like it already is being used.
  • [x] Create a new component (or use the existing assets/js/googlesitekit/notifications/components/common/Dismiss.js component if possible) for the Got it button which should allow the passing of a dismissal callback but also do the GA event tracking similar to the existing <Dismiss> component.
  • [x] Remove and move logic that checks for the queryArgs as mentioned below.
• In assets/js/modules/ads/index.js
  • Register the notification, following the existing pattern used for widgets and following examples from the assets/js/googlesitekit/notifications/register-defaults.js file.
  • For checkRequirements, fetch the notification and slug using getQueryArg() to check if this notification should be queued.
  • For priority, use 10 as these "setup success" notifications should always be queued first and won't ever be rendered simultaneously with other setup success notifications based on the queryArgs.
• In assets/js/googlesitekit-modules-ads.js:
  • [x] Add a call to the registerNotifications() function that was just exported above in the module.
• In assets/js/components/notifications/SubtleNotifications.js:
  • [x] Introduce the <Notifications> component passing the view context and areaSlug as NOTIFICATION_AREAS.BANNERS_BELOW_NAV.
  • [x] Remove the direct rendering of the PAXSetupSuccessSubtleNotification.

Test Coverage

• No new tests required - but update existing stories and tests.

QA Brief

• Test the PAX Setup Success Notification once thoroughly by really completing the set up. Also test the scrolling behavior when clicking on "show me".
• For additional retesting, you can use the following URL to trigger the notification: /wp-admin/admin.php?page=googlesitekit-dashboard&notification=pax_setup_success_notification&slug=ads
• Test the dismiss behavior and new GA event being fired on dismissal.
• Also test this notification when the site is in Gathering, Zero data and Unsatisfied Scope alert test. This notification will appear "first" and all others will appear later once this is dismissed.

Changelog entry

• Refactor PAX notification to use new notification infrastructure.

[tofumatt]

Moving this to the backlog until #8976, which is marked as blocking this issue, is completed. That way we can mirror the approach used in #8976 for other migrations/refactoring.

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

• In assets/js/googlesitekit/notifications/datastore/notifications.js:
  • Within the getQueuedNotifications resolver, fetch the notification and slug using getQueryArg() and pass these to the checkRequirements() callback function (alongwith viewContext).

@jimmymadon, I think we shouldn't put it into the getQueuedNotifications resolver because it is very specific thing for just one notifications (or few notifications). Let's pull that info in the checkRequirements function of the notification itself.

Also, no need to use checkboxes for every subitem in IB, just use it for top level items or for subitems if we have 3+ levels of nested items. Finally, the 19 estimates seems a bit big, do we really need a half of the week to implement that? Seems like an over estimate because we need to refactor the existing component, not to create it from scratch.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ⚠️

• Tested on main environment.
• Verified the after completing the Ads pax setup. Ads pax success notice appears on main dashboard.
• Verified Ads pax success notice when site is in gathering state.
• Verified Ads pax success notice when site is in zero data state.
• Verified Ads pax success notice when UnsatisfiedScopesAlert and UnsatisfiedScopesAlertGTE alert is showing.
• Verified that Ads pax success notice appear "first" and all others will appear later once this is dismissed.
• Verified that clicking on 'Got me' dismiss the notification and other notification appear immediately once Ads pax success notice gets dismiss and dismiss GA event gets trigger.

@jimmymadon I noticed that when the user clicks on 'Show me,' the page scrolls down to the Campaign Performance widget, but the scroll position is slightly off. Should this issue be fixed in a follow-up, or should I create a separate ticket for it?

https://github.com/user-attachments/assets/bc12472f-648e-4da7-9fb3-308d03fbcac1

PASS CASES

 Dismiss event 

[tofumatt]

@jimmymadon I noticed that when the user clicks on 'Show me,' the page scrolls down to the Campaign Performance widget, but the scroll position is slightly off. Should this issue be fixed in a follow-up, or should I create a separate ticket for it?

That would be separate/unrelated to the notification refactoring done here, can you please file a separate issue for that? 🙏🏻

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified the after completing the Ads pax setup. Ads pax success notice appears on main dashboard.
• Verified Ads pax success notice when site is in gathering state.
• Verified Ads pax success notice when site is in zero data state.
• Verified Ads pax success notice when UnsatisfiedScopesAlert and UnsatisfiedScopesAlertGTE alert is showing.
• Verified that Ads pax success notice appear "first" and all others will appear later once this is dismissed.
• Verified that clicking on 'Got me' dismiss the notification and other notification appear immediately once Ads pax success notice gets dismiss and dismiss GA event gets trigger.
• For the scrolling issue I will create separate ticket and will update.

Note : There is a issue with zero data notification so it do not appear immediately once Ads pax success notice gets dismiss.

 **Dismiss event**  https://github.com/user-attachments/assets/1ae372a8-dee5-4737-ae56-99437c9dc53a https://github.com/user-attachments/assets/15b2c1e3-e7a9-4660-ab7c-32d8d70a6d69