Feature Description

This issue focuses on creating a new Notification component that will be the 'non-bloated' version of the BannerNotification component. This component will be composed using other smaller components and hooks for dismissal, event tracking, etc. as per the PoC branch.

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

Acceptance criteria

• Refactor the GatheringDataNotification to use a new component, that "composes" individual pieces of logic within <BannerNotification> using smaller components. This includes:
  • A hook that encapsulates tracking of all GA events for this notification.
  • A component for rendering CTA action buttons/links (other than dismissals).
  • A component that renders a dismissal action and encapsulates dismissal functionality which will dismiss the notification, fire any events on dismissal (including the GA tracking event) and expire the dismissal after a given time (one day for this particular notification). This should use the new datastore infrastructure.
  • A component that observes whether the component was actually viewed.

Implementation Brief

• Wait for Refactor GatheringDataNotification to use the new Notifications datastore #8976 to be merged and refer to the POC branch where mentioned.
• Within assets/js/components/notifications, create a new notification component folder. Within a new index file similar to within BannerNotification / PoC branch:
  • Export a new Notification component.
• Similar to the POC, create and use the two new hooks, useHasBeenViewed anduseNotificationEvents as well as the ViewedStateObserver component.
• Create the Dismiss and CTA components that have their own related props. Follow the pattern in the POC to built these as props by creating a getNotificationComponentProps() function.
• Within the Notification component:
  • the Dismiss component will take care of: dismiss and dismissExpires props and the onDismiss event within the component.
  • the CTA component will take care of: label and link props and the onCTAClick event within the component.
• The logic for the SVG image and styling of the component can be ported over from BannerNotification as is for now.
• Within the GatheringDataNotification, add the props for the new Notification, Dismiss and CTA components. Follow the pattern in the POC for the refactored ZeroDataNotification to simply pass the appropriate props and render the above components.

Test Coverage

• Add tests for the new Notification component.

QA Brief

• Test the Gathering Data Notification (and its variants with SC and Analytics on/off) thoroughly.
  • Test the GA tracking event for view-notification when the notification is rendered.
  • Click on the See more services button and ensure the link takes the user to the correct tab as before. Test the confirm-notification GA event is fired correctly. Ensure the notification is correctly dismissed - a new wp_googlesitekitpersistent_dismissed_items record will appear in wp_usermeta in the database.
  • Delete the record above and re-load the page to retest the notification. Click on the Maybe later button and ensure the notification is dismissed again in the database and the dismiss-notification GA event is correctly fired.
• Test when any other notification, say any other SetupSuccessBannerNotification is active - they should take precedence over the Gathering Data notification.

Changelog entry

• Refactor the GatheringDataNotification to use a newly refactored version of the BannerNotification component.