diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/ActionContent.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/ActionContent.js deleted file mode 100644 index d7686f47c3b..00000000000 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/ActionContent.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * ActionContent component. - * - * 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 { createInterpolateElement } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { useDispatch, useSelect } from 'googlesitekit-data'; -import Link from '../../../../../../components/Link'; -import { CORE_LOCATION } from '../../../../../../googlesitekit/datastore/location/constants'; -import { CORE_SITE } from '../../../../../../googlesitekit/datastore/site/constants'; -import useViewOnly from '../../../../../../hooks/useViewOnly'; - -export default function ActionContent( { hasConfigurableAudiences } ) { - const isViewOnly = useViewOnly(); - - const settingsURL = useSelect( ( select ) => - select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' ) - ); - - const { navigateTo } = useDispatch( CORE_LOCATION ); - - function hideAudiencesWidget() { - // TODO: dismiss item... - } - - if ( isViewOnly ) { - if ( ! hasConfigurableAudiences ) { - return ( -

- { createInterpolateElement( - __( - 'You can temporarily hide this feature until groups are available.', - 'google-site-kit' - ), - { - a: ( - - ), - } - ) } -

- ); - } - - return null; - } - - return ( -

- { createInterpolateElement( - __( - 'You can deactivate this widget in Settings.', - 'google-site-kit' - ), - { - a: ( - - navigateTo( `${ settingsURL }#/admin-settings` ) - } - /> - ), - } - ) } -

- ); -} - -ActionContent.propTypes = { - hasConfigurableAudiences: PropTypes.bool.isRequired, -}; diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/DescriptionContent.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/DescriptionContent.js deleted file mode 100644 index bfb9161ffdb..00000000000 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/DescriptionContent.js +++ /dev/null @@ -1,134 +0,0 @@ -/** - * DescriptionContent component. - * - * 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 { createInterpolateElement } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { useDispatch, useSelect } from 'googlesitekit-data'; -import Link from '../../../../../../components/Link'; -import { CORE_SITE } from '../../../../../../googlesitekit/datastore/site/constants'; -import { CORE_UI } from '../../../../../../googlesitekit/datastore/ui/constants'; -import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants'; -import { AUDIENCE_SELECTION_PANEL_OPENED_KEY } from '../AudienceSelectionPanel/constants'; -import useViewOnly from '../../../../../../hooks/useViewOnly'; - -export default function DescriptionContent( { hasConfigurableAudiences } ) { - const isViewOnly = useViewOnly(); - - const hasConfiguredAudiences = useSelect( - ( select ) => select( CORE_USER ).getConfiguredAudiences().length > 0 - ); - - const didSetAudiences = useSelect( ( select ) => - select( CORE_USER ).didSetAudiences() - ); - - const audienceLearnMoreURL = useSelect( ( select ) => - select( CORE_SITE ).getGoogleSupportURL( { - path: '/analytics/answer/12799087', - } ) - ); - - const { setValue } = useDispatch( CORE_UI ); - - if ( ! hasConfigurableAudiences ) { - if ( ! hasConfiguredAudiences && ( isViewOnly || ! didSetAudiences ) ) { - return ( -

- { createInterpolateElement( - __( - 'There are no visitor groups available. Learn more about how to group site visitors in Analytics.', - 'google-site-kit' - ), - { - a: ( - - ), - } - ) } -

- ); - } - - // The user either has configured audiences (which no longer exist), or is an authenticated user who has previously populated their configured audiences. - return ( -

- { createInterpolateElement( - __( - 'It looks like your visitor groups aren’t available anymore. Learn more about how to group site visitors in Analytics.', - 'google-site-kit' - ), - { - a: ( - - ), - } - ) } -

- ); - } - - return ( -

- { createInterpolateElement( - __( - 'It looks like your visitor groups aren’t available anymore. Select other groups.', - 'google-site-kit' - ), - { - a: ( - - setValue( - AUDIENCE_SELECTION_PANEL_OPENED_KEY, - true - ) - } - /> - ), - } - ) } -

- ); -} - -DescriptionContent.propTypes = { - hasConfigurableAudiences: PropTypes.bool.isRequired, -}; diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js index 5d232344ece..25f92da8890 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js +++ b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js @@ -17,24 +17,47 @@ */ /** - * External dependencies + * WordPress dependencies */ -import PropTypes from 'prop-types'; +import { createInterpolateElement } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useSelect } from 'googlesitekit-data'; +import { useDispatch, useSelect } from 'googlesitekit-data'; import NoAudienceBannerGraphic from '../../../../../../../svg/graphics/no-audience-banner-graphic.svg'; +import Link from '../../../../../../components/Link'; import { CORE_MODULES } from '../../../../../../googlesitekit/modules/datastore/constants'; import LeanCTABanner from '../../../../../../components/LeanCTABanner'; -import DescriptionContent from './DescriptionContent'; -import ActionContent from './ActionContent'; +import { CORE_LOCATION } from '../../../../../../googlesitekit/datastore/location/constants'; +import { CORE_SITE } from '../../../../../../googlesitekit/datastore/site/constants'; +import { CORE_UI } from '../../../../../../googlesitekit/datastore/ui/constants'; +import { CORE_USER } from '.././../../../../../googlesitekit/datastore/user/constants'; +import { AUDIENCE_SELECTION_PANEL_OPENED_KEY } from '../AudienceSelectionPanel/constants'; +import useViewOnly from '../../../../../../hooks/useViewOnly'; + +export default function NoAudienceBanner() { + const isViewOnly = useViewOnly(); + + const didSetAudiences = useSelect( ( select ) => + select( CORE_USER ).didSetAudiences() + ); -export default function NoAudienceBanner( { hasConfigurableAudiences } ) { const Icon = useSelect( ( select ) => select( CORE_MODULES ).getModuleIcon( 'analytics-4' ) ); + const settingsURL = useSelect( ( select ) => + select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' ) + ); + const audienceLearnMoreURL = useSelect( ( select ) => + select( CORE_SITE ).getGoogleSupportURL( { + path: '/analytics/answer/12799087', + } ) + ); + + const { setValue } = useDispatch( CORE_UI ); + const { navigateTo } = useDispatch( CORE_LOCATION ); return ( - - +

+ { ( isViewOnly || didSetAudiences ) && + createInterpolateElement( + __( + 'You don’t have any visitor groups selected. Select groups.', + 'google-site-kit' + ), + { + a: ( + + setValue( + AUDIENCE_SELECTION_PANEL_OPENED_KEY, + true + ) + } + /> + ), + } + ) } + { ! ( isViewOnly || didSetAudiences ) && + createInterpolateElement( + __( + 'It looks like your visitor groups aren’t available anymore. Learn more about how to group site visitors in Analytics.', + 'google-site-kit' + ), + { + a: ( + + ), + } + ) } +

+ { ! isViewOnly && ( +

+ { createInterpolateElement( + __( + 'You can deactivate this widget in Settings.', + 'google-site-kit' + ), + { + a: ( + + navigateTo( + `${ settingsURL }#/admin-settings` + ) + } + /> + ), + } + ) } +

+ ) }
); } - -NoAudienceBanner.propTypes = { - hasConfigurableAudiences: PropTypes.bool.isRequired, -}; diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.js index 41cda656d0f..86d6df47ee0 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.js +++ b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.js @@ -50,9 +50,7 @@ function NoAudienceBannerWidget( { Widget, WidgetNull } ) { ) { return ( - + ); } diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.stories.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.stories.js index b2a122d51b1..f78c35bf704 100644 --- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.stories.js +++ b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.stories.js @@ -44,16 +44,17 @@ function Template() { return ; } -export const AuthenticatedUserWithoutConfigurableAudiencesNeverSetup = - Template.bind( {} ); -AuthenticatedUserWithoutConfigurableAudiencesNeverSetup.storyName = - 'Authenticated user, no selectable audiences, never populated their audience selection'; -AuthenticatedUserWithoutConfigurableAudiencesNeverSetup.scenario = {}; -AuthenticatedUserWithoutConfigurableAudiencesNeverSetup.args = { +export const AuthenticatedUserNeverSetup = Template.bind( {} ); +AuthenticatedUserNeverSetup.storyName = + 'Authenticated user, never populated their audience selection'; +AuthenticatedUserNeverSetup.scenario = {}; +AuthenticatedUserNeverSetup.args = { setupRegistry: ( registry ) => { provideUserAuthentication( registry ); - registry.dispatch( MODULES_ANALYTICS_4 ).setAvailableAudiences( [] ); + registry + .dispatch( MODULES_ANALYTICS_4 ) + .setAvailableAudiences( availableAudiences ); registry.dispatch( CORE_USER ).receiveGetAudienceSettings( { configuredAudiences: [], @@ -61,28 +62,12 @@ AuthenticatedUserWithoutConfigurableAudiencesNeverSetup.args = { } ); }, }; -export const AuthenticatedUserWithoutConfigurableAudiencesHasSetup = - Template.bind( {} ); -AuthenticatedUserWithoutConfigurableAudiencesHasSetup.storyName = - 'Authenticated user, no selectable audiences, previously populated their audience selection'; -AuthenticatedUserWithoutConfigurableAudiencesHasSetup.scenario = {}; -AuthenticatedUserWithoutConfigurableAudiencesHasSetup.args = { - setupRegistry: ( registry ) => { - provideUserAuthentication( registry ); - - registry.dispatch( MODULES_ANALYTICS_4 ).setAvailableAudiences( [] ); - registry.dispatch( CORE_USER ).receiveGetAudienceSettings( { - configuredAudiences: [], - didSetAudiences: true, - } ); - }, -}; -export const AuthenticatedUserWithConfigurableAudiences = Template.bind( {} ); -AuthenticatedUserWithConfigurableAudiences.storyName = - 'Authenticated user with selectable audiences'; -AuthenticatedUserWithConfigurableAudiences.scenario = {}; -AuthenticatedUserWithConfigurableAudiences.args = { +export const AuthenticatedUserHasSetup = Template.bind( {} ); +AuthenticatedUserHasSetup.storyName = + 'Authenticated user, previously populated their audience selection'; +AuthenticatedUserHasSetup.scenario = {}; +AuthenticatedUserHasSetup.args = { setupRegistry: ( registry ) => { provideUserAuthentication( registry ); @@ -97,48 +82,31 @@ AuthenticatedUserWithConfigurableAudiences.args = { }, }; -export const ViewOnlyUserWithoutConfigurableAudiencesNeverSetup = Template.bind( - {} -); -ViewOnlyUserWithoutConfigurableAudiencesNeverSetup.storyName = - 'View only user, no selectable audiences, never populated their audience selection'; -ViewOnlyUserWithoutConfigurableAudiencesNeverSetup.scenario = {}; -ViewOnlyUserWithoutConfigurableAudiencesNeverSetup.args = { +export const ViewOnlyUserNeverSetup = Template.bind( {} ); +ViewOnlyUserNeverSetup.storyName = + 'View-only user, never populated their audience selection'; +ViewOnlyUserNeverSetup.scenario = {}; +ViewOnlyUserNeverSetup.args = { setupRegistry: ( registry ) => { provideUserAuthentication( registry, { authenticated: false } ); - registry.dispatch( MODULES_ANALYTICS_4 ).setAvailableAudiences( [] ); + registry + .dispatch( MODULES_ANALYTICS_4 ) + .setAvailableAudiences( availableAudiences ); registry.dispatch( CORE_USER ).receiveGetAudienceSettings( { configuredAudiences: [], + didSetAudiences: false, } ); }, isViewOnly: true, }; -export const ViewOnlyUserWithoutConfigurableAudiencesHasSetup = Template.bind( - {} -); -ViewOnlyUserWithoutConfigurableAudiencesHasSetup.storyName = - 'View only user, no selectable audiences, previously populated their audience selection'; -ViewOnlyUserWithoutConfigurableAudiencesHasSetup.scenario = {}; -ViewOnlyUserWithoutConfigurableAudiencesHasSetup.args = { - viewContext: VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY, - setupRegistry: ( registry ) => { - provideUserAuthentication( registry, { authenticated: false } ); - - registry.dispatch( MODULES_ANALYTICS_4 ).setAvailableAudiences( [] ); - registry.dispatch( CORE_USER ).receiveGetAudienceSettings( { - configuredAudiences: [], - } ); - }, - isViewOnly: true, -}; -export const ViewOnlyUserWithConfigurableAudiences = Template.bind( {} ); -ViewOnlyUserWithConfigurableAudiences.storyName = - 'View only user with selectable audiences'; -ViewOnlyUserWithConfigurableAudiences.scenario = {}; -ViewOnlyUserWithConfigurableAudiences.args = { +export const ViewOnlyUserHasSetup = Template.bind( {} ); +ViewOnlyUserHasSetup.storyName = + 'View-only user, previously populated their audience selection'; +ViewOnlyUserHasSetup.scenario = {}; +ViewOnlyUserHasSetup.args = { setupRegistry: ( registry ) => { provideUserAuthentication( registry, { authenticated: false } ); @@ -148,6 +116,7 @@ ViewOnlyUserWithConfigurableAudiences.args = { registry.dispatch( CORE_USER ).receiveGetAudienceSettings( { configuredAudiences: [], + didSetAudiences: true, } ); }, isViewOnly: true, diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_0_small.png deleted file mode 100644 index 1af073cfb41..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_0_small.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_1_medium.png deleted file mode 100644 index c8b0b5d4969..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_1_medium.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_2_large.png deleted file mode 100644 index 764f07df8af..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_no_selectable_audiences_previously_populated_their_audience_selection_0_document_2_large.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_0_small.png deleted file mode 100644 index 4d296ac07b3..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_0_small.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_1_medium.png deleted file mode 100644 index 2f2d2d1524b..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_1_medium.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_2_large.png deleted file mode 100644 index f06d4dc3f01..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_NoAudienceBannerWidget_Authenticated_user_with_selectable_audiences_0_document_2_large.png and /dev/null differ