Enhancement/9281 Refactor Audience Segmentation Setup Success Notification

assets/js/components/notifications/SubtleNotifications.js

@@ -16,40 +16,12 @@
  * limitations under the License.
  */
 
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import { useFeature } from '../../hooks/useFeature';
-import AudienceSegmentationSetupSuccessSubtleNotification from '../../modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
-import useViewContext from '../../hooks/useViewContext';
 import Notifications from './Notifications';
 import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
 
 export default function SubtleNotifications() {
- const viewContext = useViewContext();
- const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
-
- // Each notification component rendered here has its own logic to determine
- // whether it should be displayed; in most cases none of these components
- // will be displayed, but it's also (currently) possible for multiple
- // notifications to be displayed if they each meet their criteria and haven't
- // been dismissed by the user.
- //
- // Because these notifications are subtle and small, this is acceptable UX.
- return (
- <Fragment>
- { audienceSegmentationEnabled && (
- <AudienceSegmentationSetupSuccessSubtleNotification />
- ) }
- <Notifications
- viewContext={ viewContext }
- areaSlug={ NOTIFICATION_AREAS.BANNERS_BELOW_NAV }
- />
- </Fragment>
- );
+ return <Notifications areaSlug={ NOTIFICATION_AREAS.BANNERS_BELOW_NAV } />;
 }

assets/js/googlesitekit-modules-analytics-4.js

@@ -22,12 +22,15 @@
 import Data from 'googlesitekit-data';
 import Modules from 'googlesitekit-modules';
 import Widgets from 'googlesitekit-widgets';
+import Notifications from 'googlesitekit-notifications';
 import {
  registerStore,
  registerModule,
  registerWidgets,
+ registerNotifications,
 } from './modules/analytics-4';
 
 registerStore( Data );
 registerModule( Modules );
 registerWidgets( Widgets );
+registerNotifications( Notifications );

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.js

@@ -39,6 +39,7 @@ import whenActive from '../../../../../util/when-active';
 import { CORE_FORMS } from '../../../../../googlesitekit/datastore/forms/constants';
 import { CORE_USER } from '../../../../../googlesitekit/datastore/user/constants';
 import { CORE_SITE } from '../../../../../googlesitekit/datastore/site/constants';
+import { CORE_NOTIFICATIONS } from '../../../../../googlesitekit/notifications/datastore/constants';
 import {
  MODULES_ANALYTICS_4,
  AUDIENCE_SEGMENTATION_SETUP_FORM,
@@ -51,6 +52,7 @@ import {
  BREAKPOINT_TABLET,
  useBreakpoint,
 } from '../../../../../hooks/useBreakpoint';
+import useViewContext from '../../../../../hooks/useViewContext';
 import {
  AdminMenuTooltip,
  useShowTooltip,
@@ -65,11 +67,16 @@ export const AUDIENCE_SEGMENTATION_SETUP_CTA_NOTIFICATION =
  'audience_segmentation_setup_cta-notification';
 
 function AudienceSegmentationSetupCTAWidget( { Widget, WidgetNull } ) {
+ const viewContext = useViewContext();
+
  const breakpoint = useBreakpoint();
  const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
  const isTabletBreakpoint = breakpoint === BREAKPOINT_TABLET;
 
+ const { invalidateResolution } = useDispatch( CORE_NOTIFICATIONS );
+
  const { setValues } = useDispatch( CORE_FORMS );
+
  const showTooltip = useShowTooltip(
  AUDIENCE_SEGMENTATION_SETUP_CTA_NOTIFICATION
  );
@@ -110,6 +117,9 @@ function AudienceSegmentationSetupCTAWidget( { Widget, WidgetNull } ) {
  const { apiErrors, failedAudiences, isSaving, onEnableGroups } =
  useEnableAudienceGroup( {
  onSuccess: () => {
+ invalidateResolution( 'getQueuedNotifications', [
+ viewContext,
+ ] );
  dismissPrompt( AUDIENCE_SEGMENTATION_SETUP_CTA_NOTIFICATION, {
  expiresInSeconds: 0,
  } );

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification.js

@@ -24,49 +24,28 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useDispatch, useSelect } from 'googlesitekit-data';
-import { CORE_USER } from '../../../../../googlesitekit/datastore/user/constants';
 import { Button } from 'googlesitekit-components';
-import SubtleNotification from '../../SubtleNotification';
+import SubtleNotification from '../../../../../googlesitekit/notifications/components/layout/SubtleNotification';
 import { getNavigationalScrollTop } from '../../../../../util/scroll';
 import { useBreakpoint } from '../../../../../hooks/useBreakpoint';
-import useDashboardType, {
- DASHBOARD_TYPE_MAIN,
-} from '../../../../../hooks/useDashboardType';
-import useViewOnly from '../../../../../hooks/useViewOnly';
+import Dismiss from '../../../../../googlesitekit/notifications/components/common/Dismiss';
+import { useDispatch } from 'googlesitekit-data';
+import { CORE_NOTIFICATIONS } from '../../../../../googlesitekit/notifications/datastore/constants';
 
 export const AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION =
- 'audience_segmentation_setup_success_notification';
+ 'setup-success-notification-audiences';
 
-export default function AudienceSegmentationSetupSuccessSubtleNotification() {
+export default function AudienceSegmentationSetupSuccessSubtleNotification( {
+ id,
+ Notification,
+} ) {
  const breakpoint = useBreakpoint();
- const dashboardType = useDashboardType();
- const viewOnly = useViewOnly();
-
- const configuredAudiences = useSelect( ( select ) =>
- select( CORE_USER ).getConfiguredAudiences()
- );
-
- const isDismissed = useSelect( ( select ) => {
- if ( ! dashboardType || viewOnly ) {
- return null;
- }
-
- return select( CORE_USER ).isItemDismissed(
- AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION
- );
- } );
-
- const { dismissItem } = useDispatch( CORE_USER );
-
- function dismissNotificationForUser() {
- dismissItem( AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION );
- }
+ const { dismissNotification } = useDispatch( CORE_NOTIFICATIONS );
 
  const scrollToWidgetArea = ( event ) => {
  event.preventDefault();
 
- dismissNotificationForUser();
+ dismissNotification( AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION );
 
  setTimeout( () => {
  const widgetClass =
@@ -79,37 +58,30 @@ export default function AudienceSegmentationSetupSuccessSubtleNotification() {
  }, 50 );
  };
 
- const shouldShowNotification =
- // Only show this notification on the main dashboard, where the Setup CTA Banner is shown.
- dashboardType === DASHBOARD_TYPE_MAIN &&
- // Don't show this notification on the view-only dashboard.
- ! viewOnly &&
- // Don't show this notification if `isDismissed` call is still loading
- // or the user has dismissed it.
- ! isDismissed &&
- // Only show this notification if the user has a set of configured audiences.
- Array.isArray( configuredAudiences );
-
- if ( ! shouldShowNotification ) {
- return null;
- }
-
  return (
- <SubtleNotification
- title={ __(
- 'Success! Visitor groups added to your dashboard',
- 'google-site-kit'
- ) }
- description={ __(
- 'Get to know how different types of visitors interact with your site, e.g. which pages they visit and for how long',
- 'google-site-kit'
- ) }
- onDismiss={ dismissNotificationForUser }
- additionalCTA={
- <Button onClick={ scrollToWidgetArea }>
- { __( 'Show me', 'google-site-kit' ) }
- </Button>
- }
- />
+ <Notification>
+ <SubtleNotification
+ title={ __(
+ 'Success! Visitor groups added to your dashboard',
+ 'google-site-kit'
+ ) }
+ description={ __(
+ 'Get to know how different types of visitors interact with your site, e.g. which pages they visit and for how long',
+ 'google-site-kit'
+ ) }
+ dismissCTA={
+ <Dismiss
+ id={ id }
+ primary={ false }
+ dismissLabel={ __( 'Got it', 'google-site-kit' ) }
+ />
+ }
+ additionalCTA={
+ <Button onClick={ scrollToWidgetArea }>
+ { __( 'Show me', 'google-site-kit' ) }
+ </Button>
+ }
+ />
+ </Notification>
  );
 }

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification.stories.js

@@ -19,43 +19,22 @@
 /**
  * Internal dependencies
  */
-import { Provider as ViewContextProvider } from '../../../../../components/Root/ViewContextContext';
 import AudienceSegmentationSetupSuccessSubtleNotification from './AudienceSegmentationSetupSuccessSubtleNotification';
-import WithRegistrySetup from '../../../../../../../tests/js/WithRegistrySetup';
-import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../../../../googlesitekit/constants';
-import { CORE_USER } from '../../../../../googlesitekit/datastore/user/constants';
+import { withNotificationComponentProps } from '../../../../../googlesitekit/notifications/util/component-props';
+
+const NotificationWithComponentProps = withNotificationComponentProps(
+ 'setup-success-notification-audiences'
+)( AudienceSegmentationSetupSuccessSubtleNotification );
 
 function Template() {
- return (
- <ViewContextProvider value={ VIEW_CONTEXT_MAIN_DASHBOARD }>
- <AudienceSegmentationSetupSuccessSubtleNotification />
- </ViewContextProvider>
- );
+ return <NotificationWithComponentProps />;
 }
-
 export const Default = Template.bind( {} );
-Default.storyName = 'Default';
+Default.storyName = 'AudienceSegmentationSetupSuccessSubtleNotification';
 Default.scenario = {
  label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceSegmentationSetupSuccessSubtleNotification',
 };
 
 export default {
  title: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceSegmentationSetupSuccessSubtleNotification',
- decorators: [
- ( Story ) => {
- const setupRegistry = ( registry ) => {
- registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
-
- registry.dispatch( CORE_USER ).receiveGetAudienceSettings( {
- configuredAudiences: [ 'audienceA', 'audienceB' ],
- } );
- };
-
- return (
- <WithRegistrySetup func={ setupRegistry }>
- <Story />
- </WithRegistrySetup>
- );
- },
- ],
 };

assets/js/modules/analytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/SetupCTA.js

@@ -30,6 +30,7 @@ import { ProgressBar } from 'googlesitekit-components';
 import { CORE_FORMS } from '../../../../../../googlesitekit/datastore/forms/constants';
 import { CORE_SITE } from '../../../../../../googlesitekit/datastore/site/constants';
 import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
+import { CORE_NOTIFICATIONS } from '../../../../../../googlesitekit/notifications/datastore/constants';
 import { AUDIENCE_SEGMENTATION_SETUP_FORM } from '../../../../datastore/constants';
 import { AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION } from '../../dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
 import Link from '../../../../../../components/Link';
@@ -39,14 +40,16 @@ import useEnableAudienceGroup from '../../../../hooks/useEnableAudienceGroup';
 export default function SetupCTA() {
  const [ showErrorModal, setShowErrorModal ] = useState( false );
 
- const { dismissItem } = useDispatch( CORE_USER );
+ const { dismissNotification } = useDispatch( CORE_NOTIFICATIONS );
 
  const { apiErrors, failedAudiences, isSaving, onEnableGroups } =
  useEnableAudienceGroup( {
  redirectURL: global.location.href,
  onSuccess: () => {
  // Dismiss success notification in dashboard.
- dismissItem( AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION );
+ dismissNotification(
+ AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION
+ );
  },
  onError: () => {
  setShowErrorModal( true );

assets/js/modules/analytics-4/index.js

@@ -104,6 +104,12 @@ import {
 } from './components/audience-segmentation/dashboard';
 import DashboardMainEffectComponent from './components/DashboardMainEffectComponent';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import AudienceSegmentationSetupSuccessSubtleNotification, {
+ AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION,
+} from './components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
+import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
+import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../googlesitekit/constants';
+import { isFeatureEnabled } from '../../features';
 
 export { registerStore } from './datastore';
 
@@ -660,3 +666,26 @@ export const registerWidgets = ( widgets ) => {
  [ AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY ]
  );
 };
+
+export const registerNotifications = ( notifications ) => {
+ if ( isFeatureEnabled( 'audienceSegmentation' ) ) {
+ notifications.registerNotification(
+ AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION,
+ {
+ Component: AudienceSegmentationSetupSuccessSubtleNotification,
+ priority: 10,
+ areaSlug: NOTIFICATION_AREAS.BANNERS_BELOW_NAV,
+ viewContexts: [ VIEW_CONTEXT_MAIN_DASHBOARD ],
+ checkRequirements: async ( { select, resolveSelect } ) => {
+ await resolveSelect( MODULES_ANALYTICS_4 ).getSettings();
+ const configuredAudiences =
+ select( CORE_USER ).getConfiguredAudiences();
+
+ // Only show this notification if the user has a set of configured audiences.
+ return Array.isArray( configuredAudiences );
+ },
+ isDismissible: true,
+ }
+ );
+ }
+};

includes/Modules/Analytics_4/Reset_Audiences.php

@@ -61,7 +61,7 @@ class Reset_Audiences {
 
  const AUDIENCE_SEGMENTATION_DISMISSED_ITEMS = array(
  'audience-segmentation-add-group-notice',
- 'audience_segmentation_setup_success_notification',
+ 'setup-success-notification-audiences',
  'settings_visitor_groups_setup_success_notification',
  'audience-segmentation-no-audiences-banner',
  'audience-tile-*',