From a7b5d092357f8d63620059731c84d3d3c29a730e Mon Sep 17 00:00:00 2001 From: nfmohit Date: Mon, 17 Jun 2024 03:00:07 +0600 Subject: [PATCH 1/7] Extend `InfoNotice` to accept custom class name and icon. --- .../dashboard/InfoNotice.js | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/InfoNotice.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/InfoNotice.js index 8173dd7a9d2..a9d228193ca 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/InfoNotice.js +++ b/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 ( -
- +
+

{ content }

@@ -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, }; From d6234a4654296c4c7bb980b8416e63fd5f0429e0 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Mon, 17 Jun 2024 03:03:47 +0600 Subject: [PATCH 2/7] Add `AddGroupNotice` component. --- .../AudienceSelectionPanel/AddGroupNotice.js | 75 +++++++++++++++++++ .../AudienceSelectionPanel/constants.js | 2 + .../dashboard/AudienceSelectionPanel/index.js | 2 + ...ooglesitekit-audience-selection-panel.scss | 32 ++++++++ 4 files changed, 111 insertions(+) create mode 100644 assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AddGroupNotice.js 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..b066b1408af --- /dev/null +++ b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AddGroupNotice.js @@ -0,0 +1,75 @@ +/** + * 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. + */ + +/** + * 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_SELECTED, + 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() { + const isDismissed = useSelect( ( select ) => + select( CORE_USER ).isItemDismissed( AUDIENCE_ADD_GROUP_NOTICE_SLUG ) + ); + const selectedGroups = useSelect( + ( select ) => + select( CORE_FORMS ).getValue( + AUDIENCE_SELECTION_FORM, + AUDIENCE_SELECTED + ) || [] + ); + + const { dismissItem } = useDispatch( CORE_USER ); + + const onDismiss = useCallback( async () => { + await dismissItem( AUDIENCE_ADD_GROUP_NOTICE_SLUG ); + }, [ dismissItem ] ); + + if ( isDismissed || selectedGroups.length !== 1 ) { + return null; + } + + return ( + + ); +} 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..2c15b156eb3 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,6 +16,8 @@ * 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'; 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..da26ebf6aa5 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 @@ -33,6 +33,7 @@ import { 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'; @@ -85,6 +86,7 @@ export default function AudienceSelectionPanel() { >
+