Create New `ACRSubtleNotifciation` Subtle Notification Banner Component & Include in KMW Settings Area for Users Who Have Not Yet Set Up KMW, or Users With Manual KMW Setup

[10upsimon]

Feature Description

As part of the new ACR epic, updates to the existing KMW settings area taking place. One such update is the surfacing of a new Subtle Notification style banner which will be presented to either users who have not yet set up KMW at all, or users with manual KMW setups.

The CTA of said banner will trigger the user input questionnaire, allowing KMW to be set up in a tailored manner. A screenshot of said new banner is showcased below:

This banner component, to be named ACRSubtleNotifciation, should utilize the existing SubtleNotification component given the vast similarities.

As part of this issue, Banner should be included within KMW settings area for users who have not set up KMW, OR who did manual KMW setup. It should check for VIEW_CONTEXT_SETTINGS to include the content and CTA variations.

Figma design can be found here and here

See Implementation - Subtle Banner Notification For Detected Events section of the design doc

---

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

Acceptance criteria

• New inline callout banner ACRSubtleNotification is created
  • It should match the figma design
• Banner should be shown within the Key Metrics admin settings area only if:
  • KMW is not setup - the banner will replace the existing settings content
  • KMW was setup manually, i.e the user chose their own metrics - the banner is shown below the display key metrics in dashboard toggle
• Clicking the Maybe later CTA should dismiss the banner
  • The existing content should be shown instead
• Clicking the Get tailored metrics CTA should navigate to the user input questionnaire screen
• Banner should be displayed only when conversionReporting feature flag is enabled
• See Implementation - Subtle Banner Notification For Detected Events section of the design doc

Implementation Brief

• [ ] Update assets/js/googlesitekit/notifications/components/layout/SubtleNotification.js, include new prop icon and render included icon instead of current CheckFill when present
• [ ] Add assets/js/components/KeyMetrics/ACRSubtleNotification.js
  • Include the above SubtleNotification component for the markup
  • Add the icon from the Figma and pass it to an icon prop of the SubtleNotification
  • onDismiss callback should dismiss notification, using dismissItem action from CORE_USER datastore, you can use key, for example ACR_SUBTLE_NOTIFICATION_SLUG.
  • Use the title, description and additionalCTA label from the design, and include them as props for SubtleNotification
  • For additionalCTA use Button component, and click callback should navigate to the user input screen, you can see here how to obtain the URL https://github.com/google/site-kit-wp/blob/0525c3b6f74dd88d924de35ef7658ad67ce4e774/assets/js/components/settings/SettingsCardKeyMetrics.js#L50-L52
  • Check if banner was already dismissed to return early
• [ ] In assets/js/components/settings/SettingsCardKeyMetrics.js
  • When key metrics are set up manually or not setup - https://github.com/google/site-kit-wp/blob/0525c3b6f74dd88d924de35ef7658ad67ce4e774/assets/js/components/settings/SettingsCardKeyMetrics.js#L115
  • If ACR_SUBTLE_NOTIFICATION_SLUG is not dismissed, and conversionReporting feature flag is enabled omit displaying components in the Cell https://github.com/google/site-kit-wp/blob/0525c3b6f74dd88d924de35ef7658ad67ce4e774/assets/js/components/settings/SettingsCardKeyMetrics.js#L121-L156 The survey trigger bellow should still be included, since banner will still offer the tailored metrics setup
• [ ] Update assets/js/components/settings/SettingsKeyMetrics.js
  • If key metrics were not setup - you can leverage included check https://github.com/google/site-kit-wp/blob/0525c3b6f74dd88d924de35ef7658ad67ce4e774/assets/js/components/settings/SettingsKeyMetrics.js#L77-L79 return ACRSubtleNotification instead of currently returned null when conversionReporting is enabled
  • Check if KMW was setup manually by using getUserPickedMetrics selector, it will return undefined if KMW was not set manually, and conditionally render ACRSubtleNotification after the Switch component, if conversionReporting is enabled. It can be in the same row, or perhaps in separate row.
• Add assets/sass/components/key-metrics/_googlesitekit-acr-subtle-notification.scss to include any additional styles that might be needed (like different background color, etc)
• Banner should match the two scenarios, showing for users that have not yet setup KMW and when they have done the manual KMW setup

Test Coverage

• Add jest tests for SettingsKeyMetrics, since there are no tests currently, include only the tests concerning the ACRSubtleNotification component - verifying that it is showing/not showing as intended. No need to include extra test for covering the existing logic of SettingsKeyMetrics as a whole, as that would be outside of scope for this issue
• Add the basic jest test for ACRSubtleNotification component, verifying that CTA's are working as intended

QA Brief

• Setup Site Kit with conversionReporting feature flag enabled
• Setup Analytics module
• Go to Settings -> Admin Settings -> Key Metrics
• Verify that inline notification is showing and matches Figma design
• Verify that. Maybe later dismisses banner permanently and Get tailored metrics redirect to the user input questions
• Notification should should when KMW are not set, or when they are setup using manual selection
• Once KMW is setup using tailored metrics, notification should not appear in settings
• Notification should not appear without feature flag

Changelog entry

• Add new notification to Key Metrics Widget Settings Area.

[10upsimon]

@zutigrm AC looks good to me, moving to IB

[eugene-manuilov]

IB ✔