diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AddGroupNotice.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AddGroupNotice.js new file mode 100644 index 00000000000..13340c0f537 --- /dev/null +++ b/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 ( + + ); +} + +AddGroupNotice.propTypes = { + savedItemSlugs: PropTypes.array, +}; diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItem.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItem.js index b371688081c..f87e2f5104f 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItem.js +++ b/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 ] diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/constants.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/constants.js index e4a2d7b5bec..6ae8020c584 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/constants.js +++ b/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; diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/index.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/index.js index b6fe8ec9af0..8330d0486e5 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/index.js +++ b/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() { >
+