Implement selection panel add group notice

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

@@ -0,0 +1,84 @@
+/**
+ * Audience Selection Panel Add Group Notice
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import {
+	AUDIENCE_ADD_GROUP_NOTICE_SLUG,
+	AUDIENCE_SELECTION_CHANGED,
+	AUDIENCE_SELECTION_FORM,
+} from './constants';
+import { CORE_FORMS } from '../../../../../../googlesitekit/datastore/forms/constants';
+import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
+import InfoIcon from '../../../../../../../svg/icons/info-circle.svg';
+import InfoNotice from '../InfoNotice';
+
+const { useDispatch, useSelect } = Data;
+
+export default function AddGroupNotice( { savedItemSlugs = [] } ) {
+	const isDismissed = useSelect( ( select ) =>
+		select( CORE_USER ).isItemDismissed( AUDIENCE_ADD_GROUP_NOTICE_SLUG )
+	);
+	const selectionChanged = useSelect(
+		( select ) =>
+			select( CORE_FORMS ).getValue(
+				AUDIENCE_SELECTION_FORM,
+				AUDIENCE_SELECTION_CHANGED
+			) || false
+	);
+
+	const { dismissItem } = useDispatch( CORE_USER );
+
+	const onDismiss = useCallback( async () => {
+		await dismissItem( AUDIENCE_ADD_GROUP_NOTICE_SLUG );
+	}, [ dismissItem ] );
+
+	if ( isDismissed || savedItemSlugs.length !== 1 || selectionChanged ) {
+		return null;
+	}
+
+	return (
+		<InfoNotice
+			className="googlesitekit-audience-selection-panel__add-group-notice"
+			content={ __(
+				'By adding another group to your dashboard, you will be able to compare them and understand which content brings back users from each group',
+				'google-site-kit'
+			) }
+			dismissLabel={ __( 'Got it', 'google-site-kit' ) }
+			Icon={ InfoIcon }
+			onDismiss={ onDismiss }
+		/>
+	);
+}
+
+AddGroupNotice.propTypes = {
+	savedItemSlugs: PropTypes.array,
+};

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

@@ -30,7 +30,11 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { AUDIENCE_SELECTED, AUDIENCE_SELECTION_FORM } from './constants';
+import {
+	AUDIENCE_SELECTED,
+	AUDIENCE_SELECTION_CHANGED,
+	AUDIENCE_SELECTION_FORM,
+} from './constants';
 import { CORE_FORMS } from '../../../../../../googlesitekit/datastore/forms/constants';
 import { numFmt } from '../../../../../../util';
 import { SelectionPanelItem } from '../../../../../../components/SelectionPanel';
@@ -61,6 +65,7 @@ export default function AudienceItem( {
 					: selectedItems.filter(
 							( selectedItem ) => selectedItem !== slug
 					  ),
+				[ AUDIENCE_SELECTION_CHANGED ]: true,
 			} );
 		},
 		[ selectedItems, setValues, slug ]

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

@@ -16,9 +16,12 @@
  * limitations under the License.
  */
 
+export const AUDIENCE_ADD_GROUP_NOTICE_SLUG =
+	'audience-segmentation-add-group-notice';
 export const AUDIENCE_SELECTION_PANEL_OPENED_KEY =
 	'googlesitekit-audience-selection-panel-opened';
 export const AUDIENCE_SELECTION_FORM = 'audience-selection-form';
 export const AUDIENCE_SELECTED = 'audience-selected';
+export const AUDIENCE_SELECTION_CHANGED = 'audience-selection-changed';
 export const MIN_SELECTED_AUDIENCES_COUNT = 1;
 export const MAX_SELECTED_AUDIENCES_COUNT = 3;

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

@@ -27,12 +27,14 @@ import { useCallback } from '@wordpress/element';
 import Data from 'googlesitekit-data';
 import {
 	AUDIENCE_SELECTED,
+	AUDIENCE_SELECTION_CHANGED,
 	AUDIENCE_SELECTION_FORM,
 	AUDIENCE_SELECTION_PANEL_OPENED_KEY,
 } from './constants';
 import { CORE_FORMS } from '../../../../../../googlesitekit/datastore/forms/constants';
 import { CORE_UI } from '../../../../../../googlesitekit/datastore/ui/constants';
 import { MODULES_ANALYTICS_4 } from '../../../../datastore/constants';
+import AddGroupNotice from './AddGroupNotice';
 import AudienceItems from './AudienceItems';
 import Footer from './Footer';
 import Header from './Header';
@@ -67,6 +69,7 @@ export default function AudienceSelectionPanel() {
 	const onSideSheetOpen = useCallback( () => {
 		setValues( AUDIENCE_SELECTION_FORM, {
 			[ AUDIENCE_SELECTED ]: savedItemSlugs,
+			[ AUDIENCE_SELECTION_CHANGED ]: false,
 		} );
 	}, [ savedItemSlugs, setValues ] );
 
@@ -85,6 +88,7 @@ export default function AudienceSelectionPanel() {
 		>
 			<Header closePanel={ closePanel } />
 			<AudienceItems savedItemSlugs={ savedItemSlugs } />
+			<AddGroupNotice savedItemSlugs={ savedItemSlugs } />
 			<LearnMoreLink />
 			<Footer
 				closePanel={ closePanel }

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

@@ -60,7 +60,7 @@ ViewOnlyUser.scenario = {
 };
 
 export const WithSavedItems = Template.bind( {} );
-WithSavedItems.storyName = 'WithSavedItems';
+WithSavedItems.storyName = 'With saved items';
 WithSavedItems.args = {
 	configuredAudiences: [
 		'properties/12345/audiences/3',
@@ -71,6 +71,15 @@ WithSavedItems.scenario = {
 	label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceSelectionPanel/WithSavedItems',
 };
 
+export const WithOneGroup = Template.bind( {} );
+WithOneGroup.storyName = 'With one group selected';
+WithOneGroup.args = {
+	configuredAudiences: [ 'properties/12345/audiences/3' ],
+};
+WithOneGroup.scenario = {
+	label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceSelectionPanel/WithOneGroup',
+};
+
 export default {
 	title: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceSelectionPanel',
 	component: AudienceSelectionPanel,

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/index.test.js

@@ -19,7 +19,12 @@
 /**
  * Internal dependencies
  */
-import { AUDIENCE_SELECTED, AUDIENCE_SELECTION_FORM } from './constants';
+import {
+	AUDIENCE_ADD_GROUP_NOTICE_SLUG,
+	AUDIENCE_SELECTED,
+	AUDIENCE_SELECTION_CHANGED,
+	AUDIENCE_SELECTION_FORM,
+} from './constants';
 import { CORE_FORMS } from '../../../../../../googlesitekit/datastore/forms/constants';
 import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
 import { MODULES_ANALYTICS_4 } from '../../../../datastore/constants';
@@ -59,6 +64,7 @@ describe( 'AudienceSelectionPanel', () => {
 		provideUserAuthentication( registry );
 
 		registry.dispatch( CORE_USER ).setReferenceDate( '2024-03-28' );
+		registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
 
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
@@ -275,6 +281,109 @@ describe( 'AudienceSelectionPanel', () => {
 		} );
 	} );
 
+	describe( 'AddGroupNotice', () => {
+		it( 'should display notice when there is a saved selection of one group', async () => {
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.setConfiguredAudiences( [ 'properties/12345/audiences/3' ] );
+
+			const { getByText, waitForRegistry } = render(
+				<AudienceSelectionPanel />,
+				{
+					registry,
+				}
+			);
+
+			await waitForRegistry();
+
+			expect(
+				getByText(
+					/By adding another group to your dashboard, you will be able to compare them and understand which content brings back users from each group/i
+				)
+			).toBeInTheDocument();
+		} );
+
+		it.each( [
+			[ 'less', [] ],
+			[ 'more', configuredAudiences ],
+		] )(
+			'should not display notice when there is a saved selection of %s than one group',
+			async ( _, audiences ) => {
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setConfiguredAudiences( audiences );
+
+				const { queryByText, waitForRegistry } = render(
+					<AudienceSelectionPanel />,
+					{
+						registry,
+					}
+				);
+
+				await waitForRegistry();
+
+				expect(
+					queryByText(
+						/By adding another group to your dashboard, you will be able to compare them and understand which content brings back users from each group/i
+					)
+				).not.toBeInTheDocument();
+			}
+		);
+
+		it( 'should not display notice when the selection changes', async () => {
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.setConfiguredAudiences( [ 'properties/12345/audiences/3' ] );
+
+			registry
+				.dispatch( CORE_FORMS )
+				.setValues( AUDIENCE_SELECTION_FORM, {
+					[ AUDIENCE_SELECTED ]: configuredAudiences,
+					[ AUDIENCE_SELECTION_CHANGED ]: true,
+				} );
+
+			const { queryByText, waitForRegistry } = render(
+				<AudienceSelectionPanel />,
+				{
+					registry,
+				}
+			);
+
+			await waitForRegistry();
+
+			expect(
+				queryByText(
+					/By adding another group to your dashboard, you will be able to compare them and understand which content brings back users from each group/i
+				)
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should not display notice when dismissed', async () => {
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.setConfiguredAudiences( [ 'properties/12345/audiences/3' ] );
+
+			registry
+				.dispatch( CORE_USER )
+				.receiveGetDismissedItems( [ AUDIENCE_ADD_GROUP_NOTICE_SLUG ] );
+
+			const { queryByText, waitForRegistry } = render(
+				<AudienceSelectionPanel />,
+				{
+					registry,
+				}
+			);
+
+			await waitForRegistry();
+
+			expect(
+				queryByText(
+					/By adding another group to your dashboard, you will be able to compare them and understand which content brings back users from each group/i
+				)
+			).not.toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'LearnMoreLink', () => {
 		it( 'should display a learn more link', async () => {
 			const { getByText, waitForRegistry } = render(

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

@@ -19,6 +19,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
@@ -27,10 +28,21 @@ import PropTypes from 'prop-types';
 import { Button } from 'googlesitekit-components';
 import LightbulbIcon from '../../../../../../svg/icons/lightbulb.svg';
 
-export default function InfoNotice( { content, dismissLabel, onDismiss } ) {
+export default function InfoNotice( {
+	className,
+	content,
+	dismissLabel,
+	Icon = LightbulbIcon,
+	onDismiss,
+} ) {
 	return (
-		<div className="googlesitekit-audience-segmentation-info-notice">
-			<LightbulbIcon width="20" height="20" />
+		<div
+			className={ classnames(
+				'googlesitekit-audience-segmentation-info-notice',
+				className
+			) }
+		>
+			<Icon width="20" height="20" />
 			<div className="googlesitekit-audience-segmentation-info-notice__body">
 				<p>{ content }</p>
 
@@ -49,7 +61,9 @@ export default function InfoNotice( { content, dismissLabel, onDismiss } ) {
 }
 
 InfoNotice.propTypes = {
+	className: PropTypes.string,
 	content: PropTypes.string.isRequired,
 	dismissLabel: PropTypes.string,
+	Icon: PropTypes.elementType,
 	onDismiss: PropTypes.func,
 };

assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss

@@ -36,5 +36,37 @@
 		.googlesitekit-selection-panel-footer {
 			margin: 0;
 		}
+
+		.googlesitekit-audience-selection-panel__add-group-notice {
+			background-color: $c-surfaces-background;
+			margin: 5px $grid-gap-desktop;
+			padding: $grid-gap-phone 20px;
+
+			@media (max-width: $bp-xsmallOnly) {
+				padding: $grid-gap-phone;
+			}
+
+			.googlesitekit-audience-segmentation-info-notice__body {
+				flex-wrap: nowrap;
+				grid-gap: 0 30px;
+
+				@media (max-width: $bp-xsmallOnly) {
+					flex-wrap: wrap;
+				}
+
+				p {
+					margin: 0;
+				}
+			}
+
+			svg {
+				height: 22px;
+				width: 22px;
+			}
+
+			.googlesitekit-audience-segmentation-info-notice__dismiss {
+				color: $c-surfaces-on-surface;
+			}
+		}
 	}
 }