Update/remove NoAudienceBannerWidget variants to reflect unreachable …

…scenarios. The unreachable scenario being the case where there are no available audiences, as there will always be at least one, due to the "All Users" audience being un-archivable.
google · Sep 6, 2024 · fbb99d8 · fbb99d8
1 parent cdec763
commit fbb99d8
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 313 deletions.
diff --git a/...tics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/ActionContent.js b/...tics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/ActionContent.js
diff --git a/...4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/DescriptionContent.js b/...4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/DescriptionContent.js
diff --git a/...s-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js b/...s-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js
@@ -17,41 +17,115 @@
  */
 
 /**
- * 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 (
 		<LeanCTABanner
 			className="googlesitekit-no-audience-banner"
 			Icon={ Icon }
 			SVGGraphic={ NoAudienceBannerGraphic }
 		>
-			<DescriptionContent
-				hasConfigurableAudiences={ hasConfigurableAudiences }
-			/>
-			<ActionContent
-				hasConfigurableAudiences={ hasConfigurableAudiences }
-			/>
+			<p>
+				{ ( isViewOnly || didSetAudiences ) &&
+					createInterpolateElement(
+						__(
+							'You don’t have any visitor groups selected. <a>Select groups</a>.',
+							'google-site-kit'
+						),
+						{
+							a: (
+								<Link
+									secondary
+									onClick={ () =>
+										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 <a>Analytics</a>.',
+							'google-site-kit'
+						),
+						{
+							a: (
+								<Link
+									secondary
+									href={ audienceLearnMoreURL }
+									external
+									hideExternalIndicator
+								/>
+							),
+						}
+					) }
+			</p>
+			{ ! isViewOnly && (
+				<p>
+					{ createInterpolateElement(
+						__(
+							'You can deactivate this widget in <a>Settings</a>.',
+							'google-site-kit'
+						),
+						{
+							a: (
+								<Link
+									secondary
+									onClick={ () =>
+										navigateTo(
+											`${ settingsURL }#/admin-settings`
+										)
+									}
+								/>
+							),
+						}
+					) }
+				</p>
+			) }
 		</LeanCTABanner>
 	);
 }
-
-NoAudienceBanner.propTypes = {
-	hasConfigurableAudiences: PropTypes.bool.isRequired,
-};
diff --git a/...es/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.js b/...es/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.js
@@ -50,9 +50,7 @@ function NoAudienceBannerWidget( { Widget, WidgetNull } ) {
 	) {
 		return (
 			<Widget noPadding>
-				<NoAudienceBanner
-					hasConfigurableAudiences={ !! availableAudiences?.length }
-				/>
+				<NoAudienceBanner />
 			</Widget>
 		);
 	}